颜色

颜色是如何组织的？

在 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')。

颜色变量参考

底色与强调

浅色深色

--astryx-color-background-surface

light-dark(#ffffff, #262626)

浅色深色

--astryx-color-background-body

light-dark(#f1f1f1, #1b1b1b)

浅色深色

--astryx-color-background-card

light-dark(#ffffff, #1b1b1b)

浅色深色

--astryx-color-background-popover

light-dark(#ffffff, #1b1b1b)

浅色深色

--astryx-color-background-muted

light-dark(#f1f1f1, #1b1b1b)

浅色深色

--astryx-color-accent

light-dark(#1b1b1b, #f1f1f1)

浅色深色

--astryx-color-accent-muted

light-dark(#f1f1f1, #262626)

浅色深色

--astryx-color-neutral

light-dark(#0000000f, #ffffff1a)

浅色深色

--astryx-color-overlay

light-dark(#00000080, #000000cc)

浅色深色

--astryx-color-overlay-hover

light-dark(#0000000d, #ffffff0d)

浅色深色

--astryx-color-overlay-pressed

light-dark(#0000001a, #ffffff1a)

浅色深色

--astryx-color-background-inverted

light-dark(#0a1317, #ffffff)

Neutral 没有覆盖，使用原版默认值。

浅色深色

--astryx-color-background-error-inverted

light-dark(#aa071e, #e3193b)

Neutral 没有覆盖，使用原版默认值。

文字

浅色深色

--astryx-color-text-primary

light-dark(#000000, #ffffff)

浅色深色

--astryx-color-text-secondary

light-dark(#474747, #9e9e9e)

浅色保持 #525252。原版 Neutral 是 #737373。输入框、选择器和说明文字已经在用现在这个值。

浅色深色

--astryx-color-text-disabled

light-dark(#919191, #525252)

浅色深色

--astryx-color-text-accent

light-dark(#1b1b1b, #f1f1f1)

语义值和 accent 相同。text.css 里另有一套蓝色，会盖住这里，组件仍显示蓝色。

浅色深色

--astryx-color-on-dark

#ffffff

浅色深色

--astryx-color-on-light

#111111

浅色深色

--astryx-color-on-accent

light-dark(#ffffff, #111111)

图标

浅色深色

--astryx-color-icon-accent

light-dark(#1b1b1b, #f1f1f1)

浅色深色

--astryx-color-icon-primary

light-dark(#000000, #ffffff)

浅色深色

--astryx-color-icon-secondary

light-dark(#6a6a6a, #9e9e9e)

浅色深色

--astryx-color-icon-disabled

light-dark(#919191, #525252)

状态

浅色深色

--astryx-color-on-success

light-dark(#ffffff, #111111)

浅色深色

--astryx-color-on-error

light-dark(#ffffff, #111111)

浅色深色

--astryx-color-on-warning

#111111

浅色深色

--astryx-color-success

light-dark(#00490b, #a4d6a3)

浅色深色

--astryx-color-error

light-dark(#76000c, #ffc4be)

浅色深色

--astryx-color-warning

light-dark(#4b3900, #f8d36a)

浅色深色

--astryx-color-success-muted

light-dark(#bce0bb, #90ca903d)

浅色深色

--astryx-color-error-muted

light-dark(#ffc4be, #ff98903d)

浅色深色

--astryx-color-warning-muted

light-dark(#fae19e, #e2b6233d)

边框与效果

浅色深色

--astryx-color-border

light-dark(#00000014, #ffffff1a)

浅色深色

--astryx-color-border-emphasized

light-dark(#d4d4d4, #525252)

浅色深色

--astryx-color-skeleton

light-dark(#f1f1f1, #525252)

浅色深色

--astryx-color-shadow

light-dark(#0000001a, #0000004d)

浅色深色

--astryx-color-tint-hover

light-dark(black, white)

浅色深色

--astryx-color-track

light-dark(#ccd3db, #5a5e66)

Neutral 没有覆盖这一项，所以用原版默认色。

蓝

浅色深色

--astryx-color-background-blue

light-dark(#b9d7ff, #253c5a)

浅色深色

--astryx-color-border-blue

light-dark(#a1caff, #5aa0f8)

浅色深色

--astryx-color-icon-blue

light-dark(#003978, #88bcff)

浅色深色

--astryx-color-text-blue

light-dark(#003978, #a1caff)

青

浅色深色

--astryx-color-background-cyan

light-dark(#9ae2f4, #274046)

浅色深色

--astryx-color-border-cyan

light-dark(#85d5e9, #49adc4)

浅色深色

--astryx-color-icon-cyan

light-dark(#004351, #71c7dd)

浅色深色

--astryx-color-text-cyan

light-dark(#004351, #85d5e9)

灰

浅色深色

--astryx-color-background-gray

light-dark(#e2e2e2, #303030)

深色直接引用 color-neutral，也就是半透明白。

浅色深色

--astryx-color-border-gray

light-dark(#d4d4d4, #262626)

浅色深色

--astryx-color-icon-gray

light-dark(#474747, #9e9e9e)

浅色深色

--astryx-color-text-gray

light-dark(#1b1b1b, #d4d4d4)

绿

浅色深色

--astryx-color-background-green

light-dark(#bce0bb, #2b422b)

浅色深色

--astryx-color-border-green

light-dark(#aad4a9, #6ab26b)

浅色深色

--astryx-color-icon-green

light-dark(#00490b, #90ca90)

浅色深色

--astryx-color-text-green

light-dark(#00490b, #90ca90)

橙

浅色深色

--astryx-color-background-orange

light-dark(#ffc7a1, #503424)

浅色深色

--astryx-color-border-orange

light-dark(#ffc7a1, #df843f)

浅色深色

--astryx-color-icon-orange

light-dark(#622700, #ff9e55)

浅色深色

--astryx-color-text-orange

light-dark(#622700, #ffb37e)

粉

浅色深色

--astryx-color-background-pink

light-dark(#ffc0d7, #572b3d)

浅色深色

--astryx-color-border-pink

light-dark(#ffc0d7, #fc78b1)

浅色深色

--astryx-color-icon-pink

light-dark(#70003f, #fd92bd)

浅色深色

--astryx-color-text-pink

light-dark(#70003f, #ffa9ca)

紫

浅色深色

--astryx-color-background-purple

light-dark(#f7d5ff, #4a2f51)

浅色深色

--astryx-color-border-purple

light-dark(#f3bfff, #d885eb)

浅色深色

--astryx-color-icon-purple

light-dark(#5c0e6c, #e496f6)

浅色深色

--astryx-color-text-purple

light-dark(#5c0e6c, #eaacf8)

红

浅色深色

--astryx-color-background-red

light-dark(#ffc4be, #5b2b28)

浅色深色

--astryx-color-border-red

light-dark(#ffaea7, #fa6762)

浅色深色

--astryx-color-icon-red

light-dark(#76000c, #ff9890)

浅色深色

--astryx-color-text-red

light-dark(#76000c, #ffaea7)

蓝绿

浅色深色

--astryx-color-background-teal

light-dark(#a9e2d6, #28413c)

浅色深色

--astryx-color-border-teal

light-dark(#90d7c8, #4fb1a0)

浅色深色

--astryx-color-icon-teal

light-dark(#00463d, #81c9bb)

浅色深色

--astryx-color-text-teal

light-dark(#00463d, #90d7c8)

黄

浅色深色

--astryx-color-background-yellow

light-dark(#fae19e, #453a1c)

浅色深色

--astryx-color-border-yellow

light-dark(#e3c36c, #c29900)

浅色深色

--astryx-color-icon-yellow

light-dark(#4b3900, #e2b623)

浅色深色

--astryx-color-text-yellow

light-dark(#4b3900, #eec448)

图表

浅色深色

--astryx-color-data-categorical-blue

light-dark(#0171E3, #0171E3)

浅色深色

--astryx-color-data-categorical-orange

light-dark(#EB6E00, #EB6E00)

浅色深色

--astryx-color-data-categorical-purple

light-dark(#6B1EFD, #6B1EFD)

浅色深色

--astryx-color-data-categorical-green

light-dark(#0B991F, #0B991F)

浅色深色

--astryx-color-data-categorical-pink

light-dark(#F351C0, #F351C0)

浅色深色

--astryx-color-data-categorical-cyan

light-dark(#0171A4, #0171A4)

浅色深色

--astryx-color-data-categorical-red

light-dark(#F5394F, #F5394F)

浅色深色

--astryx-color-data-categorical-teal

light-dark(#08A3A3, #08A3A3)

浅色深色

--astryx-color-data-categorical-brown

light-dark(#965E03, #965E03)

浅色深色

--astryx-color-data-categorical-indigo

light-dark(#6F8AFF, #6F8AFF)

浅色深色

--astryx-color-data-neutral

light-dark(#8494A3, #8C939B)

浅色深色

--astryx-color-data-blue-5

light-dark(#02165E, #02165E)

浅色深色

--astryx-color-data-blue-4

light-dark(#004CBC, #004CBC)

浅色深色

--astryx-color-data-blue-3

light-dark(#2694FE, #2694FE)

浅色深色

--astryx-color-data-blue-2

light-dark(#78BEFF, #78BEFF)

浅色深色

--astryx-color-data-blue-1

light-dark(#DBECFF, #DBECFF)

浅色深色

--astryx-color-data-shamrock-5

light-dark(#0B603D, #0B603D)

浅色深色

--astryx-color-data-shamrock-4

light-dark(#138546, #138546)

浅色深色

--astryx-color-data-shamrock-3

light-dark(#24BB5E, #24BB5E)

浅色深色

--astryx-color-data-shamrock-2

light-dark(#8EF7AA, #8EF7AA)

浅色深色

--astryx-color-data-shamrock-1

light-dark(#D6FEE4, #D6FEE4)

浅色深色

--astryx-color-data-orange-5

light-dark(#A13F04, #A13F04)

浅色深色

--astryx-color-data-orange-4

light-dark(#D66100, #D66100)

浅色深色

--astryx-color-data-orange-3

light-dark(#FD9537, #FD9537)

浅色深色

--astryx-color-data-orange-2

light-dark(#FDB876, #FDB876)

浅色深色

--astryx-color-data-orange-1

light-dark(#FFE6CF, #FFE6CF)

浅色深色

--astryx-color-data-pink-5

light-dark(#8E1073, #8E1073)

浅色深色

--astryx-color-data-pink-4

light-dark(#D123A1, #D123A1)

浅色深色

--astryx-color-data-pink-3

light-dark(#F989D3, #F989D3)

浅色深色

--astryx-color-data-pink-2

light-dark(#FEADE3, #FEADE3)

浅色深色

--astryx-color-data-pink-1

light-dark(#FCE3F4, #FCE3F4)

浅色深色

--astryx-color-data-purple-5

light-dark(#3E0697, #3E0697)

浅色深色

--astryx-color-data-purple-4

light-dark(#6B1EFD, #6B1EFD)

浅色深色

--astryx-color-data-purple-3

light-dark(#9081FF, #9081FF)

浅色深色

--astryx-color-data-purple-2

light-dark(#B3B0FE, #B3B0FE)

浅色深色

--astryx-color-data-purple-1

light-dark(#E8E8FB, #E8E8FB)

浅色深色

--astryx-color-data-red-5

light-dark(#9D0519, #9D0519)

浅色深色

--astryx-color-data-red-4

light-dark(#D31130, #D31130)

浅色深色

--astryx-color-data-red-3

light-dark(#FB7D87, #FB7D87)

浅色深色

--astryx-color-data-red-2

light-dark(#FFB2B8, #FFB2B8)

浅色深色

--astryx-color-data-red-1

light-dark(#FEE4E6, #FEE4E6)

浅色深色

--astryx-color-data-teal-5

light-dark(#08767D, #08767D)

浅色深色

--astryx-color-data-teal-4

light-dark(#0C9293, #0C9293)

浅色深色

--astryx-color-data-teal-3

light-dark(#0DB7AF, #0DB7AF)

浅色深色

--astryx-color-data-teal-2

light-dark(#6CE6D8, #6CE6D8)

浅色深色

--astryx-color-data-teal-1

light-dark(#D7FCF8, #D7FCF8)

浅色深色

--astryx-color-data-yellow-5

light-dark(#8A5001, #8A5001)

浅色深色

--astryx-color-data-yellow-4

light-dark(#D69804, #D69804)

浅色深色

--astryx-color-data-yellow-3

light-dark(#FBCE03, #FBCE03)

浅色深色

--astryx-color-data-yellow-2

light-dark(#FCEC85, #FCEC85)

浅色深色

--astryx-color-data-yellow-1

light-dark(#FDF6BA, #FDF6BA)

浅色深色

--astryx-color-data-gray-5

light-dark(#25363F, #333338)

浅色深色

--astryx-color-data-gray-4

light-dark(#5D6C7B, #666A72)

浅色深色

--astryx-color-data-gray-3

light-dark(#AFB9C4, #B2B8BE)

浅色深色

--astryx-color-data-gray-2

light-dark(#CCD3DB, #D0D3D6)

浅色深色

--astryx-color-data-gray-1

light-dark(#F1F4F7, #F2F4F6)