/* ========================================================================== Tokens de diseño — fuente única de color, espaciado, tipografía y forma. Change de OpenSpec: design-system-tokens ========================================================================== CÓMO FUNCIONA ESTE ARCHIVO (leer antes de tocarlo) -------------------------------------------------- Metronic 8 compila `public/css/style.bundle.css` y su **SCSS de origen no está en este repo** (0 archivos .scss fuera de node_modules, ningún paquete @keenthemes), así que no se puede cambiar `$primary` y recompilar. Pero el bundle **sí deja un panel de tema en tiempo de ejecución**: su bloque `:root,[data-bs-theme=light]` declara 118 variables `--bs-*`, y **216 reglas del tema consumen `var(--bs-primary)`**. Por eso este archivo no declara colores "nuevos" en paralelo: **asigna** las variables que el tema ya usa. Cambiar `--bs-primary` aquí retematiza el sitio entero sin tocar un solo componente. Orden de carga: style.bundle.css -> tokens.css -> primitives.css Si se invierte, los componentes quedan con variables sin resolver. CONSECUENCIA PRÁCTICA --------------------- Para cambiar el color de acción del sitio, se cambia `--ds-accent` (y su par `--bs-primary`). No se edita ninguna vista. EXCEPCIÓN: los `.btn-*` del tema traen el color compilado como literal (`.btn-primary{--bs-btn-bg:#17C653}`), así que no siguen a `--bs-primary`. Esos se asignan en primitives.css, no aquí. ========================================================================== */ :root, [data-bs-theme="light"] { /* --------------------------------------------------------------------- Acento. Se asigna a las variables del tema para que lo sigan las reglas que ya las leen (estados activos, focos, bordes derivados). --------------------------------------------------------------------- */ --bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229; --bs-primary-text-emphasis: #312e81; --bs-primary-bg-subtle: #eef2ff; --bs-primary-border-subtle: #c7d2fe; --bs-link-color: #4f46e5; --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color: #4338ca; --bs-link-hover-color-rgb: 67, 56, 202; --bs-focus-ring-color: rgba(79, 70, 229, .25); /* Familia PROPIA de Metronic (no de Bootstrap) que también consume el acento. Sin asignarla, 124 usos del tema siguen verdes: --bs-text-primary (28 usos, es a quien obedece `.text-primary`!), --bs-primary-light (23, fondo de `btn-light-primary`), --bs-primary-inverse (73, texto sobre el acento) y --bs-primary-active. Esto se descubrió midiendo: `.text-primary` NO sigue a `--bs-primary`. */ --bs-text-primary: #4f46e5; --bs-primary-light: #eef2ff; --bs-primary-inverse: #ffffff; --bs-primary-active: #4338ca; /* Menú lateral: familia propia del tema para el estado activo del enlace. */ --bs-menu-link-color-active: #4f46e5; --bs-menu-link-color-here: #4f46e5; --bs-menu-link-color-hover: #4f46e5; --bs-menu-link-color-show: #4f46e5; /* Pestañas tipo pill: el tema fija el fondo activo como literal verde. */ --bs-nav-pills-link-active-bg: #4f46e5; /* Botón "volver arriba": el tema lo fija con un literal verde en su bloque oscuro, así que aquí se ata al acento en los dos temas. */ --bs-scrolltop-bg-color: var(--bs-primary); --bs-scrolltop-bg-color-hover: var(--bs-primary-active); /* DataTables define sus variables de tema en `:root` de su propio bundle, así que se asignan aquí como cualquier otra. La app SÍ usa selección de filas (model_equipment/list.js), así que el azul por defecto se vería. */ --dt-row-selected: var(--bs-primary-rgb); --dt-row-selected-link: 255, 255, 255; /* Alias semánticos para el código nuevo. No son una segunda fuente de verdad: apuntan al valor del tema. */ --ds-accent: #4f46e5; --ds-accent-hover: #4338ca; --ds-accent-soft: #eef2ff; --ds-accent-border: #c7d2fe; /* Texto encima del relleno de acento: el tema ya expone este token. */ --ds-accent-contrast: var(--bs-primary-inverse); /* Relleno de acento. OJO: el tema pinta los botones primarios con `background-color: var(--bs-primary)`, así que este alias solo documenta la intención. Para cambiar el relleno, cambia el acento. */ --ds-accent-surface: var(--bs-primary); /* Acento usado como TEXTO sobre la superficie del tema. En claro coincide con el acento; en oscuro necesita un tono más claro. */ --ds-accent-text: #4f46e5; /* --------------------------------------------------------------------- Peligro — el único rojo de la interfaz. DESVIACIÓN DELIBERADA respecto de Metronic: su `--bs-danger` es #F8285A y da 3.86:1 tanto con texto blanco encima como usado como texto, por debajo del 4.5:1 que exige el spec. Se usa #dc2626 (4.83:1 en ambos usos). Es la única desviación de color del change. --------------------------------------------------------------------- */ --bs-danger: #dc2626; --bs-danger-rgb: 220, 38, 38; --bs-danger-text-emphasis: #7f1d1d; --bs-danger-bg-subtle: #fef2f2; --bs-danger-border-subtle: #fecaca; --ds-danger: #dc2626; --ds-danger-hover: #b91c1c; --ds-danger-soft: #fef2f2; --ds-danger-border: #fecaca; /* Relleno de un botón destructivo sólido: el blanco encima da 4.83:1. */ --ds-danger-surface: #dc2626; /* Texto en color de peligro sobre la superficie del tema. */ --ds-danger-text: #dc2626; /* Texto sobre el relleno de peligro (insignia de urgencia crítica). */ --ds-danger-contrast: #ffffff; /* --------------------------------------------------------------------- Urgencia de una nota (crítica / alta / media / baja). La escala no inventa matices: crítica usa peligro, media el acento y baja el gris atenuado del tema. El único tono nuevo es el ámbar de "alta", porque el `--bs-warning` del tema (#F6C000) no se puede usar como texto sobre superficie clara (1.66:1). Contrastes medidos al pie del archivo. --------------------------------------------------------------------- */ --ds-warning-text: #b45309; --ds-warning-soft: #fffbeb; --ds-warning-border: #fde68a; /* --------------------------------------------------------------------- Superficies y texto. Se REFERENCIAN las variables del tema en vez de duplicar valores: así el tema oscuro las actualiza solo. --------------------------------------------------------------------- */ --ds-surface: var(--bs-body-bg); /* OJO: NO usar `var(--bs-card-bg)` aquí. El tema define `--bs-card-bg` dentro de la regla `.card`, así que solo resuelve en elementos que ya son `.card`; en cualquier otro componente (la tarjeta de una pieza, por ejemplo) la variable queda inválida y el fondo sale TRANSPARENTE. El tema la define como `var(--bs-body-bg)`, que sí está en :root, así que referenciamos esa. */ --ds-surface-card: var(--bs-body-bg); --ds-surface-muted: var(--bs-tertiary-bg); --ds-surface-raised: var(--bs-secondary-bg); --ds-border: var(--bs-border-color); --ds-text: var(--bs-body-color); --ds-text-heading: var(--bs-heading-color); --ds-text-muted: var(--bs-secondary-color); /* El gris más tenue (etiquetas sobre fondo claro). El tema lo redefine en oscuro, así que se referencia en vez de fijarlo. */ --ds-text-subtle: var(--bs-gray-500); /* Borde de campo en reposo. Medido: 2.56:1 sobre tarjeta blanca. NO se le exige 3:1 (ver spec de design-tokens): sobre blanco ese umbral obliga a un gris medio que el producto descarta. La identificación del campo recae en el indicador de foco, que sí cumple. */ --ds-border-field: #94a3b8; /* --------------------------------------------------------------------- Espaciado (ritmo 4/8) --------------------------------------------------------------------- */ --ds-space-1: .25rem; --ds-space-2: .5rem; --ds-space-3: .75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-8: 2rem; --ds-space-10: 2.5rem; /* --------------------------------------------------------------------- Tipografía. La familia ya la expone el tema como `--bs-font-sans-serif: Inter,...`; aquí solo se referencia. --------------------------------------------------------------------- */ --ds-font-sans: var(--bs-font-sans-serif); --ds-font-size-2xs: .6875rem; --ds-font-size-xs: .75rem; --ds-font-size-sm: .8125rem; --ds-font-size-base: .875rem; --ds-font-size-md: .9375rem; --ds-font-size-lg: 1.0625rem; --ds-font-weight-normal: 400; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; --ds-font-weight-bold: 700; --ds-line-height-tight: 1.3; --ds-line-height-base: 1.5; /* --------------------------------------------------------------------- Forma y profundidad. Los radios y sombras base ya son variables del tema; se referencian y se añaden solo los que faltan. --------------------------------------------------------------------- */ --ds-radius-sm: .375rem; --ds-radius-md: var(--bs-border-radius); --ds-radius-lg: .75rem; --ds-radius-pill: 999px; --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, .05); --ds-shadow-md: var(--bs-box-shadow-sm); /* --------------------------------------------------------------------- Métricas de control. El objetivo táctil va en px a propósito: es un requisito de área de toque y no debe recalcularse cuando Metronic baja el tamaño de fuente raíz en móvil. --------------------------------------------------------------------- */ --ds-control-height: 2.5rem; --ds-touch-target: 44px; /* Alto del lienzo de los gráficos del dashboard del cliente. Chart.js dibuja con `maintainAspectRatio:false`, así que el alto lo fija el contenedor y no el propio gráfico. */ --ds-chart-height: 220px; --ds-chart-height-compact: 170px; } /* ========================================================================== Tema oscuro. Solo se redefinen los tokens de COLOR; los componentes no llevan reglas por tema porque resuelven los suyos a través de estas variables. Los valores base (fondo, texto, borde) los aporta el propio tema. ========================================================================== */ [data-bs-theme="dark"] { /* Acento oscuro unificado en #5b5bd6: el texto blanco encima da 5.37:1 y como indicador sobre #15171C da 3.34:1, así que UNA sola variable sirve para relleno e indicador. Un tono más claro (#6366f1) mejoraría el indicador pero dejaría el texto blanco en 4.47:1, por debajo del umbral: no compensa. */ --bs-primary: #5b5bd6; --bs-primary-rgb: 91, 91, 214; --bs-primary-text-emphasis: #c7d2fe; --bs-primary-bg-subtle: #1e1b4b; --bs-primary-border-subtle: #3730a3; /* Acento como TEXTO sobre fondo oscuro: 8.99:1. */ --bs-link-color: #a5b4fc; --bs-link-color-rgb: 165, 180, 252; --bs-link-hover-color: #c7d2fe; --bs-link-hover-color-rgb: 199, 210, 254; --bs-focus-ring-color: rgba(99, 102, 241, .35); --bs-text-primary: #a5b4fc; --bs-primary-light: #1e1b4b; --bs-primary-inverse: #ffffff; --bs-primary-active: #4f46e5; --bs-menu-link-color-active: #a5b4fc; --bs-menu-link-color-here: #a5b4fc; --bs-menu-link-color-hover: #a5b4fc; --bs-menu-link-color-show: #a5b4fc; --bs-nav-pills-link-active-bg: #5b5bd6; --bs-scrolltop-bg-color: var(--bs-primary); --bs-scrolltop-bg-color-hover: var(--bs-primary-active); /* DataTables define sus variables de tema en `:root` de su propio bundle, así que se asignan aquí como cualquier otra. La app SÍ usa selección de filas (model_equipment/list.js), así que el azul por defecto se vería. */ --dt-row-selected: var(--bs-primary-rgb); --dt-row-selected-link: 255, 255, 255; --ds-accent: #5b5bd6; --ds-accent-hover: #4f46e5; --ds-accent-soft: #1e1b4b; --ds-accent-border: #3730a3; --ds-accent-contrast: var(--bs-primary-inverse); --ds-accent-surface: var(--bs-primary); /* Acento como TEXTO sobre #15171C: 8.99:1. Necesita ser más claro que el relleno, porque el relleno solo llega a 3.34:1 como texto. */ --ds-accent-text: #a5b4fc; --bs-danger: #dc2626; --bs-danger-rgb: 220, 38, 38; --bs-danger-text-emphasis: #fecaca; --bs-danger-bg-subtle: #450a0a; --bs-danger-border-subtle: #7f1d1d; --ds-danger: #dc2626; --ds-danger-hover: #b91c1c; --ds-danger-soft: #450a0a; --ds-danger-border: #7f1d1d; --ds-danger-surface: #dc2626; /* Peligro como texto sobre #15171C: 6.48:1. */ --ds-danger-text: #f87171; --ds-danger-contrast: #ffffff; /* Urgencia: el relleno de peligro es el mismo del tema claro; el ámbar cambia porque sobre fondo oscuro el texto debe aclararse y la superficie oscurecerse (medidas al pie del archivo). */ --ds-warning-text: #fbbf24; --ds-warning-soft: #451a03; --ds-warning-border: #92400e; /* Borde de campo en oscuro. Medido: 2.87:1 sobre #15171C (mismo criterio que en claro: se documenta, no se le exige 3:1). */ --ds-border-field: #5a6075; } /* ========================================================================== CONTRASTES MEDIDOS (para no volver a suponerlos) Tema claro texto cuerpo #071437 sobre #ffffff 18.04:1 texto atenuado 75% sobre #ffffff 8.15:1 acento como texto #4f46e5 sobre #ffffff 6.29:1 texto sobre acento #ffffff sobre #4f46e5 6.29:1 peligro como texto #dc2626 sobre #ffffff 4.83:1 texto sobre peligro #ffffff sobre #dc2626 4.83:1 borde de campo #94a3b8 sobre #ffffff 2.56:1 (documentado, ver arriba) urgencia crítica #ffffff sobre #dc2626 4.83:1 (relleno sólido) urgencia alta #b45309 sobre #fffbeb 4.84:1 urgencia media #4f46e5 sobre #eef2ff 5.62:1 urgencia baja #444d68 sobre #f9f9f9 7.96:1 (texto atenuado 75%) Tema oscuro texto cuerpo #F5F5F5 sobre #15171C 16.45:1 texto atenuado 75% sobre #15171C 9.63:1 acento como texto #a5b4fc sobre #15171C 8.99:1 acento indicador #5b5bd6 sobre #15171C 3.34:1 (>=3 exigido) texto sobre acento #ffffff sobre #5b5bd6 5.37:1 peligro como texto #f87171 sobre #15171C 6.48:1 texto sobre peligro #ffffff sobre #dc2626 4.83:1 borde de campo #5a6075 sobre #15171C 2.87:1 (documentado) urgencia crítica #ffffff sobre #dc2626 4.83:1 (relleno sólido) urgencia alta #fbbf24 sobre #451a03 8.97:1 urgencia media #a5b4fc sobre #1e1b4b 8.02:1 urgencia baja #bdbdbf sobre #162241 8.36:1 (texto atenuado 75%) La misma escala, pero sobre el selector sólido del panel de pendientes (`--bs-gray-100`: #F9F9F9 en claro, #1B1C22 en oscuro), que es la otra superficie donde se pinta la urgencia: claro #dc2626 4.59:1 · #b45309 4.77:1 · #4f46e5 5.97:1 · 75% 7.96:1 oscuro #f87171 6.14:1 · #fbbf24 10.18:1 · #a5b4fc 8.52:1 · 75% 9.25:1 Peor caso 4.59:1, por encima del umbral de 4.5:1. ========================================================================== INVENTARIO DE COBERTURA DE LAS VARIABLES DEL TEMA (tarea 1.9: qué cubrimos y qué no, para saber qué falta si aparece un componente sin tematizar) REASIGNADAS por este archivo --bs-primary (+ -rgb, -text-emphasis, -bg-subtle, -border-subtle) --bs-text-primary, --bs-primary-light, --bs-primary-inverse, --bs-primary-active (familia propia de Metronic: 124 usos) --bs-link-color (+ -rgb), --bs-link-hover-color (+ -rgb) --bs-focus-ring-color --bs-danger (+ -rgb, -text-emphasis, -bg-subtle, -border-subtle) REFERENCIADAS (el tema las mantiene, nosotros solo las consumimos) --bs-body-bg, --bs-body-color, --bs-heading-color, --bs-secondary-color --bs-card-bg, --bs-tertiary-bg, --bs-secondary-bg --bs-border-color, --bs-border-radius*, --bs-box-shadow* --bs-font-sans-serif NO CUBIERTAS A PROPÓSITO --bs-secondary, --bs-light, --bs-dark y sus derivados: siguen siendo el gris del tema. No se tocan para no alterar tablas ni drawers. --bs-success (#1B84FF, azul) y --bs-info (#7239EA, violeta): se conservan por decisión del change (no se rediseña la paleta semántica aquí). OJO: el nombre no corresponde al tono; `btn-light-success` se ve celeste porque *success* ES azul. Corregirlo es un change de diseño aparte. --bs-warning (#F6C000): igual que el anterior. --dt-* de DataTables: el chrome del plugin lo pinta Metronic en neutro, así que el único valor ajeno es --dt-row-selected (azul de Bootstrap), pendiente de decisión en la tarea 6.5. ========================================================================== */