Shadow Design Tokens

Shadows can add very attractive depth and interaction to your design. Keeping them consistent from one component to another can be a little frustrating. They can also create a great deal of clutter in your code. Abstracting them into a reusable place and using them with the shadow() mixin and CSS variables will keep your UI consistent and your code clean.

$shadows: (
    none: none,
    inner: "inset 1px 2px 4px rgba(0, 0, 0, 0.10)",
    outline: "0 0 0 3px rgba(0, 0, 0, 0.5)",
    xs: "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
    sm: "0 3px 5px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12)",
    md: "0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10)",
    lg: "0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05)",
    xl: "0 20px 40px rgba(0, 0, 0, 0.20)",
) !default;

:root {
    --ks-shadow-none: none;
    --ks-shadow-outline: 0 0 0 2px rgba(0,0,0,0.5);
    --ks-shadow-inner: inset 1px 2px 4px rgba(0,0,0,0.1);
    --ks-shadow-xs: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
    --ks-shadow-sm: 0 3px 5px rgba(0,0,0,0.15),0 2px 4px rgba(0,0,0,0.12);
    --ks-shadow-md: 0 10px 20px rgba(0,0,0,0.15),0 3px 6px rgba(0,0,0,0.1);
    --ks-shadow-lg: 0 15px 25px rgba(0,0,0,0.15),0 5px 10px rgba(0,0,0,0.05);
    --ks-shadow-xl: 0 20px 40px rgba(0,0,0,0.2);
}

shadow(none)

shadow(outline)

shadow(inner)

shadow(xs)

shadow(sm)

shadow(md)

shadow(lg)

shadow(xl)

Usage

SASS

button {
    @include shadow(sm);

    &:hover {
        @include shadow(md);
    }
}

CSS

button {
    box-shadow: var(--ks-shadow-sm);
}

button:hover {
    box-shadow: var(--ks-shadow-md);
}