@synapsly/tokens 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,677 +1,5 @@
-declare const primitiveTokens: {
-    readonly color: {
-        readonly white: "#ffffff";
-        readonly black: "#000000";
-        readonly transparent: "transparent";
-        readonly neutral: {
-            readonly 25: "#fcfbfb";
-            readonly 50: "#f8f7f6";
-            readonly 100: "#efedea";
-            readonly 200: "#dedad5";
-            readonly 300: "#ccc5be";
-            readonly 400: "#beb6ad";
-            readonly 500: "#b4aba3";
-            readonly 600: "#9d9389";
-            readonly 700: "#7e756e";
-            readonly 800: "#645d57";
-            readonly 900: "#514c47";
-            readonly 950: "#2a2624";
-            readonly 975: "#161413";
-        };
-        readonly brand: {
-            readonly 25: "#fdfbf8";
-            readonly 50: "#fbf7f1";
-            readonly 100: "#f5ecdf";
-            readonly 200: "#ead8bf";
-            readonly 300: "#dec29d";
-            readonly 400: "#d5b186";
-            readonly 500: "#cca67b";
-            readonly 600: "#b88c5d";
-            readonly 700: "#966f49";
-            readonly 800: "#76583b";
-            readonly 900: "#604832";
-            readonly 950: "#332419";
-            readonly 975: "#1c130d";
-        };
-        readonly blue: {
-            readonly 50: "#eff6ff";
-            readonly 100: "#dbeafe";
-            readonly 200: "#bfdbfe";
-            readonly 300: "#93c5fd";
-            readonly 400: "#60a5fa";
-            readonly 500: "#3b82f6";
-            readonly 600: "#2563eb";
-            readonly 700: "#1d4ed8";
-            readonly 800: "#1e40af";
-            readonly 900: "#1e3a8a";
-            readonly 950: "#172554";
-        };
-        readonly green: {
-            readonly 50: "#f0fdf4";
-            readonly 100: "#dcfce7";
-            readonly 200: "#bbf7d0";
-            readonly 300: "#86efac";
-            readonly 400: "#4ade80";
-            readonly 500: "#22c55e";
-            readonly 600: "#16a34a";
-            readonly 700: "#15803d";
-            readonly 800: "#166534";
-            readonly 900: "#14532d";
-            readonly 950: "#052e16";
-        };
-        readonly yellow: {
-            readonly 50: "#fefce8";
-            readonly 100: "#fef9c3";
-            readonly 200: "#fef08a";
-            readonly 300: "#fde047";
-            readonly 400: "#facc15";
-            readonly 500: "#eab308";
-            readonly 600: "#ca8a04";
-            readonly 700: "#a16207";
-            readonly 800: "#854d0e";
-            readonly 900: "#713f12";
-            readonly 950: "#422006";
-        };
-        readonly orange: {
-            readonly 50: "#fff7ed";
-            readonly 100: "#ffedd5";
-            readonly 200: "#fed7aa";
-            readonly 300: "#fdba74";
-            readonly 400: "#fb923c";
-            readonly 500: "#f97316";
-            readonly 600: "#ea580c";
-            readonly 700: "#c2410c";
-            readonly 800: "#9a3412";
-            readonly 900: "#7c2d12";
-            readonly 950: "#431407";
-        };
-        readonly red: {
-            readonly 50: "#fef2f2";
-            readonly 100: "#fee2e2";
-            readonly 200: "#fecaca";
-            readonly 300: "#fca5a5";
-            readonly 400: "#f87171";
-            readonly 500: "#ef4444";
-            readonly 600: "#dc2626";
-            readonly 700: "#b91c1c";
-            readonly 800: "#991b1b";
-            readonly 900: "#7f1d1d";
-            readonly 950: "#450a0a";
-        };
-        readonly purple: {
-            readonly 50: "#faf5ff";
-            readonly 100: "#f3e8ff";
-            readonly 200: "#e9d5ff";
-            readonly 300: "#d8b4fe";
-            readonly 400: "#c084fc";
-            readonly 500: "#a855f7";
-            readonly 600: "#9333ea";
-            readonly 700: "#7e22ce";
-            readonly 800: "#6b21a8";
-            readonly 900: "#581c87";
-            readonly 950: "#3b0764";
-        };
-        readonly cyan: {
-            readonly 50: "#ecfeff";
-            readonly 100: "#cffafe";
-            readonly 200: "#a5f3fc";
-            readonly 300: "#67e8f9";
-            readonly 400: "#22d3ee";
-            readonly 500: "#06b6d4";
-            readonly 600: "#0891b2";
-            readonly 700: "#0e7490";
-            readonly 800: "#155e75";
-            readonly 900: "#164e63";
-            readonly 950: "#083344";
-        };
-        readonly pink: {
-            readonly 50: "#fdf2f8";
-            readonly 100: "#fce7f3";
-            readonly 200: "#fbcfe8";
-            readonly 300: "#f9a8d4";
-            readonly 400: "#f472b6";
-            readonly 500: "#ec4899";
-            readonly 600: "#db2777";
-            readonly 700: "#be185d";
-            readonly 800: "#9d174d";
-            readonly 900: "#831843";
-            readonly 950: "#500724";
-        };
-    };
-    readonly fontFamily: {
-        readonly sans: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
-        readonly serif: "ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif";
-        readonly mono: "\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, monospace";
-    };
-    readonly fontSize: {
-        readonly 75: "0.75rem";
-        readonly 87: "0.875rem";
-        readonly 100: "1rem";
-        readonly 112: "1.125rem";
-        readonly 125: "1.25rem";
-        readonly 150: "1.5rem";
-        readonly 187: "1.875rem";
-        readonly 225: "2.25rem";
-        readonly 300: "3rem";
-    };
-    readonly fontWeight: {
-        readonly 400: "400";
-        readonly 500: "500";
-        readonly 600: "600";
-        readonly 700: "700";
-    };
-    readonly lineHeight: {
-        readonly 100: "1";
-        readonly 120: "1.2";
-        readonly 150: "1.5";
-        readonly 175: "1.75";
-    };
-    readonly letterSpacing: {
-        readonly "-2": "-0.02em";
-        readonly "-1": "-0.01em";
-        readonly 0: "0";
-        readonly 1: "0.01em";
-        readonly 2: "0.02em";
-        readonly 4: "0.04em";
-    };
-    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 8: "2rem";
-        readonly 10: "2.5rem";
-        readonly 12: "3rem";
-        readonly 16: "4rem";
-        readonly 20: "5rem";
-        readonly 24: "6rem";
-        readonly 32: "8rem";
-        readonly 64: "16rem";
-    };
-    readonly radius: {
-        readonly 0: "0";
-        readonly 2: "0.125rem";
-        readonly 4: "0.25rem";
-        readonly 8: "0.5rem";
-        readonly 12: "0.75rem";
-        readonly 9999: "9999px";
-    };
-    readonly shadow: {
-        readonly 0: "none";
-        readonly 1: "0 1px 2px rgb(17 24 39 / 8%)";
-        readonly 2: "0 2px 8px rgb(17 24 39 / 10%)";
-        readonly 3: "0 8px 24px rgb(17 24 39 / 12%)";
-        readonly 4: "0 16px 40px rgb(17 24 39 / 16%)";
-        readonly 5: "0 24px 64px rgb(17 24 39 / 20%)";
-        readonly inner: "inset 0 1px 2px rgb(17 24 39 / 8%)";
-        readonly focus: "0 0 0 3px rgb(184 140 93 / 28%)";
-    };
-    readonly zIndex: {
-        readonly 0: "0";
-        readonly 10: "10";
-        readonly 100: "100";
-        readonly 1000: "1000";
-        readonly 1100: "1100";
-        readonly 1200: "1200";
-    };
-    readonly duration: {
-        readonly 0: "0ms";
-        readonly 120: "120ms";
-        readonly 200: "200ms";
-        readonly 320: "320ms";
-    };
-    readonly easing: {
-        readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
-        readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
-        readonly entrance: "cubic-bezier(0, 0, 0.2, 1)";
-        readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
-    };
-    readonly breakpoint: {
-        readonly 360: "360px";
-        readonly 640: "640px";
-        readonly 768: "768px";
-        readonly 1024: "1024px";
-        readonly 1280: "1280px";
-    };
-    readonly opacity: {
-        readonly 0: "0";
-        readonly 40: "0.4";
-        readonly 60: "0.6";
-        readonly 64: "0.64";
-        readonly 100: "1";
-    };
-    readonly borderWidth: {
-        readonly 0: "0";
-        readonly 1: "1px";
-        readonly 2: "2px";
-        readonly 4: "4px";
-    };
-    readonly borderStyle: {
-        readonly solid: "solid";
-        readonly dashed: "dashed";
-    };
-    readonly iconSize: {
-        readonly 12: "0.75rem";
-        readonly 16: "1rem";
-        readonly 20: "1.25rem";
-        readonly 24: "1.5rem";
-        readonly 32: "2rem";
-    };
-};
-
-declare const semanticContract: {
-    readonly color: {
-        readonly bg: {
-            readonly canvas: "";
-            readonly surface: "";
-            readonly elevated: "";
-            readonly inverse: "";
-            readonly disabled: "";
-            readonly overlay: "";
-        };
-        readonly fg: {
-            readonly primary: "";
-            readonly secondary: "";
-            readonly tertiary: "";
-            readonly inverse: "";
-            readonly disabled: "";
-            readonly brand: "";
-            readonly success: "";
-            readonly warning: "";
-            readonly danger: "";
-            readonly info: "";
-        };
-        readonly border: {
-            readonly subtle: "";
-            readonly default: "";
-            readonly strong: "";
-            readonly focus: "";
-            readonly disabled: "";
-            readonly success: "";
-            readonly warning: "";
-            readonly danger: "";
-        };
-        readonly action: {
-            readonly primary: {
-                readonly bg: "";
-                readonly bgHover: "";
-                readonly bgActive: "";
-                readonly border: "";
-                readonly icon: "";
-                readonly fg: "";
-            };
-            readonly secondary: {
-                readonly bg: "";
-                readonly bgHover: "";
-                readonly bgActive: "";
-                readonly border: "";
-                readonly icon: "";
-                readonly fg: "";
-            };
-            readonly danger: {
-                readonly bg: "";
-                readonly bgHover: "";
-                readonly bgActive: "";
-                readonly border: "";
-                readonly icon: "";
-                readonly fg: "";
-            };
-            readonly disabled: {
-                readonly bg: "";
-                readonly border: "";
-                readonly icon: "";
-                readonly fg: "";
-            };
-        };
-        readonly state: {
-            readonly hover: {
-                readonly bg: "";
-            };
-            readonly pressed: {
-                readonly bg: "";
-            };
-            readonly selected: {
-                readonly bg: "";
-                readonly border: "";
-                readonly fg: "";
-            };
-            readonly focus: {
-                readonly ring: "";
-            };
-            readonly loading: {
-                readonly bg: "";
-                readonly fg: "";
-            };
-            readonly visited: {
-                readonly fg: "";
-            };
-            readonly readonly: {
-                readonly bg: "";
-                readonly border: "";
-                readonly fg: "";
-            };
-        };
-        readonly form: {
-            readonly bg: "";
-            readonly bgHover: "";
-            readonly border: "";
-            readonly borderHover: "";
-            readonly borderFocus: "";
-            readonly borderInvalid: "";
-            readonly fg: "";
-            readonly placeholder: "";
-            readonly caret: "";
-            readonly disabled: {
-                readonly bg: "";
-                readonly border: "";
-                readonly fg: "";
-            };
-            readonly readonly: {
-                readonly bg: "";
-                readonly border: "";
-                readonly fg: "";
-            };
-        };
-        readonly feedback: {
-            readonly success: {
-                readonly bg: "";
-                readonly fg: "";
-            };
-            readonly warning: {
-                readonly bg: "";
-                readonly fg: "";
-            };
-            readonly danger: {
-                readonly bg: "";
-                readonly fg: "";
-            };
-            readonly info: {
-                readonly bg: "";
-                readonly fg: "";
-            };
-        };
-    };
-    readonly typography: {
-        readonly fontFamily: {
-            readonly body: "";
-            readonly heading: "";
-            readonly code: "";
-        };
-        readonly fontSize: {
-            readonly xs: "";
-            readonly sm: "";
-            readonly md: "";
-            readonly lg: "";
-            readonly xl: "";
-            readonly "2xl": "";
-            readonly "3xl": "";
-            readonly "4xl": "";
-        };
-        readonly fontWeight: {
-            readonly regular: "";
-            readonly medium: "";
-            readonly semibold: "";
-            readonly bold: "";
-        };
-        readonly lineHeight: {
-            readonly tight: "";
-            readonly normal: "";
-            readonly relaxed: "";
-        };
-        readonly letterSpacing: {
-            readonly tighter: "";
-            readonly tight: "";
-            readonly normal: "";
-            readonly wide: "";
-            readonly wider: "";
-            readonly widest: "";
-        };
-        readonly text: {
-            readonly display: {
-                readonly fontFamily: "";
-                readonly fontSize: "";
-                readonly fontWeight: "";
-                readonly lineHeight: "";
-                readonly letterSpacing: "";
-            };
-            readonly heading: {
-                readonly lg: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-                readonly md: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-                readonly sm: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-            };
-            readonly body: {
-                readonly lg: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-                readonly md: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-                readonly sm: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-            };
-            readonly label: {
-                readonly md: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-                readonly sm: {
-                    readonly fontFamily: "";
-                    readonly fontSize: "";
-                    readonly fontWeight: "";
-                    readonly lineHeight: "";
-                    readonly letterSpacing: "";
-                };
-            };
-            readonly caption: {
-                readonly fontFamily: "";
-                readonly fontSize: "";
-                readonly fontWeight: "";
-                readonly lineHeight: "";
-                readonly letterSpacing: "";
-            };
-            readonly code: {
-                readonly fontFamily: "";
-                readonly fontSize: "";
-                readonly fontWeight: "";
-                readonly lineHeight: "";
-                readonly letterSpacing: "";
-            };
-        };
-    };
-    readonly spacing: {
-        readonly none: "";
-        readonly "2xs": "";
-        readonly xs: "";
-        readonly sm: "";
-        readonly md: "";
-        readonly lg: "";
-        readonly xl: "";
-        readonly "2xl": "";
-        readonly "3xl": "";
-        readonly "4xl": "";
-    };
-    readonly radius: {
-        readonly none: "";
-        readonly xs: "";
-        readonly sm: "";
-        readonly md: "";
-        readonly lg: "";
-        readonly full: "";
-    };
-    readonly shadow: {
-        readonly none: "";
-        readonly sm: "";
-        readonly md: "";
-        readonly lg: "";
-        readonly focus: "";
-    };
-    readonly zIndex: {
-        readonly base: "";
-        readonly raised: "";
-        readonly sticky: "";
-        readonly overlay: "";
-        readonly modal: "";
-        readonly toast: "";
-    };
-    readonly motion: {
-        readonly duration: {
-            readonly instant: "";
-            readonly fast: "";
-            readonly normal: "";
-            readonly slow: "";
-        };
-        readonly easing: {
-            readonly standard: "";
-            readonly emphasized: "";
-            readonly entrance: "";
-            readonly exit: "";
-        };
-    };
-    readonly breakpoint: {
-        readonly xs: "";
-        readonly sm: "";
-        readonly md: "";
-        readonly lg: "";
-        readonly xl: "";
-    };
-    readonly opacity: {
-        readonly disabled: "";
-        readonly muted: "";
-        readonly overlay: "";
-    };
-    readonly border: {
-        readonly width: {
-            readonly none: "";
-            readonly thin: "";
-            readonly medium: "";
-            readonly thick: "";
-        };
-        readonly style: {
-            readonly solid: "";
-            readonly dashed: "";
-        };
-    };
-    readonly iconSize: {
-        readonly xs: "";
-        readonly sm: "";
-        readonly md: "";
-        readonly lg: "";
-        readonly xl: "";
-    };
-    readonly size: {
-        readonly control: {
-            readonly sm: "";
-            readonly md: "";
-            readonly lg: "";
-        };
-        readonly iconButton: {
-            readonly sm: "";
-            readonly md: "";
-            readonly lg: "";
-        };
-    };
-    readonly padding: {
-        readonly control: {
-            readonly x: {
-                readonly sm: "";
-                readonly md: "";
-                readonly lg: "";
-            };
-            readonly y: {
-                readonly sm: "";
-                readonly md: "";
-                readonly lg: "";
-            };
-        };
-        readonly page: {
-            readonly xMobile: "";
-            readonly xDesktop: "";
-        };
-    };
-    readonly gap: {
-        readonly inline: {
-            readonly sm: "";
-            readonly md: "";
-            readonly lg: "";
-        };
-        readonly stack: {
-            readonly sm: "";
-            readonly md: "";
-            readonly lg: "";
-        };
-        readonly section: {
-            readonly sm: "";
-            readonly md: "";
-            readonly lg: "";
-        };
-    };
-    readonly layout: {
-        readonly container: {
-            readonly sm: "";
-            readonly md: "";
-            readonly lg: "";
-            readonly xl: "";
-        };
-        readonly gutter: {
-            readonly mobile: "";
-            readonly desktop: "";
-        };
-        readonly sidebar: {
-            readonly width: "";
-            readonly collapsedWidth: "";
-        };
-    };
-};
-
-type PrimitiveTokens = typeof primitiveTokens;
-type PrimitiveTokenVars = TokenShape<PrimitiveTokens>;
-type SemanticTokens = TokenShape<typeof semanticContract>;
-type SemanticTokenOverrides = DeepPartial<SemanticTokens>;
-type ThemeTokens = SemanticTokens;
-type ThemeTokenOverrides = SemanticTokenOverrides;
-type TokenShape<TValue> = TValue extends string ? string : {
-    [TKey in keyof TValue]: TokenShape<TValue[TKey]>;
-};
-type DeepPartial<TValue> = TValue extends string ? TValue : {
-    [TKey in keyof TValue]?: DeepPartial<TValue[TKey]>;
-};
+import { P as PrimitiveTokenVars, S as SemanticTokens, a as SemanticTokenOverrides } from './cssVars-edTn7tOU.js';
+export { C as CreateCssThemeOptions, b as CssThemeDefinition, c as PrimitiveTokens, T as ThemeTokenOverrides, d as ThemeTokens, e as createCssTheme, f as createCssThemeRule, g as createCssThemeTokens, h as createDefaultCssThemes, i as cssVarPrefix, j as cssVars, k as defaultResolvedCssTokens, l as defaultResolvedDarkCssTokens, m as defaultResolvedLightCssTokens, n as getCssVarName, p as primitiveTokens, s as semanticContract } from './cssVars-edTn7tOU.js';
 
 declare const primitiveVars: PrimitiveTokenVars;
 
@@ -686,6 +14,8 @@ type ThemeName = (typeof themeNames)[keyof typeof themeNames];
 declare const themeAttribute = "data-theme";
 declare function getThemeSelector(name: string): string;
 
+declare function createThemeTokens(base: SemanticTokens, overrides?: SemanticTokenOverrides): SemanticTokens;
+
 type ThemeDefinition = {
     readonly attributes: {
         readonly "data-theme": string;
@@ -701,7 +31,6 @@ type CreateThemeOptions = {
     readonly tokens?: SemanticTokens;
 };
 declare function createTheme(options: CreateThemeOptions): ThemeDefinition;
-declare function createThemeTokens(base: SemanticTokens, overrides?: SemanticTokenOverrides): SemanticTokens;
 
 declare const defaultLightTheme: ThemeDefinition;
 declare const defaultDarkTheme: ThemeDefinition;
@@ -1503,6 +832,7 @@ declare const defaultDarkSemanticTokenReferences: {
         };
     };
 };
+
 declare const defaultLightSemanticTokens: SemanticTokens;
 declare const defaultDarkSemanticTokens: SemanticTokens;
 declare const defaultSemanticTokenReferences: {
@@ -6671,4 +6001,4 @@ declare const defaultTokenReferences: {
     };
 };
 
-export { type CreateThemeOptions, type PrimitiveTokens, type SemanticTokenOverrides, type SemanticTokens, type ThemeDefinition, type ThemeName, type ThemeTokenOverrides, type ThemeTokens, createTheme, createThemeTokens, defaultDarkSemanticTokenReferences, defaultDarkSemanticTokens, defaultDarkTheme, defaultDarkThemeClass, defaultDarkTokenReferences, defaultDarkTokens, defaultLightSemanticTokenReferences, defaultLightSemanticTokens, defaultLightTheme, defaultLightThemeClass, defaultLightTokenReferences, defaultLightTokens, defaultResolvedDarkSemanticTokens, defaultResolvedLightSemanticTokens, defaultResolvedSemanticTokens, defaultSemanticTokenReferences, defaultSemanticTokens, defaultThemeClass, defaultTokenReferences, defaultTokens, getThemeSelector, primitiveTokens, primitiveVars, semanticContract, semanticVars, themeAttribute, themeNames, vars };
+export { type CreateThemeOptions, SemanticTokenOverrides, SemanticTokens, type ThemeDefinition, type ThemeName, createTheme, createThemeTokens, defaultDarkSemanticTokenReferences, defaultDarkSemanticTokens, defaultDarkTheme, defaultDarkThemeClass, defaultDarkTokenReferences, defaultDarkTokens, defaultLightSemanticTokenReferences, defaultLightSemanticTokens, defaultLightTheme, defaultLightThemeClass, defaultLightTokenReferences, defaultLightTokens, defaultResolvedDarkSemanticTokens, defaultResolvedLightSemanticTokens, defaultResolvedSemanticTokens, defaultSemanticTokenReferences, defaultSemanticTokens, defaultThemeClass, defaultTokenReferences, defaultTokens, getThemeSelector, primitiveVars, semanticVars, themeAttribute, themeNames, vars };