# 颜色

## 颜色是如何组织的？

在 Neutral 主题中，所有颜色变量都统一以 `--astryx-color-*` 开头。

为了让深色模式切换更流畅，每一个颜色变量底层都是通过 CSS 标准的 `light-dark()` 函数定义的。这意味着：
- **浅色与深色合二为一：** 变量内部同时存了浅色模式和深色模式该显示的颜色。
- **无需切换样式表：** 浏览器会根据当前页面或容器的 `color-scheme`（是白天还是黑夜）自动决定展示哪一个颜色，不需要为了深色模式额外打包或动态下载第二份 CSS。

在下方的参考色板中，每个色块左半边展示的是浅色模式效果，右半边展示的是深色模式效果；带有半透明度的颜色底下铺设了棋盘格背景，方便你一眼看清它的透明程度。

## 语义色与状态色

系统中的大部分颜色都具有明确的「语义用途」，而不是冷冰冰的十六进制代码：
- **基础层次：** 背景表面（surface/card）、各级文字（primary/secondary/tertiary）、图标和边框。
- **状态反馈：** 成功（success）、警告（warning）、错误（danger）与信息提示。
- **色彩家族：** 蓝（blue）、青（cyan）、灰（gray）、绿（green）、橙（orange）、粉（pink）、紫（purple）、红（red）、茶（teal）、黄（yellow）。每一组颜色都配齐了对应的浅底背景、边框、图标与文字前景色。例如 `Badge` 徽标组件的 `variant="blue"` 就会成套取用这组蓝色。

## 数据可视化与图表色

图表用的颜色以 `--astryx-color-data-*` 开头，一共 56 个，名字和取值都和原版一样：
- **分类色：** 用于柱状图、饼图等展示不同类别的场景（一条数据系列对应一种颜色，例如 `--astryx-color-data-categorical-blue`）。分类色在明暗模式下保持相同的色值，保证图表辨识度一致。
- **连续色阶：** 针对每种主色提供了 1 到 5 档深浅递进梯度（例如 `--astryx-color-data-blue-5` 到 `blue-1`），5 最深、1 最浅，适合热力图或进度占比。
- **中性灰阶与辅助色：** `--astryx-color-data-neutral` 会随明暗自动变换，专门用来绘制图表的坐标轴标签、网格参考线和说明文字。

这些默认值只放在一个地方：`@astryx-vue/themes/data.css`，写在 `:root` 上。每套主题的入口都会引入它，主题自己的样式表不再重复写一遍。这样做的好处是：

- 想改某一条系列的颜色，只要改那一个变量，写在 `:root` 上或者某个主题里都行。
- 嵌套的主题没写的颜色，会沿用外层的设置，不会被改回默认值。

在 CSS 以外画图的代码（比如 canvas 图表），可以从 `@astryx-vue/core/Theme` 导入 `DATA_TOKEN_DEFAULTS` 读同一组默认值，或者调用 `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 |