@fracui/styleguide 0.0.0-stage → 0.1.0

package/dist/tokens/colors.d.ts

@@ -0,0 +1,347 @@
+/**
+ * Paleta primitiva de cores da FracUI.
+ *
+ * Extraída do Figma "Design System - 2026"
+ * (file key `J15QTL7SaxlobMRnPtOimR`, página "↳ Cores").
+ *
+ * Estas são as cores "cruas" (hex) que alimentam os tokens semânticos em
+ * `theme.ts`. Use estas escalas diretamente apenas quando não houver um
+ * token semântico equivalente (ex: gráficos, ilustrações, e-mails).
+ *
+ * Para UI de produto, prefira sempre os tokens semânticos
+ * (`primary`, `background`, `destructive`, etc.) expostos via classes do
+ * Tailwind (`bg-primary`, `text-muted-foreground`...).
+ */
+/** Escala de 5 tons claros (`Shades/` no Figma), do mais claro ao mais escuro. */
+export type ShadeScale = {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+};
+/** Trio de cores de um estado de feedback, conforme modelado no Figma. */
+export type FeedbackTone = {
+    /** Cor do texto sobre o fundo `bg`. */
+    text: string;
+    /** Cor de ícones e bordas de destaque. */
+    icon: string;
+    /** Cor de fundo da superfície do alerta. */
+    bg: string;
+};
+/**
+ * Azul institucional — `Primary/` + `Shades/Blue` no Figma.
+ *
+ * `dark` é a cor de marca principal (usada em `--primary` no tema claro);
+ * `light` é a variação usada sobre fundos escuros.
+ */
+export declare const blue: {
+    readonly 1: "#E5F0FF";
+    readonly 2: "#CBE0FE";
+    readonly 3: "#A5C8FE";
+    readonly 4: "#7FB2FE";
+    readonly 5: "#5C93E5";
+    readonly light: "#3D76CC";
+    readonly medium: "#255091";
+    readonly dark: "#142C50";
+};
+/**
+ * Verde institucional — `Secondary/` + `Shades/Green` no Figma.
+ *
+ * É a cor de apoio da marca, NÃO o estado de sucesso: para "deu certo",
+ * use `feedback.success`.
+ */
+export declare const green: {
+    readonly 1: "#F4F9ED";
+    readonly 2: "#E2F0D1";
+    readonly 3: "#D1E7B7";
+    readonly 4: "#B9DB92";
+    readonly 5: "#A2CF6E";
+    readonly light: "#84C03F";
+    readonly medium: "#6AA329";
+    readonly dark: "#508217";
+};
+/**
+ * Escala vermelha de intensidade — conjunto `Tags` no Figma.
+ *
+ * Usada apenas para graduar a força do El Niño, do mais fraco ao mais
+ * forte. Não está na página de cores do arquivo: existe só dentro do
+ * conjunto `Tags`, e por isso não tem os cinco passos das outras escalas.
+ *
+ * A contraparte da La Niña são os quatro primeiros passos de `blue`, que
+ * já existiam na paleta — só o lado vermelho precisava ser nomeado.
+ */
+export declare const red: {
+    readonly 1: "#F9EAEA";
+    readonly 2: "#F8CECE";
+    readonly 3: "#EAA4A4";
+    readonly 4: "#E18282";
+};
+/**
+ * Neutros — `Basics/` no Figma.
+ *
+ * Rampa contínua do branco puro ao quase-preto. `white`/`ice`/`iceMedium`
+ * são superfícies; `light`/`lightMedium` são bordas e divisores;
+ * `DEFAULT`/`medium`/`mediumDark`/`dark` são níveis de texto.
+ */
+export declare const gray: {
+    readonly white: "#FFFFFF";
+    readonly ice: "#FAFAFA";
+    readonly iceMedium: "#F5F5F5";
+    readonly light: "#E5E5E5";
+    readonly lightMedium: "#BFBFBF";
+    readonly DEFAULT: "#999999";
+    readonly medium: "#737373";
+    readonly mediumDark: "#333333";
+    readonly dark: "#202020";
+};
+/**
+ * Estados de feedback — `Feedback/` no Figma.
+ *
+ * Cada família é um matiz em três passos fixos de saturação/luminosidade:
+ *
+ * | slot   | S      | L      |
+ * | ------ | ------ | ------ |
+ * | `text` | 82.3%  | 22.2%  |
+ * | `icon` | 58.4%  | 52.0%  |
+ * | `bg`   | 100%   | 92.5%  |
+ *
+ * `success` é a exceção deliberada: seus tons foram dessaturados à mão no
+ * Figma (S≈48%) para não brigar com o verde de marca. Mantido como está.
+ *
+ * Ver `FIGMA_OVERRIDES` para as divergências resolvidas na extração.
+ */
+export declare const feedback: {
+    readonly error: {
+        readonly text: "#670A1A";
+        readonly icon: "#CC3D55";
+        readonly bg: "#FFD9DF";
+    };
+    readonly alert: {
+        readonly text: "#672A0A";
+        readonly icon: "#CC6D3D";
+        readonly bg: "#FFE6D9";
+    };
+    readonly warning: {
+        readonly text: "#67480A";
+        readonly icon: "#CC9C3D";
+        readonly bg: "#FFF2D9";
+    };
+    readonly success: {
+        readonly text: "#246724";
+        readonly icon: "#70CC70";
+        readonly bg: "#D9FFD9";
+    };
+    readonly info: {
+        readonly text: "#0A2967";
+        readonly icon: "#3D6DCC";
+        readonly bg: "#D9E6FF";
+    };
+};
+/**
+ * Superfícies do tema escuro — página "↳ Light e Dark Mode" no Figma.
+ *
+ * Não são neutros cinzas: são azuis muito escuros, para casar com o azul
+ * de marca. `outline` é a cor de borda/foco sobre esses fundos.
+ */
+export declare const dark: {
+    readonly bg: "#040814";
+    readonly surface: "#090D1B";
+    readonly elevated: "#0B1325";
+    readonly outline: "#0E3571";
+};
+/**
+ * Cores de legenda de mapa — `Subtitle/` no Figma.
+ *
+ * Paleta categórica para séries e marcadores geoespaciais. Cada cor tem
+ * uma variação `light` para estados desabilitados/hover.
+ */
+export declare const subtitle: {
+    readonly red: "#DA3C36";
+    readonly orange: "#D9822B";
+    readonly yellow: "#F2F218";
+    readonly green: "#4D9966";
+    readonly blueLight: "#51CFE3";
+    readonly blueMedium: "#2554B2";
+    readonly purple: "#634CD9";
+};
+/** Variações claras das cores de legenda — `Subtitle/Light/` no Figma. */
+export declare const subtitleLight: {
+    readonly red: "#F27F7A";
+    readonly orange: "#FFBF7F";
+    readonly yellow: "#FEFF80";
+    readonly green: "#98D9AD";
+    readonly blueLight: "#99CCFF";
+    readonly blueMedium: "#8CB2FF";
+    readonly purple: "#9985FF";
+};
+/**
+ * Preto com transparência — `Transparency black/` no Figma.
+ *
+ * Usado em overlays de modal, headers com blur e estados de pressão.
+ */
+export declare const alpha: {
+    readonly 4: "rgba(0, 0, 0, 0.04)";
+    readonly 8: "rgba(0, 0, 0, 0.08)";
+    readonly 16: "rgba(0, 0, 0, 0.16)";
+    readonly 25: "rgba(0, 0, 0, 0.25)";
+    readonly 40: "rgba(0, 0, 0, 0.4)";
+    readonly 60: "rgba(0, 0, 0, 0.6)";
+    readonly 80: "rgba(0, 0, 0, 0.8)";
+};
+/**
+ * Divergências entre o rótulo e o preenchimento real de swatches no Figma,
+ * e qual valor esta biblioteca adotou.
+ *
+ * Documentado aqui para que a próxima extração não "corrija" de volta para
+ * o valor errado. Enquanto o Figma não for arrumado, ele e este arquivo
+ * discordam nestes pontos — de propósito.
+ */
+export declare const FIGMA_OVERRIDES: readonly [{
+    readonly swatch: "Basics/Ice";
+    readonly figmaFill: "#E5E5E5";
+    readonly figmaLabel: "#FAFAFA";
+    readonly adopted: "#FAFAFA";
+    readonly reason: "o fill duplica Gray Light; o rótulo completa a rampa de neutros";
+}, {
+    readonly swatch: "Feedback/Text Alert Orange";
+    readonly figmaFill: "#693014";
+    readonly figmaLabel: "#0A2967";
+    readonly adopted: "#672A0A";
+    readonly reason: "rótulo é cópia do Text Info Blue; fill está fora dos passos S/L da família. Derivado do matiz 20.3° nos passos canônicos";
+}, {
+    readonly swatch: "Feedback/Icon Alert Orange";
+    readonly figmaFill: "#DD662B";
+    readonly figmaLabel: "#CC6D3D";
+    readonly adopted: "#CC6D3D";
+    readonly reason: "o rótulo bate exatamente com os passos S/L da família; o fill não";
+}, {
+    readonly swatch: "Feedback/BG Alert Orange";
+    readonly figmaFill: "#FFD6C1";
+    readonly figmaLabel: "#D9E6FF";
+    readonly adopted: "#FFE6D9";
+    readonly reason: "rótulo é cópia do BG Info Blue; fill está em L87.8% em vez de L92.5%";
+}, {
+    readonly swatch: "Subtitle/Blue Medium";
+    readonly figmaFill: "#E336B4";
+    readonly figmaLabel: "#2554B2";
+    readonly adopted: "#2554B2";
+    readonly reason: "o fill é magenta, incompatível com o nome da cor";
+}, {
+    readonly swatch: "Subtitle/Blue Light";
+    readonly figmaFill: "#51CFE3";
+    readonly figmaLabel: "#5798D9";
+    readonly adopted: "#51CFE3";
+    readonly reason: "o fill é ciano e o rótulo é azul. Adotado o fill, que é o que renderiza hoje nas legendas de mapa e o que dá matiz distinto do Blue Medium — mas a divergência é grande o bastante para valer confirmação com o design";
+}, {
+    readonly swatch: "Subtitle/Light/Blue Medium";
+    readonly figmaFill: "#8CB2FF";
+    readonly figmaLabel: "#8CA9FF";
+    readonly adopted: "#8CB2FF";
+    readonly reason: "diferença de um passo de matiz; adotado o fill, que é o que renderiza";
+}, {
+    readonly swatch: "Subtitle/Light/Yellow";
+    readonly figmaFill: "#FEFF80";
+    readonly figmaLabel: "#E9E98E";
+    readonly adopted: "#FEFF80";
+    readonly reason: "adotado o fill; o rótulo é mais dessaturado e não acompanha o resto da família Light";
+}];
+export declare const colors: {
+    readonly blue: {
+        readonly 1: "#E5F0FF";
+        readonly 2: "#CBE0FE";
+        readonly 3: "#A5C8FE";
+        readonly 4: "#7FB2FE";
+        readonly 5: "#5C93E5";
+        readonly light: "#3D76CC";
+        readonly medium: "#255091";
+        readonly dark: "#142C50";
+    };
+    readonly green: {
+        readonly 1: "#F4F9ED";
+        readonly 2: "#E2F0D1";
+        readonly 3: "#D1E7B7";
+        readonly 4: "#B9DB92";
+        readonly 5: "#A2CF6E";
+        readonly light: "#84C03F";
+        readonly medium: "#6AA329";
+        readonly dark: "#508217";
+    };
+    readonly red: {
+        readonly 1: "#F9EAEA";
+        readonly 2: "#F8CECE";
+        readonly 3: "#EAA4A4";
+        readonly 4: "#E18282";
+    };
+    readonly gray: {
+        readonly white: "#FFFFFF";
+        readonly ice: "#FAFAFA";
+        readonly iceMedium: "#F5F5F5";
+        readonly light: "#E5E5E5";
+        readonly lightMedium: "#BFBFBF";
+        readonly DEFAULT: "#999999";
+        readonly medium: "#737373";
+        readonly mediumDark: "#333333";
+        readonly dark: "#202020";
+    };
+    readonly feedback: {
+        readonly error: {
+            readonly text: "#670A1A";
+            readonly icon: "#CC3D55";
+            readonly bg: "#FFD9DF";
+        };
+        readonly alert: {
+            readonly text: "#672A0A";
+            readonly icon: "#CC6D3D";
+            readonly bg: "#FFE6D9";
+        };
+        readonly warning: {
+            readonly text: "#67480A";
+            readonly icon: "#CC9C3D";
+            readonly bg: "#FFF2D9";
+        };
+        readonly success: {
+            readonly text: "#246724";
+            readonly icon: "#70CC70";
+            readonly bg: "#D9FFD9";
+        };
+        readonly info: {
+            readonly text: "#0A2967";
+            readonly icon: "#3D6DCC";
+            readonly bg: "#D9E6FF";
+        };
+    };
+    readonly dark: {
+        readonly bg: "#040814";
+        readonly surface: "#090D1B";
+        readonly elevated: "#0B1325";
+        readonly outline: "#0E3571";
+    };
+    readonly subtitle: {
+        readonly red: "#DA3C36";
+        readonly orange: "#D9822B";
+        readonly yellow: "#F2F218";
+        readonly green: "#4D9966";
+        readonly blueLight: "#51CFE3";
+        readonly blueMedium: "#2554B2";
+        readonly purple: "#634CD9";
+    };
+    readonly subtitleLight: {
+        readonly red: "#F27F7A";
+        readonly orange: "#FFBF7F";
+        readonly yellow: "#FEFF80";
+        readonly green: "#98D9AD";
+        readonly blueLight: "#99CCFF";
+        readonly blueMedium: "#8CB2FF";
+        readonly purple: "#9985FF";
+    };
+    readonly alpha: {
+        readonly 4: "rgba(0, 0, 0, 0.04)";
+        readonly 8: "rgba(0, 0, 0, 0.08)";
+        readonly 16: "rgba(0, 0, 0, 0.16)";
+        readonly 25: "rgba(0, 0, 0, 0.25)";
+        readonly 40: "rgba(0, 0, 0, 0.4)";
+        readonly 60: "rgba(0, 0, 0, 0.6)";
+        readonly 80: "rgba(0, 0, 0, 0.8)";
+    };
+};

package/dist/tokens/elevation.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Sistema de elevação da FracUI.
+ *
+ * Extraído dos 20 estilos de efeito do Figma "Design System - 2026"
+ * (página "↳ Sombras e Blur").
+ *
+ * O sistema tem dois eixos:
+ *
+ * - **direção**: `down` / `up` / `left` / `right` — a sombra é projetada
+ *   para o lado indicado, e não apenas para baixo. Usado para destacar
+ *   sidebars (`right`), barras fixas de rodapé (`up`) e drawers (`left`).
+ * - **intensidade**: `1` / `4` / `8` dp, seguindo a escala do Material.
+ *
+ * Cada nível é uma tripla de sombras (contato, difusa, ambiente) — não
+ * simplifique para uma só: o degradê entre as três é o que dá a
+ * profundidade.
+ */
+/** Sombras neutras — `Grey/` no Figma. */
+export declare const shadowGrey: {
+    readonly "down-1": "0px 2px 4px rgba(0, 0, 0, 0.08), 0px 9px 15px rgba(0, 0, 0, 0.05), 0px 24px 46px rgba(0, 0, 0, 0.03)";
+    readonly "down-4": "0px 2px 5px rgba(0, 0, 0, 0.16), 0px 12px 20px rgba(0, 0, 0, 0.10), 0px 32px 58px rgba(0, 0, 0, 0.07)";
+    readonly "down-8": "0px 4px 6px rgba(0, 0, 0, 0.20), 0px 18px 22px rgba(0, 0, 0, 0.12), 0px 48px 70px rgba(0, 0, 0, 0.08)";
+    readonly "up-1": "0px -2px 4px rgba(0, 0, 0, 0.08), 0px -9px 15px rgba(0, 0, 0, 0.05), 0px -24px 46px rgba(0, 0, 0, 0.03)";
+    readonly "up-4": "0px -2px 5px rgba(0, 0, 0, 0.16), 0px -12px 20px rgba(0, 0, 0, 0.10), 0px -32px 58px rgba(0, 0, 0, 0.07)";
+    readonly "up-8": "0px -4px 6px rgba(0, 0, 0, 0.20), 0px -18px 22px rgba(0, 0, 0, 0.12), 0px -48px 70px rgba(0, 0, 0, 0.08)";
+    readonly "right-1": "2px 0px 4px rgba(0, 0, 0, 0.08), 9px 0px 15px rgba(0, 0, 0, 0.05), 24px 0px 46px rgba(0, 0, 0, 0.03)";
+    readonly "right-4": "2px 0px 5px rgba(0, 0, 0, 0.16), 12px 0px 20px rgba(0, 0, 0, 0.10), 32px 0px 58px rgba(0, 0, 0, 0.07)";
+    readonly "left-1": "-2px 0px 4px rgba(0, 0, 0, 0.08), -9px 0px 15px rgba(0, 0, 0, 0.05), -24px 0px 46px rgba(0, 0, 0, 0.03)";
+    readonly "left-4": "-2px 0px 5px rgba(0, 0, 0, 0.16), -12px 0px 20px rgba(0, 0, 0, 0.10), -32px 0px 58px rgba(0, 0, 0, 0.07)";
+};
+/**
+ * Sombras azuis — `azul/` no Figma.
+ *
+ * Tingidas com o azul de marca (`#3D76CC` nas laterais, `#142C50` nas
+ * centralizadas). Usadas em superfícies que ficam sobre fundo azul, onde
+ * a sombra neutra cinza parece suja.
+ */
+export declare const shadowBlue: {
+    readonly "right-1": "2px 0px 4px rgba(61, 118, 204, 0.08), 4px 0px 10px rgba(61, 118, 204, 0.05), 24px 0px 46px rgba(61, 118, 204, 0.03)";
+    readonly "right-4": "2px 0px 5px rgba(61, 118, 204, 0.16), 12px 0px 20px rgba(61, 118, 204, 0.10), 32px 0px 58px rgba(61, 118, 204, 0.07)";
+    readonly "right-1-dark": "4px 0px 5px rgba(20, 44, 80, 0.12), 6px 0px 10px rgba(20, 44, 80, 0.05), 24px 0px 46px rgba(20, 44, 80, 0.03)";
+    readonly "center-1": "0px 1px 0.5px rgba(20, 44, 80, 0.02)";
+    readonly "center-2": "2px 2px 4.5px rgba(20, 44, 80, 0.08), -2px -2px 4.5px rgba(20, 44, 80, 0.08)";
+    readonly "center-2-dark": "2px 2px 4.5px rgba(20, 44, 80, 0.40), -2px -2px 4.5px rgba(20, 44, 80, 0.40)";
+};
+/** Sombra de contorno sutil — `Sombras/shadow-Elemento4` no Figma. */
+export declare const shadowOutline = "0px 0px 2px rgba(36, 36, 36, 0.10)";
+/**
+ * Desfoque de fundo dos headers e overlays "glass" — `Glass blur` no
+ * Figma. Aplique junto de um fundo semitransparente (ver `colors.alpha`).
+ */
+export declare const backdropBlur: {
+    readonly glass: "13.2px";
+};
+/**
+ * Mapa achatado consumido pelo preset como `theme.extend.boxShadow`.
+ *
+ * Gera `shadow-down-1`, `shadow-blue-right-4`, `shadow-outline`, etc.
+ */
+export declare const boxShadow: Record<string, string>;
+export declare const elevation: {
+    readonly shadowGrey: {
+        readonly "down-1": "0px 2px 4px rgba(0, 0, 0, 0.08), 0px 9px 15px rgba(0, 0, 0, 0.05), 0px 24px 46px rgba(0, 0, 0, 0.03)";
+        readonly "down-4": "0px 2px 5px rgba(0, 0, 0, 0.16), 0px 12px 20px rgba(0, 0, 0, 0.10), 0px 32px 58px rgba(0, 0, 0, 0.07)";
+        readonly "down-8": "0px 4px 6px rgba(0, 0, 0, 0.20), 0px 18px 22px rgba(0, 0, 0, 0.12), 0px 48px 70px rgba(0, 0, 0, 0.08)";
+        readonly "up-1": "0px -2px 4px rgba(0, 0, 0, 0.08), 0px -9px 15px rgba(0, 0, 0, 0.05), 0px -24px 46px rgba(0, 0, 0, 0.03)";
+        readonly "up-4": "0px -2px 5px rgba(0, 0, 0, 0.16), 0px -12px 20px rgba(0, 0, 0, 0.10), 0px -32px 58px rgba(0, 0, 0, 0.07)";
+        readonly "up-8": "0px -4px 6px rgba(0, 0, 0, 0.20), 0px -18px 22px rgba(0, 0, 0, 0.12), 0px -48px 70px rgba(0, 0, 0, 0.08)";
+        readonly "right-1": "2px 0px 4px rgba(0, 0, 0, 0.08), 9px 0px 15px rgba(0, 0, 0, 0.05), 24px 0px 46px rgba(0, 0, 0, 0.03)";
+        readonly "right-4": "2px 0px 5px rgba(0, 0, 0, 0.16), 12px 0px 20px rgba(0, 0, 0, 0.10), 32px 0px 58px rgba(0, 0, 0, 0.07)";
+        readonly "left-1": "-2px 0px 4px rgba(0, 0, 0, 0.08), -9px 0px 15px rgba(0, 0, 0, 0.05), -24px 0px 46px rgba(0, 0, 0, 0.03)";
+        readonly "left-4": "-2px 0px 5px rgba(0, 0, 0, 0.16), -12px 0px 20px rgba(0, 0, 0, 0.10), -32px 0px 58px rgba(0, 0, 0, 0.07)";
+    };
+    readonly shadowBlue: {
+        readonly "right-1": "2px 0px 4px rgba(61, 118, 204, 0.08), 4px 0px 10px rgba(61, 118, 204, 0.05), 24px 0px 46px rgba(61, 118, 204, 0.03)";
+        readonly "right-4": "2px 0px 5px rgba(61, 118, 204, 0.16), 12px 0px 20px rgba(61, 118, 204, 0.10), 32px 0px 58px rgba(61, 118, 204, 0.07)";
+        readonly "right-1-dark": "4px 0px 5px rgba(20, 44, 80, 0.12), 6px 0px 10px rgba(20, 44, 80, 0.05), 24px 0px 46px rgba(20, 44, 80, 0.03)";
+        readonly "center-1": "0px 1px 0.5px rgba(20, 44, 80, 0.02)";
+        readonly "center-2": "2px 2px 4.5px rgba(20, 44, 80, 0.08), -2px -2px 4.5px rgba(20, 44, 80, 0.08)";
+        readonly "center-2-dark": "2px 2px 4.5px rgba(20, 44, 80, 0.40), -2px -2px 4.5px rgba(20, 44, 80, 0.40)";
+    };
+    readonly shadowOutline: "0px 0px 2px rgba(36, 36, 36, 0.10)";
+    readonly backdropBlur: {
+        readonly glass: "13.2px";
+    };
+    readonly boxShadow: Record<string, string>;
+};

package/dist/tokens/grid.d.ts

@@ -0,0 +1,170 @@
+/**
+ * Malha e breakpoints da FracUI.
+ *
+ * Extraídos dos 6 estilos de grid do Figma "Design System - 2026"
+ * (página "↳ Grid"), lidos dos `layoutGrids` dos frames de exemplo.
+ *
+ * O design define três larguras de referência — 360, 768 e 1280 — e três
+ * malhas distintas para desktop, escolhidas pelo tipo de tela e não pelo
+ * tamanho. Não são breakpoints alternativos: são layouts diferentes na
+ * mesma largura.
+ */
+/**
+ * Breakpoints adicionados à escala padrão do Tailwind.
+ *
+ * As três larguras de referência do design já coincidem com breakpoints
+ * padrão, então não há motivo para substituir a escala inteira:
+ *
+ * | Design            | Largura | Tailwind |
+ * | ----------------- | ------- | -------- |
+ * | mobile            | 360px   | `xs` ⬅ adicionado |
+ * | tablet            | 768px   | `md` (já é 768) |
+ * | desktop           | 1280px  | `xl` (já é 1280) |
+ *
+ * Só `xs` é novo. Substituir a escala quebraria `sm:` e `lg:`, usados nos
+ * componentes existentes, sem ganho de fidelidade — por isso este objeto
+ * entra em `theme.extend.screens`, e não em `theme.screens`.
+ */
+export declare const screens: {
+    readonly xs: "360px";
+};
+export type LayoutGrid = {
+    /** Largura do frame em que a malha foi especificada. */
+    reference: string;
+    columns: number;
+    /** Espaço entre colunas. */
+    gutter: string;
+    /** Margem nas laterais do container. */
+    margin: string;
+    /** Largura de coluna fixa, quando o design não usa colunas fluidas. */
+    columnWidth?: string;
+    /** Passo da malha de linha de base. */
+    baseline: string;
+};
+/**
+ * As cinco malhas nomeadas do design.
+ *
+ * `deskRight` é a malha das telas com painel lateral à direita (colunas
+ * ancoradas à direita); `deskCentered` é a malha de conteúdo corrido;
+ * `deskMenu` é a faixa estreita do menu lateral.
+ */
+export declare const grids: {
+    readonly deskRight: {
+        readonly reference: "1280px";
+        readonly columns: 11;
+        readonly gutter: "16px";
+        readonly margin: "18px";
+        readonly columnWidth: "75px";
+        readonly baseline: "8px";
+    };
+    readonly deskCentered: {
+        readonly reference: "1280px";
+        readonly columns: 14;
+        readonly gutter: "27px";
+        readonly margin: "70px";
+        readonly columnWidth: "60px";
+        readonly baseline: "4px";
+    };
+    readonly deskMenu: {
+        readonly reference: "1280px";
+        readonly columns: 4;
+        readonly gutter: "16px";
+        readonly margin: "16px";
+        readonly columnWidth: "44px";
+        readonly baseline: "4px";
+    };
+    readonly tablet: {
+        readonly reference: "768px";
+        readonly columns: 8;
+        readonly gutter: "16px";
+        readonly margin: "16px";
+        readonly baseline: "4px";
+    };
+    readonly mobile: {
+        readonly reference: "360px";
+        readonly columns: 4;
+        readonly gutter: "16px";
+        readonly margin: "16px";
+        readonly baseline: "4px";
+    };
+};
+/**
+ * Container padrão.
+ *
+ * A margem de 70px vem da malha `deskCentered`, que é a usada nas telas de
+ * conteúdo. Abaixo de 1280px o design cai para a margem de 16px das malhas
+ * de tablet e mobile.
+ */
+export declare const container: {
+    readonly center: true;
+    readonly padding: {
+        readonly DEFAULT: "16px";
+        readonly lg: "70px";
+    };
+    readonly screens: {
+        readonly xl: "1440px";
+    };
+};
+/**
+ * Escala de espaçamento derivada da malha de linha de base.
+ *
+ * O design usa duas bases: 4px na maioria das telas e 8px na malha
+ * `deskRight`. Como 8 é múltiplo de 4, a escala de 4 cobre as duas.
+ */
+export declare const spacingBase = "4px";
+export declare const grid: {
+    readonly screens: {
+        readonly xs: "360px";
+    };
+    readonly grids: {
+        readonly deskRight: {
+            readonly reference: "1280px";
+            readonly columns: 11;
+            readonly gutter: "16px";
+            readonly margin: "18px";
+            readonly columnWidth: "75px";
+            readonly baseline: "8px";
+        };
+        readonly deskCentered: {
+            readonly reference: "1280px";
+            readonly columns: 14;
+            readonly gutter: "27px";
+            readonly margin: "70px";
+            readonly columnWidth: "60px";
+            readonly baseline: "4px";
+        };
+        readonly deskMenu: {
+            readonly reference: "1280px";
+            readonly columns: 4;
+            readonly gutter: "16px";
+            readonly margin: "16px";
+            readonly columnWidth: "44px";
+            readonly baseline: "4px";
+        };
+        readonly tablet: {
+            readonly reference: "768px";
+            readonly columns: 8;
+            readonly gutter: "16px";
+            readonly margin: "16px";
+            readonly baseline: "4px";
+        };
+        readonly mobile: {
+            readonly reference: "360px";
+            readonly columns: 4;
+            readonly gutter: "16px";
+            readonly margin: "16px";
+            readonly baseline: "4px";
+        };
+    };
+    readonly container: {
+        readonly center: true;
+        readonly padding: {
+            readonly DEFAULT: "16px";
+            readonly lg: "70px";
+        };
+        readonly screens: {
+            readonly xl: "1440px";
+        };
+    };
+    readonly spacingBase: "4px";
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './theme';
+export * from './grid';
+export * from './typography';
+export * from './elevation';