Box Shadow

• Box shadow
• Inner glow
• CSS variables
• Customize

How to apply box shadows in CodyFrame.

Box shadow classes #

Box shadow utility classes:

Inner glow classes #

The inner glow classes are used to create a light ring inside an element. They're often used to 'elevate' elements in dark themes.

Optionally, you can combine the .shadow-ring, .shadow-{size}, and .inner-glow classes:

<div class="shadow-ring shadow-sm inner-glow"></div>

CSS variables #

Here's a list of the default box-shadow variables:

:root {
  /* box-shadow */
  --shadow-ring: 0 0 0 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05);

  --shadow-xs: 0 0 0 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.02), 0 1px 3px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.2);

  --shadow-sm: 0 0.3px 0.4px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.02), 0 0.9px 1.5px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.045), 0 3.5px 6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.09);

  --shadow-md: 0 0.9px 1.25px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025), 0 3px 5px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05), 0 12px 20px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.09);

  --shadow-lg: 0 1.2px 1.9px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.01), 0 3px 5px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.015), 0 8px 15px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05), 0 28px 40px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.1);
  
  --shadow-xl: 0 1.5px 2.1px -6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.009), 0 3.6px 5.2px -6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.0115), 0 7.3px 10.6px -6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.0125), 0 16.2px 21.9px -6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.025), 0 46px 60px -6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);
  
  /* inner-glow */
  --inner-glow: inset 0 0 0.5px 1px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075);
  --inner-glow-top: inset 0 0 0.5px 1px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075);
}

To apply a default shadow, use the variables in your CSS:

.component-1 {
  box-shadow: var(--shadow-sm);
}

.component-2 {
  box-shadow: var(--shadow-ring), var(--shadow-sm);
}

Customize #

In CodyFrame v4, you can edit the box-shadow and inner-glow default values by passing the $box-shadow and $inner-glow maps to the config module in your style.scss:

@use 'config' as * with (
  $box-shadow: (
    'ring': '0 0 0 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.05)',
    'xs': '0 0 0 1px hsla(var(--color-black-h)...',
    'sm': '0 0.3px 0.4px hsla(var(--color-black-h)...',
    'md': '0 0.9px 1.25px hsla(var(--color-black-h)...',
    'lg': '0 1.2px 1.9px -1px hsla(var(--color-black-h...',
    'xl': '0 1.5px 2.1px -6px hsla(var(--color-black-h...'
  ),
  $inner-glow: (
    'glow': 'inset 0 0 0.5px 1px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075)',
    'glow-top': 'inset 0 0 0.5px 1px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.075)'
  )
);

In CodyFrame v3, update the CSS variables in the custom-style/_shared-styles.scss file.