npm - zark-design - Versions diffs - 1.0.0 → 3.0.0 - Mend

zark-design 1.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/bin/cli.js +364 -90
package/package.json +2 -2
package/templates/README.md.hbs +264 -0
package/templates/_shared/ASSETS-README.md.hbs +39 -0
package/templates/_shared/tokens.css.hbs +202 -0
package/templates/_shared/tokens.js.hbs +34 -0
package/templates/html/components.css +740 -0
package/templates/html/index.html +135 -0
package/templates/html/showcase.html +3550 -0
package/templates/jsx/App.example.jsx +229 -0
package/templates/jsx/components/AlertCritical.jsx +43 -0
package/templates/jsx/components/Avatar.jsx +41 -0
package/templates/jsx/components/Badge.jsx +12 -0
package/templates/jsx/components/Banner.jsx +42 -0
package/templates/jsx/components/Button.jsx +43 -0
package/templates/jsx/components/Chip.jsx +28 -0
package/templates/jsx/components/CodeBlock.jsx +42 -0
package/templates/jsx/components/EmptyState.jsx +27 -0
package/templates/jsx/components/Funnel.jsx +55 -0
package/templates/jsx/components/Input.jsx +53 -0
package/templates/jsx/components/KanbanColumn.jsx +51 -0
package/templates/jsx/components/Kbd.jsx +11 -0
package/templates/jsx/components/LeadCard.jsx +79 -0
package/templates/jsx/components/Modal.jsx +57 -0
package/templates/jsx/components/Panel.jsx +25 -0
package/templates/jsx/components/Section.jsx +28 -0
package/templates/jsx/components/Segmented.jsx +26 -0
package/templates/jsx/components/Sidebar.jsx +49 -0
package/templates/jsx/components/Spec.jsx +19 -0
package/templates/jsx/components/StatCard.jsx +44 -0
package/templates/jsx/components/TableActions.jsx +34 -0
package/templates/jsx/components/Tag.jsx +21 -0
package/templates/jsx/components/TagDot.jsx +26 -0
package/templates/jsx/components/Toast.jsx +25 -0
package/templates/jsx/components/Toggle.jsx +29 -0
package/templates/jsx/components.css +740 -0
package/templates/{icons.jsx → jsx/icons.jsx} +20 -9
package/templates/jsx/index.js +31 -0
package/templates/presets/zark/preset.json +26 -0
package/templates/REFERENCE.md +0 -376
package/templates/SHOWCASE.html +0 -254
package/templates/brand.jsx +0 -89
package/templates/components.jsx +0 -385
package/templates/design-canvas.jsx +0 -789
package/templates/foundations.jsx +0 -363
package/templates/layouts.jsx +0 -232
package/templates/patterns.jsx +0 -268
package/templates/primitives.jsx +0 -306
package/templates/tokens.css +0 -306
package/templates/visual-references/icon-zark.png +0 -0
package/templates/visual-references/logo-zark-principal.png +0 -0
package/templates/visual-references/pasted-1777605750385-0.png +0 -0
package/templates/visual-references/pasted-1777605766298-0.png +0 -0
package/templates/visual-references/pasted-1777605775820-0.png +0 -0
package/templates/visual-references/pasted-1777605789833-0.png +0 -0
package/templates/visual-references/pasted-1777605802420-0.png +0 -0
package/templates/visual-references/pasted-1777605812470-0.png +0 -0
package/templates/visual-references/pasted-1777605817688-0.png +0 -0
package/templates/visual-references/pasted-1777605828485-0.png +0 -0
package/templates/visual-references/pasted-1777605837137-0.png +0 -0
package/templates/visual-references/pasted-1777605849789-0.png +0 -0
package/templates/visual-references/pasted-1777605864942-0.png +0 -0
package/templates/visual-references/pasted-1777605877920-0.png +0 -0
package/templates/visual-references/pasted-1777605897353-0.png +0 -0
/package/templates/{assets/zark-logo.png → presets/zark/assets/logo-zark-laranja.png} +0 -0
/package/templates/{assets → presets/zark/assets}/zark-icon.png +0 -0

package/templates/README.md.hbs ADDED Viewed

@@ -0,0 +1,264 @@
+# {{name}} Design System — Apps
+{{nameDesc}}. Disponível em **HTML puro** e **React (JSX)**, ambos consumindo as mesmas folhas de estilo (`tokens.css` + `components.css`).
+Versão: **v3 · {{date}}** · gerado por `npx zark-design init{{#if preset}} --preset {{preset}}{{/if}}` · App Patterns derivados do CRM real.
+---
+## Estrutura
+```
+design-system-apps/
+├── README.md                          ← você está aqui
+│
+├── html/                              ← versão HTML pura
+│   ├── tokens.css                     ← variáveis CSS (cores, tipografia, espaçamento)
+│   ├── components.css                 ← classes de componente (.btn, .tag-dot, .stat...)
+│   ├── index.html                     ← exemplo mínimo de uso
+│   ├── showcase.html                  ← galeria completa interativa
+│   └── assets/
+│       ├── logo-zark-laranja.png
+│       └── zark-icon.png
+│
+└── jsx/                               ← versão React
+    ├── tokens.css                     ← (idêntico ao html/tokens.css)
+    ├── components.css                 ← (idêntico ao html/components.css)
+    ├── tokens.js                      ← tokens em JS para inline styles / charts
+    ├── icons.jsx                      ← 35 ícones outline
+    ├── index.js                       ← barrel export
+    ├── App.example.jsx                ← exemplo completo de uso
+    ├── components/
+    │   ├── Button.jsx
+    │   ├── Input.jsx                  ← + UrlInputFull
+    │   ├── Tag.jsx
+    │   ├── TagDot.jsx                 ← status, priority, space
+    │   ├── Badge.jsx
+    │   ├── Toggle.jsx
+    │   ├── Segmented.jsx
+    │   ├── Chip.jsx                   ← filter chips
+    │   ├── StatCard.jsx               ← KPI card unificado
+    │   ├── AlertCritical.jsx          ← banner vermelho de ação imediata
+    │   ├── Funnel.jsx                 ← + ProgressBar
+    │   ├── EmptyState.jsx
+    │   ├── KanbanColumn.jsx           ← + KanbanBoard
+    │   ├── LeadCard.jsx               ← Pipeline
+    │   ├── TableActions.jsx           ← check / edit / delete
+    │   ├── Sidebar.jsx                ← + SidebarLink, SidebarSection
+    │   ├── Panel.jsx                  ← card padrão
+    │   ├── Section.jsx                ← bloco de página
+    │   ├── Modal.jsx
+    │   ├── Toast.jsx
+    │   ├── Banner.jsx                 ← Announce + Tip
+    │   ├── CodeBlock.jsx
+    │   ├── Avatar.jsx                 ← + AvatarSpace
+    │   ├── Kbd.jsx
+    │   └── Spec.jsx
+    └── assets/
+        ├── logo-zark-laranja.png
+        └── zark-icon.png
+```
+---
+## Filosofia
+**Warm, neutral, ember-on-paper.**
+- `--paper` (#fafaf8) cremoso, NÃO branco puro.
+- `--brand-500` (#f56f10 — Liquid Lava) é a única cor de marca. Use com **moderação** em CTAs, focus, brand moments.
+- Hairlines de 1px em `--line-200`. Nunca borders grossos.
+- Sombras warm (`rgba(20,17,12,...)`), nunca azuis-frias.
+- Tipografia editorial: **Inter** pra UI e números · **JetBrains Mono** pra código e labels · **Space Grotesk** pra títulos.
+- **Sem pill.** Tags, chips, toggles, badges usam raio sm/md (4-6px). Avatares usam 50% (são círculos geométricos, não pills).
+---
+## Como usar — HTML puro
+1. Importe os 2 CSS no `<head>`:
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
+<link rel="stylesheet" href="/path/to/tokens.css"/>
+<link rel="stylesheet" href="/path/to/components.css"/>
+```
+2. Use as classes diretamente:
+```html
+<button class="btn btn-primary btn-md">Nova Tarefa</button>
+<span class="tag-dot s-todo">A FAZER</span>
+<span class="tag-dot p-urgent">URGENTE</span>
+<span class="tag-dot sp sp-vipcar">VIPCAR</span>
+<div class="stat">
+  <div class="stat-head">
+    <span class="stat-label">CONCLUÍDAS · SEMANA</span>
+    <span class="stat-icon green">✓</span>
+  </div>
+  <div class="stat-value">8</div>
+  <div class="stat-sub">+18% vs anterior</div>
+</div>
+```
+3. Veja `html/index.html` (exemplo prático) e `html/showcase.html` (galeria completa).
+---
+## Como usar — React (JSX)
+1. Copie a pasta `jsx/` pro seu projeto OU configure como pacote local.
+2. No entry-point (`main.jsx` / `App.jsx`):
+```jsx
+import './path/to/jsx/tokens.css';
+import './path/to/jsx/components.css';
+```
+3. Carregue as fontes (uma vez no `index.html` ou via `@import` no CSS).
+4. Importe componentes:
+```jsx
+import { Button, TagDot, StatCard, Icons } from './path/to/jsx';
+function Dashboard() {
+  return (
+    <>
+      <Button variant="primary" icon={<Icons.Plus size={14}/>}>
+        Nova Tarefa
+      </Button>
+      <TagDot kind="status"   value="todo">A FAZER</TagDot>
+      <TagDot kind="priority" value="urgent">URGENTE</TagDot>
+      <TagDot kind="space"    value="vipcar">VIPCAR</TagDot>
+      <StatCard
+        label="CONCLUÍDAS · SEMANA"
+        value="8"
+        sub="+18% vs anterior"
+        iconColor="green"
+        icon={<Icons.Check size={14}/>}
+      />
+    </>
+  );
+}
+```
+5. Veja `jsx/App.example.jsx` para o exemplo completo (sidebar + dashboard + kanban + modal).
+---
+## Catálogo de componentes
+### Primitivos
+| Componente | HTML class | JSX |
+|------------|-----------|-----|
+| Button     | `.btn .btn-{variant} .btn-{size}` | `<Button variant size icon iconRight loading>` |
+| Input      | `.input .input-{size}` | `<Input size icon suffix mono invalid/>` |
+| UrlInputFull | `.url-input-full` | `<UrlInputFull scheme placeholder/>` |
+| Tag        | `.tag .tag-{tone} .tag-{size}` | `<Tag tone size square>` |
+| TagDot     | `.tag-dot .{prefix}-{value}` | `<TagDot kind value>` |
+| Badge      | `.badge` | `<Badge count tone/>` |
+| Toggle     | `.toggle .toggle-sm .on` | `<Toggle on onChange size/>` |
+| Segmented  | `.segmented` | `<Segmented items value onChange/>` |
+| Chips      | `.chips .chip .active` | `<Chips items value onChange/>` |
+| Avatar     | `.avatar .avatar-sq` | `<Avatar name size color square src/>` |
+| AvatarSpace| `.av-space` | `<AvatarSpace name spaceKey size/>` |
+| Kbd        | `.kbd` | `<Kbd>⌘K</Kbd>` |
+### App Patterns (derivados do CRM)
+| Componente | HTML class | JSX |
+|------------|-----------|-----|
+| StatCard       | `.stat .is-critical` | `<StatCard label value sub icon iconColor progress critical/>` |
+| AlertCritical  | `.alert-critical` | `<AlertCritical title items footer onItemClick/>` |
+| Funnel         | `.funnel .funnel-stages` | `<Funnel stages={[]}/>` |
+| ProgressBar    | `.stat-progress` | `<ProgressBar value tone/>` |
+| KanbanColumn   | `.k-col .k-col-head .k-add` | `<KanbanColumn title count dotColor onAddClick/>` |
+| LeadCard       | `.lead-card .is-paused .is-overdue` | `<LeadCard name company status hot channels time followUp indicator paused overdue/>` |
+| EmptyState     | `.empty-state` | `<EmptyState icon text action/>` |
+| TableActions   | `.t-actions .t-act` | `<TableActions onConfirm onEdit onDelete/>` |
+### Layout
+| Componente | HTML class | JSX |
+|------------|-----------|-----|
+| Sidebar     | `.zk-sidebar .zk-sidebar-link` | `<Sidebar logo footer/>` + `<SidebarLink active icon shortcut/>` + `<SidebarSection/>` |
+| Panel       | `.panel .panel-head .panel-body` | `<Panel title kicker flush/>` |
+| Section     | `.section .eyebrow` + h2 | `<Section eyebrow title description id/>` |
+| Modal       | `.modal-overlay .modal` | `<Modal open onClose title description footer/>` |
+| Toast       | `.toast .toast-success .toast-danger` | `<Toast tone icon/>` |
+| Announce    | `.announce` | `<Announce/>` |
+| Tip         | `.tip` | `<Tip eyebrow title desc icon onClose/>` |
+| CodeBlock   | `.code-block` | `<CodeBlock code onCopy onPreview/>` |
+| Spec        | `.spec` | `<Spec label value/>` |
+### Ícones (35)
+35 ícones outline em `Icons.{Name}`. Veja `jsx/icons.jsx` ou abra `html/showcase.html` (seção 26) para a galeria visual.
+---
+## Tokens essenciais
+### Status (tag-dot prefixo `s-`)
+- `s-todo`, `s-progress`, `s-review`, `s-done`, `s-canceled`
+- Modificadores: `s-overdue`, `s-paused`, `s-followup`
+### Prioridade (`p-`)
+- `p-urgent`, `p-high`, `p-med`, `p-low`
+### Espaços/Clientes (`sp sp-{key}`)
+- `sp-zark`, `sp-allsec`, `sp-vipcar`, `sp-limppe`, `sp-gerais`, `sp-mixshop`, `sp-vipseg`
+### Cores semânticas
+- `--success-500` (verde), `--warning-500` (amarelo), `--danger-500` (vermelho), `--info-500` (azul)
+### Espaçamento (4px base)
+- `--sp-4` (8px), `--sp-8` (16px), `--sp-12` (24px), `--sp-16` (32px), `--sp-20` (40px)
+### Raios (sem pill — Jordan-approved)
+- `--r-xs` (3px), `--r-sm` (4px), `--r-md` (6px), `--r-lg` (8px), `--r-xl` (12px), `--r-2xl` (16px), `--r-3xl` (20px)
+---
+## Dark mode
+Toggle automático via OS, ou manual:
+```js
+document.documentElement.dataset.theme = 'dark';   // força dark
+document.documentElement.dataset.theme = 'light';  // força light
+delete document.documentElement.dataset.theme;     // segue OS
+```
+A cor de marca (`--brand-500`) **NUNCA muda no dark mode** — é assinatura ZARK. Apenas neutros, semânticos suaves e sombras ajustam.
+---
+## Regras importantes (NÃO fazer)
+- ❌ Trocar `--brand-500` por outra cor.
+- ❌ Hardcode de hex (`#f56f10` no código). SEMPRE use `var(--brand-500)`.
+- ❌ Sombras frias (`rgba(0,0,0,...)`). Use as warm `rgba(20,17,12,...)`.
+- ❌ `border-radius: 999px` ou `--r-pill`. Pill foi removido v3.
+- ❌ Display font (Space Grotesk) em UI body — só títulos h1/h2/h3, modal titles, brand.
+- ❌ Inter em títulos — display font é Space Grotesk.
+- ❌ Animação > 280ms em microinterações.
+- ❌ Brand color como bg dominante de tela inteira.
+---
+## Showcase
+Para ver TUDO renderizado em uma página interativa, abra:
+```
+html/showcase.html
+```
+Tem light/dark toggle, todos os componentes, toda a paleta, todos os ícones — pronto pra inspecionar e copiar.
+---
+*Mantido por @renankennedy · ZARK · 2026*

package/templates/_shared/ASSETS-README.md.hbs ADDED Viewed

@@ -0,0 +1,39 @@
+# assets/ — Logos e ícones do {{name}}
+Esta pasta está vazia porque você usou o modo **custom** do `zark-design init`. Cole aqui as imagens da marca do seu sistema.
+## Arquivos recomendados
+```
+assets/
+├── logo-primary.png        ← logo horizontal completo (cor, fundo claro)
+├── logo-primary-dark.png   ← logo horizontal completo (fundo escuro)
+├── logo-mark.png           ← só o símbolo/mark (sem texto)
+├── icon.png                ← ícone quadrado (favicon, app icon)
+└── (opcional) logo.svg     ← versão vetorial pra escalabilidade
+```
+## Tamanhos sugeridos
+| Arquivo | Tamanho | Uso |
+|---|---|---|
+| `logo-primary.png` | ~600×180px | Sidebar, topbar, marketing |
+| `logo-mark.png` | ~256×256px | Avatares, badges, espaço apertado |
+| `icon.png` | 512×512px | Favicon, PWA manifest, app store |
+## Convenção de nomenclatura nos componentes
+Os JSX usam paths relativos. Exemplo em `jsx/components/Sidebar.jsx`:
+```jsx
+<img src="../assets/logo-primary.png" alt="{{name}}" />
+```
+Mantenha os nomes acima ou ajuste as referências em:
+- `jsx/components/Sidebar.jsx`
+- `html/showcase.html`
+- `html/index.html`
+## Logos do {{name}}
+> **Nota:** se você não tem os arquivos finais ainda, use placeholders temporários. O design system funciona sem as imagens (o JSX vai mostrar alt-text), mas a sidebar fica esquisita.

package/templates/_shared/tokens.css.hbs ADDED Viewed

@@ -0,0 +1,202 @@
+/* ============================================================
+   {{NAME}} DESIGN SYSTEM — TOKENS
+   v3 · Sistemas/Apps · {{date}}
+   Importe este arquivo no entry-point do projeto antes de
+   components.css.
+   Gerado por: npx zark-design init{{#if preset}} --preset {{preset}}{{/if}}
+   ============================================================ */
+:root {
+  /* ---------- BRAND ({{name}}) ---------- */
+  --brand-50:  {{brand.50}};
+  --brand-100: {{brand.100}};
+  --brand-200: {{brand.200}};
+  --brand-300: {{brand.300}};
+  --brand-400: {{brand.400}};
+  --brand-500: {{brand.500}};   /* primary */
+  --brand-600: {{brand.600}};
+  --brand-700: {{brand.700}};
+  --brand-800: {{brand.800}};
+  --brand-900: {{brand.900}};
+  --brand: var(--brand-500);    /* alias semântico */
+  /* ---------- NEUTRALS (warm paper → ink) ---------- */
+  --paper:     #fafaf8;
+  --canvas:    #f5f4f1;
+  --surface:   #ffffff;
+  --line-100:  #f0eeea;
+  --line-200:  #e8e6e1;
+  --line-300:  #d8d5cf;
+  --ink-50:    #f4f3f0;
+  --ink-100:   #e8e6e1;
+  --ink-200:   #c8c5bf;
+  --ink-300:   #a09c95;
+  --ink-400:   #6f6b64;
+  --ink-500:   #4a4741;
+  --ink-600:   #2e2c28;
+  --ink-700:   #1a1916;
+  --ink-800:   #111110;
+  --ink-900:   #0a0a09;
+  /* fundos dark — usados pelo tema dark */
+  --bg-void:    #151419;
+  --bg-glucon:  #1b1a1e;
+  /* ---------- SEMANTIC ---------- */
+  --success-50:  #ecfdf3;
+  --success-500: #10a960;
+  --success-700: #067a44;
+  --warning-50:  #fff8e6;
+  --warning-500: #d99000;
+  --warning-700: #9a6500;
+  --danger-50:   #fef1f1;
+  --danger-500:  #dc3545;
+  --danger-700:  #a52833;
+  --info-50:     #eef5ff;
+  --info-500:    #2f7adc;
+  --info-700:    #1f5ba8;
+  --tag-bg:    var(--brand-50);
+  --tag-fg:    var(--brand-700);
+  --code-bg:   var(--brand-50);
+  --code-fg:   var(--brand-700);
+  /* ---------- TYPOGRAPHY ---------- */
+  --font-sans:    "{{fonts.ui}}", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono:    "{{fonts.mono}}", "SF Mono", Menlo, Consolas, monospace;
+  --font-display: "{{fonts.display}}", "{{fonts.ui}}", sans-serif;
+  --font-ui:      "{{fonts.ui}}", -apple-system, sans-serif;
+  /* type scale */
+  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
+  --fs-base: 14px; --fs-lg: 16px; --fs-xl: 18px;
+  --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px;
+  --fs-5xl: 48px; --fs-6xl: 64px; --fs-display: 88px;
+  --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.45; --lh-loose: 1.6;
+  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0;
+  --ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.14em;
+  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
+  /* ---------- SPACING (4px base) ---------- */
+  --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px;
+  --sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px;
+  --sp-10: 20px; --sp-12: 24px; --sp-14: 28px; --sp-16: 32px;
+  --sp-20: 40px; --sp-24: 48px; --sp-32: 64px; --sp-40: 80px; --sp-48: 96px;
+  /* ---------- RADII (sem pill — design choice) ---------- */
+  --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
+  --r-xl: 12px; --r-2xl: 16px; --r-3xl: 20px;
+  /* ---------- SHADOWS (warm, não frias) ---------- */
+  --shadow-xs:    0 1px 0 rgba(20, 17, 12, 0.04);
+  --shadow-sm:    0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
+  --shadow-md:    0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
+  --shadow-lg:    0 12px 32px rgba(20, 17, 12, 0.08), 0 2px 6px rgba(20, 17, 12, 0.04);
+  --shadow-xl:    0 24px 64px rgba(20, 17, 12, 0.12), 0 4px 12px rgba(20, 17, 12, 0.05);
+  --shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);
+  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  --ring-focus:      0 0 0 3px {{brand.ring}};
+  --ring-focus-soft: 0 0 0 3px {{brand.ringSoft}};
+  /* ---------- MOTION ---------- */
+  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --t-fast:   120ms; --t-base: 180ms; --t-slow: 280ms; --t-slower: 420ms;
+  /* ---------- LAYOUT ---------- */
+  --sidebar-w: 240px; --topbar-h: 56px; --container-max: 1280px;
+}
+/* ============================================================ BASE */
+* { box-sizing: border-box; }
+html, body {
+  margin: 0; padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--fs-base);
+  line-height: var(--lh-base);
+  color: var(--ink-700);
+  background: var(--paper);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+::selection { background: var(--brand-200); color: var(--ink-700); }
+a { color: inherit; }
+button { font-family: inherit; }
+/* ============================================================
+   DARK THEME — opt-in via [data-theme="dark"] OU auto via prefers-color-scheme
+   ============================================================
+   Filosofia: a brand color MANTÉM os mesmos valores no dark — é assinatura.
+   O que muda são neutros, semânticos suaves, sombras e ring-focus.
+   ============================================================ */
+[data-theme="dark"] {
+  --paper:     #0e0d11;
+  --canvas:    var(--bg-void);
+  --surface:   var(--bg-glucon);
+  --line-100:  #232227;
+  --line-200:  #2c2b32;
+  --line-300:  #3a383f;
+  --ink-50:    #1a1916;
+  --ink-100:   #2c2b27;
+  --ink-200:   #4a4741;
+  --ink-300:   #6f6b64;
+  --ink-400:   #a09c95;
+  --ink-500:   #c8c5bf;
+  --ink-600:   #e0ddd6;
+  --ink-700:   #f0ede5;
+  --ink-800:   #f7f5ef;
+  --ink-900:   #fafaf8;
+  --success-50: #0f2419;
+  --warning-50: #2a1f08;
+  --danger-50:  #2a1010;
+  --info-50:    #0e1a2c;
+  --tag-bg:     var(--brand-800);
+  --tag-fg:     var(--brand-200);
+  --code-bg:    var(--brand-900);
+  --code-fg:    var(--brand-300);
+  --shadow-xs:    0 1px 0 rgba(0, 0, 0, 0.5);
+  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
+  --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
+  --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  --ring-focus:      0 0 0 3px {{brand.ringDark}};
+  --ring-focus-soft: 0 0 0 3px {{brand.ringSoftDark}};
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --paper:     #0e0d11;
+    --canvas:    var(--bg-void);
+    --surface:   var(--bg-glucon);
+    --line-100:  #232227;
+    --line-200:  #2c2b32;
+    --line-300:  #3a383f;
+    --ink-50:    #1a1916;  --ink-100: #2c2b27; --ink-200: #4a4741;
+    --ink-300:   #6f6b64;  --ink-400: #a09c95; --ink-500: #c8c5bf;
+    --ink-600:   #e0ddd6;  --ink-700: #f0ede5; --ink-800: #f7f5ef; --ink-900: #fafaf8;
+    --success-50: #0f2419; --warning-50: #2a1f08;
+    --danger-50:  #2a1010; --info-50:    #0e1a2c;
+    --tag-bg:  var(--brand-800); --tag-fg:  var(--brand-200);
+    --code-bg: var(--brand-900); --code-fg: var(--brand-300);
+  }
+}

package/templates/_shared/tokens.js.hbs ADDED Viewed

@@ -0,0 +1,34 @@
+// Tokens em JS — para casos onde você precisa do valor em runtime
+// (animações, charts, inline styles dinâmicos). Para CSS, use tokens.css.
+export const tokens = {
+  brand: {
+    50: '{{brand.50}}', 100: '{{brand.100}}', 200: '{{brand.200}}',
+    300: '{{brand.300}}', 400: '{{brand.400}}', 500: '{{brand.500}}',
+    600: '{{brand.600}}', 700: '{{brand.700}}', 800: '{{brand.800}}',
+    900: '{{brand.900}}',
+    primary: '{{brand.500}}',
+  },
+  neutral: {
+    paper: '#fafaf8', canvas: '#f5f4f1', surface: '#ffffff',
+    line: { 100: '#f0eeea', 200: '#e8e6e1', 300: '#d8d5cf' },
+    ink: {
+      50: '#f4f3f0', 100: '#e8e6e1', 200: '#c8c5bf', 300: '#a09c95',
+      400: '#6f6b64', 500: '#4a4741', 600: '#2e2c28', 700: '#1a1916',
+      800: '#111110', 900: '#0a0a09',
+    },
+  },
+  semantic: {
+    success: { 50: '#ecfdf3', 500: '#10a960', 700: '#067a44' },
+    warning: { 50: '#fff8e6', 500: '#d99000', 700: '#9a6500' },
+    danger:  { 50: '#fef1f1', 500: '#dc3545', 700: '#a52833' },
+    info:    { 50: '#eef5ff', 500: '#2f7adc', 700: '#1f5ba8' },
+  },
+  fonts: {
+    ui: '"{{fonts.ui}}"',
+    mono: '"{{fonts.mono}}"',
+    display: '"{{fonts.display}}"',
+  },
+};
+export default tokens;