@geomak/ui 1.4.0 → 1.5.0

package/dist/index-CvyV3YPI.d.cts

@@ -0,0 +1,293 @@
+/**
+ * Oxygen design-system colour palette.
+ * Duplicated here so the published package is fully self-contained.
+ */
+declare const PALETTE: {
+    readonly 'true-blue': "#0466C8";
+    readonly 'usafa-blue': "#0353A4";
+    readonly 'dark-cornflower-blue': "#023E7D";
+    readonly 'oxford-blue-700': "#002855";
+    readonly 'oxford-blue-800': "#001845";
+    readonly 'oxford-blue-900': "#001233";
+    readonly independence: "#33415C";
+    readonly 'black-coral': "#5C677D";
+    readonly 'roman-silver': "#7D8597";
+    readonly manatee: "#979DAC";
+    readonly white: "#fff";
+    readonly ice: "#DBF1FD";
+    readonly 'ice-dark': "#d0e3ed";
+    readonly 'midnight-green-eagle-900': "#013E53";
+    readonly 'midnight-green-eagle-700': "#125F6C";
+    readonly 'midnight-green-eagle-500': "#125F6C";
+    readonly 'rich-black-fogra': "#000202";
+    readonly 'rich-black-fogra-opaque': "#0000005b";
+    readonly 'prussian-blue': "#00273A";
+    readonly 'indigo-dye': "#013C54";
+    readonly ming: "#0F6372";
+    readonly skobeloff: "#217479";
+    readonly 'dark-cyan': "#2A8784";
+    readonly 'celadon-green': "#297E74";
+    readonly turquise: "#2EB8B0";
+    readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
+    readonly disabled: "#dee2e6";
+    readonly error: "tomato";
+    readonly warning: "orange";
+    readonly success: "lightgreen";
+    readonly info: "lightblue";
+    readonly transparent: "rgba(255, 255, 255, .0)";
+};
+declare const COLORS: {
+    PALETTE: {
+        readonly 'true-blue': "#0466C8";
+        readonly 'usafa-blue': "#0353A4";
+        readonly 'dark-cornflower-blue': "#023E7D";
+        readonly 'oxford-blue-700': "#002855";
+        readonly 'oxford-blue-800': "#001845";
+        readonly 'oxford-blue-900': "#001233";
+        readonly independence: "#33415C";
+        readonly 'black-coral': "#5C677D";
+        readonly 'roman-silver': "#7D8597";
+        readonly manatee: "#979DAC";
+        readonly white: "#fff";
+        readonly ice: "#DBF1FD";
+        readonly 'ice-dark': "#d0e3ed";
+        readonly 'midnight-green-eagle-900': "#013E53";
+        readonly 'midnight-green-eagle-700': "#125F6C";
+        readonly 'midnight-green-eagle-500': "#125F6C";
+        readonly 'rich-black-fogra': "#000202";
+        readonly 'rich-black-fogra-opaque': "#0000005b";
+        readonly 'prussian-blue': "#00273A";
+        readonly 'indigo-dye': "#013C54";
+        readonly ming: "#0F6372";
+        readonly skobeloff: "#217479";
+        readonly 'dark-cyan': "#2A8784";
+        readonly 'celadon-green': "#297E74";
+        readonly turquise: "#2EB8B0";
+        readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
+        readonly disabled: "#dee2e6";
+        readonly error: "tomato";
+        readonly warning: "orange";
+        readonly success: "lightgreen";
+        readonly info: "lightblue";
+        readonly transparent: "rgba(255, 255, 255, .0)";
+    };
+};
+
+/**
+ * @geomak/ui — Design Tokens
+ *
+ * Three layers, each useful in a different context:
+ *
+ *  1. `palette`        — raw brand hex values from palette.json
+ *  2. `semanticTokens` — resolved hex / px values keyed by light / dark / shared
+ *  3. `vars`           — CSS custom-property reference strings for inline styles / CSS-in-JS
+ *
+ * CSS custom properties are injected by: import '@geomak/ui/styles'
+ * Tailwind utilities map to these vars via the bundled tailwind preset.
+ */
+
+/**
+ * Resolved token values for every semantic role.
+ * Use when CSS custom properties aren't available (canvas, email, SSR snapshots).
+ */
+declare const semanticTokens: {
+    readonly light: {
+        readonly background: "#eef4fa";
+        readonly surface: "#ffffff";
+        readonly 'surface-raised': "#ffffff";
+        readonly border: "#d3dde8";
+        readonly 'border-strong': "#8898aa";
+        readonly foreground: "#0a1929";
+        readonly 'foreground-secondary': "#2e4057";
+        readonly 'foreground-muted': "#536878";
+        readonly accent: "#0466C8";
+        readonly 'accent-hover': "#0353A4";
+        readonly 'accent-foreground': "#ffffff";
+        readonly error: "#c0392b";
+        readonly warning: "#d68910";
+        readonly success: "#1e8449";
+        readonly info: "#1565c0";
+    };
+    readonly dark: {
+        readonly background: "#060f1a";
+        readonly surface: "#0d1f30";
+        readonly 'surface-raised': "#152638";
+        readonly border: "#1e3348";
+        readonly 'border-strong': "#2e4a64";
+        readonly foreground: "#e8f0f8";
+        readonly 'foreground-secondary': "#9ab0c4";
+        readonly 'foreground-muted': "#5c7a92";
+        readonly accent: "#2d88ff";
+        readonly 'accent-hover': "#4d9aff";
+        readonly 'accent-foreground': "#ffffff";
+        readonly error: "#ff6b6b";
+        readonly warning: "#ffb347";
+        readonly success: "#5cb85c";
+        readonly info: "#5bc0de";
+    };
+    readonly shared: {
+        readonly 'radius-sm': "2px";
+        readonly 'radius-md': "5px";
+        readonly 'radius-lg': "7px";
+        readonly 'radius-xl': "10px";
+        readonly 'radius-2xl': "12px";
+        readonly 'radius-full': "9999px";
+        readonly 'font-size-xs': "0.75rem";
+        readonly 'font-size-sm': "0.875rem";
+        readonly 'font-size-base': "1rem";
+        readonly 'font-size-lg': "1.125rem";
+        readonly 'font-size-xl': "1.25rem";
+        readonly 'font-size-2xl': "1.5rem";
+        readonly 'font-size-3xl': "1.875rem";
+        readonly 'font-weight-normal': 400;
+        readonly 'font-weight-medium': 500;
+        readonly 'font-weight-semibold': 600;
+        readonly 'font-weight-bold': 700;
+        readonly 'line-height-tight': 1.25;
+        readonly 'line-height-snug': 1.375;
+        readonly 'line-height-normal': 1.5;
+        readonly 'line-height-relaxed': 1.625;
+        readonly 'letter-spacing-tight': "-0.025em";
+        readonly 'letter-spacing-normal': "0em";
+        readonly 'letter-spacing-wide': "0.025em";
+        readonly 'height-control-xs': "24px";
+        readonly 'height-control-sm': "28px";
+        readonly 'height-control-md': "36px";
+        readonly 'height-control-lg': "44px";
+        readonly 'height-topbar': "56px";
+        readonly 'sidebar-expanded': "220px";
+        readonly 'sidebar-collapsed': "52px";
+        readonly 'duration-instant': "50ms";
+        readonly 'duration-fast': "80ms";
+        readonly 'duration-normal': "150ms";
+        readonly 'duration-slow': "220ms";
+        readonly 'duration-gentle': "350ms";
+        readonly 'ease-out-expo': "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly 'ease-out-quart': "cubic-bezier(0.25, 1, 0.5, 1)";
+        readonly 'ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+        readonly 'ease-in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly 'ease-in': "cubic-bezier(0.4, 0, 1, 1)";
+        readonly 'z-base': 0;
+        readonly 'z-raised': 10;
+        readonly 'z-dropdown': 100;
+        readonly 'z-sticky': 150;
+        readonly 'z-topbar': 200;
+        readonly 'z-overlay': 300;
+        readonly 'z-modal': 400;
+        readonly 'z-toast': 500;
+        readonly 'z-tooltip': 600;
+    };
+};
+type SemanticColorKey = keyof typeof semanticTokens.light;
+type SemanticSharedKey = keyof typeof semanticTokens.shared;
+/**
+ * CSS custom-property reference strings.
+ * Use in inline styles or CSS-in-JS — values respond to light/dark automatically.
+ *
+ * @example
+ * // Inline style
+ * <div style={{ color: vars.color.foreground }}>...</div>
+ *
+ * @example
+ * // Emotion / styled-components
+ * const Card = styled.div`
+ *   background: ${vars.color.surface};
+ *   border-radius: ${vars.radius.lg};
+ *   box-shadow: ${vars.shadow.md};
+ * `
+ */
+declare const vars: {
+    readonly color: {
+        readonly background: "var(--color-background)";
+        readonly surface: "var(--color-surface)";
+        readonly surfaceRaised: "var(--color-surface-raised)";
+        readonly border: "var(--color-border)";
+        readonly borderStrong: "var(--color-border-strong)";
+        readonly foreground: "var(--color-foreground)";
+        readonly foregroundSecondary: "var(--color-foreground-secondary)";
+        readonly foregroundMuted: "var(--color-foreground-muted)";
+        readonly accent: "var(--color-accent)";
+        readonly accentHover: "var(--color-accent-hover)";
+        readonly accentForeground: "var(--color-accent-foreground)";
+        readonly error: "var(--color-error)";
+        readonly warning: "var(--color-warning)";
+        readonly success: "var(--color-success)";
+        readonly info: "var(--color-info)";
+    };
+    readonly radius: {
+        readonly sm: "var(--radius-sm)";
+        readonly md: "var(--radius-md)";
+        readonly lg: "var(--radius-lg)";
+        readonly xl: "var(--radius-xl)";
+        readonly '2xl': "var(--radius-2xl)";
+        readonly full: "var(--radius-full)";
+    };
+    readonly shadow: {
+        readonly sm: "var(--shadow-sm)";
+        readonly md: "var(--shadow-md)";
+        readonly lg: "var(--shadow-lg)";
+        readonly xl: "var(--shadow-xl)";
+    };
+    readonly typography: {
+        readonly fontFamily: "var(--font-family-sans)";
+        readonly fontSizeXs: "var(--font-size-xs)";
+        readonly fontSizeSm: "var(--font-size-sm)";
+        readonly fontSizeBase: "var(--font-size-base)";
+        readonly fontSizeLg: "var(--font-size-lg)";
+        readonly fontSizeXl: "var(--font-size-xl)";
+        readonly fontSize2xl: "var(--font-size-2xl)";
+        readonly fontSize3xl: "var(--font-size-3xl)";
+        readonly fontWeightNormal: "var(--font-weight-normal)";
+        readonly fontWeightMedium: "var(--font-weight-medium)";
+        readonly fontWeightSemibold: "var(--font-weight-semibold)";
+        readonly fontWeightBold: "var(--font-weight-bold)";
+        readonly lineHeightTight: "var(--line-height-tight)";
+        readonly lineHeightSnug: "var(--line-height-snug)";
+        readonly lineHeightNormal: "var(--line-height-normal)";
+        readonly lineHeightRelaxed: "var(--line-height-relaxed)";
+        readonly letterSpacingTight: "var(--letter-spacing-tight)";
+        readonly letterSpacingNormal: "var(--letter-spacing-normal)";
+        readonly letterSpacingWide: "var(--letter-spacing-wide)";
+    };
+    readonly density: {
+        readonly controlXs: "var(--height-control-xs)";
+        readonly controlSm: "var(--height-control-sm)";
+        readonly controlMd: "var(--height-control-md)";
+        readonly controlLg: "var(--height-control-lg)";
+        readonly topbar: "var(--height-topbar)";
+        readonly sidebarExpanded: "var(--sidebar-expanded)";
+        readonly sidebarCollapsed: "var(--sidebar-collapsed)";
+    };
+    readonly motion: {
+        readonly durationInstant: "var(--duration-instant)";
+        readonly durationFast: "var(--duration-fast)";
+        readonly durationNormal: "var(--duration-normal)";
+        readonly durationSlow: "var(--duration-slow)";
+        readonly durationGentle: "var(--duration-gentle)";
+        readonly easeOutExpo: "var(--ease-out-expo)";
+        readonly easeOutQuart: "var(--ease-out-quart)";
+        readonly easeOutCubic: "var(--ease-out-cubic)";
+        readonly easeInOut: "var(--ease-in-out)";
+        readonly easeIn: "var(--ease-in)";
+    };
+    readonly zIndex: {
+        readonly base: "var(--z-base)";
+        readonly raised: "var(--z-raised)";
+        readonly dropdown: "var(--z-dropdown)";
+        readonly sticky: "var(--z-sticky)";
+        readonly topbar: "var(--z-topbar)";
+        readonly overlay: "var(--z-overlay)";
+        readonly modal: "var(--z-modal)";
+        readonly toast: "var(--z-toast)";
+        readonly tooltip: "var(--z-tooltip)";
+    };
+};
+type VarColorKey = keyof typeof vars.color;
+type VarRadiusKey = keyof typeof vars.radius;
+type VarShadowKey = keyof typeof vars.shadow;
+type VarTypoKey = keyof typeof vars.typography;
+type VarDensityKey = keyof typeof vars.density;
+type VarMotionKey = keyof typeof vars.motion;
+type VarZIndexKey = keyof typeof vars.zIndex;
+
+export { COLORS as C, PALETTE as P, type SemanticColorKey as S, type VarColorKey as V, type SemanticSharedKey as a, type VarDensityKey as b, type VarMotionKey as c, type VarRadiusKey as d, type VarShadowKey as e, type VarTypoKey as f, type VarZIndexKey as g, semanticTokens as s, vars as v };

package/dist/index-CvyV3YPI.d.ts

@@ -0,0 +1,293 @@
+/**
+ * Oxygen design-system colour palette.
+ * Duplicated here so the published package is fully self-contained.
+ */
+declare const PALETTE: {
+    readonly 'true-blue': "#0466C8";
+    readonly 'usafa-blue': "#0353A4";
+    readonly 'dark-cornflower-blue': "#023E7D";
+    readonly 'oxford-blue-700': "#002855";
+    readonly 'oxford-blue-800': "#001845";
+    readonly 'oxford-blue-900': "#001233";
+    readonly independence: "#33415C";
+    readonly 'black-coral': "#5C677D";
+    readonly 'roman-silver': "#7D8597";
+    readonly manatee: "#979DAC";
+    readonly white: "#fff";
+    readonly ice: "#DBF1FD";
+    readonly 'ice-dark': "#d0e3ed";
+    readonly 'midnight-green-eagle-900': "#013E53";
+    readonly 'midnight-green-eagle-700': "#125F6C";
+    readonly 'midnight-green-eagle-500': "#125F6C";
+    readonly 'rich-black-fogra': "#000202";
+    readonly 'rich-black-fogra-opaque': "#0000005b";
+    readonly 'prussian-blue': "#00273A";
+    readonly 'indigo-dye': "#013C54";
+    readonly ming: "#0F6372";
+    readonly skobeloff: "#217479";
+    readonly 'dark-cyan': "#2A8784";
+    readonly 'celadon-green': "#297E74";
+    readonly turquise: "#2EB8B0";
+    readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
+    readonly disabled: "#dee2e6";
+    readonly error: "tomato";
+    readonly warning: "orange";
+    readonly success: "lightgreen";
+    readonly info: "lightblue";
+    readonly transparent: "rgba(255, 255, 255, .0)";
+};
+declare const COLORS: {
+    PALETTE: {
+        readonly 'true-blue': "#0466C8";
+        readonly 'usafa-blue': "#0353A4";
+        readonly 'dark-cornflower-blue': "#023E7D";
+        readonly 'oxford-blue-700': "#002855";
+        readonly 'oxford-blue-800': "#001845";
+        readonly 'oxford-blue-900': "#001233";
+        readonly independence: "#33415C";
+        readonly 'black-coral': "#5C677D";
+        readonly 'roman-silver': "#7D8597";
+        readonly manatee: "#979DAC";
+        readonly white: "#fff";
+        readonly ice: "#DBF1FD";
+        readonly 'ice-dark': "#d0e3ed";
+        readonly 'midnight-green-eagle-900': "#013E53";
+        readonly 'midnight-green-eagle-700': "#125F6C";
+        readonly 'midnight-green-eagle-500': "#125F6C";
+        readonly 'rich-black-fogra': "#000202";
+        readonly 'rich-black-fogra-opaque': "#0000005b";
+        readonly 'prussian-blue': "#00273A";
+        readonly 'indigo-dye': "#013C54";
+        readonly ming: "#0F6372";
+        readonly skobeloff: "#217479";
+        readonly 'dark-cyan': "#2A8784";
+        readonly 'celadon-green': "#297E74";
+        readonly turquise: "#2EB8B0";
+        readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
+        readonly disabled: "#dee2e6";
+        readonly error: "tomato";
+        readonly warning: "orange";
+        readonly success: "lightgreen";
+        readonly info: "lightblue";
+        readonly transparent: "rgba(255, 255, 255, .0)";
+    };
+};
+
+/**
+ * @geomak/ui — Design Tokens
+ *
+ * Three layers, each useful in a different context:
+ *
+ *  1. `palette`        — raw brand hex values from palette.json
+ *  2. `semanticTokens` — resolved hex / px values keyed by light / dark / shared
+ *  3. `vars`           — CSS custom-property reference strings for inline styles / CSS-in-JS
+ *
+ * CSS custom properties are injected by: import '@geomak/ui/styles'
+ * Tailwind utilities map to these vars via the bundled tailwind preset.
+ */
+
+/**
+ * Resolved token values for every semantic role.
+ * Use when CSS custom properties aren't available (canvas, email, SSR snapshots).
+ */
+declare const semanticTokens: {
+    readonly light: {
+        readonly background: "#eef4fa";
+        readonly surface: "#ffffff";
+        readonly 'surface-raised': "#ffffff";
+        readonly border: "#d3dde8";
+        readonly 'border-strong': "#8898aa";
+        readonly foreground: "#0a1929";
+        readonly 'foreground-secondary': "#2e4057";
+        readonly 'foreground-muted': "#536878";
+        readonly accent: "#0466C8";
+        readonly 'accent-hover': "#0353A4";
+        readonly 'accent-foreground': "#ffffff";
+        readonly error: "#c0392b";
+        readonly warning: "#d68910";
+        readonly success: "#1e8449";
+        readonly info: "#1565c0";
+    };
+    readonly dark: {
+        readonly background: "#060f1a";
+        readonly surface: "#0d1f30";
+        readonly 'surface-raised': "#152638";
+        readonly border: "#1e3348";
+        readonly 'border-strong': "#2e4a64";
+        readonly foreground: "#e8f0f8";
+        readonly 'foreground-secondary': "#9ab0c4";
+        readonly 'foreground-muted': "#5c7a92";
+        readonly accent: "#2d88ff";
+        readonly 'accent-hover': "#4d9aff";
+        readonly 'accent-foreground': "#ffffff";
+        readonly error: "#ff6b6b";
+        readonly warning: "#ffb347";
+        readonly success: "#5cb85c";
+        readonly info: "#5bc0de";
+    };
+    readonly shared: {
+        readonly 'radius-sm': "2px";
+        readonly 'radius-md': "5px";
+        readonly 'radius-lg': "7px";
+        readonly 'radius-xl': "10px";
+        readonly 'radius-2xl': "12px";
+        readonly 'radius-full': "9999px";
+        readonly 'font-size-xs': "0.75rem";
+        readonly 'font-size-sm': "0.875rem";
+        readonly 'font-size-base': "1rem";
+        readonly 'font-size-lg': "1.125rem";
+        readonly 'font-size-xl': "1.25rem";
+        readonly 'font-size-2xl': "1.5rem";
+        readonly 'font-size-3xl': "1.875rem";
+        readonly 'font-weight-normal': 400;
+        readonly 'font-weight-medium': 500;
+        readonly 'font-weight-semibold': 600;
+        readonly 'font-weight-bold': 700;
+        readonly 'line-height-tight': 1.25;
+        readonly 'line-height-snug': 1.375;
+        readonly 'line-height-normal': 1.5;
+        readonly 'line-height-relaxed': 1.625;
+        readonly 'letter-spacing-tight': "-0.025em";
+        readonly 'letter-spacing-normal': "0em";
+        readonly 'letter-spacing-wide': "0.025em";
+        readonly 'height-control-xs': "24px";
+        readonly 'height-control-sm': "28px";
+        readonly 'height-control-md': "36px";
+        readonly 'height-control-lg': "44px";
+        readonly 'height-topbar': "56px";
+        readonly 'sidebar-expanded': "220px";
+        readonly 'sidebar-collapsed': "52px";
+        readonly 'duration-instant': "50ms";
+        readonly 'duration-fast': "80ms";
+        readonly 'duration-normal': "150ms";
+        readonly 'duration-slow': "220ms";
+        readonly 'duration-gentle': "350ms";
+        readonly 'ease-out-expo': "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly 'ease-out-quart': "cubic-bezier(0.25, 1, 0.5, 1)";
+        readonly 'ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+        readonly 'ease-in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly 'ease-in': "cubic-bezier(0.4, 0, 1, 1)";
+        readonly 'z-base': 0;
+        readonly 'z-raised': 10;
+        readonly 'z-dropdown': 100;
+        readonly 'z-sticky': 150;
+        readonly 'z-topbar': 200;
+        readonly 'z-overlay': 300;
+        readonly 'z-modal': 400;
+        readonly 'z-toast': 500;
+        readonly 'z-tooltip': 600;
+    };
+};
+type SemanticColorKey = keyof typeof semanticTokens.light;
+type SemanticSharedKey = keyof typeof semanticTokens.shared;
+/**
+ * CSS custom-property reference strings.
+ * Use in inline styles or CSS-in-JS — values respond to light/dark automatically.
+ *
+ * @example
+ * // Inline style
+ * <div style={{ color: vars.color.foreground }}>...</div>
+ *
+ * @example
+ * // Emotion / styled-components
+ * const Card = styled.div`
+ *   background: ${vars.color.surface};
+ *   border-radius: ${vars.radius.lg};
+ *   box-shadow: ${vars.shadow.md};
+ * `
+ */
+declare const vars: {
+    readonly color: {
+        readonly background: "var(--color-background)";
+        readonly surface: "var(--color-surface)";
+        readonly surfaceRaised: "var(--color-surface-raised)";
+        readonly border: "var(--color-border)";
+        readonly borderStrong: "var(--color-border-strong)";
+        readonly foreground: "var(--color-foreground)";
+        readonly foregroundSecondary: "var(--color-foreground-secondary)";
+        readonly foregroundMuted: "var(--color-foreground-muted)";
+        readonly accent: "var(--color-accent)";
+        readonly accentHover: "var(--color-accent-hover)";
+        readonly accentForeground: "var(--color-accent-foreground)";
+        readonly error: "var(--color-error)";
+        readonly warning: "var(--color-warning)";
+        readonly success: "var(--color-success)";
+        readonly info: "var(--color-info)";
+    };
+    readonly radius: {
+        readonly sm: "var(--radius-sm)";
+        readonly md: "var(--radius-md)";
+        readonly lg: "var(--radius-lg)";
+        readonly xl: "var(--radius-xl)";
+        readonly '2xl': "var(--radius-2xl)";
+        readonly full: "var(--radius-full)";
+    };
+    readonly shadow: {
+        readonly sm: "var(--shadow-sm)";
+        readonly md: "var(--shadow-md)";
+        readonly lg: "var(--shadow-lg)";
+        readonly xl: "var(--shadow-xl)";
+    };
+    readonly typography: {
+        readonly fontFamily: "var(--font-family-sans)";
+        readonly fontSizeXs: "var(--font-size-xs)";
+        readonly fontSizeSm: "var(--font-size-sm)";
+        readonly fontSizeBase: "var(--font-size-base)";
+        readonly fontSizeLg: "var(--font-size-lg)";
+        readonly fontSizeXl: "var(--font-size-xl)";
+        readonly fontSize2xl: "var(--font-size-2xl)";
+        readonly fontSize3xl: "var(--font-size-3xl)";
+        readonly fontWeightNormal: "var(--font-weight-normal)";
+        readonly fontWeightMedium: "var(--font-weight-medium)";
+        readonly fontWeightSemibold: "var(--font-weight-semibold)";
+        readonly fontWeightBold: "var(--font-weight-bold)";
+        readonly lineHeightTight: "var(--line-height-tight)";
+        readonly lineHeightSnug: "var(--line-height-snug)";
+        readonly lineHeightNormal: "var(--line-height-normal)";
+        readonly lineHeightRelaxed: "var(--line-height-relaxed)";
+        readonly letterSpacingTight: "var(--letter-spacing-tight)";
+        readonly letterSpacingNormal: "var(--letter-spacing-normal)";
+        readonly letterSpacingWide: "var(--letter-spacing-wide)";
+    };
+    readonly density: {
+        readonly controlXs: "var(--height-control-xs)";
+        readonly controlSm: "var(--height-control-sm)";
+        readonly controlMd: "var(--height-control-md)";
+        readonly controlLg: "var(--height-control-lg)";
+        readonly topbar: "var(--height-topbar)";
+        readonly sidebarExpanded: "var(--sidebar-expanded)";
+        readonly sidebarCollapsed: "var(--sidebar-collapsed)";
+    };
+    readonly motion: {
+        readonly durationInstant: "var(--duration-instant)";
+        readonly durationFast: "var(--duration-fast)";
+        readonly durationNormal: "var(--duration-normal)";
+        readonly durationSlow: "var(--duration-slow)";
+        readonly durationGentle: "var(--duration-gentle)";
+        readonly easeOutExpo: "var(--ease-out-expo)";
+        readonly easeOutQuart: "var(--ease-out-quart)";
+        readonly easeOutCubic: "var(--ease-out-cubic)";
+        readonly easeInOut: "var(--ease-in-out)";
+        readonly easeIn: "var(--ease-in)";
+    };
+    readonly zIndex: {
+        readonly base: "var(--z-base)";
+        readonly raised: "var(--z-raised)";
+        readonly dropdown: "var(--z-dropdown)";
+        readonly sticky: "var(--z-sticky)";
+        readonly topbar: "var(--z-topbar)";
+        readonly overlay: "var(--z-overlay)";
+        readonly modal: "var(--z-modal)";
+        readonly toast: "var(--z-toast)";
+        readonly tooltip: "var(--z-tooltip)";
+    };
+};
+type VarColorKey = keyof typeof vars.color;
+type VarRadiusKey = keyof typeof vars.radius;
+type VarShadowKey = keyof typeof vars.shadow;
+type VarTypoKey = keyof typeof vars.typography;
+type VarDensityKey = keyof typeof vars.density;
+type VarMotionKey = keyof typeof vars.motion;
+type VarZIndexKey = keyof typeof vars.zIndex;
+
+export { COLORS as C, PALETTE as P, type SemanticColorKey as S, type VarColorKey as V, type SemanticSharedKey as a, type VarDensityKey as b, type VarMotionKey as c, type VarRadiusKey as d, type VarShadowKey as e, type VarTypoKey as f, type VarZIndexKey as g, semanticTokens as s, vars as v };