@dtsports/design-system 0.2.0

package/dist/styles/tailwind.preset.d.ts

@@ -0,0 +1,181 @@
+/**
+ * DT Sports — Tailwind preset.
+ *
+ * All token values come from src/tokens/tokens.json via the generated
+ * ./generated/tokens module (run `npm run build:tokens` after editing the
+ * JSON). Only Tailwind-specific wiring lives in this file: dark-mode
+ * strategy, keyframes/animations, and the pointer-coarse variant.
+ *
+ * Consume from apps via:
+ *
+ *   import preset from "@dtsports/design-system/tailwind-preset";
+ *   const config: Config = {
+ *     presets: [preset],
+ *     content: [ ...your app + design-system source paths ],
+ *   };
+ */
+declare const preset: {
+    darkMode: ["class"];
+    content: never[];
+    theme: {
+        screens: {
+            readonly sm: "640px";
+            readonly md: "768px";
+            readonly lg: "1024px";
+            readonly xl: "1280px";
+            readonly "2xl": "1536px";
+        };
+        extend: {
+            colors: {
+                brand: {
+                    lime: "hsl(var(--brand-lime))";
+                    "lime-foreground": "hsl(var(--brand-lime-foreground))";
+                    forest: "hsl(var(--brand-forest))";
+                    "forest-foreground": "hsl(var(--brand-forest-foreground))";
+                };
+                background: "hsl(var(--background))";
+                "bg-subtle": "hsl(var(--bg-subtle))";
+                "bg-muted": "hsl(var(--bg-muted))";
+                border: "hsl(var(--border))";
+                "border-strong": "hsl(var(--border-strong))";
+                foreground: "hsl(var(--foreground))";
+                "text-muted": "hsl(var(--text-muted))";
+                "text-subtle": "hsl(var(--text-subtle))";
+                success: "hsl(var(--success))";
+                "success-foreground": "hsl(var(--success-foreground))";
+                warning: "hsl(var(--warning))";
+                "warning-foreground": "hsl(var(--warning-foreground))";
+                danger: "hsl(var(--danger))";
+                "danger-foreground": "hsl(var(--danger-foreground))";
+                info: "hsl(var(--info))";
+                "info-foreground": "hsl(var(--info-foreground))";
+                ring: "hsl(var(--ring))";
+            };
+            fontFamily: {
+                sans: ["\"Exo 2\"", "system-ui", "sans-serif"];
+                mono: ["ui-monospace", "SFMono-Regular", "\"JetBrains Mono\"", "Menlo", "monospace"];
+            };
+            fontSize: {
+                [x: string]: ["11px" | "13px" | "14px" | "20px" | "15px" | "17px" | "24px" | "30px", {
+                    lineHeight: "16px";
+                } | {
+                    lineHeight: "18px";
+                } | {
+                    lineHeight: "20px";
+                } | {
+                    lineHeight: "22px";
+                } | {
+                    lineHeight: "24px";
+                } | {
+                    lineHeight: "28px";
+                } | {
+                    lineHeight: "32px";
+                } | {
+                    lineHeight: "36px";
+                }] | ["clamp(32px, 24px + 2.5vw, 44px)" | "clamp(40px, 26px + 4vw, 64px)" | "clamp(48px, 28px + 6vw, 96px)", {
+                    lineHeight: "1.1";
+                    letterSpacing: "-0.02em";
+                } | {
+                    lineHeight: "1.05";
+                    letterSpacing: "-0.02em";
+                } | {
+                    lineHeight: "1";
+                    letterSpacing: "-0.025em";
+                }];
+            };
+            fontWeight: {
+                normal: "400";
+                medium: "500";
+                semibold: "600";
+                bold: "700";
+            };
+            spacing: {
+                "1": "4px";
+                "2": "8px";
+                "3": "12px";
+                "4": "16px";
+                "5": "20px";
+                "6": "24px";
+                "8": "32px";
+                "10": "40px";
+                "12": "48px";
+                "16": "64px";
+                "20": "80px";
+                "24": "96px";
+                "32": "128px";
+                "40": "160px";
+                "0.5": "2px";
+                "1.5": "6px";
+                "2.5": "10px";
+            };
+            borderRadius: {
+                none: "0";
+                sm: "var(--radius-sm)";
+                DEFAULT: "var(--radius)";
+                md: "var(--radius-md)";
+                full: "9999px";
+            };
+            boxShadow: {
+                none: "none";
+                sm: "0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04)";
+                md: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)";
+                lg: "0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08)";
+            };
+            backgroundImage: {
+                "gradient-brand": "linear-gradient(135deg, hsl(var(--brand-forest)) 0%, hsl(100 55% 38%) 55%, hsl(var(--brand-lime)) 100%)";
+                "gradient-forest-fade": "linear-gradient(180deg, hsl(var(--brand-forest) / 0.08) 0%, transparent 100%)";
+            };
+            transitionDuration: {
+                DEFAULT: "150ms";
+                slow: "200ms";
+            };
+            transitionTimingFunction: {
+                out: "cubic-bezier(0.2, 0, 0, 1)";
+            };
+            zIndex: {
+                sticky: "20";
+                overlay: "40";
+                modal: "50";
+                popover: "50";
+                toast: "60";
+            };
+            keyframes: {
+                "live-pulse": {
+                    "0%, 100%": {
+                        opacity: string;
+                    };
+                    "50%": {
+                        opacity: string;
+                    };
+                };
+                "fade-in": {
+                    from: {
+                        opacity: string;
+                    };
+                    to: {
+                        opacity: string;
+                    };
+                };
+                "fade-in-up": {
+                    from: {
+                        opacity: string;
+                    };
+                    to: {
+                        opacity: string;
+                    };
+                };
+            };
+            animation: {
+                "live-pulse": string;
+                "fade-in": string;
+                "fade-in-up": string;
+            };
+        };
+    };
+    plugins: {
+        handler: import("tailwindcss/types/config").PluginCreator;
+        config?: Partial<import("tailwindcss/types/config").Config>;
+    }[];
+};
+export default preset;
+//# sourceMappingURL=tailwind.preset.d.ts.map

package/dist/styles/tailwind.preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.preset.d.ts","sourceRoot":"","sources":["../../src/styles/tailwind.preset.ts"],"names":[],"mappings":"AAoBA;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Fe,CAAC;AAE5B,eAAe,MAAM,CAAC"}

package/dist/styles/tailwind.preset.js

@@ -0,0 +1,114 @@
+// Explicit ".js" — Tailwind v3 has no exports map, so strict Node ESM
+// needs the extension (bundlers/jiti accept it too).
+import plugin from "tailwindcss/plugin.js";
+import { backgroundImage, borderRadius, boxShadow, colors, fontFamily, fontSize, fontSizeFluid, fontWeight, screens, spacing, transitionDuration, transitionTimingFunction, zIndex, } from "./generated/tokens.js";
+/**
+ * DT Sports — Tailwind preset.
+ *
+ * All token values come from src/tokens/tokens.json via the generated
+ * ./generated/tokens module (run `npm run build:tokens` after editing the
+ * JSON). Only Tailwind-specific wiring lives in this file: dark-mode
+ * strategy, keyframes/animations, and the pointer-coarse variant.
+ *
+ * Consume from apps via:
+ *
+ *   import preset from "@dtsports/design-system/tailwind-preset";
+ *   const config: Config = {
+ *     presets: [preset],
+ *     content: [ ...your app + design-system source paths ],
+ *   };
+ */
+const preset = {
+    darkMode: ["class"],
+    // Empty content here — apps must declare their own paths so Tailwind
+    // can scan the design-system source AND the app's own files.
+    content: [],
+    theme: {
+        // Explicit (non-extend) so web and native share one breakpoint source.
+        screens,
+        extend: {
+            colors: {
+                brand: {
+                    lime: colors["brand-lime"],
+                    "lime-foreground": colors["brand-lime-foreground"],
+                    forest: colors["brand-forest"],
+                    "forest-foreground": colors["brand-forest-foreground"],
+                },
+                background: colors.background,
+                "bg-subtle": colors["bg-subtle"],
+                "bg-muted": colors["bg-muted"],
+                border: colors.border,
+                "border-strong": colors["border-strong"],
+                foreground: colors.foreground,
+                "text-muted": colors["text-muted"],
+                "text-subtle": colors["text-subtle"],
+                success: colors.success,
+                "success-foreground": colors["success-foreground"],
+                warning: colors.warning,
+                "warning-foreground": colors["warning-foreground"],
+                danger: colors.danger,
+                "danger-foreground": colors["danger-foreground"],
+                info: colors.info,
+                "info-foreground": colors["info-foreground"],
+                ring: colors.ring,
+            },
+            fontFamily: {
+                sans: [...fontFamily.sans],
+                mono: [...fontFamily.mono],
+            },
+            fontSize: {
+                ...Object.fromEntries(Object.entries(fontSize).map(([k, [size, opts]]) => [
+                    k,
+                    [size, { ...opts }],
+                ])),
+                // Marketing display scale — fluid clamp(), zero cost unless used.
+                ...Object.fromEntries(Object.entries(fontSizeFluid).map(([k, [size, opts]]) => [
+                    k,
+                    [size, { ...opts }],
+                ])),
+            },
+            fontWeight: { ...fontWeight },
+            spacing: { ...spacing },
+            borderRadius: { ...borderRadius },
+            boxShadow: { ...boxShadow },
+            backgroundImage: { ...backgroundImage },
+            transitionDuration: { ...transitionDuration },
+            transitionTimingFunction: { ...transitionTimingFunction },
+            zIndex: { ...zIndex },
+            keyframes: {
+                "live-pulse": {
+                    "0%, 100%": { opacity: "1" },
+                    "50%": { opacity: "0.4" },
+                },
+                "fade-in": {
+                    from: { opacity: "0" },
+                    to: { opacity: "1" },
+                },
+                // Opacity-only on purpose. A `transform: translateY(...)` here
+                // would override Tailwind's `-translate-x-1/2 -translate-y-1/2`
+                // centering on the desktop DialogContent (CSS `transform` is a
+                // single property — animation wins), shoving the modal off-
+                // screen to the bottom-right. Opacity is enough entrance polish
+                // and works for both the centered modal and the mobile sheet.
+                "fade-in-up": {
+                    from: { opacity: "0" },
+                    to: { opacity: "1" },
+                },
+            },
+            animation: {
+                "live-pulse": "live-pulse 1.5s ease-in-out infinite",
+                "fade-in": "fade-in 150ms cubic-bezier(0.2, 0, 0, 1)",
+                "fade-in-up": "fade-in-up 200ms cubic-bezier(0.2, 0, 0, 1)",
+            },
+        },
+    },
+    plugins: [
+        // `pointer-coarse:` targets touch-primary devices — used to grow tap
+        // targets to 44px without loosening the dense pointer/desktop layout.
+        plugin(({ addVariant }) => {
+            addVariant("pointer-coarse", "@media (pointer: coarse)");
+        }),
+    ],
+};
+export default preset;
+//# sourceMappingURL=tailwind.preset.js.map

package/dist/styles/tailwind.preset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.preset.js","sourceRoot":"","sources":["../../src/styles/tailwind.preset.ts"],"names":[],"mappings":"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"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,176 @@
+/** Resolved color palettes. Values are CSS hsl() strings (RN-compatible). */
+export declare const palette: {
+    readonly light: {
+        readonly "brand-lime": "hsl(72 65% 52%)";
+        readonly "brand-lime-foreground": "hsl(0 0% 4%)";
+        readonly "brand-forest": "hsl(147 66% 26%)";
+        readonly "brand-forest-foreground": "hsl(0 0% 100%)";
+        readonly background: "hsl(0 0% 100%)";
+        readonly "bg-subtle": "hsl(0 0% 98%)";
+        readonly "bg-muted": "hsl(240 5% 96%)";
+        readonly border: "hsl(0 0% 90%)";
+        readonly "border-strong": "hsl(0 0% 83%)";
+        readonly foreground: "hsl(0 0% 4%)";
+        readonly "text-muted": "hsl(0 0% 32%)";
+        readonly "text-subtle": "hsl(0 0% 45%)";
+        readonly success: "hsl(142 72% 29%)";
+        readonly "success-foreground": "hsl(0 0% 100%)";
+        readonly warning: "hsl(35 90% 33%)";
+        readonly "warning-foreground": "hsl(0 0% 100%)";
+        readonly danger: "hsl(0 72% 49%)";
+        readonly "danger-foreground": "hsl(0 0% 100%)";
+        readonly info: "hsl(217 91% 50%)";
+        readonly "info-foreground": "hsl(0 0% 100%)";
+        readonly ring: "hsl(147 66% 26%)";
+    };
+    readonly dark: {
+        readonly "brand-lime": "hsl(72 65% 52%)";
+        readonly "brand-lime-foreground": "hsl(0 0% 4%)";
+        readonly "brand-forest": "hsl(147 66% 26%)";
+        readonly "brand-forest-foreground": "hsl(0 0% 100%)";
+        readonly background: "hsl(0 0% 4%)";
+        readonly "bg-subtle": "hsl(0 0% 8%)";
+        readonly "bg-muted": "hsl(0 0% 12%)";
+        readonly border: "hsl(0 0% 15%)";
+        readonly "border-strong": "hsl(240 5% 26%)";
+        readonly foreground: "hsl(0 0% 98%)";
+        readonly "text-muted": "hsl(240 5% 65%)";
+        readonly "text-subtle": "hsl(240 4% 52%)";
+        readonly success: "hsl(142 60% 45%)";
+        readonly "success-foreground": "hsl(0 0% 4%)";
+        readonly warning: "hsl(38 92% 50%)";
+        readonly "warning-foreground": "hsl(0 0% 4%)";
+        readonly danger: "hsl(0 84% 62%)";
+        readonly "danger-foreground": "hsl(0 0% 4%)";
+        readonly info: "hsl(217 91% 62%)";
+        readonly "info-foreground": "hsl(0 0% 4%)";
+        readonly ring: "hsl(72 65% 52%)";
+    };
+};
+export type ThemeName = keyof typeof palette;
+export type ColorToken = keyof typeof palette.light;
+/** Spacing scale in device pixels. */
+export declare const spacing: {
+    readonly "1": 4;
+    readonly "2": 8;
+    readonly "3": 12;
+    readonly "4": 16;
+    readonly "5": 20;
+    readonly "6": 24;
+    readonly "8": 32;
+    readonly "10": 40;
+    readonly "12": 48;
+    readonly "16": 64;
+    readonly "20": 80;
+    readonly "24": 96;
+    readonly "32": 128;
+    readonly "40": 160;
+    readonly "0.5": 2;
+    readonly "1.5": 6;
+    readonly "2.5": 10;
+};
+/** Type scale in device pixels. */
+export declare const fontSize: {
+    readonly xs: {
+        readonly size: 11;
+        readonly lineHeight: 16;
+    };
+    readonly sm: {
+        readonly size: 13;
+        readonly lineHeight: 18;
+    };
+    readonly base: {
+        readonly size: 14;
+        readonly lineHeight: 20;
+    };
+    readonly md: {
+        readonly size: 15;
+        readonly lineHeight: 22;
+    };
+    readonly lg: {
+        readonly size: 17;
+        readonly lineHeight: 24;
+    };
+    readonly xl: {
+        readonly size: 20;
+        readonly lineHeight: 28;
+    };
+    readonly "2xl": {
+        readonly size: 24;
+        readonly lineHeight: 32;
+    };
+    readonly "3xl": {
+        readonly size: 30;
+        readonly lineHeight: 36;
+    };
+};
+export declare const fontWeight: {
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+/** Marketing display scale — RN gets the min/max bounds (no vw units). */
+export declare const fontSizeFluid: {
+    readonly "display-sm": {
+        readonly min: 32;
+        readonly max: 44;
+        readonly lineHeight: 1.1;
+    };
+    readonly display: {
+        readonly min: 40;
+        readonly max: 64;
+        readonly lineHeight: 1.05;
+    };
+    readonly "display-lg": {
+        readonly min: 48;
+        readonly max: 96;
+        readonly lineHeight: 1;
+    };
+};
+/** CSS gradient strings (web); RN needs its own gradient impl. */
+export declare const gradient: {
+    readonly brand: "linear-gradient(135deg, hsl(var(--brand-forest)) 0%, hsl(100 55% 38%) 55%, hsl(var(--brand-lime)) 100%)";
+    readonly "forest-fade": "linear-gradient(180deg, hsl(var(--brand-forest) / 0.08) 0%, transparent 100%)";
+};
+export declare const fontFamily: {
+    readonly sans: readonly ["Exo 2", "system-ui", "sans-serif"];
+    readonly mono: readonly ["ui-monospace", "SFMono-Regular", "JetBrains Mono", "Menlo", "monospace"];
+};
+/** Corner radii in device pixels. */
+export declare const radius: {
+    readonly sm: 2;
+    readonly base: 4;
+    readonly md: 6;
+};
+/** CSS box-shadow strings — map to RN elevation/shadow* as needed. */
+export declare const shadow: {
+    readonly sm: "0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04)";
+    readonly md: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)";
+    readonly lg: "0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08)";
+};
+/** Durations in ms. */
+export declare const duration: {
+    readonly base: 150;
+    readonly slow: 200;
+    readonly pulse: 1500;
+};
+export declare const easing: {
+    readonly out: "cubic-bezier(0.2, 0, 0, 1)";
+};
+export declare const zIndex: {
+    readonly sticky: 20;
+    readonly overlay: 40;
+    readonly modal: 50;
+    readonly popover: 50;
+    readonly toast: 60;
+};
+/** Breakpoints in px (web); useful for RN tablet/phone splits too. */
+export declare const breakpoint: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAEA,6EAA6E;AAC7E,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CV,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,OAAO,CAAC;AAC7C,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC,KAAK,CAAC;AAEpD,sCAAsC;AACtC,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;CAkBV,CAAC;AAEX,mCAAmC;AACnC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX,0EAA0E;AAC1E,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;CAIhB,CAAC;AAEX,kEAAkE;AAClE,eAAO,MAAM,QAAQ;;;CAGX,CAAC;AAEX,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,qCAAqC;AACrC,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,uBAAuB;AACvB,eAAO,MAAM,QAAQ;;;;CAIX,CAAC;AAEX,eAAO,MAAM,MAAM;;CAET,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,sEAAsE;AACtE,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC"}

package/dist/tokens/index.js

@@ -0,0 +1,139 @@
+// GENERATED by scripts/build-tokens.mjs from src/tokens/tokens.json — do not edit (platform-agnostic tokens for React Native / plain JS)
+/** Resolved color palettes. Values are CSS hsl() strings (RN-compatible). */
+export const palette = {
+    light: {
+        "brand-lime": "hsl(72 65% 52%)",
+        "brand-lime-foreground": "hsl(0 0% 4%)",
+        "brand-forest": "hsl(147 66% 26%)",
+        "brand-forest-foreground": "hsl(0 0% 100%)",
+        "background": "hsl(0 0% 100%)",
+        "bg-subtle": "hsl(0 0% 98%)",
+        "bg-muted": "hsl(240 5% 96%)",
+        "border": "hsl(0 0% 90%)",
+        "border-strong": "hsl(0 0% 83%)",
+        "foreground": "hsl(0 0% 4%)",
+        "text-muted": "hsl(0 0% 32%)",
+        "text-subtle": "hsl(0 0% 45%)",
+        "success": "hsl(142 72% 29%)",
+        "success-foreground": "hsl(0 0% 100%)",
+        "warning": "hsl(35 90% 33%)",
+        "warning-foreground": "hsl(0 0% 100%)",
+        "danger": "hsl(0 72% 49%)",
+        "danger-foreground": "hsl(0 0% 100%)",
+        "info": "hsl(217 91% 50%)",
+        "info-foreground": "hsl(0 0% 100%)",
+        "ring": "hsl(147 66% 26%)",
+    },
+    dark: {
+        "brand-lime": "hsl(72 65% 52%)",
+        "brand-lime-foreground": "hsl(0 0% 4%)",
+        "brand-forest": "hsl(147 66% 26%)",
+        "brand-forest-foreground": "hsl(0 0% 100%)",
+        "background": "hsl(0 0% 4%)",
+        "bg-subtle": "hsl(0 0% 8%)",
+        "bg-muted": "hsl(0 0% 12%)",
+        "border": "hsl(0 0% 15%)",
+        "border-strong": "hsl(240 5% 26%)",
+        "foreground": "hsl(0 0% 98%)",
+        "text-muted": "hsl(240 5% 65%)",
+        "text-subtle": "hsl(240 4% 52%)",
+        "success": "hsl(142 60% 45%)",
+        "success-foreground": "hsl(0 0% 4%)",
+        "warning": "hsl(38 92% 50%)",
+        "warning-foreground": "hsl(0 0% 4%)",
+        "danger": "hsl(0 84% 62%)",
+        "danger-foreground": "hsl(0 0% 4%)",
+        "info": "hsl(217 91% 62%)",
+        "info-foreground": "hsl(0 0% 4%)",
+        "ring": "hsl(72 65% 52%)",
+    },
+};
+/** Spacing scale in device pixels. */
+export const spacing = {
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 20,
+    "6": 24,
+    "8": 32,
+    "10": 40,
+    "12": 48,
+    "16": 64,
+    "20": 80,
+    "24": 96,
+    "32": 128,
+    "40": 160,
+    "0.5": 2,
+    "1.5": 6,
+    "2.5": 10,
+};
+/** Type scale in device pixels. */
+export const fontSize = {
+    "xs": { size: 11, lineHeight: 16 },
+    "sm": { size: 13, lineHeight: 18 },
+    "base": { size: 14, lineHeight: 20 },
+    "md": { size: 15, lineHeight: 22 },
+    "lg": { size: 17, lineHeight: 24 },
+    "xl": { size: 20, lineHeight: 28 },
+    "2xl": { size: 24, lineHeight: 32 },
+    "3xl": { size: 30, lineHeight: 36 },
+};
+export const fontWeight = {
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+};
+/** Marketing display scale — RN gets the min/max bounds (no vw units). */
+export const fontSizeFluid = {
+    "display-sm": { min: 32, max: 44, lineHeight: 1.1 },
+    "display": { min: 40, max: 64, lineHeight: 1.05 },
+    "display-lg": { min: 48, max: 96, lineHeight: 1 },
+};
+/** CSS gradient strings (web); RN needs its own gradient impl. */
+export const gradient = {
+    "brand": "linear-gradient(135deg, hsl(var(--brand-forest)) 0%, hsl(100 55% 38%) 55%, hsl(var(--brand-lime)) 100%)",
+    "forest-fade": "linear-gradient(180deg, hsl(var(--brand-forest) / 0.08) 0%, transparent 100%)",
+};
+export const fontFamily = {
+    sans: ['Exo 2', 'system-ui', 'sans-serif'],
+    mono: ['ui-monospace', 'SFMono-Regular', 'JetBrains Mono', 'Menlo', 'monospace'],
+};
+/** Corner radii in device pixels. */
+export const radius = {
+    "sm": 2,
+    base: 4,
+    "md": 6,
+};
+/** CSS box-shadow strings — map to RN elevation/shadow* as needed. */
+export const shadow = {
+    sm: "0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.04)",
+    md: "0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06)",
+    lg: "0 12px 32px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08)",
+};
+/** Durations in ms. */
+export const duration = {
+    base: 150,
+    "slow": 200,
+    "pulse": 1500,
+};
+export const easing = {
+    out: "cubic-bezier(0.2, 0, 0, 1)",
+};
+export const zIndex = {
+    sticky: 20,
+    overlay: 40,
+    modal: 50,
+    popover: 50,
+    toast: 60,
+};
+/** Breakpoints in px (web); useful for RN tablet/phone splits too. */
+export const breakpoint = {
+    "sm": 640,
+    "md": 768,
+    "lg": 1024,
+    "xl": 1280,
+    "2xl": 1536,
+};
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"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"}