--nx-data-reference
--nx-data-reference
Cada padrão, tela e elemento dos sheets, no tema escolhido acima. Copiar HTML traz o markup só com tokens --nx-* (cole num elemento com data-nx-preset/data-nx-theme e carregue tokens/tokens.css + preset); JSX converte o estilo em objeto; Tokens copia os valores resolvidos neste tema. A marca é {{brand}} no código — o campo do cabeçalho preenche.
nexaya-charts.js — biblioteca nativa do DS: SVG puro, sem dependências, só tokens --nx-*. Passe o mouse para o realce e a tooltip; o botão no canto reexecuta a entrada animada. JS copia a chamada, SVG o desenho estático, JSON os dados, Interativo a versão com realce e movimento.
A galeria oficial do Vega-Lite (192 exemplos, incluindo os mapas IBGE exclusivos) renderizada com o tema escolhido acima — o mesmo config serve para Vega-Lite, Altair (Python) e qualquer painel que use Vega. Copiar spec + tema dá o JSON pronto; Altair dá o código Python; Editor ↗ abre no editor do Vega. Dados via CDN (vega-datasets).
As 4 camadas (--nx-brand-* → primitivas → semânticas → componente). Um tema = um preset (arquivo preset-*.css) + modo claro/escuro; a lista oficial está em tokens/themes.json. Temas: Pastel Gold · Slate Neon · Mint Paper · Forest Dark · Carbon Lime · Navy Sky · Silver Ash · Ruby Paper. Contraste medido em forense/CONTRASTE-*.md.
/* Nexaya DS — tokens.css (Fase A: Nexaya fiel · Fase B: preset GOV SC)
* Camada 0 (--nx-brand-*) é a única que os presets trocam.
* Camada 1 primitivas (--nx-pr-*) · Camada 2 semânticas (--nx-color-*, --nx-data-*) · Camada 3 componente.
* Temas: [data-nx-theme="light"|"dark"] — Nexaya: creme/ardósia; GOV SC: claro/escuro calibrado do PAA.
* Todos os HEX marcados [A] foram amostrados nas 65 imagens (forense/AMOSTRAS-PIXEL.md). */
@layer nexaya.tokens {
/* Contexto de cor. Um cartão strong/accent redefine --nx-color-text-faint/-muted/-on-surface no próprio style=""
(os filhos herdam); um cartão claro dentro dele restaura a partir de --nx-th-*, que guarda o valor do tema. */
[data-nx-preset], [data-nx-theme] { --nx-th-text-faint: var(--nx-color-text-faint); --nx-th-text-muted: var(--nx-color-text-muted); --nx-th-text-on-surface: var(--nx-color-text-on-surface); }
:root {
/* ===== Camada 0 — marca (default = Nexaya) ===== */
--nx-brand-primary: #FFD85F; /* [A] */
--nx-brand-primary-strong: #E8C24A; /* [E] 600 da rampa */
--nx-brand-primary-soft: #FAF8E9; /* [A] hachura do span Work day */
--nx-brand-ink: #303030; /* [A] */
--nx-brand-neutral: #303030;
--nx-brand-danger: #F0563E; /* fim de semana */
--nx-brand-success: #77AA28; /* [A] match ≥ 90 */
--nx-brand-warning: #F69C37; /* [A] match 80–89 */
--nx-brand-info: #9085AF; /* lavanda Paid For */
--nx-brand-accent-dark: #FDFE00; /* [A] neon do tema ardósia */
--nx-brand-font-display: "Outfit", "Urbanist", "Lexend", system-ui, sans-serif;
--nx-brand-font-body: "Outfit", "DM Sans", system-ui, sans-serif;
/* ===== Camada 1 — primitivas ===== */
--nx-pr-white: #FFFFFF;
--nx-pr-cream-25: #FEFDF7; /* folha da tabela [A] */
--nx-pr-cream-50: #FCFCF9;
--nx-pr-cream-100: #F6F6F4; /* pasta [A] */
--nx-pr-cream-150: #EFEFEC; /* input */
--nx-pr-neutral-100: #EEEEEE; /* [A] célula, Absent */
--nx-pr-neutral-150: #E5E5E5; /* [A] hachura base */
--nx-pr-neutral-200: #DADADA; /* borda pílula de hora, secundário */
--nx-pr-neutral-300: #C9C9C9; /* ticks, checkbox */
--nx-pr-neutral-400: #B6B6B6; /* [A] pílula cinza, terra do mapa #B7B7B7 */
--nx-pr-neutral-500: #9A9A9A; /* eixo, data */
--nx-pr-neutral-550: #898989; /* [A] deck, terra com dado */
--nx-pr-neutral-600: #8A8A8A; /* rótulo */
--nx-pr-neutral-700: #555555; /* nav */
--nx-pr-neutral-800: #4E4E4E; /* [A] círculo em carvão, líder do mapa */
--nx-pr-neutral-900: #303030; /* [A] */
--nx-pr-canvas-tl: #E3E5E6; /* [A] */
--nx-pr-canvas-mid: #EDE8D0;
--nx-pr-canvas-bl: #F3E9C5; /* [A] */
--nx-pr-canvas-glow: #FEE9B2; /* [A] */
--nx-pr-canvas-m-top: #E8E7EA; --nx-pr-canvas-m-mid: #EEEBE0; --nx-pr-canvas-m-bot: #FAF8E9; --nx-pr-canvas-m-glow: #FCECB4; /* [A] mobile */
--nx-pr-outer: #A4ABB6; /* [A] fundo Dribbble */
--nx-pr-slate-canvas-a: #657078; --nx-pr-slate-canvas-b: #B7C0C8; --nx-pr-slate-surface: #D3DAE0; /* calibrados: cartão claro precisa separar do fim do gradiente */ --nx-pr-slate-strong: #2C333E; --nx-pr-slate-hatch: #646C72; --nx-pr-slate-sea: #6E7880; --nx-pr-slate-land: #C7D1D9; --nx-pr-slate-lime: #C8FF6E; /* [A] */
--nx-pr-status-lavender: #E5D7F6; --nx-pr-status-lavender-ink: #5F5580; /* era #9085AF [A]: 2,5:1 → 4,8:1 */
--nx-pr-status-mint: #E8F7C3; --nx-pr-status-mint-ink: #4B7410; /* era #76A21D [A]: 2,7:1 → 4,8:1 */
--nx-pr-status-lime: #EAF7D0; --nx-pr-status-lime-ink: #4E7A0E; /* era #77A629 [A]: 2,6:1 → 4,6:1 */
--nx-pr-status-gray: #EEEEEE; --nx-pr-status-gray-ink: #666666; /* era #888888 [A]: 2,9:1 → 4,9:1 */
--nx-pr-chip-figma: #E3D8EC; --nx-pr-chip-sketch: #EADDBF; --nx-pr-chip-psd: #D0EBE9; --nx-pr-chip-word: #D9E4EE; --nx-pr-chip-ppt: #FDE9E1; --nx-pr-chip-word-ink: var(--nx-brand-ink); --nx-pr-chip-word-letter: #2B5797; --nx-pr-chip-ppt-letter: #B93A16; /* letras W/P: 6,3:1 e 4,8:1 */
--nx-pr-hatch-angle: 45deg; --nx-pr-hatch-step: 6px; --nx-pr-hatch-width: 1.5px;
/* ===== Camada 2 — semânticas (tema claro = creme) ===== */
--nx-color-canvas: radial-gradient(55% 70% at 100% 45%, var(--nx-pr-canvas-glow) 0%, transparent 100%), linear-gradient(160deg, var(--nx-pr-canvas-tl) 0%, var(--nx-pr-canvas-tl) 30%, var(--nx-pr-canvas-mid) 62%, var(--nx-pr-canvas-bl) 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 55%, var(--nx-pr-canvas-m-glow) 0%, transparent 100%), linear-gradient(180deg, var(--nx-pr-canvas-m-top) 0%, var(--nx-pr-canvas-m-mid) 45%, var(--nx-pr-canvas-m-bot) 100%);
--nx-color-outer: var(--nx-pr-outer);
--nx-color-surface: rgba(255,255,255,.70);
--nx-color-surface-opaque: var(--nx-pr-white);
--nx-color-sheet: var(--nx-pr-cream-25);
--nx-color-folder: var(--nx-pr-cream-100);
--nx-color-strong: var(--nx-brand-ink);
--nx-color-on-strong: var(--nx-pr-white);
--nx-color-on-strong-muted: #BDBDBD;
--nx-color-strong-well: var(--nx-pr-neutral-800);
--nx-color-accent: var(--nx-brand-primary);
--nx-color-on-accent: var(--nx-brand-ink);
--nx-color-accent-on-strong: var(--nx-color-accent); /* acento usado como texto sobre o cartão strong (Ruby Paper: rubi escuro não lê sobre carvão → acento claro) */
--nx-color-text: var(--nx-brand-ink);
--nx-color-text-on-surface: var(--nx-brand-ink); /* texto sobre cartão claro (no escuro muda) */
--nx-color-text-muted: #6B6B6B; /* sobre cartão (era #8A8A8A — contraste ↑) */
--nx-color-text-muted-canvas: #5E5E5E; /* rótulos sobre o canvas */
--nx-color-text-faint: #767676; /* era neutral-500 #9A9A9A: 2,8:1 sobre branco → 4,5:1 */
--nx-color-border: var(--nx-pr-neutral-200);
--nx-color-divider: var(--nx-pr-neutral-200); /* sempre 1px dotted */
--nx-color-control: var(--nx-pr-white);
--nx-color-on-control: #303030; --nx-color-on-control-muted: #707070; /* era #8A8A8A: 3,5:1 sobre branco → 5,3:1 */
--nx-color-control-soft: #FBF9EC;
--nx-color-input: var(--nx-pr-cream-150);
--nx-color-cell: var(--nx-pr-neutral-100); --nx-color-on-cell: var(--nx-brand-ink); /* célula de calendário/grade */
--nx-color-selected: var(--nx-brand-primary);
--nx-color-selected-read: var(--nx-pr-white);
--nx-color-weekend: var(--nx-brand-danger);
--nx-color-glass: rgba(255,255,255,.45);
/* placeholder de foto (ProfileCard): degradê no tom do painel, escurecendo para o strong onde o texto branco senta */
--nx-color-photo-a: #C9C6BD; --nx-color-photo-b: #303030;
--nx-data-primary: var(--nx-brand-primary);
--nx-data-reference: var(--nx-brand-ink);
--nx-data-on-reference: var(--nx-color-on-strong); --nx-data-on-reference-muted: var(--nx-color-on-strong-muted); /* texto sobre marca/pílula na cor de referência (Silver Ash: referência branca → tinta escura) */
--nx-data-neutral: var(--nx-pr-neutral-400); --nx-data-on-neutral: var(--nx-brand-ink); /* texto sobre o segmento neutro */
--nx-data-idle: var(--nx-pr-neutral-550);
--nx-data-track: #E9E9E9;
--nx-data-tick: #A3A3A3;
--nx-data-dot-off: var(--nx-pr-neutral-800);
--nx-data-positive: var(--nx-brand-success);
--nx-data-warning: var(--nx-brand-warning);
--nx-data-map-sea: transparent;
--nx-data-map-land: #B7B7B7;
--nx-data-map-data: var(--nx-pr-neutral-550);
--nx-data-map-leader: var(--nx-pr-neutral-800);
--nx-data-map-current: var(--nx-brand-primary);
--nx-data-hatch-bg: var(--nx-pr-neutral-150);
--nx-data-hatch-line: #BDBDBD;
--nx-data-hatch-area-bg: #F8F9F2;
--nx-data-hatch-area-line: #D7D7D7;
--nx-data-hatch-cal-bg: #F2F2EE;
--nx-data-hatch-cal-line: #B5B5B1;
--nx-data-hatch-accent-bg: var(--nx-brand-primary-soft);
--nx-data-hatch-accent-line: #F0D97A;
/* hachura padronizada: linha 1px a 45°, passo 8px, mesma imagem em todos os usos; só o fundo muda */
--nx-hatch-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='%23BDBDBD' stroke-width='1'/%3E%3C/svg%3E");
--nx-hatch-accent-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='%23E2C04A' stroke-width='1'/%3E%3C/svg%3E");
--nx-hatch: var(--nx-hatch-img) 0 0/8px 8px repeat, var(--nx-data-hatch-bg);
--nx-hatch-cal: var(--nx-hatch-img) 0 0/8px 8px repeat, var(--nx-data-hatch-cal-bg);
--nx-hatch-area: var(--nx-hatch-img) 0 0/8px 8px repeat, var(--nx-data-hatch-area-bg);
--nx-hatch-accent: var(--nx-hatch-accent-img) 0 0/8px 8px repeat, var(--nx-data-hatch-accent-bg);
/* hachura carvão .55 sobre a primária (mobile: fundo do PricingCard) */
--nx-hatch-accent-strong-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='%23303030' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
--nx-hatch-accent-strong: var(--nx-hatch-accent-strong-img) 0 0/8px 8px repeat, var(--nx-brand-primary);
--nx-data-hatch-line-strong: #BDBDBD;
--nx-color-text-on-hatch: #6B6B6B;
/* seta do <select> em cápsula (tinta = on-control) */
--nx-chevron-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23303030' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
--nx-shadow-card: 0 8px 30px rgba(0,0,0,.04);
--nx-shadow-control: 0 2px 10px rgba(0,0,0,.05);
--nx-shadow-float: 0 4px 14px rgba(0,0,0,.06);
--nx-shadow-toast: 0 8px 24px rgba(0,0,0,.12);
--nx-shadow-shell: 0 30px 80px rgba(20,25,30,.20);
--nx-shadow-deck: 0 -4px 12px rgba(0,0,0,.15);
/* Tipografia (real 1440 / mobile pt) */
--nx-font-display: var(--nx-brand-font-display);
--nx-font-body: var(--nx-brand-font-body);
--nx-text-title: 55px; --nx-text-kpi: 70px; --nx-text-hero: 38px; --nx-text-center: 36px; --nx-text-price: 60px;
--nx-text-card-title: 22px; --nx-text-body: 16px; --nx-text-label: 14px; --nx-text-tooltip: 14px;
--nx-text-m-h1: 40px; --nx-text-m-kpi: 50px; --nx-text-m-hero: 34px; --nx-text-m-card-title: 20px; --nx-text-m-body: 15px; --nx-text-m-label: 13px;
--nx-weight-light: 300; --nx-weight-regular: 400; --nx-weight-medium: 500;
--nx-tracking-title: -0.02em;
/* Espaço e forma */
--nx-space-1: 4px; --nx-space-2: 8px; --nx-space-3: 12px; --nx-space-4: 16px; --nx-space-6: 24px; --nx-space-7: 28px; --nx-space-8: 32px; --nx-space-10: 40px;
--nx-page-pad: 24px; --nx-grid-gap: 12px; --nx-card-pad: 24px;
--nx-m-margin: 16px; --nx-m-gap: 10px; --nx-m-card-pad: 22px;
--nx-radius-shell: 42px; --nx-radius-card: 28px; --nx-radius-caps: 24px; --nx-radius-cell: 14px; --nx-radius-event: 12px; --nx-radius-input: 14px; --nx-radius-checkbox: 4px; --nx-radius-control: 999px;
--nx-radius-m-card: 28px;
/* ===== Camada 3 — componente ===== */
--nx-card-header-slot: 42px;
--nx-orbit-size: 118px;
--nx-action-circle: 46px;
--nx-action-circle-desktop: 44px;
--nx-nav-height: 50px;
--nx-measure-height: 46px; --nx-measure-height-m: 44px; --nx-measure-gap: 6px;
--nx-status-height: 30px;
--nx-chip-height: 42px;
--nx-row-height: 60px; --nx-row-height-wide: 80px;
--nx-folder-filter-row: 85px; --nx-folder-step-height: calc(var(--nx-folder-filter-row) - 6px); --nx-folder-curve: calc(var(--nx-folder-step-height) * .8); --nx-folder-tab-width: 300px; --nx-folder-inset: 21px; --nx-folder-sheet-offset: 16px;
--nx-cal-cell: 76px; --nx-cal-cell-m: 52px; --nx-cal-gap: 6px;
--nx-donut-r: 64px; --nx-donut-w: 12px; --nx-donut-gap: 4px;
--nx-gauge-r: 100px; --nx-gauge-w: 22px; --nx-gauge-gap: 8px; --nx-gauge-sweep: 220deg;
--nx-ring-r: 84px; --nx-ring-w: 18px;
--nx-tickring-r: 78px; --nx-tickring-w: 12px; --nx-tickring-ticks: 60;
--nx-dot-size: 9px; --nx-dot-gap: 7px;
--nx-lollipop-w: 9px; --nx-lollipop-w-m: 8px;
--nx-deck-inset-1: 12px; --nx-deck-inset-2: 24px; --nx-deck-peek: 10px;
/* Motion */
--nx-motion-fast: 160ms; --nx-motion-base: 240ms; --nx-motion-slow: 480ms; --nx-motion-data: 720ms; --nx-motion-data-long: 960ms;
--nx-stagger: 40ms; --nx-stagger-dense: 12ms;
--nx-ease-standard: cubic-bezier(.2,.8,.2,1); --nx-ease-enter: cubic-bezier(0,0,.2,1); --nx-ease-exit: cubic-bezier(.4,0,1,1); --nx-ease-data: cubic-bezier(.16,1,.3,1);
--nx-ease-spring: linear(0, .008, .03 2.6%, .12 5.6%, .49 12.6%, .82 19.6%, 1.01 27%, 1.06 33%, 1.02 43%, .99 52%, 1);
}
/* ===== Tema escuro do Nexaya = ardósia [A] ===== */
[data-nx-theme="dark"] {
--nx-color-canvas: linear-gradient(180deg, var(--nx-pr-slate-canvas-a) 0%, var(--nx-pr-slate-canvas-b) 100%);
--nx-color-canvas-mobile: var(--nx-color-canvas);
--nx-pr-canvas-m-bot: #8E98A0; /* cor do canvas mobile na base da foto-herói (55%) */
--nx-color-surface: var(--nx-pr-slate-surface);
--nx-color-surface-opaque: var(--nx-pr-white);
--nx-color-sheet: #E6EBEE;
--nx-color-folder: #B9C1C7;
--nx-color-strong: var(--nx-pr-slate-strong);
--nx-color-strong-well: #616B72;
--nx-color-accent: var(--nx-brand-accent-dark);
--nx-color-on-accent: var(--nx-pr-slate-strong);
--nx-color-text: var(--nx-pr-white);
--nx-color-text-on-surface: var(--nx-pr-slate-strong);
--nx-color-text-muted: #454E57; /* 4,7:1 sobre o controle #BEC2C5 (era #4F5860 = 4,0) */
--nx-color-text-faint: #47505A; /* o claro herdava #8A8A8A: 1,6:1 sobre a superfície ardósia */
--nx-color-text-muted-canvas: rgba(255,255,255,.85);
--nx-color-text-on-hatch: #FFFFFF;
--nx-data-tick: #5A636B;
--nx-data-hatch-line-strong: rgba(255,255,255,.8);
--nx-hatch-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='white' stroke-opacity='.8' stroke-width='1'/%3E%3C/svg%3E");
--nx-shadow-card: 0 10px 30px rgba(20,30,40,.16);
--nx-color-control: #BEC2C5;
--nx-color-control-soft: #C9D1D9;
--nx-color-selected: var(--nx-pr-white);
--nx-color-weekend: #5C5E00; /* texto de fim de semana sobre o cartão claro do ardósia; o neon (1,3:1) fica só para marcadores */
--nx-data-primary: var(--nx-brand-accent-dark);
--nx-data-reference: var(--nx-pr-slate-strong);
--nx-data-positive: var(--nx-pr-slate-lime);
--nx-data-map-sea: var(--nx-pr-slate-sea);
--nx-data-map-land: var(--nx-pr-slate-land);
--nx-data-map-data: #A9B3BB;
--nx-data-map-leader: var(--nx-pr-slate-strong);
--nx-data-map-current: var(--nx-brand-accent-dark);
--nx-data-hatch-bg: var(--nx-pr-slate-hatch);
--nx-data-hatch-line: rgba(255,255,255,.8);
--nx-data-hatch-area-bg: #727A7F; --nx-data-hatch-area-line: rgba(255,255,255,.7);
--nx-data-hatch-cal-bg: #727A7F; --nx-data-hatch-cal-line: rgba(255,255,255,.6);
--nx-pr-status-lime: #D7E3BF; --nx-pr-status-lime-ink: #48651B; /* era #7FA23A: 2,2:1 → 5,0:1 */
--nx-pr-chip-word: #526482; --nx-pr-chip-word-ink: #FFFFFF; --nx-pr-chip-word-letter: #FFFFFF; /* era #72859D: branco 3,7:1 → 5,0:1 */
--nx-color-cell: #C9D0D6; --nx-color-on-cell: #2C333E;
--nx-color-photo-a: #8F98A2; --nx-color-photo-b: #2C333E;
--nx-color-divider: #9AA5AE; --nx-color-border: #9AA5AE;
--nx-color-on-control: #2C333E; --nx-color-on-control-muted: #454E57;
--nx-chevron-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232C333E' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); /* 4,7:1 sobre #BEC2C5 */ /* hairline visível sobre o cartão claro do ardósia */
}
}
/* preset-nexaya.css — Fase A. Sobrescreve só a camada 0. Temas: creme (light) / ardósia (dark). */
@layer nexaya.preset {
:root, [data-nx-preset="nexaya"] {
--nx-brand-primary: #FFD85F;
--nx-brand-primary-strong: #E8C24A;
--nx-brand-primary-soft: #FAF8E9;
--nx-brand-ink: #303030;
--nx-brand-neutral: #303030;
--nx-brand-danger: #F0563E;
--nx-brand-success: #77AA28;
--nx-brand-warning: #F69C37;
--nx-brand-info: #9085AF;
--nx-brand-accent-dark: #FDFE00;
--nx-brand-font-display: "Outfit", "Urbanist", "Lexend", system-ui, sans-serif;
--nx-brand-font-body: "Outfit", "DM Sans", system-ui, sans-serif;
--nx-pr-canvas-tl: #E3E5E6; --nx-pr-canvas-mid: #EDE8D0; --nx-pr-canvas-bl: #F3E9C5; --nx-pr-canvas-glow: #FEE9B2;
--nx-pr-canvas-m-top: #E8E7EA; --nx-pr-canvas-m-mid: #EEEBE0; --nx-pr-canvas-m-bot: #FAF8E9; --nx-pr-canvas-m-glow: #FCECB4;
--nx-pr-outer: #A4ABB6;
}
}
/* preset-govsc.css — Fase B (CGE/SC). Mesma arquitetura; troca só a camada 0 + canvas.
* Valores: DESIGN.md (18/08/2026) e tokens.css do DS Lab 0.1 (CGE). Tema escuro = calibração óptica do PAA. */
@layer nexaya.preset {
[data-nx-preset="govsc"] {
--nx-brand-primary: #A1C84D;
--nx-brand-primary-strong: #55701F;
--nx-brand-primary-soft: #E4EFC4;
--nx-brand-ink: #292929;
--nx-brand-neutral: #303032;
--nx-brand-danger: #ED1C24; /* só crítico */
--nx-brand-success: #5FB157;
--nx-brand-warning: #FCEE21;
--nx-brand-info: #4C7FBF;
--nx-brand-accent-dark: #A1C84D; /* o escuro do GOV SC não muda a matiz */
--nx-brand-font-display: "Outfit", "Urbanist", "Lexend", system-ui, sans-serif; /* fonte do sistema; não trocar por preset */
--nx-brand-font-body: "Outfit", "DM Sans", system-ui, sans-serif;
/* canvas GOV SC: fora #AEB5C0 → #96AE84 a 145°, folha #F7F7F5 com deriva #EDF3DC no canto inferior direito */
--nx-pr-outer: #AEB5C0;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #EDF3DC 0%, transparent 100%), linear-gradient(145deg, #F7F7F5 0%, #F7F7F5 60%, #F2F5EA 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #EDF3DC 0%, transparent 100%), linear-gradient(180deg, #F7F7F5 0%, #F4F6EE 100%);
--nx-pr-canvas-m-bot: #F5F7F1;
--nx-color-surface: #FFFFFF;
--nx-color-folder: #ECF1DE;
--nx-color-divider: #EAEAE6;
--nx-color-weekend: #676B65; /* vermelho é só crítico: fim de semana vira cinza */
--nx-data-neutral: #E4E4E0;
--nx-data-progress: #C7DE9A; /* rampa ordinal: #E4E4E0 → #C7DE9A → #A1C84D */
--nx-data-critical: #ED1C24;
--nx-data-critical-text: #C81018;
--nx-data-hatch-accent-bg: #F2F7E5; --nx-data-hatch-accent-line: #C7DE9A;
--nx-pr-status-lime: #E4EFC4; --nx-pr-status-lime-ink: #55701F;
--nx-color-photo-a:#C9D2BE; --nx-color-photo-b:#292929;
}
[data-nx-preset="govsc"][data-nx-theme="dark"], [data-nx-preset="govsc"] [data-nx-theme="dark"] { /* descendente: o quadro escuro dentro da folha govsc */
--nx-color-canvas: linear-gradient(145deg, #161A1C 0%, #1B2418 100%);
--nx-color-canvas-mobile: var(--nx-color-canvas);
--nx-pr-canvas-m-bot: #191F1A;
--nx-color-sheet: #14191A;
--nx-color-surface: #1D2426;
--nx-color-surface-opaque: #232B2C;
--nx-color-folder: #0E1213;
--nx-color-strong: #0E1213;
--nx-color-strong-well: #333C3B;
--nx-color-on-strong: #E9EFE9;
--nx-color-accent: #A1C84D;
--nx-color-on-accent: #0E1213;
--nx-color-text: #E9EFE9;
--nx-color-text-on-surface: #E9EFE9;
--nx-color-text-muted: #98A69F;
--nx-color-text-faint: #93A199;
--nx-color-border: #2A3234; --nx-color-divider: #2A3234;
--nx-color-control: #232B2C; --nx-color-control-soft: #1F2A19; --nx-color-input: #232B2C;
--nx-color-cell: #232B2C; --nx-color-on-cell: #E9EFE9;
--nx-pr-status-gray: #2A3234; --nx-pr-status-gray-ink: #C5CFC8;
--nx-color-on-control: #E9EFE9; --nx-color-on-control-muted: #98A69F;
--nx-chevron-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E9EFE9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
--nx-color-selected: #A1C84D; --nx-color-selected-read: #2C3A1E;
--nx-color-weekend: #98A69F; /* cinza claro sobre o cartão escuro (o claro usa #676B65) */
--nx-data-primary: #A1C84D;
--nx-data-reference: #333C3B;
--nx-data-neutral: #47554A; --nx-data-on-neutral: #E9EFE9; --nx-data-progress: #72A365; --nx-data-positive-strong: #B7DA69;
--nx-data-track: #2A3234; --nx-data-tick: #3A4446; --nx-data-dot-off: #333C3B;
--nx-data-map-sea: #14191A; --nx-data-map-land: #2A3234; --nx-data-map-data: #47554A; --nx-data-map-leader: #72A365; --nx-data-map-current: #A1C84D;
--nx-data-hatch-bg: #232B2C; --nx-data-hatch-line: #3A4446;
--nx-data-hatch-area-bg: #1D2426; --nx-data-hatch-area-line: #2A3234;
--nx-data-hatch-cal-bg: #1D2426; --nx-data-hatch-cal-line: #2A3234;
--nx-data-critical-text: #FF8A8F;
--nx-color-photo-a:#3A4A3A; --nx-color-photo-b:#0E1213;
--nx-shadow-card: 0 16px 38px rgba(0,0,0,.22); --nx-shadow-control: 0 4px 18px rgba(0,0,0,.18); --nx-shadow-shell: 0 28px 84px rgba(0,0,0,.48);
}
}
/* preset-carbono.css — Carbono: PRETO e PRATA (verde só como destaque).
* Construção: cópia da estrutura do tema ardósia ([data-nx-theme="dark"] em tokens.css) com as primárias trocadas —
* ardósia (azulado) → carbono (neutro); neon → verde #A1C84D. Mesmas relações: canvas escuro que degrada para prata
* (como o creme degrada para o amarelo-ovo), cartões prata-claro com texto escuro, "strong" preto com texto claro,
* controles prata, hachura cinza. Fonte: a do sistema (não troca). Vale para os dois quadros (light/dark).
* Contraste medido (WCAG): forense/CONTRASTE-CARBONO.md. */
@layer nexaya.preset {
[data-nx-preset="carbono"], [data-nx-preset="carbono"] [data-nx-theme="light"], [data-nx-preset="carbono"] [data-nx-theme="dark"] {
/* camada 0 */
--nx-brand-primary:#A1C84D; --nx-brand-primary-strong:#55701F; --nx-brand-primary-soft:#D9E8BF; --nx-brand-ink:#0F1012; --nx-brand-neutral:#1F2124;
--nx-brand-danger:#E0555C; --nx-brand-success:#A1C84D; --nx-brand-warning:#FCEE21; --nx-brand-info:#5B7FB0; --nx-brand-accent-dark:#A1C84D;
/* primitivas carbono/prata (equivalentes às slate-*) */
--nx-pr-outer:#6B7077;
--nx-pr-slate-canvas-a:#1F2124; --nx-pr-slate-canvas-b:#8E949C; --nx-pr-slate-surface:#D9DCE1; --nx-pr-slate-strong:#0F1012;
--nx-pr-slate-hatch:#646A72; --nx-pr-slate-sea:#6E7278; --nx-pr-slate-land:#C7CCD3; --nx-pr-slate-lime:#C5E28A;
/* canvas: preto no topo/esquerda degradando para prata na base/direita + brilho prata no canto inferior direito */
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, rgba(214,218,224,.55) 0%, rgba(214,218,224,0) 100%), linear-gradient(160deg,#1F2124 0%,#2A2D31 40%,#5A5F66 75%,#8E949C 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 100%, rgba(214,218,224,.5) 0%, rgba(214,218,224,0) 100%), linear-gradient(180deg,#1F2124 0%,#2A2D31 45%,#8E949C 100%);
--nx-pr-canvas-m-bot: #3C3F44;
/* superfícies */
--nx-color-surface:#D9DCE1; --nx-color-surface-opaque:#F2F3F5; --nx-color-sheet:#E6E8EB; --nx-color-folder:#B9BDC3;
--nx-color-strong:#0F1012; --nx-color-strong-well:#3A3D42; --nx-color-on-strong:#F2F2F2; --nx-color-on-strong-muted:#B5B8BD;
--nx-color-accent:#A1C84D; --nx-color-on-accent:#0F1012;
/* texto */
--nx-color-text:#FFFFFF; --nx-color-text-on-surface:#1C1C1D; --nx-color-text-muted:#4A4F57; --nx-color-text-muted-canvas:#D9DCE1; --nx-color-text-faint:#4C5159; --nx-color-text-on-hatch:#FFFFFF;
--nx-color-border:#B4B8BE; --nx-color-divider:#B4B8BE;
--nx-color-control:#C3C7CC; --nx-color-on-control:#1C1C1D; --nx-color-on-control-muted:#4A4F57; --nx-color-control-soft:#CDD1D6; --nx-color-input:#E6E8EB;
--nx-color-selected:#F2F3F5; --nx-color-selected-read:#F2F3F5; --nx-color-weekend:#486318; --nx-color-glass:rgba(217,220,225,.55);
--nx-color-photo-a:#8E949C; --nx-color-photo-b:#0F1012;
/* dado */
--nx-data-primary:#A1C84D; --nx-data-reference:#0F1012; --nx-data-neutral:#B4B8BE; --nx-data-progress:#C5E28A; --nx-data-positive:#C5E28A; --nx-data-idle:#C9CDD3;
--nx-data-track:#C9CDD3; --nx-data-tick:#5A6068; --nx-data-dot-off:#3A3D42;
--nx-data-map-sea:#6E7278; --nx-data-map-land:#C7CCD3; --nx-data-map-data:#A9AEB5; --nx-data-map-leader:#0F1012; --nx-data-map-current:#A1C84D;
--nx-data-hatch-bg:#646A72; --nx-data-hatch-line:rgba(255,255,255,.8); --nx-data-hatch-line-strong:rgba(255,255,255,.8);
--nx-data-hatch-area-bg:#72777F; --nx-data-hatch-area-line:rgba(255,255,255,.7);
--nx-data-hatch-cal-bg:#72777F; --nx-data-hatch-cal-line:rgba(255,255,255,.6); --nx-data-hatch-accent-bg:#D9E8BF;
--nx-hatch-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='white' stroke-opacity='.8' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#D9E8BF; --nx-pr-status-lime-ink:#486318; --nx-pr-status-gray:#C9CDD3; --nx-pr-status-gray-ink:#3E434A;
--nx-pr-chip-word:#555C68; --nx-pr-chip-word-ink:#FFFFFF;
--nx-color-cell:#C9CDD3; --nx-color-on-cell:#1C1C1D;
/* sombras suaves: separação por luminância; nada de halo forte sobre a prata */
--nx-shadow-card:0 8px 24px rgba(0,0,0,.14); --nx-shadow-control:0 2px 10px rgba(0,0,0,.10); --nx-shadow-shell:0 30px 80px rgba(0,0,0,.35);
}
}
/* preset-carbono.css — Azul: tons de azul (marinho → azul-aço), destaque azul-céu.
* Construção: cópia da estrutura do tema ardósia ([data-nx-theme="dark"] em tokens.css) com as primárias trocadas —
* carbono (neutro) → azul (marinho/aço); verde → azul-céu #5B9BFF. Mesmas relações: canvas escuro que degrada para prata
* (como o creme degrada para o amarelo-ovo), cartões prata-claro com texto escuro, "strong" preto com texto claro,
* controles prata, hachura cinza. Fonte: a do sistema (não troca). Vale para os dois quadros (light/dark).
* Contraste medido (WCAG): forense/CONTRASTE-AZUL.md. */
@layer nexaya.preset {
[data-nx-preset="azul"], [data-nx-preset="azul"] [data-nx-theme="light"], [data-nx-preset="azul"] [data-nx-theme="dark"] {
/* camada 0 */
--nx-brand-primary:#5B9BFF; --nx-brand-primary-strong:#1F4FA3; --nx-brand-primary-soft:#D6E4FA; --nx-brand-ink:#0F1626; --nx-brand-neutral:#141C2B;
--nx-brand-danger:#E0555C; --nx-brand-success:#6CC38A; --nx-brand-warning:#FCEE21; --nx-brand-info:#5B9BFF; --nx-brand-accent-dark:#5B9BFF;
/* primitivas carbono/prata (equivalentes às slate-*) */
--nx-pr-outer:#5F6F86;
--nx-pr-slate-canvas-a:#141C2B; --nx-pr-slate-canvas-b:#7C93AD; --nx-pr-slate-surface:#D6DEE8; --nx-pr-slate-strong:#0F1626;
--nx-pr-slate-hatch:#5D6F86; --nx-pr-slate-sea:#5C6E85; --nx-pr-slate-land:#C4CFDC; --nx-pr-slate-lime:#9CC3FF;
/* canvas: preto no topo/esquerda degradando para prata na base/direita + brilho prata no canto inferior direito */
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, rgba(200,214,232,.55) 0%, rgba(200,214,232,0) 100%), linear-gradient(160deg,#141C2B 0%,#1C2739 40%,#4A5F7C 75%,#7C93AD 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 100%, rgba(200,214,232,.5) 0%, rgba(200,214,232,0) 100%), linear-gradient(180deg,#141C2B 0%,#1C2739 45%,#7C93AD 100%);
--nx-pr-canvas-m-bot: #2D3B4E;
/* superfícies */
--nx-color-surface:#D6DEE8; --nx-color-surface-opaque:#F1F5FA; --nx-color-sheet:#E4EAF2; --nx-color-folder:#B3C0D1;
--nx-color-strong:#0F1626; --nx-color-strong-well:#33415A; --nx-color-on-strong:#F2F5FA; --nx-color-on-strong-muted:#B3BFD0;
--nx-color-accent:#5B9BFF; --nx-color-on-accent:#0F1626;
/* texto */
--nx-color-text:#FFFFFF; --nx-color-text-on-surface:#141C2B; --nx-color-text-muted:#44516A; --nx-color-text-muted-canvas:#D6DEE8; --nx-color-text-faint:#455370; --nx-color-text-on-hatch:#FFFFFF;
--nx-color-border:#AEBBCC; --nx-color-divider:#AEBBCC;
--nx-color-control:#BFCBDA; --nx-color-on-control:#141C2B; --nx-color-on-control-muted:#44516A; --nx-color-control-soft:#CBD6E3; --nx-color-input:#E4EAF2;
--nx-color-selected:#F1F5FA; --nx-color-selected-read:#F1F5FA; --nx-color-weekend:#1F4FA3; --nx-color-glass:rgba(214,222,232,.55);
--nx-color-photo-a:#7C93AD; --nx-color-photo-b:#0F1626;
/* dado */
--nx-data-primary:#5B9BFF; --nx-data-reference:#0F1626; --nx-data-neutral:#AEBBCC; --nx-data-progress:#9CC3FF; --nx-data-positive:#9CC3FF; --nx-data-idle:#C4CFDC;
--nx-data-track:#C4CFDC; --nx-data-tick:#57657F; --nx-data-dot-off:#33415A;
--nx-data-map-sea:#5C6E85; --nx-data-map-land:#C4CFDC; --nx-data-map-data:#9FB0C4; --nx-data-map-leader:#0F1626; --nx-data-map-current:#5B9BFF;
--nx-data-hatch-bg:#5D6F86; --nx-data-hatch-line:rgba(255,255,255,.8); --nx-data-hatch-line-strong:rgba(255,255,255,.8);
--nx-data-hatch-area-bg:#62748C; --nx-data-hatch-area-line:rgba(255,255,255,.7);
--nx-data-hatch-cal-bg:#62748C; --nx-data-hatch-cal-line:rgba(255,255,255,.6); --nx-data-hatch-accent-bg:#D6E4FA;
--nx-hatch-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='white' stroke-opacity='.8' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#D6E4FA; --nx-pr-status-lime-ink:#1F4FA3; --nx-pr-status-gray:#C4CFDC; --nx-pr-status-gray-ink:#33415A;
--nx-pr-chip-word:#476080; --nx-pr-chip-word-ink:#FFFFFF;
--nx-color-cell:#C4CFDC; --nx-color-on-cell:#141C2B;
/* sombras suaves: separação por luminância; nada de halo forte sobre a prata */
--nx-shadow-card:0 8px 24px rgba(0,0,0,.14); --nx-shadow-control:0 2px 10px rgba(0,0,0,.10); --nx-shadow-shell:0 30px 80px rgba(0,0,0,.35);
}
}
/* preset-prata.css — Silver Ash: grafite com primária PRATA (saturação baixa). Prova de que o sistema não depende de uma primária saturada.
* Construção: cartões grafite (escuros) sobre canvas grafite → a prata clara é a cor de dado e de destaque; a referência é branca
* (traço fino/tracejado), os neutros ficam entre o cartão e a prata por luminosidade. Fonte: a do sistema. Vale para os dois quadros.
* Regras que este preset prova: on-accent escuro sobre prata; paleta categórica por luminosidade (prata → cinzas → branco), nunca por matiz. */
@layer nexaya.preset {
[data-nx-preset="prata"], [data-nx-preset="prata"] [data-nx-theme="light"], [data-nx-preset="prata"] [data-nx-theme="dark"] {
/* camada 0 */
--nx-brand-primary:#B4BCC5; --nx-brand-primary-strong:#8A939D; --nx-brand-primary-soft:#3A4048; --nx-brand-ink:#0F1114; --nx-brand-neutral:#1A1D21;
--nx-brand-danger:#E0555C; --nx-brand-success:#6CC38A; --nx-brand-warning:#F2C94C; --nx-brand-info:#7FA9E0; --nx-brand-accent-dark:#B4BCC5;
/* primitivas grafite/prata (equivalentes às slate-*) */
--nx-pr-outer:#4A5058;
--nx-pr-slate-canvas-a:#15181B; --nx-pr-slate-canvas-b:#3A4048; --nx-pr-slate-surface:#23272C; --nx-pr-slate-strong:#0F1114;
--nx-pr-slate-hatch:#3A4048; --nx-pr-slate-sea:#1A1D21; --nx-pr-slate-land:#3A4048; --nx-pr-slate-lime:#E4E8EC;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, rgba(180,188,197,.16) 0%, rgba(180,188,197,0) 100%), linear-gradient(160deg,#15181B 0%,#1E2226 45%,#2C3137 80%,#3A4048 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 100%, rgba(180,188,197,.14) 0%, rgba(180,188,197,0) 100%), linear-gradient(180deg,#15181B 0%,#1E2226 50%,#3A4048 100%);
--nx-pr-canvas-m-bot: #2C3137;
/* superfícies: cartão grafite, "strong" preto, controle grafite claro */
--nx-color-surface:#23272C; --nx-color-surface-opaque:#23272C; --nx-color-sheet:#1E2226; --nx-color-folder:#2C3137; --nx-color-glass:rgba(35,39,44,.6);
--nx-color-strong:#0F1114; --nx-color-strong-well:#2C3137; --nx-color-on-strong:#F2F4F6; --nx-color-on-strong-muted:#A7AEB6;
--nx-color-accent:#B4BCC5; --nx-color-on-accent:#0F1114;
/* texto */
--nx-color-text:#F2F4F6; --nx-color-text-on-surface:#F2F4F6; --nx-color-text-muted:#B4BAC2; --nx-color-text-muted-canvas:#C9CED4; --nx-color-text-faint:#A2A9B1; --nx-color-text-on-hatch:#F2F4F6;
--nx-color-border:#3A4048; --nx-color-divider:#3A4048;
--nx-color-control:#31363C; --nx-color-on-control:#F2F4F6; --nx-color-on-control-muted:#B4BAC2; --nx-color-control-soft:#3A4048; --nx-color-input:#2C3137;
--nx-color-selected:#B4BCC5; --nx-color-selected-read:#0F1114; --nx-color-weekend:#B4BAC2;
--nx-color-photo-a:#4A5058; --nx-color-photo-b:#0F1114;
--nx-color-cell:#2C3137; --nx-color-on-cell:#F2F4F6;
--nx-chevron-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F2F4F6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
/* dado: prata = destaque; referência branca; neutros por luminosidade entre o cartão e a prata */
--nx-data-primary:#B4BCC5; --nx-data-reference:#F5F7F9; --nx-data-on-reference:#0F1114; --nx-data-on-reference-muted:#4A5058; --nx-data-neutral:#5F6771; --nx-data-on-neutral:#F2F4F6; --nx-data-progress:#9AA3AE; --nx-data-positive:#E4E8EC; --nx-data-idle:#4A5058;
--nx-data-track:#3A4048; --nx-data-tick:#5A626B; --nx-data-dot-off:#3A4048;
--nx-data-map-sea:#1A1D21; --nx-data-map-land:#3A4048; --nx-data-map-data:#6B737D; --nx-data-map-leader:#F5F7F9; --nx-data-map-current:#B4BCC5;
--nx-data-hatch-bg:#2C3137; --nx-data-hatch-line:rgba(242,244,246,.55); --nx-data-hatch-line-strong:rgba(242,244,246,.7);
--nx-data-hatch-area-bg:#2C3137; --nx-data-hatch-area-line:rgba(242,244,246,.4);
--nx-data-hatch-cal-bg:#2C3137; --nx-data-hatch-cal-line:rgba(242,244,246,.35); --nx-data-hatch-accent-bg:#3A4048; --nx-data-hatch-accent-line:#9AA3AE;
--nx-hatch-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='white' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#3A4048; --nx-pr-status-lime-ink:#E4E8EC; --nx-pr-status-gray:#31363C; --nx-pr-status-gray-ink:#C9CED4;
--nx-pr-status-lavender:#3A3F52; --nx-pr-status-lavender-ink:#D9D4F0; --nx-pr-status-mint:#2F4038; --nx-pr-status-mint-ink:#BFE6CB;
/* chips de documento: claros sobre o cartão grafite, tinta escura (herdada de tokens.css) */
--nx-pr-chip-word:#D9E4EE; --nx-pr-chip-word-ink:#0F1114; --nx-pr-chip-word-letter:#2B5797;
--nx-shadow-card:0 10px 28px rgba(0,0,0,.35); --nx-shadow-control:0 2px 10px rgba(0,0,0,.3); --nx-shadow-float:0 6px 18px rgba(0,0,0,.4); --nx-shadow-shell:0 30px 80px rgba(0,0,0,.5);
}
}
/* preset-vermelho.css — Ruby Paper: papel claro com primária VERMELHA. Prova de que "perigo" não pode depender da matiz vermelha:
* aqui o perigo é laranja-queimado e os gráficos usam forma (hachura, contorno, tracejado) além da cor.
* Construção: mesma arquitetura do preset GOV SC claro (canvas papel, cartão branco, strong carvão); tinta sobre a primária = branco.
* Vale para o quadro claro; o quadro escuro herda o ardósia de tokens.css com a primária clareada (accent-dark). */
@layer nexaya.preset {
[data-nx-preset="vermelho"] {
--nx-brand-primary:#B12626; --nx-brand-primary-strong:#7F1717; --nx-brand-primary-soft:#F3D6D6; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#9F7600; /* perigo ≠ primária: âmbar escuro (matiz a 45° do rubi); nos gráficos, perigo também leva hachura/contorno */
--nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#FF7A7A;
--nx-pr-outer:#B9AEAE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #F6E7E4 0%, transparent 100%), linear-gradient(145deg, #F4F1EE 0%, #F4F1EE 60%, #F1ECE8 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #F6E7E4 0%, transparent 100%), linear-gradient(180deg, #F4F1EE 0%, #F2EDEA 100%);
--nx-pr-canvas-m-bot: #F2EDEA;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFBFA; --nx-color-folder:#F3ECEA; --nx-color-input:#F1ECEA;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#B12626; --nx-color-on-accent:#FFFFFF; --nx-color-accent-on-strong:#FF9A9A; /* vermelho pede tinta clara (6,6:1; a 80 % de opacidade ainda 4,7:1) — nunca assumir tinta escura */
--nx-color-text:#2B2626; --nx-color-text-on-surface:#2B2626; --nx-color-text-muted:#6B6363; --nx-color-text-muted-canvas:#5E5757; --nx-color-text-faint:#767070;
--nx-color-border:#E4DDDB; --nx-color-divider:#E4DDDB;
--nx-color-control:#FFFFFF; --nx-color-on-control:#2B2626; --nx-color-on-control-muted:#6B6363; --nx-color-control-soft:#F8EFED;
--nx-color-selected:#B12626; --nx-color-selected-read:#FFFFFF; --nx-color-weekend:#6B6363; /* vermelho é a primária: fim de semana vira cinza */
--nx-color-cell:#F1ECEA; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#D3C6C3; --nx-color-photo-b:#2B2626;
--nx-data-primary:#B12626; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D0CE; --nx-data-on-neutral:#2B2626; --nx-data-progress:#D98A8A; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9292;
--nx-data-track:#EDE6E4; --nx-data-tick:#A69C9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D0CE; --nx-data-map-data:#B5AAA8; --nx-data-map-leader:#4A4141; --nx-data-map-current:#B12626;
--nx-data-hatch-bg:#EDE6E4; --nx-data-hatch-line:#C4B9B7; --nx-data-hatch-area-bg:#F8F3F1; --nx-data-hatch-area-line:#DCD2D0;
--nx-data-hatch-cal-bg:#F3EEEC; --nx-data-hatch-cal-line:#B9AEAC; --nx-data-hatch-accent-bg:#F3D6D6; --nx-data-hatch-accent-line:#D06060;
--nx-hatch-accent-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='%23B84040' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#F3D6D6; --nx-pr-status-lime-ink:#7F1717; --nx-pr-status-gray:#EFEAE8; --nx-pr-status-gray-ink:#666060;
--nx-pr-status-lavender:#E6DDF3; --nx-pr-status-lavender-ink:#5F5580; --nx-pr-status-mint:#DDF0E1; --nx-pr-status-mint-ink:#2F6E3B;
--nx-pr-chip-word:#D9E4EE; --nx-pr-chip-word-letter:#2B5797; --nx-pr-chip-ppt:#FDE9E1; --nx-pr-chip-ppt-letter:#B93A16;
}
[data-nx-preset="vermelho"][data-nx-theme="dark"], [data-nx-preset="vermelho"] [data-nx-theme="dark"] {
--nx-color-accent:#FF7A7A; --nx-color-on-accent:#2B2626; --nx-data-primary:#FF7A7A; --nx-data-map-current:#FF7A7A; --nx-color-selected:#FF7A7A; --nx-data-progress:#B85C5C;
}
}
{
"$meta": {
"name": "Nexaya Design System — temas",
"howto": "Fonte única da lista de temas. Um tema = um preset (arquivo tokens/preset-<preset>.css, atributo data-nx-preset) + um modo (data-nx-theme light|dark). id em kebab-case é o que a API, o MCP, os temas Vega (charts/vega/theme/nexaya-<id>.json) e os SVGs por tema (charts/examples/<id>/) usam. family agrupa os temas pela cor primária.",
"presetFiles": {
"nexaya": "tokens/preset-nexaya.css",
"govsc": "tokens/preset-govsc.css",
"carbono": "tokens/preset-carbono.css",
"azul": "tokens/preset-azul.css",
"prata": "tokens/preset-prata.css",
"vermelho": "tokens/preset-vermelho.css"
}
},
"themes": [
{
"id": "pastel-gold",
"label": "Pastel Gold",
"family": "gold",
"preset": "nexaya",
"mode": "light",
"note": "creme com primária amarela; o tema de origem"
},
{
"id": "slate-neon",
"label": "Slate Neon",
"family": "gold",
"preset": "nexaya",
"mode": "dark",
"note": "ardósia com neon"
},
{
"id": "mint-paper",
"label": "Mint Paper",
"family": "mint",
"preset": "govsc",
"mode": "light",
"note": "papel com primária verde-limão"
},
{
"id": "forest-dark",
"label": "Forest Dark",
"family": "mint",
"preset": "govsc",
"mode": "dark",
"note": "escuro calibrado do painel PAA"
},
{
"id": "carbon-lime",
"label": "Carbon Lime",
"family": "carbon",
"preset": "carbono",
"mode": "dark",
"note": "preto e prata, verde só como destaque"
},
{
"id": "navy-sky",
"label": "Navy Sky",
"family": "navy",
"preset": "azul",
"mode": "dark",
"note": "marinho e aço, destaque azul-céu"
},
{
"id": "silver-ash",
"label": "Silver Ash",
"family": "silver",
"preset": "prata",
"mode": "dark",
"note": "grafite com primária prata (baixa saturação)"
},
{
"id": "ruby-paper",
"label": "Ruby Paper",
"family": "ruby",
"preset": "vermelho",
"mode": "light",
"note": "papel com primária vermelha (primária = matiz do perigo)"
}
]
}import React, { useLayoutEffect, useRef, useState } from "react";
/**
* FolderTab — pasta com aba em S (Nexaya DS).
* Geometria (px): d = altura da faixa de filtros − 6 · c = 0,8·d · s = largura do grupo de ações + 2·pad · r = raio.
* A curva é uma cúbica com alças horizontais: convexa ao sair do patamar alto, côncava ao chegar no baixo.
* A folha branca fica inset `inset` nas laterais/base e `inset` abaixo do patamar baixo → a "espessura do arco" é igual em todo o contorno.
*/
export function folderPath(W, H, { r = 32, d = 79, s = 276 } = {}) {
const c = Math.round(d * 0.8);
const x0 = W - s - c;
return `M${r} 0 H${x0} C${x0 + c / 2} 0, ${x0 + c / 2} ${d}, ${W - s} ${d} H${W - r} Q${W} ${d}, ${W} ${d + r} V${H - r} Q${W} ${H}, ${W - r} ${H} H${r} Q0 ${H}, 0 ${H - r} V${r} Q0 0, ${r} 0 Z`;
}
export default function FolderTab({
filters, // ReactNode — chips + busca (faixa superior, à esquerda)
actions, // ReactNode — círculos/pílulas que flutuam no recorte (à direita)
children, // ReactNode — a folha (tabela)
filterRow = 85, // altura da faixa de filtros
inset = 21, // espessura da moldura ao redor da folha
radius = 32,
actionsWidth = 234, // largura do grupo de ações (46+8+46+8+126)
folderColor = "var(--nx-color-folder)",
sheetColor = "var(--nx-color-sheet)",
style,
}) {
const ref = useRef(null);
const [box, setBox] = useState({ w: 0, h: 0 });
useLayoutEffect(() => {
const el = ref.current; if (!el) return;
const ro = new ResizeObserver(([e]) => setBox({ w: e.contentRect.width, h: e.contentRect.height }));
ro.observe(el); return () => ro.disconnect();
}, []);
const d = filterRow - 6, s = actionsWidth + inset * 2;
const path = box.w ? folderPath(box.w, box.h, { r: radius, d, s }) : null;
return (
<div style={{ position: "relative", ...style }}>
{/* ações ficam FORA do elemento recortado — o clip-path removeria exatamente a região do recorte */}
<div style={{ position: "absolute", right: inset, top: (filterRow - 46) / 2, display: "flex", gap: 8, alignItems: "center", zIndex: 1 }}>{actions}</div>
<div ref={ref} style={{ position: "relative", background: folderColor, clipPath: path ? `path("${path}")` : `inset(0 round ${radius}px)`, paddingTop: d + inset }}>
<div style={{ position: "absolute", left: inset, top: (filterRow - 42) / 2, display: "flex", gap: 8, alignItems: "center" }}>{filters}</div>
<div style={{ margin: `0 ${inset}px ${inset}px`, background: sheetColor, borderRadius: radius }}>{children}</div>
</div>
</div>
);
}
/* Uso:
<FolderTab
filters={<><Chip>Colums</Chip><Chip>Site</Chip><SearchPill/></>}
actions={<><Circle icon="plus"/><Circle icon="sliders"/><Pill icon="download">Export</Pill></>}>
<Table … />
</FolderTab>
Mobile (<600px): não renderize a aba — passe filterRow={0} e mova `actions` para a topbar. */