@elvora/tokens 1.0.0-rc.1

package/dist/index.d.cts

@@ -0,0 +1,406 @@
+/**
+ * Color tokens — a 10-step ramp per hue (50 → 900), inspired by Tailwind / AntD.
+ * Semantic tokens (background, foreground, border, brand, status) consume these.
+ *
+ * Each ramp is hand-tuned for WCAG 2.2 AA contrast at step 600 against white
+ * and step 300 against black. Do not edit step values without re-checking contrast.
+ */
+type ColorRamp = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};
+declare const slate: ColorRamp;
+declare const blue: ColorRamp;
+declare const green: ColorRamp;
+declare const amber: ColorRamp;
+declare const red: ColorRamp;
+declare const violet: ColorRamp;
+declare const colors: {
+    readonly slate: ColorRamp;
+    readonly blue: ColorRamp;
+    readonly green: ColorRamp;
+    readonly amber: ColorRamp;
+    readonly red: ColorRamp;
+    readonly violet: ColorRamp;
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly transparent: "transparent";
+};
+type Colors = typeof colors;
+
+/**
+ * Spacing scale based on a 4px base unit. Used for padding, margin, gap.
+ * Numeric keys (0, 1, 2…) map to multiples of the base; named keys are aliases.
+ */
+declare const spacing: {
+    readonly 0: "0px";
+    readonly px: "1px";
+    readonly 0.5: "2px";
+    readonly 1: "4px";
+    readonly 1.5: "6px";
+    readonly 2: "8px";
+    readonly 2.5: "10px";
+    readonly 3: "12px";
+    readonly 3.5: "14px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 7: "28px";
+    readonly 8: "32px";
+    readonly 9: "36px";
+    readonly 10: "40px";
+    readonly 11: "44px";
+    readonly 12: "48px";
+    readonly 14: "56px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+    readonly 28: "112px";
+    readonly 32: "128px";
+};
+type Spacing = typeof spacing;
+type SpacingKey = keyof Spacing;
+
+/**
+ * Typography tokens — font families, sizes, weights, line heights, letter spacing.
+ * Sizes follow a 1.125 (major second) modular scale.
+ */
+declare const fontFamilies: {
+    readonly sans: "\"Inter\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif";
+    readonly serif: "Georgia, \"Times New Roman\", Times, serif";
+    readonly mono: "\"JetBrains Mono\", \"Fira Code\", \"SF Mono\", Menlo, Consolas, monospace";
+};
+declare const fontSizes: {
+    readonly xs: "12px";
+    readonly sm: "14px";
+    readonly base: "16px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly xl: "20px";
+    readonly '2xl': "24px";
+    readonly '3xl': "30px";
+    readonly '4xl': "36px";
+    readonly '5xl': "48px";
+    readonly '6xl': "60px";
+};
+declare const fontWeights: {
+    readonly thin: 100;
+    readonly extralight: 200;
+    readonly light: 300;
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+    readonly extrabold: 800;
+    readonly black: 900;
+};
+declare const lineHeights: {
+    readonly none: 1;
+    readonly tight: 1.2;
+    readonly snug: 1.35;
+    readonly normal: 1.5;
+    readonly relaxed: 1.625;
+    readonly loose: 2;
+};
+declare const letterSpacings: {
+    readonly tighter: "-0.04em";
+    readonly tight: "-0.02em";
+    readonly normal: "0em";
+    readonly wide: "0.02em";
+    readonly wider: "0.04em";
+    readonly widest: "0.08em";
+};
+declare const typography: {
+    readonly fontFamilies: {
+        readonly sans: "\"Inter\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif";
+        readonly serif: "Georgia, \"Times New Roman\", Times, serif";
+        readonly mono: "\"JetBrains Mono\", \"Fira Code\", \"SF Mono\", Menlo, Consolas, monospace";
+    };
+    readonly fontSizes: {
+        readonly xs: "12px";
+        readonly sm: "14px";
+        readonly base: "16px";
+        readonly md: "16px";
+        readonly lg: "18px";
+        readonly xl: "20px";
+        readonly '2xl': "24px";
+        readonly '3xl': "30px";
+        readonly '4xl': "36px";
+        readonly '5xl': "48px";
+        readonly '6xl': "60px";
+    };
+    readonly fontWeights: {
+        readonly thin: 100;
+        readonly extralight: 200;
+        readonly light: 300;
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly extrabold: 800;
+        readonly black: 900;
+    };
+    readonly lineHeights: {
+        readonly none: 1;
+        readonly tight: 1.2;
+        readonly snug: 1.35;
+        readonly normal: 1.5;
+        readonly relaxed: 1.625;
+        readonly loose: 2;
+    };
+    readonly letterSpacings: {
+        readonly tighter: "-0.04em";
+        readonly tight: "-0.02em";
+        readonly normal: "0em";
+        readonly wide: "0.02em";
+        readonly wider: "0.04em";
+        readonly widest: "0.08em";
+    };
+};
+type Typography = typeof typography;
+
+declare const radii: {
+    readonly none: "0";
+    readonly xs: "2px";
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly '2xl': "16px";
+    readonly '3xl': "24px";
+    readonly full: "9999px";
+};
+type Radii = typeof radii;
+
+declare const shadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgba(15, 23, 42, 0.05)";
+    readonly sm: "0 1px 3px 0 rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.10)";
+    readonly md: "0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.10)";
+    readonly lg: "0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.10)";
+    readonly xl: "0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.10)";
+    readonly '2xl': "0 25px 50px -12px rgba(15, 23, 42, 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgba(15, 23, 42, 0.06)";
+    readonly focus: "0 0 0 3px rgba(59, 130, 246, 0.45)";
+};
+type Shadows = typeof shadows;
+
+declare const durations: {
+    readonly instant: "0ms";
+    readonly fast: "120ms";
+    readonly normal: "200ms";
+    readonly slow: "320ms";
+    readonly slower: "500ms";
+};
+declare const easings: {
+    readonly linear: "linear";
+    readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+    readonly emphasized: "cubic-bezier(0.3, 0, 0, 1)";
+    readonly decelerate: "cubic-bezier(0, 0, 0, 1)";
+    readonly accelerate: "cubic-bezier(0.3, 0, 1, 1)";
+};
+declare const motion: {
+    readonly durations: {
+        readonly instant: "0ms";
+        readonly fast: "120ms";
+        readonly normal: "200ms";
+        readonly slow: "320ms";
+        readonly slower: "500ms";
+    };
+    readonly easings: {
+        readonly linear: "linear";
+        readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+        readonly emphasized: "cubic-bezier(0.3, 0, 0, 1)";
+        readonly decelerate: "cubic-bezier(0, 0, 0, 1)";
+        readonly accelerate: "cubic-bezier(0.3, 0, 1, 1)";
+    };
+};
+type Motion = typeof motion;
+
+/**
+ * Z-index layering — keep these few and explicit. Components reach for tokens,
+ * never magic numbers, to keep stacking predictable.
+ */
+declare const zIndex: {
+    readonly hide: -1;
+    readonly base: 0;
+    readonly raised: 1;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly banner: 1200;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly popover: 1500;
+    readonly toast: 1600;
+    readonly tooltip: 1700;
+    readonly max: 2147483647;
+};
+type ZIndex = typeof zIndex;
+
+declare const breakpoints: {
+    readonly xs: "0px";
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+};
+type Breakpoints = typeof breakpoints;
+
+declare const tokens: {
+    readonly colors: {
+        readonly slate: ColorRamp;
+        readonly blue: ColorRamp;
+        readonly green: ColorRamp;
+        readonly amber: ColorRamp;
+        readonly red: ColorRamp;
+        readonly violet: ColorRamp;
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly transparent: "transparent";
+    };
+    readonly spacing: {
+        readonly 0: "0px";
+        readonly px: "1px";
+        readonly 0.5: "2px";
+        readonly 1: "4px";
+        readonly 1.5: "6px";
+        readonly 2: "8px";
+        readonly 2.5: "10px";
+        readonly 3: "12px";
+        readonly 3.5: "14px";
+        readonly 4: "16px";
+        readonly 5: "20px";
+        readonly 6: "24px";
+        readonly 7: "28px";
+        readonly 8: "32px";
+        readonly 9: "36px";
+        readonly 10: "40px";
+        readonly 11: "44px";
+        readonly 12: "48px";
+        readonly 14: "56px";
+        readonly 16: "64px";
+        readonly 20: "80px";
+        readonly 24: "96px";
+        readonly 28: "112px";
+        readonly 32: "128px";
+    };
+    readonly typography: {
+        readonly fontFamilies: {
+            readonly sans: "\"Inter\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif";
+            readonly serif: "Georgia, \"Times New Roman\", Times, serif";
+            readonly mono: "\"JetBrains Mono\", \"Fira Code\", \"SF Mono\", Menlo, Consolas, monospace";
+        };
+        readonly fontSizes: {
+            readonly xs: "12px";
+            readonly sm: "14px";
+            readonly base: "16px";
+            readonly md: "16px";
+            readonly lg: "18px";
+            readonly xl: "20px";
+            readonly '2xl': "24px";
+            readonly '3xl': "30px";
+            readonly '4xl': "36px";
+            readonly '5xl': "48px";
+            readonly '6xl': "60px";
+        };
+        readonly fontWeights: {
+            readonly thin: 100;
+            readonly extralight: 200;
+            readonly light: 300;
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+            readonly extrabold: 800;
+            readonly black: 900;
+        };
+        readonly lineHeights: {
+            readonly none: 1;
+            readonly tight: 1.2;
+            readonly snug: 1.35;
+            readonly normal: 1.5;
+            readonly relaxed: 1.625;
+            readonly loose: 2;
+        };
+        readonly letterSpacings: {
+            readonly tighter: "-0.04em";
+            readonly tight: "-0.02em";
+            readonly normal: "0em";
+            readonly wide: "0.02em";
+            readonly wider: "0.04em";
+            readonly widest: "0.08em";
+        };
+    };
+    readonly radii: {
+        readonly none: "0";
+        readonly xs: "2px";
+        readonly sm: "4px";
+        readonly md: "6px";
+        readonly lg: "8px";
+        readonly xl: "12px";
+        readonly '2xl': "16px";
+        readonly '3xl': "24px";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly xs: "0 1px 2px 0 rgba(15, 23, 42, 0.05)";
+        readonly sm: "0 1px 3px 0 rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.10)";
+        readonly md: "0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.10)";
+        readonly lg: "0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.10)";
+        readonly xl: "0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.10)";
+        readonly '2xl': "0 25px 50px -12px rgba(15, 23, 42, 0.25)";
+        readonly inner: "inset 0 2px 4px 0 rgba(15, 23, 42, 0.06)";
+        readonly focus: "0 0 0 3px rgba(59, 130, 246, 0.45)";
+    };
+    readonly motion: {
+        readonly durations: {
+            readonly instant: "0ms";
+            readonly fast: "120ms";
+            readonly normal: "200ms";
+            readonly slow: "320ms";
+            readonly slower: "500ms";
+        };
+        readonly easings: {
+            readonly linear: "linear";
+            readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+            readonly emphasized: "cubic-bezier(0.3, 0, 0, 1)";
+            readonly decelerate: "cubic-bezier(0, 0, 0, 1)";
+            readonly accelerate: "cubic-bezier(0.3, 0, 1, 1)";
+        };
+    };
+    readonly zIndex: {
+        readonly hide: -1;
+        readonly base: 0;
+        readonly raised: 1;
+        readonly dropdown: 1000;
+        readonly sticky: 1100;
+        readonly banner: 1200;
+        readonly overlay: 1300;
+        readonly modal: 1400;
+        readonly popover: 1500;
+        readonly toast: 1600;
+        readonly tooltip: 1700;
+        readonly max: 2147483647;
+    };
+    readonly breakpoints: {
+        readonly xs: "0px";
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly '2xl': "1536px";
+    };
+};
+type Tokens = typeof tokens;
+
+export { type Breakpoints, type ColorRamp, type Colors, type Motion, type Radii, type Shadows, type Spacing, type SpacingKey, type Tokens, type Typography, type ZIndex, amber, blue, breakpoints, colors, durations, easings, fontFamilies, fontSizes, fontWeights, green, letterSpacings, lineHeights, motion, radii, red, shadows, slate, spacing, tokens, typography, violet, zIndex };