Shadow

Tokens

• Tokens: -4, -3, ..., 0, ... 3, 4

Utility

• Utility Class: -bxsh:-4, ... ,-bxsh:4

Variables

• --shadow--{token}
  • --shadow--1, --shadow--2...
  • (inset値) --shadow--i1, --shadow--i2...
• 構成変数
  • --hsl--shadow: 0 0% 0%;
  • --shadow-alpha: 0.1
  • --shadow-alpha--low: 0.08
  • --shadow-color : hsl(var(--hsl--shadow) / var(--shadow-alpha))
  • --shadow-color--low: hsl(var(--hsl--shadow) / var(--shadow-alpha--low))
  • --shadow-length--0: 0.5px 1px 2px 0px
  • --shadow-length--1: 0.5px 1px 4px 0px
  • --shadow-length--2: 1px 2px 8px 0px
  • --shadow-length--3: 2px 4px 16px 0px
  • --shadow-length--4: 4px 8px 32px 0px
  • --shadow--0: 0.5px 1px 2px 0px

DEMOs

How to use

<Box shadow="2">...</Box>

<div class="l--box -bxsh:1">...</div>

.foo{
	box-shadow: var(--shadow--2);
}

shadowHslも指定したい