/* ============================================================================ protec-tokens.css — camada de tokens do design system Protec FONTE: Protec.SistemaV2. A API de classes vem do dialeto `cad-*` (Protec.Cadastros/wwwroot/css/app.css:145-161); a profundidade da escala vem do dialeto `prot-*` (Protec.ProcessoDigital/wwwroot/css/app.css:12-30). POR QUE color-mix EM VEZ DE UM BLOCO .dark DUPLICADO O SistemaV2 mantém dois blocos de tokens escritos à mão (claro e escuro) e um `.dark` na raiz do módulo pra alternar. Aqui isso não funcionaria: MudPopoverProvider e MudDialogProvider renderizam como IRMÃOS de `.oc-root` (ver MainLayout.razor), então qualquer token escopado numa classe não alcançaria popovers e diálogos. Derivar com color-mix a partir das variáveis do MudBlazor — que já invertem sozinhas quando IsDarkMode muda — resolve os dois problemas: um único bloco `:root`, e cobertura global. `color-mix` já é usado em produção no SistemaV2. FALLBACK: cada linha com color-mix é precedida por um valor plano. Browser sem suporte descarta a segunda declaração e fica com o valor plano. ============================================================================ */ :root { /* ── Alias direto da paleta MudBlazor ────────────────────────────────── Estes seguem IsDarkMode automaticamente, sem nenhum código. --border usa cadeia defensiva: lines-default é o slot correto (bordas de Variant.Outlined), divider é o fallback histórico do ChatBox. */ --primary: var(--mud-palette-primary); --navy: var(--mud-palette-drawer-background, #16223C); --bg: var(--mud-palette-background, #f6f6f4); --surface: var(--mud-palette-surface, #fff); --text: var(--mud-palette-text-primary); --text-2: var(--mud-palette-text-secondary); --border: var(--mud-palette-lines-default, var(--mud-palette-divider, #E6E9EF)); --danger: var(--mud-palette-error, #DC2626); --warning: var(--mud-palette-warning, #D97706); --success: var(--mud-palette-success, #16A34A); --info: var(--mud-palette-info, #0E8FA8); /* ── Superfícies derivadas ───────────────────────────────────────────── Misturar com text-primary dá um degrau MAIS ESCURO no tema claro e MAIS CLARO no escuro — automaticamente, porque text-primary inverte junto. Usadas em: cabeçalho de tabela, hover de linha, chip de busca. */ --surface-2: #f5f7fb; --surface-2: color-mix(in srgb, var(--mud-palette-text-primary) 4%, var(--mud-palette-surface)); --surface-3: #eef1f7; --surface-3: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-surface)); /* Texto terciário — cabeçalhos de tabela, timestamps, placeholders. */ --text-3: #7d8698; --text-3: color-mix(in srgb, var(--mud-palette-text-secondary) 72%, var(--mud-palette-surface)); --border-strong: #cfd6e4; --border-strong: color-mix(in srgb, var(--mud-palette-lines-default, #E6E9EF) 65%, var(--mud-palette-text-primary)); /* ── Variantes "soft" ────────────────────────────────────────────────── No SistemaV2 são rgba() fixos, que não invertem no tema escuro (ficam claros demais sobre fundo escuro). Derivados aqui pra funcionar nos dois. */ --primary-soft: rgba(47,95,224,.10); --primary-soft: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); --danger-soft: rgba(220,38,38,.10); --danger-soft: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); --warning-soft: rgba(217,119,6,.12); --warning-soft: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); --success-soft: rgba(22,163,74,.12); --success-soft: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); --info-soft: rgba(14,143,168,.12); --info-soft: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); /* ── Sidebar (fica azul-marinho no tema claro — decisão do SistemaV2) ── Texto/hover/divisores derivam do DrawerText do tema, então acompanham quando a chrome escura muda de tom entre claro e escuro. */ --drawer-text: var(--mud-palette-drawer-text, rgba(255,255,255,.82)); --drawer-text-muted: rgba(255,255,255,.55); --drawer-text-muted: color-mix(in srgb, var(--mud-palette-drawer-text, #fff) 62%, transparent); --drawer-hover: rgba(255,255,255,.06); --drawer-line: rgba(255,255,255,.07); /* ── Raios ───────────────────────────────────────────────────────────── 8 = botão/input, 12 = card, 14 = painel/modal, 999 = pill/badge. */ --radius-input: 8px; --radius-card: 12px; --radius-panel: 14px; --radius-pill: 999px; /* ── Elevação ────────────────────────────────────────────────────────── 1 = card/botão, 2 = dropdown/painel, 3 = modal. Bimodais (ver bloco data-zi-theme abaixo): sombra preta translúcida some no escuro. */ --elev-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --elev-2: 0 8px 24px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06); --elev-3: 0 18px 50px rgba(16,24,40,.22); /* ── Bolha "eu" do chat ──────────────────────────────────────────────── NÃO herda --primary de propósito. O Primary do tema escuro do SistemaV2 é #7DA3F5 (azul claro): texto branco sobre ele dá ~2:1 de contraste, ilegível. Ver bloco data-zi-theme abaixo. */ --bubble-me-bg: var(--mud-palette-primary); --bubble-me-fg: #fff; --modal-overlay: rgba(16,24,40,.42); } /* ============================================================================ Tokens genuinamente bimodais O MudBlazor 8.2 não expõe nenhum hook CSS de modo escuro (`.mud-theme-dark` é a classe utilitária de Color.Dark, não o modo). Para os poucos valores que NÃO são "a mesma cor com outra luminância", o MainLayout marca . Se o JS falhar, estes ficam no valor claro; todo o resto continua correto pela paleta do MudBlazor. ============================================================================ */ html[data-zi-theme="dark"] { /* Sombra preta translúcida é invisível sobre fundo quase-preto — no escuro a elevação precisa ser mais opaca e mais espalhada pra ainda separar camadas. */ --elev-1: 0 1px 2px rgba(0,0,0,.35); --elev-2: 0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30); --elev-3: 0 24px 60px rgba(0,0,0,.60); /* Azul profundo em vez do Primary claro (#7DA3F5), pra manter branco legível. */ --bubble-me-bg: #2B4A8F; --bubble-me-fg: #F2F4F8; --modal-overlay: rgba(0,0,0,.55); } /* ============================================================================ Densidade global do MudBlazor Portado de Protec.SistemaV2/src/Orchestrator/wwwroot/css/app.css:13-16. O SistemaV2 é visivelmente mais compacto que o padrão do MudBlazor; sem isto o ChatBox parece "inflado" ao lado dele. ============================================================================ */ .mud-button-root { padding-top: 4px; padding-bottom: 4px; } .mud-input-control .mud-input { min-height: 36px; } .mud-table-cell { padding-top: 6px; padding-bottom: 6px; } .mud-toolbar { min-height: 48px; } /* MudDialog real ainda é usado em ~10 telas (o resto usa overlay artesanal, por causa de um bug de auto-reabertura — ver PessoaDetalheModal.razor). Alinhar os dois pra o app não ter duas linguagens de modal. */ .mud-dialog { border-radius: var(--radius-panel); box-shadow: var(--elev-3); } .mud-dialog .mud-dialog-title { padding: 18px 20px 6px; } .mud-dialog .mud-dialog-content { padding: 12px 20px 4px; } .mud-dialog .mud-dialog-actions { padding: 14px 20px 18px; gap: 10px; }