/* ============================================================ Caigua 3.0 — Tokens de diseño ------------------------------------------------------------ Fuente única de verdad para color, tipografía, espacio y elevación. No escribas valores hexadecimales sueltos en plantillas ni componentes: si falta un color, añádelo aquí y verifica su contraste. ## De dónde salen estos valores (#276) «Organic». Crema y arena de tierra seca, terracota de acción y salvia de segunda voz. Sustituye al «pliego de herbario» de #98 —papel frío con sesgo verde y azul de tintero—, que a su vez había sustituido a la paleta de Ant Design heredada de la 2.x (#68). Este fichero es el primer paso y va solo: cambia aquí y el sitio entero se re-tiñe sin tocar una plantilla. Lo que se invierte respecto a #98, y conviene saberlo al leer el resto del CSS: - **La superficie alzada es más OSCURA que la página.** Antes la tarjeta era papel más blanco sobre papel; ahora es arena sobre crema. Todo lo que diera por hecho «alzado = más claro» —sombras, campos dentro de paneles, bordes que no hacían falta porque la tarjeta se despegaba sola— hay que mirarlo. - **Las esquinas se alargan.** #98 las acortó a 2–4px («papel, no plástico»); Organic vuelve a la píldora y a los 32px. ## Contrastes Calculados, no estimados, y sobre los **tres** papeles: la página #f5ead8, la banda #eee7db y el alzado #ebddc5. El alzado es el más oscuro, así que es el que manda: un color que cumple sobre la página y no sobre la tarjeta no cumple. Los bordes de campo y el anillo de foco cumplen el 3:1 que WCAG exige a un componente de interfaz; el texto, el 4.5:1. ## Los números del paquete de diseño que no salían El handoff daba por buenos varios valores que al calcularlos no se sostienen. Están corregidos aquí, y anotados para que nadie los vuelva a meter: 1. Crema sobre terracota media #c67139 no da 4.6:1, da **3.03:1**. No vale ni para texto grande. 2. Su salida de emergencia, subir el fondo a #b2622d, no da 5.6:1: da **3.77:1**. Tampoco vale. 3. Ese mismo #c67139 como anillo de foco da 3.03:1 sobre la página, pero **2.94:1 sobre la banda y 2.69:1 sobre el alzado**, que es donde vive medio sitio. 4. Y como relleno tampoco llega: los dos acentos de las maquetas —#c67139 y el salvia #7a8a5e— pintan cosas que **llevan información** —los pasos de la polinización, las barras de las gráficas, los puntos de mes de la tarjeta—, y un objeto gráfico informativo necesita 3:1 (WCAG 1.4.11). Sobre la tarjeta se quedan en 2.69 y 2.79. Los dos bajan un peldaño de su propia rampa, a #b2622d y #728157. Conclusión: `--c-accent` es relleno y nada más. Todo lo que lleve texto encima o haga de anillo usa `--c-primary`, que a 5.72:1 sirve para las dos cosas. No hace falta el `--c-accent-strong` que se propuso: no existe ningún peldaño más claro que cumpla, así que sería `--c-primary` con otro nombre. ============================================================ */ :root { /* Lo primero, y no es decoración: `color-scheme` es lo que pinta en oscuro lo que no pintamos nosotros —un ``, la barra de desplazamiento, el autorrelleno—. Sin él, una página oscura sale con los controles nativos en claro (#266). */ color-scheme: light; /* --- Superficies ------------------------------------------------ */ --c-surface: #f5ead8; /* crema — fondo de página */ --c-surface-alt: #eee7db; /* banda — cabecera de tabla, hover, bandas */ --c-surface-raised: #ebddc5; /* arena — tarjetas y paneles. Más oscuro que la página: al revés que en #98. */ /* Ya no hay barra lateral: la quitó #98. El token sobrevive para lo poco que necesita fondo de tinta —el enlace de salto, el pie nuevo y la banda de la página de mes—. */ --c-nav: #272e1b; /* --- Texto ------------------------------------------------------ */ --c-ink: #201e1d; /* 13.9:1 página · 13.5:1 banda · 12.4:1 alzado */ --c-ink-soft: #645c50; /* 5.5:1 página · 5.4:1 banda · 4.9:1 alzado */ /* Alias declarado, y no un color repetido. El paquete daba a `faint` el mismo valor que a `soft` sin decirlo, y dos nombres para un color es una trampa a seis meses vista. Se buscó un peldaño intermedio y **no lo hay**: por encima de #645c50, lo siguiente que se probó (#6b6255) ya baja a 4.48:1 sobre el alzado, y `--c-ink-faint` se usa en `.field__hint` y `.card__meta`, que van a --t-sm y necesitan el 4.5:1 entero (#15). */ --c-ink-faint: var(--c-ink-soft); --c-ink-on-dark: #f5ead8; /* 11.8:1 sobre --c-nav */ /* --- Acción ----------------------------------------------------- */ /* Terracota. A diferencia de #98 aquí sí hace falta partirla en dos, y por el motivo contrario al de la 2.x: el color que da carácter a Organic —el #c67139 de las maquetas— no llega ni a 3.1:1, así que no puede llevar texto encima ni rodear un campo enfocado. */ --c-primary: #8c491a; /* 5.7:1 página · 5.5:1 banda · 5.1:1 alzado. Enlaces, texto de acción **y fondo de botón**: con --c-on-primary encima da 5.7:1. */ --c-primary-hover: #643312; /* 8.7:1 — sobrevuelo */ --c-accent: #b2622d; /* 3.8:1 página · 3.7:1 banda · 3.4:1 alzado. Rellenos que **llevan información**: los pasos de la escala de polinización, las barras de las gráficas, el borde de sobrevuelo de la paginación. Por eso cumple el 3:1 de WCAG 1.4.11 sobre los tres papeles, y por eso no es el #c67139 de las maquetas: ese se queda en 2.69:1 sobre la tarjeta. Es el peldaño de al lado de la misma rampa (accent-600). Nunca texto encima: con crema da 3.8:1. */ --c-primary-wash: #fff2eb; /* estado activo — --c-primary encima da 6.2:1 */ --c-on-primary: #f5ead8; /* 5.7:1 sobre --c-primary */ /* --- Segunda voz ------------------------------------------------- */ /* Salvia. Es la que distingue el catálogo del resto del sitio: chips de familia, puntos de mes de siembra, la banda de la página de mes. Va partida en cuatro por la misma razón que la terracota: el color de chrome no es el color de texto. */ --c-accent-2: #728157; /* 3.5:1 página · 3.4:1 banda · 3.1:1 alzado. Mismo caso que la terracota y misma corrección: los puntos de mes de la tarjeta dicen cuándo se siembra, así que son objeto gráfico con información. El #7a8a5e de las maquetas se queda en 2.79:1 sobre la tarjeta; este es el peldaño de al lado (accent-2-600). No texto. */ --c-accent-2-text: #56633f; /* 5.4:1 sobre la página */ --c-accent-2-wash: #f0fae1; /* fondo del chip de familia */ --c-accent-2-deep: #3d472b; /* 9.1:1 sobre el wash — el texto del chip */ /* --- Semántico -------------------------------------------------- */ /* Separado del acento por definición: verde, ámbar y rojo dicen estado, no marca. Las tintas vienen de #98 y siguen cumpliendo sobre los tres papeles nuevos; solo el ámbar bajó a 4.43:1 sobre el alzado y se oscureció un peldaño. Los wash sí son nuevos: los de #98 eran fríos y sobre crema no se leían como estado. */ --c-success: #2C6B30; /* 5.4:1 página · 4.8:1 alzado */ --c-warning: #835500; /* 5.4:1 página · 4.8:1 alzado — era #8A5A00 (4.43) */ --c-danger: #A22C21; /* 6.1:1 página · 5.4:1 alzado */ --c-info: #8c491a; /* = --c-primary, como en #98 */ /* Los wash de Organic se ven por ser **más claros** que la página, no más oscuros: #fff2eb y #f0fae1 están por encima de #f5ead8 en luminancia. Los semánticos siguen esa regla, y cada uno lleva su tinta encima con holgura. */ --c-success-wash: #edf7e2; /* --c-success encima: 5.8:1 */ --c-warning-wash: #fdf3d9; /* --c-warning encima: 5.8:1 */ --c-danger-wash: #ffeae4; /* --c-danger encima: 6.2:1 */ --c-info-wash: #fff2eb; /* = --c-primary-wash */ /* --- Bordes ----------------------------------------------------- */ --c-border: #dcd3c4; /* separadores decorativos */ --c-border-strong: #82796a; /* 3.6:1 página · 3.2:1 alzado — bordes de campo */ /* --- Estados ----------------------------------------------------- */ --c-hover: #eee7db; /* Anillo de foco. **No es `--c-accent`**: ese se queda en 2.94:1 sobre la banda y 2.69:1 sobre el alzado, y un anillo que solo cumple sobre el fondo de página no cumple. Con `--c-primary` da 5.7 / 5.5 / 5.1. Sigue siendo token propio porque cualquier superficie oscura lo redefine, y ya pasó una vez que el azul sobre azul marino se quedaba en 2.99:1. */ --c-focus: var(--c-primary); /* --- El año de la semilla (#108) ---------------------------------- */ /* Tres épocas, tres tonos que hay que poder distinguir. La siembra usa `--c-primary`, así que la cosecha **tuvo que moverse**: el ámbar de #98 (#9F6328) es un pariente cercano de la terracota y además solo daba 4.11:1 con el texto que lleva encima. Pasa a oro de oliva, que no se confunde con el ladrillo. La floración se queda: la ciruela sobre crema aguanta bien. Los dos calculados sobre `--c-on-primary`. */ --c-floracion: #943866; /* 5.9:1 con --c-on-primary encima */ --c-cosecha: #7d6414; /* 4.8:1 con --c-on-primary encima */ /* --- Tipografía -------------------------------------------------- */ /* Caprasimo en los titulares y Figtree en todo lo demás, las dos autoalojadas y con su fallback ajustado (#278, ver `fuentes.css`). La cara «… fallback» va justo detrás de la real en las dos pilas: es la del sistema estirada hasta ocupar lo mismo, y está ahí para que el intercambio no mueva una línea. **`--font-prose` ya no existe.** La serif venía de #98 —«un catálogo de plantas se lee, no se opera»— y Organic no la trae. Se eligió a propósito, no por omisión: los titulares pasan a Caprasimo, que es la voz que ese argumento pedía y la tiene más fuerte, y el artículo se queda en Figtree a 15px/1.7. Volver es un token y seis líneas de `base.css`, y la razón para volver sería leer una ficha larga y encontrarla peor. */ --font-ui: Figtree, "Figtree fallback", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: Caprasimo, "Caprasimo fallback", var(--font-ui); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* En `rem` y no en `px`, que es como venía de #98: quien sube el tamaño de letra del navegador tiene que llevarse el sitio entero con él. Los comentarios dan el equivalente a 16px de raíz. La base sube de 14 a 15px, y entran los dos peldaños de titular que pide Organic: 46px para el h1 de una página y 64px para el de una ficha. */ --t-xs: 0.6875rem; /* 11px */ --t-sm: 0.75rem; /* 12px — metadatos */ --t-base: 0.9375rem; /* 15px — interfaz y cuerpo */ --t-md: 1rem; /* 16px — h4, entradilla */ --t-lg: 1.25rem; /* 20px — h3 */ --t-xl: 1.5rem; /* 24px — h2 */ --t-2xl: 1.75rem; /* 28px */ --t-3xl: 2.25rem; /* 36px — h1 de la vista tabla */ --t-4xl: 2.875rem; /* 46px — h1 de página */ --t-hero: 4rem; /* 64px — h1 de ficha, sobre la portada */ --lh-tight: 1.12; --lh-snug: 1.4; --lh-base: 1.55; --lh-prose: 1.7; --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; /* Espaciado de los rótulos en versalitas, que son una pieza propia del sistema y no un `text-transform` suelto. */ --ls-rotulo: 0.14em; /* --- Espacio ---------------------------------------------------- */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8px */ --s-3: 0.75rem; /* 12px */ --s-4: 1rem; /* 16px */ --s-5: 1.5rem; /* 24px */ --s-6: 2rem; /* 32px */ --s-7: 3rem; /* 48px */ --s-8: 4rem; /* 64px */ /* --- Forma ------------------------------------------------------ */ /* Botones, campos, etiquetas, segmentados y miniaturas de tabla van a `--r-full`; los contenedores grandes, a `--r-xl`. */ --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-xl: 32px; --r-full: 999px; /* Sombras cálidas: la sombra de un papel crema no es gris azulada. */ --sh-sm: 0 1px 2px rgba(46, 43, 37, 0.14); --sh-md: 0 3px 10px rgba(46, 43, 37, 0.16); --sh-lg: 0 12px 32px rgba(46, 43, 37, 0.22); /* --- Disposición ------------------------------------------------ */ /* 66ch y no las 72 que pone el paquete en su fichero de tokens: su propia descripción de la ficha dice 66, y es la medida de lectura que ya estaba. Cuando dos hojas del mismo paquete discrepan, manda la que describe la pantalla. */ --w-prose: 66ch; --w-page: 1200px; /* las maquetas trabajan a 1240 con 40 de margen */ --w-carril: 280px; /* el carril de datos de la ficha; #282 lo baja a 220 */ --h-barra: 56px; /* Lo que ocupa la cabecera pegajosa entera: la fila de la barra **más** la miga de pan. No sale de `--h-barra`, que es solo el alto mínimo de la fila y se queda a menos de la mitad. Es un valor medido, y no se puede derivar en CSS: depende del relleno y de si hay miga. Va por lo alto a propósito: cinco píxeles de más no se ven, y cinco de menos meten lo que se pegue por debajo de la barra (#183). **Vuelto a medir con las fuentes ya puestas** (#278), en la pantalla donde se usa —el índice pegajoso del formulario de edición— y con Chromium: ≥ 1280 px … 101.3 900–1000 px … 151.8 Así que se queda en 157: cubre el peor caso con los cinco píxeles de margen que pide la regla. Subir la base de 14 a 15 px no lo desbordó. */ --h-cabecera: 157px; --h-cover: 430px; /* la portada a sangre de la ficha; era 400 */ /* --- Movimiento -------------------------------------------------- */ --e-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --e-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ Tema oscuro (#287) — por preferencia del sistema o por data-theme="dark" en , y el manual gana en ambos sentidos. ## Qué traía el paquete de diseño, y por qué no se fusionó Cinco variables sueltas bajo `prefers-color-scheme`. Ninguna superficie, así que en oscuro la página seguía siendo crema con un naranja encima; sin el guardián `:root:not([data-theme="light"])`, así que quien eligiera claro a mano con el sistema en oscuro se quedaba sin poder; y sin bloque `[data-theme="dark"]`, así que el conmutador manual dejaba de funcionar en el otro sentido. Esto es la rampa entera, escrita aquí. ## Las dos vías, y por qué son dos bloques El `@media` contesta a la preferencia del sistema y lleva el guardián para que una elección manual le gane. El bloque de `[data-theme="dark"]` va después y no está dentro de ningún `@media`: es lo que permite pedir oscuro con el sistema en claro. Duplicar los valores es el precio de que el conmutador gane en los dos sentidos sin JavaScript. ## Todos los ratios están calculados Sobre los tres papeles oscuros, con la misma regla que el tema claro: 4.5:1 para texto y 3:1 para bordes y rellenos con información. Los comprueba `core/tests/test_contraste.py`, que lee este fichero y recalcula. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* --- Superficies ------------------------------------------------ */ /* Tierra cálida, no pizarra: el papel oscuro sale de la misma familia que la crema, no del verde frío de #98. **El alzado es más CLARO que la página**, al revés que en el tema claro. Es lo natural: en oscuro, lo que se levanta se aclara. */ --c-surface: #1a1512; --c-surface-alt: #221c17; --c-surface-raised: #272019; --c-nav: #120e0c; /* --- Texto ------------------------------------------------------ */ --c-ink: #f0e7d9; /* 14.8:1 página · 13.1:1 alzado */ --c-ink-soft: #b3a695; /* 7.6:1 · 6.7:1 */ /* Alias, como en claro: no hay peldaño intermedio que valga la pena. */ --c-ink-faint: var(--c-ink-soft); --c-ink-on-dark: #f0e7d9; /* 15.7:1 sobre --c-nav */ /* --- Acción ----------------------------------------------------- */ /* La terracota sube de la rampa de Organic hasta cumplir sobre tierra. */ --c-primary: #f6a06b; /* 8.8:1 · 7.8:1 */ --c-primary-hover: #ffc6a5; /* 12.0:1 */ --c-accent: #d67f48; /* 5.3:1 — rellenos con información */ --c-primary-wash: #3a2115; /* --c-primary encima: 7.2:1 */ --c-on-primary: #1a1512; /* 8.8:1 sobre --c-primary */ /* --- Segunda voz ------------------------------------------------- */ /* La salvia invierte su par: en oscuro el wash es el fondo y `deep` el texto claro que va encima. Es lo que hace que el chip de familia no salga crema sobre tierra. */ --c-accent-2: #8fa073; /* 5.7:1 — chrome, no texto */ --c-accent-2-text: #aebf92; /* 9.2:1 */ --c-accent-2-wash: #242a1b; --c-accent-2-deep: #ccdbb2; /* 10.1:1 sobre el wash */ /* --- Semántico -------------------------------------------------- */ --c-success: #8fce87; /* 9.8:1 */ --c-warning: #e0b45f; /* 9.4:1 */ --c-danger: #f0897a; /* 7.4:1 */ --c-info: #f6a06b; /* = --c-primary */ --c-success-wash: #1c2418; /* su tinta encima: 8.6:1 */ --c-warning-wash: #2a2114; /* 8.2:1 */ --c-danger-wash: #2c1a17; /* 6.8:1 */ --c-info-wash: #3a2115; /* --- El año de la semilla ---------------------------------------- */ /* Las tres épocas siguen distinguiéndose: ladrillo, ciruela y oro de oliva, subidos hasta que el texto de encima cumple. */ --c-floracion: #d986b0; /* 6.9:1 con --c-on-primary encima */ --c-cosecha: #c9b45e; /* 8.8:1 */ /* --- Bordes y estados -------------------------------------------- */ --c-border: #332b23; --c-border-strong: #8a7d6d; /* 4.0:1 */ --c-hover: #221c17; /* --- Sombras ------------------------------------------------------ */ /* Sobre tierra, una sombra no se ve: lo que separa una tarjeta del fondo es que el alzado es más claro. Se quedan por lo que las usa el editor. */ --sh-sm: 0 1px 2px rgb(0 0 0 / 0.4); --sh-md: 0 4px 14px rgb(0 0 0 / 0.5); --sh-lg: 0 12px 30px rgb(0 0 0 / 0.6); } } :root[data-theme="dark"] { color-scheme: dark; /* Los mismos valores que arriba. Duplicarlos es lo que hace que pedir oscuro a mano con el sistema en claro funcione: un `@media` no puede contestar a algo que no es una preferencia del sistema. */ /* --- Superficies ------------------------------------------------ */ /* Tierra cálida, no pizarra: el papel oscuro sale de la misma familia que la crema, no del verde frío de #98. **El alzado es más CLARO que la página**, al revés que en el tema claro. Es lo natural: en oscuro, lo que se levanta se aclara. */ --c-surface: #1a1512; --c-surface-alt: #221c17; --c-surface-raised: #272019; --c-nav: #120e0c; /* --- Texto ------------------------------------------------------ */ --c-ink: #f0e7d9; /* 14.8:1 página · 13.1:1 alzado */ --c-ink-soft: #b3a695; /* 7.6:1 · 6.7:1 */ /* Alias, como en claro: no hay peldaño intermedio que valga la pena. */ --c-ink-faint: var(--c-ink-soft); --c-ink-on-dark: #f0e7d9; /* 15.7:1 sobre --c-nav */ /* --- Acción ----------------------------------------------------- */ /* La terracota sube de la rampa de Organic hasta cumplir sobre tierra. */ --c-primary: #f6a06b; /* 8.8:1 · 7.8:1 */ --c-primary-hover: #ffc6a5; /* 12.0:1 */ --c-accent: #d67f48; /* 5.3:1 — rellenos con información */ --c-primary-wash: #3a2115; /* --c-primary encima: 7.2:1 */ --c-on-primary: #1a1512; /* 8.8:1 sobre --c-primary */ /* --- Segunda voz ------------------------------------------------- */ /* La salvia invierte su par: en oscuro el wash es el fondo y `deep` el texto claro que va encima. Es lo que hace que el chip de familia no salga crema sobre tierra. */ --c-accent-2: #8fa073; /* 5.7:1 — chrome, no texto */ --c-accent-2-text: #aebf92; /* 9.2:1 */ --c-accent-2-wash: #242a1b; --c-accent-2-deep: #ccdbb2; /* 10.1:1 sobre el wash */ /* --- Semántico -------------------------------------------------- */ --c-success: #8fce87; /* 9.8:1 */ --c-warning: #e0b45f; /* 9.4:1 */ --c-danger: #f0897a; /* 7.4:1 */ --c-info: #f6a06b; /* = --c-primary */ --c-success-wash: #1c2418; /* su tinta encima: 8.6:1 */ --c-warning-wash: #2a2114; /* 8.2:1 */ --c-danger-wash: #2c1a17; /* 6.8:1 */ --c-info-wash: #3a2115; /* --- El año de la semilla ---------------------------------------- */ /* Las tres épocas siguen distinguiéndose: ladrillo, ciruela y oro de oliva, subidos hasta que el texto de encima cumple. */ --c-floracion: #d986b0; /* 6.9:1 con --c-on-primary encima */ --c-cosecha: #c9b45e; /* 8.8:1 */ /* --- Bordes y estados -------------------------------------------- */ --c-border: #332b23; --c-border-strong: #8a7d6d; /* 4.0:1 */ --c-hover: #221c17; /* --- Sombras ------------------------------------------------------ */ /* Sobre tierra, una sombra no se ve: lo que separa una tarjeta del fondo es que el alzado es más claro. Se quedan por lo que las usa el editor. */ --sh-sm: 0 1px 2px rgb(0 0 0 / 0.4); --sh-md: 0 4px 14px rgb(0 0 0 / 0.5); --sh-lg: 0 12px 30px rgb(0 0 0 / 0.6); }