@zendir/ui 0.1.0

package/dist/tokens/index.d.ts

@@ -0,0 +1,296 @@
+/**
+ * @zendir/ui - Design Tokens
+ *
+ * Exportable design tokens for use in CSS and JavaScript.
+ * Based on Astro UX Design System.
+ */
+export declare const colors: {
+    readonly status: {
+        readonly critical: "#ff3838";
+        readonly serious: "#ffb302";
+        readonly caution: "#fce83a";
+        readonly normal: "#56f000";
+        readonly standby: "#2dccff";
+        readonly off: "#a4abb6";
+    };
+    readonly statusLightFill: {
+        readonly critical: "#ff2a04";
+        readonly serious: "#ffaf3d";
+        readonly caution: "#fad800";
+        readonly normal: "#00e200";
+        readonly standby: "#64d9ff";
+        readonly off: "#7b8089";
+    };
+    readonly statusLightBorder: {
+        readonly critical: "#661102";
+        readonly serious: "#664618";
+        readonly caution: "#645600";
+        readonly normal: "#005a00";
+        readonly standby: "#285766";
+        readonly off: "#3c3e42";
+    };
+    readonly background: {
+        readonly dark: {
+            readonly base: "#101923";
+            readonly surface: "#1b2d3e";
+            readonly elevated: "#243647";
+            readonly overlay: "rgba(0, 0, 0, 0.7)";
+        };
+        readonly light: {
+            readonly base: "#f5f6f9";
+            readonly surface: "#ffffff";
+            readonly elevated: "#ffffff";
+            readonly overlay: "rgba(0, 0, 0, 0.5)";
+        };
+    };
+    readonly text: {
+        readonly dark: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#9ea7ad";
+            readonly tertiary: "#6b7175";
+            readonly muted: "#52595f";
+        };
+        readonly light: {
+            readonly primary: "#1b2d3e";
+            readonly secondary: "#4c5a67";
+            readonly tertiary: "#7a8891";
+            readonly muted: "#a4adb5";
+        };
+    };
+    readonly accent: {
+        readonly primary: "#4dacff";
+        readonly secondary: "#3d8ddb";
+        readonly tertiary: "#2e6eb3";
+    };
+    readonly border: {
+        readonly dark: {
+            readonly default: "#3c4b5a";
+            readonly muted: "#2b3d4e";
+            readonly focus: "#4dacff";
+        };
+        readonly light: {
+            readonly default: "#c4c8cc";
+            readonly muted: "#e1e4e8";
+            readonly focus: "#4dacff";
+        };
+    };
+};
+export declare const spacing: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly md: "16px";
+    readonly lg: "24px";
+    readonly xl: "32px";
+    readonly xxl: "48px";
+};
+export declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "2px";
+    readonly md: "4px";
+    readonly lg: "8px";
+    readonly xl: "16px";
+    readonly 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
+ */
+export declare const typography: {
+    readonly fontFamily: {
+        /** Primary font: Roboto (AstroUXDS standard) */
+        readonly primary: "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+        /** Monospace font: Roboto Mono for data/code */
+        readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
+    };
+    readonly fontSize: {
+        readonly micro: "0.5625rem";
+        readonly xxs: "0.625rem";
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly md: "1.125rem";
+        readonly lg: "1.25rem";
+        readonly xl: "1.5rem";
+        readonly xxl: "2.125rem";
+        readonly xxxl: "3rem";
+        readonly display: "3.75rem";
+    };
+    /**
+     * Font weights per AstroUXDS specification
+     * Only 300, 400, 500, 700 are officially supported
+     */
+    readonly fontWeight: {
+        readonly light: 300;
+        readonly normal: 400;
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly bold: 700;
+        /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */
+        readonly semibold: 500;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+export declare const shadows: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.3)";
+    readonly md: "0 2px 8px rgba(0, 0, 0, 0.3)";
+    readonly lg: "0 4px 16px rgba(0, 0, 0, 0.3)";
+    readonly xl: "0 8px 32px rgba(0, 0, 0, 0.4)";
+    readonly glow: "0 0 20px rgba(77, 172, 255, 0.4)";
+};
+export declare const animation: {
+    readonly fast: "150ms ease";
+    readonly normal: "250ms ease";
+    readonly slow: "400ms ease";
+};
+export declare function generateCSSVariables(mode?: 'dark' | 'light'): string;
+declare const _default: {
+    colors: {
+        readonly status: {
+            readonly critical: "#ff3838";
+            readonly serious: "#ffb302";
+            readonly caution: "#fce83a";
+            readonly normal: "#56f000";
+            readonly standby: "#2dccff";
+            readonly off: "#a4abb6";
+        };
+        readonly statusLightFill: {
+            readonly critical: "#ff2a04";
+            readonly serious: "#ffaf3d";
+            readonly caution: "#fad800";
+            readonly normal: "#00e200";
+            readonly standby: "#64d9ff";
+            readonly off: "#7b8089";
+        };
+        readonly statusLightBorder: {
+            readonly critical: "#661102";
+            readonly serious: "#664618";
+            readonly caution: "#645600";
+            readonly normal: "#005a00";
+            readonly standby: "#285766";
+            readonly off: "#3c3e42";
+        };
+        readonly background: {
+            readonly dark: {
+                readonly base: "#101923";
+                readonly surface: "#1b2d3e";
+                readonly elevated: "#243647";
+                readonly overlay: "rgba(0, 0, 0, 0.7)";
+            };
+            readonly light: {
+                readonly base: "#f5f6f9";
+                readonly surface: "#ffffff";
+                readonly elevated: "#ffffff";
+                readonly overlay: "rgba(0, 0, 0, 0.5)";
+            };
+        };
+        readonly text: {
+            readonly dark: {
+                readonly primary: "#ffffff";
+                readonly secondary: "#9ea7ad";
+                readonly tertiary: "#6b7175";
+                readonly muted: "#52595f";
+            };
+            readonly light: {
+                readonly primary: "#1b2d3e";
+                readonly secondary: "#4c5a67";
+                readonly tertiary: "#7a8891";
+                readonly muted: "#a4adb5";
+            };
+        };
+        readonly accent: {
+            readonly primary: "#4dacff";
+            readonly secondary: "#3d8ddb";
+            readonly tertiary: "#2e6eb3";
+        };
+        readonly border: {
+            readonly dark: {
+                readonly default: "#3c4b5a";
+                readonly muted: "#2b3d4e";
+                readonly focus: "#4dacff";
+            };
+            readonly light: {
+                readonly default: "#c4c8cc";
+                readonly muted: "#e1e4e8";
+                readonly focus: "#4dacff";
+            };
+        };
+    };
+    spacing: {
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "16px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+        readonly xxl: "48px";
+    };
+    borderRadius: {
+        readonly none: "0";
+        readonly sm: "2px";
+        readonly md: "4px";
+        readonly lg: "8px";
+        readonly xl: "16px";
+        readonly full: "9999px";
+    };
+    typography: {
+        readonly fontFamily: {
+            /** Primary font: Roboto (AstroUXDS standard) */
+            readonly primary: "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+            /** Monospace font: Roboto Mono for data/code */
+            readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
+        };
+        readonly fontSize: {
+            readonly micro: "0.5625rem";
+            readonly xxs: "0.625rem";
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly md: "1.125rem";
+            readonly lg: "1.25rem";
+            readonly xl: "1.5rem";
+            readonly xxl: "2.125rem";
+            readonly xxxl: "3rem";
+            readonly display: "3.75rem";
+        };
+        /**
+         * Font weights per AstroUXDS specification
+         * Only 300, 400, 500, 700 are officially supported
+         */
+        readonly fontWeight: {
+            readonly light: 300;
+            readonly normal: 400;
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly bold: 700;
+            /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */
+            readonly semibold: 500;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.25;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+        };
+    };
+    shadows: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.3)";
+        readonly md: "0 2px 8px rgba(0, 0, 0, 0.3)";
+        readonly lg: "0 4px 16px rgba(0, 0, 0, 0.3)";
+        readonly xl: "0 8px 32px rgba(0, 0, 0, 0.4)";
+        readonly glow: "0 0 20px rgba(77, 172, 255, 0.4)";
+    };
+    animation: {
+        readonly fast: "150ms ease";
+        readonly normal: "250ms ease";
+        readonly slow: "400ms ease";
+    };
+    generateCSSVariables: typeof generateCSSVariables;
+};
+export default _default;

package/dist/tokens/index.js

@@ -0,0 +1,263 @@
+const colors = {
+  // Status Colors (Dark Theme)
+  status: {
+    critical: "#ff3838",
+    serious: "#ffb302",
+    caution: "#fce83a",
+    normal: "#56f000",
+    standby: "#2dccff",
+    off: "#a4abb6"
+  },
+  // Status Colors (Light Theme - Fill)
+  statusLightFill: {
+    critical: "#ff2a04",
+    serious: "#ffaf3d",
+    caution: "#fad800",
+    normal: "#00e200",
+    standby: "#64d9ff",
+    off: "#7b8089"
+  },
+  // Status Colors (Light Theme - Border)
+  statusLightBorder: {
+    critical: "#661102",
+    serious: "#664618",
+    caution: "#645600",
+    normal: "#005a00",
+    standby: "#285766",
+    off: "#3c3e42"
+  },
+  // Background Colors
+  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 Colors
+  text: {
+    dark: {
+      primary: "#ffffff",
+      secondary: "#9ea7ad",
+      tertiary: "#6b7175",
+      muted: "#52595f"
+    },
+    light: {
+      primary: "#1b2d3e",
+      secondary: "#4c5a67",
+      tertiary: "#7a8891",
+      muted: "#a4adb5"
+    }
+  },
+  // Accent Colors
+  accent: {
+    primary: "#4dacff",
+    secondary: "#3d8ddb",
+    tertiary: "#2e6eb3"
+  },
+  // Border Colors
+  border: {
+    dark: {
+      default: "#3c4b5a",
+      muted: "#2b3d4e",
+      focus: "#4dacff"
+    },
+    light: {
+      default: "#c4c8cc",
+      muted: "#e1e4e8",
+      focus: "#4dacff"
+    }
+  }
+};
+const spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  xxl: "48px"
+};
+const borderRadius = {
+  none: "0",
+  sm: "2px",
+  md: "4px",
+  lg: "8px",
+  xl: "16px",
+  full: "9999px"
+};
+const typography = {
+  fontFamily: {
+    /** Primary font: Roboto (AstroUXDS standard) */
+    primary: '"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: {
+    // Compact sizes for dense UIs (cards, badges, data labels)
+    micro: "0.5625rem",
+    // 9px - very tight spaces
+    xxs: "0.625rem",
+    // 10px - compact labels
+    // Standard sizes
+    xs: "0.75rem",
+    // 12px - small text, body3
+    sm: "0.875rem",
+    // 14px - body2
+    base: "1rem",
+    // 16px - body1
+    md: "1.125rem",
+    // 18px - h5/h6
+    lg: "1.25rem",
+    // 20px - h3/h4
+    xl: "1.5rem",
+    // 24px - h2
+    xxl: "2.125rem",
+    // 34px - h1
+    xxxl: "3rem",
+    // 48px - display2
+    display: "3.75rem"
+    // 60px - display1
+  },
+  /**
+   * Font weights per AstroUXDS specification
+   * Only 300, 400, 500, 700 are officially supported
+   */
+  fontWeight: {
+    light: 300,
+    normal: 400,
+    regular: 400,
+    // Alias for normal
+    medium: 500,
+    bold: 700,
+    // DEPRECATED: semibold is not in Astro spec, use medium (500) instead
+    /** @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
+  }
+};
+const 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)"
+};
+const animation = {
+  fast: "150ms ease",
+  normal: "250ms ease",
+  slow: "400ms ease"
+};
+function generateCSSVariables(mode = "dark") {
+  const bg = colors.background[mode];
+  const txt = colors.text[mode];
+  const bdr = colors.border[mode];
+  return `
+:root {
+  /* Status Colors */
+  --zendir-status-critical: ${colors.status.critical};
+  --zendir-status-serious: ${colors.status.serious};
+  --zendir-status-caution: ${colors.status.caution};
+  --zendir-status-normal: ${colors.status.normal};
+  --zendir-status-standby: ${colors.status.standby};
+  --zendir-status-off: ${colors.status.off};
+  
+  /* Background */
+  --zendir-bg-base: ${bg.base};
+  --zendir-bg-surface: ${bg.surface};
+  --zendir-bg-elevated: ${bg.elevated};
+  --zendir-bg-overlay: ${bg.overlay};
+  
+  /* Text */
+  --zendir-text-primary: ${txt.primary};
+  --zendir-text-secondary: ${txt.secondary};
+  --zendir-text-tertiary: ${txt.tertiary};
+  --zendir-text-muted: ${txt.muted};
+  
+  /* Accent */
+  --zendir-accent-primary: ${colors.accent.primary};
+  --zendir-accent-secondary: ${colors.accent.secondary};
+  --zendir-accent-tertiary: ${colors.accent.tertiary};
+  
+  /* Border */
+  --zendir-border-default: ${bdr.default};
+  --zendir-border-muted: ${bdr.muted};
+  --zendir-border-focus: ${bdr.focus};
+  
+  /* Spacing */
+  --zendir-spacing-xs: ${spacing.xs};
+  --zendir-spacing-sm: ${spacing.sm};
+  --zendir-spacing-md: ${spacing.md};
+  --zendir-spacing-lg: ${spacing.lg};
+  --zendir-spacing-xl: ${spacing.xl};
+  --zendir-spacing-xxl: ${spacing.xxl};
+  
+  /* Border Radius */
+  --zendir-radius-sm: ${borderRadius.sm};
+  --zendir-radius-md: ${borderRadius.md};
+  --zendir-radius-lg: ${borderRadius.lg};
+  --zendir-radius-xl: ${borderRadius.xl};
+  --zendir-radius-full: ${borderRadius.full};
+  
+  /* Typography - AstroUXDS Compliant */
+  --zendir-font-primary: ${typography.fontFamily.primary};
+  --zendir-font-mono: ${typography.fontFamily.mono};
+  --zendir-font-size-micro: ${typography.fontSize.micro};
+  --zendir-font-size-xxs: ${typography.fontSize.xxs};
+  --zendir-font-size-xs: ${typography.fontSize.xs};
+  --zendir-font-size-sm: ${typography.fontSize.sm};
+  --zendir-font-size-base: ${typography.fontSize.base};
+  --zendir-font-size-md: ${typography.fontSize.md};
+  --zendir-font-size-lg: ${typography.fontSize.lg};
+  --zendir-font-size-xl: ${typography.fontSize.xl};
+  --zendir-font-size-xxl: ${typography.fontSize.xxl};
+  --zendir-font-weight-light: ${typography.fontWeight.light};
+  --zendir-font-weight-normal: ${typography.fontWeight.normal};
+  --zendir-font-weight-medium: ${typography.fontWeight.medium};
+  --zendir-font-weight-bold: ${typography.fontWeight.bold};
+  
+  /* Shadows */
+  --zendir-shadow-sm: ${shadows.sm};
+  --zendir-shadow-md: ${shadows.md};
+  --zendir-shadow-lg: ${shadows.lg};
+  --zendir-shadow-xl: ${shadows.xl};
+  --zendir-shadow-glow: ${shadows.glow};
+  
+  /* Animation */
+  --zendir-animation-fast: ${animation.fast};
+  --zendir-animation-normal: ${animation.normal};
+  --zendir-animation-slow: ${animation.slow};
+}
+`.trim();
+}
+const index = {
+  colors,
+  spacing,
+  borderRadius,
+  typography,
+  shadows,
+  animation,
+  generateCSSVariables
+};
+export {
+  animation,
+  borderRadius,
+  colors,
+  index as default,
+  generateCSSVariables,
+  shadows,
+  spacing,
+  typography
+};
+//# sourceMappingURL=index.js.map

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * @zendir/ui - Design Tokens\n * \n * Exportable design tokens for use in CSS and JavaScript.\n * Based on Astro UX Design System.\n */\n\nexport const colors = {\n  // Status Colors (Dark Theme)\n  status: {\n    critical: '#ff3838',\n    serious: '#ffb302',\n    caution: '#fce83a',\n    normal: '#56f000',\n    standby: '#2dccff',\n    off: '#a4abb6',\n  },\n  \n  // Status Colors (Light Theme - Fill)\n  statusLightFill: {\n    critical: '#ff2a04',\n    serious: '#ffaf3d',\n    caution: '#fad800',\n    normal: '#00e200',\n    standby: '#64d9ff',\n    off: '#7b8089',\n  },\n  \n  // Status Colors (Light Theme - Border)\n  statusLightBorder: {\n    critical: '#661102',\n    serious: '#664618',\n    caution: '#645600',\n    normal: '#005a00',\n    standby: '#285766',\n    off: '#3c3e42',\n  },\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    /** Primary font: Roboto (AstroUXDS standard) */\n    primary: '\"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\n// CSS Custom Properties generator\nexport function generateCSSVariables(mode: 'dark' | 'light' = 'dark'): string {\n  const bg = colors.background[mode];\n  const txt = colors.text[mode];\n  const bdr = colors.border[mode];\n  \n  return `\n:root {\n  /* Status Colors */\n  --zendir-status-critical: ${colors.status.critical};\n  --zendir-status-serious: ${colors.status.serious};\n  --zendir-status-caution: ${colors.status.caution};\n  --zendir-status-normal: ${colors.status.normal};\n  --zendir-status-standby: ${colors.status.standby};\n  --zendir-status-off: ${colors.status.off};\n  \n  /* Background */\n  --zendir-bg-base: ${bg.base};\n  --zendir-bg-surface: ${bg.surface};\n  --zendir-bg-elevated: ${bg.elevated};\n  --zendir-bg-overlay: ${bg.overlay};\n  \n  /* Text */\n  --zendir-text-primary: ${txt.primary};\n  --zendir-text-secondary: ${txt.secondary};\n  --zendir-text-tertiary: ${txt.tertiary};\n  --zendir-text-muted: ${txt.muted};\n  \n  /* Accent */\n  --zendir-accent-primary: ${colors.accent.primary};\n  --zendir-accent-secondary: ${colors.accent.secondary};\n  --zendir-accent-tertiary: ${colors.accent.tertiary};\n  \n  /* Border */\n  --zendir-border-default: ${bdr.default};\n  --zendir-border-muted: ${bdr.muted};\n  --zendir-border-focus: ${bdr.focus};\n  \n  /* Spacing */\n  --zendir-spacing-xs: ${spacing.xs};\n  --zendir-spacing-sm: ${spacing.sm};\n  --zendir-spacing-md: ${spacing.md};\n  --zendir-spacing-lg: ${spacing.lg};\n  --zendir-spacing-xl: ${spacing.xl};\n  --zendir-spacing-xxl: ${spacing.xxl};\n  \n  /* Border Radius */\n  --zendir-radius-sm: ${borderRadius.sm};\n  --zendir-radius-md: ${borderRadius.md};\n  --zendir-radius-lg: ${borderRadius.lg};\n  --zendir-radius-xl: ${borderRadius.xl};\n  --zendir-radius-full: ${borderRadius.full};\n  \n  /* Typography - AstroUXDS Compliant */\n  --zendir-font-primary: ${typography.fontFamily.primary};\n  --zendir-font-mono: ${typography.fontFamily.mono};\n  --zendir-font-size-micro: ${typography.fontSize.micro};\n  --zendir-font-size-xxs: ${typography.fontSize.xxs};\n  --zendir-font-size-xs: ${typography.fontSize.xs};\n  --zendir-font-size-sm: ${typography.fontSize.sm};\n  --zendir-font-size-base: ${typography.fontSize.base};\n  --zendir-font-size-md: ${typography.fontSize.md};\n  --zendir-font-size-lg: ${typography.fontSize.lg};\n  --zendir-font-size-xl: ${typography.fontSize.xl};\n  --zendir-font-size-xxl: ${typography.fontSize.xxl};\n  --zendir-font-weight-light: ${typography.fontWeight.light};\n  --zendir-font-weight-normal: ${typography.fontWeight.normal};\n  --zendir-font-weight-medium: ${typography.fontWeight.medium};\n  --zendir-font-weight-bold: ${typography.fontWeight.bold};\n  \n  /* Shadows */\n  --zendir-shadow-sm: ${shadows.sm};\n  --zendir-shadow-md: ${shadows.md};\n  --zendir-shadow-lg: ${shadows.lg};\n  --zendir-shadow-xl: ${shadows.xl};\n  --zendir-shadow-glow: ${shadows.glow};\n  \n  /* Animation */\n  --zendir-animation-fast: ${animation.fast};\n  --zendir-animation-normal: ${animation.normal};\n  --zendir-animation-slow: ${animation.slow};\n}\n`.trim();\n}\n\nexport default {\n  colors,\n  spacing,\n  borderRadius,\n  typography,\n  shadows,\n  animation,\n  generateCSSVariables,\n};\n"],"names":[],"mappings":"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"}