@zendir/ui 0.5.0 → 0.6.0

package/dist/tokens/core.js

@@ -0,0 +1,144 @@
+import { astroStatus, astroStatusLightBorder, astroStatusLightFill } from "./palettes/astro.js";
+//#region src/tokens/core.ts
+/**
+* @zendir/ui - Design Tokens (core scalars)
+*
+* Exportable design tokens for use in CSS and JavaScript.
+* Based on Astro UX Design System.
+*
+* These are the shared scalar primitives (spacing, radius, typography,
+* shadows, animation) plus the base color reference table. Status colors
+* are sourced from the Astro UXDS ramps in tokens/palettes so there is a
+* single source of truth for severity values across the whole system.
+*/
+var colors = {
+	status: { ...astroStatus },
+	statusLightFill: { ...astroStatusLightFill },
+	statusLightBorder: { ...astroStatusLightBorder },
+	background: {
+		dark: {
+			base: "#101923",
+			surface: "#1b2d3e",
+			elevated: "#243647",
+			overlay: "rgba(0, 0, 0, 0.7)"
+		},
+		light: {
+			base: "#f5f6f9",
+			surface: "#ffffff",
+			elevated: "#ffffff",
+			overlay: "rgba(0, 0, 0, 0.5)"
+		}
+	},
+	text: {
+		dark: {
+			primary: "#ffffff",
+			secondary: "#9ea7ad",
+			tertiary: "#6b7175",
+			muted: "#52595f"
+		},
+		light: {
+			primary: "#1b2d3e",
+			secondary: "#4c5a67",
+			tertiary: "#7a8891",
+			muted: "#a4adb5"
+		}
+	},
+	accent: {
+		primary: "#4dacff",
+		secondary: "#3d8ddb",
+		tertiary: "#2e6eb3"
+	},
+	border: {
+		dark: {
+			default: "#3c4b5a",
+			muted: "#2b3d4e",
+			focus: "#4dacff"
+		},
+		light: {
+			default: "#c4c8cc",
+			muted: "#e1e4e8",
+			focus: "#4dacff"
+		}
+	}
+};
+var spacing = {
+	xs: "4px",
+	sm: "8px",
+	md: "16px",
+	lg: "24px",
+	xl: "32px",
+	xxl: "48px"
+};
+var borderRadius = {
+	none: "0",
+	sm: "2px",
+	md: "4px",
+	lg: "8px",
+	xl: "16px",
+	full: "9999px"
+};
+/**
+* Typography tokens following AstroUXDS Design System
+* @see https://www.astrouxds.com/foundations/typography/
+*
+* Font weights per Astro spec: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)
+* Note: Astro does NOT use 600 (semibold) - use 500 (medium) or 700 (bold) instead
+*/
+var typography = {
+	fontFamily: {
+		/** Heading font: Sora (Zendir Brand Standard) */
+		heading: "\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+		/** Primary font: Public Sans (Zendir Brand Standard) */
+		primary: "\"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif",
+		/** Monospace font: Roboto Mono for data/code */
+		mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace"
+	},
+	fontSize: {
+		micro: "0.5625rem",
+		xxs: "0.625rem",
+		xs: "0.75rem",
+		sm: "0.875rem",
+		base: "1rem",
+		md: "1.125rem",
+		lg: "1.25rem",
+		xl: "1.5rem",
+		xxl: "2.125rem",
+		xxxl: "3rem",
+		display: "3.75rem"
+	},
+	/**
+	* Font weights per AstroUXDS specification
+	* Only 300, 400, 500, 700 are officially supported
+	*/
+	fontWeight: {
+		light: 300,
+		normal: 400,
+		regular: 400,
+		medium: 500,
+		bold: 700,
+		/** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */
+		semibold: 500
+	},
+	lineHeight: {
+		tight: 1.25,
+		normal: 1.5,
+		relaxed: 1.75
+	}
+};
+var shadows = {
+	none: "none",
+	sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
+	md: "0 2px 8px rgba(0, 0, 0, 0.3)",
+	lg: "0 4px 16px rgba(0, 0, 0, 0.3)",
+	xl: "0 8px 32px rgba(0, 0, 0, 0.4)",
+	glow: "0 0 20px rgba(77, 172, 255, 0.4)"
+};
+var animation = {
+	fast: "150ms ease",
+	normal: "250ms ease",
+	slow: "400ms ease"
+};
+//#endregion
+export { animation, borderRadius, colors, shadows, spacing, typography };
+
+//# sourceMappingURL=core.js.map

package/dist/tokens/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","names":[],"sources":["../../src/tokens/core.ts"],"sourcesContent":["/**\n * @zendir/ui - Design Tokens (core scalars)\n *\n * Exportable design tokens for use in CSS and JavaScript.\n * Based on Astro UX Design System.\n *\n * These are the shared scalar primitives (spacing, radius, typography,\n * shadows, animation) plus the base color reference table. Status colors\n * are sourced from the Astro UXDS ramps in tokens/palettes so there is a\n * single source of truth for severity values across the whole system.\n */\n\nimport {\n  astroStatus,\n  astroStatusLightFill,\n  astroStatusLightBorder,\n} from \"./palettes/astro\";\n\nexport const colors = {\n  // Status colors — sourced from the Astro UXDS ramps in tokens/palettes.\n  status: { ...astroStatus },\n  statusLightFill: { ...astroStatusLightFill },\n  statusLightBorder: { ...astroStatusLightBorder },\n\n  // Background Colors\n  background: {\n    dark: {\n      base: \"#101923\",\n      surface: \"#1b2d3e\",\n      elevated: \"#243647\",\n      overlay: \"rgba(0, 0, 0, 0.7)\",\n    },\n    light: {\n      base: \"#f5f6f9\",\n      surface: \"#ffffff\",\n      elevated: \"#ffffff\",\n      overlay: \"rgba(0, 0, 0, 0.5)\",\n    },\n  },\n\n  // Text Colors\n  text: {\n    dark: {\n      primary: \"#ffffff\",\n      secondary: \"#9ea7ad\",\n      tertiary: \"#6b7175\",\n      muted: \"#52595f\",\n    },\n    light: {\n      primary: \"#1b2d3e\",\n      secondary: \"#4c5a67\",\n      tertiary: \"#7a8891\",\n      muted: \"#a4adb5\",\n    },\n  },\n\n  // Accent Colors\n  accent: {\n    primary: \"#4dacff\",\n    secondary: \"#3d8ddb\",\n    tertiary: \"#2e6eb3\",\n  },\n\n  // Border Colors\n  border: {\n    dark: {\n      default: \"#3c4b5a\",\n      muted: \"#2b3d4e\",\n      focus: \"#4dacff\",\n    },\n    light: {\n      default: \"#c4c8cc\",\n      muted: \"#e1e4e8\",\n      focus: \"#4dacff\",\n    },\n  },\n} as const;\n\nexport const spacing = {\n  xs: \"4px\",\n  sm: \"8px\",\n  md: \"16px\",\n  lg: \"24px\",\n  xl: \"32px\",\n  xxl: \"48px\",\n} as const;\n\nexport const borderRadius = {\n  none: \"0\",\n  sm: \"2px\",\n  md: \"4px\",\n  lg: \"8px\",\n  xl: \"16px\",\n  full: \"9999px\",\n} as const;\n\n/**\n * Typography tokens following AstroUXDS Design System\n * @see https://www.astrouxds.com/foundations/typography/\n *\n * Font weights per Astro spec: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)\n * Note: Astro does NOT use 600 (semibold) - use 500 (medium) or 700 (bold) instead\n */\nexport const typography = {\n  fontFamily: {\n    /** Heading font: Sora (Zendir Brand Standard) */\n    heading:\n      '\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    /** Primary font: Public Sans (Zendir Brand Standard) */\n    primary:\n      '\"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    /** Monospace font: Roboto Mono for data/code */\n    mono: '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace',\n  },\n  fontSize: {\n    // Compact sizes for dense UIs (cards, badges, data labels)\n    micro: \"0.5625rem\", // 9px - very tight spaces\n    xxs: \"0.625rem\", // 10px - compact labels\n    // Standard sizes\n    xs: \"0.75rem\", // 12px - small text, body3\n    sm: \"0.875rem\", // 14px - body2\n    base: \"1rem\", // 16px - body1\n    md: \"1.125rem\", // 18px - h5/h6\n    lg: \"1.25rem\", // 20px - h3/h4\n    xl: \"1.5rem\", // 24px - h2\n    xxl: \"2.125rem\", // 34px - h1\n    xxxl: \"3rem\", // 48px - display2\n    display: \"3.75rem\", // 60px - display1\n  },\n  /**\n   * Font weights per AstroUXDS specification\n   * Only 300, 400, 500, 700 are officially supported\n   */\n  fontWeight: {\n    light: 300,\n    normal: 400,\n    regular: 400, // Alias for normal\n    medium: 500,\n    bold: 700,\n    // DEPRECATED: semibold is not in Astro spec, use medium (500) instead\n    /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */\n    semibold: 500,\n  },\n  lineHeight: {\n    tight: 1.25,\n    normal: 1.5,\n    relaxed: 1.75,\n  },\n} as const;\n\nexport const shadows = {\n  none: \"none\",\n  sm: \"0 1px 2px rgba(0, 0, 0, 0.3)\",\n  md: \"0 2px 8px rgba(0, 0, 0, 0.3)\",\n  lg: \"0 4px 16px rgba(0, 0, 0, 0.3)\",\n  xl: \"0 8px 32px rgba(0, 0, 0, 0.4)\",\n  glow: \"0 0 20px rgba(77, 172, 255, 0.4)\",\n} as const;\n\nexport const animation = {\n  fast: \"150ms ease\",\n  normal: \"250ms ease\",\n  slow: \"400ms ease\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;AAkBA,IAAa,SAAS;CAEpB,QAAQ,EAAE,GAAG,YAAY;CACzB,iBAAiB,EAAE,GAAG,qBAAqB;CAC3C,mBAAmB,EAAE,GAAG,uBAAuB;CAG/C,YAAY;EACV,MAAM;GACJ,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;EACX;EACA,OAAO;GACL,MAAM;GACN,SAAS;GACT,UAAU;GACV,SAAS;EACX;CACF;CAGA,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,WAAW;GACX,UAAU;GACV,OAAO;EACT;EACA,OAAO;GACL,SAAS;GACT,WAAW;GACX,UAAU;GACV,OAAO;EACT;CACF;CAGA,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;CACZ;CAGA,QAAQ;EACN,MAAM;GACJ,SAAS;GACT,OAAO;GACP,OAAO;EACT;EACA,OAAO;GACL,SAAS;GACT,OAAO;GACP,OAAO;EACT;CACF;AACF;AAEA,IAAa,UAAU;CACrB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAEA,IAAa,eAAe;CAC1B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;;;;;;;;AASA,IAAa,aAAa;CACxB,YAAY;;EAEV,SACE;;EAEF,SACE;;EAEF,MAAM;CACR;CACA,UAAU;EAER,OAAO;EACP,KAAK;EAEL,IAAI;EACJ,IAAI;EACJ,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,KAAK;EACL,MAAM;EACN,SAAS;CACX;;;;;CAKA,YAAY;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACT,QAAQ;EACR,MAAM;;EAGN,UAAU;CACZ;CACA,YAAY;EACV,OAAO;EACP,QAAQ;EACR,SAAS;CACX;AACF;AAEA,IAAa,UAAU;CACrB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAa,YAAY;CACvB,MAAM;CACN,QAAQ;CACR,MAAM;AACR"}

package/dist/tokens/css-vars.d.ts

@@ -1,7 +1,7 @@
 /**
  * @zendir/ui — CSS variable name constants
  *
- * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.
+ * AUTO-GENERATED from src/tokens/tokens.css. DO NOT EDIT BY HAND.
  * Regenerate with: npm run build:tokens
  *
  * Use these instead of writing `var('--zendir-…')` literally — typos
@@ -17,6 +17,36 @@ export declare const CSS_VAR_ACCENT_TERTIARY: "--zendir-accent-tertiary";
 export declare const CSS_VAR_ANIMATION_FAST: "--zendir-animation-fast";
 export declare const CSS_VAR_ANIMATION_NORMAL: "--zendir-animation-normal";
 export declare const CSS_VAR_ANIMATION_SLOW: "--zendir-animation-slow";
+export declare const CSS_VAR_ASTRO_AMBER_400: "--zendir-astro-amber-400";
+export declare const CSS_VAR_ASTRO_AMBER_500: "--zendir-astro-amber-500";
+export declare const CSS_VAR_ASTRO_AMBER_600: "--zendir-astro-amber-600";
+export declare const CSS_VAR_ASTRO_AMBER_700: "--zendir-astro-amber-700";
+export declare const CSS_VAR_ASTRO_AMBER_800: "--zendir-astro-amber-800";
+export declare const CSS_VAR_ASTRO_AMBER_900: "--zendir-astro-amber-900";
+export declare const CSS_VAR_ASTRO_CYAN_400: "--zendir-astro-cyan-400";
+export declare const CSS_VAR_ASTRO_CYAN_500: "--zendir-astro-cyan-500";
+export declare const CSS_VAR_ASTRO_CYAN_600: "--zendir-astro-cyan-600";
+export declare const CSS_VAR_ASTRO_CYAN_700: "--zendir-astro-cyan-700";
+export declare const CSS_VAR_ASTRO_CYAN_800: "--zendir-astro-cyan-800";
+export declare const CSS_VAR_ASTRO_CYAN_900: "--zendir-astro-cyan-900";
+export declare const CSS_VAR_ASTRO_GREEN_400: "--zendir-astro-green-400";
+export declare const CSS_VAR_ASTRO_GREEN_500: "--zendir-astro-green-500";
+export declare const CSS_VAR_ASTRO_GREEN_600: "--zendir-astro-green-600";
+export declare const CSS_VAR_ASTRO_GREEN_700: "--zendir-astro-green-700";
+export declare const CSS_VAR_ASTRO_GREEN_800: "--zendir-astro-green-800";
+export declare const CSS_VAR_ASTRO_GREEN_900: "--zendir-astro-green-900";
+export declare const CSS_VAR_ASTRO_RED_400: "--zendir-astro-red-400";
+export declare const CSS_VAR_ASTRO_RED_500: "--zendir-astro-red-500";
+export declare const CSS_VAR_ASTRO_RED_600: "--zendir-astro-red-600";
+export declare const CSS_VAR_ASTRO_RED_700: "--zendir-astro-red-700";
+export declare const CSS_VAR_ASTRO_RED_800: "--zendir-astro-red-800";
+export declare const CSS_VAR_ASTRO_RED_900: "--zendir-astro-red-900";
+export declare const CSS_VAR_ASTRO_YELLOW_400: "--zendir-astro-yellow-400";
+export declare const CSS_VAR_ASTRO_YELLOW_500: "--zendir-astro-yellow-500";
+export declare const CSS_VAR_ASTRO_YELLOW_600: "--zendir-astro-yellow-600";
+export declare const CSS_VAR_ASTRO_YELLOW_700: "--zendir-astro-yellow-700";
+export declare const CSS_VAR_ASTRO_YELLOW_800: "--zendir-astro-yellow-800";
+export declare const CSS_VAR_ASTRO_YELLOW_900: "--zendir-astro-yellow-900";
 export declare const CSS_VAR_BG_BASE: "--zendir-bg-base";
 export declare const CSS_VAR_BG_ELEVATED: "--zendir-bg-elevated";
 export declare const CSS_VAR_BG_OVERLAY: "--zendir-bg-overlay";
@@ -24,6 +54,17 @@ export declare const CSS_VAR_BG_SURFACE: "--zendir-bg-surface";
 export declare const CSS_VAR_BORDER_DEFAULT: "--zendir-border-default";
 export declare const CSS_VAR_BORDER_FOCUS: "--zendir-border-focus";
 export declare const CSS_VAR_BORDER_MUTED: "--zendir-border-muted";
+export declare const CSS_VAR_EB_100: "--zendir-eb-100";
+export declare const CSS_VAR_EB_200: "--zendir-eb-200";
+export declare const CSS_VAR_EB_300: "--zendir-eb-300";
+export declare const CSS_VAR_EB_400: "--zendir-eb-400";
+export declare const CSS_VAR_EB_50: "--zendir-eb-50";
+export declare const CSS_VAR_EB_500: "--zendir-eb-500";
+export declare const CSS_VAR_EB_600: "--zendir-eb-600";
+export declare const CSS_VAR_EB_700: "--zendir-eb-700";
+export declare const CSS_VAR_EB_800: "--zendir-eb-800";
+export declare const CSS_VAR_EB_900: "--zendir-eb-900";
+export declare const CSS_VAR_EB_950: "--zendir-eb-950";
 export declare const CSS_VAR_FONT_HEADING: "--zendir-font-heading";
 export declare const CSS_VAR_FONT_MONO: "--zendir-font-mono";
 export declare const CSS_VAR_FONT_PRIMARY: "--zendir-font-primary";
@@ -42,15 +83,42 @@ export declare const CSS_VAR_FONT_WEIGHT_BOLD: "--zendir-font-weight-bold";
 export declare const CSS_VAR_FONT_WEIGHT_LIGHT: "--zendir-font-weight-light";
 export declare const CSS_VAR_FONT_WEIGHT_MEDIUM: "--zendir-font-weight-medium";
 export declare const CSS_VAR_FONT_WEIGHT_NORMAL: "--zendir-font-weight-normal";
+export declare const CSS_VAR_FONT_WEIGHT_SEMIBOLD: "--zendir-font-weight-semibold";
 export declare const CSS_VAR_LINE_HEIGHT_NORMAL: "--zendir-line-height-normal";
 export declare const CSS_VAR_LINE_HEIGHT_RELAXED: "--zendir-line-height-relaxed";
 export declare const CSS_VAR_LINE_HEIGHT_TIGHT: "--zendir-line-height-tight";
+export declare const CSS_VAR_NEUTRAL_100: "--zendir-neutral-100";
+export declare const CSS_VAR_NEUTRAL_200: "--zendir-neutral-200";
+export declare const CSS_VAR_NEUTRAL_300: "--zendir-neutral-300";
+export declare const CSS_VAR_NEUTRAL_400: "--zendir-neutral-400";
+export declare const CSS_VAR_NEUTRAL_50: "--zendir-neutral-50";
+export declare const CSS_VAR_NEUTRAL_500: "--zendir-neutral-500";
+export declare const CSS_VAR_NEUTRAL_600: "--zendir-neutral-600";
+export declare const CSS_VAR_NEUTRAL_700: "--zendir-neutral-700";
+export declare const CSS_VAR_NEUTRAL_800: "--zendir-neutral-800";
+export declare const CSS_VAR_NEUTRAL_900: "--zendir-neutral-900";
+export declare const CSS_VAR_NEUTRAL_950: "--zendir-neutral-950";
+export declare const CSS_VAR_PB_100: "--zendir-pb-100";
+export declare const CSS_VAR_PB_200: "--zendir-pb-200";
+export declare const CSS_VAR_PB_300: "--zendir-pb-300";
+export declare const CSS_VAR_PB_400: "--zendir-pb-400";
+export declare const CSS_VAR_PB_50: "--zendir-pb-50";
+export declare const CSS_VAR_PB_500: "--zendir-pb-500";
+export declare const CSS_VAR_PB_600: "--zendir-pb-600";
+export declare const CSS_VAR_PB_700: "--zendir-pb-700";
+export declare const CSS_VAR_PB_800: "--zendir-pb-800";
+export declare const CSS_VAR_PB_900: "--zendir-pb-900";
+export declare const CSS_VAR_PB_950: "--zendir-pb-950";
 export declare const CSS_VAR_RADIUS_FULL: "--zendir-radius-full";
 export declare const CSS_VAR_RADIUS_LG: "--zendir-radius-lg";
 export declare const CSS_VAR_RADIUS_MD: "--zendir-radius-md";
 export declare const CSS_VAR_RADIUS_NONE: "--zendir-radius-none";
 export declare const CSS_VAR_RADIUS_SM: "--zendir-radius-sm";
 export declare const CSS_VAR_RADIUS_XL: "--zendir-radius-xl";
+export declare const CSS_VAR_SEMANTIC_ERROR: "--zendir-semantic-error";
+export declare const CSS_VAR_SEMANTIC_INFO: "--zendir-semantic-info";
+export declare const CSS_VAR_SEMANTIC_SUCCESS: "--zendir-semantic-success";
+export declare const CSS_VAR_SEMANTIC_WARNING: "--zendir-semantic-warning";
 export declare const CSS_VAR_SHADOW_GLOW: "--zendir-shadow-glow";
 export declare const CSS_VAR_SHADOW_LG: "--zendir-shadow-lg";
 export declare const CSS_VAR_SHADOW_MD: "--zendir-shadow-md";
@@ -85,7 +153,150 @@ export declare const CSS_VAR_TEXT_MUTED: "--zendir-text-muted";
 export declare const CSS_VAR_TEXT_PRIMARY: "--zendir-text-primary";
 export declare const CSS_VAR_TEXT_SECONDARY: "--zendir-text-secondary";
 export declare const CSS_VAR_TEXT_TERTIARY: "--zendir-text-tertiary";
+export declare const CSS_VAR_TW_BLUE_100: "--zendir-tw-blue-100";
+export declare const CSS_VAR_TW_BLUE_200: "--zendir-tw-blue-200";
+export declare const CSS_VAR_TW_BLUE_300: "--zendir-tw-blue-300";
+export declare const CSS_VAR_TW_BLUE_400: "--zendir-tw-blue-400";
+export declare const CSS_VAR_TW_BLUE_50: "--zendir-tw-blue-50";
+export declare const CSS_VAR_TW_BLUE_500: "--zendir-tw-blue-500";
+export declare const CSS_VAR_TW_BLUE_600: "--zendir-tw-blue-600";
+export declare const CSS_VAR_TW_BLUE_700: "--zendir-tw-blue-700";
+export declare const CSS_VAR_TW_BLUE_800: "--zendir-tw-blue-800";
+export declare const CSS_VAR_TW_BLUE_900: "--zendir-tw-blue-900";
+export declare const CSS_VAR_TW_BLUE_950: "--zendir-tw-blue-950";
+export declare const CSS_VAR_TW_GREEN_100: "--zendir-tw-green-100";
+export declare const CSS_VAR_TW_GREEN_200: "--zendir-tw-green-200";
+export declare const CSS_VAR_TW_GREEN_300: "--zendir-tw-green-300";
+export declare const CSS_VAR_TW_GREEN_400: "--zendir-tw-green-400";
+export declare const CSS_VAR_TW_GREEN_50: "--zendir-tw-green-50";
+export declare const CSS_VAR_TW_GREEN_500: "--zendir-tw-green-500";
+export declare const CSS_VAR_TW_GREEN_600: "--zendir-tw-green-600";
+export declare const CSS_VAR_TW_GREEN_700: "--zendir-tw-green-700";
+export declare const CSS_VAR_TW_GREEN_800: "--zendir-tw-green-800";
+export declare const CSS_VAR_TW_GREEN_900: "--zendir-tw-green-900";
+export declare const CSS_VAR_TW_GREEN_950: "--zendir-tw-green-950";
+export declare const CSS_VAR_TW_INDIGO_100: "--zendir-tw-indigo-100";
+export declare const CSS_VAR_TW_INDIGO_200: "--zendir-tw-indigo-200";
+export declare const CSS_VAR_TW_INDIGO_300: "--zendir-tw-indigo-300";
+export declare const CSS_VAR_TW_INDIGO_400: "--zendir-tw-indigo-400";
+export declare const CSS_VAR_TW_INDIGO_50: "--zendir-tw-indigo-50";
+export declare const CSS_VAR_TW_INDIGO_500: "--zendir-tw-indigo-500";
+export declare const CSS_VAR_TW_INDIGO_600: "--zendir-tw-indigo-600";
+export declare const CSS_VAR_TW_INDIGO_700: "--zendir-tw-indigo-700";
+export declare const CSS_VAR_TW_INDIGO_800: "--zendir-tw-indigo-800";
+export declare const CSS_VAR_TW_INDIGO_900: "--zendir-tw-indigo-900";
+export declare const CSS_VAR_TW_INDIGO_950: "--zendir-tw-indigo-950";
+export declare const CSS_VAR_TW_NEUTRAL_100: "--zendir-tw-neutral-100";
+export declare const CSS_VAR_TW_NEUTRAL_200: "--zendir-tw-neutral-200";
+export declare const CSS_VAR_TW_NEUTRAL_300: "--zendir-tw-neutral-300";
+export declare const CSS_VAR_TW_NEUTRAL_400: "--zendir-tw-neutral-400";
+export declare const CSS_VAR_TW_NEUTRAL_50: "--zendir-tw-neutral-50";
+export declare const CSS_VAR_TW_NEUTRAL_500: "--zendir-tw-neutral-500";
+export declare const CSS_VAR_TW_NEUTRAL_600: "--zendir-tw-neutral-600";
+export declare const CSS_VAR_TW_NEUTRAL_700: "--zendir-tw-neutral-700";
+export declare const CSS_VAR_TW_NEUTRAL_800: "--zendir-tw-neutral-800";
+export declare const CSS_VAR_TW_NEUTRAL_900: "--zendir-tw-neutral-900";
+export declare const CSS_VAR_TW_NEUTRAL_950: "--zendir-tw-neutral-950";
+export declare const CSS_VAR_TW_ORANGE_100: "--zendir-tw-orange-100";
+export declare const CSS_VAR_TW_ORANGE_200: "--zendir-tw-orange-200";
+export declare const CSS_VAR_TW_ORANGE_300: "--zendir-tw-orange-300";
+export declare const CSS_VAR_TW_ORANGE_400: "--zendir-tw-orange-400";
+export declare const CSS_VAR_TW_ORANGE_50: "--zendir-tw-orange-50";
+export declare const CSS_VAR_TW_ORANGE_500: "--zendir-tw-orange-500";
+export declare const CSS_VAR_TW_ORANGE_600: "--zendir-tw-orange-600";
+export declare const CSS_VAR_TW_ORANGE_700: "--zendir-tw-orange-700";
+export declare const CSS_VAR_TW_ORANGE_800: "--zendir-tw-orange-800";
+export declare const CSS_VAR_TW_ORANGE_900: "--zendir-tw-orange-900";
+export declare const CSS_VAR_TW_ORANGE_950: "--zendir-tw-orange-950";
+export declare const CSS_VAR_TW_PINK_100: "--zendir-tw-pink-100";
+export declare const CSS_VAR_TW_PINK_200: "--zendir-tw-pink-200";
+export declare const CSS_VAR_TW_PINK_300: "--zendir-tw-pink-300";
+export declare const CSS_VAR_TW_PINK_400: "--zendir-tw-pink-400";
+export declare const CSS_VAR_TW_PINK_50: "--zendir-tw-pink-50";
+export declare const CSS_VAR_TW_PINK_500: "--zendir-tw-pink-500";
+export declare const CSS_VAR_TW_PINK_600: "--zendir-tw-pink-600";
+export declare const CSS_VAR_TW_PINK_700: "--zendir-tw-pink-700";
+export declare const CSS_VAR_TW_PINK_800: "--zendir-tw-pink-800";
+export declare const CSS_VAR_TW_PINK_900: "--zendir-tw-pink-900";
+export declare const CSS_VAR_TW_PINK_950: "--zendir-tw-pink-950";
+export declare const CSS_VAR_TW_PURPLE_100: "--zendir-tw-purple-100";
+export declare const CSS_VAR_TW_PURPLE_200: "--zendir-tw-purple-200";
+export declare const CSS_VAR_TW_PURPLE_300: "--zendir-tw-purple-300";
+export declare const CSS_VAR_TW_PURPLE_400: "--zendir-tw-purple-400";
+export declare const CSS_VAR_TW_PURPLE_50: "--zendir-tw-purple-50";
+export declare const CSS_VAR_TW_PURPLE_500: "--zendir-tw-purple-500";
+export declare const CSS_VAR_TW_PURPLE_600: "--zendir-tw-purple-600";
+export declare const CSS_VAR_TW_PURPLE_700: "--zendir-tw-purple-700";
+export declare const CSS_VAR_TW_PURPLE_800: "--zendir-tw-purple-800";
+export declare const CSS_VAR_TW_PURPLE_900: "--zendir-tw-purple-900";
+export declare const CSS_VAR_TW_PURPLE_950: "--zendir-tw-purple-950";
+export declare const CSS_VAR_TW_RED_100: "--zendir-tw-red-100";
+export declare const CSS_VAR_TW_RED_200: "--zendir-tw-red-200";
+export declare const CSS_VAR_TW_RED_300: "--zendir-tw-red-300";
+export declare const CSS_VAR_TW_RED_400: "--zendir-tw-red-400";
+export declare const CSS_VAR_TW_RED_50: "--zendir-tw-red-50";
+export declare const CSS_VAR_TW_RED_500: "--zendir-tw-red-500";
+export declare const CSS_VAR_TW_RED_600: "--zendir-tw-red-600";
+export declare const CSS_VAR_TW_RED_700: "--zendir-tw-red-700";
+export declare const CSS_VAR_TW_RED_800: "--zendir-tw-red-800";
+export declare const CSS_VAR_TW_RED_900: "--zendir-tw-red-900";
+export declare const CSS_VAR_TW_RED_950: "--zendir-tw-red-950";
+export declare const CSS_VAR_TW_ROSE_100: "--zendir-tw-rose-100";
+export declare const CSS_VAR_TW_ROSE_200: "--zendir-tw-rose-200";
+export declare const CSS_VAR_TW_ROSE_300: "--zendir-tw-rose-300";
+export declare const CSS_VAR_TW_ROSE_400: "--zendir-tw-rose-400";
+export declare const CSS_VAR_TW_ROSE_50: "--zendir-tw-rose-50";
+export declare const CSS_VAR_TW_ROSE_500: "--zendir-tw-rose-500";
+export declare const CSS_VAR_TW_ROSE_600: "--zendir-tw-rose-600";
+export declare const CSS_VAR_TW_ROSE_700: "--zendir-tw-rose-700";
+export declare const CSS_VAR_TW_ROSE_800: "--zendir-tw-rose-800";
+export declare const CSS_VAR_TW_ROSE_900: "--zendir-tw-rose-900";
+export declare const CSS_VAR_TW_ROSE_950: "--zendir-tw-rose-950";
+export declare const CSS_VAR_TW_SKY_100: "--zendir-tw-sky-100";
+export declare const CSS_VAR_TW_SKY_200: "--zendir-tw-sky-200";
+export declare const CSS_VAR_TW_SKY_300: "--zendir-tw-sky-300";
+export declare const CSS_VAR_TW_SKY_400: "--zendir-tw-sky-400";
+export declare const CSS_VAR_TW_SKY_50: "--zendir-tw-sky-50";
+export declare const CSS_VAR_TW_SKY_500: "--zendir-tw-sky-500";
+export declare const CSS_VAR_TW_SKY_600: "--zendir-tw-sky-600";
+export declare const CSS_VAR_TW_SKY_700: "--zendir-tw-sky-700";
+export declare const CSS_VAR_TW_SKY_800: "--zendir-tw-sky-800";
+export declare const CSS_VAR_TW_SKY_900: "--zendir-tw-sky-900";
+export declare const CSS_VAR_TW_SKY_950: "--zendir-tw-sky-950";
+export declare const CSS_VAR_TW_SLATE_100: "--zendir-tw-slate-100";
+export declare const CSS_VAR_TW_SLATE_200: "--zendir-tw-slate-200";
+export declare const CSS_VAR_TW_SLATE_300: "--zendir-tw-slate-300";
+export declare const CSS_VAR_TW_SLATE_400: "--zendir-tw-slate-400";
+export declare const CSS_VAR_TW_SLATE_50: "--zendir-tw-slate-50";
+export declare const CSS_VAR_TW_SLATE_500: "--zendir-tw-slate-500";
+export declare const CSS_VAR_TW_SLATE_600: "--zendir-tw-slate-600";
+export declare const CSS_VAR_TW_SLATE_700: "--zendir-tw-slate-700";
+export declare const CSS_VAR_TW_SLATE_800: "--zendir-tw-slate-800";
+export declare const CSS_VAR_TW_SLATE_900: "--zendir-tw-slate-900";
+export declare const CSS_VAR_TW_SLATE_950: "--zendir-tw-slate-950";
+export declare const CSS_VAR_TW_YELLOW_100: "--zendir-tw-yellow-100";
+export declare const CSS_VAR_TW_YELLOW_200: "--zendir-tw-yellow-200";
+export declare const CSS_VAR_TW_YELLOW_300: "--zendir-tw-yellow-300";
+export declare const CSS_VAR_TW_YELLOW_400: "--zendir-tw-yellow-400";
+export declare const CSS_VAR_TW_YELLOW_50: "--zendir-tw-yellow-50";
+export declare const CSS_VAR_TW_YELLOW_500: "--zendir-tw-yellow-500";
+export declare const CSS_VAR_TW_YELLOW_600: "--zendir-tw-yellow-600";
+export declare const CSS_VAR_TW_YELLOW_700: "--zendir-tw-yellow-700";
+export declare const CSS_VAR_TW_YELLOW_800: "--zendir-tw-yellow-800";
+export declare const CSS_VAR_TW_YELLOW_900: "--zendir-tw-yellow-900";
+export declare const CSS_VAR_TW_YELLOW_950: "--zendir-tw-yellow-950";
+export declare const CSS_VAR_UV_100: "--zendir-uv-100";
+export declare const CSS_VAR_UV_200: "--zendir-uv-200";
+export declare const CSS_VAR_UV_300: "--zendir-uv-300";
+export declare const CSS_VAR_UV_400: "--zendir-uv-400";
+export declare const CSS_VAR_UV_50: "--zendir-uv-50";
+export declare const CSS_VAR_UV_500: "--zendir-uv-500";
+export declare const CSS_VAR_UV_600: "--zendir-uv-600";
+export declare const CSS_VAR_UV_700: "--zendir-uv-700";
+export declare const CSS_VAR_UV_800: "--zendir-uv-800";
+export declare const CSS_VAR_UV_900: "--zendir-uv-900";
+export declare const CSS_VAR_UV_950: "--zendir-uv-950";
 /** Union of every Zendir CSS variable name. Useful for `as ZendirCSSVar`. */
-export type ZendirCSSVar = '--zendir-accent-primary' | '--zendir-accent-secondary' | '--zendir-accent-tertiary' | '--zendir-animation-fast' | '--zendir-animation-normal' | '--zendir-animation-slow' | '--zendir-bg-base' | '--zendir-bg-elevated' | '--zendir-bg-overlay' | '--zendir-bg-surface' | '--zendir-border-default' | '--zendir-border-focus' | '--zendir-border-muted' | '--zendir-font-heading' | '--zendir-font-mono' | '--zendir-font-primary' | '--zendir-font-size-base' | '--zendir-font-size-display' | '--zendir-font-size-lg' | '--zendir-font-size-md' | '--zendir-font-size-micro' | '--zendir-font-size-sm' | '--zendir-font-size-xl' | '--zendir-font-size-xs' | '--zendir-font-size-xxl' | '--zendir-font-size-xxs' | '--zendir-font-size-xxxl' | '--zendir-font-weight-bold' | '--zendir-font-weight-light' | '--zendir-font-weight-medium' | '--zendir-font-weight-normal' | '--zendir-line-height-normal' | '--zendir-line-height-relaxed' | '--zendir-line-height-tight' | '--zendir-radius-full' | '--zendir-radius-lg' | '--zendir-radius-md' | '--zendir-radius-none' | '--zendir-radius-sm' | '--zendir-radius-xl' | '--zendir-shadow-glow' | '--zendir-shadow-lg' | '--zendir-shadow-md' | '--zendir-shadow-none' | '--zendir-shadow-sm' | '--zendir-shadow-xl' | '--zendir-spacing-lg' | '--zendir-spacing-md' | '--zendir-spacing-sm' | '--zendir-spacing-xl' | '--zendir-spacing-xs' | '--zendir-spacing-xxl' | '--zendir-status-caution' | '--zendir-status-caution-border' | '--zendir-status-caution-light' | '--zendir-status-critical' | '--zendir-status-critical-border' | '--zendir-status-critical-light' | '--zendir-status-normal' | '--zendir-status-normal-border' | '--zendir-status-normal-light' | '--zendir-status-off' | '--zendir-status-off-border' | '--zendir-status-off-light' | '--zendir-status-serious' | '--zendir-status-serious-border' | '--zendir-status-serious-light' | '--zendir-status-standby' | '--zendir-status-standby-border' | '--zendir-status-standby-light' | '--zendir-text-muted' | '--zendir-text-primary' | '--zendir-text-secondary' | '--zendir-text-tertiary';
+export type ZendirCSSVar = '--zendir-accent-primary' | '--zendir-accent-secondary' | '--zendir-accent-tertiary' | '--zendir-animation-fast' | '--zendir-animation-normal' | '--zendir-animation-slow' | '--zendir-astro-amber-400' | '--zendir-astro-amber-500' | '--zendir-astro-amber-600' | '--zendir-astro-amber-700' | '--zendir-astro-amber-800' | '--zendir-astro-amber-900' | '--zendir-astro-cyan-400' | '--zendir-astro-cyan-500' | '--zendir-astro-cyan-600' | '--zendir-astro-cyan-700' | '--zendir-astro-cyan-800' | '--zendir-astro-cyan-900' | '--zendir-astro-green-400' | '--zendir-astro-green-500' | '--zendir-astro-green-600' | '--zendir-astro-green-700' | '--zendir-astro-green-800' | '--zendir-astro-green-900' | '--zendir-astro-red-400' | '--zendir-astro-red-500' | '--zendir-astro-red-600' | '--zendir-astro-red-700' | '--zendir-astro-red-800' | '--zendir-astro-red-900' | '--zendir-astro-yellow-400' | '--zendir-astro-yellow-500' | '--zendir-astro-yellow-600' | '--zendir-astro-yellow-700' | '--zendir-astro-yellow-800' | '--zendir-astro-yellow-900' | '--zendir-bg-base' | '--zendir-bg-elevated' | '--zendir-bg-overlay' | '--zendir-bg-surface' | '--zendir-border-default' | '--zendir-border-focus' | '--zendir-border-muted' | '--zendir-eb-100' | '--zendir-eb-200' | '--zendir-eb-300' | '--zendir-eb-400' | '--zendir-eb-50' | '--zendir-eb-500' | '--zendir-eb-600' | '--zendir-eb-700' | '--zendir-eb-800' | '--zendir-eb-900' | '--zendir-eb-950' | '--zendir-font-heading' | '--zendir-font-mono' | '--zendir-font-primary' | '--zendir-font-size-base' | '--zendir-font-size-display' | '--zendir-font-size-lg' | '--zendir-font-size-md' | '--zendir-font-size-micro' | '--zendir-font-size-sm' | '--zendir-font-size-xl' | '--zendir-font-size-xs' | '--zendir-font-size-xxl' | '--zendir-font-size-xxs' | '--zendir-font-size-xxxl' | '--zendir-font-weight-bold' | '--zendir-font-weight-light' | '--zendir-font-weight-medium' | '--zendir-font-weight-normal' | '--zendir-font-weight-semibold' | '--zendir-line-height-normal' | '--zendir-line-height-relaxed' | '--zendir-line-height-tight' | '--zendir-neutral-100' | '--zendir-neutral-200' | '--zendir-neutral-300' | '--zendir-neutral-400' | '--zendir-neutral-50' | '--zendir-neutral-500' | '--zendir-neutral-600' | '--zendir-neutral-700' | '--zendir-neutral-800' | '--zendir-neutral-900' | '--zendir-neutral-950' | '--zendir-pb-100' | '--zendir-pb-200' | '--zendir-pb-300' | '--zendir-pb-400' | '--zendir-pb-50' | '--zendir-pb-500' | '--zendir-pb-600' | '--zendir-pb-700' | '--zendir-pb-800' | '--zendir-pb-900' | '--zendir-pb-950' | '--zendir-radius-full' | '--zendir-radius-lg' | '--zendir-radius-md' | '--zendir-radius-none' | '--zendir-radius-sm' | '--zendir-radius-xl' | '--zendir-semantic-error' | '--zendir-semantic-info' | '--zendir-semantic-success' | '--zendir-semantic-warning' | '--zendir-shadow-glow' | '--zendir-shadow-lg' | '--zendir-shadow-md' | '--zendir-shadow-none' | '--zendir-shadow-sm' | '--zendir-shadow-xl' | '--zendir-spacing-lg' | '--zendir-spacing-md' | '--zendir-spacing-sm' | '--zendir-spacing-xl' | '--zendir-spacing-xs' | '--zendir-spacing-xxl' | '--zendir-status-caution' | '--zendir-status-caution-border' | '--zendir-status-caution-light' | '--zendir-status-critical' | '--zendir-status-critical-border' | '--zendir-status-critical-light' | '--zendir-status-normal' | '--zendir-status-normal-border' | '--zendir-status-normal-light' | '--zendir-status-off' | '--zendir-status-off-border' | '--zendir-status-off-light' | '--zendir-status-serious' | '--zendir-status-serious-border' | '--zendir-status-serious-light' | '--zendir-status-standby' | '--zendir-status-standby-border' | '--zendir-status-standby-light' | '--zendir-text-muted' | '--zendir-text-primary' | '--zendir-text-secondary' | '--zendir-text-tertiary' | '--zendir-tw-blue-100' | '--zendir-tw-blue-200' | '--zendir-tw-blue-300' | '--zendir-tw-blue-400' | '--zendir-tw-blue-50' | '--zendir-tw-blue-500' | '--zendir-tw-blue-600' | '--zendir-tw-blue-700' | '--zendir-tw-blue-800' | '--zendir-tw-blue-900' | '--zendir-tw-blue-950' | '--zendir-tw-green-100' | '--zendir-tw-green-200' | '--zendir-tw-green-300' | '--zendir-tw-green-400' | '--zendir-tw-green-50' | '--zendir-tw-green-500' | '--zendir-tw-green-600' | '--zendir-tw-green-700' | '--zendir-tw-green-800' | '--zendir-tw-green-900' | '--zendir-tw-green-950' | '--zendir-tw-indigo-100' | '--zendir-tw-indigo-200' | '--zendir-tw-indigo-300' | '--zendir-tw-indigo-400' | '--zendir-tw-indigo-50' | '--zendir-tw-indigo-500' | '--zendir-tw-indigo-600' | '--zendir-tw-indigo-700' | '--zendir-tw-indigo-800' | '--zendir-tw-indigo-900' | '--zendir-tw-indigo-950' | '--zendir-tw-neutral-100' | '--zendir-tw-neutral-200' | '--zendir-tw-neutral-300' | '--zendir-tw-neutral-400' | '--zendir-tw-neutral-50' | '--zendir-tw-neutral-500' | '--zendir-tw-neutral-600' | '--zendir-tw-neutral-700' | '--zendir-tw-neutral-800' | '--zendir-tw-neutral-900' | '--zendir-tw-neutral-950' | '--zendir-tw-orange-100' | '--zendir-tw-orange-200' | '--zendir-tw-orange-300' | '--zendir-tw-orange-400' | '--zendir-tw-orange-50' | '--zendir-tw-orange-500' | '--zendir-tw-orange-600' | '--zendir-tw-orange-700' | '--zendir-tw-orange-800' | '--zendir-tw-orange-900' | '--zendir-tw-orange-950' | '--zendir-tw-pink-100' | '--zendir-tw-pink-200' | '--zendir-tw-pink-300' | '--zendir-tw-pink-400' | '--zendir-tw-pink-50' | '--zendir-tw-pink-500' | '--zendir-tw-pink-600' | '--zendir-tw-pink-700' | '--zendir-tw-pink-800' | '--zendir-tw-pink-900' | '--zendir-tw-pink-950' | '--zendir-tw-purple-100' | '--zendir-tw-purple-200' | '--zendir-tw-purple-300' | '--zendir-tw-purple-400' | '--zendir-tw-purple-50' | '--zendir-tw-purple-500' | '--zendir-tw-purple-600' | '--zendir-tw-purple-700' | '--zendir-tw-purple-800' | '--zendir-tw-purple-900' | '--zendir-tw-purple-950' | '--zendir-tw-red-100' | '--zendir-tw-red-200' | '--zendir-tw-red-300' | '--zendir-tw-red-400' | '--zendir-tw-red-50' | '--zendir-tw-red-500' | '--zendir-tw-red-600' | '--zendir-tw-red-700' | '--zendir-tw-red-800' | '--zendir-tw-red-900' | '--zendir-tw-red-950' | '--zendir-tw-rose-100' | '--zendir-tw-rose-200' | '--zendir-tw-rose-300' | '--zendir-tw-rose-400' | '--zendir-tw-rose-50' | '--zendir-tw-rose-500' | '--zendir-tw-rose-600' | '--zendir-tw-rose-700' | '--zendir-tw-rose-800' | '--zendir-tw-rose-900' | '--zendir-tw-rose-950' | '--zendir-tw-sky-100' | '--zendir-tw-sky-200' | '--zendir-tw-sky-300' | '--zendir-tw-sky-400' | '--zendir-tw-sky-50' | '--zendir-tw-sky-500' | '--zendir-tw-sky-600' | '--zendir-tw-sky-700' | '--zendir-tw-sky-800' | '--zendir-tw-sky-900' | '--zendir-tw-sky-950' | '--zendir-tw-slate-100' | '--zendir-tw-slate-200' | '--zendir-tw-slate-300' | '--zendir-tw-slate-400' | '--zendir-tw-slate-50' | '--zendir-tw-slate-500' | '--zendir-tw-slate-600' | '--zendir-tw-slate-700' | '--zendir-tw-slate-800' | '--zendir-tw-slate-900' | '--zendir-tw-slate-950' | '--zendir-tw-yellow-100' | '--zendir-tw-yellow-200' | '--zendir-tw-yellow-300' | '--zendir-tw-yellow-400' | '--zendir-tw-yellow-50' | '--zendir-tw-yellow-500' | '--zendir-tw-yellow-600' | '--zendir-tw-yellow-700' | '--zendir-tw-yellow-800' | '--zendir-tw-yellow-900' | '--zendir-tw-yellow-950' | '--zendir-uv-100' | '--zendir-uv-200' | '--zendir-uv-300' | '--zendir-uv-400' | '--zendir-uv-50' | '--zendir-uv-500' | '--zendir-uv-600' | '--zendir-uv-700' | '--zendir-uv-800' | '--zendir-uv-900' | '--zendir-uv-950';
 /** Array of every Zendir CSS variable name (alphabetised). */
 export declare const ALL_ZENDIR_CSS_VARS: readonly ZendirCSSVar[];