zark-design 3.0.0 → 3.0.2

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 (11) hide show
  1. package/package.json +1 -1
  2. package/templates/README.md.hbs +2 -2
  3. package/templates/html/components.css +1 -1
  4. package/templates/html/{index.html → index.html.hbs} +3 -3
  5. package/templates/html/{showcase.html → showcase.html.hbs} +46 -228
  6. package/templates/jsx/{App.example.jsx → App.example.jsx.hbs} +7 -7
  7. package/templates/jsx/components.css +1 -1
  8. package/templates/jsx/icons.jsx +1 -1
  9. package/templates/jsx/index.js +27 -27
  10. /package/templates/presets/zark/assets/{zark-icon.png → icon.png} +0 -0
  11. /package/templates/presets/zark/assets/{logo-zark-laranja.png → logo-primary.png} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zark-design",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "description": "Design system scaffolder seguindo método ZARK — `npx zark-design init` em modo preset (ZARK pronto) ou custom (cor e logos suas, paleta 50→900 gerada). HTML + JSX side-by-side. Dark mode nativo. Sem dependência runtime.",
5
5
  "type": "module",
6
6
  "bin": {
package/templates/README.md.hbs CHANGED
@@ -233,7 +233,7 @@ document.documentElement.dataset.theme = 'light'; // força light
233
233
  delete document.documentElement.dataset.theme; // segue OS
234
234
  ```
235
235
 
236
- A cor de marca (`--brand-500`) **NUNCA muda no dark mode** — é assinatura ZARK. Apenas neutros, semânticos suaves e sombras ajustam.
236
+ A cor de marca (`--brand-500`) **NUNCA muda no dark mode** — é assinatura da marca. Apenas neutros, semânticos suaves e sombras ajustam.
237
237
 
238
238
  ---
239
239
 
@@ -261,4 +261,4 @@ Tem light/dark toggle, todos os componentes, toda a paleta, todos os ícones —
261
261
 
262
262
  ---
263
263
 
264
- *Mantido por @renankennedy · ZARK · 2026*
264
+ *{{name}} Design System · gerado por `zark-design` · {{date}}*
package/templates/html/components.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* ============================================================
2
- ZARK DESIGN SYSTEM — COMPONENTS
2
+ Brand DESIGN SYSTEM — COMPONENTS
3
3
  v3 · Sistemas/Apps · 2026
4
4
  Importe APÓS tokens.css.
5
5
  ============================================================ */
package/templates/html/{index.html → index.html.hbs} RENAMED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8"/>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>ZARK · Exemplo mínimo</title>
6
+ <title>{{name}} · Exemplo</title>
7
7
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
8
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
9
9
  <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"/>
@@ -18,7 +18,7 @@
18
18
  <!-- SIDEBAR -->
19
19
  <aside class="zk-sidebar">
20
20
  <div class="zk-sidebar-brand">
21
- <img src="assets/logo-zark-laranja.png" alt="ZARK" class="zk-sidebar-logo"/>
21
+ <img src="assets/logo-primary.png" alt="{{name}}" class="zk-sidebar-logo"/>
22
22
  </div>
23
23
 
24
24
  <div class="zk-sidebar-eyebrow">Workspace</div>
@@ -80,7 +80,7 @@
80
80
  <div class="alert-critical-row">
81
81
  <span class="tag-dot p-urgent">URGENTE</span>
82
82
  <span style="font-weight:500">Enviar proposta para TR PAULO</span>
83
- <span class="src">ZARK · Tarefas</span>
83
+ <span class="src">{{name}} · Tarefas</span>
84
84
  <span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
85
85
  </div>
86
86
  <div class="alert-critical-row">
package/templates/html/{showcase.html → showcase.html.hbs} RENAMED
@@ -3,200 +3,18 @@
3
3
  <head>
4
4
  <meta charset="UTF-8"/>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>ZARK — Design System (Sistemas)</title>
6
+ <title>{{name}} — Design System</title>
7
7
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
8
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
9
9
  <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"/>
10
10
 
11
+ <link rel="stylesheet" href="tokens.css"/>
12
+ <link rel="stylesheet" href="components.css"/>
11
13
  <style>
12
14
  /* ============================================================
13
- ZARK DESIGN SYSTEM — TOKENS (embedded)
15
+ SHOWCASE — page-specific styles (sidebar, topbar, sections)
16
+ Os tokens e componentes vêm de tokens.css + components.css.
14
17
  ============================================================ */
15
- :root {
16
- /* Brand / Ember */
17
- --brand-50: #fff3e9;
18
- --brand-100: #ffe1c8;
19
- --brand-200: #ffc28e;
20
- --brand-300: #ffa056;
21
- --brand-400: #ff8a3a;
22
- --brand-500: #f56f10;
23
- --brand-600: #d45e0d;
24
- --brand-700: #ad4a09;
25
- --brand-800: #843706;
26
- --brand-900: #5e2704;
27
- --brand: #f56f10;
28
- --bg-void: #151419;
29
- --bg-glucon: #1b1a1e;
30
-
31
- /* Neutrals */
32
- --paper: #fafaf8;
33
- --canvas: #f5f4f1;
34
- --surface: #ffffff;
35
- --line-100: #f0eeea;
36
- --line-200: #e8e6e1;
37
- --line-300: #d8d5cf;
38
-
39
- --ink-50: #f4f3f0;
40
- --ink-100: #e8e6e1;
41
- --ink-200: #c8c5bf;
42
- --ink-300: #a09c95;
43
- --ink-400: #6f6b64;
44
- --ink-500: #4a4741;
45
- --ink-600: #2e2c28;
46
- --ink-700: #1a1916;
47
- --ink-800: #111110;
48
- --ink-900: #0a0a09;
49
-
50
- /* Semantic */
51
- --success-50: #ecfdf3;
52
- --success-500: #10a960;
53
- --success-700: #067a44;
54
- --warning-50: #fff8e6;
55
- --warning-500: #d99000;
56
- --warning-700: #9a6500;
57
- --danger-50: #fef1f1;
58
- --danger-500: #dc3545;
59
- --danger-700: #a52833;
60
- --info-50: #eef5ff;
61
- --info-500: #2f7adc;
62
- --info-700: #1f5ba8;
63
-
64
- --tag-bg: #fff0e0;
65
- --tag-fg: #ad4a09;
66
- --code-bg: #fff5ea;
67
- --code-fg: #ad4a09;
68
-
69
- /* Typography */
70
- --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
71
- --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
72
- --font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
73
- --font-ui: "Inter", -apple-system, sans-serif;
74
-
75
- --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
76
- --fs-base:14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px;
77
- --fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 64px;
78
- --fs-display: 88px;
79
-
80
- --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.45; --lh-loose: 1.6;
81
-
82
- --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0;
83
- --ls-wide: 0.04em; --ls-wider: 0.08em; --ls-widest: 0.14em;
84
-
85
- --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
86
-
87
- /* Spacing */
88
- --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px;
89
- --sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px; --sp-10: 20px;
90
- --sp-12: 24px; --sp-14: 28px; --sp-16: 32px; --sp-20: 40px; --sp-24: 48px;
91
- --sp-32: 64px; --sp-40: 80px; --sp-48: 96px;
92
-
93
- /* Radii */
94
- --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
95
- --r-xl: 12px; --r-2xl: 16px; --r-3xl: 20px;
96
-
97
- /* Shadows */
98
- --shadow-xs: 0 1px 0 rgba(20, 17, 12, 0.04);
99
- --shadow-sm: 0 1px 2px rgba(20, 17, 12, 0.05), 0 0 0 1px rgba(20, 17, 12, 0.04);
100
- --shadow-md: 0 4px 12px rgba(20, 17, 12, 0.06), 0 1px 2px rgba(20, 17, 12, 0.05);
101
- --shadow-lg: 0 12px 32px rgba(20, 17, 12, 0.08), 0 2px 6px rgba(20, 17, 12, 0.04);
102
- --shadow-xl: 0 24px 64px rgba(20, 17, 12, 0.12), 0 4px 12px rgba(20, 17, 12, 0.05);
103
- --shadow-modal: 0 32px 96px rgba(20, 17, 12, 0.18), 0 8px 24px rgba(20, 17, 12, 0.08);
104
- --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);
105
-
106
- --ring-focus: 0 0 0 3px rgba(255, 93, 31, 0.20);
107
- --ring-focus-soft: 0 0 0 3px rgba(255, 93, 31, 0.12);
108
-
109
- /* Motion */
110
- --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
111
- --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
112
- --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
113
- --t-fast: 120ms; --t-base: 180ms; --t-slow: 280ms; --t-slower: 420ms;
114
-
115
- /* Layout */
116
- --sidebar-w: 240px; --topbar-h: 56px; --container-max: 1280px;
117
-
118
- /* ---------- SPACE / CLIENTE COLORS (CRM) ----------
119
- Cor única por espaço — usada em ícone, tag, avatar, accent.
120
- Sempre tom mais saturado (500) + tom suave (50/100) para bg leve. */
121
- --space-zark: #f56f10; /* brand-500 — brand */
122
- --space-zark-soft: #fff3e9;
123
- --space-allsec: #c2410c; /* burnt orange */
124
- --space-allsec-soft: #fff3e9;
125
- --space-vipcar: #ea580c; /* deep orange */
126
- --space-vipcar-soft: #fff3e9;
127
- --space-limppe: #f59e0b; /* amber */
128
- --space-limppe-soft: #fff8e6;
129
- --space-gerais: #1f2937; /* slate near-black */
130
- --space-gerais-soft: #f4f3f0;
131
- --space-mixshop: #b91c1c; /* deep red */
132
- --space-mixshop-soft:#fef1f1;
133
- --space-vipseg: #991b1b; /* darker red */
134
- --space-vipseg-soft: #fef1f1;
135
- }
136
-
137
- [data-theme="dark"] {
138
- --brand-50: #2a1810; --brand-100: #3d2114; --brand-200: #5e2704;
139
- --brand-300: #843706; --brand-400: #ad4a09; --brand-500: #f56f10;
140
- --brand-600: #ff8a3a; --brand-700: #ffa056; --brand-800: #ffc28e;
141
- --brand-900: #ffe1c8;
142
-
143
- --paper: #0e0d11; --canvas: #151419; --surface: #1b1a1e;
144
- --line-100: #232227; --line-200: #2c2b32; --line-300: #3a383f;
145
-
146
- --ink-50: #1a1916; --ink-100: #2c2b27; --ink-200: #4a4741;
147
- --ink-300: #6f6b64; --ink-400: #a09c95; --ink-500: #c8c5bf;
148
- --ink-600: #e0ddd6; --ink-700: #f0ede5; --ink-800: #f7f5ef;
149
- --ink-900: #fafaf8;
150
-
151
- --success-50: #0f2419;
152
- --warning-50: #2a1f08;
153
- --danger-50: #2a1010;
154
- --info-50: #0e1a2c;
155
-
156
- --tag-bg: #3d2114; --tag-fg: #ffc28e;
157
- --code-bg: #2a1810; --code-fg: #ffa056;
158
-
159
- --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.5);
160
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
161
- --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
162
- --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
163
- --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
164
- --shadow-modal: 0 32px 96px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
165
- --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
166
-
167
- --ring-focus: 0 0 0 3px rgba(255, 138, 58, 0.30);
168
- --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
169
- }
170
-
171
- /* ============================================================
172
- BASE
173
- ============================================================ */
174
- * { box-sizing: border-box; }
175
- html, body {
176
- margin: 0; padding: 0;
177
- font-family: var(--font-sans);
178
- font-size: var(--fs-base);
179
- line-height: var(--lh-base);
180
- color: var(--ink-700);
181
- background: var(--paper);
182
- -webkit-font-smoothing: antialiased;
183
- text-rendering: optimizeLegibility;
184
- }
185
- ::selection { background: var(--brand-200); color: var(--ink-700); }
186
- a { color: inherit; text-decoration: none; }
187
- button { font-family: inherit; }
188
-
189
- @keyframes zk-spin { to { transform: rotate(360deg); } }
190
- @keyframes zk-fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }
191
-
192
- /* ============================================================
193
- APP SHELL
194
- ============================================================ */
195
- .app {
196
- display: grid;
197
- grid-template-columns: var(--sidebar-w) 1fr;
198
- min-height: 100vh;
199
- }
200
18
 
201
19
  /* ---------- SIDEBAR ---------- */
202
20
  .sidebar {
@@ -489,7 +307,7 @@ main { background: var(--paper); }
489
307
  .tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
490
308
  .tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
491
309
  .tag-square { border-radius: var(--r-xs); }
492
- .tag-ember { background: var(--brand-50); color: var(--brand-700); }
310
+ .tag-brand { background: var(--brand-50); color: var(--brand-700); }
493
311
  .tag-mono { background: var(--tag-bg); color: var(--tag-fg); }
494
312
  .tag-success { background: var(--success-50); color: var(--success-700); }
495
313
  .tag-warning { background: var(--warning-50); color: var(--warning-700); }
@@ -1389,7 +1207,7 @@ main { background: var(--paper); }
1389
1207
  <!-- =================== SIDEBAR =================== -->
1390
1208
  <aside class="sidebar">
1391
1209
  <div class="sidebar-brand">
1392
- <img src="assets/logo-zark-laranja.png" alt="ZARK" class="sidebar-logo"/>
1210
+ <img src="assets/logo-primary.png" alt="{{name}}" class="sidebar-logo"/>
1393
1211
  </div>
1394
1212
 
1395
1213
  <div class="sidebar-eyebrow">Foundations</div>
@@ -1469,7 +1287,7 @@ main { background: var(--paper); }
1469
1287
  <div class="eyebrow">01 — Foundations</div>
1470
1288
  <h2>Paleta cromática</h2>
1471
1289
  </div>
1472
- <p class="section-desc">Sistema warm, neutro, ember-on-paper. Liquid Lava (#F56F10) é a única cor de marca — usar com moderação em CTAs primários, focus rings e brand moments. Nunca como background dominante.</p>
1290
+ <p class="section-desc">Sistema warm, neutro, brand-on-paper. A cor da marca (`var(--brand-500)`) é a única assinatura cromática — usar com moderação em CTAs primários, focus rings e brand moments. Nunca como background dominante.</p>
1473
1291
  </div>
1474
1292
 
1475
1293
  <div class="stack">
@@ -1477,7 +1295,7 @@ main { background: var(--paper); }
1477
1295
  <!-- BRAND -->
1478
1296
  <div class="panel">
1479
1297
  <div class="panel-head">
1480
- <div class="panel-title">Brand · Liquid Lava scale</div>
1298
+ <div class="panel-title">Brand · scale 50→900</div>
1481
1299
  <div class="panel-kicker">10 tokens</div>
1482
1300
  </div>
1483
1301
  <div class="panel-body">
@@ -1538,12 +1356,12 @@ main { background: var(--paper); }
1538
1356
  </div>
1539
1357
  <div style="margin-bottom:24px">
1540
1358
  <div class="sub-label">JetBrains Mono — Código & labels</div>
1541
- <div style="font-family:var(--font-mono); font-size:var(--fs-xl); color:var(--ink-700); line-height:1.2">const ember = #F56F10</div>
1359
+ <div style="font-family:var(--font-mono); font-size:var(--fs-xl); color:var(--ink-700); line-height:1.2">const brand = #F56F10</div>
1542
1360
  <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-mono)</div>
1543
1361
  </div>
1544
1362
  <div>
1545
1363
  <div class="sub-label">Space Grotesk — Títulos</div>
1546
- <div style="font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:700; color:var(--ink-700); letter-spacing:-0.02em; line-height:1.1">ZARK Sistemas</div>
1364
+ <div style="font-family:var(--font-display); font-size:var(--fs-4xl); font-weight:700; color:var(--ink-700); letter-spacing:-0.02em; line-height:1.1">{{name}} Sistemas</div>
1547
1365
  <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-400); margin-top:6px">var(--font-display) · h1 · h2 · h3 · modal title</div>
1548
1366
  </div>
1549
1367
  </div>
@@ -1642,7 +1460,7 @@ main { background: var(--paper); }
1642
1460
  <div class="eyebrow">06 — Primitives</div>
1643
1461
  <h2>Botões</h2>
1644
1462
  </div>
1645
- <p class="section-desc">5 variantes × 4 tamanhos. Primary é a única cor de marca em CTA — use com moderação. Secondary é o default. Soft pra ações ember de menor peso. Ghost pra ações terciárias e icon-only.</p>
1463
+ <p class="section-desc">5 variantes × 4 tamanhos. Primary é a única cor de marca em CTA — use com moderação. Secondary é o default. Soft pra ações brand de menor peso. Ghost pra ações terciárias e icon-only.</p>
1646
1464
  </div>
1647
1465
 
1648
1466
  <div class="panel">
@@ -1713,7 +1531,7 @@ main { background: var(--paper); }
1713
1531
  <div class="spec"><span class="l">Heights</span><span class="v">22 / 28 / 32 / 40 px</span></div>
1714
1532
  <div class="spec"><span class="l">Border radius</span><span class="v">--r-sm → --r-lg</span></div>
1715
1533
  <div class="spec"><span class="l">Primary fill</span><span class="v">brand-600 → brand-700 hover</span></div>
1716
- <div class="spec"><span class="l">Focus ring</span><span class="v">--ring-focus (3px ember 20%)</span></div>
1534
+ <div class="spec"><span class="l">Focus ring</span><span class="v">--ring-focus (3px brand 20%)</span></div>
1717
1535
  </div>
1718
1536
  </div>
1719
1537
  </div>
@@ -1727,7 +1545,7 @@ main { background: var(--paper); }
1727
1545
  <div class="eyebrow">07 — Primitives</div>
1728
1546
  <h2>Inputs</h2>
1729
1547
  </div>
1730
- <p class="section-desc">Border <code style="font-family:var(--font-mono);color:var(--brand-700)">--line-300</code>, raio <code style="font-family:var(--font-mono);color:var(--brand-700)">--r-lg</code>. Focus eleva o ring ember. Estado <code style="font-family:var(--font-mono);color:var(--brand-700)">invalid</code> troca a borda pra danger. URL input full-width é o padrão para campos de URL em hero.</p>
1548
+ <p class="section-desc">Border <code style="font-family:var(--font-mono);color:var(--brand-700)">--line-300</code>, raio <code style="font-family:var(--font-mono);color:var(--brand-700)">--r-lg</code>. Focus eleva o ring brand. Estado <code style="font-family:var(--font-mono);color:var(--brand-700)">invalid</code> troca a borda pra danger. URL input full-width é o padrão para campos de URL em hero.</p>
1731
1549
  </div>
1732
1550
 
1733
1551
  <div class="panel">
@@ -1824,7 +1642,7 @@ main { background: var(--paper); }
1824
1642
  <div class="panel-body">
1825
1643
  <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tags — status (rounded-sm)</div></div>
1826
1644
  <div class="row">
1827
- <span class="tag tag-ember">New</span>
1645
+ <span class="tag tag-brand">New</span>
1828
1646
  <span class="tag">Optional</span>
1829
1647
  <span class="tag tag-success">Claimed</span>
1830
1648
  <span class="tag tag-success">Completed</span>
@@ -1838,15 +1656,15 @@ main { background: var(--paper); }
1838
1656
  <span class="tag tag-mono tag-square tag-xs">TypeScript</span>
1839
1657
  <span class="tag tag-mono tag-square tag-xs">Python</span>
1840
1658
  <span class="tag tag-mono tag-square tag-xs">Next.js</span>
1841
- <span class="tag tag-mono tag-square tag-xs">ZARK SDK</span>
1659
+ <span class="tag tag-mono tag-square tag-xs">{{name}} SDK</span>
1842
1660
  <span class="tag tag-mono tag-square tag-xs">v1.0.4</span>
1843
1661
  </div>
1844
1662
 
1845
1663
  <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Tamanhos</div></div>
1846
1664
  <div class="row">
1847
- <span class="tag tag-ember tag-xs">XS</span>
1848
- <span class="tag tag-ember tag-sm">SM</span>
1849
- <span class="tag tag-ember tag-md">MD</span>
1665
+ <span class="tag tag-brand tag-xs">XS</span>
1666
+ <span class="tag tag-brand tag-sm">SM</span>
1667
+ <span class="tag tag-brand tag-md">MD</span>
1850
1668
  </div>
1851
1669
 
1852
1670
  <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Notification badges</div></div>
@@ -2032,7 +1850,7 @@ main { background: var(--paper); }
2032
1850
  <div class="demo-sidebar">
2033
1851
  <div class="ds-side">
2034
1852
  <div style="padding:8px 10px 16px">
2035
- <img src="assets/logo-zark-laranja.png" alt="ZARK" style="height:18px; display:block"/>
1853
+ <img src="assets/logo-primary.png" alt="{{name}}" style="height:18px; display:block"/>
2036
1854
  </div>
2037
1855
  <div style="padding:0 4px 8px">
2038
1856
  <label class="input input-sm">
@@ -2178,7 +1996,7 @@ main { background: var(--paper); }
2178
1996
  <span class="ico"><svg width="14" height="14" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="5"/><path d="M12 12l3 3"/></svg></span>
2179
1997
  <span class="label">Search</span>
2180
1998
  <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M7 4l5 5-5 5"/></svg>
2181
- <span class="tag tag-ember tag-xs">NEW</span>
1999
+ <span class="tag tag-brand tag-xs">NEW</span>
2182
2000
  </div>
2183
2001
  <div class="desc">Search the web and get full content from results.</div>
2184
2002
  </div>
@@ -2264,11 +2082,11 @@ main { background: var(--paper); }
2264
2082
  <div class="title">30+ Examples</div>
2265
2083
  <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300)"><path d="M5 3h10v10M5 13L15 3"/></svg>
2266
2084
  </div>
2267
- <div class="desc">Collection of simple projects built with ZARK</div>
2085
+ <div class="desc">Collection of simple projects built with {{name}}</div>
2268
2086
  <div class="tags">
2269
2087
  <span class="tag tag-mono tag-square tag-xs">TypeScript</span>
2270
2088
  <span class="tag tag-mono tag-square tag-xs">Python</span>
2271
- <span class="tag tag-mono tag-square tag-xs">ZARK SDK</span>
2089
+ <span class="tag tag-mono tag-square tag-xs">{{name}} SDK</span>
2272
2090
  </div>
2273
2091
  </div>
2274
2092
  <div class="proj-card">
@@ -2280,7 +2098,7 @@ main { background: var(--paper); }
2280
2098
  <div class="tags">
2281
2099
  <span class="tag tag-mono tag-square tag-xs">TypeScript</span>
2282
2100
  <span class="tag tag-mono tag-square tag-xs">Next.js</span>
2283
- <span class="tag tag-mono tag-square tag-xs">ZARK SDK</span>
2101
+ <span class="tag tag-mono tag-square tag-xs">{{name}} SDK</span>
2284
2102
  </div>
2285
2103
  </div>
2286
2104
  </div>
@@ -2410,7 +2228,7 @@ main { background: var(--paper); }
2410
2228
  <div class="eyebrow">15 — Patterns</div>
2411
2229
  <h2>Code Block</h2>
2412
2230
  </div>
2413
- <p class="section-desc">Bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--code-bg</code> warm. Strings em success-700, keys em code-fg ember. Sempre com botões de eye/copy no canto top-right.</p>
2231
+ <p class="section-desc">Bg <code style="font-family:var(--font-mono);color:var(--brand-700)">--code-bg</code> warm. Strings em success-700, keys em code-fg brand. Sempre com botões de eye/copy no canto top-right.</p>
2414
2232
  </div>
2415
2233
 
2416
2234
  <div class="panel">
@@ -2431,7 +2249,7 @@ main { background: var(--paper); }
2431
2249
  <div class="indent-3"><span class="k">"command"</span>: <span class="s">"npx"</span>,</div>
2432
2250
  <div class="indent-3"><span class="k">"args"</span>: [<span class="s">"-y"</span>, <span class="s">"zark-mcp"</span>],</div>
2433
2251
  <div class="indent-3"><span class="k">"env"</span>: {</div>
2434
- <div class="indent-4"><span class="k">"ZARK_API_KEY"</span>: <span class="s">"$API_KEY"</span></div>
2252
+ <div class="indent-4"><span class="k">"{{slugUpper}}_API_KEY"</span>: <span class="s">"$API_KEY"</span></div>
2435
2253
  <div class="indent-3">}</div>
2436
2254
  <div class="indent-2">}</div>
2437
2255
  <div class="indent-1">}</div>
@@ -2450,7 +2268,7 @@ main { background: var(--paper); }
2450
2268
  <div class="eyebrow">16 — Patterns</div>
2451
2269
  <h2>Banners & Toasts</h2>
2452
2270
  </div>
2453
- <p class="section-desc">Announcement bar (full-width, neutro). Tip card (lateral, com ícone ember). Toast (bottom centered, ink-700 ou success-500, raio md). Sempre próximo da ação que originou.</p>
2271
+ <p class="section-desc">Announcement bar (full-width, neutro). Tip card (lateral, com ícone brand). Toast (bottom centered, ink-700 ou success-500, raio md). Sempre próximo da ação que originou.</p>
2454
2272
  </div>
2455
2273
 
2456
2274
  <div class="panel">
@@ -2458,7 +2276,7 @@ main { background: var(--paper); }
2458
2276
  <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Top announcement bar</div></div>
2459
2277
  <div class="row" style="margin-bottom:24px">
2460
2278
  <div class="announce">
2461
- Acabamos de levantar Series A e lançar ZARK v2 🎉 <a href="#">Ler o blog.</a>
2279
+ Acabamos de levantar Series A e lançar {{name}} v2 🎉 <a href="#">Ler o blog.</a>
2462
2280
  </div>
2463
2281
  </div>
2464
2282
 
@@ -2470,7 +2288,7 @@ main { background: var(--paper); }
2470
2288
  </span>
2471
2289
  <div style="flex:1">
2472
2290
  <div class="what">What's New</div>
2473
- <div class="title">Apresentando ZARK v2</div>
2291
+ <div class="title">Apresentando {{name}} v2</div>
2474
2292
  <div class="desc">10x mais rápido, busca de notícias e imagens, smart crawling e mais.</div>
2475
2293
  </div>
2476
2294
  <svg width="12" height="12" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" style="color:var(--ink-300); cursor:pointer"><path d="M5 5l8 8M13 5l-8 8"/></svg>
@@ -2480,8 +2298,8 @@ main { background: var(--paper); }
2480
2298
  <div class="row"><div class="sub-label" style="width:100%; margin-bottom:0">Toast</div></div>
2481
2299
  <div class="row">
2482
2300
  <div class="toast">
2483
- Welcome to ZARK!
2484
- <img src="assets/zark-icon.png" alt="ZARK" style="height:14px; width:auto; display:block; filter:brightness(0) invert(1)"/>
2301
+ Welcome to {{name}}!
2302
+ <img src="assets/icon.png" alt="{{name}}" style="height:14px; width:auto; display:block; filter:brightness(0) invert(1)"/>
2485
2303
  </div>
2486
2304
 
2487
2305
  <div class="toast toast-success">
@@ -2657,7 +2475,7 @@ main { background: var(--paper); }
2657
2475
  <div class="spec"><span class="l">Default (KPI)</span><span class="v">label + ícone colorido + número display</span></div>
2658
2476
  <div class="spec"><span class="l">Com progress</span><span class="v">quando o stat tem meta (R$ recebido / previsto)</span></div>
2659
2477
  <div class="spec"><span class="l">Crítico</span><span class="v">só quando exige ação imediata (inadimplência)</span></div>
2660
- <div class="spec"><span class="l">Cor do ícone</span><span class="v">success (positivo) · ember (neutro) · info (referência) · red (alerta) · purple (especial)</span></div>
2478
+ <div class="spec"><span class="l">Cor do ícone</span><span class="v">success (positivo) · brand (neutro) · info (referência) · red (alerta) · purple (especial)</span></div>
2661
2479
  </div>
2662
2480
  </div>
2663
2481
  </div>
@@ -2703,7 +2521,7 @@ main { background: var(--paper); }
2703
2521
  <div class="alert-critical-row">
2704
2522
  <span class="tag-dot p-urgent">URGENTE</span>
2705
2523
  <span style="font-weight:500">Enviar proposta para TR PAULO</span>
2706
- <span class="src">ZARK · Tarefas</span>
2524
+ <span class="src">{{name}} · Tarefas</span>
2707
2525
  <span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
2708
2526
  </div>
2709
2527
  </div>
@@ -2727,7 +2545,7 @@ main { background: var(--paper); }
2727
2545
  <div class="eyebrow">21 — App Patterns · CRM</div>
2728
2546
  <h2>Funnel & Progress</h2>
2729
2547
  </div>
2730
- <p class="section-desc">Funnel horizontal segmentado (Pipeline de Vendas) usa as mesmas cores do status do estágio. Progress bar simples (KPI com meta) usa success ou ember. Mesma altura: 8px no funnel, 4px em stat-card.</p>
2548
+ <p class="section-desc">Funnel horizontal segmentado (Pipeline de Vendas) usa as mesmas cores do status do estágio. Progress bar simples (KPI com meta) usa success ou brand. Mesma altura: 8px no funnel, 4px em stat-card.</p>
2731
2549
  </div>
2732
2550
 
2733
2551
  <div class="grid-2">
@@ -2895,7 +2713,7 @@ main { background: var(--paper); }
2895
2713
  <div class="eyebrow">23 — App Patterns · CRM</div>
2896
2714
  <h2>Lead Card (Pipeline)</h2>
2897
2715
  </div>
2898
- <p class="section-desc">Card compacto para Pipeline de Vendas. Nome + flame icon (temperatura) + status tag. Ícones de canal (telefone, instagram, email). Footer com follow-up date em ember quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.is-paused</code> adiciona border-left amber para PARADO.</p>
2716
+ <p class="section-desc">Card compacto para Pipeline de Vendas. Nome + flame icon (temperatura) + status tag. Ícones de canal (telefone, instagram, email). Footer com follow-up date em brand quando há agenda. Variante <code style="font-family:var(--font-mono);color:var(--brand-700)">.is-paused</code> adiciona border-left amber para PARADO.</p>
2899
2717
  </div>
2900
2718
 
2901
2719
  <div class="panel">
@@ -2983,7 +2801,7 @@ main { background: var(--paper); }
2983
2801
  <div class="eyebrow">24 — App Patterns · CRM</div>
2984
2802
  <h2>Filter Chips</h2>
2985
2803
  </div>
2986
- <p class="section-desc">Substitui os 3 padrões de filtro no CRM (chips, dropdowns, toggle filters). Chip mono uppercase com contador opcional, raio --r-sm. Active state usa ember-50 + border ember-200. Use SEMPRE quando houver até 6 categorias; acima disso, dropdown.</p>
2804
+ <p class="section-desc">Substitui os 3 padrões de filtro no CRM (chips, dropdowns, toggle filters). Chip mono uppercase com contador opcional, raio --r-sm. Active state usa brand-50 + border brand-200. Use SEMPRE quando houver até 6 categorias; acima disso, dropdown.</p>
2987
2805
  </div>
2988
2806
 
2989
2807
  <div class="grid-2">
@@ -3033,7 +2851,7 @@ main { background: var(--paper); }
3033
2851
  <div class="spec"><span class="l">Altura</span><span class="v">28px</span></div>
3034
2852
  <div class="spec"><span class="l">Padding</span><span class="v">0 12px</span></div>
3035
2853
  <div class="spec"><span class="l">Border-radius</span><span class="v">--r-sm (4px)</span></div>
3036
- <div class="spec"><span class="l">Active</span><span class="v">bg ember-50 · color brand-700 · border ember-200</span></div>
2854
+ <div class="spec"><span class="l">Active</span><span class="v">bg brand-50 · color brand-700 · border brand-200</span></div>
3037
2855
  <div class="spec"><span class="l">Limite recomendado</span><span class="v">≤ 6 chips · acima disso use dropdown</span></div>
3038
2856
  </div>
3039
2857
  </div>
@@ -3255,7 +3073,7 @@ main { background: var(--paper); }
3255
3073
  <div style="height:80px"></div>
3256
3074
 
3257
3075
  <div style="text-align:center; padding:48px 0; border-top:1px solid var(--line-200)">
3258
- <img src="assets/logo-zark-laranja.png" alt="ZARK" style="height:48px; display:inline-block"/>
3076
+ <img src="assets/logo-primary.png" alt="{{name}}" style="height:48px; display:inline-block"/>
3259
3077
  <div style="font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-300); letter-spacing:var(--ls-wider); text-transform:uppercase; margin-top:16px">Design System · Sistemas v3 · 2026 · App Patterns extraídos do CRM</div>
3260
3078
  </div>
3261
3079
  </div>
@@ -3315,16 +3133,16 @@ links.forEach(l => l.addEventListener('click', e => {
3315
3133
  ===================================================== */
3316
3134
 
3317
3135
  /* --- Color swatches --- */
3318
- const ember = [
3319
- ['ember-50', '#fff3e9'], ['ember-100', '#ffe1c8'], ['ember-200', '#ffc28e'],
3320
- ['ember-300', '#ffa056'], ['ember-400', '#ff8a3a'], ['brand-500', '#f56f10'],
3321
- ['brand-600', '#d45e0d'], ['brand-700', '#ad4a09'], ['ember-800', '#843706'],
3322
- ['ember-900', '#5e2704'],
3136
+ const brand = [
3137
+ ['brand-50', '{{brand.50}}'], ['brand-100', '{{brand.100}}'], ['brand-200', '{{brand.200}}'],
3138
+ ['brand-300', '{{brand.300}}'], ['brand-400', '{{brand.400}}'], ['brand-500', '{{brand.500}}'],
3139
+ ['brand-600', '{{brand.600}}'], ['brand-700', '{{brand.700}}'], ['brand-800', '{{brand.800}}'],
3140
+ ['brand-900', '{{brand.900}}'],
3323
3141
  ];
3324
3142
  const surface = [
3325
3143
  ['paper', '#fafaf8'], ['canvas', '#f5f4f1'], ['surface', '#ffffff'],
3326
3144
  ['line-100', '#f0eeea'], ['line-200', '#e8e6e1'], ['line-300', '#d8d5cf'],
3327
- ['dark-void', '#151419'], ['glucon-grey', '#1b1a1e'],
3145
+ ['bg-void', '{{brand.500}}-bg'], ['glucon-grey', '#1b1a1e'],
3328
3146
  ];
3329
3147
  const ink = [
3330
3148
  ['ink-50','#f4f3f0'], ['ink-100','#e8e6e1'], ['ink-200','#c8c5bf'],
@@ -3347,7 +3165,7 @@ function swatchHTML(name, hex) {
3347
3165
  </div>
3348
3166
  </div>`;
3349
3167
  }
3350
- document.getElementById('emberGrid').innerHTML = ember.map(([n,h]) => swatchHTML(n,h)).join('');
3168
+ document.getElementById('emberGrid').innerHTML = brand.map(([n,h]) => swatchHTML(n,h)).join('');
3351
3169
  document.getElementById('surfaceGrid').innerHTML = surface.map(([n,h]) => swatchHTML(n,h)).join('');
3352
3170
  document.getElementById('inkGrid').innerHTML = ink.map(([n,h]) => swatchHTML(n,h)).join('');
3353
3171
  document.getElementById('semanticGrid').innerHTML = semantic.map(g => `
@@ -3519,7 +3337,7 @@ if (iconGrid) {
3519
3337
 
3520
3338
  /* --- Space color grid (CRM clientes) --- */
3521
3339
  const spaces = [
3522
- { name: 'ZARK', key: 'zark', hex: '#f56f10', use: 'Org-mãe · ember brand' },
3340
+ { name: 'ZARK', key: 'zark', hex: '#f56f10', use: 'Org-mãe · brand brand' },
3523
3341
  { name: 'ALLSEC', key: 'allsec', hex: '#c2410c', use: 'Burnt orange · seguro' },
3524
3342
  { name: 'VIPCAR', key: 'vipcar', hex: '#ea580c', use: 'Deep orange · auto' },
3525
3343
  { name: 'LIMPPE TEC',key: 'limppe', hex: '#f59e0b', use: 'Amber · serviço' },
package/templates/jsx/{App.example.jsx → App.example.jsx.hbs} RENAMED
@@ -40,8 +40,8 @@ import {
40
40
  Icons,
41
41
  } from './index';
42
42
 
43
- import logoZark from './assets/logo-zark-laranja.png';
44
- import iconZark from './assets/zark-icon.png';
43
+ import logoZark from './assets/logo-primary.png';
44
+ import iconZark from './assets/icon.png';
45
45
 
46
46
  export default function App() {
47
47
  const [tab, setTab] = useState('hoje');
@@ -53,7 +53,7 @@ export default function App() {
53
53
  <div style={{ display: 'grid', gridTemplateColumns: 'var(--sidebar-w) 1fr', minHeight: '100vh' }}>
54
54
 
55
55
  {/* SIDEBAR */}
56
- <Sidebar logo={<img src={logoZark} alt="ZARK" className="zk-sidebar-logo"/>}>
56
+ <Sidebar logo={<img src={logoZark} alt="{{name}}" className="zk-sidebar-logo"/>}>
57
57
  <SidebarSection>Workspace</SidebarSection>
58
58
  <SidebarLink active icon={<Icons.Home/>} shortcut={<Kbd>⌥D</Kbd>}>Dashboard</SidebarLink>
59
59
  <SidebarLink icon={<Icons.Activity/>} shortcut={<Kbd>⌥P</Kbd>}>Pipeline</SidebarLink>
@@ -61,7 +61,7 @@ export default function App() {
61
61
  <SidebarLink icon={<Icons.Docs/>} shortcut={<Kbd>⌥F</Kbd>}>Financeiro</SidebarLink>
62
62
 
63
63
  <SidebarSection>Compartilhados</SidebarSection>
64
- <SidebarLink icon={<AvatarSpace name="Z" spaceKey="zark" size={18}/>}>ZARK</SidebarLink>
64
+ <SidebarLink icon={<AvatarSpace name="Z" spaceKey="zark" size={18}/>}>{{name}}</SidebarLink>
65
65
  <SidebarLink icon={<AvatarSpace name="V" spaceKey="vipcar" size={18}/>}>VIPCAR</SidebarLink>
66
66
  <SidebarLink icon={<AvatarSpace name="L" spaceKey="limppe" size={18}/>}>LIMPPE TEC</SidebarLink>
67
67
  </Sidebar>
@@ -112,7 +112,7 @@ export default function App() {
112
112
  <AlertCritical
113
113
  title="8 tarefas em atraso"
114
114
  items={[
115
- { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'Enviar proposta para TR PAULO', source: 'ZARK · Tarefas', meta: '3 dias' },
115
+ { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'Enviar proposta para TR PAULO', source: '{{name}} · Tarefas', meta: '3 dias' },
116
116
  { tag: <TagDot kind="priority" value="urgent">URGENTE</TagDot>, label: 'CHAMANDO O HEXA!', source: 'VIPCAR · Acompanhamento', meta: '3 dias' },
117
117
  ]}
118
118
  footer="+ 6 outras tarefas atrasadas"
@@ -203,8 +203,8 @@ export default function App() {
203
203
  <div style={{ height: 32 }}/>
204
204
 
205
205
  {/* Toast */}
206
- <Toast tone="default" icon={<img src={iconZark} alt="ZARK" style={{ height: 14, filter: 'brightness(0) invert(1)' }}/>}>
207
- Welcome to ZARK!
206
+ <Toast tone="default" icon={<img src={iconZark} alt="{{name}}" style={{ height: 14, filter: 'brightness(0) invert(1)' }}/>}>
207
+ Welcome to {{name}}!
208
208
  </Toast>
209
209
 
210
210
  {/* Modal */}
package/templates/jsx/components.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* ============================================================
2
- ZARK DESIGN SYSTEM — COMPONENTS
2
+ Brand DESIGN SYSTEM — COMPONENTS
3
3
  v3 · Sistemas/Apps · 2026
4
4
  Importe APÓS tokens.css.
5
5
  ============================================================ */
package/templates/jsx/icons.jsx CHANGED
@@ -1,4 +1,4 @@
1
- // ZARK Icon Set — outline · stroke 1.5px · viewBox 18×18 · currentColor
1
+ // Brand Icon Set — outline · stroke 1.5px · viewBox 18×18 · currentColor
2
2
  // Usage:
3
3
  // import { Icons } from './icons';
4
4
  // <Icons.Search size={16}/>
package/templates/jsx/index.js CHANGED
@@ -1,31 +1,31 @@
1
- // ZARK Design System — barrel export
1
+ // Design System — barrel export
2
2
  // Importe componentes individuais ou o objeto inteiro:
3
- // import { Button, TagDot, StatCard } from '@zark/design-system-apps/jsx';
3
+ // import { Button, TagDot, StatCard } from '@zark/design-system-apps/jsx';
4
4
 
5
- export { Button } from './components/Button.jsx';
6
- export { Input, UrlInputFull } from './components/Input.jsx';
7
- export { Tag } from './components/Tag.jsx';
8
- export { TagDot } from './components/TagDot.jsx';
9
- export { Badge } from './components/Badge.jsx';
10
- export { Toggle } from './components/Toggle.jsx';
11
- export { Segmented } from './components/Segmented.jsx';
12
- export { Chips } from './components/Chip.jsx';
13
- export { StatCard } from './components/StatCard.jsx';
14
- export { AlertCritical } from './components/AlertCritical.jsx';
15
- export { Funnel, ProgressBar } from './components/Funnel.jsx';
16
- export { EmptyState } from './components/EmptyState.jsx';
17
- export { KanbanColumn, KanbanBoard } from './components/KanbanColumn.jsx';
18
- export { LeadCard } from './components/LeadCard.jsx';
19
- export { TableActions } from './components/TableActions.jsx';
5
+ export { Button } from './components/Button.jsx';
6
+ export { Input, UrlInputFull } from './components/Input.jsx';
7
+ export { Tag } from './components/Tag.jsx';
8
+ export { TagDot } from './components/TagDot.jsx';
9
+ export { Badge } from './components/Badge.jsx';
10
+ export { Toggle } from './components/Toggle.jsx';
11
+ export { Segmented } from './components/Segmented.jsx';
12
+ export { Chips } from './components/Chip.jsx';
13
+ export { StatCard } from './components/StatCard.jsx';
14
+ export { AlertCritical } from './components/AlertCritical.jsx';
15
+ export { Funnel, ProgressBar } from './components/Funnel.jsx';
16
+ export { EmptyState } from './components/EmptyState.jsx';
17
+ export { KanbanColumn, KanbanBoard } from './components/KanbanColumn.jsx';
18
+ export { LeadCard } from './components/LeadCard.jsx';
19
+ export { TableActions } from './components/TableActions.jsx';
20
20
  export { Sidebar, SidebarLink, SidebarSection } from './components/Sidebar.jsx';
21
- export { Panel } from './components/Panel.jsx';
22
- export { Section } from './components/Section.jsx';
23
- export { Modal } from './components/Modal.jsx';
24
- export { Toast } from './components/Toast.jsx';
25
- export { Announce, Tip } from './components/Banner.jsx';
26
- export { CodeBlock } from './components/CodeBlock.jsx';
27
- export { Avatar, AvatarSpace } from './components/Avatar.jsx';
28
- export { Kbd } from './components/Kbd.jsx';
29
- export { Spec } from './components/Spec.jsx';
21
+ export { Panel } from './components/Panel.jsx';
22
+ export { Section } from './components/Section.jsx';
23
+ export { Modal } from './components/Modal.jsx';
24
+ export { Toast } from './components/Toast.jsx';
25
+ export { Announce, Tip } from './components/Banner.jsx';
26
+ export { CodeBlock } from './components/CodeBlock.jsx';
27
+ export { Avatar, AvatarSpace } from './components/Avatar.jsx';
28
+ export { Kbd } from './components/Kbd.jsx';
29
+ export { Spec } from './components/Spec.jsx';
30
30
 
31
- export { Icons } from './icons.jsx';
31
+ export { Icons } from './icons.jsx';