色彩 Color ​

主题色 ​

每一组主题色定义三种变体：

环境变量全局变量（主题：rasp）名称特点描述
---main--rasp-main主色主色用于次要文本或仅装饰作用
---ink--rasp-ink前景色在深色模式会变得很亮空白背景下的前景色，或作为白色文本的容器时的背景色
---foam--rasp-foam淡色主色的半透明仅装饰作用

环境变量由 tone:rasp 的 CSS 类提供，简写的方式能让组件颜色可配置。若没有这个需求，则可以用全局变量代替

Code

全局基本色 ​

每一组前景色定义三种变体：

--mat-air-0透明
--mat-air-15不显眼底灰
--mat-air-11 级灰
--mat-air-15边框灰
--mat-air-22 级灰
--mat-air-33 级灰
--mat-air-44 级灰
--mat-solid-0不透明，以此类推
Code

每一组前景色定义三种变体：

--text-1区域内采用的字体颜色
--text-2区域内采用的次级字体颜色
--text-3区域内采用的低调字体颜色
Code

材质 ​

材质定义了盒如何反射光源。

Code

Misc ​

可读性 ​

使用下列工具检查颜色的对比度：

https://ruitina.com/apca-accessible-colour-contrast/

https://contrast.tools/

高对比度对长期阅读有利，但无法明示焦点；工具仅供参考。

深色模式 ​

在深色模式下，主色的亮度和饱和度需要可观提升，以达到和明亮环境相同的视觉效果。

Checker shadow illusion