/* ============================================================================= * design-tokens-canonical.css — 7 regras canônicas de cor + tipografia * Source of truth: docs/design/04-COLORS.md + docs/design/05-TYPOGRAPHY.md * Memory: feedback_color_typography_canonical_rules * * IMPORTAR PRIMEIRO no app.css (antes de qualquer componente). * Não duplica tokens existentes em base-extensions.css; complementa com: * - Cor primária resolvida POR ÁREA (data-area attr no ) * - Hover canonical (primary + 10% preto) * - Status semânticos FIXOS (independem de tema) * - Form error visual claro (borda + bg + texto) * - Contraste branco/preto resolvido por luminância da primária * ============================================================================= */ :root { /* --- Cor primária default (área "clientes" assumida quando data-area ausente) --- */ --color-primary: #00467C; --color-primary-hover: color-mix(in srgb, var(--color-primary) 90%, black); --color-primary-active: color-mix(in srgb, var(--color-primary) 82%, black); --color-primary-text: #ffffff; /* primárias canônicas são todas escuras → branco */ --color-primary-focus-ring: color-mix(in srgb, var(--color-primary) 25%, transparent); --color-primary-soft: color-mix(in srgb, var(--color-primary) 10%, transparent); --color-primary-wash: color-mix(in srgb, var(--color-primary) 5%, transparent); --color-surface-hover: color-mix(in srgb, var(--color-primary) 6%, transparent); --color-action-muted-hover: color-mix(in srgb, var(--color-primary) 8%, #ffffff); /* --- Erro de campo (regra 3) --- */ --color-error: #dc2626; --color-error-bg: #fef2f2; --color-error-border: #dc2626; --color-error-text: #b91c1c; /* --- Paleta padrão warning/success/info (#103): PADRONIZADA p/ TODOS os tenants (default, NÃO varia por tenant). Antes eram usadas só como var(--token, fallback) com fallbacks divergentes entre telas (#fffbeb vs #fef9c3, #92400e vs #a16207, success/info idem). Definidas aqui no canônico → todos os usos resolvem para o mesmo valor (consistência total). --- */ --color-warning-bg: #fffbeb; --color-warning-dark: #92400e; --color-warning-700: #b45309; --color-warning-border: #fde68a; --color-warning-border-strong: #fcd34d; --color-success-bg: #f0fdf4; --color-success-700: #15803d; --color-info-bg: #eff6ff; --color-info-700: #1d4ed8; /* --- Status semânticos FIXOS (regra 1: cores POR ÁREA, fundo claro + texto escuro) --- */ --status-success-bg: #d1fae5; --status-success-text: #064e3b; --status-warning-bg: #fef3c7; --status-warning-text: #78350f; --status-info-bg: #dbeafe; --status-info-text: #1e3a8a; --status-danger-bg: #fee2e2; --status-danger-text: #7f1d1d; --status-neutral-bg: #f3f4f6; --status-neutral-text: #1f2937; /* --- Texto status escuro (toasts, banners) — alinhado a status-*-text ----- */ --color-status-text-info: #1e3a8a; --color-status-text-success: #14532d; --color-status-text-warning: #78350f; --color-status-text-danger: #7f1d1d; /* --- Status pills (back buttons por área, dashboards) -------------------- */ --color-status-pill-bg-info: #e8f4fd; --color-status-pill-text-info: #0273b2; --color-status-pill-bg-info-hover: #d0e8f7; --color-status-pill-bg-warning: #fef3e2; --color-status-pill-text-warning: #c2410c; --color-status-pill-bg-warning-hover: #fde5c8; --color-status-pill-text-warning-hover:#9a3412; --color-status-pill-bg-amber: #fefce8; --color-status-pill-text-amber: #854d0e; --color-status-pill-bg-sky: #e0f2fe; --color-status-pill-text-sky: #0369a1; /* --- Zebra rows / surface tints por área ------------------------------- */ --color-row-zebra-warm: #faf8f4; --color-row-zebra-cool: #f6faf8; /* --- Auxiliares de borda/texto ---------------------------------------- */ --color-border-subtle: #e5e7eb; /* A11y (P0): texto "muted" passa de #9ca3af (2.54:1, reprova WCAG AA) para #6b7280 (~4.5:1 sobre branco) — mantém a hierarquia "secundária" mas legível. */ --color-text-muted: #6b7280; --color-text-disabled-light:#c0c7d0; --color-text-on-accent-soft:#47617f; /* --- Acento laranja (timeline dot non-status) ------------------------- */ --color-accent-orange: #f97316; --color-accent-amber-strong: #ca8a04; /* --- Tipografia (regra 6: 1 family, pesos diferentes) --- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.5rem; /* Aliases de tipografia: o namespace --text-* era usado ~54x nos modulos mas NUNCA * era definido (caia sempre no fallback literal, ignorando o token canonico e impedindo * o ajuste por tenant). Aliasamos para os --fs-* canonicos = fonte unica de tamanho. */ --text-xs: var(--fs-xs); --text-sm: var(--fs-sm); --text-base: var(--fs-base); --text-lg: var(--fs-lg); --text-xl: var(--fs-xl); } /* --- Cor primária POR ÁREA (regra 2: definida pela área, não pelo tema) --------- * Aplique data-area="admin|clientes|parceiros" no via Razor _Layout. */ :root[data-area="admin"] { --color-primary: #161A20; --color-primary-hover: #30343B; --color-primary-active: #3A3F47; --color-primary-text: #ffffff; --color-primary-soft: rgba(22, 26, 32, 0.12); --color-primary-wash: rgba(22, 26, 32, 0.07); --color-surface-hover: #EEF0F2; --color-action-muted-hover: #E7E9EC; --theme-primary: #161A20; --theme-primary-rgb: 22, 26, 32; --theme-filled-primary: #161A20; --theme-filled-primary-hover: #30343B; --theme-filled-primary-active: #3A3F47; --theme-primary-soft: rgba(22, 26, 32, 0.1); --theme-primary-wash: rgba(22, 26, 32, 0.05); --theme-action-shadow: 0 1px 3px rgba(22, 26, 32, 0.12); } :root[data-area="clientes"] { --color-primary: #00467C; --color-primary-text: #ffffff; --theme-primary: #00467C; --theme-primary-rgb: 0, 70, 124; } :root[data-area="parceiros"] { --color-primary: #0F6B50; --color-primary-text: #ffffff; --theme-primary: #0F6B50; --theme-primary-rgb: 15, 107, 80; --theme-filled-primary: #0F6B50; --theme-primary-soft: rgba(15, 107, 80, 0.1); --theme-primary-wash: rgba(15, 107, 80, 0.05); --theme-action-shadow: 0 1px 3px rgba(15, 107, 80, 0.12); } /* --- Form controls (regra 2: focus = primária, regra 3: error = vermelho) ----- */ .input-canonical:focus, .select-canonical:focus, .form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="date"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-focus-ring); } .input-canonical.is-invalid, .select-canonical.is-invalid, .form-control.is-invalid, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error-border); background-color: var(--color-error-bg); } .input-canonical.is-invalid:focus, .form-control.is-invalid:focus, input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent); } .field-validation-error, .text-danger, .form-error-message { color: var(--color-error-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-top: 0.375rem; display: block; } .validation-summary-errors { background-color: var(--color-error-bg); border: 1px solid var(--color-error-border); color: var(--color-error-text); padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: 1rem; } /* --- Botão primário (regra 2: fundo primária; regra 4: hover +10% preto) ------ */ .btn-canonical-primary, .btn--primary { background-color: var(--color-primary); color: var(--color-primary-text); border: 1px solid var(--color-primary); font-weight: var(--fw-semibold); transition: background-color 150ms ease, border-color 150ms ease; } .btn-canonical-primary:hover, .btn-canonical-primary:focus-visible, .btn--primary:hover, .btn--primary:focus-visible { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* --- Menu item ativo (regra 2: fundo primária) -------------------------------- */ .menu-item--active, .menu-item.is-active, .nav-link.active, .sidebar-item--active { background-color: var(--color-primary); color: var(--color-primary-text); } .menu-item:hover:not(.is-active):not(.menu-item--active), .nav-link:hover:not(.active), .sidebar-item:hover:not(.sidebar-item--active) { background-color: var(--color-primary-soft); } /* --- Option/check selecionado (regra 2) --------------------------------------- */ input[type="checkbox"]:checked, input[type="radio"]:checked { accent-color: var(--color-primary); } /* --- Status badges (regra 1: cores fixas, fundo claro + texto escuro) --------- */ .badge--success, .workspace-status-badge-success { background-color: var(--status-success-bg); color: var(--status-success-text); } .badge--warning, .workspace-status-badge-warning { background-color: var(--status-warning-bg); color: var(--status-warning-text); } .badge--info, .workspace-status-badge-info { background-color: var(--status-info-bg); color: var(--status-info-text); } .badge--danger, .workspace-status-badge-danger, .workspace-status-badge-error { background-color: var(--status-danger-bg); color: var(--status-danger-text); } .badge--neutral, .workspace-status-badge-neutral, .workspace-status-badge-muted { background-color: var(--status-neutral-bg); color: var(--status-neutral-text); } /* --- Base de badge (estrutura comum) ------------------------------------------ */ .badge--success, .badge--warning, .badge--info, .badge--danger, .badge--neutral { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.2; white-space: nowrap; } /* ============================================================================ Validation feedback canonical (regra 3) — label vermelho quando o campo do form-group estiver inválido (server-side .is-invalid + ARIA aria-invalid). Usa :has() (Safari 15.4+, Chrome 105+, Firefox 121+). Browsers sem suporte continuam exibindo borda+bg vermelhos no input + texto abaixo. ============================================================================ */ .form-group:has(input.is-invalid), .form-group:has(select.is-invalid), .form-group:has(textarea.is-invalid), .form-group:has(input[aria-invalid="true"]), .form-group:has(select[aria-invalid="true"]), .form-group:has(textarea[aria-invalid="true"]) { > .form-label, > label, > .label { color: var(--color-error-text); } } /* ============================================================================ Toast canonical — renderer CSP-safe usando tokens --status-{tone}-{bg,text}. Wrapper Portal.Toast (em /js/portal-toast.js) injeta somente classes e texto. ============================================================================ */ .portal-toast-host { position: fixed; inset-block-start: 50%; inset-inline-end: auto; left: 50%; transform: translate(-50%, -50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; max-width: min(28rem, calc(100vw - 2rem)); pointer-events: none; } .portal-toast-announcer { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .portal-toast { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 28rem; font-family: var(--font-family-base); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: 0.5rem; padding: 0.875rem 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); pointer-events: auto; animation: portal-toast-enter 180ms ease-out both; } .portal-toast--leaving { animation: portal-toast-leave 220ms ease-in both; } .portal-toast__message { flex: 1 1 auto; min-width: 0; line-height: 1.45; } .portal-toast__dismiss { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.12); color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; transition: background-color 150ms ease, opacity 150ms ease; } .portal-toast__dismiss:hover { background: rgba(0, 0, 0, 0.2); } .portal-toast--success { background-color: var(--status-success-bg) !important; color: var(--status-success-text) !important; } .portal-toast--info { background-color: var(--status-info-bg) !important; color: var(--status-info-text) !important; } .portal-toast--warning { background-color: var(--status-warning-bg) !important; color: var(--status-warning-text) !important; } .portal-toast--error { background-color: var(--status-danger-bg) !important; color: var(--status-danger-text) !important; } @keyframes portal-toast-enter { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } @keyframes portal-toast-leave { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-0.5rem); } } /* ============================================================================ Aliases de classes legadas SEM regra própria (ciclo 3.2) — aqui (e não em app.css) para cobrir TODAS as telas: este arquivo é carregado por individual (auth/cadastro/workspace) E pelo @import do app.css. Estiliza form-hint/form-text/text-muted/form-error/form-field conforme as canônicas. ============================================================================ */ .form-hint, .form-text, .form-help-text { font-size: var(--fs-sm, 0.875rem); line-height: 1.5rem; color: var(--color-text-muted, #6b7280); } .form-hint-error { color: var(--color-error-text, #b91c1c); } .text-muted { color: var(--color-text-muted, #6b7280); } .form-error, .form-field-error { display: block; margin-top: 0.375rem; font-size: var(--fs-sm, 0.875rem); font-weight: var(--fw-medium, 500); color: var(--color-error-text, #b91c1c); } .form-field { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .bg-red-100 { background-color: #fee2e2; } .text-red-700 { color: #b91c1c; } /* .visually-hidden: alias global de .sr-only (estava só em CSS admin-only) — cobre _Loading e demais usos fora das telas que carregam legal-documents-editor.css. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }