Cores
Cores
Nenhum componente nomeia uma cor. A cor vive na paleta, como escalas de doze tons dados para o fundo claro e o escuro; o esquema de cores escolhe qual fundo a página lê; um componente lê um papel — uma superfície, uma borda, um texto — que é um lugar em uma escala. A pele nunca diz uma cor. Mude o esquema a partir do cabeçalho e cada amostra abaixo se move sem que nenhuma delas seja redefinida.
Escalas
Uma paleta é um neutro, um acento — a marca — e os quatro estados, cada um uma escala de doze tons, dispostos da forma como Radix Themes e Material 3 dispõem uma cor. Um lugar em uma escala significa o mesmo em todas as escalas e em ambos os fundos: para que servem os números abaixo. Um aplicativo traz sua paleta ao dar seu acento; cada escala segue.
--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 o fundo de uma região de trabalho
- 2 o fundo da página, ao redor e entre regiões
- 3 o fundo de um campo; o fundo sutil em que um estado se assenta
- 4 um controle elevado; um fundo sobrevoado
- 5 um cartão, um bloco — e sua borda discreta
- 6 uma borda
- 7 uma borda entre duas regiões
- 8 uma borda forte, um anel de foco
- 9 o todo da cor, preenchendo o que marca
- 10 o mesmo, sobrevoado
- 11 a cor como tinta, legível nos fundos
- 12 tinta forte — para o neutro, o texto em si
Superfícies
Os fundos, da região para fora — cada um um lugar na escala neutra. O fundo claro do painel os ordena por claridade até o branco, o fundo escuro pela distância que cada um é elevado do chão.
--surface-zoneO fundo em que uma região de uma página se apoia--surface-pageA própria página, e o que aparece entre as zonas--surface-shellMenu, cabeçalho, rodapé--surface-1Entradas e campos--surface-2Botões, barras de ferramentas--surface-3Blocos, cartões, modais--surface-invertUm controle se destacando ao adotar a cor do textoTexto
Três níveis de atenção — neutro 12, 11 e 9: o que está sendo lido, o que o qualifica e o que está apenas lá para ser encontrado quando procurado.
--text-color-default — O que está sendo lido
--text-color-muted — Rótulos, meta, subtítulos
--text-color-subtle — Separadores e estados vazios
Bordas
Quatro pesos, diferenciados pelo que separaram — neutro 5 a 8: duas coisas dentro de uma região, um campo do que está atrás dele, duas regiões de uma página e a borda do que tem o foco.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
Categorias
Treze cores que não significam nada além de "não a que está ao lado": a série de um gráfico, os segmentos de uma distribuição, as etapas de um fluxo de trabalho. Nomeadas, não numeradas — um app escolhe `cat-mint` porque parece com hortelã — e cada uma uma escala como as outras, então uma categoria é usada da mesma forma que um estado é: seu fundo em 3, sua tinta em 11, preenchido em 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