Shadow tokens use the --shadow-* naming pattern and map to shadow primitives in specs/ux/foundations/shadow.md.
If a primitive changes in specs/ux/foundations/shadow.md, update the matching token in this file.
Usage
Use shadow tokens for:
- cards
- dropdowns
- popovers
- floating controls
Token Mapping
| CSS Token | Foundation Mapping | Value |
|---|---|---|
--shadow-default |
offsetX.0 + offsetY.4 + blur-radius.24 + spread-radius.0 + color.black-1f |
0px 4px 24px 0px #0000001f |
--shadow-dropdown |
offsetX.0 + offsetY.3 + blur-radius.6 + spread-radius.0 + color.black-0d, offsetX.0 + offsetY.11 + blur-radius.11 + spread-radius.0 + color.black-0a, offsetX.0 + offsetY.25 + blur-radius.15 + spread-radius.0 + color.black-08 |
0px 3px 6px 0px #0000000d, 0px 11px 11px 0px #0000000a, 0px 25px 15px 0px #00000008 |
--shadow-notification |
Shadow / Notification |
0px 8px 16px 0px #33333333 |
--shadow-segment-control |
offsetX.0 + offsetY.4 + blur-radius.24 + spread-radius.0 + color.black-12 |
0px 4px 24px 0px #00000012 |
Raw Values
Do not use raw shadow values in component styles.
/* Wrong */
.dropdown {
box-shadow:
0px 3px 6px 0px #0000000d,
0px 11px 11px 0px #0000000a,
0px 25px 15px 0px #00000008;
}
/* Correct */
.dropdown {
box-shadow: var(--shadow-dropdown);
}