zark-design 2.0.0 → 3.0.0

package/templates/_shared/tokens.css.hbs

@@ -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

@@ -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;

package/templates/html/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);