Fundamentos

Color

El sistema separa dos capas. La paleta son los colores, con nombre y valor fijos, iguales en los dos temas. Los tokens semánticos (el rol de uso de cada color: fondo, texto, borde, estado) asignan un color de la paleta para tema claro y otro para tema oscuro; el diseño siempre se construye con tokens semánticos (var(--surface--color--container)), nunca con colores de paleta directos.

01 · Paleta

Nombres de color, no de función: el mismo valor en cualquier tema y sin uso asignado. La semántica —error, fondo, foco— aparece en los tokens semánticos. Los colores sueltos llevan nombre propio; los de una rampa, número: cuanto más alto, más oscuro.

Verdes de marca

El eje verde de VADAVO, del pino más oscuro a la lima.

Verde pino

$pine-green

#20463B

Pino medio

$pine-mid

#2C5A4B

Pino claro

$pine-light

#376B59

Verde esmeralda

$emerald-green

#007459

Jade

$jade

#45C79C

Menta

$mint

#C8E6DA

Lima

$lime

#D9EB89

Neutros claros

Blancos y grises muy claros, cálidos o con matiz verde.

Beige

$beige

#F9F8F3

Blanco roto

$off-white

#FBFBFB

Menta sutil

$mint-subtle

#EFF4F0

Piedra

$stone

#E6E6E4

Neutros oscuros

Verdes muy oscuros, del musgo al casi negro.

Musgo

$moss

#3A4743

Grafito

$graphite

#2A3330

Pizarra

$slate

#1E2825

Carbón

$charcoal

#161C1C

Hulla

$coal

#0E1413

Rojos, rosas y limas

Los colores que quedan fuera del eje verde.

Rojo ladrillo

$brick-red

#B3261E

Rojo profundo

$brick-red-deep

#8E1E18

Rosa cuarzo

$quartz-pink

#F2B8B5

Rosa niebla

$mist-pink

#F6E7E5

Granate

$garnet

#35201E

Lima sutil

$lime-subtle

#F1F4E4

Lima oscura

$lime-dark

#262B18

Negro

Negro puro, sin matiz verde.

Negro

$black

#000000

Rampa salvia

Un solo eje de neutros con matiz verde.

$sage-100

$sage-200

$sage-300

$sage-400

$sage-500

$sage-600

$sage-700

$sage-800

$sage-900

$sage-1000

$sage-1100

$sage-1200

$sage-1300

$sage-1400

02 · Tokens semánticos por tema

Cada token semántico de color tiene dos asignaciones, una por tema. Cambiar de tema solo reasigna el color de la paleta.

Superficie

El color de fondo del documento, el color de fondo de un contenedor y el color del borde de un contenedor.

Token semántico	Tema claro	Tema oscuro
Color de fondo del documento --surface--color--document	Beige #F9F8F3	Hulla #0E1413
Color de fondo de un contenedor --surface--color--container	Blanco roto #FBFBFB	Carbón #161C1C
Color del borde de un contenedor --surface--border--container	Verde pino #20463B	Menta #C8E6DA

Texto

El color de un texto dice qué clase de texto es. La rampa salvia se invierte entera al cambiar de tema.

Token semántico	Tema claro	Tema oscuro
Texto de exposición --text--color--display	Verde pino #20463B	Menta #C8E6DA
Texto de interfaz --text--color--ui	Salvia 1300 #161C1C	Salvia 100 #F1F4F2
Texto de lectura --text--color--body	Salvia 1100 #2A3330	Salvia 200 #DEE5E2
Texto que anota a otro --text--color--meta	Salvia 900 #4C5C56	Salvia 400 #A6B3AE
Texto inactivo --text--color--inactive	Salvia 700 #7A8A84	Salvia 600 #8B9994
Enlace --text--color--link	Verde esmeralda #007459	Jade #45C79C
Enlace al apuntar --text--color--link-hover	Verde pino #20463B	Menta #C8E6DA
Enlace de navegación --text--color--navigation	Salvia 900 #4C5C56	Salvia 400 #A6B3AE

Borde y foco

El color del borde de un elemento en reposo y al apuntarlo, el de una línea separadora, y el del anillo de foco. Los tintes ($pine-tint-N, $mint-tint-N) son tokens de valor: viven en tokens/_colors.scss.

Token semántico	Tema claro	Tema oscuro
Borde en reposo --border--color--rest	Pino al 28 % rgba(32, 70, 59, 0.28)	Menta al 34 % rgba(200, 230, 218, 0.34)
Borde al apuntar --border--color--hover	Pino al 40 % rgba(32, 70, 59, 0.40)	Menta al 45 % rgba(200, 230, 218, 0.45)
Borde del elemento actual --border--color--active	Verde pino #20463B	Menta #C8E6DA
Línea separadora --border--color--divider	Pino al 18 % rgba(32, 70, 59, 0.18)	Menta al 22 % rgba(200, 230, 218, 0.22)
Anillo de foco --focus--color--ring	Jade #45C79C	Lima #D9EB89

Apuntado y no disponible

El color de fondo que toma un elemento al apuntarlo, y los colores de un control no disponible.

Token semántico	Tema claro	Tema oscuro
Color de fondo al apuntar --hover--background--target	Menta #C8E6DA	Musgo #3A4743
Color del texto no disponible --disabled--color--text	Salvia 600 #8B9994	Salvia 700 #7A8A84
Color de fondo de un control no disponible --disabled--background--control	Menta sutil #EFF4F0	Pizarra #1E2825

Selección

Los colores de un control que se marca o se desmarca.

Token semántico	Tema claro	Tema oscuro
Color de fondo de la casilla sin marcar --selection--background--box	Blanco roto #FBFBFB	Carbón #161C1C
Color de la marca de un control marcado --selection--color--checked	Verde pino #20463B	Lima #D9EB89
Color de fondo de una opción marcada --selection--background--option-checked	Menta #C8E6DA	Musgo #3A4743
Color del texto de una opción marcada --selection--color--option-checked-text	Verde pino #20463B	Menta #C8E6DA
Color de fondo del elemento actual entre sus iguales --selection--background--current	Lima #D9EB89	Lima #D9EB89
Color del texto del elemento actual entre sus iguales --selection--color--current-text	Verde pino #20463B	Verde pino #20463B
Color del texto de un igual que no es el actual --selection--color--peer-text	Salvia 900 #4C5C56	Salvia 400 #A6B3AE

Acción

Los colores de la acción primaria. Su color de fondo se aclara en oscuro, y el texto que lleva encima se oscurece.

Token semántico	Tema claro	Tema oscuro
Color de fondo de la acción primaria --action--background--primary	Verde esmeralda #007459	Jade #45C79C
Color del texto de la acción primaria --action--color--primary-text	Blanco roto #FBFBFB	Verde pino #20463B
Color del borde de la acción primaria --action--border--primary	Pino claro #376B59	Jade #45C79C

Control y campo

Los colores de un control con forma de píldora o circular, y los de un campo de texto.

Token semántico	Tema claro	Tema oscuro
Color de fondo de un control --control--background--rest	Blanco roto #FBFBFB	Carbón #161C1C
Color del borde y de la sombra desplazada de un control --control--color--stroke	Verde pino #20463B	Menta #C8E6DA
Color del glifo de un control que es solo un icono --control--color--glyph	Salvia 900 #4C5C56	Salvia 400 #A6B3AE
Color de ese glifo al apuntarlo --control--color--glyph-hover	Verde pino #20463B	Menta #C8E6DA
Color de fondo de un campo de texto --field--background--box	Blanco roto #FBFBFB	Carbón #161C1C

Estados

Éxito, error, aviso e inclusión, cada uno con su color y su color de fondo.

Token semántico	Tema claro	Tema oscuro
Color del estado de éxito --state--color--success	Verde esmeralda #007459	Jade #45C79C
Color del texto sobre un fondo de éxito --state--color--success-text	Blanco roto #FBFBFB	Verde pino #20463B
Color de fondo del estado de éxito --state--background--success	Menta #C8E6DA	Verde pino #20463B
Color del estado de error --state--color--error	Rojo ladrillo #B3261E	Rosa cuarzo #F2B8B5
Color de fondo de una acción de error al apuntarla --state--background--error-hover	Rojo profundo #8E1E18	Rosa niebla #F6E7E5
Color del texto sobre un fondo de error --state--color--error-text	Blanco roto #FBFBFB	Granate #35201E
Color de fondo del estado de error --state--background--error	Rosa niebla #F6E7E5	Granate #35201E
Color del texto sobre un fondo de aviso --state--color--warning-text	Blanco roto #FBFBFB	Verde pino #20463B
Color de fondo del estado de aviso --state--background--warning	Lima sutil #F1F4E4	Lima oscura #262B18
Color de la marca de incluido dibujada sin disco --state--color--included	Verde pino #20463B	Lima #D9EB89
Color de fondo del disco de la marca de incluido --state--background--included	Lima #D9EB89	Verde pino #20463B
Color de la marca sobre el fondo de incluido --state--color--included-text	Verde pino #20463B	Lima #D9EB89

Tema oscuro

El tema oscuro es una hoja aparte, ds.vadavo.dark.min.css, que solo redefine tokens semánticos con sus valores oscuros. Ha de cargarse después de la hoja base.