本文用于维护 FX-Style 发布包中可用的全局颜色 CSS 自定义属性，便于页面和组件统一使用主题色、功能色与中性色。

适用范围

• 引入 FX-Style Web 或 Mobile 样式入口的页面与组件
• 需要复用主题色、功能色、中性色或语义色的样式开发
• 需要通过 rgba() 设置透明度颜色的场景

使用建议

• 优先使用已有变量，避免在业务样式中重复写死颜色。
• 组件状态色优先遵循 01 浅背景、03 禁用、05 悬停、06 基准、07 激活的现有约定。
• 宿主环境可能未注入变量时，使用 var(--token, fallback) 提供兜底值。
• 透明度场景使用对应的 -rgb 变量，例如 rgba(var(--color-primary06-rgb), 0.12)。

使用方式

.demo-card {
  color: var(--color-neutrals19, #181c25);
  background: var(--color-neutrals01, #ffffff);
  border: 1px solid var(--color-neutrals05, #dee1e8);
}

.demo-card--active {
  color: var(--color-primary06, #ff8000);
  background: rgba(var(--color-primary06-rgb, 255, 128, 0), 0.08);
}

变量清单

色阶约定

色阶	现有使用约定
00	极浅背景、弱提示区域
01	浅背景、弱强调区域
02 - 04	辅助底色、边框或禁用态，其中 03 常用于禁用态
05	悬停态（hover）
06	基准色、主要状态
07	激活态、按下态（active）
08 - 10	深色强调、高对比文本或背景

色阶含义描述的是当前通用约定，具体组件仍应以组件样式中的实际状态映射为准。

主题与功能色变量

品红色（magenta）

适用范围：品红强调、标签和数据可视化。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-magenta00	品红色 00 色阶	极浅背景、弱提示区域	#fff1f0	--color-magenta00-rgb	255, 241, 240
--color-magenta01	品红色 01 色阶	浅背景、弱强调区域	#fff0f0	--color-magenta01-rgb	255, 240, 240
--color-magenta02	品红色 02 色阶	辅助底色、边框或禁用态	#ffeded	--color-magenta02-rgb	255, 237, 237
--color-magenta03	品红色 03 色阶	辅助底色、边框或禁用态	#ffc4c7	--color-magenta03-rgb	255, 196, 199
--color-magenta04	品红色 04 色阶	辅助底色、边框或禁用态	#ff9ca4	--color-magenta04-rgb	255, 156, 164
--color-magenta05	品红色 05 色阶	悬停态或次级强调	#ff7383	--color-magenta05-rgb	255, 115, 131
--color-magenta06	品红色 06 色阶	基准色、主要状态	#ff4a66	--color-magenta06-rgb	255, 74, 102
--color-magenta07	品红色 07 色阶	激活态、按下态	#d93452	--color-magenta07-rgb	217, 52, 82
--color-magenta08	品红色 08 色阶	深色强调、高对比场景	#b32241	--color-magenta08-rgb	179, 34, 65
--color-magenta09	品红色 09 色阶	深色强调、高对比场景	#8c1432	--color-magenta09-rgb	140, 20, 50
--color-magenta10	品红色 10 色阶	深色强调、高对比场景	#660d26	--color-magenta10-rgb	102, 13, 38

危险色（danger）

适用范围：错误、危险操作和失败状态。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-danger00	危险色 00 色阶	极浅背景、弱提示区域	#fff6f0	--color-danger00-rgb	255, 246, 240
--color-danger01	危险色 01 色阶	浅背景、弱强调区域	#fff5f0	--color-danger01-rgb	255, 245, 240
--color-danger02	危险色 02 色阶	辅助底色、边框或禁用态	#ffdccc	--color-danger02-rgb	255, 220, 204
--color-danger03	危险色 03 色阶	辅助底色、边框或禁用态	#ffbda3	--color-danger03-rgb	255, 189, 163
--color-danger04	危险色 04 色阶	辅助底色、边框或禁用态	#ff9c7a	--color-danger04-rgb	255, 156, 122
--color-danger05	危险色 05 色阶	悬停态或次级强调	#ff7752	--color-danger05-rgb	255, 119, 82
--color-danger06	危险色 06 色阶	基准色、主要状态	#ff522a	--color-danger06-rgb	255, 82, 42
--color-danger07	危险色 07 色阶	激活态、按下态	#d93518	--color-danger07-rgb	217, 53, 24
--color-danger08	危险色 08 色阶	深色强调、高对比场景	#b31e0b	--color-danger08-rgb	179, 30, 11
--color-danger09	危险色 09 色阶	深色强调、高对比场景	#8c0d01	--color-danger09-rgb	140, 13, 1
--color-danger10	危险色 10 色阶	深色强调、高对比场景	#660500	--color-danger10-rgb	102, 5, 0

警告色（warning）

适用范围：警告、提醒和需关注状态。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-warning00	警告色 00 色阶	极浅背景、弱提示区域	#fffaf0	--color-warning00-rgb	255, 250, 240
--color-warning01	警告色 01 色阶	浅背景、弱强调区域	#fff5e6	--color-warning01-rgb	255, 245, 230
--color-warning02	警告色 02 色阶	辅助底色、边框或禁用态	#ffe2bd	--color-warning02-rgb	255, 226, 189
--color-warning03	警告色 03 色阶	辅助底色、边框或禁用态	#ffcd94	--color-warning03-rgb	255, 205, 148
--color-warning04	警告色 04 色阶	辅助底色、边框或禁用态	#ffb56b	--color-warning04-rgb	255, 181, 107
--color-warning05	警告色 05 色阶	悬停态或次级强调	#ff9a42	--color-warning05-rgb	255, 154, 66
--color-warning06	警告色 06 色阶	基准色、主要状态	#ff7c19	--color-warning06-rgb	255, 124, 25
--color-warning07	警告色 07 色阶	激活态、按下态	#d95d0b	--color-warning07-rgb	217, 93, 11
--color-warning08	警告色 08 色阶	深色强调、高对比场景	#b34100	--color-warning08-rgb	179, 65, 0
--color-warning09	警告色 09 色阶	深色强调、高对比场景	#8c2f00	--color-warning09-rgb	140, 47, 0
--color-warning10	警告色 10 色阶	深色强调、高对比场景	#661f00	--color-warning10-rgb	102, 31, 0

主色（primary）

适用范围：品牌、主操作、链接和重点信息。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-primary00	主色 00 色阶	极浅背景、弱提示区域	#fffbf0	--color-primary00-rgb	255, 251, 240
--color-primary01	主色 01 色阶	浅背景、弱强调区域	#fff7e6	--color-primary01-rgb	255, 247, 230
--color-primary02	主色 02 色阶	辅助底色、边框或禁用态	#ffdda3	--color-primary02-rgb	255, 221, 163
--color-primary03	主色 03 色阶	辅助底色、边框或禁用态	#ffca7a	--color-primary03-rgb	255, 202, 122
--color-primary04	主色 04 色阶	辅助底色、边框或禁用态	#ffb452	--color-primary04-rgb	255, 180, 82
--color-primary05	主色 05 色阶	悬停态或次级强调	#ff9b29	--color-primary05-rgb	255, 155, 41
--color-primary06	主色 06 色阶	基准色、主要状态	#ff8000	--color-primary06-rgb	255, 128, 0
--color-primary07	主色 07 色阶	激活态、按下态	#d96500	--color-primary07-rgb	217, 101, 0
--color-primary08	主色 08 色阶	深色强调、高对比场景	#b34d00	--color-primary08-rgb	179, 77, 0
--color-primary09	主色 09 色阶	深色强调、高对比场景	#8c3800	--color-primary09-rgb	140, 56, 0
--color-primary10	主色 10 色阶	深色强调、高对比场景	#662500	--color-primary10-rgb	102, 37, 0

黄色（yellow）

适用范围：提示、标签和数据可视化。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-yellow00	黄色 00 色阶	极浅背景、弱提示区域	#fffef0	--color-yellow00-rgb	255, 254, 240
--color-yellow01	黄色 01 色阶	浅背景、弱强调区域	#fffce6	--color-yellow01-rgb	255, 252, 230
--color-yellow02	黄色 02 色阶	辅助底色、边框或禁用态	#fff2a6	--color-yellow02-rgb	255, 242, 166
--color-yellow03	黄色 03 色阶	辅助底色、边框或禁用态	#ffe77d	--color-yellow03-rgb	255, 231, 125
--color-yellow04	黄色 04 色阶	辅助底色、边框或禁用态	#ffda54	--color-yellow04-rgb	255, 218, 84
--color-yellow05	黄色 05 色阶	悬停态或次级强调	#ffca2b	--color-yellow05-rgb	255, 202, 43
--color-yellow06	黄色 06 色阶	基准色、主要状态	#ffb602	--color-yellow06-rgb	255, 182, 2
--color-yellow07	黄色 07 色阶	激活态、按下态	#d99400	--color-yellow07-rgb	217, 148, 0
--color-yellow08	黄色 08 色阶	深色强调、高对比场景	#b37400	--color-yellow08-rgb	179, 116, 0
--color-yellow09	黄色 09 色阶	深色强调、高对比场景	#8c5600	--color-yellow09-rgb	140, 86, 0
--color-yellow10	黄色 10 色阶	深色强调、高对比场景	#663c00	--color-yellow10-rgb	102, 60, 0

黄绿色（yellow-green）

适用范围：标签、状态和数据可视化。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-yellow-green00	黄绿色 00 色阶	极浅背景、弱提示区域	#fbfff0	--color-yellow-green00-rgb	251, 255, 240
--color-yellow-green01	黄绿色 01 色阶	浅背景、弱强调区域	#fafff0	--color-yellow-green01-rgb	250, 255, 240
--color-yellow-green02	黄绿色 02 色阶	辅助底色、边框或禁用态	#f9ffed	--color-yellow-green02-rgb	249, 255, 237
--color-yellow-green03	黄绿色 03 色阶	辅助底色、边框或禁用态	#ddf2bb	--color-yellow-green03-rgb	221, 242, 187
--color-yellow-green04	黄绿色 04 色阶	辅助底色、边框或禁用态	#c0e68c	--color-yellow-green04-rgb	192, 230, 140
--color-yellow-green05	黄绿色 05 色阶	悬停态或次级强调	#a3d962	--color-yellow-green05-rgb	163, 217, 98
--color-yellow-green06	黄绿色 06 色阶	基准色、主要状态	#87cc3b	--color-yellow-green06-rgb	135, 204, 59
--color-yellow-green07	黄绿色 07 色阶	激活态、按下态	#65a628	--color-yellow-green07-rgb	101, 166, 40
--color-yellow-green08	黄绿色 08 色阶	深色强调、高对比场景	#478018	--color-yellow-green08-rgb	71, 128, 24
--color-yellow-green09	黄绿色 09 色阶	深色强调、高对比场景	#2c590c	--color-yellow-green09-rgb	44, 89, 12
--color-yellow-green10	黄绿色 10 色阶	深色强调、高对比场景	#183307	--color-yellow-green10-rgb	24, 51, 7

成功色（success）

适用范围：成功、完成和正常状态。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-success00	成功色 00 色阶	极浅背景、弱提示区域	#f0fff3	--color-success00-rgb	240, 255, 243
--color-success01	成功色 01 色阶	浅背景、弱强调区域	#f0fff4	--color-success01-rgb	240, 255, 244
--color-success02	成功色 02 色阶	辅助底色、边框或禁用态	#dcfae6	--color-success02-rgb	220, 250, 230
--color-success03	成功色 03 色阶	辅助底色、边框或禁用态	#abedc3	--color-success03-rgb	171, 237, 195
--color-success04	成功色 04 色阶	辅助底色、边框或禁用态	#7ee0a5	--color-success04-rgb	126, 224, 165
--color-success05	成功色 05 色阶	悬停态或次级强调	#55d48c	--color-success05-rgb	85, 212, 140
--color-success06	成功色 06 色阶	基准色、主要状态	#30c776	--color-success06-rgb	48, 199, 118
--color-success07	成功色 07 色阶	激活态、按下态	#1fa160	--color-success07-rgb	31, 161, 96
--color-success08	成功色 08 色阶	深色强调、高对比场景	#117a49	--color-success08-rgb	17, 122, 73
--color-success09	成功色 09 色阶	深色强调、高对比场景	#085433	--color-success09-rgb	8, 84, 51
--color-success10	成功色 10 色阶	深色强调、高对比场景	#042e1d	--color-success10-rgb	4, 46, 29

青绿色（teal）

适用范围：辅助强调、标签和数据可视化。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-teal00	青绿色 00 色阶	极浅背景、弱提示区域	#f0fffb	--color-teal00-rgb	240, 255, 251
--color-teal01	青绿色 01 色阶	浅背景、弱强调区域	#e1f5f1	--color-teal01-rgb	225, 245, 241
--color-teal02	青绿色 02 色阶	辅助底色、边框或禁用态	#b0e8de	--color-teal02-rgb	176, 232, 222
--color-teal03	青绿色 03 色阶	辅助底色、边框或禁用态	#84dbce	--color-teal03-rgb	132, 219, 206
--color-teal04	青绿色 04 色阶	辅助底色、边框或禁用态	#5bcfc1	--color-teal04-rgb	91, 207, 193
--color-teal05	青绿色 05 色阶	悬停态或次级强调	#36c2b6	--color-teal05-rgb	54, 194, 182
--color-teal06	青绿色 06 色阶	基准色、主要状态	#16b4ab	--color-teal06-rgb	22, 180, 171
--color-teal07	青绿色 07 色阶	激活态、按下态	#0a8f8d	--color-teal07-rgb	10, 143, 141
--color-teal08	青绿色 08 色阶	深色强调、高对比场景	#026769	--color-teal08-rgb	2, 103, 105
--color-teal09	青绿色 09 色阶	深色强调、高对比场景	#003f42	--color-teal09-rgb	0, 63, 66
--color-teal10	青绿色 10 色阶	深色强调、高对比场景	#001a1c	--color-teal10-rgb	0, 26, 28

蓝色（blue）

适用范围：辅助强调、信息和数据可视化。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-blue00	蓝色 00 色阶	极浅背景、弱提示区域	#f0fcff	--color-blue00-rgb	240, 252, 255
--color-blue01	蓝色 01 色阶	浅背景、弱强调区域	#e6f9ff	--color-blue01-rgb	230, 249, 255
--color-blue02	蓝色 02 色阶	辅助底色、边框或禁用态	#baebff	--color-blue02-rgb	186, 235, 255
--color-blue03	蓝色 03 色阶	辅助底色、边框或禁用态	#91dcff	--color-blue03-rgb	145, 220, 255
--color-blue04	蓝色 04 色阶	辅助底色、边框或禁用态	#69caff	--color-blue04-rgb	105, 202, 255
--color-blue05	蓝色 05 色阶	悬停态或次级强调	#40b6ff	--color-blue05-rgb	64, 182, 255
--color-blue06	蓝色 06 色阶	基准色、主要状态	#189dff	--color-blue06-rgb	24, 157, 255
--color-blue07	蓝色 07 色阶	激活态、按下态	#097bd9	--color-blue07-rgb	9, 123, 217
--color-blue08	蓝色 08 色阶	深色强调、高对比场景	#005cb3	--color-blue08-rgb	0, 92, 179
--color-blue09	蓝色 09 色阶	深色强调、高对比场景	#00448c	--color-blue09-rgb	0, 68, 140
--color-blue10	蓝色 10 色阶	深色强调、高对比场景	#002e66	--color-blue10-rgb	0, 46, 102

信息色（info）

适用范围：信息提示、链接和一般状态。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-info00	信息色 00 色阶	极浅背景、弱提示区域	#f0f9ff	--color-info00-rgb	240, 249, 255
--color-info01	信息色 01 色阶	浅背景、弱强调区域	#e6f4ff	--color-info01-rgb	230, 244, 255
--color-info02	信息色 02 色阶	辅助底色、边框或禁用态	#b0daff	--color-info02-rgb	176, 218, 255
--color-info03	信息色 03 色阶	辅助底色、边框或禁用态	#87c3ff	--color-info03-rgb	135, 195, 255
--color-info04	信息色 04 色阶	辅助底色、边框或禁用态	#5ea9ff	--color-info04-rgb	94, 169, 255
--color-info05	信息色 05 色阶	悬停态或次级强调	#368dff	--color-info05-rgb	54, 141, 255
--color-info06	信息色 06 色阶	基准色、主要状态	#0c6cff	--color-info06-rgb	12, 108, 255
--color-info07	信息色 07 色阶	激活态、按下态	#004fd9	--color-info07-rgb	0, 79, 217
--color-info08	信息色 08 色阶	深色强调、高对比场景	#003bb3	--color-info08-rgb	0, 59, 179
--color-info09	信息色 09 色阶	深色强调、高对比场景	#002a8c	--color-info09-rgb	0, 42, 140
--color-info10	信息色 10 色阶	深色强调、高对比场景	#001b66	--color-info10-rgb	0, 27, 102

紫色（purple）

适用范围：辅助强调、标签和数据可视化。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-purple00	紫色 00 色阶	极浅背景、弱提示区域	#f8f0ff	--color-purple00-rgb	248, 240, 255
--color-purple01	紫色 01 色阶	浅背景、弱强调区域	#f7f0ff	--color-purple01-rgb	247, 240, 255
--color-purple02	紫色 02 色阶	辅助底色、边框或禁用态	#f5edff	--color-purple02-rgb	245, 237, 255
--color-purple03	紫色 03 色阶	辅助底色、边框或禁用态	#ddc4ff	--color-purple03-rgb	221, 196, 255
--color-purple04	紫色 04 色阶	辅助底色、边框或禁用态	#bc97f7	--color-purple04-rgb	188, 151, 247
--color-purple05	紫色 05 色阶	悬停态或次级强调	#976aeb	--color-purple05-rgb	151, 106, 235
--color-purple06	紫色 06 色阶	基准色、主要状态	#7341de	--color-purple06-rgb	115, 65, 222
--color-purple07	紫色 07 色阶	激活态、按下态	#542cb8	--color-purple07-rgb	84, 44, 184
--color-purple08	紫色 08 色阶	深色强调、高对比场景	#391c91	--color-purple08-rgb	57, 28, 145
--color-purple09	紫色 09 色阶	深色强调、高对比场景	#230f6b	--color-purple09-rgb	35, 15, 107
--color-purple10	紫色 10 色阶	深色强调、高对比场景	#140945	--color-purple10-rgb	20, 9, 69

中性色变量

中性色用于背景、容器、边框、图标和文本层级；编号越大，颜色越深。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-neutrals01	中性色 01 色阶	浅色页面背景和容器底色	#ffffff	--color-neutrals01-rgb	255, 255, 255
--color-neutrals02	中性色 02 色阶	浅色页面背景和容器底色	#fafafa	--color-neutrals02-rgb	250, 250, 250
--color-neutrals03	中性色 03 色阶	浅色页面背景和容器底色	#f2f3f5	--color-neutrals03-rgb	242, 243, 245
--color-neutrals04	中性色 04 色阶	浅色页面背景和容器底色	#eaebee	--color-neutrals04-rgb	234, 235, 238
--color-neutrals05	中性色 05 色阶	分割线、边框、禁用态和图标	#dee1e8	--color-neutrals05-rgb	222, 225, 232
--color-neutrals06	中性色 06 色阶	分割线、边框、禁用态和图标	#ced1d9	--color-neutrals06-rgb	206, 209, 217
--color-neutrals07	中性色 07 色阶	分割线、边框、禁用态和图标	#c1c5ce	--color-neutrals07-rgb	193, 197, 206
--color-neutrals08	中性色 08 色阶	分割线、边框、禁用态和图标	#adb1ba	--color-neutrals08-rgb	173, 177, 186
--color-neutrals09	中性色 09 色阶	分割线、边框、禁用态和图标	#a3a7b0	--color-neutrals09-rgb	163, 167, 176
--color-neutrals10	中性色 10 色阶	次级文本、说明文字和图标	#999da6	--color-neutrals10-rgb	153, 157, 166
--color-neutrals11	中性色 11 色阶	次级文本、说明文字和图标	#91959e	--color-neutrals11-rgb	145, 149, 158
--color-neutrals12	中性色 12 色阶	次级文本、说明文字和图标	#80858f	--color-neutrals12-rgb	128, 133, 143
--color-neutrals13	中性色 13 色阶	次级文本、说明文字和图标	#737881	--color-neutrals13-rgb	115, 120, 129
--color-neutrals14	中性色 14 色阶	次级文本、说明文字和图标	#606570	--color-neutrals14-rgb	96, 101, 112
--color-neutrals15	中性色 15 色阶	次级文本、说明文字和图标	#545861	--color-neutrals15-rgb	84, 88, 97
--color-neutrals16	中性色 16 色阶	标题、正文和深色背景	#444852	--color-neutrals16-rgb	68, 72, 82
--color-neutrals17	中性色 17 色阶	标题、正文和深色背景	#343841	--color-neutrals17-rgb	52, 56, 65
--color-neutrals18	中性色 18 色阶	标题、正文和深色背景	#272b34	--color-neutrals18-rgb	39, 43, 52
--color-neutrals19	中性色 19 色阶	标题、正文和深色背景	#181c25	--color-neutrals19-rgb	24, 28, 37

特殊色变量

特殊色用于补充中性色无法覆盖的近中性色场景。

变量名	含义	适用范围	默认值	RGB 变量	RGB 默认值
--color-special01	特殊色 01	标签、弱强调背景	#f2f4fb	--color-special01-rgb	242, 244, 251
--color-special02	特殊色 02	深色图标、辅助文字	#737c8c	--color-special02-rgb	115, 124, 140
--color-special03	特殊色 03	应用主背景、详情背景	#EFF1F3	--color-special03-rgb	239, 241, 243
--color-special04	特殊色 04	浅色分区、次级容器背景	#F7F8FA	--color-special04-rgb	247, 248, 250

语义色变量

语义变量引用基础中性色，名称表达具体用途。主题覆盖基础变量后，语义变量会自动继承新值。

变量名	含义	适用范围	引用变量	当前默认值
--fxst-color-background	页面背景色	页面和容器背景	var(--color-neutrals02)	#fafafa
--fxst-color-input-disable	输入框禁用背景色	输入类组件禁用态	var(--color-neutrals04)	#eaebee
--fxst-color-icon	默认图标色	普通图标	var(--color-neutrals05)	#dee1e8
--fxst-color-input-border	输入框默认边框色	输入类组件默认边框	var(--color-neutrals09)	#a3a7b0
--fxst-color-h4	第四层级文字色	弱标题和辅助文字	var(--color-neutrals07)	#c1c5ce
--fxst-color-h3	第三层级文字色	次级标题和说明文字	var(--color-neutrals11)	#91959e
--fxst-color-h2	第二层级文字色	标题和重点文字	var(--color-neutrals13)	#737881
--fxst-color-h1	第一层级文字色	主标题和高强调文字	var(--color-neutrals19)	#181c25

示例

状态色

.notice {
  color: var(--color-info06, #0c6cff);
  background: var(--color-info01, #e6f4ff);
  border-color: var(--color-info03, #87c3ff);
}

.notice:hover {
  color: var(--color-info05, #368dff);
}

.notice:active {
  color: var(--color-info07, #004fd9);
}

透明度颜色

.primary-overlay {
  background: rgba(var(--color-primary06-rgb, 255, 128, 0), 0.12);
}

语义变量

.form-control:disabled {
  background: var(--fxst-color-input-disable, #eaebee);
}