/* ========================================================================== Infinet Design System — Tokens v1.0 -------------------------------------------------------------------------- Fuente de verdad de color, tipografía, espaciado, elevación y motion para todos los plugins de WordPress de SoyInfinet / InfinetFibra. Especificación: soyinfinet-design.md ESTE ARCHIVO ES COMPARTIDO. Se copia idéntico a cada plugin y no se edita por plugin: si falta un valor, se agrega acá y se propaga a todos. Un token nuevo que sólo sirve a un plugin no es un token — va en el CSS del plugin. ========================================================================== */ :root { /* --------------------------------------------------------------------- Marca Los cuatro colores del logotipo (blue/red/yellow/green) son IDENTIDAD, no semántica: se usan en el logotipo y en ilustraciones, nunca para expresar el estado de un registro. Para eso están los tokens de estado. --------------------------------------------------------------------- */ --brand-blue: #1a73e8; /* acción primaria: links, botones, foco, activo */ --brand-blue-dark: #1557b0; /* hover / pressed de --brand-blue */ --brand-blue-pale: #e8f0fe; /* fondo de seleccionado, avatares de paso */ --brand-green: #34a853; /* navegación de la web app, confirmación efímera */ --brand-red: #ea4335; /* sólo logotipo */ --brand-yellow: #fbbc05; /* sólo logotipo */ --brand-navy: #0f2540; /* CTA de la web app */ --brand-navy-hover: #1f1f1f; /* --------------------------------------------------------------------- Superficies y texto Tres niveles de texto y sólo tres. No inventar grises intermedios. --------------------------------------------------------------------- */ --surface: #ffffff; /* tarjetas, tablas, diálogos, campos */ --bg: #f8f9fa; /* fondo de página, cabeceras, thead, bloques info */ --hover: #f1f3f4; /* hover de fila y botón fantasma, inline */ --border: #dadce0; /* borde canónico */ --border-subtle: #e8eaed; /* separadores internos: filas, ítems de lista */ --on-surface: #202124; /* texto primario, títulos */ --on-surface-2: #3c4043; /* prosa larga (documentación) */ --on-surface-muted: #5f6368; /* secundario: labels, descripciones, th */ --scrim: rgba(0, 0, 0, .5); --ripple: rgba(26, 115, 232, .12); --ripple-on-dark: rgba(255, 255, 255, .6); /* --------------------------------------------------------------------- Estado Cada estado es un trío: color base, fondo pálido y texto sobre pálido. La tercera columna existe porque --if-warning NO tiene contraste suficiente sobre su propio pálido: #f9ab00 sobre #fef7e0 da 1.9:1 y es ilegible. --if-warning se usa como fondo, borde o icono. Nunca como texto. PREFIJO --if-: estos cinco son los únicos tokens que llevan el nombre del sistema, y no es por prolijidad. `--success`, `--error` y `--warning` son los nombres más obvios del mundo: cualquier tema o plugin del sitio puede declararlos en `:root`, y si su hoja carga después de esta, gana la suya y nos cambia el color a TODOS los componentes. Cuando el valor ajeno ni siquiera es un color CSS —los temas armados con utilidades guardan `20 184 166` para usarlo como `rgb(var(--success))`—, la propiedad queda inválida y el elemento se pinta transparente. Eso fue lo que pasó: el botón "Aprobar" del panel de operadores existía, ocupaba su lugar y se dibujaba del color de la tarjeta. Invisible. El operador creía que no tenía la acción, y los registros quedaban sin aprobar. Sólo reaparecía al pasar el mouse, porque el hover usa --if-success-dark, un nombre que el tema no había pisado. El resto de la paleta sigue sin prefijo y sigue expuesta al mismo choque. Se prefijaron primero estos porque son los que comunican el estado de un registro: si uno se pierde, se pierde la información, no sólo la estética. --------------------------------------------------------------------- */ --if-success: #137333; --if-success-bg: #e6f4ea; --if-success-dark: #0d652d; --if-error: #d93025; --if-error-bg: #fce8e6; --if-error-dark: #c5221f; --if-warning: #f9ab00; /* fondo / borde / icono */ --if-warning-bg: #fef7e0; --if-warning-dark: #ea8600; /* hover de superficie --if-warning */ --if-warning-text: #b06000; /* texto de aviso sobre --if-warning-bg */ --if-warning-prose: #5f4300; /* párrafos de aviso sobre --if-warning-bg */ /* Neutro no es "casi error": comunica NO SÉ, que es información distinta de NO. Una base caída se pinta gris; un DNI que no es cliente, rojo. */ --if-neutral: #3c4043; --if-neutral-bg: #e8eaed; /* Contenedor de acciones destructivas o irreversibles: rojo desaturado, para enmarcar sin gritar como lo haría --if-error. */ --if-danger-border: #f3c2c2; --if-danger-bg: #fdf3f3; /* --------------------------------------------------------------------- Superficies invertidas Fondos oscuros sobre los que el texto va en blanco. --brand-blue no llega al contraste mínimo sobre ellos, de ahí --on-inverse-accent. --------------------------------------------------------------------- */ --inverse-surface: #323232; /* snackbar */ --tooltip-surface: #616161; --on-inverse-accent: #8ab4f8; /* azul aclarado para acciones en snackbar */ /* Borde gris del admin de WordPress. Es un valor de WP, no de la marca: existe para que las tarjetas del plugin se integren con las de WP. */ --wp-admin-border: #c3c4c7; /* --------------------------------------------------------------------- Tipografía --font-display para titulares y métricas; --font-ui para todo el resto. Ambas resuelven hoy a Google Sans, pero mantener la distinción permite cambiar la display sin tocar la UI. --------------------------------------------------------------------- */ --font-display: 'Google Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-ui: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Roboto Mono', 'Courier New', ui-monospace, monospace; /* --------------------------------------------------------------------- Espaciado — escala de 4px --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 30px; --sp-8: 48px; --sp-9: 64px; /* --------------------------------------------------------------------- Radios — un solo radio por familia de componente. Si dudás, --r-md. --------------------------------------------------------------------- */ --r-xs: 3px; /* inline */ --r-sm: 4px; /* campos, selects, botones cuadrados, bloques de código */ --r-md: 8px; /* tarjetas, diálogos, contenedores de tabla */ --r-chip: 12px; /* chips y botones-pill densos de 24px */ --r-search: 24px; /* campo de búsqueda (= altura / 2) */ --r-pill: 999px; /* CTA de la web app */ --r-full: 50%; /* avatares, FAB, paginación, botones circulares */ /* --------------------------------------------------------------------- Elevación — sólo tres niveles. 1 reposo · 2 hover de tarjeta · 8 flotante (diálogo, snackbar, FAB) --------------------------------------------------------------------- */ --elev-1: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); --elev-2: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15); --elev-8: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15); /* --------------------------------------------------------------------- Motion --------------------------------------------------------------------- */ --dur-fast: .2s; /* estados: hover, foco, color, borde */ --dur-base: .3s; /* entrada / salida: diálogos, mensajes, fade-in */ --dur-slow: .6s; /* ripple */ --ease: ease-out; /* --------------------------------------------------------------------- Alturas de control El tamaño lo determina el contenedor, no la importancia de la acción. --------------------------------------------------------------------- */ --h-dense: 24px; /* acciones dentro de fila de tabla */ --h-ctrl: 36px; /* botón y select por defecto */ --h-field: 40px; /* input de formulario */ --h-search: 48px; /* campo de búsqueda y CTA grande */ /* --------------------------------------------------------------------- Layout --------------------------------------------------------------------- */ --w-app: 1280px; /* contenedor de frontend */ --w-docs: 1100px; /* páginas de lectura en wp-admin */ --z-overlay: 100; --z-dialog: 1000; --z-tooltip: 1000; --z-snackbar: 1001; } /* ========================================================================== Retrocompatibilidad -------------------------------------------------------------------------- Los plugins existentes referencian --google-*. Estos alias mantienen ese código funcionando mientras se migra. NO usar en código nuevo: se eliminan cuando ningún plugin del sistema los referencie. ========================================================================== */ :root { --google-blue: var(--brand-blue); --google-blue-dark: var(--brand-blue-dark); --google-surface: var(--surface); --google-background: var(--bg); --google-on-surface: var(--on-surface); --google-secondary: var(--on-surface-muted); --google-success: var(--if-success); --google-success-light: var(--if-success-bg); --google-error: var(--if-error); --google-error-light: var(--if-error-bg); --google-warning: var(--if-warning); --google-warning-light: var(--if-warning-bg); --google-border: var(--border); --google-hover: var(--hover); --google-ripple: var(--ripple); --elevation-1: var(--elev-1); --elevation-2: var(--elev-2); --elevation-8: var(--elev-8); } /* ========================================================================== Accesibilidad — movimiento reducido Vive con los tokens porque aplica a todo el sistema, no a un componente. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }