/* notarioflow — design tokens Importe este arquivo no seu projeto e use as variáveis var(--nf-*). =========================================================================== SKINS =========================================================================== A aparência é controlada por três atributos no , escritos pelo servidor em App.razor ANTES de a página chegar ao navegador (por isso a tela já nasce na skin certa, sem piscar do claro para o escuro): data-skin indigo | azul | verde | cinza | ambar (cor de acento) data-modo claro | escuro data-tamanho compacto | normal | grande (escala tipográfica) data-barra escura | colorida (estilo da barra superior) data-fonte segoeui | sistema | tahoma | verdana | arial | calibri | georgia Regras de composição, nesta ordem: 1. :root neutros do modo claro + acento indigo (padrão) 2. [data-skin=...] troca só o acento (e, no indigo, os neutros quentes) 3. [data-modo=escuro] troca os neutros para a base escura 4. [data-modo=escuro][data-skin=...] clareia o acento para contrastar no escuro Por que o acento precisa de duas versões: uma cor que tem contraste suficiente sobre papel claro fica escura demais sobre fundo preto, e vice-versa. Não dá para usar o mesmo hex nos dois modos sem perder legibilidade. O que a cor da skin NÃO pinta: barra superior e menu continuam neutros em todas as skins — a moldura fica estável e não cansa em expediente inteiro. O ouro de fé pública (--nf-gold) NÃO é cor de marca: é semântica de ato oficial (selo, carimbo, borda da guia) e permanece dourado nas cinco skins. Só o tom muda no escuro, onde o dourado do modo claro fica sujo sobre fundo preto. */ :root { /* ----- neutros: base FRIA (vale para azul, verde, cinza e âmbar) ----- */ --nf-ink: #12161B; /* Tinta — texto principal, fundos escuros */ --nf-paper: #F5F6F8; /* fundo da aplicação */ --nf-surface: #FFFFFF; /* cartões, painéis */ --nf-mist: #ECEEF2; /* fundos sutis, colunas */ --nf-line: #DDE1E6; /* divisórias, bordas */ --nf-muted: #5B6472; /* texto secundário */ /* ----- escala neutra ----- */ --nf-50: #F5F6F8; --nf-100: #ECEEF2; --nf-200: #DDE1E6; --nf-300: #BFC5CE; --nf-400: #949BA6; --nf-500: #5B6472; --nf-600: #414956; --nf-700: #2A313B; --nf-900: #12161B; /* ----- moldura escura ----- Barra superior, face de marca do login e selo da guia são escuros nos DOIS modos. Não dá para usar --nf-ink neles: a tinta inverte entre claro e escuro, e o painel ficaria fundo claro com texto claro. Estas duas não invertem nunca. */ --nf-shell: #12161B; --nf-shell-ink: #F4F5F7; --nf-shell-muted: #B6BCC6; /* Cor do "flow" do wordmark sobre a barra. Com barra escura é o acento claro; com barra colorida vira branco translúcido (ver bloco BARRA SUPERIOR no fim do arquivo). */ --nf-shell-accent: var(--nf-accent-on-dark); /* ----- selo / fé pública (não muda entre skins) ----- */ --nf-gold: #C28B2C; --nf-gold-soft: #F6ECD6; /* ----- acento: padrão indigo ----- */ --nf-accent: #5246E6; --nf-accent-soft: #ECEBFB; --nf-accent-line: #C9C5F6; /* Versão do acento para uso SOBRE a barra escura, que é escura em todas as skins: o acento do modo claro não tem contraste suficiente ali. */ --nf-accent-on-dark: #8A80FF; /* ----- semânticos ----- */ --nf-ok: #2F9E6B; /* sucesso, concluído */ --nf-warn: #D9952A; /* aviso, prazo */ --nf-err: #D4503E; /* erro, vencido */ /* ----- tipografia ----- Tudo fonte de SISTEMA: nada é baixado de CDN (o do Google Fonts saiu do App.razor). A família é escolhida pelo usuário via data-fonte; o padrão abaixo é Verdana. Cada pilha traz alternativas de macOS e Linux, porque o cartório pode ter máquina fora do Windows e o nome da fonte não existe lá. ARMADILHA (vale para Verdana, Tahoma e Arial): essas fontes têm só DOIS pesos reais, 400 e 700. Qualquer peso a partir de 500 cai no bold de 700 — 600 e 800 renderizam idênticos. Não adianta usar peso intermediário para criar hierarquia; use tamanho, cor ou caixa alta. Verdana é LARGA: no mesmo corpo ocupa mais espaço horizontal que Segoe UI ou Tahoma. Se uma tabela apertar, o caminho é o tamanho "Compacto", não reduzir fonte no CSS. */ --nf-font-display: Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif; /* títulos */ --nf-font-sans: Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif; /* UI, corpo */ --nf-font-mono: Consolas, "Cascadia Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace; /* protocolo, selo, CPF */ /* ----- forma & elevação ----- */ --nf-radius: 16px; --nf-radius-sm: 10px; --nf-radius-xs: 8px; --nf-shadow: 0 1px 2px rgba(18,22,27,.05), 0 6px 16px rgba(18,22,27,.06); } /* =========================================================================== FAMÍLIA TIPOGRÁFICA Só troca as duas variáveis; quem as consome (app.css e o bloco do MudBlazor logo abaixo) não precisa saber que existe escolha de fonte. =========================================================================== */ [data-fonte="segoeui"] { --nf-font-display: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; --nf-font-sans: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; } [data-fonte="sistema"] { --nf-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --nf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [data-fonte="tahoma"] { --nf-font-display: Tahoma, Verdana, "DejaVu Sans", system-ui, sans-serif; --nf-font-sans: Tahoma, Verdana, "DejaVu Sans", system-ui, sans-serif; } [data-fonte="verdana"] { --nf-font-display: Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif; --nf-font-sans: Verdana, Geneva, "DejaVu Sans", system-ui, sans-serif; } [data-fonte="arial"] { --nf-font-display: Arial, Helvetica, "Liberation Sans", system-ui, sans-serif; --nf-font-sans: Arial, Helvetica, "Liberation Sans", system-ui, sans-serif; } [data-fonte="calibri"] { /* Carlito é a métrica-compatível livre do Calibri, presente em muitas distros Linux. */ --nf-font-display: Calibri, Carlito, "Segoe UI", system-ui, sans-serif; --nf-font-sans: Calibri, Carlito, "Segoe UI", system-ui, sans-serif; } [data-fonte="georgia"] { --nf-font-display: Georgia, "Times New Roman", "Liberation Serif", serif; --nf-font-sans: Georgia, "Times New Roman", "Liberation Serif", serif; } /* --------------------------------------------------------------------------- MudBlazor segue a família escolhida. Por que aqui e não no MudTheme (C#): o tema carrega a família como string[], então uma família configurável exigiria um MudTheme por combinação — 5 cores x 2 barras x 7 fontes. Redirecionando as variáveis de tipografia do MudBlazor para as nossas, a fonte deixa de ser dimensão do tema e continuam bastando 10 temas. Os nomes abaixo foram conferidos no CSS gerado pelo MudBlazor em execução, não presumidos. Se um upgrade renomeá-los, o sintoma é a interface voltar à fonte do tema C# ignorando a escolha do usuário — é aqui que se olha. O !important NÃO é preguiça: o MudThemeProvider injeta um