@fluixi-ui/tokens 0.3.0

package/dist/lib/reference/colors.d.ts

@@ -0,0 +1,24 @@
+export type ThemeName = 'light' | 'dark' | 'high-contrast';
+/** Swappable accent palettes. `blue` is the built-in default baked into the base scales. */
+export type AccentName = 'blue' | 'violet' | 'rose' | 'green';
+export declare const DEFAULT_ACCENT: AccentName;
+type Scale = Record<number, string>;
+export declare const colorScales: Record<ThemeName, Record<string, string>>;
+export declare const semanticColors: Record<string, string>;
+export declare const semanticOverrides: Partial<Record<ThemeName, Record<string, string>>>;
+/**
+ * Alternate accent palettes, selected via `data-accent`. Only the accent scale
+ * changes — every `color-primary`/focus/selection token derives from it. `fg`
+ * overrides `color-primary-fg` for a light-solid accent whose step 9 can't carry
+ * white text (green); the rest keep the default white. `blue` is omitted: it's
+ * the base scale, so `data-accent="blue"` (or none) is the built-in look.
+ * Scales follow the Radix functional model (violet / crimson / grass).
+ */
+export interface AccentPreset {
+    light: Scale;
+    dark: Scale;
+    fg?: string;
+}
+export declare const accentPresets: Record<Exclude<AccentName, 'blue'>, AccentPreset>;
+export {};
+//# sourceMappingURL=colors.d.ts.map

package/dist/lib/reference/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/lib/reference/colors.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,CAAC;AAE3D,4FAA4F;AAC5F,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC9D,eAAO,MAAM,cAAc,EAAE,UAAmB,CAAC;AAEjD,KAAK,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAsGpC,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQjE,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAwBjD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAUhF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAAE,YAAY,CAc3E,CAAC"}

package/dist/lib/reference/colors.js

@@ -0,0 +1,150 @@
+export const DEFAULT_ACCENT = 'blue';
+// Neutrals: a balanced, faintly cool gray — professional and quiet, the calm
+// canvas that lets content (not chrome) carry the interface. Steps follow the
+// Radix functional model: 1–2 surfaces, 3–5 component fills, 6–8 borders,
+// 9–10 solid, 11 muted text, 12 primary text.
+const grayLight = {
+    1: '#fcfcfd',
+    2: '#f9fafb',
+    3: '#f1f2f4',
+    4: '#eaecef',
+    5: '#e3e5e9',
+    6: '#dcdfe3',
+    7: '#ced2d8',
+    8: '#b8bdc6',
+    9: '#8a9099',
+    10: '#7e848d',
+    11: '#60646c',
+    12: '#1a1d21',
+};
+const grayDark = {
+    1: '#0e0f11',
+    2: '#161719',
+    3: '#1d1f22',
+    4: '#232629',
+    5: '#292d31',
+    6: '#31353a',
+    7: '#3d424a',
+    8: '#4e545e',
+    9: '#5c626c',
+    10: '#697079',
+    11: '#a5abb3',
+    12: '#eceef0',
+};
+// Accent: a restrained, confident blue used sparingly — primary actions, focus,
+// selection. Not a decorative wash: the neutrals do the heavy lifting. Step 9 is
+// the solid and clears AA for white text (~5.1:1).
+const accentLight = {
+    1: '#fbfdff',
+    2: '#f3f8ff',
+    3: '#e7f1ff',
+    4: '#d7e7ff',
+    5: '#c3dafe',
+    6: '#aac8fb',
+    7: '#87aff5',
+    8: '#568eec',
+    9: '#2563eb',
+    10: '#1b57d8',
+    11: '#295ec2',
+    12: '#12275c',
+};
+const accentDark = {
+    1: '#0c1420',
+    2: '#0f1a2c',
+    3: '#0f2547',
+    4: '#0e2f5a',
+    5: '#153a6b',
+    6: '#1e477d',
+    7: '#265795',
+    8: '#2e6ab8',
+    9: '#3162cf',
+    10: '#4074e2',
+    11: '#8fb4fb',
+    12: '#d6e6ff',
+};
+const statusLight = {
+    'danger-solid': '#e5484d',
+    'danger-subtle': '#feebec',
+    'danger-fg': '#ffffff',
+    'success-solid': '#30a46c',
+    'success-subtle': '#e6f6ec',
+    'success-fg': '#ffffff',
+    'warning-solid': '#ffb224',
+    'warning-subtle': '#fff4d5',
+    'warning-fg': '#1c2024',
+};
+const statusDark = {
+    'danger-solid': '#ff6369',
+    'danger-subtle': '#3b1219',
+    'danger-fg': '#ffffff',
+    'success-solid': '#3dd68c',
+    'success-subtle': '#0f291e',
+    'success-fg': '#ffffff',
+    'warning-solid': '#ffca16',
+    'warning-subtle': '#3a2e00',
+    'warning-fg': '#1c2024',
+};
+function scaleRecord(gray, accent, status) {
+    const out = {};
+    for (const [step, value] of Object.entries(gray))
+        out[`gray-${step}`] = value;
+    for (const [step, value] of Object.entries(accent))
+        out[`accent-${step}`] = value;
+    return { ...out, ...status };
+}
+export const colorScales = {
+    light: scaleRecord(grayLight, accentLight, statusLight),
+    dark: scaleRecord(grayDark, accentDark, statusDark),
+    'high-contrast': scaleRecord({ ...grayLight, 1: '#ffffff', 6: '#8a9099', 8: '#5f636b', 12: '#000000' }, { ...accentLight, 9: '#123f9c', 10: '#0e3176' }, statusLight),
+};
+export const semanticColors = {
+    'color-bg': 'var(--flx-ui-gray-1)',
+    'color-bg-subtle': 'var(--flx-ui-gray-2)',
+    'color-bg-muted': 'var(--flx-ui-gray-3)',
+    'color-fg': 'var(--flx-ui-gray-12)',
+    'color-fg-muted': 'var(--flx-ui-gray-11)',
+    'color-border': 'var(--flx-ui-gray-6)',
+    'color-border-strong': 'var(--flx-ui-gray-8)',
+    'color-focus-ring': 'var(--flx-ui-accent-8)',
+    'color-primary': 'var(--flx-ui-accent-9)',
+    'color-primary-hover': 'var(--flx-ui-accent-10)',
+    'color-primary-active': 'var(--flx-ui-accent-11)',
+    'color-primary-fg': '#ffffff',
+    'color-primary-subtle': 'var(--flx-ui-accent-3)',
+    'color-danger': 'var(--flx-ui-danger-solid)',
+    'color-danger-fg': 'var(--flx-ui-danger-fg)',
+    'color-danger-subtle': 'var(--flx-ui-danger-subtle)',
+    'color-success': 'var(--flx-ui-success-solid)',
+    'color-success-fg': 'var(--flx-ui-success-fg)',
+    'color-success-subtle': 'var(--flx-ui-success-subtle)',
+    'color-warning': 'var(--flx-ui-warning-solid)',
+    'color-warning-fg': 'var(--flx-ui-warning-fg)',
+    'color-warning-subtle': 'var(--flx-ui-warning-subtle)',
+    'color-overlay': 'rgba(0, 0, 0, 0.4)',
+};
+export const semanticOverrides = {
+    dark: {
+        // The dark solid stays deep enough for white text (~4.9:1), so no flip.
+        'color-overlay': 'rgba(0, 0, 0, 0.6)',
+    },
+    'high-contrast': {
+        'color-border': 'var(--flx-ui-gray-12)',
+        'color-border-strong': 'var(--flx-ui-gray-12)',
+        'color-focus-ring': 'var(--flx-ui-gray-12)',
+    },
+};
+export const accentPresets = {
+    violet: {
+        light: { 1: '#fdfcfe', 2: '#faf8ff', 3: '#f4f0fe', 4: '#ebe4ff', 5: '#e1d5ff', 6: '#d4c4fb', 7: '#c2adf0', 8: '#aa8fe0', 9: '#6e56cf', 10: '#654dc4', 11: '#6550b9', 12: '#2f265f' },
+        dark: { 1: '#14121f', 2: '#1b1525', 3: '#291f43', 4: '#33255b', 5: '#3c2e69', 6: '#473876', 7: '#56468b', 8: '#6958ad', 9: '#6e56cf', 10: '#7d66d9', 11: '#baa7ff', 12: '#e2ddfe' },
+    },
+    rose: {
+        light: { 1: '#fffcfd', 2: '#fef7f9', 3: '#ffe9f0', 4: '#fedce7', 5: '#facedd', 6: '#f3bed1', 7: '#eaacc3', 8: '#e093b2', 9: '#e93d82', 10: '#df3478', 11: '#cb1d63', 12: '#621639' },
+        dark: { 1: '#191114', 2: '#201318', 3: '#381525', 4: '#4d122f', 5: '#5c1839', 6: '#6d2545', 7: '#873356', 8: '#b0436e', 9: '#e93d82', 10: '#ee518a', 11: '#ff92ad', 12: '#fdd3e8' },
+    },
+    green: {
+        light: { 1: '#fbfefb', 2: '#f5fbf5', 3: '#e9f6e9', 4: '#daf1db', 5: '#c9e8ca', 6: '#b2ddb5', 7: '#94ce9a', 8: '#65ba74', 9: '#46a758', 10: '#3e9b4f', 11: '#2a7e3b', 12: '#203c25' },
+        dark: { 1: '#0e1511', 2: '#141a15', 3: '#1b2a1e', 4: '#1d3a24', 5: '#25482d', 6: '#2d5736', 7: '#366740', 8: '#3e7949', 9: '#46a758', 10: '#53b365', 11: '#71d083', 12: '#c2f0c2' },
+        fg: '#0c2617', // step 9 is too light for white text
+    },
+};

package/dist/lib/reference/index.d.ts

@@ -0,0 +1,302 @@
+export declare const space: {
+    readonly 0: "0px";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+};
+export declare const size: {
+    readonly xs: "1.5rem";
+    readonly sm: "2rem";
+    readonly md: "2.5rem";
+    readonly lg: "3rem";
+    readonly xl: "3.5rem";
+};
+export declare const fontFamily: {
+    readonly sans: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+    readonly serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", serif";
+    readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace";
+};
+export declare const fontSize: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly md: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
+    readonly '2xl': "1.5rem";
+    readonly '3xl': "1.875rem";
+    readonly '4xl': "2.25rem";
+};
+export declare const fontWeight: {
+    readonly normal: "400";
+    readonly medium: "500";
+    readonly semibold: "600";
+    readonly bold: "700";
+};
+export declare const lineHeight: {
+    readonly none: "1";
+    readonly tight: "1.25";
+    readonly normal: "1.5";
+    readonly relaxed: "1.75";
+};
+export declare const letterSpacing: {
+    readonly tight: "-0.01em";
+    readonly normal: "0em";
+    readonly wide: "0.02em";
+};
+export declare const radius: {
+    readonly none: "0px";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly full: "9999px";
+};
+export declare const borderWidth: {
+    readonly none: "0px";
+    readonly thin: "1px";
+    readonly thick: "2px";
+};
+export declare const shadow: {
+    readonly sm: "0 1px 2px rgba(17, 24, 39, 0.06)";
+    readonly md: "0 2px 4px -1px rgba(17, 24, 39, 0.06), 0 4px 8px -2px rgba(17, 24, 39, 0.05)";
+    readonly lg: "0 4px 8px -2px rgba(17, 24, 39, 0.06), 0 12px 20px -6px rgba(17, 24, 39, 0.10)";
+    readonly xl: "0 8px 16px -4px rgba(17, 24, 39, 0.08), 0 20px 32px -12px rgba(17, 24, 39, 0.14)";
+};
+export declare const duration: {
+    readonly instant: "0ms";
+    readonly fast: "150ms";
+    readonly normal: "200ms";
+    readonly slow: "300ms";
+};
+export declare const easing: {
+    readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly emphasized: "cubic-bezier(0.3, 0, 0, 1)";
+    readonly linear: "linear";
+};
+export declare const opacity: {
+    readonly 0: "0";
+    readonly 25: "0.25";
+    readonly 50: "0.5";
+    readonly 75: "0.75";
+    readonly 100: "1";
+    readonly disabled: "0.5";
+};
+export declare const blur: {
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "16px";
+};
+export declare const zIndex: {
+    readonly hide: "-1";
+    readonly base: "0";
+    readonly dropdown: "1000";
+    readonly sticky: "1100";
+    readonly overlay: "1200";
+    readonly modal: "1300";
+    readonly popover: "1400";
+    readonly toast: "1500";
+    readonly tooltip: "1600";
+    readonly max: "2147483647";
+};
+export declare const elevation: {
+    readonly 1: "var(--flx-ui-shadow-sm)";
+    readonly 2: "var(--flx-ui-shadow-md)";
+    readonly 3: "var(--flx-ui-shadow-lg)";
+    readonly 4: "var(--flx-ui-shadow-xl)";
+};
+export declare const breakpoint: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+};
+export interface TokenCategory {
+    prefix: string;
+    values: Record<string, string>;
+}
+export declare const staticTokens: {
+    readonly space: {
+        readonly prefix: "space";
+        readonly values: {
+            readonly 0: "0px";
+            readonly 1: "0.25rem";
+            readonly 2: "0.5rem";
+            readonly 3: "0.75rem";
+            readonly 4: "1rem";
+            readonly 5: "1.25rem";
+            readonly 6: "1.5rem";
+            readonly 8: "2rem";
+            readonly 10: "2.5rem";
+            readonly 12: "3rem";
+            readonly 16: "4rem";
+            readonly 20: "5rem";
+            readonly 24: "6rem";
+        };
+    };
+    readonly size: {
+        readonly prefix: "size";
+        readonly values: {
+            readonly xs: "1.5rem";
+            readonly sm: "2rem";
+            readonly md: "2.5rem";
+            readonly lg: "3rem";
+            readonly xl: "3.5rem";
+        };
+    };
+    readonly fontFamily: {
+        readonly prefix: "font-family";
+        readonly values: {
+            readonly sans: "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif";
+            readonly serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", serif";
+            readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace";
+        };
+    };
+    readonly fontSize: {
+        readonly prefix: "font-size";
+        readonly values: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly md: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+        };
+    };
+    readonly fontWeight: {
+        readonly prefix: "font-weight";
+        readonly values: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+    };
+    readonly lineHeight: {
+        readonly prefix: "line-height";
+        readonly values: {
+            readonly none: "1";
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.75";
+        };
+    };
+    readonly letterSpacing: {
+        readonly prefix: "letter-spacing";
+        readonly values: {
+            readonly tight: "-0.01em";
+            readonly normal: "0em";
+            readonly wide: "0.02em";
+        };
+    };
+    readonly radius: {
+        readonly prefix: "radius";
+        readonly values: {
+            readonly none: "0px";
+            readonly sm: "0.25rem";
+            readonly md: "0.375rem";
+            readonly lg: "0.5rem";
+            readonly xl: "0.75rem";
+            readonly full: "9999px";
+        };
+    };
+    readonly borderWidth: {
+        readonly prefix: "border-width";
+        readonly values: {
+            readonly none: "0px";
+            readonly thin: "1px";
+            readonly thick: "2px";
+        };
+    };
+    readonly shadow: {
+        readonly prefix: "shadow";
+        readonly values: {
+            readonly sm: "0 1px 2px rgba(17, 24, 39, 0.06)";
+            readonly md: "0 2px 4px -1px rgba(17, 24, 39, 0.06), 0 4px 8px -2px rgba(17, 24, 39, 0.05)";
+            readonly lg: "0 4px 8px -2px rgba(17, 24, 39, 0.06), 0 12px 20px -6px rgba(17, 24, 39, 0.10)";
+            readonly xl: "0 8px 16px -4px rgba(17, 24, 39, 0.08), 0 20px 32px -12px rgba(17, 24, 39, 0.14)";
+        };
+    };
+    readonly duration: {
+        readonly prefix: "duration";
+        readonly values: {
+            readonly instant: "0ms";
+            readonly fast: "150ms";
+            readonly normal: "200ms";
+            readonly slow: "300ms";
+        };
+    };
+    readonly easing: {
+        readonly prefix: "ease";
+        readonly values: {
+            readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+            readonly emphasized: "cubic-bezier(0.3, 0, 0, 1)";
+            readonly linear: "linear";
+        };
+    };
+    readonly opacity: {
+        readonly prefix: "opacity";
+        readonly values: {
+            readonly 0: "0";
+            readonly 25: "0.25";
+            readonly 50: "0.5";
+            readonly 75: "0.75";
+            readonly 100: "1";
+            readonly disabled: "0.5";
+        };
+    };
+    readonly blur: {
+        readonly prefix: "blur";
+        readonly values: {
+            readonly sm: "4px";
+            readonly md: "8px";
+            readonly lg: "16px";
+        };
+    };
+    readonly zIndex: {
+        readonly prefix: "z";
+        readonly values: {
+            readonly hide: "-1";
+            readonly base: "0";
+            readonly dropdown: "1000";
+            readonly sticky: "1100";
+            readonly overlay: "1200";
+            readonly modal: "1300";
+            readonly popover: "1400";
+            readonly toast: "1500";
+            readonly tooltip: "1600";
+            readonly max: "2147483647";
+        };
+    };
+    readonly elevation: {
+        readonly prefix: "elevation";
+        readonly values: {
+            readonly 1: "var(--flx-ui-shadow-sm)";
+            readonly 2: "var(--flx-ui-shadow-md)";
+            readonly 3: "var(--flx-ui-shadow-lg)";
+            readonly 4: "var(--flx-ui-shadow-xl)";
+        };
+    };
+    readonly breakpoint: {
+        readonly prefix: "breakpoint";
+        readonly values: {
+            readonly sm: "640px";
+            readonly md: "768px";
+            readonly lg: "1024px";
+            readonly xl: "1280px";
+            readonly '2xl': "1536px";
+        };
+    };
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/reference/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/reference/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;CAcR,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;CASX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAKX,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAKX,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;CAKX,CAAC;AAEX,eAAO,MAAM,MAAM;;;;CAIT,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkByB,CAAC"}

package/dist/lib/reference/index.js

@@ -0,0 +1,147 @@
+export const space = {
+    0: '0px',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    8: '2rem',
+    10: '2.5rem',
+    12: '3rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+};
+export const size = {
+    xs: '1.5rem',
+    sm: '2rem',
+    md: '2.5rem',
+    lg: '3rem',
+    xl: '3.5rem',
+};
+export const fontFamily = {
+    sans: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+};
+export const fontSize = {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+};
+export const fontWeight = {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+};
+export const lineHeight = {
+    none: '1',
+    tight: '1.25',
+    normal: '1.5',
+    relaxed: '1.75',
+};
+export const letterSpacing = {
+    tight: '-0.01em',
+    normal: '0em',
+    wide: '0.02em',
+};
+// A tight, consistent radius scale. Corners are softened, never large or
+// pill-like (except `full`, reserved for badges/avatars) — restraint reads as
+// modern and professional.
+export const radius = {
+    none: '0px',
+    sm: '0.25rem', // 4px — inner elements, checkboxes
+    md: '0.375rem', // 6px — the default: buttons, inputs, menu items
+    lg: '0.5rem', // 8px — surfaces: cards, menus, dialogs
+    xl: '0.75rem', // 12px — large surfaces only
+    full: '9999px',
+};
+export const borderWidth = {
+    none: '0px',
+    thin: '1px',
+    thick: '2px',
+};
+// Minimal, neutral shadows — used only to convey elevation, never as decoration.
+// A near-black cool ink at low opacity; structure comes from spacing and borders,
+// so even `xl` stays restrained.
+export const shadow = {
+    sm: '0 1px 2px rgba(17, 24, 39, 0.06)',
+    md: '0 2px 4px -1px rgba(17, 24, 39, 0.06), 0 4px 8px -2px rgba(17, 24, 39, 0.05)',
+    lg: '0 4px 8px -2px rgba(17, 24, 39, 0.06), 0 12px 20px -6px rgba(17, 24, 39, 0.10)',
+    xl: '0 8px 16px -4px rgba(17, 24, 39, 0.08), 0 20px 32px -12px rgba(17, 24, 39, 0.14)',
+};
+export const duration = {
+    instant: '0ms',
+    fast: '150ms',
+    normal: '200ms',
+    slow: '300ms',
+};
+export const easing = {
+    standard: 'cubic-bezier(0.2, 0, 0, 1)',
+    emphasized: 'cubic-bezier(0.3, 0, 0, 1)',
+    linear: 'linear',
+};
+export const opacity = {
+    0: '0',
+    25: '0.25',
+    50: '0.5',
+    75: '0.75',
+    100: '1',
+    disabled: '0.5',
+};
+export const blur = {
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+};
+export const zIndex = {
+    hide: '-1',
+    base: '0',
+    dropdown: '1000',
+    sticky: '1100',
+    overlay: '1200',
+    modal: '1300',
+    popover: '1400',
+    toast: '1500',
+    tooltip: '1600',
+    max: '2147483647',
+};
+export const elevation = {
+    1: 'var(--flx-ui-shadow-sm)',
+    2: 'var(--flx-ui-shadow-md)',
+    3: 'var(--flx-ui-shadow-lg)',
+    4: 'var(--flx-ui-shadow-xl)',
+};
+export const breakpoint = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+};
+export const staticTokens = {
+    space: { prefix: 'space', values: space },
+    size: { prefix: 'size', values: size },
+    fontFamily: { prefix: 'font-family', values: fontFamily },
+    fontSize: { prefix: 'font-size', values: fontSize },
+    fontWeight: { prefix: 'font-weight', values: fontWeight },
+    lineHeight: { prefix: 'line-height', values: lineHeight },
+    letterSpacing: { prefix: 'letter-spacing', values: letterSpacing },
+    radius: { prefix: 'radius', values: radius },
+    borderWidth: { prefix: 'border-width', values: borderWidth },
+    shadow: { prefix: 'shadow', values: shadow },
+    duration: { prefix: 'duration', values: duration },
+    easing: { prefix: 'ease', values: easing },
+    opacity: { prefix: 'opacity', values: opacity },
+    blur: { prefix: 'blur', values: blur },
+    zIndex: { prefix: 'z', values: zIndex },
+    elevation: { prefix: 'elevation', values: elevation },
+    breakpoint: { prefix: 'breakpoint', values: breakpoint },
+};

package/dist/lib/theme/index.d.ts

@@ -0,0 +1,32 @@
+import { type Accessor } from '@fluixi/reactive/signal';
+import type { ThemeName } from '../reference/colors.js';
+export type ThemePreference = ThemeName | 'system';
+export declare const TOKENS_STYLE_ID = "fluixi-tokens";
+export declare function setTheme(theme: ThemeName, target?: HTMLElement | undefined): void;
+export declare function clearTheme(target?: HTMLElement | undefined): void;
+export declare function getTheme(target?: HTMLElement | undefined): ThemeName | undefined;
+export declare function getSystemTheme(): 'light' | 'dark';
+export declare function prefersHighContrast(): boolean;
+export declare function prefersReducedMotion(): boolean;
+export declare function resolveTheme(preference: ThemePreference): ThemeName;
+/** Inject the token stylesheet into the document head once (idempotent). */
+export declare function injectTokens(target?: Document): HTMLStyleElement;
+export interface ThemeControllerOptions {
+    defaultPreference?: ThemePreference;
+    storageKey?: string | null;
+    target?: HTMLElement;
+}
+export interface ThemeController {
+    preference: Accessor<ThemePreference>;
+    theme: Accessor<ThemeName>;
+    setPreference: (preference: ThemePreference) => void;
+    toggle: () => void;
+}
+/**
+ * Reactive theme controller. Resolves the active theme from a preference
+ * (`light` / `dark` / `high-contrast` / `system`), applies it to the target via
+ * `data-theme`, persists the preference, and follows system changes while the
+ * preference is `system`.
+ */
+export declare function createThemeController(options?: ThemeControllerOptions): ThemeController;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAG/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnD,eAAO,MAAM,eAAe,kBAAkB,CAAC;AAW/C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,GAAE,WAAW,GAAG,SAAkB,GAAG,IAAI,CAEzF;AAED,wBAAgB,UAAU,CAAC,MAAM,GAAE,WAAW,GAAG,SAAkB,GAAG,IAAI,CAEzE;AAED,wBAAgB,QAAQ,CAAC,MAAM,GAAE,WAAW,GAAG,SAAkB,GAAG,SAAS,GAAG,SAAS,CAExF;AAED,wBAAgB,cAAc,IAAI,OAAO,GAAG,MAAM,CAEjD;AAED,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C;AAED,wBAAgB,YAAY,CAAC,UAAU,EAAE,eAAe,GAAG,SAAS,CAInE;AAED,4EAA4E;AAC5E,wBAAgB,YAAY,CAAC,MAAM,GAAE,QAAmB,GAAG,gBAAgB,CAQ1E;AAED,MAAM,WAAW,sBAAsB;IACrC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IACtC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC3B,aAAa,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IACrD,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,sBAA2B,GAAG,eAAe,CAsC3F"}