zark-design 2.0.0 → 3.0.0

package/templates/jsx/components/Funnel.jsx

@@ -4,7 +4,7 @@ import React from 'react';
  * Funnel — horizontal segmented funnel (Pipeline de Vendas)
  *
  * @param stages [{ label, count, color, percent }]
- *  color   — qualquer CSS color (sugestão: var(--ember-500), var(--success-500), etc)
+ *  color   — qualquer CSS color (sugestão: var(--brand-500), var(--success-500), etc)
  *  percent — 0-100, largura proporcional do segmento
  */
 export function Funnel({ stages = [] }) {
@@ -42,7 +42,7 @@ export function Funnel({ stages = [] }) {
 export function ProgressBar({ value = 0, tone = 'success', height = 4 }) {
   const colorMap = {
     success: 'var(--success-500)',
-    ember:   'var(--ember-500)',
+    ember:   'var(--brand-500)',
     danger:  'var(--danger-500)',
   };
   return (

package/templates/jsx/components/Sidebar.jsx

@@ -37,7 +37,7 @@ export function SidebarLink({ active = false, icon, shortcut, onClick, href, chi
   const cls = `zk-sidebar-link ${active ? 'active' : ''}`.trim();
   const content = (
     <>
-      {icon && <span style={{ display: 'inline-flex', color: active ? 'var(--ember-600)' : 'var(--ink-400)' }}>{icon}</span>}
+      {icon && <span style={{ display: 'inline-flex', color: active ? 'var(--brand-600)' : 'var(--ink-400)' }}>{icon}</span>}
       <span style={{ flex: 1 }}>{children}</span>
       {shortcut}
     </>

package/templates/jsx/components.css

@@ -33,18 +33,18 @@
 .btn-full { width: 100%; }
 
 .btn-primary {
-  background: var(--ember-600); color: #fff;
+  background: var(--brand-600); color: #fff;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18);
 }
-.btn-primary:hover { background: var(--ember-700); }
+.btn-primary:hover { background: var(--brand-700); }
 .btn-secondary {
   background: var(--surface); color: var(--ink-700);
   border-color: var(--line-300);
   box-shadow: var(--shadow-xs);
 }
 .btn-secondary:hover { background: var(--paper); }
-.btn-soft       { background: var(--ember-50);  color: var(--ember-700); }
-.btn-soft:hover { background: var(--ember-100); }
+.btn-soft       { background: var(--brand-50);  color: var(--brand-700); }
+.btn-soft:hover { background: var(--brand-100); }
 .btn-ghost      { background: transparent;       color: var(--ink-600); }
 .btn-ghost:hover{ background: var(--ink-50); }
 .btn-danger     { background: var(--surface);    color: var(--danger-700); border-color: var(--line-300); }
@@ -72,7 +72,7 @@
   width: 100%;
   transition: box-shadow var(--t-fast), border-color var(--t-fast);
 }
-.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--ember-400); }
+.input:focus-within { box-shadow: var(--ring-focus); border-color: var(--brand-400); }
 .input.invalid { border-color: var(--danger-500); }
 .input.invalid:focus-within { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18); }
 .input-sm { height: 28px; padding: 0 8px; font-size: var(--fs-sm); }
@@ -123,7 +123,7 @@
 .tag-sm { height: 22px; padding: 0 8px; font-size: var(--fs-xs); }
 .tag-md { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }
 .tag-square  { border-radius: var(--r-xs); }
-.tag-ember   { background: var(--ember-50);   color: var(--ember-700); }
+.tag-ember   { background: var(--brand-50);   color: var(--brand-700); }
 .tag-mono    { background: var(--tag-bg);     color: var(--tag-fg); }
 .tag-success { background: var(--success-50); color: var(--success-700); }
 .tag-warning { background: var(--warning-50); color: var(--warning-700); }
@@ -150,14 +150,14 @@
 
 /* Status — 5 estados base */
 .s-todo     { background: #fff8e6; color: #9a6500; }
-.s-progress { background: var(--ember-50);   color: var(--ember-700); }
+.s-progress { background: var(--brand-50);   color: var(--brand-700); }
 .s-review   { background: var(--info-50);    color: var(--info-700); }
 .s-done     { background: var(--success-50); color: var(--success-700); }
 .s-canceled { background: var(--ink-50);     color: var(--ink-500); }
 /* Modificadores */
 .s-overdue  { background: var(--danger-50);  color: var(--danger-700); }
 .s-paused   { background: var(--warning-50); color: var(--warning-700); }
-.s-followup { background: var(--ember-50);   color: var(--ember-700); }
+.s-followup { background: var(--brand-50);   color: var(--brand-700); }
 
 /* Prioridade */
 .p-urgent { background: var(--danger-50);  color: var(--danger-700); }
@@ -179,7 +179,7 @@
 .badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 18px; height: 18px; padding: 0 5px;
-  background: var(--ember-500); color: #fff;
+  background: var(--brand-500); color: #fff;
   font-size: var(--fs-2xs); font-weight: 600;
   border-radius: var(--r-sm);
 }
@@ -193,7 +193,7 @@
   border: none; cursor: pointer; position: relative;
   transition: background var(--t-base) var(--ease-out);
 }
-.toggle.on { background: var(--ember-500); }
+.toggle.on { background: var(--brand-500); }
 .toggle .knob {
   position: absolute; top: 2px; left: 2px;
   width: 16px; height: 16px; border-radius: var(--r-xs);
@@ -246,13 +246,13 @@
   transition: all var(--t-fast);
 }
 .chip:hover  { background: var(--ink-50); color: var(--ink-700); }
-.chip.active { background: var(--ember-50); color: var(--ember-700); border-color: var(--ember-200); }
+.chip.active { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
 .chip .count { font-family: var(--font-mono); font-size: var(--fs-2xs); color: inherit; opacity: 0.7; }
 
 /* ---------- AVATAR ---------- */
 .avatar {
   width: 24px; height: 24px;
-  background: var(--ember-500); color: #fff;
+  background: var(--brand-500); color: #fff;
   border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 11px; font-weight: 600;
@@ -328,7 +328,7 @@
   font-size: var(--fs-xs);
   letter-spacing: var(--ls-widest);
   text-transform: uppercase;
-  color: var(--ember-600);
+  color: var(--brand-600);
   margin-bottom: 14px;
 }
 .section h2 {
@@ -394,7 +394,7 @@
   color: #fff;
 }
 .stat-icon.green  { background: var(--success-500); }
-.stat-icon.orange { background: var(--ember-500); }
+.stat-icon.orange { background: var(--brand-500); }
 .stat-icon.blue   { background: var(--info-500); }
 .stat-icon.purple { background: #7c3aed; }
 .stat-icon.red    { background: var(--danger-500); }
@@ -518,7 +518,7 @@
   cursor: pointer;
   transition: all var(--t-fast);
 }
-.k-add:hover { color: var(--ember-700); border-color: var(--ember-300); background: var(--ember-50); }
+.k-add:hover { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); }
 
 /* ---------- LEAD CARD ---------- */
 .lead-card {
@@ -536,7 +536,7 @@
 .lead-card.is-overdue { border-left: 3px solid var(--danger-500); }
 .lead-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .lead-card-name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); font-weight: 600; color: var(--ink-700); }
-.lead-card-name .flame { color: var(--ember-500); }
+.lead-card-name .flame { color: var(--brand-500); }
 .lead-card-sub  { font-size: var(--fs-xs); color: var(--ink-400); }
 .lead-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-400); }
 .lead-card-meta .icons { display: inline-flex; gap: 6px; color: var(--ink-300); }
@@ -548,7 +548,7 @@
 }
 .lead-card-followup {
   display: inline-flex; align-items: center; gap: 4px;
-  font-size: var(--fs-xs); color: var(--ember-700); font-weight: 500;
+  font-size: var(--fs-xs); color: var(--brand-700); font-weight: 500;
 }
 
 /* ---------- EMPTY STATE ---------- */
@@ -620,8 +620,8 @@
 }
 .zk-sidebar-link:hover { background: var(--ink-50); color: var(--ink-700); }
 .zk-sidebar-link.active {
-  color: var(--ember-700);
-  background: var(--ember-50);
+  color: var(--brand-700);
+  background: var(--brand-50);
   font-weight: 500;
 }
 
@@ -686,7 +686,7 @@
   text-align: center;
   font-size: var(--fs-md); color: var(--ink-600);
 }
-.announce a { color: var(--ember-700); text-decoration: underline; }
+.announce a { color: var(--brand-700); text-decoration: underline; }
 .tip {
   display: flex; gap: 12px; padding: 14px;
   background: var(--surface);
@@ -695,7 +695,7 @@
   max-width: 320px;
   box-shadow: var(--shadow-md);
 }
-.tip .ico   { color: var(--ember-500); margin-top: 2px; }
+.tip .ico   { color: var(--brand-500); margin-top: 2px; }
 .tip .what  {
   font-size: var(--fs-xs); font-family: var(--font-mono);
   letter-spacing: var(--ls-wider);

package/templates/jsx/icons.jsx

@@ -2,7 +2,7 @@
 // Usage:
 //   import { Icons } from './icons';
 //   <Icons.Search size={16}/>
-//   <Icons.Bell size={20} style={{ color: 'var(--ember-500)' }}/>
+//   <Icons.Bell size={20} style={{ color: 'var(--brand-500)' }}/>
 
 import React from 'react';
 

package/templates/presets/zark/preset.json

@@ -0,0 +1,26 @@
+{
+  "name": "ZARK",
+  "slug": "zark",
+  "preset": "zark",
+  "brand": {
+    "50":  "#fff3e9",
+    "100": "#ffe1c8",
+    "200": "#ffc28e",
+    "300": "#ffa056",
+    "400": "#ff8a3a",
+    "500": "#f56f10",
+    "600": "#d45e0d",
+    "700": "#ad4a09",
+    "800": "#843706",
+    "900": "#5e2704",
+    "ring":         "rgba(255, 93, 31, 0.20)",
+    "ringSoft":     "rgba(255, 93, 31, 0.12)",
+    "ringDark":     "rgba(255, 138, 58, 0.30)",
+    "ringSoftDark": "rgba(255, 138, 58, 0.16)"
+  },
+  "fonts": {
+    "ui":      "Inter",
+    "mono":    "JetBrains Mono",
+    "display": "Space Grotesk"
+  }
+}

package/templates/html/tokens.css

@@ -1,283 +0,0 @@
-/* ============================================================
-   ZARK DESIGN SYSTEM — TOKENS
-   v3 · Sistemas/Apps · 2026
-   Importe este arquivo no entry-point do projeto antes de
-   components.css.
-   ============================================================ */
-
-:root {
-  /* ---------- BRAND / EMBER (Liquid Lava scale) ---------- */
-  --ember-50:  #fff3e9;
-  --ember-100: #ffe1c8;
-  --ember-200: #ffc28e;
-  --ember-300: #ffa056;
-  --ember-400: #ff8a3a;
-  --ember-500: #f56f10;   /* LIQUID LAVA — brand primary */
-  --ember-600: #d45e0d;
-  --ember-700: #ad4a09;
-  --ember-800: #843706;
-  --ember-900: #5e2704;
-  --liquid-lava: #f56f10;
-  --dark-void:   #151419;
-  --glucon-grey: #1b1a1e;
-
-  /* ---------- 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;
-
-  /* ---------- 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:    #fff0e0;
-  --tag-fg:    #ad4a09;
-  --code-bg:   #fff5ea;
-  --code-fg:   #ad4a09;
-
-  /* ---------- SPACE / CLIENTE COLORS (CRM) ---------- */
-  --space-zark:        #f56f10;
-  --space-zark-soft:   #fff3e9;
-  --space-allsec:      #c2410c;
-  --space-allsec-soft: #fff3e9;
-  --space-vipcar:      #ea580c;
-  --space-vipcar-soft: #fff3e9;
-  --space-limppe:      #f59e0b;
-  --space-limppe-soft: #fff8e6;
-  --space-gerais:      #1f2937;
-  --space-gerais-soft: #f4f3f0;
-  --space-mixshop:     #b91c1c;
-  --space-mixshop-soft:#fef1f1;
-  --space-vipseg:      #991b1b;
-  --space-vipseg-soft: #fef1f1;
-
-  /* ---------- TYPOGRAPHY ----------
-     Inter        → UI texto + NÚMEROS (KPIs, valores, contadores)
-     JetBrains    → Código, labels técnicos, kbd
-     Space Grotesk→ TÍTULOS (h1, h2, h3, modal titles, header bands)
-  */
-  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
-  --font-display: "Space Grotesk", "Inter Tight", "Inter", sans-serif;
-  --font-ui:      "Inter", -apple-system, sans-serif;
-
-  /* type scale (px) */
-  --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;
-
-  /* line-heights */
-  --lh-tight: 1.1;
-  --lh-snug:  1.25;
-  --lh-base:  1.45;
-  --lh-loose: 1.6;
-
-  /* letter spacing */
-  --ls-tight:  -0.02em;
-  --ls-snug:   -0.01em;
-  --ls-normal:  0;
-  --ls-wide:    0.04em;
-  --ls-wider:   0.08em;
-  --ls-widest:  0.14em;
-
-  /* weights */
-  --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) ---------- */
-  --r-xs:  3px;
-  --r-sm:  4px;
-  --r-md:  6px;
-  --r-lg:  8px;
-  --r-xl:  12px;
-  --r-2xl: 16px;
-  --r-3xl: 20px;
-
-  /* ---------- SHADOWS (warm-black, never cool-black) ---------- */
-  --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 rgba(255, 93, 31, 0.20);
-  --ring-focus-soft: 0 0 0 3px rgba(255, 93, 31, 0.12);
-
-  /* ---------- 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;
-}
-
-/* ============================================================
-   DARK THEME
-   ============================================================ */
-[data-theme="dark"] {
-  --ember-50:  #2a1810;
-  --ember-100: #3d2114;
-  --ember-200: #5e2704;
-  --ember-300: #843706;
-  --ember-400: #ad4a09;
-  --ember-500: #f56f10;   /* brand inalterado */
-  --ember-600: #ff8a3a;
-  --ember-700: #ffa056;
-  --ember-800: #ffc28e;
-  --ember-900: #ffe1c8;
-
-  --paper:     #0e0d11;
-  --canvas:    #151419;
-  --surface:   #1b1a1e;
-  --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:  #3d2114;
-  --tag-fg:  #ffc28e;
-  --code-bg: #2a1810;
-  --code-fg: #ffa056;
-
-  --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 rgba(255, 138, 58, 0.30);
-  --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
-}
-
-/* Auto dark via OS, opt-out: <html data-theme="light"> */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --ember-50:  #2a1810;  --ember-100: #3d2114;  --ember-200: #5e2704;
-    --ember-300: #843706;  --ember-400: #ad4a09;  --ember-500: #f56f10;
-    --ember-600: #ff8a3a;  --ember-700: #ffa056;  --ember-800: #ffc28e;
-    --ember-900: #ffe1c8;
-    --paper:     #0e0d11;  --canvas:    #151419;  --surface:   #1b1a1e;
-    --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: #3d2114; --tag-fg: #ffc28e; --code-bg: #2a1810; --code-fg: #ffa056;
-    --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 rgba(255, 138, 58, 0.30);
-    --ring-focus-soft: 0 0 0 3px rgba(255, 138, 58, 0.16);
-  }
-}
-
-/* ============================================================
-   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(--ember-200); color: var(--ink-700); }
-a { color: inherit; text-decoration: none; }
-button { font-family: inherit; }
-
-@keyframes zk-spin   { to { transform: rotate(360deg); } }
-@keyframes zk-fadein { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }