# Color

Neutral colors are `--astryx-color-*`. Each one uses `light-dark()` for the light stop and the dark stop. In the grid below, the left chip is light and the right chip is dark. Translucent colors sit on a checkerboard.

The set covers surfaces, text, icons, success, warning, error, and the blue, cyan, gray, green, orange, pink, purple, red, teal, and yellow groups for background, border, icon, and text. `Badge` variants use those names, for example `variant="blue"`.

Chart colors are `--astryx-color-data-*`, 56 of them, with the same names and values as upstream. Categorical colors give one color to each series, for example `--astryx-color-data-categorical-blue`, and the light and dark stops are the same hex. Sequential ramps run from 5 to 1, 5 darkest and 1 lightest, for example `--astryx-color-data-blue-5`. The gray ramp and `--astryx-color-data-neutral` change with the color scheme. The neutral one is for labels and reference lines.

The defaults live once in `@astryx-vue/themes/data.css`, on `:root`, and every theme entry imports that file. A theme's own stylesheet does not repeat them. To recolor a series, set only that variable, on `:root` or inside a theme, and a nested theme keeps whatever its parent set. Code that paints outside CSS, such as a canvas chart, can read the same defaults from `DATA_TOKEN_DEFAULTS` in `@astryx-vue/core/Theme`, or call `useTheme().token('--color-data-categorical-blue')`.

### color

| Token | Value |
| --- | --- |
| `--astryx-color-background-surface` | #ffffff / #262626 |
| `--astryx-color-background-body` | #f1f1f1 / #1b1b1b |
| `--astryx-color-background-card` | #ffffff / #1b1b1b |
| `--astryx-color-background-popover` | #ffffff / #1b1b1b |
| `--astryx-color-background-muted` | #f1f1f1 / #1b1b1b |
| `--astryx-color-accent` | #1b1b1b / #f1f1f1 |
| `--astryx-color-accent-muted` | #f1f1f1 / #262626 |
| `--astryx-color-neutral` | #0000000f / #ffffff1a |
| `--astryx-color-overlay` | #00000080 / #000000cc |
| `--astryx-color-overlay-hover` | #0000000d / #ffffff0d |
| `--astryx-color-overlay-pressed` | #0000001a / #ffffff1a |
| `--astryx-color-text-primary` | #000000 / #ffffff |
| `--astryx-color-text-secondary` | #474747 / #9e9e9e |
| `--astryx-color-text-disabled` | #919191 / #525252 |
| `--astryx-color-text-accent` | #1b1b1b / #f1f1f1 |
| `--astryx-color-on-dark` | #ffffff |
| `--astryx-color-on-light` | #111111 |
| `--astryx-color-on-accent` | #ffffff / #111111 |
| `--astryx-color-on-success` | #ffffff / #111111 |
| `--astryx-color-on-error` | #ffffff / #111111 |
| `--astryx-color-on-warning` | #111111 |
| `--astryx-color-icon-accent` | #1b1b1b / #f1f1f1 |
| `--astryx-color-icon-primary` | #000000 / #ffffff |
| `--astryx-color-icon-secondary` | #6a6a6a / #9e9e9e |
| `--astryx-color-icon-disabled` | #919191 / #525252 |
| `--astryx-color-success` | #00490b / #a4d6a3 |
| `--astryx-color-error` | #76000c / #ffc4be |
| `--astryx-color-warning` | #4b3900 / #f8d36a |
| `--astryx-color-success-muted` | #bce0bb / #90ca903d |
| `--astryx-color-error-muted` | #ffc4be / #ff98903d |
| `--astryx-color-warning-muted` | #fae19e / #e2b6233d |
| `--astryx-color-border` | #00000014 / #ffffff1a |
| `--astryx-color-border-emphasized` | #d4d4d4 / #525252 |
| `--astryx-color-skeleton` | #f1f1f1 / #525252 |
| `--astryx-color-shadow` | #0000001a / #0000004d |
| `--astryx-color-tint-hover` | black / white |
| `--astryx-color-background-red` | #ffc4be / #5b2b28 |
| `--astryx-color-border-red` | #ffaea7 / #fa6762 |
| `--astryx-color-icon-red` | #76000c / #ff9890 |
| `--astryx-color-text-red` | #76000c / #ffaea7 |
| `--astryx-color-background-orange` | #ffc7a1 / #503424 |
| `--astryx-color-border-orange` | #ffc7a1 / #df843f |
| `--astryx-color-icon-orange` | #622700 / #ff9e55 |
| `--astryx-color-text-orange` | #622700 / #ffb37e |
| `--astryx-color-background-yellow` | #fae19e / #453a1c |
| `--astryx-color-border-yellow` | #e3c36c / #c29900 |
| `--astryx-color-icon-yellow` | #4b3900 / #e2b623 |
| `--astryx-color-text-yellow` | #4b3900 / #eec448 |
| `--astryx-color-background-green` | #bce0bb / #2b422b |
| `--astryx-color-border-green` | #aad4a9 / #6ab26b |
| `--astryx-color-icon-green` | #00490b / #90ca90 |
| `--astryx-color-text-green` | #00490b / #90ca90 |
| `--astryx-color-background-teal` | #a9e2d6 / #28413c |
| `--astryx-color-border-teal` | #90d7c8 / #4fb1a0 |
| `--astryx-color-icon-teal` | #00463d / #81c9bb |
| `--astryx-color-text-teal` | #00463d / #90d7c8 |
| `--astryx-color-background-cyan` | #9ae2f4 / #274046 |
| `--astryx-color-border-cyan` | #85d5e9 / #49adc4 |
| `--astryx-color-icon-cyan` | #004351 / #71c7dd |
| `--astryx-color-text-cyan` | #004351 / #85d5e9 |
| `--astryx-color-background-blue` | #b9d7ff / #253c5a |
| `--astryx-color-border-blue` | #a1caff / #5aa0f8 |
| `--astryx-color-icon-blue` | #003978 / #88bcff |
| `--astryx-color-text-blue` | #003978 / #a1caff |
| `--astryx-color-background-purple` | #f7d5ff / #4a2f51 |
| `--astryx-color-border-purple` | #f3bfff / #d885eb |
| `--astryx-color-icon-purple` | #5c0e6c / #e496f6 |
| `--astryx-color-text-purple` | #5c0e6c / #eaacf8 |
| `--astryx-color-background-pink` | #ffc0d7 / #572b3d |
| `--astryx-color-border-pink` | #ffc0d7 / #fc78b1 |
| `--astryx-color-icon-pink` | #70003f / #fd92bd |
| `--astryx-color-text-pink` | #70003f / #ffa9ca |
| `--astryx-color-background-gray` | #e2e2e2 / #303030 |
| `--astryx-color-border-gray` | #d4d4d4 / #262626 |
| `--astryx-color-icon-gray` | #474747 / #9e9e9e |
| `--astryx-color-text-gray` | #1b1b1b / #d4d4d4 |
| `--astryx-color-background-inverted` | #0a1317 / #ffffff |
| `--astryx-color-background-error-inverted` | #aa071e / #e3193b |
| `--astryx-color-track` | #ccd3db / #5a5e66 |