tokens/tokens.css
/* 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;
/* contorno de segurança: tom mais escuro da primária quando ela é clara demais para o cartão (temas de marca); transparente nos presets */
--nx-data-primary-edge: transparent; --nx-color-accent-edge: transparent;
/* vidro jateado (.nx-glass): superfície translúcida + desfoque; a cor de quem está atrás atravessa */
--nx-glass-bg: color-mix(in srgb, var(--nx-color-surface-opaque) 34%, transparent); --nx-glass-line: color-mix(in srgb, var(--nx-color-surface-opaque) 55%, transparent); --nx-glass-blur: 18px; --nx-glass-ink: var(--nx-color-on-strong);
--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-glass-bg: color-mix(in srgb, var(--nx-color-strong) 34%, transparent); --nx-glass-line: color-mix(in srgb, var(--nx-color-surface-opaque) 30%, transparent); --nx-glass-blur: 18px; --nx-glass-ink: var(--nx-color-on-strong);
--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 */
}
}
tokens/preset-nexaya.css
/* 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;
}
}
tokens/preset-govsc.css
/* 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);
}
}
tokens/preset-carbono.css
/* 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);
}
}
tokens/preset-azul.css
/* 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);
}
}
tokens/preset-prata.css
/* 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);
}
}
tokens/preset-vermelho.css
/* 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:#151212; --nx-data-primary:#FF7A7A; --nx-data-map-current:#FF7A7A; --nx-color-selected:#FF7A7A; --nx-data-progress:#B85C5C;
}
}
tokens/preset-rosa.css
/* preset-rosa.css — Rose Petal: papel claro com primária #F2A7C3 (família rose). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #2B2626 (7.9:1). Perigo #9F7600 (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="rosa"] {
--nx-brand-primary:#F2A7C3; --nx-brand-primary-strong:#E44580; --nx-brand-primary-soft:#FCECF2; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#9F7600; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#F04C89;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #FDF3F7 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #F4EDEC 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #FDF3F7 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #F4EDEC 100%);
--nx-pr-canvas-m-bot: #F4EDEC;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#F4E9EA; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#F2A7C3; --nx-color-on-accent:#2B2626; --nx-color-accent-on-strong:#F2A7C3;
--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:#FEF8FA;
--nx-color-selected:#F2A7C3; --nx-color-selected-read:#2B2626; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#DBBEC3; --nx-color-photo-b:#2B2626;
--nx-data-primary:#F2A7C3; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#F8CFDE; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#F2A7C3;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#FCECF2; --nx-data-hatch-accent-line:#F6C1D5;
--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='%23EB7BA5' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#FCECF2; --nx-pr-status-lime-ink:#C41D5B; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="rosa"][data-nx-theme="dark"], [data-nx-preset="rosa"] [data-nx-theme="dark"] {
--nx-color-accent:#F04C89; --nx-color-on-accent:#151212; --nx-data-primary:#F04C89; --nx-data-map-current:#F04C89; --nx-color-selected:#F04C89; --nx-data-progress:#984167;
}
}
tokens/preset-roxo.css
/* preset-roxo.css — Lilac Paper: papel claro com primária #B9A6E8 (família violet). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #2B2626 (6.9:1). Perigo #B3261E (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="roxo"] {
--nx-brand-primary:#B9A6E8; --nx-brand-primary-strong:#734DD1; --nx-brand-primary-soft:#F0EBFA; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#B3261E; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#825BE1;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #F5F3FC 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #F0EDEF 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #F5F3FC 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #F0EDEF 100%);
--nx-pr-canvas-m-bot: #F0EDEF;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#EDE9EE; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#B9A6E8; --nx-color-on-accent:#2B2626; --nx-color-accent-on-strong:#B9A6E8;
--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:#F9F8FD;
--nx-color-selected:#B9A6E8; --nx-color-selected-read:#2B2626; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#CCBECC; --nx-color-photo-b:#2B2626;
--nx-data-primary:#B9A6E8; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#D9CEF2; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#B9A6E8;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#F0EBFA; --nx-data-hatch-accent-line:#CEC1EF;
--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='%23997DDE' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#F0EBFA; --nx-pr-status-lime-ink:#5C32C3; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="roxo"][data-nx-theme="dark"], [data-nx-preset="roxo"] [data-nx-theme="dark"] {
--nx-color-accent:#825BE1; --nx-color-on-accent:#151212; --nx-data-primary:#825BE1; --nx-data-map-current:#825BE1; --nx-color-selected:#825BE1; --nx-data-progress:#5B4998;
}
}
tokens/preset-ciano.css
/* preset-ciano.css — Cyan Mist: papel claro com primária #8FD3E0 (família cyan). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #2B2626 (8.9:1). Perigo #B3261E (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="ciano"] {
--nx-brand-primary:#8FD3E0; --nx-brand-primary-strong:#37B0C8; --nx-brand-primary-soft:#E6F5F8; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#B3261E; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#5ECADF;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #EFF9FB 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #EEF0EE 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #EFF9FB 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #EEF0EE 100%);
--nx-pr-canvas-m-bot: #EEF0EE;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#E8EEED; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#8FD3E0; --nx-color-on-accent:#2B2626; --nx-color-accent-on-strong:#8FD3E0;
--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:#F6FBFD;
--nx-color-selected:#8FD3E0; --nx-color-selected-read:#2B2626; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#C2C9CA; --nx-color-photo-b:#2B2626;
--nx-data-primary:#8FD3E0; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#C1E7EE; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#8FD3E0;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#E6F5F8; --nx-data-hatch-accent-line:#B1E0E9;
--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='%2367C3D5' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#E6F5F8; --nx-pr-status-lime-ink:#216A78; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="ciano"][data-nx-theme="dark"], [data-nx-preset="ciano"] [data-nx-theme="dark"] {
--nx-color-accent:#5ECADF; --nx-color-on-accent:#151212; --nx-data-primary:#5ECADF; --nx-data-map-current:#5ECADF; --nx-color-selected:#5ECADF; --nx-data-progress:#488697;
}
}
tokens/preset-marrom.css
/* preset-marrom.css — Cocoa Clay: papel claro com primária #CCB29C (família brown). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #2B2626 (7.4:1). Perigo #B3261E (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="marrom"] {
--nx-brand-primary:#CCB29C; --nx-brand-primary-strong:#A47954; --nx-brand-primary-soft:#F4EEE9; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#B3261E; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#C69B76;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #F8F4F1 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #F2EEEA 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #F8F4F1 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #F2EEEA 100%);
--nx-pr-canvas-m-bot: #F2EEEA;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#EFEAE5; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#CCB29C; --nx-color-on-accent:#2B2626; --nx-color-accent-on-strong:#CCB29C;
--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:#FBF9F7;
--nx-color-selected:#CCB29C; --nx-color-selected-read:#2B2626; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#D1C1B9; --nx-color-photo-b:#2B2626;
--nx-data-primary:#CCB29C; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#E3D5C9; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#CCB29C;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#F4EEE9; --nx-data-hatch-accent-line:#DBC9BA;
--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='%23BB987A' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#F4EEE9; --nx-pr-status-lime-ink:#74563C; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="marrom"][data-nx-theme="dark"], [data-nx-preset="marrom"] [data-nx-theme="dark"] {
--nx-color-accent:#C69B76; --nx-color-on-accent:#151212; --nx-data-primary:#C69B76; --nx-data-map-current:#C69B76; --nx-color-selected:#C69B76; --nx-data-progress:#816C5D;
}
}
tokens/preset-laranja.css
/* preset-laranja.css — Peach Sun: papel claro com primária #F3B06E (família orange). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #2B2626 (8.0:1). Perigo #9F7600 (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="laranja"] {
--nx-brand-primary:#F3B06E; --nx-brand-primary-strong:#DE7812; --nx-brand-primary-soft:#FCEEDF; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#9F7600; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#FA9D42;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #FDF4EB 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #F4EEE7 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #FDF4EB 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #F4EEE7 100%);
--nx-pr-canvas-m-bot: #F4EEE7;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#F4EAE0; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#F3B06E; --nx-color-on-accent:#2B2626; --nx-color-accent-on-strong:#F3B06E;
--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:#FEF9F3;
--nx-color-selected:#F3B06E; --nx-color-selected-read:#2B2626; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#DBC0AE; --nx-color-photo-b:#2B2626;
--nx-data-primary:#F3B06E; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#F8D4AF; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#F3B06E;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#FCEEDF; --nx-data-hatch-accent-line:#F7C89A;
--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='%23EF963F' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#FCEEDF; --nx-pr-status-lime-ink:#9C540D; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="laranja"][data-nx-theme="dark"], [data-nx-preset="laranja"] [data-nx-theme="dark"] {
--nx-color-accent:#FA9D42; --nx-color-on-accent:#151212; --nx-data-primary:#FA9D42; --nx-data-map-current:#FA9D42; --nx-color-selected:#FA9D42; --nx-data-progress:#9D6D40;
}
}
tokens/preset-esmeralda.css
/* preset-esmeralda.css — Emerald Paper: papel claro com primária #1A7E53 (família emerald). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #FFFFFF (5.1:1). Perigo #B3261E (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="esmeralda"] {
--nx-brand-primary:#1A7E53; --nx-brand-primary-strong:#072116; --nx-brand-primary-soft:#CDE3D9; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#B3261E; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#55E7A8;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #DFEDE7 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #E7EBE6 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #DFEDE7 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #E7EBE6 100%);
--nx-pr-canvas-m-bot: #E7EBE6;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#DAE4DC; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#1A7E53; --nx-color-on-accent:#FFFFFF; --nx-color-accent-on-strong:#24B174;
--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:#EDF5F1;
--nx-color-selected:#1A7E53; --nx-color-selected-read:#FFFFFF; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#A5B4A7; --nx-color-photo-b:#2B2626;
--nx-data-primary:#1A7E53; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#81B8A0; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#1A7E53;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#CDE3D9; --nx-data-hatch-accent-line:#5FA587;
--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='%23115437' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#CDE3D9; --nx-pr-status-lime-ink:#000000; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="esmeralda"][data-nx-theme="dark"], [data-nx-preset="esmeralda"] [data-nx-theme="dark"] {
--nx-color-accent:#55E7A8; --nx-color-on-accent:#151212; --nx-data-primary:#55E7A8; --nx-data-map-current:#55E7A8; --nx-color-selected:#55E7A8; --nx-data-progress:#439678;
}
}
tokens/preset-terracota.css
/* preset-terracota.css — Terracotta Paper: papel claro com primária #A45231 (família terracotta). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #FFFFFF (5.5:1). Perigo #7A1F3D (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="terracota"] {
--nx-brand-primary:#A45231; --nx-brand-primary-strong:#4E2717; --nx-brand-primary-soft:#EBD9D2; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#7A1F3D; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#DC8460;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #F2E7E2 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #EFE8E4 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #F2E7E2 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #EFE8E4 100%);
--nx-pr-canvas-m-bot: #EFE8E4;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#EADFD8; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#A45231; --nx-color-on-accent:#FFFFFF; --nx-color-accent-on-strong:#C96E49;
--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:#F8F1EF;
--nx-color-selected:#A45231; --nx-color-selected-read:#FFFFFF; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#C7A99E; --nx-color-photo-b:#2B2626;
--nx-data-primary:#A45231; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#CDA08E; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#A45231;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#EBD9D2; --nx-data-hatch-accent-line:#BF866F;
--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='%237D3E25' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#EBD9D2; --nx-pr-status-lime-ink:#2E170E; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="terracota"][data-nx-theme="dark"], [data-nx-preset="terracota"] [data-nx-theme="dark"] {
--nx-color-accent:#DC8460; --nx-color-on-accent:#151212; --nx-data-primary:#DC8460; --nx-data-map-current:#DC8460; --nx-color-selected:#DC8460; --nx-data-progress:#8D6051;
}
}
tokens/preset-oliva.css
/* preset-oliva.css — Olive Paper: papel claro com primária #A5BC5F (família olive). Gerado por build/make_preset.py; ajuste à mão se quiser.
* Tinta sobre a primária: #2B2626 (7.1:1). Perigo #B3261E (≠ primária). Vale para o quadro claro; o escuro herda o ardósia de tokens.css com a primária clareada. */
@layer nexaya.preset {
[data-nx-preset="oliva"] {
--nx-brand-primary:#A5BC5F; --nx-brand-primary-strong:#677832; --nx-brand-primary-soft:#EBF0DC; --nx-brand-ink:#2B2626; --nx-brand-neutral:#3A3434;
--nx-brand-danger:#B3261E; --nx-brand-success:#3F8F4E; --nx-brand-warning:#C98A00; --nx-brand-info:#4C6FBF; --nx-brand-accent-dark:#B6CF6D;
--nx-pr-outer:#B9B2AE;
--nx-color-canvas: radial-gradient(60% 60% at 100% 100%, #F2F6E9 0%, transparent 100%), linear-gradient(145deg, #F4F2EF 0%, #F4F2EF 60%, #EFEFE6 100%);
--nx-color-canvas-mobile: radial-gradient(70% 45% at 100% 60%, #F2F6E9 0%, transparent 100%), linear-gradient(180deg, #F4F2EF 0%, #EFEFE6 100%);
--nx-pr-canvas-m-bot: #EFEFE6;
--nx-color-surface:#FFFFFF; --nx-color-surface-opaque:#FFFFFF; --nx-color-sheet:#FDFCFB; --nx-color-folder:#EBECDE; --nx-color-input:#F1EEEC;
--nx-color-strong:#2B2626; --nx-color-strong-well:#4A4141; --nx-color-on-strong:#FFFFFF;
--nx-color-accent:#A5BC5F; --nx-color-on-accent:#2B2626; --nx-color-accent-on-strong:#A5BC5F;
--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:#F8FAF2;
--nx-color-selected:#A5BC5F; --nx-color-selected-read:#2B2626; --nx-color-weekend:#6B6363;
--nx-color-cell:#F1EEEC; --nx-color-on-cell:#2B2626;
--nx-color-photo-a:#C8C4AA; --nx-color-photo-b:#2B2626;
--nx-data-primary:#A5BC5F; --nx-data-reference:#2B2626; --nx-data-neutral:#D9D3D0; --nx-data-on-neutral:#2B2626; --nx-data-progress:#CEDAA7; --nx-data-positive:#3F8F4E; --nx-data-idle:#9C9492;
--nx-data-track:#EDE8E6; --nx-data-tick:#A69E9C; --nx-data-dot-off:#4A4141;
--nx-data-map-sea:transparent; --nx-data-map-land:#D9D3D0; --nx-data-map-data:#B5ACAA; --nx-data-map-leader:#4A4141; --nx-data-map-current:#A5BC5F;
--nx-data-hatch-bg:#EDE8E6; --nx-data-hatch-line:#C4BBB9; --nx-data-hatch-area-bg:#F8F4F2; --nx-data-hatch-area-line:#DCD4D2;
--nx-data-hatch-cal-bg:#F3EFED; --nx-data-hatch-cal-line:#B9B0AE; --nx-data-hatch-accent-bg:#EBF0DC; --nx-data-hatch-accent-line:#C0D08F;
--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='%238CA444' stroke-width='1'/%3E%3C/svg%3E");
--nx-pr-status-lime:#EBF0DC; --nx-pr-status-lime-ink:#4E5C26; --nx-pr-status-gray:#EFEBE9; --nx-pr-status-gray-ink:#666060;
}
[data-nx-preset="oliva"][data-nx-theme="dark"], [data-nx-preset="oliva"] [data-nx-theme="dark"] {
--nx-color-accent:#B6CF6D; --nx-color-on-accent:#151212; --nx-data-primary:#B6CF6D; --nx-data-map-current:#B6CF6D; --nx-color-selected:#B6CF6D; --nx-data-progress:#788958;
}
}
tokens/preset-ambar.css
/* preset-ambar.css — Amber Night: quadro escuro da família amber (gerado por build/make_preset_dark.py a partir do azul: neutros com matiz 30° × sat 0.45; acento #F0A63A).
* Acento sobre o canvas #25201A: 7.86:1. Mesmas relações do ardósia: canvas escuro que degrada, cartões claros com texto escuro, "strong" quase preto. */
@layer nexaya.preset {
[data-nx-preset="ambar"], [data-nx-preset="ambar"] [data-nx-theme="light"], [data-nx-preset="ambar"] [data-nx-theme="dark"] {
/* camada 0 */
--nx-brand-primary:#F0A63A; --nx-brand-primary-strong:#87540A; --nx-brand-primary-soft:#FCEBD4; --nx-brand-ink:#201A15; --nx-brand-neutral:#25201A;
--nx-brand-danger:#E0555C; --nx-brand-success:#AB9884; --nx-brand-warning:#C08E5D; --nx-brand-info:#F0A63A; --nx-brand-accent-dark:#F0A63A;
/* primitivas carbono/prata (equivalentes às slate-*) */
--nx-pr-outer:#7B726A;
--nx-pr-slate-canvas-a:#25201A; --nx-pr-slate-canvas-b:#A09489; --nx-pr-slate-surface:#E3DFDB; --nx-pr-slate-strong:#201A15;
--nx-pr-slate-hatch:#7B7268; --nx-pr-slate-sea:#7A7067; --nx-pr-slate-land:#D5D0CB; --nx-pr-slate-lime:#F5C57F;
/* 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,#25201A 0%,#312B24 40%,#6E6358 75%,#A09489 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,#25201A 0%,#312B24 45%,#A09489 100%);
--nx-pr-canvas-m-bot: #453E36;
/* superfícies */
--nx-color-surface:#E3DFDB; --nx-color-surface-opaque:#F8F5F3; --nx-color-sheet:#EEEBE8; --nx-color-folder:#C9C2BB;
--nx-color-strong:#201A15; --nx-color-strong-well:#4F463E; --nx-color-on-strong:#F8F6F4; --nx-color-on-strong-muted:#C8C2BB;
--nx-color-accent:#F0A63A; --nx-color-on-accent:#201A15;
/* texto */
--nx-color-text:#FFFFFF; --nx-color-text-on-surface:#25201A; --nx-color-text-muted:#574E45; --nx-color-text-muted-canvas:#E3DFDB; --nx-color-text-faint:#645A51; --nx-color-text-on-hatch:#FFFFFF;
--nx-color-border:#C4BDB6; --nx-color-divider:#C4BDB6;
--nx-color-control:#D3CCC6; --nx-color-on-control:#25201A; --nx-color-on-control-muted:#574E45; --nx-color-control-soft:#DCD7D2; --nx-color-input:#EEEBE8;
--nx-color-selected:#F8F5F3; --nx-color-selected-read:#F8F5F3; --nx-color-weekend:#87540A; --nx-color-glass:rgba(214,222,232,.55);
--nx-color-photo-a:#A09489; --nx-color-photo-b:#201A15;
/* dado */
--nx-data-primary:#F0A63A; --nx-data-reference:#201A15; --nx-data-neutral:#C4BDB6; --nx-data-progress:#F5C57F; --nx-data-positive:#F5C57F; --nx-data-idle:#D5D0CB;
--nx-data-track:#D5D0CB; --nx-data-tick:#746B62; --nx-data-dot-off:#4F463E;
--nx-data-map-sea:#7A7067; --nx-data-map-land:#D5D0CB; --nx-data-map-data:#BAB2A9; --nx-data-map-leader:#201A15; --nx-data-map-current:#F0A63A;
--nx-data-hatch-bg:#7B7268; --nx-data-hatch-line:rgba(255,255,255,.8); --nx-data-hatch-line-strong:rgba(255,255,255,.8);
--nx-data-hatch-area-bg:#80776E; --nx-data-hatch-area-line:rgba(255,255,255,.7);
--nx-data-hatch-cal-bg:#80776E; --nx-data-hatch-cal-line:rgba(255,255,255,.6); --nx-data-hatch-accent-bg:#FCEBD4;
--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:#FCEBD4; --nx-pr-status-lime-ink:#87540A; --nx-pr-status-gray:#D5D0CB; --nx-pr-status-gray-ink:#4F463E;
--nx-pr-chip-word:#706457; --nx-pr-chip-word-ink:#FFFFFF;
--nx-color-cell:#D5D0CB; --nx-color-on-cell:#25201A;
/* 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);
}
}
tokens/preset-grafite.css
/* preset-grafite.css — Graphite Neon: quadro escuro da família graphite (gerado por build/make_preset_dark.py a partir do azul: neutros com matiz 215° × sat 0.35; acento #14B893).
* Acento sobre o canvas #1B1F24: 6.55:1. Mesmas relações do ardósia: canvas escuro que degrada, cartões claros com texto escuro, "strong" quase preto. */
@layer nexaya.preset {
[data-nx-preset="grafite"], [data-nx-preset="grafite"] [data-nx-theme="light"], [data-nx-preset="grafite"] [data-nx-theme="dark"] {
/* camada 0 */
--nx-brand-primary:#14B893; --nx-brand-primary-strong:#095342; --nx-brand-primary-soft:#CBEFE7; --nx-brand-ink:#161A1F; --nx-brand-neutral:#1B1F24;
--nx-brand-danger:#E0555C; --nx-brand-success:#8895A7; --nx-brand-warning:#6888B5; --nx-brand-info:#14B893; --nx-brand-accent-dark:#14B893;
/* primitivas carbono/prata (equivalentes às slate-*) */
--nx-pr-outer:#6C7179;
--nx-pr-slate-canvas-a:#1B1F24; --nx-pr-slate-canvas-b:#8C939D; --nx-pr-slate-surface:#DCDEE2; --nx-pr-slate-strong:#161A1F;
--nx-pr-slate-hatch:#6A7079; --nx-pr-slate-sea:#696F78; --nx-pr-slate-land:#CCCFD4; --nx-pr-slate-lime:#66D1B9;
/* 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,#1B1F24 0%,#252A30 40%,#5A626C 75%,#8C939D 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,#1B1F24 0%,#252A30 45%,#8C939D 100%);
--nx-pr-canvas-m-bot: #383D43;
/* superfícies */
--nx-color-surface:#DCDEE2; --nx-color-surface-opaque:#F4F5F7; --nx-color-sheet:#E9EBED; --nx-color-folder:#BDC1C7;
--nx-color-strong:#161A1F; --nx-color-strong-well:#40454D; --nx-color-on-strong:#F5F6F7; --nx-color-on-strong-muted:#BCC1C7;
--nx-color-accent:#14B893; --nx-color-on-accent:#161A1F;
/* texto */
--nx-color-text:#FFFFFF; --nx-color-text-on-surface:#1B1F24; --nx-color-text-muted:#50565E; --nx-color-text-muted-canvas:#DCDEE2; --nx-color-text-faint:#535962; --nx-color-text-on-hatch:#FFFFFF;
--nx-color-border:#B8BCC2; --nx-color-divider:#B8BCC2;
--nx-color-control:#C8CCD1; --nx-color-on-control:#1B1F24; --nx-color-on-control-muted:#50565E; --nx-color-control-soft:#D3D6DB; --nx-color-input:#E9EBED;
--nx-color-selected:#F4F5F7; --nx-color-selected-read:#F4F5F7; --nx-color-weekend:#095342; --nx-color-glass:rgba(214,222,232,.55);
--nx-color-photo-a:#8C939D; --nx-color-photo-b:#161A1F;
/* dado */
--nx-data-primary:#14B893; --nx-data-reference:#161A1F; --nx-data-neutral:#B8BCC2; --nx-data-progress:#66D1B9; --nx-data-positive:#66D1B9; --nx-data-idle:#CCCFD4;
--nx-data-track:#CCCFD4; --nx-data-tick:#646A72; --nx-data-dot-off:#40454D;
--nx-data-map-sea:#696F78; --nx-data-map-land:#CCCFD4; --nx-data-map-data:#ABB0B8; --nx-data-map-leader:#161A1F; --nx-data-map-current:#14B893;
--nx-data-hatch-bg:#6A7079; --nx-data-hatch-line:rgba(255,255,255,.8); --nx-data-hatch-line-strong:rgba(255,255,255,.8);
--nx-data-hatch-area-bg:#70767E; --nx-data-hatch-area-line:rgba(255,255,255,.7);
--nx-data-hatch-cal-bg:#70767E; --nx-data-hatch-cal-line:rgba(255,255,255,.6); --nx-data-hatch-accent-bg:#CBEFE7;
--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:#CBEFE7; --nx-pr-status-lime-ink:#095342; --nx-pr-status-gray:#CCCFD4; --nx-pr-status-gray-ink:#40454D;
--nx-pr-chip-word:#5A626D; --nx-pr-chip-word-ink:#FFFFFF;
--nx-color-cell:#CCCFD4; --nx-color-on-cell:#1B1F24;
/* 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);
}
}
tokens/themes.json
{
"$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",
"rosa": "tokens/preset-rosa.css",
"roxo": "tokens/preset-roxo.css",
"ciano": "tokens/preset-ciano.css",
"marrom": "tokens/preset-marrom.css",
"laranja": "tokens/preset-laranja.css",
"esmeralda": "tokens/preset-esmeralda.css",
"terracota": "tokens/preset-terracota.css",
"oliva": "tokens/preset-oliva.css",
"ambar": "tokens/preset-ambar.css",
"grafite": "tokens/preset-grafite.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)"
},
{
"id": "rose-petal",
"label": "Rose Petal",
"family": "rose",
"preset": "rosa",
"mode": "light",
"note": "papel com primária #F2A7C3 (pastel)"
},
{
"id": "lilac-paper",
"label": "Lilac Paper",
"family": "violet",
"preset": "roxo",
"mode": "light",
"note": "papel com primária #B9A6E8 (pastel)"
},
{
"id": "cyan-mist",
"label": "Cyan Mist",
"family": "cyan",
"preset": "ciano",
"mode": "light",
"note": "papel com primária #8FD3E0 (pastel)"
},
{
"id": "cocoa-clay",
"label": "Cocoa Clay",
"family": "brown",
"preset": "marrom",
"mode": "light",
"note": "papel com primária #B08968 (pastel)"
},
{
"id": "peach-sun",
"label": "Peach Sun",
"family": "orange",
"preset": "laranja",
"mode": "light",
"note": "papel com primária #F3B06E (pastel)"
},
{
"id": "emerald-paper",
"label": "Emerald Paper",
"family": "emerald",
"preset": "esmeralda",
"mode": "light",
"note": "papel com primária #1E8F5E (pastel)"
},
{
"id": "terracotta-paper",
"label": "Terracotta Paper",
"family": "terracotta",
"preset": "terracota",
"mode": "light",
"note": "papel com primária #C4623B (pastel)"
},
{
"id": "olive-paper",
"label": "Olive Paper",
"family": "olive",
"preset": "oliva",
"mode": "light",
"note": "papel com primária #A5BC5F (pastel)"
},
{
"id": "amber-night",
"label": "Amber Night",
"family": "amber",
"preset": "ambar",
"mode": "dark",
"note": "quadro escuro com acento #F0A63A (neutros a 30°)"
},
{
"id": "graphite-neon",
"label": "Graphite Neon",
"family": "graphite",
"preset": "grafite",
"mode": "dark",
"note": "quadro escuro com acento #3DF2C8 (neutros a 215°)"
}
]
}components/FolderTab.jsx
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. */