/* theme-tokens.css v1.0 — vocabulario de cor para troca de tema * SPEC-D-019 D-D019-3, S99D_05. * * POR QUE ESTE ARQUIVO EXISTE, e nao o topo do hub.css: * `hub.css` e build MINIFICADO do Tailwind (uma linha, gerado de `input.css` + * `tailwind.config.js`). Escrever nele seria perdido no proximo rebuild. E colocar * os tokens em `input.css` obrigaria a rebuildar o `hub.css` para que chegassem ao * browser — rebuild que hoje nao e reproduzivel: nao ha `package.json` na raiz, nao * ha toolchain no repo, e a versao do Tailwind nao esta pinada em lugar nenhum. * * Arquivo proprio resolve as duas coisas: nao e sobrescrito por rebuild e nao * depende de um existir. Precisa ser carregado ANTES do `hub.css` para que * utilitarias do Tailwind possam sobrepor tokens quando o autor quiser. * * POR QUE CUSTOM PROPERTIES E NAO CLASSES: * atributo `style=` inline tem especificidade maior que qualquer classe e NAO tem * mecanismo de variante — nao existe forma de escrever "no modo escuro use outro * valor" dentro de um `style=`. Mas `style="color: var(--text-secondary)"` funciona, * porque a variavel resolve conforme a classe no ``. E o que permite corrigir * as tabelas geradas por JS sem reescrever a estrutura delas. * * ESCOPO desta entrega (recorte de S99D_05, ver SPEC-D-019 §8): * `dashboard.html`, `widget.css`, `widget-monitor.css`, `index.html`. Os 7 templates * standalone seguem fixos em escuro; consequencia aceita e registrada na SPEC. */ /* --------------------------------------------------------------------------- * MODO CLARO — o default do `:root`. * Fica no `:root` sem qualificador porque o script no `` adiciona `.dark` * quando for o caso; assim um HTML sem classe nenhuma cai no claro previsivelmente. * ------------------------------------------------------------------------- */ :root { /* Superficies, do fundo da pagina para cima */ --surface-page: #f6f8fb; --surface-card: #ffffff; --surface-sunken: #eef2f7; /* campos, celulas de metrica, areas recuadas */ --surface-raised: #ffffff; /* dropdown, popover, modal */ --surface-overlay: rgba(15, 23, 42, 0.35); /* fundo de modal */ /* Bordas */ --border-hairline: rgba(15, 23, 42, 0.08); --border-strong: rgba(15, 23, 42, 0.14); /* Texto, do mais forte ao mais fraco. * `--text-body` existe para preservar exatamente o slate-300 (#cbd5e1) que a * tabela de eventos usava: sem ele, aquelas celulas mudariam de tom no escuro, e * trocar a aparencia de quem ja estava no escuro nao e objetivo desta entrega. */ --text-primary: #0f172a; --text-body: #334155; --text-secondary: #475569; --text-muted: #64748b; --text-faint: #94a3b8; /* Metricas do monitor de recursos. * Tokens proprios em vez de reusar --status-*: CPU/RAM/disco/rede sao SERIES de * dado, nao estados. Reusar `ok`/`warn` faria disco parecer alerta permanente e * apagaria a distincao entre download e upload. Valores do claro sao os tons 600 * do Tailwind, porque os 400/500 do escuro somem sobre branco. */ --metric-cpu: #1d4ed8; --metric-ram: #047857; --metric-disk: #b45309; --metric-net-down: #2563eb; --metric-net-up: #059669; /* Cores semanticas. * Par claro/escuro dedicado porque contraste nao sobrevive a troca de fundo: um * verde legivel sobre slate-950 fica lavado sobre branco. Os valores do claro sao * os tons 600/700 do Tailwind; os do escuro, os 400. */ --status-ok: #15803d; --status-warn: #b45309; --status-error: #b91c1c; --status-info: #1d4ed8; --status-neutral: #475569; /* Fundo tenue das mesmas cores, para badge e chip */ --status-ok-soft: rgba(21, 128, 61, 0.10); --status-warn-soft: rgba(180, 83, 9, 0.10); --status-error-soft: rgba(185, 28, 28, 0.10); --status-info-soft: rgba(29, 78, 216, 0.10); --status-neutral-soft: rgba(71, 85, 105, 0.10); /* Acento da marca (farol). Mantido igual nos dois temas: e identidade. */ --accent: #3d63be; } /* --------------------------------------------------------------------------- * MODO ESCURO — os valores que o Hub usa hoje, preservados. * A troca de tema nao deve mudar a aparencia de quem estava no escuro: os valores * aqui sao os literais que estavam nos `style=` e nos CSS dos widgets. * ------------------------------------------------------------------------- */ .dark { --surface-page: #0a1022; --surface-card: rgba(15, 23, 42, 0.55); --surface-sunken: #1e293b; --surface-raised: #1e293b; --surface-overlay: rgba(0, 0, 0, 0.5); --border-hairline: rgba(30, 41, 59, 0.3); --border-strong: #334155; --text-primary: #f1f5f9; --text-body: #cbd5e1; --text-secondary: #94a3b8; --text-muted: #64748b; --text-faint: #475569; --metric-cpu: #3b82f6; --metric-ram: #10b981; --metric-disk: #f59e0b; --metric-net-down: #60a5fa; --metric-net-up: #34d399; --status-ok: #4ade80; --status-warn: #fbbf24; --status-error: #f87171; --status-info: #60a5fa; --status-neutral: #94a3b8; --status-ok-soft: rgba(74, 222, 128, 0.10); --status-warn-soft: rgba(251, 191, 36, 0.10); --status-error-soft: rgba(239, 68, 68, 0.10); --status-info-soft: rgba(59, 130, 246, 0.10); --status-neutral-soft: rgba(100, 116, 139, 0.10); --accent: #3d63be; } /* --------------------------------------------------------------------------- * D-D019-9: o motivo de estrelas do header aparece apenas no escuro. No claro o * header fica limpo, sem motivo substituto — decisao de postergar, nao defeito. * Controlado por variavel para que trocar por outro motivo depois seja um bloco * isolado. * ------------------------------------------------------------------------- */ :root { --decor-stars-opacity: 0; } .dark { --decor-stars-opacity: 1; }