/* ============================================================================= * 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-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); /* --- Erro de campo (regra 3) --- */ --color-error: #dc2626; --color-error-bg: #fef2f2; --color-error-border: #dc2626; --color-error-text: #b91c1c; /* --- 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; --color-text-muted: #9ca3af; --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; } /* --- 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-text: #ffffff; } :root[data-area="clientes"] { --color-primary: #00467C; --color-primary-text: #ffffff; } :root[data-area="parceiros"] { --color-primary: #0F6B50; --color-primary-text: #ffffff; } /* --- 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 — overrides Notyf usando tokens --status-{tone}-{bg,text}. Wrapper Portal.Toast (em /js/portal-toast.js) injeta as classes abaixo via types[].className. ============================================================================ */ .portal-toast { 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); } .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; } .portal-toast .notyf__dismiss-btn { color: inherit; opacity: 0.6; } .portal-toast .notyf__dismiss-btn:hover { opacity: 1; }