@financinha/tokens 0.0.0-stage → 0.8.0

package/CHANGELOG.md

@@ -0,0 +1,168 @@
+# Changelog
+
+Formato: [Keep a Changelog](https://keepachangelog.com/). Versionamento: SemVer.
+
+## [Não lançado]
+
+### Alterado
+
+- **Publicação no npm público**, no lugar do GitHub Packages: instalar não exige mais token nem
+  `.npmrc`. As versões até a 0.7.1 continuam só no GitHub Packages.
+
+### Documentação
+
+- CHANGELOG organizado por versão: os itens que estavam acumulados em "Não lançado" foram para a
+  versão em que saíram (0.4.0 a 0.7.0).
+
+## [0.7.0] — 2026-11-05
+
+### Adicionado
+
+- **Duração `instant` (100 ms)**, a que menus, popovers, Select e modais já usam para abrir e fechar
+  (`duration-100` no Tailwind). Em CSS: `--ds-duration-instant` e `--ds-transition-instant`; em TS:
+  `duration.instant` e `transition.instant`.
+
+## [0.6.0] — 2026-10-19
+
+### Alterado
+
+- **Escala de raio reduzida a três tamanhos** (quebra compatibilidade): `sm` 4 px (elementos
+  pequenos, como o checkbox), `md` 6 px (itens dentro de caixas, tooltip, skeleton) e `lg` 10 px (botões, campos,
+  cards, popovers, menus e modais), mais `none` e `full`. Sai o `xl`; `sm` passa de 6 para 4 px
+  e `md` de 8 para 6 px. No Tailwind, `rounded-xs`, `rounded-xl`, `rounded-2xl`, `rounded-3xl` e
+  `rounded-4xl` deixam de existir. No `ui`: botões, campos, popovers e caixas de menu passam de
+  8 para 10 px; card e modais de 12 para 10 px; itens de menu e do select seguem em 6 px (agora
+  `md`); checkbox de 4 px solto para `sm`; badge de `rounded-4xl` para `rounded-full`.
+
+## [0.5.0] — 2026-10-19
+
+### Adicionado
+
+- **Entrelinha por tamanho** (`leading`, `--ds-leading-*`), sempre na grade de 4 px: 16, 20, 24,
+  28, 28, 32, 36, 40 e 48 px (de `xs` a `5xl`). No Tailwind, `text-*` já aplica a entrelinha do
+  tamanho. Os estilos de texto (`textStyles`) passam a usá-la, em vez de 1,5 em todos (que dava
+  18, 21, 27 e 30 px, fora da grade). `lineHeight.tight`/`base` continuam existindo.
+- Três tamanhos de texto de destaque: `3xl` (28 px), `4xl` (32 px) e `5xl` (40 px), para títulos
+  de fluxo e de abertura (cancelamento, login). No Tailwind eles substituem os valores padrão
+  de `text-3xl`, `text-4xl` e `text-5xl` (30, 36 e 48 px).
+
+### Alterado
+
+- **Raio `xl` passa de 14 para 12 px**, o canto dos modais (igual ao do Portal). Botões e campos
+  continuam em `lg` (10 px).
+- **Estilos de texto refeitos no formato da Vibe** (`textStyles`): nove funções no lugar
+  dos nomes por uso. Destaques `display1` (40 px) e `display2` (32 px), em bold; títulos `h1` (28 px), `h2` (24 px), `h3` (20 px) e `h4` (18 px); textos `text1` (16 px),
+  `text2` (14 px) e `text3` (12 px). O peso deixou de ser fixo: cada estilo tem um peso padrão
+  (`fontWeight`) e a lista de pesos permitidos (`weights`). `display1`, `display2`, `h1` e `h2` usam espaço entre letras
+  `tight` (-0,01em), os demais `normal`; a entrelinha acompanha o tamanho (`leading`). Saem
+  `body`, `bodySm`, `caption`, `label` e `button`: botão e rótulo de campo são `text2` em medium
+  (14 px, como o botão do `ui` e o Portal), e a legenda é `text3`.
+
+## [0.4.0] — 2026-10-16
+
+### Adicionado
+
+- `neutral-0` (`#FFFFFF`, `--ds-neutral-0`, `bg-neutral-0`): o branco puro vira um degrau da escala
+  `neutral`. `background`, `card`, `popover` e os `...Foreground` sobre cor forte apontam para ele.
+- `brand.coral` (`#EE6B55`, `--ds-brand-coral`): o coral do logo, só para logo,
+  ilustração e marketing; nunca em componentes ou estados.
+- `neutral-800` (`#101A29`) e `neutral-900` (`#050C17`), que completam a escala.
+- Token semântico `primary-hover` (`--ds-primary-hover`, `bg-primary-hover`).
+
+### Alterado
+
+- `primary-400` passa de `#902DFF` para **`#8534FF`** (valor do Figma), resolvendo a
+  divergência entre código e Figma.
+- **Escala `primary` refeita** em volta de dois valores fixos (`400` = `#8534FF` e
+  `500` = `#5D11D0`, a cor oficial): passos regulares em OKLCH, `50` e `100` deixam de
+  ser iguais e os escuros (`600`–`900`) deixam de ser quase pretos.
+- **A ação principal passa a ser o `primary-500`** (antes, `400`). Hover e pressionado
+  usam `primary-400`, sem terceiro tom; o botão também encolhe a 0,98 ao pressionar.
+  No modo escuro, a base é o `400` e o hover vai ao `500`.
+- O fundo da sidebar passa de `primary-200` para `primary-50` (mesmo visual de antes).
+- **Escala `neutral` refeita** em uma só família (matiz ~257°, o do `neutral-300`): `50`
+  (`#F5F5F7`, fundo do menu) e `300`–`700` intocados; `100` (`#E1E8F1`) e `200`
+  (`#CCD6E4`) ganham o matiz azul-ardósia, com saturação crescente até o `300`.
+  Bordas e fundos suaves ficam levemente mais azulados.
+- **Régua única de luminosidade para as seis escalas** (`neutral`, `primary`, `support`,
+  `success`, `warning`, `danger`): cada degrau tem o mesmo papel em todas (`100` badge suave,
+  `300` sólido vivo com texto escuro, `400` vivo forte, `500` degrau AA, `600`–`900`
+  escuros). As escalas de status deixam de ser as do Tailwind: matiz fixo por escala,
+  `500` mais profundo e `800`/`900` na mesma luminosidade do `primary` (que ficou menos
+  escuro: `600`–`900` e `neutral-900` subiram um pouco).
+- **Os degraus `900` (e `950`) foram removidos** das seis escalas: o `800` passa a ser o mais
+  escuro e os escuros (`600`–`800`) foram redistribuídos e ficaram menos escuros (luminosidade
+  ~0,28 no `800`). Variantes dark do `Badge`/`Alert` usam o `800`/`700`; o texto dos badges
+  sólidos usa `neutral-800`.
+- `destructive` (claro) passa de `danger-600` para `danger-500`; `chart-1…5` passam a usar
+  o `-400` de cada escala.
+- Fundos suaves mais cheios em `support-100`, `success-50/100/200` e `warning-50/100/200` (o
+  âmbar deixa de ser bege e vira creme-amarelo); `primary-300` passa a `#A380FE` (mais intenso).
+- `Badge`: o padrão suave passa a ser fundo `-100` + contorno `-200` + texto `-500`, em semibold
+  12 px (altura 24 px, espaçamentos em múltiplos de 4); novos variantes
+  `support` e `solid-*` (fundo `-300` + texto neutro escuro).
+
+### Removido / renomeado (quebra de compatibilidade)
+
+- A regra "`primary-600` é proibido" foi removida de todos os lugares: com a nova régua, o `600` é
+  um tom escuro normal (pressionado e fundos escuros), igual ao das outras escalas.
+- **Escala `info` renomeada para `support`** (`info-*` → `support-*`, `--ds-info-*` →
+  `--ds-support-*`, `--color-info-*` → `--color-support-*`). Mesmos valores (azul): é a cor
+  de apoio para categorias (tipo de conta, tipo de meta, séries de gráfico), e não a cor de
+  "informação" — a Financinha não usa azul para informar. Os variantes `info` do `Alert` e
+  do `Badge` agora usam o lilás da marca (`primary-50/700`).
+- **Escala `secondary` (coral/vermelho) removida** (`secondary-50`…`secondary-950`,
+  `--ds-secondary-*`, `--color-secondary-*`). Ela duplicava `danger` e lia-se como erro.
+  Use `danger-*` para erro e valor negativo. O `chart-5` passa a usar `danger-500`
+  (mesma cor de antes). O token semântico `secondary` (cinza do shadcn) NÃO mudou.
+
+## [0.1.2] a [0.3.0] — 2026-07-02 a 2026-10-08
+
+Sem registro neste arquivo. As mudanças estão nos commits `chore(release)` do histórico do git
+(0.3.0 foi a separação em monorepo, com `@financinha/ui`).
+
+## [0.1.1] — 2026-07-02
+
+### Adicionado
+
+- **Componentes React** (`@financinha/tokens/react`): `Button`, `Card` (+
+  `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`),
+  `Banner`, `Spinner`, `Input`, `Textarea`, `Select`, `FormField`/`Label`,
+  `Switch`, `Checkbox`, `RadioGroup`, `Badge`, `Modal`, `EmptyState`, `Tooltip`.
+- Storybook com Tailwind v4 (`@tailwindcss/vite`) e stories colocadas por
+  componente.
+- Publicação automática no GitHub Packages a cada push na `main`
+  (`.github/workflows/publish.yml`), com bump semver por conventional commit.
+
+## [0.1.0] — 2026-07-02
+
+### Adicionado
+
+- Primeira versão dos design tokens da Financinha como pacote instalável
+  (`@financinha/tokens`), consolidando os tokens de `financinha-web-front/src/ds`.
+- **Cores:** escalas `neutral`, `primary`, `secondary`, `info`, `success`,
+  `warning`, `danger` + semânticas `semantic` (light), `semanticDark` e `chart`.
+- **Tipografia:** Open Sans, `fontSize`, `fontWeight` (inclui `light` 300),
+  `lineHeight`, `letterSpacing`, `textStyles`.
+- **Espaçamento** (`space` + `spacePx`), **radius**, **shadows**,
+  **transições** (`duration` + `easing` + `transition`), **breakpoints**, **z-index**.
+- Três formatos de saída em paridade: TS tipado, `tokens.css` (`--ds-*`, light +
+  dark) e `theme.css` (preset Tailwind v4).
+- Teste de paridade TS ↔ CSS (`vitest`) + checagem sem dependências (`lint:css`).
+
+### Corrigido (pós-auditoria)
+
+- **exports map**: tipos condicionais por formato (`import` → `.d.ts`, `require` →
+  `.d.cts`) — antes o CJS resolvia tipos ESM (FalseESM no `arethetypeswrong`).
+- **Tailwind**: removidos os stops `neutral-800/900/950` default do Tailwind
+  (cinzas acromáticos) que sobreviviam ao override parcial 50–700 da marca.
+- **Acessibilidade**: guidelines ganharam seção de contraste WCAG — tons de status
+  `-500` são preenchimento (não texto sobre branco), `text-muted` é decorativo,
+  placeholder nunca é rótulo, não confiar só na cor (SC 1.4.1).
+- Notas de consumo: React Native (só JS, CSS é web-only), exports nomeados,
+  `fonts.css` exige rede/CSP.
+
+### A resolver
+
+- Reconciliar `primary-400`: código usa `#902DFF`, docs do Figma usam `#8534FF`.
+  Adotado `#902DFF` por ora.

package/dist/fonts.css

@@ -0,0 +1,7 @@
+/**
+ * @financinha/tokens — fonte base (Open Sans).
+ *
+ * Mesma origem do Figma Make. Importe no layout raiz, junto com tokens.css.
+ * Em produção, considere self-host (next/font, fontsource) para performance.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

package/dist/index.cjs

@@ -0,0 +1,521 @@
+'use strict';
+
+// src/tokens/palette.ts
+var neutral = {
+  0: "#FFFFFF",
+  50: "#F5F5F7",
+  100: "#E1E8F1",
+  200: "#CCD6E4",
+  300: "#94A3B8",
+  400: "#64748B",
+  500: "#475569",
+  600: "#334155",
+  700: "#1E293B",
+  800: "#141E2E"
+};
+var primary = {
+  50: "#F7F5FF",
+  100: "#ECE8FF",
+  200: "#DCD4FE",
+  300: "#A380FE",
+  400: "#8534FF",
+  500: "#5D11D0",
+  600: "#4B1AA8",
+  700: "#391482",
+  800: "#29115D"
+};
+var brand = {
+  coral: "#EE6B55"
+};
+var support = {
+  50: "#F2F7FF",
+  100: "#E2EEFF",
+  200: "#C9DEFF",
+  300: "#6EA6FE",
+  400: "#3780F1",
+  500: "#1A65D4",
+  600: "#004199",
+  700: "#003277",
+  800: "#00245A"
+};
+var success = {
+  50: "#ECFDF3",
+  100: "#D3F9E3",
+  200: "#A9EBC3",
+  300: "#26D28D",
+  400: "#09A970",
+  500: "#007A4F",
+  600: "#035636",
+  700: "#004229",
+  800: "#00311D"
+};
+var warning = {
+  50: "#FFFAED",
+  100: "#FFEFC9",
+  200: "#F8DF9A",
+  300: "#FEB433",
+  400: "#E29B03",
+  500: "#8F6103",
+  600: "#633F00",
+  700: "#4C3000",
+  800: "#392200"
+};
+var danger = {
+  50: "#FFF4F3",
+  100: "#FFE6E5",
+  200: "#FFCFCC",
+  300: "#FF5C5C",
+  400: "#E64147",
+  500: "#CB2336",
+  600: "#89021C",
+  700: "#6B0113",
+  800: "#51010C"
+};
+var palette = {
+  neutral,
+  primary,
+  support,
+  success,
+  warning,
+  danger
+};
+
+// src/tokens/semantic.ts
+var semantic = {
+  background: neutral[0],
+  foreground: neutral[700],
+  card: neutral[0],
+  cardForeground: neutral[700],
+  popover: neutral[0],
+  popoverForeground: neutral[700],
+  // primary-500 = cor oficial = ação principal da tela (regra de marca: uma por tela).
+  // Hover/pressionado = primary-400 (mais claro), sem terceiro tom.
+  primary: primary[500],
+  primaryHover: primary[400],
+  primaryForeground: neutral[0],
+  secondary: neutral[100],
+  secondaryForeground: neutral[700],
+  muted: neutral[50],
+  mutedForeground: neutral[400],
+  accent: neutral[100],
+  accentForeground: neutral[700],
+  // danger-500: o degrau "AA" de toda escala (texto/branco sobre ele passa WCAG AA).
+  destructive: danger[500],
+  border: neutral[200],
+  input: neutral[200],
+  // borda de campos de formulário
+  ring: primary[400],
+  sidebar: neutral[50],
+  // o fundo do menu e da tela em volta da página, como no portal (#F5F5F7)
+  sidebarForeground: neutral[700],
+  sidebarPrimary: primary[500],
+  sidebarPrimaryForeground: neutral[0],
+  sidebarAccent: primary[100],
+  sidebarAccentForeground: neutral[700],
+  sidebarBorder: neutral[200],
+  sidebarRing: primary[400]
+};
+var semanticDark = {
+  background: neutral[700],
+  foreground: neutral[50],
+  card: neutral[600],
+  cardForeground: neutral[50],
+  popover: neutral[600],
+  popoverForeground: neutral[50],
+  // No escuro o 500 some no fundo: a base é o 400 e o hover vai ao 500 (texto branco segue AA).
+  primary: primary[400],
+  primaryHover: primary[500],
+  primaryForeground: neutral[0],
+  secondary: neutral[500],
+  secondaryForeground: neutral[50],
+  muted: neutral[600],
+  mutedForeground: neutral[300],
+  accent: neutral[500],
+  accentForeground: neutral[50],
+  destructive: danger[400],
+  // neutral-500: visível tanto sobre background (700) quanto sobre card (600).
+  border: neutral[500],
+  input: neutral[500],
+  ring: primary[300],
+  sidebar: neutral[600],
+  sidebarForeground: neutral[50],
+  sidebarPrimary: primary[400],
+  sidebarPrimaryForeground: neutral[0],
+  sidebarAccent: neutral[700],
+  sidebarAccentForeground: neutral[50],
+  sidebarBorder: neutral[700],
+  sidebarRing: primary[300]
+};
+var chart = {
+  1: primary[400],
+  2: support[400],
+  3: success[400],
+  4: warning[400],
+  5: danger[400]
+};
+
+// src/tokens/colors.ts
+var colors = {
+  neutral,
+  primary,
+  brand,
+  support,
+  success,
+  warning,
+  danger,
+  semantic,
+  semanticDark,
+  chart
+};
+
+// src/tokens/typography.ts
+var fontFamily = {
+  sans: "'Open Sans', sans-serif",
+  mono: "'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+};
+var fontSize = {
+  xs: "0.75rem",
+  // 12px
+  sm: "0.875rem",
+  // 14px
+  base: "1rem",
+  // 16px
+  lg: "1.125rem",
+  // 18px
+  xl: "1.25rem",
+  // 20px
+  "2xl": "1.5rem",
+  // 24px
+  "3xl": "1.75rem",
+  // 28px
+  "4xl": "2rem",
+  // 32px
+  "5xl": "2.5rem"
+  // 40px
+};
+var fontWeight = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var leading = {
+  xs: "1rem",
+  // 16px
+  sm: "1.25rem",
+  // 20px
+  base: "1.5rem",
+  // 24px
+  lg: "1.75rem",
+  // 28px
+  xl: "1.75rem",
+  // 28px
+  "2xl": "2rem",
+  // 32px
+  "3xl": "2.25rem",
+  // 36px
+  "4xl": "2.5rem",
+  // 40px
+  "5xl": "3rem"
+  // 48px
+};
+var lineHeight = {
+  tight: 1.25,
+  base: 1.5
+};
+var letterSpacing = {
+  tight: "-0.01em",
+  normal: "0",
+  wide: "0.025em"
+};
+var textStyles = {
+  display1: {
+    fontSize: fontSize["5xl"],
+    // 40px
+    fontWeight: fontWeight.bold,
+    weights: [fontWeight.semibold, fontWeight.bold],
+    lineHeight: leading["5xl"],
+    letterSpacing: letterSpacing.tight
+  },
+  display2: {
+    fontSize: fontSize["4xl"],
+    // 32px
+    fontWeight: fontWeight.bold,
+    weights: [fontWeight.semibold, fontWeight.bold],
+    lineHeight: leading["4xl"],
+    letterSpacing: letterSpacing.tight
+  },
+  h1: {
+    fontSize: fontSize["3xl"],
+    // 28px
+    fontWeight: fontWeight.semibold,
+    weights: [fontWeight.medium, fontWeight.semibold, fontWeight.bold],
+    lineHeight: leading["3xl"],
+    letterSpacing: letterSpacing.tight
+  },
+  h2: {
+    fontSize: fontSize["2xl"],
+    // 24px
+    fontWeight: fontWeight.semibold,
+    weights: [fontWeight.medium, fontWeight.semibold, fontWeight.bold],
+    lineHeight: leading["2xl"],
+    letterSpacing: letterSpacing.tight
+  },
+  h3: {
+    fontSize: fontSize.xl,
+    // 20px
+    fontWeight: fontWeight.semibold,
+    weights: [fontWeight.medium, fontWeight.semibold, fontWeight.bold],
+    lineHeight: leading.xl,
+    letterSpacing: letterSpacing.normal
+  },
+  h4: {
+    fontSize: fontSize.lg,
+    // 18px
+    fontWeight: fontWeight.medium,
+    weights: [fontWeight.medium, fontWeight.semibold, fontWeight.bold],
+    lineHeight: leading.lg,
+    letterSpacing: letterSpacing.normal
+  },
+  text1: {
+    fontSize: fontSize.base,
+    // 16px
+    fontWeight: fontWeight.normal,
+    weights: [fontWeight.normal, fontWeight.medium, fontWeight.semibold],
+    lineHeight: leading.base,
+    letterSpacing: letterSpacing.normal
+  },
+  text2: {
+    fontSize: fontSize.sm,
+    // 14px
+    fontWeight: fontWeight.normal,
+    weights: [fontWeight.normal, fontWeight.medium, fontWeight.semibold],
+    lineHeight: leading.sm,
+    letterSpacing: letterSpacing.normal
+  },
+  text3: {
+    fontSize: fontSize.xs,
+    // 12px
+    fontWeight: fontWeight.normal,
+    weights: [fontWeight.normal, fontWeight.medium],
+    lineHeight: leading.xs,
+    letterSpacing: letterSpacing.normal
+  }
+};
+var typography = {
+  fontFamily,
+  fontSize,
+  fontWeight,
+  leading,
+  lineHeight,
+  letterSpacing,
+  textStyles
+};
+
+// src/tokens/spacing.ts
+var space = {
+  0: "0",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px"
+};
+var spacePx = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  8: 32,
+  10: 40,
+  12: 48,
+  16: 64
+};
+var spacing = { space, spacePx };
+
+// src/tokens/radius.ts
+var radius = {
+  none: "0",
+  sm: "4px",
+  // elementos pequenos
+  md: "6px",
+  // itens dentro de caixas, tooltip, skeleton
+  lg: "10px",
+  // base
+  full: "9999px"
+};
+
+// src/tokens/shadows.ts
+var shadow = {
+  none: "none",
+  sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+  md: "0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06)",
+  lg: "0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
+};
+
+// src/tokens/transitions.ts
+var duration = {
+  /** Abrir e fechar menus, popovers, Select e modais. */
+  instant: "100ms",
+  fast: "150ms",
+  base: "200ms",
+  slow: "300ms"
+};
+var easing = {
+  default: "ease",
+  in: "cubic-bezier(0.4, 0, 1, 1)",
+  out: "cubic-bezier(0, 0, 0.2, 1)",
+  inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+};
+var transition = {
+  instant: "0.1s ease",
+  fast: "0.15s ease",
+  base: "0.2s ease",
+  slow: "0.3s ease"
+};
+
+// src/tokens/breakpoints.ts
+var breakpoints = {
+  xs: "480px",
+  sm: "576px",
+  md: "768px",
+  lg: "992px",
+  xl: "1200px",
+  xxl: "1600px"
+};
+var breakpointsPx = {
+  xs: 480,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600
+};
+
+// src/tokens/zIndex.ts
+var zIndex = {
+  hide: -1,
+  base: 0,
+  dropdown: 1e3,
+  sticky: 1020,
+  fixed: 1030,
+  modalBackdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070,
+  toast: 1080
+};
+
+// src/tokens/opacity.ts
+var opacity = {
+  0: "0",
+  5: "0.05",
+  10: "0.1",
+  20: "0.2",
+  40: "0.4",
+  60: "0.6",
+  80: "0.8",
+  100: "1"
+};
+
+// src/tokens/borderWidth.ts
+var borderWidth = {
+  0: "0",
+  1: "1px",
+  2: "2px",
+  4: "4px",
+  8: "8px"
+};
+
+// src/tokens/blur.ts
+var blur = {
+  none: "0",
+  sm: "4px",
+  md: "8px",
+  lg: "16px",
+  xl: "24px"
+};
+
+// src/tokens/iconSize.ts
+var iconSize = {
+  xs: "12px",
+  sm: "16px",
+  md: "20px",
+  lg: "24px",
+  xl: "32px"
+};
+var iconSizePx = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+
+// src/tokens/index.ts
+var tokens = {
+  colors,
+  typography,
+  spacing,
+  radius,
+  shadow,
+  transition,
+  duration,
+  easing,
+  breakpoints,
+  zIndex,
+  opacity,
+  borderWidth,
+  blur,
+  iconSize
+};
+
+exports.blur = blur;
+exports.borderWidth = borderWidth;
+exports.brand = brand;
+exports.breakpoints = breakpoints;
+exports.breakpointsPx = breakpointsPx;
+exports.chart = chart;
+exports.colors = colors;
+exports.danger = danger;
+exports.duration = duration;
+exports.easing = easing;
+exports.fontFamily = fontFamily;
+exports.fontSize = fontSize;
+exports.fontWeight = fontWeight;
+exports.iconSize = iconSize;
+exports.iconSizePx = iconSizePx;
+exports.leading = leading;
+exports.letterSpacing = letterSpacing;
+exports.lineHeight = lineHeight;
+exports.neutral = neutral;
+exports.opacity = opacity;
+exports.palette = palette;
+exports.primary = primary;
+exports.radius = radius;
+exports.semantic = semantic;
+exports.semanticDark = semanticDark;
+exports.shadow = shadow;
+exports.space = space;
+exports.spacePx = spacePx;
+exports.spacing = spacing;
+exports.success = success;
+exports.support = support;
+exports.textStyles = textStyles;
+exports.tokens = tokens;
+exports.transition = transition;
+exports.typography = typography;
+exports.warning = warning;
+exports.zIndex = zIndex;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map