Colores
Colores
Ningún componente nombra un color. El color vive en la paleta, como escalas de doce tonos dados para el fondo claro y el oscuro; el esquema de color elige qué cara lee la página; un componente lee un rol — una superficie, un borde, un texto — que es un lugar en una escala. La piel nunca dice un color. Cambia el esquema desde el encabezado y cada muestra abajo se mueve sin que ninguna sea redefinida.
Escalas
Una paleta es un neutro, un acento — la marca — y los cuatro estados, cada uno una escala de doce tonos, dispuestos de la manera en que Radix Themes y Material 3 disponen un color. Un lugar en una escala significa lo mismo en cada escala y en ambas caras: para qué sirven los números abajo. Una aplicación trae su paleta al dar su acento; cada escala sigue.
--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 el fondo de una región de trabajo
- 2 el fondo de la página, alrededor y entre regiones
- 3 el fondo de un campo; el fondo tenue sobre el que se sienta un estado
- 4 un control elevado; un fondo al que se pasa el ratón
- 5 una tarjeta, un bloque — y su borde discreto
- 6 un borde
- 7 un borde entre dos regiones
- 8 un borde fuerte, un anillo de enfoque
- 9 el color entero, llenando lo que marca
- 10 lo mismo, al pasar el ratón
- 11 el color como tinta, legible sobre los fondos
- 12 tinta fuerte — para el neutro, el texto mismo
Superficies
Los fondos, desde la región hacia afuera — cada uno un lugar en la escala neutra. La cara clara del tablero los ordena por claridad hasta el blanco, la cara oscura por cuán lejos cada uno se eleva del suelo.
--surface-zoneEl terreno sobre el cual se sostiene una región de la página--surface-pageLa página misma, y lo que muestra entre las zonas--surface-shellMenú, encabezado, pie de página--surface-1Entradas y campos--surface-2Botones, barras de herramientas--surface-3Bloques, tarjetas, modales--surface-invertUn control que se destaca al tomar el color del textoTexto
Tres niveles de atención — neutro 12, 11 y 9: lo que se está leyendo, lo que lo califica, y lo que solo está ahí para ser encontrado cuando se busca.
--text-color-default — Lo que se está leyendo
--text-color-muted — Etiquetas, meta, subtítulos
--text-color-subtle — Separadores y estados vacíos
Bordes
Cuatro grosores, diferenciados por lo que separan — neutro 5 a 8: dos cosas dentro de una región, un campo de lo que está detrás de él, dos regiones de una página, y el anillo de lo que tiene el foco.
--border-color-discreet
--border-color-default
--border-color-region
--border-color-strong
Categorías
Trece colores que no significan nada más que "no el que está al lado": la serie de un gráfico, los segmentos de una distribución, las etapas de un flujo de trabajo. Nombrados, no numerados — una app elige `cat-mint` porque se parece a la menta — y cada uno una escala como los demás, así que una categoría se usa como un estado: su fondo en 3, su tinta en 11, relleno en 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