zark-design 2.0.0 → 3.0.1

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

package/templates/jsx/tokens.js

@@ -1,62 +0,0 @@
-// 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: {
-    liquidLava: '#f56f10',
-    ember: {
-      50: '#fff3e9', 100: '#ffe1c8', 200: '#ffc28e', 300: '#ffa056',
-      400: '#ff8a3a', 500: '#f56f10', 600: '#d45e0d', 700: '#ad4a09',
-      800: '#843706', 900: '#5e2704',
-    },
-  },
-  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' },
-  },
-  space: {
-    zark:    '#f56f10',
-    allsec:  '#c2410c',
-    vipcar:  '#ea580c',
-    limppe:  '#f59e0b',
-    gerais:  '#1f2937',
-    mixshop: '#b91c1c',
-    vipseg:  '#991b1b',
-  },
-  font: {
-    sans:    '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    mono:    '"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace',
-    display: '"Space Grotesk", "Inter Tight", "Inter", sans-serif',
-  },
-  radius: {
-    xs: 3, sm: 4, md: 6, lg: 8, xl: 12, '2xl': 16, '3xl': 20,
-  },
-  spacing: {
-    1: 2, 2: 4, 3: 6, 4: 8, 5: 10, 6: 12, 7: 14, 8: 16,
-    10: 20, 12: 24, 14: 28, 16: 32, 20: 40, 24: 48, 32: 64, 40: 80, 48: 96,
-  },
-  motion: {
-    fast: 120, base: 180, slow: 280, slower: 420,
-    easeOut:    'cubic-bezier(0.22, 1, 0.36, 1)',
-    easeInOut:  'cubic-bezier(0.65, 0, 0.35, 1)',
-    easeSpring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-  },
-  layout: {
-    sidebarW: 240,
-    topbarH: 56,
-    containerMax: 1280,
-  },
-};
-
-export default tokens;