/* ============================================================ AUF - Design Tokens CORE ------------------------------------------------------------ Identidad de marca oficial. NO sobreescribir en proyectos individuales. Fuente: Manual de Marca Institucional AUF (última actualización del manual: 26/08/2016). Todo lo agregado en v0.2.0 y v0.2.1 es ADITIVO: ninguna variable que ya existía cambió de nombre ni de valor. Un proyecto que use la v0.1 puede actualizar sin tocar su CSS. ============================================================ */ :root { /* --- Paleta primaria (nombres tal como figuran en el manual) --- */ --auf-cielo: #41B6E6; /* PANTONE 298 C - C67 M2 Y0 K0 */ --auf-sol: #DAAA00; /* PANTONE 110 C - C2 M22 Y100 K8 */ --auf-pasion: #C8102E; /* PANTONE 1797 C - C2 M100 Y85 K6 */ --auf-historia: #333F48; /* PANTONE 432 C - C65 M43 Y26 K78 */ /* --- Paleta neutra (fondos de aplicaciones) --- */ --auf-neutro-01: #BEC6C4; /* PANTONE 441 C */ --auf-neutro-02: #C5B9AC; /* PANTONE 7528 C */ --auf-neutro-03: #C5B783; /* PANTONE 4525 C */ --auf-neutro-04: #ADCAB8; /* PANTONE 559 C */ --auf-blanco: #ffffff; --auf-negro: #111111; /* --- Grises de interfaz, derivados de Historia (v0.2.0) --- El manual no trae grises para UI: sus cuatro neutros son tonos de fondo para piezas gráficas, demasiado oscuros para el fondo de una tabla densa, y el texto secundario no llega a leerse encima (#7A8797 sobre neutro-01 da 2,1:1). En vez de inventar grises "a ojo", cada paso es Historia mezclado con blanco en un porcentaje fijo, así la escala es reproducible y conserva el matiz azulado de la marca: gris-N = color-mix(in srgb, #333F48 P%, #fff) 900 es la excepción: Historia 70% con negro. Contraste medido contra blanco (WCAG 2.x): */ --auf-gris-50: #F7F7F8; /* 4% - fondo de la app */ --auf-gris-100: #EFF0F0; /* 8% - cabecera de tabla, hover */ --auf-gris-200: #DEE0E2; /* 16% - líneas y divisores */ --auf-gris-300: #BABEC1; /* 34% - bordes decorativos */ --auf-gris-400: #899095; /* 58% - borde de control 3,24:1 */ --auf-gris-500: #747C83; /* 68% - íconos, deshabilitado 4,24 */ --auf-gris-600: #606970; /* 78% - texto secundario 5,60:1 */ --auf-gris-700: #47525A; /* 90% - 8,01:1 */ --auf-gris-800: #333F48; /* 100% - = Historia 10,80:1 */ --auf-gris-900: #242C32; /* Historia 70% + negro 14,18:1 */ /* Tres pasos más, para el modo oscuro (v0.3.0). Misma lógica, del otro lado: gris-N = color-mix(in srgb, #333F48 P%, #000). El contraste de acá abajo es contra --auf-gris-950, la superficie del modo oscuro. */ --auf-gris-850: #29323A; /* 80% - hover y cabecera de tabla */ --auf-gris-950: #1F262B; /* 60% - superficie (tarjetas) */ --auf-gris-975: #1A2024; /* 50% - fondo de la app */ /* Por qué 400 está en 58% y no en un paso parejo: es el borde de inputs y selects, y WCAG 1.4.11 pide 3:1 para el contorno de un control. Con 48% daba 2,55:1. */ /* --- Variantes de marca para TEXTO (v0.2.0) --- Sol y Cielo no se leen como texto sobre blanco (2,16:1 y 2,32:1: ni siquiera el mínimo de 3:1 para texto grande). Estas variantes son el mismo color mezclado con negro hasta pasar 4,5:1 sobre blanco, sobre gris-50 Y sobre su propio tinte (el caso del badge). Pasión ya pasa (5,88:1), no necesita variante. */ --auf-sol-texto: #876900; /* Sol 62% + negro - 5,18:1 */ --auf-cielo-texto: #2A7493; /* Cielo 64% + negro - 5,23:1 */ /* --- Tintes y bordes para fondos de estado (v0.2.0) --- tinte = color 14% + blanco; borde = color 40% + blanco. */ --auf-sol-tinte: #FAF3DB; --auf-sol-borde: #F0DD99; --auf-cielo-tinte: #E4F5FC; --auf-cielo-borde: #B3E2F5; --auf-pasion-tinte: #F7DEE2; --auf-pasion-borde: #E99FAB; --auf-exito-tinte: #E2EDE2; --auf-exito-borde: #ABCBAD; /* --- Colores semánticos (derivados de la paleta de marca) --- "Cielo" y "Historia" son los que mejor funcionan como primario/texto en UI; "Sol" y "Pasión" quedan como acento y color de error/alerta, que es coherente con su propio significado en el escudo. */ --color-primario: var(--auf-historia); --color-acento: var(--auf-cielo); --color-fondo: var(--auf-blanco); --color-texto: var(--auf-negro); /* --- Roles de interfaz (v0.2.0) --- REGLA: los componentes usan SOLO estas variables --color-*, nunca una --auf-* directa. Es lo que deja la puerta abierta a un modo oscuro futuro: se redefine este bloque y los componentes no se tocan. Un componente que escribe var(--auf-gris-200) queda clavado en modo claro para siempre. */ --color-fondo-app: var(--auf-gris-50); /* detrás de tarjetas y tablas */ --color-superficie: var(--auf-blanco); /* tarjetas, tablas, modales */ --color-superficie-alt: var(--auf-gris-100); /* cabecera de tabla, hover */ --color-linea: var(--auf-gris-200); --color-borde-control: var(--auf-gris-400); --color-texto-secundario: var(--auf-gris-600); --color-texto-deshabilitado: var(--auf-gris-500); --color-primario-hover: var(--auf-gris-900); --color-sobre-primario: var(--auf-blanco); /* texto encima de primario: 10,8:1 */ --color-sobre-acento: var(--auf-historia); /* texto encima de Cielo: 4,66:1 (blanco daría 2,32) */ --color-sobre-advertencia: var(--auf-historia); /* texto encima de Sol: 5,00:1 */ --color-foco: var(--auf-cielo-texto); /* anillo de foco: 5,23:1 contra blanco */ /* --- Estados --- */ --color-exito: #2e7d32; /* no está en el manual: verde estándar de UI */ --color-error: var(--auf-pasion); --color-advertencia: var(--auf-sol); --color-info: var(--auf-cielo); /* OJO: --color-advertencia y --color-info son para RELLENOS y bordes, no para texto (ver "Variantes de marca para TEXTO" arriba). Para texto de estado usar las -texto de acá abajo. (v0.2.0) */ --color-exito-texto: #2C7830; --color-exito-fondo: var(--auf-exito-tinte); --color-exito-borde: var(--auf-exito-borde); --color-error-texto: var(--auf-pasion); --color-error-fondo: var(--auf-pasion-tinte); --color-error-borde: var(--auf-pasion-borde); --color-advertencia-texto: var(--auf-sol-texto); --color-advertencia-fondo: var(--auf-sol-tinte); --color-advertencia-borde: var(--auf-sol-borde); --color-info-texto: var(--auf-cielo-texto); --color-info-fondo: var(--auf-cielo-tinte); --color-info-borde: var(--auf-cielo-borde); /* --- Tipografía oficial: Open Sans --- */ --font-family-base: 'Open Sans', Arial, sans-serif; --font-weight-light: 300; /* Open Sans Light - para titulares */ --font-weight-regular: 400; /* Open Sans Regular - para texto general */ --font-weight-bold: 700; /* Open Sans Bold - para subtítulos */ /* --- Radios de borde --- */ --radius-base: 4px; /* Escala (v0.2.0, aprobada 16/09/2026): radius-base sigue siendo el de los controles (botón, input, badge rectangular). Los contenedores grandes con 4px se ven filosos al lado de controles de 4px, por eso un paso más para tarjetas/tablas/modales. */ --radius-contenedor: 8px; --radius-pill: 999px; } /* --- Superficie oscura (v0.2.1) --- Casi toda app tiene una zona oscura —el banner de una ficha, una barra superior, un encabezado en degradé— donde los roles de arriba dejan de servir: texto negro sobre Historia no se lee, y Pasión plena sobre ese fondo da 1,8:1. La solución NO es escribir colores a mano adentro de esa zona, sino volver a definir los roles para ese pedazo del árbol. Los componentes siguen usando los mismos --color-*, sin enterarse. Es, además, el mismo mecanismo con el que se hace un modo oscuro: ahí se redefinen estos roles en :root en vez de en una clase. Contraste medido contra los dos tonos del degradé habitual (#333F48 y #242C32): */ .auf-sobre-oscuro { --color-fondo-app: var(--auf-gris-900); --color-superficie: transparent; --color-superficie-alt: rgba(255, 255, 255, .12); --color-texto: var(--auf-blanco); /* 10,80:1 / 14,18:1 */ --color-texto-secundario: var(--auf-gris-300); /* 5,77:1 / 7,58:1 */ --color-texto-deshabilitado: var(--auf-gris-400); /* 3,33:1 — solo deshabilitado */ --color-linea: rgba(255, 255, 255, .25); --color-borde-control: rgba(255, 255, 255, .35); --color-primario: var(--auf-blanco); --color-sobre-primario: var(--auf-historia); --color-foco: var(--auf-cielo-borde); /* 7,77:1 */ /* Los estados se aclaran: el tono pleno no se lee sobre oscuro. */ --color-error: var(--auf-pasion-borde); --color-error-texto: var(--auf-pasion-borde);/* 5,15:1 */ --color-error-fondo: color-mix(in srgb, var(--auf-pasion) 30%, transparent); --color-error-borde: var(--auf-pasion-borde); --color-advertencia-texto: var(--auf-sol); /* 5,00:1 */ --color-info-texto: var(--auf-cielo-borde); /* 7,77:1 */ --color-exito-texto: var(--auf-exito-borde); } /* ============================================================ MODO OSCURO (v0.3.0) ------------------------------------------------------------ Redefine SOLO los roles --color-*. Ninguna --auf-* cambia: la marca es la misma, lo que cambia es qué papel juega cada color. Ningún componente se toca — es la razón por la que existe la regla de "solo roles" desde la v0.2.0. Tres modos, dos bloques: [data-tema="oscuro"] -> siempre oscuro [data-tema="sistema"] -> oscuro solo si el sistema operativo lo pide (prefers-color-scheme) sin atributo, o "claro" -> el :root de arriba, modo claro Los dos bloques tienen que ser IDÉNTICOS. Si tocás uno, tocá el otro; hay un chequeo que los compara. color-scheme no es decorativo: es lo que hace que la barra de scroll, los