Fylgja component - Shadow
Table of Contents
The Fylgja Shadow offers Design Tokens (CSS props) for consistent and semantic shadows.
Installation
npm install @fylgja/shadow
Then include the component in to your code via;
@use "@fylgja/shadow";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/shadow"; // *
How to use
This component comes in 3 syntaxes.
- SCSS, offered in both:
- the SCSS variable syntax
- the CSS variable syntax
- CSS variables
- Javascript Style Tokens, if you want to use it in a Javascript based environment, like React or Vue.
SCSS version
@use "@fylgja/shadow" as *;
.style {
box-shadow: $shadow-1;
}
// CSS variable syntax
@use "@fylgja/shadow/props";
.style {
box-shadow: var(--shadow-1);
}
CSS version
.style {
box-shadow: var(--shadow-1);
}
Javascript
import props from "@fylgja/shadow"
const style = {
boxShadow: props.shadow[1],
}
Config
The following variables are available.
With the CSS variables you can use the same name, only with --
as prefix, instead of $
.
$shadow-1: "0 2px 1px -1px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 18%)), 0 1px 1px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 12%)), 0 1px 3px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 10%))";
$shadow-2: "0 3px 1px -2px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 18%)), 0 2px 2px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 12%)), 0 1px 5px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 10%))";
$shadow-3: "0 2px 4px -1px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 18%)), 0 4px 5px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 12%)), 0 1px 10px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 10%))";
$shadow-4: "0 3px 5px -1px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 18%)), 0 6px 10px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 12%)), 0 1px 18px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 10%))";
$shadow-5: "0 5px 5px -3px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 18%)), 0 8px 10px 1px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 12%)), 0 3px 14px 2px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 10%))";
$shadow-6: "0 7px 8px -4px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 18%)), 0 12px 17px 2px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 12%)), 0 5px 22px 4px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 10%))";
$inset-shadow-0: "inset 0 0 0 1px hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 9%))";
$inset-shadow-1: "inset 0 1px 2px 0 hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 9%))";
$inset-shadow-2: "inset 0 1px 4px 0 hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 9%))";
$inset-shadow-3: "inset 0 2px 8px 0 hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 9%))";
$inset-shadow-4: "inset 0 2px 14px 0 hsl(var(--shadow-color, 0 0% 50%) / calc(var(--shadow-weight, 1%) + 9%))";
Noticed a typo or is something unclear? Help us improve this page on GitHub.