Foundations
Depth
Depth, focus rings and lines from the Figma effect styles.
Device
Density
global-tokens 9
| Token | Value | Preview |
|---|---|---|
--shadow-button-defaultglobal-tokens/button-default | 0px 0.5px 0.5px 0px #00000008, 0px 0.5px 2.5px 0px #00000014, inset 0px -2px 1px 0px var(--color-opacity-8) | |
--shadow-focus-primaryglobal-tokens/focus-primary | 0px 0px 0px 3px var(--color-primary-soft) | |
--shadow-focus-secondaryglobal-tokens/focus-secondary | 0px 0px 0px 3px var(--color-secondary-soft) | |
--shadow-focus-tertiaryglobal-tokens/focus-tertiary | 0px 0px 0px 3px var(--color-tertiary-soft) | |
--shadow-focus-errorglobal-tokens/focus-error | 0px 0px 0px 3px var(--color-error-tint) | |
--shadow-card-style-1global-tokens/card-style-1 | 0px 1px 4px 0px var(--color-opacity-12), 0px 1px 2px 0px var(--color-opacity-8) | |
--shadow-card-style-2global-tokens/card-style-2 | inset 0px 1px 0px 1px var(--color-invert-opacity-8) | |
--shadow-card-hoverglobal-tokens/card-hover | 0px 8px 8px 0px var(--color-invert-opacity-8), 0px 20px 24px 0px var(--color-opacity-8) | |
--shadow-form-level-1global-tokens/form-level-1 | 0px 24px 56px 0px var(--color-opacity-24) |
component-tokens 1
| Token | Value | Preview |
|---|---|---|
--shadow-button-secondary-defaultcomponent-tokens/button-secondary-default | inset 0px -0.5px 0px 0px #00000014, 0px 1.5px 1.5px 0px #0000000a |
primitive 10
| Token | Value | Preview |
|---|---|---|
--shadow-depth-noneprimitive/Depth None | 0px 0px 0px 1px var(--color-surface-level-4) | |
--shadow-depth-mdprimitive/Depth MD | 0px 4px 8px 0px var(--color-opacity-8), 0px 2px 4px 0px var(--color-invert-opacity-8) | |
--shadow-depth-xlprimitive/Depth XL | 0px 8px 8px 0px var(--color-invert-opacity-8), 0px 20px 24px 0px var(--color-opacity-8) | |
--shadow-depth-2xlprimitive/Depth 2XL | 0px 24px 56px 0px var(--color-opacity-24) | |
--shadow-depth-innerprimitive/Depth Inner | inset 0px 2px 4px 0px var(--color-opacity-8) | |
--shadow-line-bottomprimitive/Line Bottom | inset 0px -1px 0px 0px #dbe6ec | |
--shadow-line-topprimitive/Line Top | inset 0px 1px 0px 0px #dbe6ec | |
--shadow-line-rightprimitive/Line Right | inset -1px 0px 0px 0px #dbe6ec | |
--shadow-depth-smprimitive/Depth SM | 0px 1px 4px 0px var(--color-opacity-12), 0px 1px 2px 0px var(--color-opacity-8) | |
--shadow-depth-lgprimitive/Depth LG | 0px 4px 6px 0px var(--color-invert-opacity-8), 0px 8px 16px 0px var(--color-opacity-8) |