颜色
颜色
没有组件名称颜色。颜色存在于调色板中,以给定的浅色和深色的十二种色调的比例;配色方案选择页面的阅读面;组件读取一个角色——一个表面、一个边框、一个文本——这在一个比例上的一个位置。皮肤从不显示颜色。从标题切换方案,下面的每个色板都会移动,而没有一个被重新定义。
比例
调色板是中性色和强调色——品牌——以及四种状态,每种状态都是十二种色调的比例,按照 Radix Themes 和 Material 3 的颜色布局。比例上的一个位置在每个比例和两个面上都是相同的:下面的数字就是它的意义。应用程序通过提供其强调色来带来其调色板;每个比例都遵循。
--neutral-*
1
2
3
4
5
6
7
8
9
10
11
12
--accent-*
1
2
3
4
5
6
7
8
9
10
11
12
--info-*
1
2
3
4
5
6
7
8
9
10
11
12
--success-*
1
2
3
4
5
6
7
8
9
10
11
12
--warning-*
1
2
3
4
5
6
7
8
9
10
11
12
--error-*
1
2
3
4
5
6
7
8
9
10
11
12
- 1 工作区域的基础
- 2 页面的基础,区域之间和周围
- 3 一个场地的基础;状态所处的微弱基础
- 4 一个提升的控制;一个悬停的基础
- 5 一张卡片,一个块——及其细微的边框
- 6 一个边框
- 7 两个区域之间的边框
- 8 一个强边框,一个聚焦环
- 9 整个颜色,填充其标记的内容
- 10 同样的,悬停
- 11 作为墨水的颜色,可在基础上读取
- 12 强墨水——用于中性,文本本身
表面
区域外的基础——每一个都是中性比例上的一个位置。仪表盘的浅色面按亮度排序,直到白色,深色面则根据每个基础离地面的高度排序。
--surface-zone页面区域所站立的基础--surface-page页面本身,以及区域之间显示的内容--surface-shell菜单、标题、页脚--surface-1输入和字段--surface-2按钮、工具栏--surface-3区块、卡片、模态--surface-invert一个通过采用文本颜色而突出的控制文本
三种关注级别——中性 12、11 和 9:正在阅读的内容、对其的修饰,以及仅在寻找时才会被发现的内容。
--text-color-default — 正在阅读的内容
--text-color-muted — 标签、元数据、副标题
--text-color-subtle — 分隔符和空状态
边框
四种重量,通过它们所分隔的内容区分——中性 5 到 8:一个区域内的两个事物、一个场地与其背后的内容、页面的两个区域,以及聚焦的环。
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
类别
十三种颜色,意味着除了‘旁边的那个’什么也不是:图表的系列、分布的段、工作流的阶段。命名,而不是编号——应用程序选择 `cat-mint` 是因为它看起来像薄荷——每个都是与其他相似的比例,因此类别的表现就像状态一样:其基础在 3,其墨水在 11,填充在 9。
--cat-ruby-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grapefruit-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-bittersweet-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-sunflower-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-straw-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-grass-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-mint-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-teal-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-aqua-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-blue-jeans-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-plum-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-lavender-*
1
2
3
4
5
6
7
8
9
10
11
12
--cat-pink-rose-*
1
2
3
4
5
6
7
8
9
10
11
12