@orangesys/tokens 0.0.0-stage → 0.5.0

package/dist/index.d.ts

@@ -0,0 +1,600 @@
+/**
+ * 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 declare const primitives: {
+    readonly carbon: {
+        readonly 0: "#0a0a0d";
+        readonly 50: "#0f0f12";
+        readonly 100: "#16161a";
+        readonly 150: "#1c1c21";
+        readonly 200: "#2a2a30";
+        readonly 300: "#3a3a42";
+        readonly 400: "#55555e";
+        readonly 500: "#75757f";
+        readonly 600: "#9c9588";
+        readonly 700: "#b8b0a0";
+        readonly 800: "#d4cdb5";
+        readonly 900: "#f0ebdb";
+        readonly 950: "#faf7ec";
+    };
+    readonly paper: {
+        readonly 0: "#fffdf6";
+        readonly 50: "#faf7ec";
+        readonly 100: "#f0ebdb";
+        readonly 200: "#ece7d7";
+        readonly 300: "#e2ddcd";
+        readonly 400: "#d9d3bf";
+        readonly 500: "#c9c4b5";
+        readonly 600: "#8a8478";
+        readonly 700: "#666057";
+        readonly 800: "#525252";
+        readonly 900: "#2a2a2a";
+        readonly 950: "#0f0f12";
+    };
+    readonly orange: {
+        readonly 50: "#fff3eb";
+        readonly 100: "#fde2cf";
+        readonly 200: "#fbc6a2";
+        readonly 300: "#f8a675";
+        readonly 400: "#f6945f";
+        readonly 500: "#f58549";
+        readonly 550: "#e06a2c";
+        readonly 600: "#d4622a";
+        readonly 700: "#b85a24";
+        readonly 800: "#9c4416";
+        /** Acento do tema claro de alto contraste: ≥ 7:1 com o papel dos dois lados. */
+        readonly 850: "#8a3a10";
+        readonly 900: "#6b2e0e";
+    };
+    readonly green: {
+        readonly 100: "#e4f1d1";
+        readonly 300: "#a6d16a";
+        readonly 500: "#7fb236";
+        /** Sucesso pleno no claro de alto contraste: ≥ 3:1 sobre o papel e ≥ 4.5:1 com texto carvão. */
+        readonly 600: "#5f8f22";
+        readonly 700: "#3d6614";
+        readonly 900: "#22390b";
+    };
+    readonly blue: {
+        readonly 100: "#dfe5f8";
+        readonly 300: "#8da2ea";
+        readonly 400: "#6b85e0";
+        readonly 500: "#4a66d4";
+        readonly 700: "#2a4494";
+        readonly 900: "#18275a";
+    };
+    readonly red: {
+        readonly 100: "#fde4e1";
+        readonly 300: "#f79a8f";
+        readonly 500: "#ef6a5a";
+        readonly 700: "#b42318";
+        /** Erro no claro de alto contraste: ≥ 7:1 sobre o papel e com texto claro por cima. */
+        readonly 800: "#961d13";
+        readonly 900: "#6e140d";
+    };
+    readonly amber: {
+        readonly 100: "#faefcd";
+        readonly 300: "#efd27f";
+        readonly 500: "#e8c15a";
+        /** Atenção plena no claro de alto contraste: ≥ 3:1 sobre o papel e ≥ 4.5:1 com texto carvão. */
+        readonly 600: "#a57c10";
+        readonly 700: "#8a5a00";
+        readonly 900: "#4d3200";
+    };
+};
+type Primitives = typeof primitives;
+/** Nome de uma primitiva no formato `família-passo` (ex.: `green-500`), como em `--or-palette-*`. */
+export type PrimitiveName = {
+    [F in keyof Primitives]: `${F}-${Extract<keyof Primitives[F], string | number>}`;
+}[keyof Primitives];
+/** `true` quando `name` é uma primitiva existente (`orange-500`, `carbon-0`…). */
+export declare function isPrimitiveName(name: string): name is PrimitiveName;
+/** Valor de uma primitiva pelo nome: `primitive('green-500')` → `#7fb236`. */
+export declare function primitive(name: PrimitiveName): string;
+/**
+ * Temas prontos, na ordem dos seletores. Cada um vira um bloco
+ * `[data-theme='<nome>']` em `tokens.css` e um modo no Figma.
+ */
+export declare const themeNames: readonly ["dark", "light", "dark-hc", "light-hc"];
+export type ThemeName = (typeof themeNames)[number];
+/** Esquema de cor de um tema (`color-scheme` de controles nativos e barras de rolagem). */
+export type ColorScheme = 'dark' | 'light';
+export interface ThemeMeta {
+    colorScheme: ColorScheme;
+    /**
+     * Tema de alto contraste (WCAG AAA): texto ≥ 7:1, bordas e foco ≥ 4.5:1.
+     * Em modo automático, `prefers-contrast: more` troca o tema padrão por ele.
+     */
+    highContrast: boolean;
+}
+export declare const themeMeta: Record<ThemeName, ThemeMeta>;
+/** Tokens semânticos de cor. As chaves viram `--or-color-<chave>`. */
+export interface ColorTokens {
+    bg: string;
+    'bg-subtle': string;
+    surface: string;
+    'surface-raised': string;
+    'surface-hover': string;
+    'surface-active': string;
+    'surface-inverse': string;
+    overlay: string;
+    /** Sombra difusa das sobreposições (modais, menus, toasts). */
+    shadow: string;
+    text: string;
+    'text-muted': string;
+    'text-subtle': string;
+    'text-disabled': string;
+    'text-inverse': string;
+    'text-on-accent': string;
+    border: string;
+    'border-subtle': string;
+    'border-strong': string;
+    'border-control': string;
+    accent: string;
+    'accent-hover': string;
+    'accent-active': string;
+    'accent-subtle': string;
+    'accent-text': string;
+    'accent-border': string;
+    neutral: string;
+    'neutral-hover': string;
+    'text-on-neutral': string;
+    success: string;
+    'success-subtle': string;
+    'success-text': string;
+    warning: string;
+    'warning-subtle': string;
+    'warning-text': string;
+    danger: string;
+    'danger-hover': string;
+    'danger-subtle': string;
+    'danger-text': string;
+    'text-on-danger': string;
+    /** Texto sobre os preenchimentos de status (Badge). */
+    'text-on-success': string;
+    'text-on-warning': string;
+    'text-on-info': string;
+    info: string;
+    'info-subtle': string;
+    'info-text': string;
+    focus: string;
+    'grid-line': string;
+    'code-bg': string;
+    'code-text': string;
+    selection: string;
+}
+/**
+ * Valor de um token semântico na definição de um tema: o nome de uma primitiva
+ * (vira alias no DTCG e no Figma) ou uma cor crua quando nenhuma primitiva serve
+ * (transparências e alguns ajustes finos).
+ */
+export type ColorValue = PrimitiveName | `#${string}` | `rgba(${string})`;
+export type ThemeDefinition = {
+    [K in keyof ColorTokens]: ColorValue;
+};
+export declare const themeDefinitions: Record<ThemeName, ThemeDefinition>;
+/** Cor final de um valor de tema: primitivas viram hex; cores cruas passam direto. */
+export declare function resolveColor(value: ColorValue): string;
+/** Tokens semânticos de cada tema, já resolvidos em cor (hex ou rgba). */
+export declare const themes: Record<ThemeName, ColorTokens>;
+type Seven<T> = readonly [T, T, T, T, T, T, T];
+export interface VizPalette {
+    /**
+     * Cinco matizes para identificar séries, em ordem fixa: verde, âmbar e vermelho ficam quase
+     * iguais com protanopia/deuteranopia, então nunca são vizinhos. ≥ 3:1 contra o fundo
+     * (≥ 4.5:1 nos temas de alto contraste).
+     */
+    categorical: readonly [PrimitiveName, PrimitiveName, PrimitiveName, PrimitiveName, PrimitiveName];
+    /** Neutro para "Outros" (e para o resto quando uma marca está em destaque com o acento). */
+    other: PrimitiveName;
+    /** Quantidade: um só matiz (laranja), do valor baixo ao alto — o alto é o que mais se destaca do fundo. */
+    sequential: Seven<PrimitiveName>;
+    /** Dois lados de uma referência: azul abaixo, neutro no meio, laranja acima. */
+    diverging: Seven<PrimitiveName>;
+}
+export declare const vizPalettes: Record<ThemeName, VizPalette>;
+type VizStep = 1 | 2 | 3 | 4 | 5 | 6 | 7;
+/** Tokens semânticos de visualização de dados. As chaves viram `--or-color-<chave>`. */
+export type VizColorTokens = Record<`viz-${1 | 2 | 3 | 4 | 5}` | 'viz-other' | `viz-seq-${VizStep}` | `viz-div-${VizStep}`, string>;
+/** Primitiva de cada token `viz-*` de uma paleta, na ordem de `--or-color-viz-*`. */
+export declare function vizDefinition(palette: VizPalette): Record<keyof VizColorTokens, PrimitiveName>;
+/**
+ * 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 declare const vizThemes: Record<ThemeName, VizColorTokens>;
+export declare const typography: {
+    readonly fontFamily: {
+        readonly display: "\"Space Grotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif";
+        readonly body: "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
+        readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+    };
+    readonly fontSize: {
+        readonly '2xs': "0.6875rem";
+        readonly xs: "0.75rem";
+        readonly sm: "0.8125rem";
+        readonly md: "0.9375rem";
+        readonly lg: "1.0625rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "2rem";
+        readonly '4xl': "2.75rem";
+        readonly '5xl': "3.75rem";
+        readonly display: "5.375rem";
+    };
+    readonly fontWeight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeight: {
+        readonly display: "1";
+        readonly heading: "1.1";
+        readonly tight: "1.35";
+        readonly body: "1.55";
+        readonly loose: "1.7";
+    };
+    readonly letterSpacing: {
+        readonly display: "-0.045em";
+        readonly heading: "-0.03em";
+        readonly body: "-0.005em";
+        readonly meta: "0.14em";
+    };
+};
+export declare const space: {
+    readonly 0: "0";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+};
+export declare const radius: {
+    readonly none: "0";
+    readonly sm: "2px";
+    readonly md: "4px";
+    readonly full: "9999px";
+};
+export declare const borderWidth: {
+    readonly thin: "1px";
+    readonly thick: "2px";
+    readonly accent: "3px";
+};
+export declare const shadow: {
+    readonly none: "none";
+    /** Hover de cartões clicáveis (zop.dev): faixa sólida de 4px na base, na cor do texto. */
+    readonly lift: "0 8px 0 -4px var(--or-color-text)";
+    readonly 'hover-accent': "0 8px 0 -4px var(--or-color-accent)";
+    readonly 'hover-ink': "0 4px 0 -2px var(--or-color-text)";
+    readonly raised: "0 1px 0 0 var(--or-color-border-strong)";
+    readonly 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 declare const motion: {
+    readonly duration: {
+        /** Clique/pressionar (feedback tátil). */
+        readonly press: "90ms";
+        readonly instant: "80ms";
+        /** Hover, foco, cor, borda — e saídas de sobreposições. */
+        readonly fast: "160ms";
+        /** Entradas de sobreposições, indicadores deslizando. */
+        readonly medium: "250ms";
+        /** Expandir/recolher, painéis, drawers. */
+        readonly slow: "400ms";
+        /** Revelação no scroll. */
+        readonly reveal: "600ms";
+        readonly slower: "640ms";
+        /** Ciclos decorativos (pulso de status). */
+        readonly loop: "2400ms";
+    };
+    readonly easing: {
+        /** Padrão de entradas e hovers: desacelera no fim. */
+        readonly out: "cubic-bezier(0.22, 1, 0.36, 1)";
+        /** Movimentos de ida e volta, saídas e o cabeçalho que se esconde. */
+        readonly 'in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+        /** Indicadores (abas, segmentos, polegar do switch). */
+        readonly spring: "cubic-bezier(0.2, 0.9, 0.3, 1.05)";
+        readonly snap: "cubic-bezier(0.19, 1, 0.22, 1)";
+        /** Pequeno "pop" com overshoot (check, ponto do radio, badges). */
+        readonly bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+    readonly distance: {
+        /** Popovers, menus, tooltips. */
+        readonly sm: "4px";
+        /** Diálogos, toasts, entrada de página. */
+        readonly md: "8px";
+        /** Revelação no scroll. */
+        readonly lg: "24px";
+        /** Elevação de cartões no hover. */
+        readonly lift: "-4px";
+    };
+    /** Atraso entre itens de uma revelação escalonada. */
+    readonly stagger: "80ms";
+};
+export declare const zIndex: {
+    readonly base: "0";
+    readonly raised: "10";
+    readonly sticky: "100";
+    readonly header: "200";
+    readonly dropdown: "1000";
+    readonly overlay: "1100";
+    readonly modal: "1200";
+    readonly popover: "1300";
+    readonly toast: "1400";
+    readonly tooltip: "1500";
+};
+export declare const breakpoints: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1440px";
+};
+export declare const layout: {
+    readonly 'max-width': "1200px";
+    readonly gutter: "2rem";
+    readonly 'header-height': "4rem";
+    readonly 'sidebar-width': "17.5rem";
+};
+/** Tamanhos de controles interativos (altura). Todos ≥ 24px (WCAG 2.5.8). */
+export declare const controlSize: {
+    readonly sm: "2rem";
+    readonly md: "2.5rem";
+    readonly lg: "3rem";
+};
+export declare const tokens: {
+    readonly primitives: {
+        readonly carbon: {
+            readonly 0: "#0a0a0d";
+            readonly 50: "#0f0f12";
+            readonly 100: "#16161a";
+            readonly 150: "#1c1c21";
+            readonly 200: "#2a2a30";
+            readonly 300: "#3a3a42";
+            readonly 400: "#55555e";
+            readonly 500: "#75757f";
+            readonly 600: "#9c9588";
+            readonly 700: "#b8b0a0";
+            readonly 800: "#d4cdb5";
+            readonly 900: "#f0ebdb";
+            readonly 950: "#faf7ec";
+        };
+        readonly paper: {
+            readonly 0: "#fffdf6";
+            readonly 50: "#faf7ec";
+            readonly 100: "#f0ebdb";
+            readonly 200: "#ece7d7";
+            readonly 300: "#e2ddcd";
+            readonly 400: "#d9d3bf";
+            readonly 500: "#c9c4b5";
+            readonly 600: "#8a8478";
+            readonly 700: "#666057";
+            readonly 800: "#525252";
+            readonly 900: "#2a2a2a";
+            readonly 950: "#0f0f12";
+        };
+        readonly orange: {
+            readonly 50: "#fff3eb";
+            readonly 100: "#fde2cf";
+            readonly 200: "#fbc6a2";
+            readonly 300: "#f8a675";
+            readonly 400: "#f6945f";
+            readonly 500: "#f58549";
+            readonly 550: "#e06a2c";
+            readonly 600: "#d4622a";
+            readonly 700: "#b85a24";
+            readonly 800: "#9c4416";
+            /** Acento do tema claro de alto contraste: ≥ 7:1 com o papel dos dois lados. */
+            readonly 850: "#8a3a10";
+            readonly 900: "#6b2e0e";
+        };
+        readonly green: {
+            readonly 100: "#e4f1d1";
+            readonly 300: "#a6d16a";
+            readonly 500: "#7fb236";
+            /** Sucesso pleno no claro de alto contraste: ≥ 3:1 sobre o papel e ≥ 4.5:1 com texto carvão. */
+            readonly 600: "#5f8f22";
+            readonly 700: "#3d6614";
+            readonly 900: "#22390b";
+        };
+        readonly blue: {
+            readonly 100: "#dfe5f8";
+            readonly 300: "#8da2ea";
+            readonly 400: "#6b85e0";
+            readonly 500: "#4a66d4";
+            readonly 700: "#2a4494";
+            readonly 900: "#18275a";
+        };
+        readonly red: {
+            readonly 100: "#fde4e1";
+            readonly 300: "#f79a8f";
+            readonly 500: "#ef6a5a";
+            readonly 700: "#b42318";
+            /** Erro no claro de alto contraste: ≥ 7:1 sobre o papel e com texto claro por cima. */
+            readonly 800: "#961d13";
+            readonly 900: "#6e140d";
+        };
+        readonly amber: {
+            readonly 100: "#faefcd";
+            readonly 300: "#efd27f";
+            readonly 500: "#e8c15a";
+            /** Atenção plena no claro de alto contraste: ≥ 3:1 sobre o papel e ≥ 4.5:1 com texto carvão. */
+            readonly 600: "#a57c10";
+            readonly 700: "#8a5a00";
+            readonly 900: "#4d3200";
+        };
+    };
+    readonly themes: Record<"dark" | "light" | "dark-hc" | "light-hc", ColorTokens>;
+    readonly viz: Record<"dark" | "light" | "dark-hc" | "light-hc", VizColorTokens>;
+    readonly typography: {
+        readonly fontFamily: {
+            readonly display: "\"Space Grotesk\", system-ui, -apple-system, \"Segoe UI\", sans-serif";
+            readonly body: "Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif";
+            readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+        };
+        readonly fontSize: {
+            readonly '2xs': "0.6875rem";
+            readonly xs: "0.75rem";
+            readonly sm: "0.8125rem";
+            readonly md: "0.9375rem";
+            readonly lg: "1.0625rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "2rem";
+            readonly '4xl': "2.75rem";
+            readonly '5xl': "3.75rem";
+            readonly display: "5.375rem";
+        };
+        readonly fontWeight: {
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly lineHeight: {
+            readonly display: "1";
+            readonly heading: "1.1";
+            readonly tight: "1.35";
+            readonly body: "1.55";
+            readonly loose: "1.7";
+        };
+        readonly letterSpacing: {
+            readonly display: "-0.045em";
+            readonly heading: "-0.03em";
+            readonly body: "-0.005em";
+            readonly meta: "0.14em";
+        };
+    };
+    readonly space: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.25rem";
+        readonly 6: "1.5rem";
+        readonly 7: "1.75rem";
+        readonly 8: "2rem";
+        readonly 10: "2.5rem";
+        readonly 12: "3rem";
+        readonly 14: "3.5rem";
+        readonly 16: "4rem";
+        readonly 20: "5rem";
+        readonly 24: "6rem";
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly sm: "2px";
+        readonly md: "4px";
+        readonly full: "9999px";
+    };
+    readonly borderWidth: {
+        readonly thin: "1px";
+        readonly thick: "2px";
+        readonly accent: "3px";
+    };
+    readonly shadow: {
+        readonly none: "none";
+        /** Hover de cartões clicáveis (zop.dev): faixa sólida de 4px na base, na cor do texto. */
+        readonly lift: "0 8px 0 -4px var(--or-color-text)";
+        readonly 'hover-accent': "0 8px 0 -4px var(--or-color-accent)";
+        readonly 'hover-ink': "0 4px 0 -2px var(--or-color-text)";
+        readonly raised: "0 1px 0 0 var(--or-color-border-strong)";
+        readonly overlay: "0 24px 64px -16px var(--or-color-shadow), 0 0 0 1px var(--or-color-border-strong)";
+    };
+    readonly motion: {
+        readonly duration: {
+            /** Clique/pressionar (feedback tátil). */
+            readonly press: "90ms";
+            readonly instant: "80ms";
+            /** Hover, foco, cor, borda — e saídas de sobreposições. */
+            readonly fast: "160ms";
+            /** Entradas de sobreposições, indicadores deslizando. */
+            readonly medium: "250ms";
+            /** Expandir/recolher, painéis, drawers. */
+            readonly slow: "400ms";
+            /** Revelação no scroll. */
+            readonly reveal: "600ms";
+            readonly slower: "640ms";
+            /** Ciclos decorativos (pulso de status). */
+            readonly loop: "2400ms";
+        };
+        readonly easing: {
+            /** Padrão de entradas e hovers: desacelera no fim. */
+            readonly out: "cubic-bezier(0.22, 1, 0.36, 1)";
+            /** Movimentos de ida e volta, saídas e o cabeçalho que se esconde. */
+            readonly 'in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+            /** Indicadores (abas, segmentos, polegar do switch). */
+            readonly spring: "cubic-bezier(0.2, 0.9, 0.3, 1.05)";
+            readonly snap: "cubic-bezier(0.19, 1, 0.22, 1)";
+            /** Pequeno "pop" com overshoot (check, ponto do radio, badges). */
+            readonly bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+        };
+        readonly distance: {
+            /** Popovers, menus, tooltips. */
+            readonly sm: "4px";
+            /** Diálogos, toasts, entrada de página. */
+            readonly md: "8px";
+            /** Revelação no scroll. */
+            readonly lg: "24px";
+            /** Elevação de cartões no hover. */
+            readonly lift: "-4px";
+        };
+        /** Atraso entre itens de uma revelação escalonada. */
+        readonly stagger: "80ms";
+    };
+    readonly zIndex: {
+        readonly base: "0";
+        readonly raised: "10";
+        readonly sticky: "100";
+        readonly header: "200";
+        readonly dropdown: "1000";
+        readonly overlay: "1100";
+        readonly modal: "1200";
+        readonly popover: "1300";
+        readonly toast: "1400";
+        readonly tooltip: "1500";
+    };
+    readonly breakpoints: {
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly '2xl': "1440px";
+    };
+    readonly layout: {
+        readonly 'max-width': "1200px";
+        readonly gutter: "2rem";
+        readonly 'header-height': "4rem";
+        readonly 'sidebar-width': "17.5rem";
+    };
+    readonly controlSize: {
+        readonly sm: "2rem";
+        readonly md: "2.5rem";
+        readonly lg: "3rem";
+    };
+};
+export type Tokens = typeof tokens;
+/** Converte um caminho de token no nome da CSS custom property. */
+export declare function cssVar(name: string): string;
+export default tokens;