/* ============================================================================ ANDRÓMACO · TOKENS DE INTERFAZ — capa 1 del estándar Única capa que se comparte entre TODAS las aplicaciones, sin importar su stack. Acá no hay componentes, ni clases, ni supuestos de framework: sólo custom properties en :root. Se puede linkear en una MVC con Bootstrap, en una SPA propia o en una app vieja sin tocar una línea de su markup. Origen de los valores: Shortener (wwwroot/css/shortener-ui.css), que es la app de referencia visual. Los valores del tema claro están copiados de ahí sin retocar, para que "parecerse a Shortener" sea literal y no aproximado. Nomenclatura --ui-*: se conserva la del UI Kit que ya se usa en las apps MVC + Bootstrap. Así esas apps linkean este archivo y su hoja de componentes y no necesitan ninguna traducción. Las apps con nombres propios de token —como ProspectosDigitales, que usa --color-*— agregan un archivo de alias de quince líneas y tampoco renombran nada. El prefijo es una convención, no la parte valiosa: lo que estandariza son los VALORES. QUÉ ENTRA Y QUÉ NO Entra: color, radio, sombra, transición, foco y familia tipográfica. Eso es lo que hace que dos apps se reconozcan como hermanas. No entra: escala tipográfica ni espaciado. Son decisiones de densidad y cada app tiene la suya (una grilla de gestión no se lee como un formulario de carga). La escala recomendada está en ESTANDAR-UI.md, no impuesta acá. TEMA OSCURO Shortener no tiene tema oscuro. Los valores oscuros de este archivo están DERIVADOS de sus mismos matices, no copiados de ninguna app. Se activan sólo si la app declara data-tema en el : una app que no conoce el atributo se queda en claro y no se entera. Es intencional, porque las hojas de componentes de Bootstrap del kit tienen blancos fijos y no son seguras en oscuro todavía. ========================================================================= */ /* La ruta es relativa a este archivo: cuando el estándar se distribuya como paquete, el CSS y las fuentes viajan juntos y esto sigue resolviendo. Hoy sólo existe el peso 400 en todo el parque (el mismo Poppins-Regular.ttf replicado en 16 apps), así que el navegador está sintetizando las negritas. Para completarlo hay que dejar Poppins-SemiBold.woff2 y Poppins-Bold.woff2 en la carpeta de fuentes y agregar sus dos bloques acá: ver ADOPCION.md. */ @font-face { font-family: "Andromaco Sans"; src: url("../fuentes/Poppins-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; } :root { /* -- Tipografía ------------------------------------------------------- Sólo la familia. El tamaño base y la escala los define cada app. */ --ui-font-family: "Andromaco Sans", "Segoe UI", system-ui, Arial, sans-serif; --ui-font-family-mono: "Cascadia Mono", Consolas, "SF Mono", monospace; /* -- Acento: el color de acción de la aplicación ---------------------- `soft` y `border` salen del mismo matiz: soft ~96% de luminosidad, border ~80%. Si se cambia el acento hay que mover los cuatro juntos. */ --ui-accent: #0864aa; --ui-accent-hover: #075693; --ui-accent-soft: #f0f8fe; --ui-accent-border: #b8daf1; /* -- Semánticos: cada uno con su par -soft para fondos ---------------- No se cambian por gusto. Verde = correcto, rojo = error, ámbar = atención es convención del usuario, no decisión de marca. */ --ui-success: #2a9d68; --ui-success-soft: #ddf7e9; --ui-warning: #a46c00; --ui-warning-soft: #fff3ce; --ui-danger: #b42335; --ui-danger-soft: #fee9ec; --ui-danger-border: #f2bec6; --ui-danger-border-strong: #e997a4; --ui-danger-strong: #8f1727; --ui-info: #087991; --ui-info-soft: #d8f3f7; --ui-neutral-soft: #edf1f5; /* -- Marca: títulos, barra superior, avatares, tooltips --------------- */ --ui-brand-dark: #0b2946; --ui-brand-dark-soft: #103858; --ui-topbar-bg: linear-gradient(105deg, #0b2946 0%, #0d4d78 48%, #087bc3 100%); --ui-splash-bg: radial-gradient(circle at 70% 25%, #0b7cbe, #0b2946 62%); /* -- Superficies ------------------------------------------------------ */ --ui-bg-page: #f3f6fa; --ui-bg-surface: #ffffff; --ui-bg-muted: #f7f9fb; --ui-bg-hover: #fafdff; /* -- Texto ------------------------------------------------------------ */ --ui-text-primary: #162334; --ui-text-secondary: #465970; --ui-text-muted: #6b7d92; /* Texto sobre un relleno SEMÁNTICO (acento, éxito, atención, error). En claro esos rellenos son oscuros y lleva blanco; en oscuro se aclaran y tiene que oscurecerse, o un botón "Eliminar" queda con texto blanco sobre rosa y no se lee. */ --ui-text-on-accent: #ffffff; /* Texto sobre un relleno de color ARBITRARIO: el que llega como dato desde una base y cuya luminosidad no se conoce. Blanco en los dos temas, porque es el único valor seguro cuando el fondo puede ser cualquier color saturado. */ --ui-text-on-fill: #ffffff; /* -- Bordes y líneas de control --------------------------------------- */ --ui-border: #dde4ec; --ui-border-strong: #c7d1dc; --ui-control-line: #8f9cab; --ui-control-line-hover: #94a3b5; /* -- Radios ----------------------------------------------------------- Cuatro pasos: controles chicos, controles, paneles y tarjetas. */ --ui-radius-xs: 6px; --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 18px; --ui-radius-pill: 999px; /* -- Sombras ---------------------------------------------------------- Tintadas en azul y no en negro: sobre superficies frías el negro puro se ve sucio. */ --ui-shadow-sm: 0 1px 2px rgba(16, 56, 88, .06), 0 4px 12px rgba(16, 56, 88, .05); --ui-shadow-md: 0 12px 34px rgba(9, 38, 65, .14); --ui-shadow-lg: 0 28px 80px rgba(4, 24, 42, .35); /* -- Movimiento ------------------------------------------------------- Dos duraciones para lo cotidiano y una tercera, con curva, para lo que recorre distancia (un panel que entra desde el borde). */ --ui-transition-fast: 150ms ease; --ui-transition-normal: 220ms ease; --ui-transition-slow: 320ms cubic-bezier(.4, 0, .2, 1); /* -- Foco ------------------------------------------------------------- Se sincroniza con el acento. Reemplaza al outline del navegador; nunca se apaga el foco sin poner esto en su lugar. */ --ui-focus-color: #1593e3; --ui-focus-ring: 0 0 0 3px rgba(21, 147, 227, .25); /* -- Fondo de modal --------------------------------------------------- Tintado con el matiz de la marca, no negro puro: el negro sobre una superficie fría se lee sucio. El desenfoque comunica que lo de atrás está inactivo. */ --ui-backdrop: rgba(11, 41, 70, .55); --ui-backdrop-blur: blur(2px); } /* ============================================================================ Tema oscuro Los dos bloques se escriben una sola vez cada uno y en este orden: primero la preferencia del sistema —que aplica sólo cuando el usuario no eligió— y después el forzado, que tiene que ganar siempre. El acento se aclara: #0864aa sobre un fondo oscuro queda por debajo del contraste mínimo. Y --ui-brand-dark deja de ser oscuro, porque su rol es "el color de los títulos y del tooltip", no "azul marino". ========================================================================= */ @media (prefers-color-scheme: dark) { :root[data-tema="auto"] { --ui-accent: #3b9ddd; --ui-accent-hover: #5cb0e6; --ui-accent-soft: #0e2c45; --ui-accent-border: #245a86; --ui-success: #4cc38a; --ui-success-soft: #0f2e21; --ui-warning: #d9a13a; --ui-warning-soft: #33280d; --ui-danger: #e8697d; --ui-danger-soft: #3a1620; --ui-danger-border: #6b2634; --ui-danger-border-strong: #8f3245; --ui-danger-strong: #f2a3b0; --ui-info: #3fb6c9; --ui-info-soft: #0d2e35; --ui-neutral-soft: #1b334c; --ui-brand-dark: #e6eef7; --ui-brand-dark-soft: #c3d6e8; --ui-topbar-bg: linear-gradient(105deg, #061420 0%, #0d2c45 48%, #12507e 100%); --ui-splash-bg: radial-gradient(circle at 70% 25%, #0d4b74, #061420 62%); --ui-bg-page: #081726; --ui-bg-surface: #0f2438; --ui-bg-muted: #14304a; --ui-bg-hover: #17395a; --ui-text-primary: #e8eef6; --ui-text-secondary: #a9bdd4; --ui-text-muted: #8199b4; /* Los rellenos semánticos se aclararon: el texto encima se invierte. */ --ui-text-on-accent: #06263c; --ui-border: #1e3a58; --ui-border-strong: #2b4d70; --ui-control-line: #54718f; --ui-control-line-hover: #6b87a5; --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25); --ui-shadow-md: 0 12px 34px rgba(0, 0, 0, .45); --ui-shadow-lg: 0 28px 80px rgba(0, 0, 0, .6); --ui-focus-color: #5cb0e6; --ui-focus-ring: 0 0 0 3px rgba(59, 157, 221, .35); --ui-backdrop: rgba(2, 9, 16, .7); } } :root[data-tema="oscuro"] { --ui-accent: #3b9ddd; --ui-accent-hover: #5cb0e6; --ui-accent-soft: #0e2c45; --ui-accent-border: #245a86; --ui-success: #4cc38a; --ui-success-soft: #0f2e21; --ui-warning: #d9a13a; --ui-warning-soft: #33280d; --ui-danger: #e8697d; --ui-danger-soft: #3a1620; --ui-danger-border: #6b2634; --ui-danger-border-strong: #8f3245; --ui-danger-strong: #f2a3b0; --ui-info: #3fb6c9; --ui-info-soft: #0d2e35; --ui-neutral-soft: #1b334c; --ui-brand-dark: #e6eef7; --ui-brand-dark-soft: #c3d6e8; --ui-topbar-bg: linear-gradient(105deg, #061420 0%, #0d2c45 48%, #12507e 100%); --ui-splash-bg: radial-gradient(circle at 70% 25%, #0d4b74, #061420 62%); --ui-bg-page: #081726; --ui-bg-surface: #0f2438; --ui-bg-muted: #14304a; --ui-bg-hover: #17395a; --ui-text-primary: #e8eef6; --ui-text-secondary: #a9bdd4; --ui-text-muted: #8199b4; /* Los rellenos semánticos se aclararon: el texto encima se invierte. */ --ui-text-on-accent: #06263c; --ui-border: #1e3a58; --ui-border-strong: #2b4d70; --ui-control-line: #54718f; --ui-control-line-hover: #6b87a5; --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .25); --ui-shadow-md: 0 12px 34px rgba(0, 0, 0, .45); --ui-shadow-lg: 0 28px 80px rgba(0, 0, 0, .6); --ui-focus-color: #5cb0e6; --ui-focus-ring: 0 0 0 3px rgba(59, 157, 221, .35); --ui-backdrop: rgba(2, 9, 16, .7); } /* Le avisa al navegador con qué esquema pintar los controles nativos (barras de desplazamiento, selectores de fecha). Sin esto, en oscuro aparece un calendario blanco dentro de un formulario oscuro. */ :root[data-tema="claro"] { color-scheme: light; } :root[data-tema="oscuro"] { color-scheme: dark; } :root[data-tema="auto"] { color-scheme: light dark; }