/* * Tokens visuais do E-Store (b2b-v2-site), extraídos de src/styles.css. * Fonte da verdade: os valores aqui devem espelhar 1:1 as variáveis do E-Store. * Se o E-Store atualizar sua paleta/radius, atualize este arquivo manualmente * — e o ../DESIGN.md junto, que é a referência para humanos dos mesmos valores. * * Escopo (mudou na sessão 96): estes tokens são a identidade visual do * apps-proxy INTEIRO, não só do Shadow DOM de sdk-ui/. Não existe mais uma * segunda identidade ("Pro-Enterprise Dark") no resto do portal — ela está * descontinuada. Ver ../DESIGN.md. * * O seletor :host abaixo continua servindo os custom elements de sdk-ui/ * (ver base-element.js). Telas fora do Shadow DOM (public/) usam os mesmos * valores; a migração das ~430 referências ao vocabulário antigo em * public/styles.css, public/index.html, public/app.js e public/suporte.html * é incremental — cada arquivo converge quando for tocado (ver ../DESIGN.md, * seção "Como isso vive no apps-proxy", que tem o mapa de tradução). */ /* Dois seletores, um arquivo, zero duplicação de valor: - `:root` casa no documento (telas de public/ — light DOM); - `:host` casa no shadow host (custom elements de sdk-ui/). Cada contexto ativa exatamente um: `:host` não casa nada fora de um shadow tree, e `:root` não casa nada dentro de um. Duplicar os valores em dois arquivos seria a alternativa — e a primeira divergência entre eles passaria despercebida. */ :root, :host { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); /* Família da barra lateral. NÃO usa background/border genéricos: no claro ela é levemente mais clara que o fundo (0.985 contra 1) e no escuro é mais clara (0.205 contra 0.145) — inverter isso quebra a hierarquia. Faltava aqui até a sessão 96, e como `var()` de token inexistente resolve para vazio, a lateral do painel de chamados nascia com fundo transparente e item ativo sem destaque, sem erro nenhum no console. */ --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); /* Série de gráficos do E-Store. Nada consome ainda; ficam aqui para que `DESIGN.md` e este arquivo não divirjam, e para que o primeiro gráfico não invente paleta própria. */ --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --ring: oklch(0.708 0 0); } /* Tema escuro — opt-in, nunca o padrão (ver ../DESIGN.md): - `.dark` no , padrão do E-Store (`@custom-variant dark`); - `[data-theme='dark']` em qualquer elemento, que tematiza a subárvore; - `:host([data-theme='dark'])` no próprio custom element, ex. . Os três têm a mesma especificidade do bloco claro acima e vêm depois no arquivo — por isso ganham. Não reordenar. */ .dark, [data-theme='dark'], :host([data-theme='dark']) { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); /* Lateral no escuro é MAIS CLARA que o fundo (0.205 contra 0.145) — o inverso do tema claro. E `--sidebar-primary` aqui é azul, não neutro: é o único ponto do sistema onde o E-Store abandona a escala neutra. */ --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --ring: oklch(0.556 0 0); } /* Escala de radius derivada, igual ao @theme inline do E-Store */ :root, :host { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); /* Tamanho de ícone. O DESIGN.md fixa 16px como o tamanho de interface; o de badge acompanha o texto menor. Ficam aqui, e não no componente, porque o ícone herda tamanho por token igual a qualquer outro primitivo. Ver docs/specs/ICONES.md §6. */ --icon-size-default: 16px; --icon-size-badge: 12px; /* Estado vazio é ILUSTRAÇÃO, não interface: 1.75rem espelha o `font-size` que o emoji tinha em `.zr-empty-icone`, para a troca não encolher a tela. */ --icon-size-vazio: 1.75rem; } /* Semântica auxiliar (verde/amarelo/vermelho/azul) usada por alert/status, espelhando as cores literais que o alert.variants.ts do ZardUI usa (fora da escala oklch neutra, são cores Tailwind fixas: zinc/blue/green/yellow/red). */ :root, :host { --info: #3b82f6; --info-foreground: #ffffff; --success: #16a34a; --success-foreground: #ffffff; --warning: #ca8a04; --warning-foreground: #ffffff; --info-bg-soft: #eff6ff; --success-bg-soft: #f0fdf4; --warning-bg-soft: #fefce8; --error-bg-soft: #fef2f2; /* `*-strong`: cor de TEXTO sobre o `*-bg-soft` correspondente. Existe porque a cor base (#3b82f6 sobre #eff6ff ≈ 3:1) não alcança o contraste AA para texto pequeno — e badge de situação é 12px semibold. Escala Tailwind 700 sobre 50. Alert usa 14px em área grande e continua podendo usar a cor base (ver components.css, .zr-alert--*). */ --info-strong: #1d4ed8; --success-strong: #15803d; --warning-strong: #a16207; --error-strong: #b91c1c; } /* Tema escuro da semântica auxiliar. Sem este bloco, `--info-bg-soft: #eff6ff` viraria um retângulo branco no tema escuro — os `*-bg-soft` eram declarados só no claro. Invertido: fundo Tailwind 950, texto Tailwind 300. */ .dark, [data-theme='dark'], :host([data-theme='dark']) { --info-bg-soft: #172554; --success-bg-soft: #052e16; --warning-bg-soft: #422006; --error-bg-soft: #450a0a; --info-strong: #93c5fd; --success-strong: #86efac; --warning-strong: #fde047; --error-strong: #fca5a5; }