@orangesys/tokens 0.0.0-stage → 0.5.0

package/dist/index.js

@@ -0,0 +1,650 @@
+/**
+ * Orange design tokens — fonte única da verdade.
+ *
+ * `primitives` são valores crus (paletas). `themeDefinitions` mapeiam essas
+ * primitivas (por nome) para tokens semânticos (`--or-color-*`) usados por
+ * todos os componentes; `themes` traz os mesmos tokens já resolvidos em cor.
+ * O script `scripts/build.ts` gera `css/tokens.css` e os arquivos DTCG
+ * (`dist/tokens.dtcg.json`) a partir deste arquivo.
+ */
+export const primitives = {
+    carbon: {
+        0: '#0a0a0d',
+        50: '#0f0f12',
+        100: '#16161a',
+        150: '#1c1c21',
+        200: '#2a2a30',
+        300: '#3a3a42',
+        400: '#55555e',
+        500: '#75757f',
+        600: '#9c9588',
+        700: '#b8b0a0',
+        800: '#d4cdb5',
+        900: '#f0ebdb',
+        950: '#faf7ec',
+    },
+    paper: {
+        0: '#fffdf6',
+        50: '#faf7ec',
+        100: '#f0ebdb',
+        200: '#ece7d7',
+        300: '#e2ddcd',
+        400: '#d9d3bf',
+        500: '#c9c4b5',
+        600: '#8a8478',
+        700: '#666057',
+        800: '#525252',
+        900: '#2a2a2a',
+        950: '#0f0f12',
+    },
+    orange: {
+        50: '#fff3eb',
+        100: '#fde2cf',
+        200: '#fbc6a2',
+        300: '#f8a675',
+        400: '#f6945f',
+        500: '#f58549',
+        550: '#e06a2c',
+        600: '#d4622a',
+        700: '#b85a24',
+        800: '#9c4416',
+        /** Acento do tema claro de alto contraste: ≥ 7:1 com o papel dos dois lados. */
+        850: '#8a3a10',
+        900: '#6b2e0e',
+    },
+    green: {
+        100: '#e4f1d1',
+        300: '#a6d16a',
+        500: '#7fb236',
+        /** Sucesso pleno no claro de alto contraste: ≥ 3:1 sobre o papel e ≥ 4.5:1 com texto carvão. */
+        600: '#5f8f22',
+        700: '#3d6614',
+        900: '#22390b',
+    },
+    blue: {
+        100: '#dfe5f8',
+        300: '#8da2ea',
+        400: '#6b85e0',
+        500: '#4a66d4',
+        700: '#2a4494',
+        900: '#18275a',
+    },
+    red: {
+        100: '#fde4e1',
+        300: '#f79a8f',
+        500: '#ef6a5a',
+        700: '#b42318',
+        /** Erro no claro de alto contraste: ≥ 7:1 sobre o papel e com texto claro por cima. */
+        800: '#961d13',
+        900: '#6e140d',
+    },
+    amber: {
+        100: '#faefcd',
+        300: '#efd27f',
+        500: '#e8c15a',
+        /** Atenção plena no claro de alto contraste: ≥ 3:1 sobre o papel e ≥ 4.5:1 com texto carvão. */
+        600: '#a57c10',
+        700: '#8a5a00',
+        900: '#4d3200',
+    },
+};
+/** `true` quando `name` é uma primitiva existente (`orange-500`, `carbon-0`…). */
+export function isPrimitiveName(name) {
+    const at = name.lastIndexOf('-');
+    if (at <= 0)
+        return false;
+    const family = primitives[name.slice(0, at)];
+    return family !== undefined && Object.hasOwn(family, name.slice(at + 1));
+}
+/** Valor de uma primitiva pelo nome: `primitive('green-500')` → `#7fb236`. */
+export function primitive(name) {
+    const at = name.lastIndexOf('-');
+    const family = primitives[name.slice(0, at)];
+    return family[name.slice(at + 1)];
+}
+/* ---------------------------------------------------------------------------
+ * Temas
+ * ------------------------------------------------------------------------- */
+/**
+ * Temas prontos, na ordem dos seletores. Cada um vira um bloco
+ * `[data-theme='<nome>']` em `tokens.css` e um modo no Figma.
+ */
+export const themeNames = ['dark', 'light', 'dark-hc', 'light-hc'];
+export const themeMeta = {
+    dark: { colorScheme: 'dark', highContrast: false },
+    light: { colorScheme: 'light', highContrast: false },
+    'dark-hc': { colorScheme: 'dark', highContrast: true },
+    'light-hc': { colorScheme: 'light', highContrast: true },
+};
+export const themeDefinitions = {
+    dark: {
+        bg: 'carbon-50',
+        'bg-subtle': 'carbon-100',
+        surface: 'carbon-50',
+        'surface-raised': 'carbon-150',
+        'surface-hover': 'carbon-200',
+        'surface-active': 'carbon-300',
+        'surface-inverse': 'carbon-900',
+        overlay: 'rgba(5, 5, 7, 0.72)',
+        shadow: 'rgba(0, 0, 0, 0.55)',
+        text: 'carbon-900',
+        'text-muted': 'carbon-700',
+        'text-subtle': 'carbon-600',
+        // ~3.4:1 sobre o fundo: legível para baixa visão, mas claramente inativo.
+        'text-disabled': '#6b6b74',
+        'text-inverse': 'carbon-50',
+        'text-on-accent': 'carbon-50',
+        border: 'carbon-200',
+        'border-subtle': '#1f1f26',
+        'border-strong': 'carbon-300',
+        'border-control': 'carbon-500',
+        accent: 'orange-500',
+        'accent-hover': 'orange-400',
+        'accent-active': 'orange-550',
+        'accent-subtle': 'rgba(245, 133, 73, 0.12)',
+        'accent-text': 'orange-500',
+        'accent-border': 'rgba(245, 133, 73, 0.45)',
+        neutral: 'carbon-900',
+        'neutral-hover': 'carbon-950',
+        'text-on-neutral': 'carbon-50',
+        success: 'green-500',
+        'success-subtle': 'rgba(127, 178, 54, 0.14)',
+        'success-text': 'green-300',
+        warning: 'amber-500',
+        'warning-subtle': 'rgba(232, 193, 90, 0.14)',
+        'warning-text': 'amber-300',
+        danger: 'red-500',
+        'danger-hover': 'red-300',
+        'danger-subtle': 'rgba(239, 106, 90, 0.14)',
+        'danger-text': 'red-300',
+        'text-on-danger': 'carbon-50',
+        'text-on-success': 'carbon-50',
+        'text-on-warning': 'carbon-50',
+        'text-on-info': 'paper-0',
+        info: 'blue-500',
+        'info-subtle': 'rgba(74, 102, 212, 0.16)',
+        'info-text': 'blue-300',
+        focus: 'orange-400',
+        'grid-line': 'rgba(240, 235, 219, 0.045)',
+        'code-bg': 'carbon-0',
+        'code-text': 'carbon-800',
+        selection: 'rgba(245, 133, 73, 0.32)',
+    },
+    light: {
+        bg: 'paper-50',
+        'bg-subtle': 'paper-100',
+        surface: 'paper-0',
+        'surface-raised': 'paper-0',
+        'surface-hover': 'paper-200',
+        'surface-active': 'paper-300',
+        'surface-inverse': 'paper-950',
+        overlay: 'rgba(15, 15, 18, 0.48)',
+        // Bem mais leve que no escuro: a mesma sombra virava um halo cinza pesado sobre o papel.
+        shadow: 'rgba(15, 15, 18, 0.14)',
+        text: 'paper-950',
+        'text-muted': 'paper-800',
+        'text-subtle': 'paper-700',
+        'text-disabled': 'paper-600',
+        'text-inverse': 'paper-50',
+        'text-on-accent': 'paper-950',
+        border: 'paper-400',
+        'border-subtle': 'paper-300',
+        'border-strong': 'paper-500',
+        'border-control': '#7a7468',
+        // Laranja mais fechado no tema claro: ≥ 3:1 contra o papel (WCAG 1.4.11)
+        // e ≥ 4.5:1 para o texto escuro sobre ele.
+        accent: 'orange-600',
+        'accent-hover': 'orange-550',
+        'accent-active': 'orange-700',
+        'accent-subtle': 'rgba(212, 98, 42, 0.12)',
+        'accent-text': 'orange-800',
+        'accent-border': 'rgba(184, 90, 36, 0.5)',
+        neutral: 'paper-950',
+        'neutral-hover': '#2b2b2c',
+        'text-on-neutral': 'paper-50',
+        success: 'green-500',
+        'success-subtle': 'rgba(127, 178, 54, 0.16)',
+        'success-text': 'green-700',
+        warning: 'amber-500',
+        'warning-subtle': 'rgba(232, 193, 90, 0.22)',
+        'warning-text': 'amber-700',
+        danger: 'red-700',
+        'danger-hover': '#c9301f',
+        'danger-subtle': 'rgba(180, 35, 24, 0.1)',
+        'danger-text': 'red-700',
+        'text-on-danger': '#ffffff',
+        'text-on-success': 'carbon-50',
+        'text-on-warning': 'carbon-50',
+        'text-on-info': 'paper-0',
+        info: 'blue-700',
+        'info-subtle': 'rgba(42, 68, 148, 0.1)',
+        'info-text': 'blue-700',
+        focus: 'orange-700',
+        'grid-line': 'rgba(15, 15, 18, 0.05)',
+        'code-bg': 'carbon-50',
+        'code-text': 'carbon-800',
+        selection: 'rgba(245, 133, 73, 0.28)',
+    },
+    /*
+     * Alto contraste (WCAG AAA). Mesma identidade — carvão, creme e laranja —, com:
+     * texto ≥ 7:1 sobre fundos e superfícies, bordas e foco ≥ 4.5:1, pares de acento
+     * ≥ 7:1 e textos de status ≥ 7:1. Validado em `contrast.test.ts`.
+     */
+    'dark-hc': {
+        // Fundo mais fundo que o escuro padrão; superfícies separadas por borda, não por cinza.
+        bg: 'carbon-0',
+        'bg-subtle': 'carbon-50',
+        surface: 'carbon-0',
+        'surface-raised': 'carbon-50',
+        'surface-hover': 'carbon-150',
+        'surface-active': 'carbon-200',
+        'surface-inverse': 'carbon-950',
+        overlay: 'rgba(0, 0, 0, 0.8)',
+        shadow: 'rgba(0, 0, 0, 0.7)',
+        text: 'carbon-950',
+        'text-muted': 'carbon-800',
+        'text-subtle': 'carbon-700',
+        // ≥ 4.5:1: legível, mas um degrau abaixo do texto sutil (≥ 7:1).
+        'text-disabled': '#85858e',
+        'text-inverse': 'carbon-0',
+        'text-on-accent': 'carbon-0',
+        // Todas as bordas ≥ 4.5:1 — a mais fraca já supera a border-strong do tema padrão.
+        border: 'carbon-600',
+        'border-subtle': '#85858e',
+        'border-strong': 'carbon-700',
+        'border-control': 'carbon-700',
+        accent: 'orange-500',
+        'accent-hover': 'orange-400',
+        'accent-active': 'orange-300',
+        'accent-subtle': 'rgba(245, 133, 73, 0.16)',
+        'accent-text': 'orange-400',
+        'accent-border': 'orange-500',
+        neutral: 'carbon-950',
+        'neutral-hover': 'carbon-900',
+        'text-on-neutral': 'carbon-0',
+        success: 'green-500',
+        'success-subtle': 'rgba(127, 178, 54, 0.16)',
+        'success-text': 'green-300',
+        warning: 'amber-500',
+        'warning-subtle': 'rgba(232, 193, 90, 0.16)',
+        'warning-text': 'amber-300',
+        danger: 'red-300',
+        'danger-hover': 'red-100',
+        'danger-subtle': 'rgba(239, 106, 90, 0.16)',
+        'danger-text': 'red-300',
+        'text-on-danger': 'carbon-0',
+        'text-on-success': 'carbon-0',
+        'text-on-warning': 'carbon-0',
+        'text-on-info': 'carbon-0',
+        // Azul pleno fica no 500: mais claro, o texto claro do Badge informativo cairia abaixo de 4.5:1.
+        info: 'blue-300',
+        'info-subtle': 'rgba(74, 102, 212, 0.16)',
+        'info-text': 'blue-300',
+        focus: 'orange-300',
+        'grid-line': 'rgba(250, 247, 236, 0.08)',
+        'code-bg': 'carbon-50',
+        'code-text': 'carbon-900',
+        selection: 'rgba(245, 133, 73, 0.4)',
+    },
+    'light-hc': {
+        bg: 'paper-0',
+        'bg-subtle': 'paper-50',
+        surface: 'paper-0',
+        'surface-raised': 'paper-0',
+        'surface-hover': 'paper-200',
+        'surface-active': 'paper-300',
+        'surface-inverse': 'paper-950',
+        overlay: 'rgba(15, 15, 18, 0.64)',
+        shadow: 'rgba(15, 15, 18, 0.28)',
+        text: 'paper-950',
+        'text-muted': 'paper-900',
+        'text-subtle': 'paper-800',
+        'text-disabled': 'paper-700',
+        'text-inverse': 'paper-0',
+        // O acento escurece (laranja 850) para o texto claro por cima passar de 7:1.
+        'text-on-accent': 'paper-0',
+        border: 'paper-800',
+        'border-subtle': 'paper-700',
+        'border-strong': 'paper-900',
+        'border-control': 'paper-900',
+        accent: 'orange-850',
+        'accent-hover': 'orange-900',
+        'accent-active': 'orange-900',
+        'accent-subtle': 'rgba(138, 58, 16, 0.08)',
+        'accent-text': 'orange-900',
+        'accent-border': 'orange-850',
+        neutral: 'paper-950',
+        'neutral-hover': 'paper-900',
+        'text-on-neutral': 'paper-0',
+        // Plenos de sucesso e atenção no meio-termo: ≥ 3:1 sobre o papel (ícones, bordas)
+        // sem derrubar o texto carvão do Badge abaixo de 4.5:1.
+        success: 'green-900',
+        'success-subtle': 'rgba(61, 102, 20, 0.1)',
+        'success-text': 'green-900',
+        warning: 'amber-900',
+        'warning-subtle': 'rgba(165, 124, 16, 0.14)',
+        'warning-text': 'amber-900',
+        danger: 'red-800',
+        'danger-hover': 'red-900',
+        'danger-subtle': 'rgba(150, 29, 19, 0.08)',
+        'danger-text': 'red-800',
+        'text-on-danger': 'paper-0',
+        'text-on-success': 'paper-0',
+        'text-on-warning': 'paper-0',
+        'text-on-info': 'paper-0',
+        info: 'blue-700',
+        'info-subtle': 'rgba(42, 68, 148, 0.08)',
+        'info-text': 'blue-700',
+        focus: 'orange-900',
+        'grid-line': 'rgba(15, 15, 18, 0.08)',
+        'code-bg': 'carbon-0',
+        'code-text': 'carbon-900',
+        selection: 'rgba(138, 58, 16, 0.24)',
+    },
+};
+/** Cor final de um valor de tema: primitivas viram hex; cores cruas passam direto. */
+export function resolveColor(value) {
+    return isPrimitiveName(value) ? primitive(value) : value;
+}
+function resolveTheme(definition) {
+    const entries = Object.entries(definition);
+    return Object.fromEntries(entries.map(([key, value]) => [key, resolveColor(value)]));
+}
+/** Tokens semânticos de cada tema, já resolvidos em cor (hex ou rgba). */
+export const themes = {
+    dark: resolveTheme(themeDefinitions.dark),
+    light: resolveTheme(themeDefinitions.light),
+    'dark-hc': resolveTheme(themeDefinitions['dark-hc']),
+    'light-hc': resolveTheme(themeDefinitions['light-hc']),
+};
+export const vizPalettes = {
+    dark: {
+        categorical: ['green-500', 'blue-400', 'amber-500', 'orange-600', 'red-300'],
+        other: 'carbon-500',
+        sequential: [
+            'orange-900',
+            'orange-800',
+            'orange-700',
+            'orange-600',
+            'orange-500',
+            'orange-300',
+            'orange-100',
+        ],
+        diverging: [
+            'blue-300',
+            'blue-400',
+            'blue-700',
+            'carbon-400',
+            'orange-800',
+            'orange-600',
+            'orange-300',
+        ],
+    },
+    light: {
+        categorical: ['green-700', 'blue-500', 'amber-700', 'orange-550', 'red-700'],
+        other: 'paper-600',
+        sequential: [
+            'orange-100',
+            'orange-200',
+            'orange-300',
+            'orange-500',
+            'orange-600',
+            'orange-800',
+            'orange-900',
+        ],
+        diverging: [
+            'blue-700',
+            'blue-500',
+            'blue-300',
+            'paper-400',
+            'orange-300',
+            'orange-550',
+            'orange-800',
+        ],
+    },
+    // Mesma ordem e famílias do escuro; azul e "outros" sobem um degrau para passar de 4.5:1, e a
+    // sequencial começa no 800 (o 900 sumia no fundo).
+    'dark-hc': {
+        categorical: ['green-500', 'blue-300', 'amber-500', 'orange-600', 'red-300'],
+        other: 'carbon-600',
+        sequential: [
+            'orange-800',
+            'orange-700',
+            'orange-600',
+            'orange-500',
+            'orange-400',
+            'orange-300',
+            'orange-100',
+        ],
+        diverging: [
+            'blue-300',
+            'blue-400',
+            'blue-500',
+            'carbon-400',
+            'orange-700',
+            'orange-500',
+            'orange-300',
+        ],
+    },
+    // Sobre o papel claro, 4.5:1 só sobra para tons escuros: laranja e vermelho se separam pela
+    // luminosidade (laranja 900, bem mais escuro que o vermelho 700), não só pelo matiz.
+    'light-hc': {
+        categorical: ['green-700', 'blue-500', 'amber-700', 'orange-900', 'red-700'],
+        other: 'paper-700',
+        sequential: [
+            'orange-300',
+            'orange-500',
+            'orange-550',
+            'orange-700',
+            'orange-800',
+            'orange-850',
+            'orange-900',
+        ],
+        diverging: [
+            'blue-900',
+            'blue-700',
+            'blue-500',
+            'paper-500',
+            'orange-550',
+            'orange-800',
+            'orange-900',
+        ],
+    },
+};
+/** Primitiva de cada token `viz-*` de uma paleta, na ordem de `--or-color-viz-*`. */
+export function vizDefinition(palette) {
+    const entries = [
+        ...palette.categorical.map((name, i) => [`viz-${i + 1}`, name]),
+        ['viz-other', palette.other],
+        ...palette.sequential.map((name, i) => [`viz-seq-${i + 1}`, name]),
+        ...palette.diverging.map((name, i) => [`viz-div-${i + 1}`, name]),
+    ];
+    return Object.fromEntries(entries);
+}
+function vizTokens(palette) {
+    const entries = Object.entries(vizDefinition(palette));
+    return Object.fromEntries(entries.map(([key, name]) => [key, primitive(name)]));
+}
+/**
+ * Cores de gráficos por tema: `viz-1…5` (categórica, em ordem), `viz-other`,
+ * `viz-seq-1…7` (sequencial, do menor ao maior valor) e `viz-div-1…7`
+ * (divergente, de "abaixo" a "acima", com o neutro em `viz-div-4`).
+ */
+export const vizThemes = {
+    dark: vizTokens(vizPalettes.dark),
+    light: vizTokens(vizPalettes.light),
+    'dark-hc': vizTokens(vizPalettes['dark-hc']),
+    'light-hc': vizTokens(vizPalettes['light-hc']),
+};
+export const typography = {
+    fontFamily: {
+        display: '"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif',
+        body: 'Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+        mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+    },
+    fontSize: {
+        '2xs': '0.6875rem', // 11px
+        xs: '0.75rem', // 12px
+        sm: '0.8125rem', // 13px
+        md: '0.9375rem', // 15px
+        lg: '1.0625rem', // 17px
+        xl: '1.25rem', // 20px
+        '2xl': '1.5rem', // 24px
+        '3xl': '2rem', // 32px
+        '4xl': '2.75rem', // 44px
+        '5xl': '3.75rem', // 60px
+        display: '5.375rem', // 86px
+    },
+    fontWeight: {
+        regular: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+    lineHeight: {
+        display: '1',
+        heading: '1.1',
+        tight: '1.35',
+        body: '1.55',
+        loose: '1.7',
+    },
+    letterSpacing: {
+        display: '-0.045em',
+        heading: '-0.03em',
+        body: '-0.005em',
+        meta: '0.14em',
+    },
+};
+export const space = {
+    0: '0',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    10: '2.5rem',
+    12: '3rem',
+    14: '3.5rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+};
+export const radius = {
+    none: '0',
+    sm: '2px',
+    md: '4px',
+    full: '9999px',
+};
+export const borderWidth = {
+    thin: '1px',
+    thick: '2px',
+    accent: '3px',
+};
+export const shadow = {
+    none: 'none',
+    /** Hover de cartões clicáveis (zop.dev): faixa sólida de 4px na base, na cor do texto. */
+    lift: '0 8px 0 -4px var(--or-color-text)',
+    'hover-accent': '0 8px 0 -4px var(--or-color-accent)',
+    'hover-ink': '0 4px 0 -2px var(--or-color-text)',
+    raised: '0 1px 0 0 var(--or-color-border-strong)',
+    overlay: '0 24px 64px -16px var(--or-color-shadow), 0 0 0 1px var(--or-color-border-strong)',
+};
+/**
+ * Movimento: rápido, funcional, sem bloquear. Saídas são mais curtas que
+ * entradas. Tudo é zerado em `prefers-reduced-motion: reduce`.
+ */
+export const motion = {
+    duration: {
+        /** Clique/pressionar (feedback tátil). */
+        press: '90ms',
+        instant: '80ms',
+        /** Hover, foco, cor, borda — e saídas de sobreposições. */
+        fast: '160ms',
+        /** Entradas de sobreposições, indicadores deslizando. */
+        medium: '250ms',
+        /** Expandir/recolher, painéis, drawers. */
+        slow: '400ms',
+        /** Revelação no scroll. */
+        reveal: '600ms',
+        slower: '640ms',
+        /** Ciclos decorativos (pulso de status). */
+        loop: '2400ms',
+    },
+    easing: {
+        /** Padrão de entradas e hovers: desacelera no fim. */
+        out: 'cubic-bezier(0.22, 1, 0.36, 1)',
+        /** Movimentos de ida e volta, saídas e o cabeçalho que se esconde. */
+        'in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
+        /** Indicadores (abas, segmentos, polegar do switch). */
+        spring: 'cubic-bezier(0.2, 0.9, 0.3, 1.05)',
+        snap: 'cubic-bezier(0.19, 1, 0.22, 1)',
+        /** Pequeno "pop" com overshoot (check, ponto do radio, badges). */
+        bounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    },
+    distance: {
+        /** Popovers, menus, tooltips. */
+        sm: '4px',
+        /** Diálogos, toasts, entrada de página. */
+        md: '8px',
+        /** Revelação no scroll. */
+        lg: '24px',
+        /** Elevação de cartões no hover. */
+        lift: '-4px',
+    },
+    /** Atraso entre itens de uma revelação escalonada. */
+    stagger: '80ms',
+};
+export const zIndex = {
+    base: '0',
+    raised: '10',
+    sticky: '100',
+    header: '200',
+    dropdown: '1000',
+    overlay: '1100',
+    modal: '1200',
+    popover: '1300',
+    toast: '1400',
+    tooltip: '1500',
+};
+export const breakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1440px',
+};
+export const layout = {
+    'max-width': '1200px',
+    gutter: '2rem',
+    'header-height': '4rem',
+    'sidebar-width': '17.5rem',
+};
+/** Tamanhos de controles interativos (altura). Todos ≥ 24px (WCAG 2.5.8). */
+export const controlSize = {
+    sm: '2rem', // 32px
+    md: '2.5rem', // 40px
+    lg: '3rem', // 48px
+};
+export const tokens = {
+    primitives,
+    themes,
+    viz: vizThemes,
+    typography,
+    space,
+    radius,
+    borderWidth,
+    shadow,
+    motion,
+    zIndex,
+    breakpoints,
+    layout,
+    controlSize,
+};
+/** Converte um caminho de token no nome da CSS custom property. */
+export function cssVar(name) {
+    return `var(--or-${name})`;
+}
+export default tokens;

package/dist/tokens/$metadata.json

@@ -0,0 +1,9 @@
+{
+  "tokenSetOrder": [
+    "primitivas",
+    "tema/dark",
+    "tema/light",
+    "tema/dark-hc",
+    "tema/light-hc"
+  ]
+}