/* ========================================================================== SGI PRO — Design Tokens (F2) Camada de design própria sobre o Bootstrap 5. Tudo aqui é CSS custom property (--sgsi-*). Os tokens MAPEIAM/ESTENDEM as variáveis --bs-* do Bootstrap para que componentes Bootstrap herdem a identidade SGI sem nenhuma lib de componentes adicional. Paleta banking-grade: sóbria, alto contraste (WCAG 2.1 AA), navy/aço como primária, verde/âmbar/vermelho semânticos calibrados para contraste >= 4.5:1 sobre as superfícies de cada tema. Tema: [data-bs-theme="light"] (default) e [data-bs-theme="dark"]. ========================================================================== */ /* -------------------------------------------------------------------------- BREAKPOINTS CANÔNICOS (dívida técnica #49) O sistema tem DOIS breakpoints, e apenas dois. TODO @media novo DEVE usar um destes valores, sempre em PIXELS (nunca rem — CSS var() não funciona dentro da condição de @media, então a padronização é por convenção): • mobile : max-width: 640px (telefone retrato) • tablet : max-width: 768px (tablet retrato / desktop estreito) As variáveis abaixo servem como DOCUMENTAÇÃO e para JS (matchMedia); não são consumíveis dentro de @media pela limitação da própria CSS. -------------------------------------------------------------------------- */ :root { /* ── TOKENS DE LAYOUT DE TABELA E MAPA (03/09) ── Definidos AQUI, e não em sgsi-componentes.css, porque a catraca DesignSystemTokensGuardrailTests exige que todo var(--sgsi-*) referencie um token DEFINIDO nesta folha: token-fantasma quebra o dark mode em silêncio. Os três nasceram em sgsi-componentes.css e a catraca os pegou — ela fez o trabalho dela. `--sgsi-th-sticky-top` é o deslocamento do sticky. O valor BASE é 0: sticky dentro de contêiner de rolagem NÃO pode compensar a topbar (o cabeçalho afundaria 56px sobre a primeira linha, que é o defeito medido em 03/09). Quem sobe para a altura da topbar é o :root sob media query, e qualquer wrapper de rolagem zera de novo para a sua subárvore. */ --sgsi-th-sticky-top: 0px; --sgsi-th-sticky-top-grid: 0px; /* Lado da célula do mapa de calor. `aspect-ratio` é inerte em caixa de tabela, então o quadrado vem desta medida casada com o max-width da tabela. */ --sgsi-mapa-lado: 4rem; --sgsi-breakpoint-mobile: 640px; --sgsi-breakpoint-tablet: 768px; } :root { /* ---- Tipografia ---- */ --sgsi-font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --sgsi-font-mono: "Cascadia Code", "SF Mono", "Consolas", "Liberation Mono", monospace; --sgsi-font-size-root: 16px; --sgsi-font-size-xs: 0.75rem; --sgsi-font-size-sm: 0.875rem; --sgsi-font-size-md: 1rem; --sgsi-font-size-lg: 1.125rem; --sgsi-font-size-xl: 1.375rem; --sgsi-font-size-2xl: 1.75rem; --sgsi-font-weight-normal: 400; --sgsi-font-weight-medium: 500; --sgsi-font-weight-semibold: 600; --sgsi-font-weight-bold: 700; --sgsi-line-height: 1.5; --sgsi-line-height-tight: 1.25; --sgsi-letter-spacing-caps: 0.04em; /* ---- Espaçamento (escala 4px) ---- */ --sgsi-space-0: 0; --sgsi-space-1: 0.25rem; --sgsi-space-2: 0.5rem; --sgsi-space-3: 0.75rem; --sgsi-space-4: 1rem; --sgsi-space-5: 1.5rem; --sgsi-space-6: 2rem; /* Piso da trilha da grade de seções (.sgsi-grade). Token, e não literal solto no componente, porque a catraca de tokens exige que todo `var(--sgsi-*)` referencie algo DEFINIDO aqui — e ela está certa: token-fantasma some no dark mode sem avisar. Os modificadores .sgsi-grade--estreita/--larga sobrescrevem no escopo do elemento. */ --sgsi-grade-min: 20rem; --sgsi-space-7: 3rem; --sgsi-space-8: 4rem; /* ---- Alias de espaçamento (dívida técnica #27) ---- Convenção para o CSS page-level: em vez de cravar rem soltos (0.35rem, 0.4rem…) num .razor.css, prefira os --sgsi-space-* da escala acima. Mantém o espaçamento das páginas coeso e ajustável num só ponto. Os poucos valores one-off legados que NÃO batem na escala foram deixados como estão de propósito (migrá-los mudaria o visual sem ganho real). DOIS ALIASES MENTIAM SOBRE O PRODUTO, e o custo era o próximo desenvolvedor: · `--sgsi-page-gap` era declaração MORTA — zero `var(--sgsi-page-gap)` em todo o src/. Quem espaça as seções é `.sgsi-pagina__corpo { gap: var(--sgsi-space-5) }`, em sgsi-componentes.css, cravado. Um alias sem consumidor não padroniza nada: ele só faz alguém acreditar que existe um ponto único de ajuste que não existe. Saiu. Se um dia o gap virar token de verdade, ele nasce JUNTO do consumidor. · `--sgsi-card-padding` dizia 1rem e o cartão real usa 1.5rem. O valor que manda é o do PRÓPRIO componente (`.sgsi-card { --sgsi-card-padding: var(--sgsi-space-5) }`), que o modificador `--compacto` e o toggle global de densidade redefinem — este :root nunca governou cartão nenhum, só documentava um número errado, e quem desenhasse contra ele erraria por 50%. Hoje todo `.sgsi-card__corpo` do produto vive sob um `.sgsi-card` (conferido nos call-sites), então este :root é só a rede: fica declarado — para que um `.sgsi-card__corpo` solto não caia em padding zero — e agora com o MESMO valor que a tela mostra. */ --sgsi-card-padding: var(--sgsi-space-5); /* 1.5rem — espelha .sgsi-card; o valor que manda é o do componente */ /* Os DOIS tokens do cabeçalho nasceram (30/08, densidade do cartão) direto em sgsi-componentes.css e nunca chegaram aqui — e `.sgsi-card__cab` escreve `padding: var(--sgsi-card-padding-cab-y) var(--sgsi-card-padding-cab-x)`. Um par de custom properties sem definição em :root faz o SHORTHAND INTEIRO virar inválido: um `.sgsi-card__cab` que caia fora de um `.sgsi-card` (slot reaproveitado, cabeçalho renderizado solto) fica com padding ZERO, não com o valor de fábrica. Mesma razão do `--sgsi-card-padding` acima — a rede — e mesmos valores do componente, então nada muda no que a tela mostra hoje. Quem manda continua sendo `.sgsi-card`, o modificador `--compacto` e o toggle global de densidade, que os redefinem no próprio escopo. */ --sgsi-card-padding-cab-y: var(--sgsi-space-4); /* 1rem — espelha .sgsi-card */ --sgsi-card-padding-cab-x: var(--sgsi-space-5); /* 1.5rem — espelha .sgsi-card */ /* ---- Largura SEMÂNTICA de campo (revisão visual 01/09, §2.3 e §2.4) ------------------ O SEGUNDO EIXO DE LARGURA. O primeiro eixo — a coluna da grade (.sgsi-form-grade, .sgsi-filtros, .sgsi-grade) — decide quanto ESPAÇO o campo ocupa no layout. Ele não sabe, e não pode saber, quanto o usuário vai ESCREVER ali dentro: a mesma coluna hospeda um CNPJ e uma descrição de risco. Sem um eixo que fale de SIGNIFICADO, o controle estica até o fim da coluna e a tela mente — largura é a dica visual de quanto se espera que a pessoa digite, e 547 campos em 178 arquivos davam a mesma dica para dados de tamanho conhecido e para texto livre. A revisão mediu o caso extremo: 156 campos de data com MEDIANA de 384px, 130 deles em 250px ou mais, para um dado que nunca passa de "dd/mm/aaaa". São MAX-widths, nunca widths: o campo continua encolhendo com a coluna (o eixo semântico não pode reintroduzir o piso rígido que a §2.1b acabou de tirar de 17 grades). O padrão `--sgsi-campo-largura: 100%` deixa TUDO como está hoje — a tela opta pelo recorte, ninguém muda sem pedir. Os cinco degraus vêm do conteúdo, não do gosto: código cabe um identificador curto de catálogo; data cabe "dd/mm/aaaa" mais o ícone do seletor nativo; valor cabe um monetário com separador de milhar; texto curto é nome/título de uma linha; texto longo é o padrão de hoje (nada muda). */ --sgsi-campo-largura: 100%; /* teto padrão do controle = neutro */ --sgsi-campo-largura-codigo: 9rem; /* "A.5.1", "RSK-0042", CEP, sigla */ --sgsi-campo-largura-data: 11rem; /* dd/mm/aaaa + ícone do date picker nativo */ --sgsi-campo-largura-valor: 12rem; /* numérico/monetário com milhar e centavos */ --sgsi-campo-largura-texto-curto: 20rem; /* nome, título, e-mail — uma linha */ --sgsi-campo-largura-texto-longo: 100%; /* descrição, justificativa — o de hoje */ /* ---- Célula truncada (revisão visual 01/09, §2.6) ----------------------------------- Teto de largura e de LINHAS de uma célula de tabela. Sem eles a altura da linha vai de 41px a 169px na MESMA tabela (medido em 98 páginas): uma célula com texto longo estica a linha em quatro vezes, a grade perde o ritmo e a leitura em diagonal — que é como um consultor varre uma tabela — deixa de funcionar. `--linhas` é o teto EM LINHAS DE TEXTO: o conteúdo para em `--sgsi-celula-linhas` linhas, e por isso a linha da tabela vira previsível em vez de depender do dado. NÃO é teto em PIXELS — `--sgsi-line-height` é sem unidade, então a altura real é `linhas × entrelinha × font-size` e o font-size segue herdado do contexto da célula. A primeira redação afirmava a conta em pixels e estava errada (corrigido em 02/09); ver a nota longa no bloco CELULA TRUNCADA de sgsi-componentes.css. O produto já provou o mecanismo uma vez, em particular, na coluna "Último erro" do Outbox (`.sgsi-outbox-erro`, 30/08) — e é justamente ela que prova que a conta em pixels não fecha, porque define um font-size próprio. Aqui o mecanismo passa a morar num lugar só, que é a diferença entre um conserto e uma regra. */ --sgsi-celula-largura: 24rem; --sgsi-celula-linhas: 3; /* ---- Raios ---- */ --sgsi-radius-sm: 4px; --sgsi-radius-md: 8px; --sgsi-radius-lg: 12px; --sgsi-radius-pill: 999px; /* ---- Layout (shell) ---- */ --sgsi-topbar-height: 3.5rem; /* ── 16rem CORTAVA UM RÓTULO DO MENU EM TODA TELA DO PRODUTO (03/09) ── MEDIDO no app logado a 1600x900, varrendo os 11 cabeçalhos de grupo e os 66 itens: exatamente UM estourava — "Avaliação de desempenho", com clientWidth 159px e scrollWidth 176px, ou seja, 17px a mais do que cabia. A sidebar media 256px. O usuário lê "AVALIAÇÃO DE DESEMPE…" em todas as ~200 páginas, porque a sidebar é do layout. 17.5rem = 280px devolve 24px ao rótulo (159 → 183 contra os 176 necessários), com 7px de folga. Aumentar a MOLDURA, e não encolher a fonte/o espaçamento do rótulo, porque o corte é de largura disponível: mexer na tipografia consertaria este rótulo e deixaria o próximo nome de grupo com o mesmo problema um caractere adiante. O token também governa a GAVETA do mobile (MainLayout.razor.css usa `width: var(--sgsi-sidebar-width)` abaixo de 768px): 280px numa tela de 375px continua gaveta (deixa 95px de backdrop para fechar tocando fora). O trilho recolhido tem token próprio e não muda. A coluna de conteúdo perde 24px e segue abaixo do --sgsi-content-max-width (90rem) em 1600px, então nada mais se desloca. */ --sgsi-sidebar-width: 17.5rem; --sgsi-sidebar-width-collapsed: 4rem; --sgsi-content-max-width: 90rem; --sgsi-z-topbar: 1030; --sgsi-z-sidebar: 1040; --sgsi-z-backdrop: 1035; --sgsi-z-toast: 1080; /* ---- Transições ---- */ --sgsi-transition-fast: 120ms ease; --sgsi-transition: 200ms ease; /* ---- Foco (WCAG 2.1 AA — visível, 3:1 com o entorno) ---- */ --sgsi-focus-ring-width: 3px; --sgsi-focus-ring-offset: 2px; } /* ========================================================================== TEMA CLARO ========================================================================== */ [data-bs-theme="light"], :root { color-scheme: light; /* Marca */ --sgsi-color-brand: #0b3d6b; /* navy SGI */ --sgsi-color-brand-rgb: 11, 61, 107; --sgsi-color-brand-hover: #0a3a64; --sgsi-color-brand-active: #082f51; --sgsi-color-accent: #1565c0; /* aço */ --sgsi-color-on-brand: #ffffff; /* Superfícies */ --sgsi-color-bg: #f4f6f9; /* fundo da app */ --sgsi-color-surface: #ffffff; /* cards/painéis */ --sgsi-color-surface-2: #eef1f6; /* superfície recuada */ /* EIXO DE ELEVAÇÃO — o recuo tem de valer nos DOIS temas (02/09). `surface-2` NÃO serve para isso: no claro ele é mais ESCURO que `surface` (recua, certo), mas no escuro é mais CLARO (#1a2a3a contra #13202e) — e superfície mais clara lê como MAIS elevada. O cartão que FILTRA ficaria mais proeminente que o cartão que MOSTRA, ou seja, o eixo que a regra existe para criar apontaria ao contrário para metade dos usuários. Token próprio, definido pela DIREÇÃO e não pela escala: recuado = na direção do fundo da página. Guardado por catraca que compara LUMINÂNCIA, não nome de variável. */ --sgsi-color-surface-recuada: #eef1f6; --sgsi-color-surface-3: #e3e8f0; --sgsi-color-surface-hover: rgba(11, 61, 107, 0.05); /* hover sutil tingido de marca */ --sgsi-color-bg-subtle: #eef1f5; /* fundo recuado sutil (faixas/cabeçalhos leves) */ --sgsi-color-brand-bg: rgba(11, 61, 107, 0.08); /* realce tingido de marca (seleção/destaque) */ --sgsi-color-sidebar-bg: #0b2740; /* sidebar navy escuro */ --sgsi-color-sidebar-fg: #c7d3e0; --sgsi-color-sidebar-fg-muted: #8da4bd; --sgsi-color-sidebar-active-bg: rgba(255, 255, 255, 0.12); --sgsi-color-sidebar-active-fg: #ffffff; --sgsi-color-topbar-bg: #ffffff; /* Texto */ --sgsi-color-text: #16202c; /* contraste 13.5:1 sobre surface */ --sgsi-color-text-muted: #49586a; /* >= 5:1 sobre surface (AA com folga) */ --sgsi-color-text-subtle: #61707f; /* 4.69:1 sobre --sgsi-color-bg e 5.08:1 sobre surface branca (AA 4.5:1 como texto; o antigo #6b7888 dava 4.16:1 sobre o bg) */ --sgsi-color-text-on-accent: #ffffff; /* Bordas */ --sgsi-color-border: #d4dbe4; --sgsi-color-border-strong: #b3bdca; /* Semânticos (texto/ícone) — todos >= 4.5:1 sobre surface clara */ --sgsi-color-success: #1b7a3e; /* Par legivel de `success`, no molde de `on-brand`. No claro o verde e ESCURO, entao branco em cima da 8,2:1. No escuro ele inverte — ver o bloco do tema. */ --sgsi-color-on-success: #ffffff; --sgsi-color-success-bg: #e6f4ec; --sgsi-color-warning: #8a5a00; --sgsi-color-warning-bg: #fbf0d9; --sgsi-color-danger: #b3261e; --sgsi-color-danger-bg: #fbe9e7; --sgsi-color-info: #0f5e8f; --sgsi-color-info-bg: #e3f0f8; /* Foco */ --sgsi-color-focus-ring: #1565c0; /* Scrim/backdrop (modais, off-canvas) */ --sgsi-color-backdrop: rgba(7, 18, 30, 0.55); /* Sombras */ --sgsi-shadow-xs: 0 1px 2px rgba(16, 32, 48, 0.06); --sgsi-shadow-sm: 0 1px 3px rgba(16, 32, 48, 0.10), 0 1px 2px rgba(16, 32, 48, 0.06); --sgsi-shadow-md: 0 4px 12px rgba(16, 32, 48, 0.12); --sgsi-shadow-lg: 0 12px 32px rgba(16, 32, 48, 0.18); } /* ========================================================================== TEMA ESCURO ========================================================================== */ [data-bs-theme="dark"] { color-scheme: dark; --sgsi-color-brand: #4f9fe0; --sgsi-color-brand-rgb: 79, 159, 224; --sgsi-color-brand-hover: #66adea; --sgsi-color-brand-active: #7cbbf0; --sgsi-color-accent: #5aa9f0; --sgsi-color-on-brand: #07172a; --sgsi-color-bg: #0c1722; --sgsi-color-surface: #13202e; --sgsi-color-surface-2: #1a2a3a; /* Recuado no escuro é ir para o FUNDO DA PÁGINA, não para surface-2 (que é mais claro que surface e inverteria o eixo). Ver a nota no bloco claro. */ --sgsi-color-surface-recuada: #0c1722; --sgsi-color-surface-3: #223445; --sgsi-color-surface-hover: rgba(255, 255, 255, 0.06); /* hover sutil (claro sobre escuro) */ --sgsi-color-bg-subtle: #1a2a3a; /* fundo recuado sutil (= surface-2 no escuro) */ --sgsi-color-brand-bg: rgba(79, 159, 224, 0.14); /* realce tingido de marca (dark) */ --sgsi-color-sidebar-bg: #08131e; --sgsi-color-sidebar-fg: #b7c6d6; --sgsi-color-sidebar-fg-muted: #7d92a8; --sgsi-color-sidebar-active-bg: rgba(79, 159, 224, 0.18); --sgsi-color-sidebar-active-fg: #ffffff; --sgsi-color-topbar-bg: #0f1c29; --sgsi-color-text: #e7eef5; /* >= 13:1 sobre surface escura */ --sgsi-color-text-muted: #a4b4c4; /* >= 4.5:1 */ --sgsi-color-text-subtle: #8395a7; /* 5.87:1 sobre bg e 5.36:1 sobre surface (AA ok — sem ajuste) */ --sgsi-color-text-on-accent: #07172a; --sgsi-color-border: #2a3c4f; --sgsi-color-border-strong: #3a4f64; --sgsi-color-success: #5fd089; /* NO ESCURO O VERDE E CLARO: branco em cima da 1,92:1 — abaixo dos 3:1 que a WCAG pede ate para elemento grafico, e o icone praticamente some. Este azul quase-preto (o mesmo de `on-brand`) da 9,5:1 sobre ele. */ --sgsi-color-on-success: #07172a; --sgsi-color-success-bg: #122a1c; --sgsi-color-warning: #f2c14e; --sgsi-color-warning-bg: #2e2410; --sgsi-color-danger: #f08a82; --sgsi-color-danger-bg: #2e1513; --sgsi-color-info: #6cc0f0; --sgsi-color-info-bg: #0f2433; --sgsi-color-focus-ring: #7cbbf0; --sgsi-color-backdrop: rgba(0, 0, 0, 0.66); --sgsi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40); --sgsi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40); --sgsi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --sgsi-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65); } /* ========================================================================== PONTE PARA O BOOTSTRAP — re-mapeia as --bs-* para os tokens SGI. Garante que botões, cards, forms, alerts etc. do Bootstrap herdem a identidade sem reescrever os componentes. ========================================================================== */ [data-bs-theme="light"], [data-bs-theme="dark"], :root { --bs-body-font-family: var(--sgsi-font-sans); --bs-body-font-size: var(--sgsi-font-size-md); --bs-body-line-height: var(--sgsi-line-height); --bs-body-bg: var(--sgsi-color-bg); --bs-body-color: var(--sgsi-color-text); --bs-secondary-color: var(--sgsi-color-text-muted); --bs-tertiary-color: var(--sgsi-color-text-subtle); --bs-border-color: var(--sgsi-color-border); --bs-border-radius: var(--sgsi-radius-md); --bs-border-radius-sm: var(--sgsi-radius-sm); --bs-border-radius-lg: var(--sgsi-radius-lg); --bs-primary: var(--sgsi-color-brand); --bs-primary-rgb: var(--sgsi-color-brand-rgb); --bs-link-color: var(--sgsi-color-accent); --bs-link-color-rgb: var(--sgsi-color-brand-rgb); --bs-link-hover-color: var(--sgsi-color-brand-hover); --bs-emphasis-color: var(--sgsi-color-text); --bs-secondary-bg: var(--sgsi-color-surface-2); --bs-tertiary-bg: var(--sgsi-color-surface-3); }