/* ============================================================================ palette.css — FONTE ÚNICA da paleta de cores (Nova UI/UX) ---------------------------------------------------------------------------- Arquivo AUTORAL (não é Core). É a ÚNICA definição da paleta do sistema: tokens --nui-* + o remapeamento dos tokens Bootstrap --bs-*, em dark e light. Consumido por AMBAS as interfaces: • Nova UI (sidebar) → nova-ui.css faz @import deste arquivo; só adiciona layout. • Clássica (navbar) → injetado pelo override views-nova-ui/layouts/home.blade.php (ramo `interface != 'nova'`), depois do styles.css. REGRA DE OURO: mexeu na paleta aqui, muda nas DUAS interfaces de uma vez. Não existe cópia espelhada — a unificação é por construção. Se precisar de um verde diferente, é UM lugar só (aqui). Escopo: html[data-bs-theme="..."] cobre a clássica; os seletores .nova-ui/ .nova-ui-shell/.nui-app cobrem a nova mesmo quando o tema é carimbado no wrapper (o nova-ui-shell.js troca data-bs-theme no .nui-app, não só no ). Direção visual (do vídeo de Kole Jain): fundo near-black esverdeado no dark, off-white creme editorial no light, acento de marca verde, hairlines sutis. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. TEMA ESCURO — near-black esverdeado + acento verde de marca ---------------------------------------------------------------------------- */ html[data-bs-theme="dark"], .nova-ui[data-bs-theme="dark"], html[data-bs-theme="dark"] .nova-ui, .nova-ui-shell[data-bs-theme="dark"], html[data-bs-theme="dark"] .nova-ui-shell, .nui-app[data-bs-theme="dark"], html[data-bs-theme="dark"] .nui-app { /* Superfícies em escada de luminância (do mais fundo ao mais elevado). Near-black com leve tinta verde — nunca #000000 (regra nº1 do vídeo). */ --nui-bg-0: #0a0f0b; /* fundo da aplicação (atrás de tudo) */ --nui-bg-1: #0f1611; /* sidebar / barras */ --nui-bg-2: #141c16; /* card / frame (1 tom acima do fundo = profundidade) */ --nui-bg-3: #1b241d; /* card elevado / hover / popover */ /* hairline afinada, aproximada do fundo → divisão sutil, sem linha marcada. */ --nui-border: #1a221c; --nui-border-strong: #324034; /* Texto */ --nui-text: #eef2ee; /* títulos: quase branco */ --nui-text-soft: #aab4ab; /* corpo secundário dessaturado */ --nui-text-mute: #6f7a71; /* dicas / placeholders */ /* Acento de marca (verde do vídeo). */ --nui-accent: #2fd17a; --nui-accent-strong: #25b869; --nui-accent-soft-bg: #14271c; /* fundo de chip: dessaturado */ --nui-accent-soft-tx: #6fe3a4; /* texto do chip: saturado (hierarquia) */ /* Aviso (status warn) — por tema p/ consistência */ --nui-warn-bg: #2a2410; --nui-warn-tx: #e6c068; /* Perigo (Excluir) — vermelho do tema, mais suave que o Bootstrap. */ --nui-danger: #e2685f; --nui-danger-strong: #c9514a; /* Info (Ressetar senha) — azul do tema, claro o bastante p/ o near-black. */ --nui-info: #5aa9e6; /* Sombra da LOGO (drop-shadow por tema). No DARK: halo CLARO. */ --nui-logo-shadow: 0 0 3px rgba(255, 255, 255, 0.55); /* Cor do conteúdo SOBRE o acento (ícone/texto de botão verde). No DARK, o verde vibrante contra o near-black faz o branco "estourar" — usamos o verde-quase-preto, que assenta melhor. */ --nui-on-accent: #06150d; /* Mapeia os tokens nui -> tokens Bootstrap (o sistema todo reage a estes). */ --bs-body-bg: var(--nui-bg-0); --bs-body-color: var(--nui-text); --bs-emphasis-color: var(--nui-text); --bs-secondary-bg: var(--nui-bg-2); --bs-secondary-bg-rgb: 20, 28, 22; --bs-tertiary-bg: var(--nui-bg-3); --bs-tertiary-bg-rgb: 27, 36, 29; --bs-secondary-color: var(--nui-text-soft); --bs-tertiary-color: var(--nui-text-mute); --bs-border-color: var(--nui-border); --bs-heading-color: var(--nui-text); --bs-primary: var(--nui-accent); --bs-primary-rgb: 47, 209, 122; /* Derivados do primary (chips ".text-bg-primary", "-subtle", check do tema ativo no dropdown). Sem estes, o Bootstrap mantém os azuis default e o "✓" do tema / badges ficam azulados no meio da paleta verde. */ --bs-primary-bg-subtle: var(--nui-accent-soft-bg); --bs-primary-border-subtle: var(--nui-accent-strong); --bs-primary-text-emphasis: var(--nui-accent-soft-tx); --bs-link-color: var(--nui-accent-soft-tx); --bs-link-color-rgb: 111, 227, 164; --bs-link-hover-color: var(--nui-accent); --bs-border-radius: 0.75rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 1rem; } /* ---------------------------------------------------------------------------- 2. TEMA CLARO — off-white creme editorial + acento verde ---------------------------------------------------------------------------- */ html[data-bs-theme="light"], .nova-ui[data-bs-theme="light"], html[data-bs-theme="light"] .nova-ui, .nova-ui-shell[data-bs-theme="light"], html[data-bs-theme="light"] .nova-ui-shell, .nui-app[data-bs-theme="light"], html[data-bs-theme="light"] .nui-app { --nui-bg-0: #fbfaf6; /* área de trabalho — quase branco */ --nui-bg-1: #efece3; /* sidebar / barras — creme (destaca sobre a área) */ --nui-bg-2: #ffffff; --nui-bg-3: #faf8f2; --nui-border: #e4e0d5; --nui-border-strong: #d3cec0; --nui-text: #1b1a16; --nui-text-soft: #5f5d56; --nui-text-mute: #908d83; --nui-accent: #1f9d55; --nui-accent-strong: #167a41; --nui-accent-soft-bg: #e6f4ec; --nui-accent-soft-tx: #167a41; --nui-warn-bg: #fbf0d8; --nui-warn-tx: #8a6516; --nui-danger: #d64a42; --nui-danger-strong: #b23a33; --nui-info: #2f7fc4; /* Sombra da LOGO — no LIGHT: halo ESCURO. */ --nui-logo-shadow: 0 0 3px rgba(0, 0, 0, 0.45); --nui-on-accent: #ffffff; --bs-body-bg: var(--nui-bg-0); --bs-body-color: var(--nui-text); --bs-emphasis-color: var(--nui-text); --bs-secondary-bg: var(--nui-bg-2); --bs-tertiary-bg: var(--nui-bg-3); --bs-secondary-color: var(--nui-text-soft); --bs-tertiary-color: var(--nui-text-mute); --bs-border-color: var(--nui-border); --bs-heading-color: var(--nui-text); --bs-primary: var(--nui-accent); --bs-primary-rgb: 31, 157, 85; --bs-primary-bg-subtle: var(--nui-accent-soft-bg); --bs-primary-border-subtle: var(--nui-accent-strong); --bs-primary-text-emphasis: var(--nui-accent-soft-tx); --bs-link-color: var(--nui-accent-soft-tx); --bs-link-color-rgb: 22, 122, 65; --bs-link-hover-color: var(--nui-accent-strong); --bs-border-radius: 0.75rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 1rem; } /* ---------------------------------------------------------------------------- 3. BOTÃO PRIMÁRIO — texto sobre o acento O .btn-primary usa --bs-primary de fundo, mas o TEXTO é branco fixo por padrão; no dark o verde vibrante faz o branco "estourar" → usamos --nui-on-accent (mesma decisão da nova UI). Vale para as duas interfaces. ---------------------------------------------------------------------------- */ .btn-primary { --bs-btn-bg: var(--nui-accent); --bs-btn-border-color: var(--nui-accent); --bs-btn-color: var(--nui-on-accent); --bs-btn-hover-bg: var(--nui-accent-strong); --bs-btn-hover-border-color: var(--nui-accent-strong); --bs-btn-hover-color: var(--nui-on-accent); --bs-btn-active-bg: var(--nui-accent-strong); --bs-btn-active-border-color: var(--nui-accent-strong); --bs-btn-active-color: var(--nui-on-accent); --bs-btn-disabled-bg: var(--nui-accent); --bs-btn-disabled-border-color: var(--nui-accent); --bs-btn-disabled-color: var(--nui-on-accent); } /* ---------------------------------------------------------------------------- 4. BOTÕES OUTLINE — acento verde (paridade nas DUAS interfaces) ---------------------------------------------------------------------------- PEGADINHA do Bootstrap: .btn-outline-primary NÃO usa var(--bs-primary) — ele CRAVA #0d6efd nos próprios tokens --bs-btn-*. Por isso remapear --bs-primary (seção 1/2) não pinta os botões de contorno; eles ficavam AZUIS. É o caso dos botões de permissão da tela de Grupos (label.btn-outline-primary + btn-check: olho / + / lápis / lixeira) e de qualquer "Novo ..." com contorno. Redefinimos os tokens do próprio botão para o acento. SEM escopo nova-ui-shell → vale para clássica E nova (a fonte da cor é única). NÃO alteramos o formato (sem border-radius pílula) — só a COR, como pedido: "muda só o estilo da interface, a cor é paridade". ---------------------------------------------------------------------------- */ .btn-outline-primary, .btn-outline-info { --bs-btn-color: var(--nui-accent); --bs-btn-border-color: var(--nui-border-strong); --bs-btn-hover-bg: var(--nui-accent); --bs-btn-hover-border-color: var(--nui-accent); --bs-btn-hover-color: var(--nui-on-accent); --bs-btn-active-bg: var(--nui-accent-strong); --bs-btn-active-border-color: var(--nui-accent-strong); --bs-btn-active-color: var(--nui-on-accent); } /* PERMISSÕES (tela de Grupos) e afins — estado do toggle btn-check + label. ATIVO (:checked): fundo verde sólido + ícone sobre-acento (claramente ligado). INATIVO (:not(:checked)): apagado — transparente + ícone mudo (desligado). Usa !important porque o Bootstrap aplica os tokens hardcoded com boa especificidade; espelha o comportamento da nova UI valendo nas duas. */ .btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn.btn-outline-primary { background-color: var(--nui-accent) !important; border-color: var(--nui-accent) !important; color: var(--nui-on-accent) !important; } .btn-check:checked + .btn-outline-primary i, .btn-check:checked + .btn.btn-outline-primary i { color: var(--nui-on-accent) !important; } /* INATIVO: apagado — transparente + ícone mudo, para ler "desligado" num relance (contraste claro contra o verde sólido do ativo). Igual à nova UI. */ .btn-check:not(:checked) + .btn-outline-primary, .btn-check:not(:checked) + .btn.btn-outline-primary { background-color: transparent !important; border-color: var(--nui-border) !important; color: var(--nui-text-mute) !important; } .btn-check:not(:checked) + .btn-outline-primary i, .btn-check:not(:checked) + .btn.btn-outline-primary i { color: var(--nui-text-mute) !important; } /* ---------------------------------------------------------------------------- 5. MENU CLÁSSICO — acento verde no item ativo (paridade com a nova UI) A nova UI pinta o ícone do item ativo de verde (.nui-nav-link.is-active i). A navbar clássica (.navbar .nav-link) não tinha equivalente — o item ativo ficava neutro. Espelhamos aqui para o realce de marca aparecer também na clássica. Escopado à navbar p/ não vazar para a sidebar da nova UI (que já tem sua própria regra via .nui-nav-link). ---------------------------------------------------------------------------- */ .navbar .navbar-nav .nav-link.active, .navbar .navbar-nav .nav-link.active i, .navbar .navbar-nav .show > .nav-link, .navbar .navbar-nav .dropdown-item.active i { color: var(--nui-accent); }