Elevation and effects draft v0.2.0
Opacity, blur, drop shadow and shadow colors from the Figma library, and why no component uses them yet.
The Figma library brings opacity steps, blur radii, a drop-shadow number and five shadow colors (effect.shadow.1 to 5, a neutral step at 1 to 5 % opacity, in Colors / Mapped), all recreated as they are. No component uses an effect yet: translucency comes from color tokens, and surfaces stand apart by their color and border, not by elevation. This foundation owns the shadow colors, presents the primitives and states the rules any future effect follows.
Tokens
Semantic tokens owned by the foundation (tokens in packages/components/specs/foundations/effects.spec.json). They live in packages/tokens/src/semantic/ (recreated from the Figma library) or tokens/additions/semantic/ (added by the design system), with their other values in tokens/modes/, tokens/additions/modes/ and tokens/platforms/.
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
effect.shadow.1
light-switch.base.900 at opacity.1: the Figma library composes them, DTCG cannot, so the resulting color is written as is
|
color |
{"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.009999999776482582,"hex":"#201E1F"}
|
light
#201E1F03
dark
#1414144d
|
--effect-shadow-1
|
effect.shadow.2
light-switch.base.900 at opacity.2: the Figma library composes them, DTCG cannot, so the resulting color is written as is
|
color |
{"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.019999999552965164,"hex":"#201E1F"}
|
light
#201E1F05
dark
#14141466
|
--effect-shadow-2
|
effect.shadow.3
light-switch.base.900 at opacity.3: the Figma library composes them, DTCG cannot, so the resulting color is written as is
|
color |
{"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.029999999329447746,"hex":"#201E1F"}
|
light
#201E1F08
dark
#14141480
|
--effect-shadow-3
|
effect.shadow.4
light-switch.base.900 at opacity.4: the Figma library composes them, DTCG cannot, so the resulting color is written as is
|
color |
{"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.03999999910593033,"hex":"#201E1F"}
|
light
#201E1F0a
dark
#141414b2
|
--effect-shadow-4
|
effect.shadow.5
light-switch.base.900 at opacity.5: the Figma library composes them, DTCG cannot, so the resulting color is written as is
|
color |
{"colorSpace":"srgb","components":[0.12549340724945068,0.11757857352495193,0.12153683602809906],"alpha":0.05000000074505806,"hex":"#201E1F"}
|
light
#201E1F0d
dark
#141414cc
|
--effect-shadow-5
|
opacity.0
0 % in the Figma library
|
number |
0
|
0
|
--opacity-0
|
opacity.1
1 % in the Figma library
|
number |
0.01
|
0.01
|
--opacity-1
|
opacity.2
2 % in the Figma library
|
number |
0.02
|
0.02
|
--opacity-2
|
opacity.3
3 % in the Figma library
|
number |
0.03
|
0.03
|
--opacity-3
|
opacity.4
4 % in the Figma library
|
number |
0.04
|
0.04
|
--opacity-4
|
opacity.5
5 % in the Figma library
|
number |
0.05
|
0.05
|
--opacity-5
|
opacity.6
6 % in the Figma library
|
number |
0.06
|
0.06
|
--opacity-6
|
opacity.7
7 % in the Figma library
|
number |
0.07
|
0.07
|
--opacity-7
|
opacity.8
8 % in the Figma library
|
number |
0.08
|
0.08
|
--opacity-8
|
opacity.9
9 % in the Figma library
|
number |
0.09
|
0.09
|
--opacity-9
|
opacity.10
10 % in the Figma library
|
number |
0.1
|
0.1
|
--opacity-10
|
opacity.15
15 % in the Figma library
|
number |
0.15
|
0.15
|
--opacity-15
|
opacity.20
20 % in the Figma library
|
number |
0.2
|
0.2
|
--opacity-20
|
opacity.30
30 % in the Figma library
|
number |
0.3
|
0.3
|
--opacity-30
|
opacity.40
40 % in the Figma library
|
number |
0.4
|
0.4
|
--opacity-40
|
opacity.50
50 % in the Figma library
|
number |
0.5
|
0.5
|
--opacity-50
|
opacity.60
60 % in the Figma library
|
number |
0.6
|
0.6
|
--opacity-60
|
opacity.70
70 % in the Figma library
|
number |
0.7
|
0.7
|
--opacity-70
|
opacity.80
80 % in the Figma library
|
number |
0.8
|
0.8
|
--opacity-80
|
opacity.90
90 % in the Figma library
|
number |
0.9
|
0.9
|
--opacity-90
|
drop-shadow.number
|
number |
0
|
0
|
--drop-shadow-number
|
blur.none
|
dimension |
{"value":0,"unit":"px"}
|
0px
|
--blur-none
|
blur.xs
|
dimension |
{"value":2,"unit":"px"}
|
2px
|
--blur-xs
|
blur.sm
|
dimension |
{"value":4,"unit":"px"}
|
4px
|
--blur-sm
|
blur.md
|
dimension |
{"value":8,"unit":"px"}
|
8px
|
--blur-md
|
blur.lg
|
dimension |
{"value":16,"unit":"px"}
|
16px
|
--blur-lg
|
Components following it
Derived from the component tokens aliasing the foundation's tokens.