@snksergio/design-system 0.1.0

package/dist-lib/tokens.mjs

@@ -0,0 +1,915 @@
+const brand = {
+  600: "oklch(0.5248 0.1415 150.9)"
+};
+const brandContrast = {
+  400: "oklch(0.7289 0.1571 162.3)"
+};
+const gray = {
+  50: "oklch(0.973 0 0)",
+  100: "oklch(0.94 0 0)",
+  150: "oklch(0.931 0 0)",
+  200: "oklch(0.9076 0 0)",
+  300: "oklch(0.8761 0 0)",
+  400: "oklch(0.7025 0 0)",
+  500: "oklch(0.4997 0 0)",
+  600: "oklch(0.36 0 0)",
+  800: "oklch(0.2645 0 0)",
+  900: "oklch(0.205 0 0)",
+  950: "oklch(0.15 0 0)"
+};
+const danger = {
+  500: "oklch(0.6368 0.2078 25.33)"
+};
+const success = {
+  500: "oklch(0.66 0.135 161)"
+};
+const warning = {
+  500: "oklch(0.81 0.160 81)"
+};
+const info = {
+  500: "oklch(0.62 0.210 280)"
+};
+const white = "oklch(1 0 0)";
+const black = "oklch(0 0 0)";
+const bg$1 = {
+  // Surfaces (sólidos)
+  canvas: white,
+  // body, página
+  surface: white,
+  // cards, drawer
+  "surface-elevated": white,
+  // popovers, modais
+  "surface-panels": white,
+  // página de fundo
+  sidebar: "oklch(0.9516 0.0027 106.45)",
+  // mineral-100 — calidez sidebar (sem primitive equiv)
+  // Backgrounds neutros (sólidos cinza no light)
+  subtle: gray[50],
+  muted: gray[50],
+  emphasis: gray[100],
+  // neutro mais visível que muted (sem semântica de "active")
+  input: white,
+  accent: white,
+  // light: bg-accent = branco (item ativo destaca por contraste)
+  // Brand (derivam do brand[600])
+  brand: brand[600],
+  "brand-subtle": `color-mix(in oklch, ${brand[600]} 14%, transparent)`,
+  "brand-hover": `color-mix(in oklch, ${brand[600]} 90%, black)`,
+  "brand-subtle-hover": `color-mix(in oklch, ${brand[600]} 22%, transparent)`,
+  // Status (sólido + muted alpha — ×4 cores)
+  danger: danger[500],
+  "danger-muted": `color-mix(in oklch, ${danger[500]} 14%, transparent)`,
+  "danger-hover": `color-mix(in oklch, ${danger[500]} 90%, black)`,
+  "danger-muted-hover": `color-mix(in oklch, ${danger[500]} 22%, transparent)`,
+  success: success[500],
+  "success-muted": `color-mix(in oklch, ${success[500]} 14%, transparent)`,
+  "success-hover": `color-mix(in oklch, ${success[500]} 90%, black)`,
+  "success-muted-hover": `color-mix(in oklch, ${success[500]} 22%, transparent)`,
+  warning: warning[500],
+  "warning-muted": `color-mix(in oklch, ${warning[500]} 14%, transparent)`,
+  "warning-hover": `color-mix(in oklch, ${warning[500]} 90%, black)`,
+  "warning-muted-hover": `color-mix(in oklch, ${warning[500]} 22%, transparent)`,
+  info: info[500],
+  "info-muted": `color-mix(in oklch, ${info[500]} 14%, transparent)`,
+  "info-hover": `color-mix(in oklch, ${info[500]} 90%, black)`,
+  "info-muted-hover": `color-mix(in oklch, ${info[500]} 22%, transparent)`,
+  // Hover dos neutros — sólidos cinza no light
+  "muted-hover": "oklch(0.95 0 0)",
+  "input-hover": gray[50],
+  // 0.973 — sutil sobre input=white
+  "accent-hover": "oklch(0.84 0 0)",
+  // Sidebar item states — active = branco (contrasta com sidebar mineral-100), hover = mineral subtle
+  "sidebar-accent": white,
+  "sidebar-accent-hover": "oklch(0.92 0.0068 115.72)",
+  // Tabela — sólidos
+  "table": white,
+  "table-head": gray[50],
+  // Hover sutil: gray[50] (~2.7% diff de white) em vez de gray[100] (6% — forte demais).
+  // Mesmo tom do table-head, mantém hierarquia visual sem competir com cells selected.
+  "table-row-hover": gray[50],
+  // Linha selecionada — alpha brand discreto (6%); hover sobe pra 10%
+  // (não usar `bg-brand-subtle` 14% — forte demais como bg de row)
+  "table-row-selected": `color-mix(in oklch, ${brand[600]} 6%, transparent)`,
+  "table-row-selected-hover": `color-mix(in oklch, ${brand[600]} 10%, transparent)`,
+  // Dropdown/Popover — referencia bg-canvas (white no light)
+  "dropdown": "var(--color-bg-canvas)"
+};
+const fg$1 = {
+  // Hierarquia
+  strong: gray[950],
+  default: gray[950],
+  muted: gray[500],
+  // labels, helpers (light)
+  subtle: gray[400],
+  // placeholders, hints
+  disabled: gray[400],
+  // Brand
+  brand: brand[600],
+  // Status
+  danger: danger[500],
+  success: success[500],
+  warning: warning[500],
+  info: info[500],
+  // Sobre fundos sólidos (on-*)
+  "on-brand": white,
+  "on-danger": white,
+  "on-success": white,
+  "on-warning": black,
+  // amarelo claro → preto pra contraste
+  "on-info": white
+};
+const border$1 = {
+  default: gray[200],
+  // borda padrão
+  subtle: gray[150],
+  // dividers, controles
+  input: gray[300],
+  // inputs / fields
+  sidebar: "oklch(0.9076 0.0068 115.72)",
+  // mineral-200
+  brand: brand[600],
+  "brand-subtle": `color-mix(in oklch, ${brand[600]} 36%, transparent)`,
+  "danger-muted": `color-mix(in oklch, ${danger[500]} 36%, transparent)`,
+  "success-muted": `color-mix(in oklch, ${success[500]} 36%, transparent)`,
+  "warning-muted": `color-mix(in oklch, ${warning[500]} 36%, transparent)`,
+  "info-muted": `color-mix(in oklch, ${info[500]} 36%, transparent)`,
+  // Tabela
+  table: gray[150]
+};
+const ring$1 = {
+  brand: `color-mix(in oklch, ${brand[600]} 22%, transparent)`,
+  danger: `color-mix(in oklch, ${danger[500]} 22%, transparent)`,
+  success: `color-mix(in oklch, ${success[500]} 22%, transparent)`,
+  warning: `color-mix(in oklch, ${warning[500]} 22%, transparent)`,
+  info: `color-mix(in oklch, ${info[500]} 22%, transparent)`,
+  secondary: `color-mix(in oklch, ${gray[500]} 22%, transparent)`
+};
+const overlay$1 = {
+  // Scrim de backdrop (modais, drawers)
+  scrim: "oklch(0 0 0 / 0.55)",
+  // Outline de 6px pra elementos flutuantes (panels, dropdowns, command, modais)
+  // — consumido pela utility `outline-float`. Light: cinza medium 12%.
+  // Valor anterior (6%) era visualmente imperceptível em backgrounds claros;
+  // 12% mantém o efeito "halo sutil" mas com presença visual real.
+  float: "oklch(0.55 0 0 / 0.12)"
+};
+const colorLight = { bg: bg$1, fg: fg$1, border: border$1, ring: ring$1, overlay: overlay$1 };
+const bg = {
+  // Surfaces sólidas
+  canvas: gray[900],
+  // body
+  surface: "oklch(0.225 0 0)",
+  // cards, drawer (entre gray-900 e gray-800)
+  "surface-elevated": "oklch(0.225 0 0)",
+  "surface-panels": gray[900],
+  sidebar: "oklch(0.225 0 0)",
+  // Backgrounds neutros (alpha overlay — adapta ao surface debaixo)
+  subtle: "oklch(1 0 0 / 0.01)",
+  muted: "oklch(1 0 0 / 0.03)",
+  emphasis: `color-mix(in oklch, ${white} 12%, transparent)`,
+  // mesmo visual do bg-accent (sem semântica de "active")
+  input: "oklch(1 0 0 / 0.04)",
+  accent: "oklch(1 0 0 / 0.12)",
+  // Brand (dark usa brandContrast — verde brilhante)
+  brand: brandContrast[400],
+  "brand-subtle": `color-mix(in oklch, ${brandContrast[400]} 14%, transparent)`,
+  "brand-hover": `color-mix(in oklch, ${brandContrast[400]} 90%, black)`,
+  "brand-subtle-hover": `color-mix(in oklch, ${brandContrast[400]} 22%, transparent)`,
+  // Status (sólido + muted alpha — ×4 cores)
+  danger: danger[500],
+  "danger-muted": `color-mix(in oklch, ${danger[500]} 14%, transparent)`,
+  "danger-hover": `color-mix(in oklch, ${danger[500]} 90%, white)`,
+  "danger-muted-hover": `color-mix(in oklch, ${danger[500]} 22%, transparent)`,
+  success: success[500],
+  "success-muted": `color-mix(in oklch, ${success[500]} 14%, transparent)`,
+  "success-hover": `color-mix(in oklch, ${success[500]} 90%, white)`,
+  "success-muted-hover": `color-mix(in oklch, ${success[500]} 22%, transparent)`,
+  warning: warning[500],
+  "warning-muted": `color-mix(in oklch, ${warning[500]} 14%, transparent)`,
+  "warning-hover": `color-mix(in oklch, ${warning[500]} 90%, white)`,
+  "warning-muted-hover": `color-mix(in oklch, ${warning[500]} 22%, transparent)`,
+  info: info[500],
+  "info-muted": `color-mix(in oklch, ${info[500]} 14%, transparent)`,
+  "info-hover": `color-mix(in oklch, ${info[500]} 90%, white)`,
+  "info-muted-hover": `color-mix(in oklch, ${info[500]} 22%, transparent)`,
+  // Hover dos neutros — alphas sobem 1 tier
+  "muted-hover": "oklch(1 0 0 / 0.08)",
+  "input-hover": "oklch(1 0 0 / 0.08)",
+  "accent-hover": "oklch(1 0 0 / 0.16)",
+  // Sidebar item states — alphas
+  "sidebar-accent": "oklch(1 0 0 / 0.08)",
+  "sidebar-accent-hover": "oklch(1 0 0 / 0.12)",
+  // Tabela — sólidos pra suportar sticky columns sem vazamento
+  "table": "oklch(0.225 0 0)",
+  // mesmo bg-surface
+  "table-head": "oklch(0.252 0 0)",
+  // gray-850 — head sticky
+  "table-row-hover": "oklch(0.252 0 0)",
+  // Linha selecionada — alpha brandContrast 10%; hover sobe pra 14%
+  // (no dark precisa de alpha levemente maior pra ficar visível sobre surface escuro)
+  "table-row-selected": `color-mix(in oklch, ${brandContrast[400]} 10%, transparent)`,
+  "table-row-selected-hover": `color-mix(in oklch, ${brandContrast[400]} 14%, transparent)`,
+  // Dropdown/Popover — frosted-glass: bg-canvas com 70% opacidade
+  // (combina com backdrop-blur no componente pra efeito vidro fosco)
+  "dropdown": "color-mix(in oklab, var(--color-bg-canvas) 70%, transparent)"
+};
+const fg = {
+  // Hierarquia
+  strong: white,
+  // 100% — títulos
+  default: "oklch(0.98 0 0)",
+  // texto padrão (sem primitive equiv exato)
+  muted: gray[400],
+  // labels, helpers
+  subtle: `color-mix(in oklch, ${gray[400]} 70%, transparent)`,
+  // placeholders
+  disabled: gray[600],
+  // Brand
+  brand: brandContrast[400],
+  // Status
+  danger: danger[500],
+  success: success[500],
+  warning: warning[500],
+  info: info[500],
+  // Sobre fundos sólidos (on-*) — dark inverte: verde brilhante, vermelho saturado, etc
+  "on-brand": black,
+  // preto sobre verde brilhante
+  "on-danger": white,
+  "on-success": black,
+  "on-warning": black,
+  "on-info": white
+};
+const border = {
+  default: gray[800],
+  subtle: "oklch(1 0 0 / 0.04)",
+  input: "oklch(1 0 0 / 0.08)",
+  sidebar: gray[800],
+  brand: brandContrast[400],
+  "brand-subtle": `color-mix(in oklch, ${brandContrast[400]} 36%, transparent)`,
+  "danger-muted": `color-mix(in oklch, ${danger[500]} 36%, transparent)`,
+  "success-muted": `color-mix(in oklch, ${success[500]} 36%, transparent)`,
+  "warning-muted": `color-mix(in oklch, ${warning[500]} 36%, transparent)`,
+  "info-muted": `color-mix(in oklch, ${info[500]} 36%, transparent)`,
+  // Tabela
+  table: gray[800]
+};
+const ring = {
+  brand: `color-mix(in oklch, ${brandContrast[400]} 22%, transparent)`,
+  danger: `color-mix(in oklch, ${danger[500]} 22%, transparent)`,
+  success: `color-mix(in oklch, ${success[500]} 22%, transparent)`,
+  warning: `color-mix(in oklch, ${warning[500]} 22%, transparent)`,
+  info: `color-mix(in oklch, ${info[500]} 22%, transparent)`,
+  secondary: `color-mix(in oklch, ${gray[500]} 22%, transparent)`
+};
+const overlay = {
+  // Scrim de backdrop (modais, drawers)
+  scrim: "oklch(0 0 0 / 0.55)",
+  // Outline de 6px pra elementos flutuantes (panels, dropdowns, command, modais)
+  // — consumido pela utility `outline-float`. Dark: branco 8%.
+  // Valor anterior (4%) era visualmente imperceptível em surfaces escuras;
+  // 8% mantém o efeito "halo sutil" mas com presença visual real.
+  float: "oklch(1 0 0 / 0.08)"
+};
+const colorDark = { bg, fg, border, ring, overlay };
+const BASE = 4;
+const sp = (n) => `${n * BASE}px`;
+const scale = {
+  0: sp(0),
+  // 0px
+  0.5: sp(0.5),
+  // 2px   ← hairline
+  1: sp(1),
+  // 4px   ← xs
+  1.5: sp(1.5),
+  // 6px
+  2: sp(2),
+  // 8px   ← sm
+  2.5: sp(2.5),
+  // 10px
+  3: sp(3),
+  // 14px
+  4: sp(4),
+  // 16px  ← base (1 unit)
+  5: sp(5),
+  // 20px
+  6: sp(6),
+  // 24px  ← lg
+  7: sp(7),
+  // 28px
+  8: sp(8),
+  // 32px  ← xl
+  9: sp(9),
+  // 36px
+  10: sp(10),
+  // 40px
+  11: sp(11),
+  // 44px  ← touch target min
+  12: sp(12),
+  // 48px  ← touch target ideal
+  14: sp(14)
+};
+const unified = {
+  "2xs": scale[0.5],
+  //  2px — hairline, border-like gaps
+  xs: scale[1],
+  //  4px — icon-to-text tight, checkbox gap, tag gap
+  sm: scale[1.5],
+  //  6px — button icon gap (xxs/xs), badge gap, tabs
+  md: scale[2],
+  //  8px — button icon gap (sm/md), form field gap, input padding
+  lg: scale[2.5],
+  // 10px — compact card padding
+  xl: scale[3],
+  // 12px — button padding (xs), info box gap, card row gap
+  "2xl": scale[4],
+  // 16px — card padding (sm), section gap, info box padding
+  "3xl": scale[5],
+  // 20px — spacer médio
+  "4xl": scale[6],
+  // 24px — card gap padrão, card padding (default), section gap
+  "5xl": scale[7],
+  // 28px — spacer grande
+  "6xl": scale[8],
+  // 32px — section major gap
+  "7xl": scale[12]
+  // 48px — page-level gap
+};
+const space = {
+  base: scale[4],
+  // 16px — DEFAULT: uma unidade espacial do sistema
+  0: scale[0],
+  px: { px: "1px", raw: 1 },
+  ...unified
+};
+const gap = {
+  base: scale[6],
+  // 24px — DEFAULT: card/section internal gap
+  ...unified
+};
+const pad = {
+  base: scale[3],
+  // 12px — DEFAULT: button/input padding horizontal
+  ...unified
+};
+const spacing = { space, gap, pad };
+const comp = {
+  base: scale[10],
+  // 40px — DEFAULT: button md, input md (desktop)
+  "3xs": scale[4],
+  // 16px — badge micro
+  "2xs": scale[5],
+  // 20px — badge md, switch
+  xs: scale[6],
+  // 24px — compact chip, small tag
+  sm: scale[7],
+  // 28px — tabs item
+  md: scale[8],
+  // 32px — button xs, input xs
+  lg: scale[9],
+  // 36px — button sm, input sm
+  xl: scale[10],
+  // 40px — mesmo valor que base
+  "2xl": scale[11],
+  // 44px — WCAG touch target
+  "3xl": scale[12],
+  // 48px — confortável
+  "4xl": scale[14]
+  // 56px — hero CTA
+};
+const sizing = { comp };
+const RADIUS_BASE = "0.625rem";
+const radius = {
+  base: RADIUS_BASE,
+  // 10px — DEFAULT componentes interativos (= lg)
+  none: "0px",
+  //  0px — sharp corners
+  xs: `${RADIUS_BASE} * 0.4`,
+  //  4px — sutil
+  sm: `${RADIUS_BASE} * 0.6`,
+  //  6px — tabs indicator
+  md: `${RADIUS_BASE} * 0.8`,
+  //  8px — inputs menores
+  lg: RADIUS_BASE,
+  // 10px — igual ao knob (alias de base)
+  xl: `${RADIUS_BASE} * 1.4`,
+  // 14px — modais, painéis
+  "2xl": `${RADIUS_BASE} * 1.8`,
+  // 18px — textarea, select content
+  "3xl": `${RADIUS_BASE} * 2.2`,
+  // 22px — badges, componentes menores
+  "4xl": `${RADIUS_BASE} * 2.6`,
+  // 26px — antigo valor de base (retido pra casos específicos)
+  full: "9999px"
+  // pill — avatars, chips
+};
+const borderWidth = {
+  none: "0px",
+  xs: "1px",
+  // padrão — separadores, inputs, cards
+  sm: "2px",
+  // ênfase — foco, hover de botão outline
+  md: "4px"
+  // forte — accent, progress indicator
+};
+const outline = {
+  width: "2px",
+  // largura do outline de foco
+  offset: "2px",
+  // espaço entre elemento e outline
+  style: "solid"
+};
+const divider = {
+  width: "1px",
+  style: "solid"
+};
+const shape = { radius, RADIUS_BASE, borderWidth, outline, divider };
+const shadow = {
+  // ── Light mode ───────────────────────────────────────────────────────────────
+  light: {
+    none: "none",
+    sm: "0 1px 2px oklch(0 0 0 / 0.04)",
+    md: "rgba(145, 158, 171, 0.18) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px",
+    lg: "0 8px 24px oklch(0 0 0 / 0.08)",
+    xl: "0 12px 32px oklch(0 0 0 / 0.08)",
+    "2xl": "0 24px 56px oklch(0 0 0 / 0.16)",
+    aside: "-8px 0 24px oklch(0 0 0 / 0.12)",
+    // Focus ring brand-tinted (composite — usado direto em box-shadow)
+    ring: `0 0 0 3px color-mix(in oklch, ${brand[600]} 22%, transparent)`,
+    "ring-danger": `0 0 0 3px color-mix(in oklch, ${danger[500]} 22%, transparent)`,
+    "ring-warning": `0 0 0 3px color-mix(in oklch, ${warning[500]} 22%, transparent)`,
+    "ring-success": `0 0 0 3px color-mix(in oklch, ${success[500]} 22%, transparent)`,
+    "ring-info": `0 0 0 3px color-mix(in oklch, ${info[500]} 22%, transparent)`
+  },
+  // ── Dark mode ────────────────────────────────────────────────────────────────
+  dark: {
+    none: "none",
+    sm: "none",
+    md: `0 0 0 1px ${gray[800]}`,
+    lg: "0 8px 24px oklch(0 0 0 / 0.30)",
+    xl: "0 12px 32px oklch(0 0 0 / 0.40)",
+    "2xl": "0 24px 56px oklch(0 0 0 / 0.45)",
+    aside: "-8px 0 24px oklch(0 0 0 / 0.40)",
+    // Focus ring brand-contrast-tinted (dark usa brandContrast)
+    ring: `0 0 0 3px color-mix(in oklch, ${brandContrast[400]} 22%, transparent)`,
+    "ring-danger": `0 0 0 3px color-mix(in oklch, ${danger[500]} 22%, transparent)`,
+    "ring-warning": `0 0 0 3px color-mix(in oklch, ${warning[500]} 22%, transparent)`,
+    "ring-success": `0 0 0 3px color-mix(in oklch, ${success[500]} 22%, transparent)`,
+    "ring-info": `0 0 0 3px color-mix(in oklch, ${info[500]} 22%, transparent)`
+  }
+};
+const opacity = {
+  // Estados interativos
+  disabled: 0.38,
+  hover: 0.08,
+  focus: 0.12,
+  pressed: 0.12,
+  dragged: 0.16,
+  // Visibilidade
+  invisible: 0,
+  muted: 0.5,
+  subtle: 0.7,
+  full: 1,
+  // Overlay de background (scrims de modal)
+  "scrim-light": 0.32,
+  "scrim-dark": 0.64
+};
+const blur = {
+  sm: "blur(4px)",
+  md: "blur(8px)",
+  lg: "blur(16px)",
+  xl: "blur(24px)"
+};
+const zIndex = {
+  hide: -1,
+  base: 0,
+  dropdown: 100,
+  sticky: 200,
+  overlay: 300,
+  modal: 400,
+  popover: 500,
+  toast: 600,
+  tooltip: 700
+};
+const elevation = { shadow, opacity, blur, zIndex };
+const fontFamily = {
+  sans: "var(--font-sans, 'Geist', system-ui, -apple-system, sans-serif)",
+  mono: "var(--font-mono, 'Geist Mono', 'Fira Code', monospace)"
+};
+const fontWeight = {
+  regular: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+const display = {
+  "display-2xl": {
+    fontSize: "clamp(2.5rem, calc(1.568rem + 3.978vw), 4.75rem)",
+    lineHeight: "1.1",
+    fontWeight: fontWeight.bold,
+    letterSpacing: "-0.02em",
+    fontFamily: fontFamily.sans
+  },
+  "display-xl": {
+    fontSize: "clamp(2.25rem, calc(1.603rem + 2.762vw), 3.8125rem)",
+    lineHeight: "1.1",
+    fontWeight: fontWeight.bold,
+    letterSpacing: "-0.02em",
+    fontFamily: fontFamily.sans
+  },
+  "display-lg": {
+    fontSize: "clamp(2rem, calc(1.560rem + 1.878vw), 3.0625rem)",
+    lineHeight: "1.15",
+    fontWeight: fontWeight.semibold,
+    letterSpacing: "-0.01em",
+    fontFamily: fontFamily.sans
+  },
+  "display-md": {
+    fontSize: "clamp(1.75rem, calc(1.465rem + 1.215vw), 2.4375rem)",
+    lineHeight: "1.15",
+    fontWeight: fontWeight.semibold,
+    letterSpacing: "-0.01em",
+    fontFamily: fontFamily.sans
+  }
+};
+const heading = {
+  "heading-xl": {
+    fontSize: "clamp(2.25rem, calc(1.732rem + 2.210vw), 3.5rem)",
+    lineHeight: "1.15",
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.01em",
+    fontFamily: fontFamily.sans
+  },
+  "heading-lg": {
+    fontSize: "clamp(2rem, calc(1.586rem + 1.768vw), 3rem)",
+    lineHeight: "1.2",
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.01em",
+    fontFamily: fontFamily.sans
+  },
+  "heading-md": {
+    fontSize: "clamp(1.75rem, calc(1.439rem + 1.326vw), 2.5rem)",
+    lineHeight: "1.2",
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.01em",
+    fontFamily: fontFamily.sans
+  },
+  "heading-sm": {
+    fontSize: "clamp(1.5rem, calc(1.293rem + 0.884vw), 2rem)",
+    lineHeight: "1.25",
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.005em",
+    fontFamily: fontFamily.sans
+  },
+  "heading-xs": {
+    fontSize: "1.5rem",
+    // 24px
+    lineHeight: "2rem",
+    // 32px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  }
+  // NOTE: heading-2xs removido — era duplicata pura de title-lg (ambos 20px/500/0em).
+  // Consumidores migrados para text-title-lg.
+};
+const title = {
+  "title-lg": {
+    fontSize: "1.25rem",
+    // 20px
+    lineHeight: "1.75rem",
+    // 28px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  },
+  "title-md": {
+    fontSize: "1rem",
+    // 16px
+    lineHeight: "1.5rem",
+    // 24px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  },
+  "title-sm": {
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: "1.25rem",
+    // 20px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  }
+};
+const label = {
+  "label-xl": {
+    fontSize: "1.5rem",
+    // 24px
+    lineHeight: "2rem",
+    // 32px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.015em",
+    fontFamily: fontFamily.sans
+  },
+  "label-lg": {
+    fontSize: "1.125rem",
+    // 18px
+    lineHeight: "1.5rem",
+    // 24px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.015em",
+    fontFamily: fontFamily.sans
+  },
+  "label-md": {
+    fontSize: "1rem",
+    // 16px
+    lineHeight: "1.5rem",
+    // 24px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.011em",
+    fontFamily: fontFamily.sans
+  },
+  "label-sm": {
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: "1.25rem",
+    // 20px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.006em",
+    fontFamily: fontFamily.sans
+  },
+  "label-xs": {
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: "1rem",
+    // 16px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  },
+  // ★ NOVO — preenche tier 11px no namespace label (interactive, weight 500).
+  // Casos: micro label, hint count, rail tooltip.
+  "label-2xs": {
+    fontSize: "0.6875rem",
+    // 11px
+    lineHeight: "0.875rem",
+    // 14px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  },
+  // ★ NOVO — preenche tier 13px no namespace label (body default interativo do projeto).
+  // Casos: button sm, dropdown item, input value, tab default.
+  "label-base": {
+    fontSize: "0.8125rem",
+    // 13px
+    lineHeight: "1.125rem",
+    // 18px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "-0.003em",
+    fontFamily: fontFamily.sans
+  }
+};
+const paragraph = {
+  "paragraph-xl": {
+    fontSize: "1.5rem",
+    // 24px
+    lineHeight: "2rem",
+    // 32px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "-0.015em",
+    fontFamily: fontFamily.sans
+  },
+  "paragraph-lg": {
+    fontSize: "1.125rem",
+    // 18px
+    lineHeight: "1.5rem",
+    // 24px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "-0.015em",
+    fontFamily: fontFamily.sans
+  },
+  "paragraph-md": {
+    fontSize: "1rem",
+    // 16px
+    lineHeight: "1.5rem",
+    // 24px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "-0.011em",
+    fontFamily: fontFamily.sans
+  },
+  "paragraph-sm": {
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: "1.25rem",
+    // 20px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "-0.006em",
+    fontFamily: fontFamily.sans
+  },
+  "paragraph-xs": {
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: "1rem",
+    // 16px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  },
+  // ★ NOVO — preenche tier 13px no namespace paragraph (body default do projeto).
+  // Casos: body small, msg bubble, table cell, command item, dropdown item.
+  "paragraph-base": {
+    fontSize: "0.8125rem",
+    // 13px
+    lineHeight: "1.125rem",
+    // 18px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "-0.003em",
+    fontFamily: fontFamily.sans
+  }
+};
+const caption = {
+  "caption-md": {
+    fontSize: "0.8125rem",
+    // 13px
+    lineHeight: "1.125rem",
+    // 18px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  },
+  "caption-sm": {
+    fontSize: "0.6875rem",
+    // 11px
+    lineHeight: "0.875rem",
+    // 14px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  },
+  // ★ NOVO — preenche tier 10px (faltava completamente no DS).
+  // Casos: micro caption (bubble meta, conv ID, history meta).
+  "caption-xs": {
+    fontSize: "0.625rem",
+    // 10px
+    lineHeight: "0.75rem",
+    // 12px
+    fontWeight: fontWeight.regular,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.sans
+  }
+};
+const subheading = {
+  "subheading-md": {
+    fontSize: "1rem",
+    // 16px
+    lineHeight: "1.5rem",
+    // 24px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0.06em",
+    fontFamily: fontFamily.sans
+  },
+  "subheading-sm": {
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: "1.25rem",
+    // 20px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0.06em",
+    fontFamily: fontFamily.sans
+  },
+  "subheading-xs": {
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: "1rem",
+    // 16px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0.04em",
+    fontFamily: fontFamily.sans
+  },
+  "subheading-2xs": {
+    fontSize: "0.6875rem",
+    // 11px
+    lineHeight: "0.75rem",
+    // 12px
+    fontWeight: fontWeight.medium,
+    letterSpacing: "0.02em",
+    fontFamily: fontFamily.sans
+  },
+  // ★ NOVO — variante "strong" weight 700 + tracking apertado (+0.06em).
+  // Substitui o pattern literal `text-[Npx] font-bold tracking-[0.06em] uppercase`.
+  // Casos: FILTERS/CATEGORIAS section title, table thead, MenuSidebar section header.
+  "subheading-strong-md": {
+    fontSize: "0.6875rem",
+    // 11px
+    lineHeight: "0.875rem",
+    // 14px
+    fontWeight: fontWeight.bold,
+    letterSpacing: "0.06em",
+    fontFamily: fontFamily.sans
+  },
+  // ★ NOVO — versão 10px do strong subheading.
+  // Casos: chip counter, unread badge, header tab count, agent rank.
+  "subheading-strong-sm": {
+    fontSize: "0.625rem",
+    // 10px
+    lineHeight: "0.75rem",
+    // 12px
+    fontWeight: fontWeight.bold,
+    letterSpacing: "0.06em",
+    fontFamily: fontFamily.sans
+  }
+};
+const code = {
+  "code-md": {
+    fontSize: "1rem",
+    // 16px
+    lineHeight: "1.6",
+    fontWeight: fontWeight.regular,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.mono
+  },
+  "code-sm": {
+    fontSize: "0.8125rem",
+    // 13px
+    lineHeight: "1.6",
+    fontWeight: fontWeight.regular,
+    letterSpacing: "0em",
+    fontFamily: fontFamily.mono
+  }
+};
+const typography = {
+  ...display,
+  ...heading,
+  ...title,
+  ...label,
+  ...paragraph,
+  ...caption,
+  ...subheading,
+  ...code
+};
+const duration = {
+  instant: "0ms",
+  "x-fast": "100ms",
+  // hover states, focus rings
+  fast: "150ms",
+  // simples (opacity, color)
+  moderate: "200ms",
+  // entradas de elementos
+  slow: "300ms",
+  // modais, drawers, expansões
+  "x-slow": "400ms",
+  // page transitions
+  deliberate: "500ms"
+  // animações complexas, onboarding
+};
+const easing = {
+  // Productive
+  "standard": "cubic-bezier(0.2, 0, 0.38, 0.9)",
+  // entra e sai
+  "entrance-productive": "cubic-bezier(0, 0, 0.38, 0.9)",
+  // entra
+  "exit-productive": "cubic-bezier(0.2, 0, 1, 0.9)",
+  // sai
+  // Expressive
+  "emphasized": "cubic-bezier(0.2, 0, 0, 1)",
+  // enfatizado
+  "emphasized-decelerate": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+  // entra (expressive)
+  "emphasized-accelerate": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+  // sai (expressive)
+  // Utilitários
+  "linear": "linear",
+  "spring": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
+  // ligeiro bounce
+};
+const motionPresets = {
+  // Component transitions (button, badge, input, switch)
+  "component": `${duration.moderate} ease-out`,
+  // Color shift (tabs item color)
+  "color-shift": `${duration.slow} ease-out`,
+  // Spring (tabs indicator slide)
+  "spring": `${duration.slow} cubic-bezier(0.65, 0, 0.35, 1)`,
+  // Existing presets
+  "hover-color": `${duration.fast} ${easing.standard}`,
+  "hover-transform": `${duration["x-fast"]} ${easing["entrance-productive"]}`,
+  "fade-in": `${duration.moderate} ${easing["emphasized-decelerate"]}`,
+  "fade-out": `${duration.fast} ${easing["emphasized-accelerate"]}`,
+  "slide-in": `${duration.slow} ${easing["emphasized-decelerate"]}`,
+  "slide-out": `${duration.moderate} ${easing["emphasized-accelerate"]}`,
+  "expand": `${duration.slow} ${easing.emphasized}`,
+  "collapse": `${duration.moderate} ${easing["emphasized-accelerate"]}`
+};
+export {
+  colorDark,
+  colorLight,
+  duration,
+  easing,
+  elevation,
+  motionPresets,
+  shape,
+  sizing,
+  spacing,
+  typography
+};
+//# sourceMappingURL=tokens.mjs.map