# Shadow Tokens

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.

```css
/* 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);
}
```