/* * @workforce/ui - tokens.css * COPIA VENDORIZADA para apps/admin-console (PR4), dentro de public/ para * que server.mjs (resolveFilePath: intenta public/ primero) y el * Dockerfile existente (COPY --from=build .../public ./public, recursivo) * la sirvan/copien sin modificarse. Fuente canonica: libs/ui/src/tokens.css * (PR1) - mismo criterio de vendorizado que PR2 (worker-app) y PR3 * (supervisor-app). * * UNICA diferencia deliberada con la fuente canonica (nit de PR1, mismo * fix que PR2/PR3 ya aplicaron en sus copias vendorizadas): * --wf-button-danger-fg referencia la capa semantic * (var(--wf-color-text-on-accent)), no la primitive directamente. No se * corrige en libs/ui/ (fuera del alcance "SOLO apps/admin-console" de * esta orden) - mismo criterio ya establecido por PR2/PR3. * * PR1 base layer. 3 capas: primitive -> semantic -> component, todo como * CSS custom properties. CERO valores hardcodeados en components.css o en * markup: TODO lo que un componente necesita vive aqui detras de var(). * * Tema por defecto: "claro ejecutivo luminoso" (light). * Tema alterno: "ops/tech" (dark), activado por [data-theme="dark"] en * / O por prefers-color-scheme: dark cuando la app no fija * ningun tema explicito (ver bloque "AUTO DARK" al final). */ /* ====================================================================== * CAPA 1 - PRIMITIVE: valores crudos, sin significado semantico. * ====================================================================== */ :root { /* --- Color: neutral (slate frio, look "ejecutivo") --- */ --wf-p-color-neutral-0: #ffffff; --wf-p-color-neutral-50: #f7f8fa; --wf-p-color-neutral-100: #eef0f4; --wf-p-color-neutral-150: #e4e7ed; --wf-p-color-neutral-200: #dbdfe7; --wf-p-color-neutral-300: #c1c8d6; --wf-p-color-neutral-400: #98a1b3; --wf-p-color-neutral-500: #707a8f; --wf-p-color-neutral-600: #525a6e; --wf-p-color-neutral-700: #3a4053; --wf-p-color-neutral-800: #262b3a; --wf-p-color-neutral-850: #1a1e29; --wf-p-color-neutral-900: #12151e; --wf-p-color-neutral-950: #0a0c12; /* --- Color: acento (azul "ejecutivo luminoso") --- */ --wf-p-color-accent-50: #eef4ff; --wf-p-color-accent-100: #dce8ff; --wf-p-color-accent-200: #b4cdff; --wf-p-color-accent-300: #82adff; --wf-p-color-accent-400: #4d84ff; --wf-p-color-accent-500: #2a63f0; --wf-p-color-accent-600: #1c4bd6; --wf-p-color-accent-700: #163bab; --wf-p-color-accent-800: #142f85; --wf-p-color-accent-900: #12285e; /* --- Color: success (verde) --- */ --wf-p-color-success-50: #eafbf1; --wf-p-color-success-100: #cdf3dd; --wf-p-color-success-400: #34c77a; --wf-p-color-success-500: #16a35b; --wf-p-color-success-700: #0e7a44; --wf-p-color-success-900: #083d23; /* --- Color: warning (ambar) --- */ --wf-p-color-warning-50: #fff8e8; --wf-p-color-warning-100: #ffedc2; --wf-p-color-warning-400: #e3a419; --wf-p-color-warning-500: #c98a06; --wf-p-color-warning-700: #8a5f03; --wf-p-color-warning-900: #4d3502; /* --- Color: danger (rojo) --- */ --wf-p-color-danger-50: #fdecec; --wf-p-color-danger-100: #fbd2d2; --wf-p-color-danger-400: #f2706b; --wf-p-color-danger-500: #dc3535; --wf-p-color-danger-700: #a91f1f; --wf-p-color-danger-800: #7d1717; --wf-p-color-danger-900: #4a0d0d; /* --- Color: info (reusa acento con otro tono para distinguir) --- */ --wf-p-color-info-50: #eef7ff; --wf-p-color-info-100: #d2ecff; --wf-p-color-info-400: #5cb2f5; --wf-p-color-info-500: #1f8ada; --wf-p-color-info-700: #1668ab; --wf-p-color-info-900: #0a3252; /* --- Color: borde (2 tonos por tema, afinados para cumplir el minimo de contraste no-textual 3:1 de WCAG 1.4.11 - un hairline no exime de ser perceptible) --- */ --wf-p-color-border-light: #838ba0; --wf-p-color-border-light-strong: #7b839a; --wf-p-color-border-dark: #656e83; --wf-p-color-border-dark-strong: #6b7488; /* --- Spacing (base 4/8) --- */ --wf-p-space-4: 0.25rem; /* 4px */ --wf-p-space-8: 0.5rem; /* 8px */ --wf-p-space-12: 0.75rem; /* 12px */ --wf-p-space-16: 1rem; /* 16px */ --wf-p-space-24: 1.5rem; /* 24px */ --wf-p-space-32: 2rem; /* 32px */ --wf-p-space-48: 3rem; /* 48px */ /* --- Radius --- */ --wf-p-radius-sm: 0.375rem; /* 6px */ --wf-p-radius-md: 0.625rem; /* 10px */ --wf-p-radius-lg: 0.875rem; /* 14px */ --wf-p-radius-pill: 999px; /* --- Tipografia --- */ --wf-p-font-sans: "Space Grotesk Variable", "Space Grotesk", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wf-p-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --wf-p-font-size-12: 0.75rem; --wf-p-font-size-13: 0.8125rem; --wf-p-font-size-14: 0.875rem; --wf-p-font-size-16: 1rem; --wf-p-font-size-18: 1.125rem; --wf-p-font-size-24: 1.5rem; --wf-p-font-size-32: 2rem; --wf-p-font-weight-regular: 400; --wf-p-font-weight-medium: 500; --wf-p-font-weight-semibold: 600; --wf-p-font-weight-bold: 700; --wf-p-line-height-tight: 1.2; --wf-p-line-height-normal: 1.45; --wf-p-line-height-relaxed: 1.6; /* --- Motion --- */ --wf-p-duration-instant: 100ms; --wf-p-duration-fast: 150ms; --wf-p-duration-normal: 200ms; --wf-p-duration-slow: 300ms; --wf-p-duration-entrance: 500ms; --wf-p-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --wf-p-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --wf-p-ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* --- Icon sizes --- */ --wf-p-icon-16: 1rem; --wf-p-icon-20: 1.25rem; --wf-p-icon-24: 1.5rem; /* --- Shadow (light) --- */ --wf-p-shadow-sm: 0 1px 2px rgb(18 21 30 / 0.06); --wf-p-shadow-md: 0 4px 12px rgb(18 21 30 / 0.10); --wf-p-shadow-lg: 0 12px 32px rgb(18 21 30 / 0.16); /* --- Shadow (dark, mas oscura/mas difusa) --- */ --wf-p-shadow-sm-dark: 0 1px 2px rgb(0 0 0 / 0.35); --wf-p-shadow-md-dark: 0 4px 16px rgb(0 0 0 / 0.45); --wf-p-shadow-lg-dark: 0 16px 40px rgb(0 0 0 / 0.55); /* --- Z-index --- */ --wf-p-z-sticky: 100; --wf-p-z-dropdown: 300; --wf-p-z-modal: 500; --wf-p-z-toast: 700; } /* ====================================================================== * CAPA 2 - SEMANTIC: alias por proposito. Light es el default (:root). * El bloque [data-theme="dark"] Y @media (prefers-color-scheme: dark) * (cuando no hay [data-theme] explicito) sobreescriben SOLO esta capa - * la capa component nunca necesita saber en que tema esta. * ====================================================================== */ :root { color-scheme: light; /* Superficie */ --wf-color-canvas: var(--wf-p-color-neutral-50); --wf-color-surface: var(--wf-p-color-neutral-0); --wf-color-surface-raised: var(--wf-p-color-neutral-0); --wf-color-surface-sunken: var(--wf-p-color-neutral-100); --wf-color-border: var(--wf-p-color-border-light); --wf-color-border-strong: var(--wf-p-color-border-light-strong); /* Texto */ --wf-color-text: var(--wf-p-color-neutral-900); --wf-color-text-secondary: var(--wf-p-color-neutral-600); --wf-color-text-muted: var(--wf-p-color-neutral-500); --wf-color-text-on-accent: var(--wf-p-color-neutral-0); --wf-color-text-disabled: var(--wf-p-color-neutral-400); /* Acento */ --wf-color-accent: var(--wf-p-color-accent-600); --wf-color-accent-hover: var(--wf-p-color-accent-700); --wf-color-accent-active: var(--wf-p-color-accent-800); --wf-color-accent-subtle: var(--wf-p-color-accent-50); --wf-color-accent-subtle-border: var(--wf-p-color-accent-200); --wf-color-accent-text: var(--wf-p-color-accent-700); /* Acento/danger "solid": usados en rellenos solidos (boton primary, boton danger) con texto blanco encima. A PROPOSITO no se redefinen en el bloque dark ni en el media de prefers-color-scheme: un relleno solido no depende del fondo de pagina, solo necesita contraste AA fijo contra --wf-color-text-on-accent en cualquier tema. Si se redefinieran mas claros para "verse bien en dark" (el error real que este archivo tenia antes de test/contrast.test.mjs), el boton primary quedaba en 3.47:1 con texto blanco - por debajo de AA. Ver test/contrast.test.mjs. */ --wf-color-accent-solid: var(--wf-p-color-accent-600); --wf-color-accent-solid-hover: var(--wf-p-color-accent-700); --wf-color-accent-solid-active: var(--wf-p-color-accent-800); --wf-color-danger-solid: var(--wf-p-color-danger-700); --wf-color-danger-solid-hover: var(--wf-p-color-danger-800); --wf-color-danger-solid-active: var(--wf-p-color-danger-900); /* Estados semanticos */ --wf-color-success: var(--wf-p-color-success-500); --wf-color-success-text: var(--wf-p-color-success-700); --wf-color-success-subtle: var(--wf-p-color-success-50); --wf-color-success-subtle-border: var(--wf-p-color-success-100); --wf-color-warning: var(--wf-p-color-warning-500); --wf-color-warning-text: var(--wf-p-color-warning-700); --wf-color-warning-subtle: var(--wf-p-color-warning-50); --wf-color-warning-subtle-border: var(--wf-p-color-warning-100); --wf-color-danger: var(--wf-p-color-danger-500); --wf-color-danger-text: var(--wf-p-color-danger-700); --wf-color-danger-subtle: var(--wf-p-color-danger-50); --wf-color-danger-subtle-border: var(--wf-p-color-danger-100); --wf-color-info: var(--wf-p-color-info-500); --wf-color-info-text: var(--wf-p-color-info-700); --wf-color-info-subtle: var(--wf-p-color-info-50); --wf-color-info-subtle-border: var(--wf-p-color-info-100); /* Foco / interaccion */ --wf-color-focus-ring: var(--wf-p-color-accent-500); --wf-color-overlay-scrim: rgb(10 12 18 / 0.5); /* Spacing / radius / tipografia (pass-through, permiten override futuro sin tocar el primitivo) */ --wf-space-4: var(--wf-p-space-4); --wf-space-8: var(--wf-p-space-8); --wf-space-12: var(--wf-p-space-12); --wf-space-16: var(--wf-p-space-16); --wf-space-24: var(--wf-p-space-24); --wf-space-32: var(--wf-p-space-32); --wf-space-48: var(--wf-p-space-48); --wf-radius-sm: var(--wf-p-radius-sm); --wf-radius-md: var(--wf-p-radius-md); --wf-radius-lg: var(--wf-p-radius-lg); --wf-radius-pill: var(--wf-p-radius-pill); --wf-font-sans: var(--wf-p-font-sans); --wf-font-mono: var(--wf-p-font-mono); --wf-shadow-sm: var(--wf-p-shadow-sm); --wf-shadow-md: var(--wf-p-shadow-md); --wf-shadow-lg: var(--wf-p-shadow-lg); } /* Dark explicito: [data-theme="dark"] gana siempre, sin importar prefers-color-scheme del sistema. */ :root[data-theme="dark"] { color-scheme: dark; --wf-color-canvas: var(--wf-p-color-neutral-950); --wf-color-surface: var(--wf-p-color-neutral-900); --wf-color-surface-raised: var(--wf-p-color-neutral-850); --wf-color-surface-sunken: var(--wf-p-color-neutral-950); --wf-color-border: var(--wf-p-color-border-dark); --wf-color-border-strong: var(--wf-p-color-border-dark-strong); --wf-color-text: var(--wf-p-color-neutral-50); --wf-color-text-secondary: var(--wf-p-color-neutral-300); --wf-color-text-muted: var(--wf-p-color-neutral-400); --wf-color-text-on-accent: var(--wf-p-color-neutral-0); --wf-color-text-disabled: var(--wf-p-color-neutral-600); --wf-color-accent: var(--wf-p-color-accent-400); --wf-color-accent-hover: var(--wf-p-color-accent-300); --wf-color-accent-active: var(--wf-p-color-accent-200); --wf-color-accent-subtle: var(--wf-p-color-accent-900); --wf-color-accent-subtle-border: var(--wf-p-color-accent-700); --wf-color-accent-text: var(--wf-p-color-accent-300); --wf-color-success: var(--wf-p-color-success-400); --wf-color-success-text: var(--wf-p-color-success-400); --wf-color-success-subtle: var(--wf-p-color-success-900); --wf-color-success-subtle-border: var(--wf-p-color-success-700); --wf-color-warning: var(--wf-p-color-warning-400); --wf-color-warning-text: var(--wf-p-color-warning-400); --wf-color-warning-subtle: var(--wf-p-color-warning-900); --wf-color-warning-subtle-border: var(--wf-p-color-warning-700); --wf-color-danger: var(--wf-p-color-danger-400); --wf-color-danger-text: var(--wf-p-color-danger-400); --wf-color-danger-subtle: var(--wf-p-color-danger-900); --wf-color-danger-subtle-border: var(--wf-p-color-danger-700); --wf-color-info: var(--wf-p-color-info-400); --wf-color-info-text: var(--wf-p-color-info-400); --wf-color-info-subtle: var(--wf-p-color-info-900); --wf-color-info-subtle-border: var(--wf-p-color-info-700); --wf-color-focus-ring: var(--wf-p-color-accent-300); --wf-color-overlay-scrim: rgb(0 0 0 / 0.6); --wf-shadow-sm: var(--wf-p-shadow-sm-dark); --wf-shadow-md: var(--wf-p-shadow-md-dark); --wf-shadow-lg: var(--wf-p-shadow-lg-dark); } /* AUTO DARK: si la app/pagina NO fija [data-theme] en , respeta la preferencia del sistema operativo. En cuanto haya CUALQUIER [data-theme] explicito en el documento (light u dark), esta regla deja de aplicar por especificidad de atributo/cascada normal de CSS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --wf-color-canvas: var(--wf-p-color-neutral-950); --wf-color-surface: var(--wf-p-color-neutral-900); --wf-color-surface-raised: var(--wf-p-color-neutral-850); --wf-color-surface-sunken: var(--wf-p-color-neutral-950); --wf-color-border: var(--wf-p-color-border-dark); --wf-color-border-strong: var(--wf-p-color-border-dark-strong); --wf-color-text: var(--wf-p-color-neutral-50); --wf-color-text-secondary: var(--wf-p-color-neutral-300); --wf-color-text-muted: var(--wf-p-color-neutral-400); --wf-color-text-on-accent: var(--wf-p-color-neutral-0); --wf-color-text-disabled: var(--wf-p-color-neutral-600); --wf-color-accent: var(--wf-p-color-accent-400); --wf-color-accent-hover: var(--wf-p-color-accent-300); --wf-color-accent-active: var(--wf-p-color-accent-200); --wf-color-accent-subtle: var(--wf-p-color-accent-900); --wf-color-accent-subtle-border: var(--wf-p-color-accent-700); --wf-color-accent-text: var(--wf-p-color-accent-300); --wf-color-success: var(--wf-p-color-success-400); --wf-color-success-text: var(--wf-p-color-success-400); --wf-color-success-subtle: var(--wf-p-color-success-900); --wf-color-success-subtle-border: var(--wf-p-color-success-700); --wf-color-warning: var(--wf-p-color-warning-400); --wf-color-warning-text: var(--wf-p-color-warning-400); --wf-color-warning-subtle: var(--wf-p-color-warning-900); --wf-color-warning-subtle-border: var(--wf-p-color-warning-700); --wf-color-danger: var(--wf-p-color-danger-400); --wf-color-danger-text: var(--wf-p-color-danger-400); --wf-color-danger-subtle: var(--wf-p-color-danger-900); --wf-color-danger-subtle-border: var(--wf-p-color-danger-700); --wf-color-info: var(--wf-p-color-info-400); --wf-color-info-text: var(--wf-p-color-info-400); --wf-color-info-subtle: var(--wf-p-color-info-900); --wf-color-info-subtle-border: var(--wf-p-color-info-700); --wf-color-focus-ring: var(--wf-p-color-accent-300); --wf-color-overlay-scrim: rgb(0 0 0 / 0.6); --wf-shadow-sm: var(--wf-p-shadow-sm-dark); --wf-shadow-md: var(--wf-p-shadow-md-dark); --wf-shadow-lg: var(--wf-p-shadow-lg-dark); } } /* ====================================================================== * CAPA 3 - COMPONENT: tokens especificos por componente. Solo referencian * la capa semantic (nunca la primitive directamente) para que un cambio * de tema no requiera tocar ningun token de componente. * ====================================================================== */ :root { /* Button */ --wf-button-height: 2.5rem; /* 40px */ --wf-button-height-sm: 2rem; --wf-button-height-lg: 2.75rem; --wf-button-padding-x: var(--wf-space-16); --wf-button-padding-x-sm: var(--wf-space-12); --wf-button-radius: var(--wf-radius-md); --wf-button-font-size: var(--wf-p-font-size-14); --wf-button-font-weight: var(--wf-p-font-weight-semibold); --wf-button-gap: var(--wf-space-8); --wf-button-primary-bg: var(--wf-color-accent-solid); --wf-button-primary-bg-hover: var(--wf-color-accent-solid-hover); --wf-button-primary-bg-active: var(--wf-color-accent-solid-active); --wf-button-primary-fg: var(--wf-color-text-on-accent); --wf-button-secondary-bg: var(--wf-color-surface-sunken); --wf-button-secondary-bg-hover: var(--wf-color-border); --wf-button-secondary-bg-active: var(--wf-color-border-strong); --wf-button-secondary-fg: var(--wf-color-text); --wf-button-secondary-border: var(--wf-color-border-strong); --wf-button-ghost-bg-hover: var(--wf-color-surface-sunken); --wf-button-ghost-bg-active: var(--wf-color-border); --wf-button-ghost-fg: var(--wf-color-text); --wf-button-danger-bg: var(--wf-color-danger-solid); --wf-button-danger-bg-hover: var(--wf-color-danger-solid-hover); --wf-button-danger-bg-active: var(--wf-color-danger-solid-active); --wf-button-danger-fg: var(--wf-color-text-on-accent); --wf-button-disabled-bg: var(--wf-color-surface-sunken); --wf-button-disabled-fg: var(--wf-color-text-disabled); /* Input */ --wf-input-height: 2.5rem; /* 40px, item 2 de la orden */ --wf-input-bg: var(--wf-color-surface); --wf-input-fg: var(--wf-color-text); --wf-input-placeholder: var(--wf-color-text-muted); --wf-input-border: var(--wf-color-border-strong); --wf-input-border-hover: var(--wf-color-text-muted); --wf-input-border-focus: var(--wf-color-accent); --wf-input-border-error: var(--wf-color-danger); --wf-input-radius: var(--wf-radius-md); --wf-input-padding-x: var(--wf-space-12); --wf-input-font-size: var(--wf-p-font-size-14); --wf-input-disabled-bg: var(--wf-color-surface-sunken); --wf-input-disabled-fg: var(--wf-color-text-disabled); /* Badge / status */ --wf-badge-radius: var(--wf-radius-pill); --wf-badge-padding-x: var(--wf-space-8); --wf-badge-padding-y: 0.1875rem; /* 3px, centra verticalmente sobre 20px */ --wf-badge-font-size: var(--wf-p-font-size-12); --wf-badge-font-weight: var(--wf-p-font-weight-semibold); --wf-badge-dot-size: 0.375rem; /* 6px */ /* Card */ --wf-card-bg: var(--wf-color-surface); --wf-card-fg: var(--wf-color-text); --wf-card-border: var(--wf-color-border); --wf-card-radius: var(--wf-radius-lg); --wf-card-padding: var(--wf-space-24); --wf-card-gap: var(--wf-space-16); --wf-card-shadow: var(--wf-shadow-sm); --wf-card-shadow-hover: var(--wf-shadow-md); /* Table */ --wf-table-header-bg: var(--wf-color-surface-sunken); --wf-table-header-fg: var(--wf-color-text-secondary); --wf-table-row-bg: var(--wf-color-surface); --wf-table-row-bg-hover: var(--wf-color-surface-sunken); --wf-table-border: var(--wf-color-border); --wf-table-cell-padding-x: var(--wf-space-16); --wf-table-cell-padding-y: var(--wf-space-12); --wf-table-row-height: 2.75rem; /* 44px, densa */ /* Modal */ --wf-modal-bg: var(--wf-color-surface-raised); --wf-modal-fg: var(--wf-color-text); --wf-modal-border: var(--wf-color-border); --wf-modal-radius: var(--wf-radius-lg); --wf-modal-padding: var(--wf-space-24); --wf-modal-shadow: var(--wf-shadow-lg); --wf-modal-scrim: var(--wf-color-overlay-scrim); --wf-modal-max-width: 32rem; /* Empty / error / loading (skeleton) */ --wf-skeleton-bg: var(--wf-color-surface-sunken); --wf-skeleton-shimmer: var(--wf-color-border); --wf-empty-fg: var(--wf-color-text-muted); --wf-empty-icon-fg: var(--wf-color-text-muted); /* Focus ring (compartido por todos los componentes interactivos) */ --wf-focus-ring-width: 2px; --wf-focus-ring-offset: 2px; --wf-focus-ring-color: var(--wf-color-focus-ring); /* Icon */ --wf-icon-size-sm: var(--wf-p-icon-16); --wf-icon-size-md: var(--wf-p-icon-20); --wf-icon-size-lg: var(--wf-p-icon-24); --wf-icon-stroke-width: 1.5; }