Tema

Color, radio, grosor de borde, altura de campo, fuente y movimiento pasan por variables CSS con el prefijo --tuc-, y todas viven en :root. Cambiar el aspecto es sobrescribir variables, sin recompilar nada: ningún valor de color, radio, borde o altura está escrito a mano en el CSS de los componentes.

En las muestras, cada color cambia también --tuc-accent-fg, y además --tuc-accent-text, el tono del acento usado como color de texto en el elemento activo del menú y en la etiqueta del select. Cambiar solo --tuc-accent dejaría texto ilegible en el botón primario.

:root {
  --tuc-accent: #4f46e5;
  --tuc-accent-hover: #4338ca;
  --tuc-accent-fg: #ffffff;       /* texto sobre el acento */
  --tuc-accent-text: #4338ca;     /* acento como color de texto, en claro */
  --tuc-radius: 1rem;             /* esquinas más redondeadas */
  --tuc-control-height: 2.5rem;   /* campos más altos */
}
.dark {
  --tuc-accent-text: #818cf8;     /* en oscuro, un tono más claro para tener contraste */
}

El acento y el texto sobre él

El acento por defecto es neutro: negro en el tema claro y casi blanco en el oscuro. El color es de tu proyecto — el paquete no impone una marca, y combina con cualquiera hasta que lo cambies. El naranja que ves en esta documentación es el color del sitio, definido de la misma forma en que definirías el tuyo.

El acento tiene tokens separados para cada papel, porque un color vivo rara vez sirve para todos. Sobre el naranja de este sitio el texto es blanco (--tuc-accent-fg), con contraste 2,7 — decisión de marca; quien necesite 4,5 usa #0a0a0a (7,4). Y el naranja vivo como color de texto sobre fondo claro también da 2,7, así que el enlace, el elemento activo del menú, la etiqueta del select, el "hoy" del calendario y el icono activo leen --tuc-accent-text, aquí #B84300 en claro (5,5 sobre blanco) y el propio #FF7501 en oscuro (6,7).

/* El naranja de este sitio */
:root {
  --tuc-accent: #FF7501;
  --tuc-accent-hover: #FF8A2A;
  --tuc-accent-fg: #ffffff;
  --tuc-accent-text: #B84300;
  --tuc-thumb: #ffffff;
}
.dark {
  --tuc-accent: #FF7501;
  --tuc-accent-hover: #FF8A2A;
  --tuc-accent-fg: #ffffff;
  --tuc-accent-text: #FF7501;
  --tuc-thumb: #ffffff;
}

El .dark repite el acento porque el valor neutro por defecto cambia con el tema: sin él, el oscuro volvería al casi blanco.

Los tonos semánticos nunca leen el acento. Éxito, advertencia, peligro e información tienen tokens propios, porque la marca puede ser de cualquier color y el significado no puede cambiar con ella. Por eso información recibió --tuc-info: leyendo el acento, con naranja el aviso de información quedaba igual al de advertencia, y la etiqueta "Nuevo" se confundía con "En revisión".

Tokens

La lista completa, con el valor de cada tema. La fuente de verdad es src/styles/core/tokens.css; el llms.txt trae la misma lista, generada a partir del código.

Superficie y texto

Acento

Tonos semánticos

El tono de texto y el relleno sólido son tokens distintos a propósito. --tuc-danger es más claro en oscuro para tener contraste sobre fondo oscuro — y un botón pintado con él quedaría pastel con texto blanco encima. --tuc-danger-fill es el mismo en los dos temas.

Forma y tamaño

Profundidad y movimiento

La entrada y la salida usan curvas distintas a propósito: usar la misma curva en las dos hace que la salida parezca perezosa.

Modo oscuro

El modo oscuro sigue la clase .dark en el <html>, la convención de Tailwind y del admin moderno de Django. data-theme="dark" también vale.

<html class="dark">
<html data-theme="dark">

Para seguir al sistema operativo, marca la raíz con data-tuc-theme="auto". Es opt-in a propósito: seguir al sistema por defecto hacía que el componente se oscureciera solo en una página clara. Quien manda en el tema es el proyecto, y no el sistema operativo.

<html data-tuc-theme="auto">

El modo oscuro también pone color-scheme: dark, que hace que el navegador dibuje la barra de desplazamiento y los campos nativos en tono oscuro — solo dentro de los componentes, para no imponer el esquema de colores a toda la página.

Alcance por contenedor

Como son variables, el alcance lo decides tú: en :root valen para toda la página, y declaradas en un contenedor valen solo dentro de él. Es la forma de tener un panel con color propio, o una franja oscura en una página clara.

.panel-green {
  --tuc-accent: #0f766e;
  --tuc-accent-hover: #115e59;
  --tuc-accent-fg: #ffffff;
  --tuc-accent-text: #0f766e;
  --tuc-accent-soft: color-mix(in oklab, var(--tuc-accent) 12%, transparent);
  --tuc-accent-ring: color-mix(in oklab, var(--tuc-accent) 35%, transparent);
}
.dark .panel-green {
  --tuc-accent-text: #2dd4bf;     /* texto de acento legible sobre fondo oscuro */
}

/* .dark en un contenedor: los tonos cambian, y su fondo suave hay que rehacerlo ahí */
.band.dark {
  background: var(--tuc-bg);
  --tuc-success-soft: color-mix(in oklab, var(--tuc-success) 12%, transparent);
  --tuc-warning-soft: color-mix(in oklab, var(--tuc-warning) 14%, transparent);
  --tuc-danger-soft: color-mix(in oklab, var(--tuc-danger) 12%, transparent);
  --tuc-info-soft: color-mix(in oklab, var(--tuc-info) 12%, transparent);
}

Un panel que se abre fuera del contenedor — calendario, lista del select, menú, toast — se inserta al final del <body> y no hereda sus variables. Para esos, declara el tema en :root, o usa appendTo donde el componente lo ofrezca.

Diseño compacto

Por debajo de 40rem (640px) el diseño se vuelve compacto. El mismo punto de corte vale para el CSS y para el JavaScript del date picker, y es por ancho — no por pointer: coarse —, porque un portátil con pantalla táctil no debería recibir comportamiento de móvil.

Si tu proyecto cambia de diseño en otro punto, el compacto de la biblioteca no lo acompaña — está fijo en 40rem. Tus propios campos deberían adoptar los mismos 16px en el móvil por el mismo motivo; es el patrón text-base md:text-sm de shadcn.