SuperAPI AI 工具集

ux-color-system

通用与其它

查看项目

更新于 10-16 00:21

技能介绍

用途:为 Fantasy Phonics 游戏提供中世纪奇幻风格的语义化配色体系,基于 CSS 自定义属性实现可维护、可访问的主题。适合在应用颜色、创建主题或保证颜色可访问性时使用。

主要能力:定义表面与背景色(--theme-surface、--theme-surface-variant、--theme-surface-dim)及对应文字色(--theme-on-surface、--theme-on-surface-variant);主色金色强调(--theme-primary、--theme-on-primary、--theme-primary-container);描边色(--theme-outline、--theme-outline-variant);反馈色(--color-success、--color-error、--color-warning);四个游戏阶段专用色(word 靛蓝、collision 粉、mutation 琥珀、story 绿);悬停/激活/禁用叠加色;羊皮纸、金色微光、暗角等渐变模式。

使用方式:将表面色与对应文字色成对使用,如 .card { background: var(--theme-surface); color: var(--theme-on-surface); };状态类用语义色设置 color 与 border-color;阶段指示用 [data-phase] 属性映射 --phase-color;主按钮用 primary 与 on-primary 配对。

可访问性要求:on-surface 对 surface 对比度 12.5:1(AAA),on-surface-variant 对 surface 4.8:1(AA),primary 对 surface 7.2:1(AAA),success 对 surface 6.1:1(AA)。避免低对比组合及彩色文字叠彩色背景。

限制:默认暗色主题;如需浅色主题可用 prefers-color-scheme 反转相关 token。资料未提供安装、发布、收费或平台相关信息。