@zendir/ui 0.2.21 → 0.3.1

package/dist/tokens/index.js

@@ -77,19 +77,29 @@ const colors = {
   }
 };
 const spacing = {
+  xxs: "2px",
   xs: "4px",
   sm: "8px",
+  smd: "12px",
   md: "16px",
+  mdl: "20px",
   lg: "24px",
   xl: "32px",
   xxl: "48px"
 };
 const borderRadius = {
   none: "0",
+  xs: "1px",
   sm: "2px",
   md: "4px",
   lg: "8px",
-  xl: "16px",
+  /**
+   * 12px. Sized for surfaces (Container, Card, SidePanel). Matches the
+   * value already in use across zendir-ui components and the operator's
+   * LandingPage. Was 16px in earlier docs — corrected here so the JS
+   * tokens and the auto-generated CSS variables agree.
+   */
+  xl: "12px",
   full: "9999px"
 };
 const typography = {
@@ -101,31 +111,39 @@ const typography = {
     /** Monospace font: Roboto Mono for data/code */
     mono: '"Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace'
   },
+  /**
+   * Convenience numeric scale used by ~300+ existing zendir-ui components
+   * via `tokens.typography.fontSize.*`. Density-tuned for data-rich UIs.
+   *
+   * For semantically-named typographic styles (display1/2, h1-h6, body1-3,
+   * control1) use the `display` / `heading` / `body` / `control` preset
+   * objects on `<ThemeProvider>` instead — those follow the canonical
+   * AstroUXDS scale.
+   */
   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
+    xs: "0.625rem",
+    // 10px - compact (alias of xxs, kept for back-compat)
+    sm: "0.75rem",
+    // 12px - body 3
+    base: "0.875rem",
+    // 14px - body 2
+    md: "0.875rem",
+    // 14px - body 2 (alias of base)
+    lg: "1rem",
+    // 16px - body 1
+    xl: "1.25rem",
+    // 20px - heading 3/4
+    xxl: "1.5rem",
+    // 24px - heading 2
+    xxxl: "2.125rem",
+    // 34px - heading 1
     display: "3.75rem"
-    // 60px - display1
+    // 60px - display 1
   },
   /**
    * Font weights per AstroUXDS specification
@@ -161,87 +179,176 @@ const animation = {
   normal: "250ms ease",
   slow: "400ms ease"
 };
-function generateCSSVariables(mode = "dark") {
+function buildInvariantBlock() {
+  return [
+    "  /* ============================================================",
+    "   * STATUS COLORS (Astro UX Compliant)",
+    "   * ============================================================ */",
+    `  --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};`,
+    "",
+    "  /* Light-theme status fill colors */",
+    `  --zendir-status-critical-light: ${colors.statusLightFill.critical};`,
+    `  --zendir-status-serious-light: ${colors.statusLightFill.serious};`,
+    `  --zendir-status-caution-light: ${colors.statusLightFill.caution};`,
+    `  --zendir-status-normal-light: ${colors.statusLightFill.normal};`,
+    `  --zendir-status-standby-light: ${colors.statusLightFill.standby};`,
+    `  --zendir-status-off-light: ${colors.statusLightFill.off};`,
+    "",
+    "  /* Light-theme status border colors */",
+    `  --zendir-status-critical-border: ${colors.statusLightBorder.critical};`,
+    `  --zendir-status-serious-border: ${colors.statusLightBorder.serious};`,
+    `  --zendir-status-caution-border: ${colors.statusLightBorder.caution};`,
+    `  --zendir-status-normal-border: ${colors.statusLightBorder.normal};`,
+    `  --zendir-status-standby-border: ${colors.statusLightBorder.standby};`,
+    `  --zendir-status-off-border: ${colors.statusLightBorder.off};`,
+    "",
+    "  /* ============================================================",
+    "   * ACCENT COLORS",
+    "   * ============================================================ */",
+    `  --zendir-accent-primary: ${colors.accent.primary};`,
+    `  --zendir-accent-secondary: ${colors.accent.secondary};`,
+    `  --zendir-accent-tertiary: ${colors.accent.tertiary};`,
+    "",
+    "  /* ============================================================",
+    "   * 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-none: ${borderRadius.none};`,
+    `  --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",
+    "   * Public Sans leads body, Sora leads headings, Roboto is the",
+    "   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.",
+    "   * @see https://www.astrouxds.com/foundations/typography/",
+    "   * ============================================================ */",
+    `  --zendir-font-primary: ${typography.fontFamily.primary};`,
+    `  --zendir-font-heading: ${typography.fontFamily.heading};`,
+    `  --zendir-font-mono: ${typography.fontFamily.mono};`,
+    "",
+    "  /* Font sizes (rem-based, AstroUXDS scale) */",
+    `  --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-size-xxxl: ${typography.fontSize.xxxl};`,
+    `  --zendir-font-size-display: ${typography.fontSize.display};`,
+    "",
+    "  /* Font weights — AstroUXDS supports only 300/400/500/700 */",
+    `  --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};`,
+    "",
+    "  /* Line heights */",
+    `  --zendir-line-height-tight: ${typography.lineHeight.tight};`,
+    `  --zendir-line-height-normal: ${typography.lineHeight.normal};`,
+    `  --zendir-line-height-relaxed: ${typography.lineHeight.relaxed};`,
+    "",
+    "  /* ============================================================",
+    "   * SHADOWS",
+    "   * ============================================================ */",
+    `  --zendir-shadow-none: ${shadows.none};`,
+    `  --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};`
+  ].join("\n");
+}
+function buildModeBlock(mode) {
   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};
+  return [
+    `  --zendir-bg-base: ${bg.base};`,
+    `  --zendir-bg-surface: ${bg.surface};`,
+    `  --zendir-bg-elevated: ${bg.elevated};`,
+    `  --zendir-bg-overlay: ${bg.overlay};`,
+    "",
+    `  --zendir-text-primary: ${txt.primary};`,
+    `  --zendir-text-secondary: ${txt.secondary};`,
+    `  --zendir-text-tertiary: ${txt.tertiary};`,
+    `  --zendir-text-muted: ${txt.muted};`,
+    "",
+    `  --zendir-border-default: ${bdr.default};`,
+    `  --zendir-border-muted: ${bdr.muted};`,
+    `  --zendir-border-focus: ${bdr.focus};`
+  ].join("\n");
+}
+function generateCSSVariables(mode = "dark") {
+  return [
+    ":root {",
+    buildInvariantBlock(),
+    "",
+    `  /* ${mode === "dark" ? "Dark" : "Light"}-theme color overrides */`,
+    buildModeBlock(mode),
+    "}"
+  ].join("\n");
 }
-`.trim();
+function generateCSSStylesheet() {
+  return [
+    "/**",
+    " * @zendir/ui — CSS Design Tokens",
+    " *",
+    " * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.",
+    " * Regenerate with: npm run build:tokens",
+    " *",
+    " * Usage:",
+    " *   @import '@zendir/ui/tokens/css';",
+    " *   .my-component { background: var(--zendir-bg-surface); }",
+    " */",
+    "",
+    ":root {",
+    buildInvariantBlock(),
+    "}",
+    "",
+    "/* ============================================================",
+    " * DARK THEME (default)",
+    " * ============================================================ */",
+    ":root,",
+    '[data-theme="dark"] {',
+    buildModeBlock("dark"),
+    "}",
+    "",
+    "/* ============================================================",
+    " * LIGHT THEME",
+    " * ============================================================ */",
+    '[data-theme="light"] {',
+    buildModeBlock("light"),
+    "}",
+    ""
+  ].join("\n");
 }
 const index = {
   colors,
@@ -250,13 +357,15 @@ const index = {
   typography,
   shadows,
   animation,
-  generateCSSVariables
+  generateCSSVariables,
+  generateCSSStylesheet
 };
 export {
   animation,
   borderRadius,
   colors,
   index as default,
+  generateCSSStylesheet,
   generateCSSVariables,
   shadows,
   spacing,

package/dist/tokens/index.js.map

@@ -1 +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    /** Heading font: Sora (Zendir Brand Standard) */\n    heading: '\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    /** Primary font: Public Sans (Zendir Brand Standard) */\n    primary: '\"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\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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"}
+{"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  xxs: '2px',\n  xs: '4px',\n  sm: '8px',\n  smd: '12px',\n  md: '16px',\n  mdl: '20px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n} as const;\n\nexport const borderRadius = {\n  none: '0',\n  xs: '1px',\n  sm: '2px',\n  md: '4px',\n  lg: '8px',\n  /**\n   * 12px. Sized for surfaces (Container, Card, SidePanel). Matches the\n   * value already in use across zendir-ui components and the operator's\n   * LandingPage. Was 16px in earlier docs — corrected here so the JS\n   * tokens and the auto-generated CSS variables agree.\n   */\n  xl: '12px',\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: '\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    /** Primary font: Public Sans (Zendir Brand Standard) */\n    primary: '\"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  /**\n   * Convenience numeric scale used by ~300+ existing zendir-ui components\n   * via `tokens.typography.fontSize.*`. Density-tuned for data-rich UIs.\n   *\n   * For semantically-named typographic styles (display1/2, h1-h6, body1-3,\n   * control1) use the `display` / `heading` / `body` / `control` preset\n   * objects on `<ThemeProvider>` instead — those follow the canonical\n   * AstroUXDS scale.\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    xs: '0.625rem',     // 10px - compact (alias of xxs, kept for back-compat)\n    sm: '0.75rem',      // 12px - body 3\n    base: '0.875rem',   // 14px - body 2\n    md: '0.875rem',     // 14px - body 2 (alias of base)\n    lg: '1rem',         // 16px - body 1\n    xl: '1.25rem',      // 20px - heading 3/4\n    xxl: '1.5rem',      // 24px - heading 2\n    xxxl: '2.125rem',   // 34px - heading 1\n    display: '3.75rem', // 60px - display 1\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// ============================================================================\n// CSS Custom Properties generator\n//\n// Single source of truth for the tokens.css file. Run via\n// `npm run build:tokens` (scripts/build-tokens.ts) — it imports this file\n// and writes the result to src/tokens/tokens.css.\n//\n// Two callable surfaces:\n//   • generateCSSVariables(mode)         — single :root block for one mode\n//                                          (legacy, kept for backward-compat)\n//   • generateCSSStylesheet()            — full tokens.css equivalent with\n//                                          mode-invariant block + dark + light\n//                                          [data-theme=\"…\"] overrides. This is\n//                                          what scripts/build-tokens.ts uses.\n// ============================================================================\n\n/**\n * Build a CSS rule body for the mode-invariant tokens (status, accent,\n * spacing, radius, typography, shadows, animation). These don't change\n * between light/dark — they're shared.\n */\nfunction buildInvariantBlock(): string {\n  return [\n    '  /* ============================================================',\n    '   * STATUS COLORS (Astro UX Compliant)',\n    '   * ============================================================ */',\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    '  /* Light-theme status fill colors */',\n    `  --zendir-status-critical-light: ${colors.statusLightFill.critical};`,\n    `  --zendir-status-serious-light: ${colors.statusLightFill.serious};`,\n    `  --zendir-status-caution-light: ${colors.statusLightFill.caution};`,\n    `  --zendir-status-normal-light: ${colors.statusLightFill.normal};`,\n    `  --zendir-status-standby-light: ${colors.statusLightFill.standby};`,\n    `  --zendir-status-off-light: ${colors.statusLightFill.off};`,\n    '',\n    '  /* Light-theme status border colors */',\n    `  --zendir-status-critical-border: ${colors.statusLightBorder.critical};`,\n    `  --zendir-status-serious-border: ${colors.statusLightBorder.serious};`,\n    `  --zendir-status-caution-border: ${colors.statusLightBorder.caution};`,\n    `  --zendir-status-normal-border: ${colors.statusLightBorder.normal};`,\n    `  --zendir-status-standby-border: ${colors.statusLightBorder.standby};`,\n    `  --zendir-status-off-border: ${colors.statusLightBorder.off};`,\n    '',\n    '  /* ============================================================',\n    '   * ACCENT COLORS',\n    '   * ============================================================ */',\n    `  --zendir-accent-primary: ${colors.accent.primary};`,\n    `  --zendir-accent-secondary: ${colors.accent.secondary};`,\n    `  --zendir-accent-tertiary: ${colors.accent.tertiary};`,\n    '',\n    '  /* ============================================================',\n    '   * SPACING',\n    '   * ============================================================ */',\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    '  /* ============================================================',\n    '   * BORDER RADIUS',\n    '   * ============================================================ */',\n    `  --zendir-radius-none: ${borderRadius.none};`,\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    '  /* ============================================================',\n    '   * TYPOGRAPHY',\n    '   * Public Sans leads body, Sora leads headings, Roboto is the',\n    '   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.',\n    '   * @see https://www.astrouxds.com/foundations/typography/',\n    '   * ============================================================ */',\n    `  --zendir-font-primary: ${typography.fontFamily.primary};`,\n    `  --zendir-font-heading: ${typography.fontFamily.heading};`,\n    `  --zendir-font-mono: ${typography.fontFamily.mono};`,\n    '',\n    '  /* Font sizes (rem-based, AstroUXDS scale) */',\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-size-xxxl: ${typography.fontSize.xxxl};`,\n    `  --zendir-font-size-display: ${typography.fontSize.display};`,\n    '',\n    '  /* Font weights — AstroUXDS supports only 300/400/500/700 */',\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    '  /* Line heights */',\n    `  --zendir-line-height-tight: ${typography.lineHeight.tight};`,\n    `  --zendir-line-height-normal: ${typography.lineHeight.normal};`,\n    `  --zendir-line-height-relaxed: ${typography.lineHeight.relaxed};`,\n    '',\n    '  /* ============================================================',\n    '   * SHADOWS',\n    '   * ============================================================ */',\n    `  --zendir-shadow-none: ${shadows.none};`,\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    '  /* ============================================================',\n    '   * ANIMATION',\n    '   * ============================================================ */',\n    `  --zendir-animation-fast: ${animation.fast};`,\n    `  --zendir-animation-normal: ${animation.normal};`,\n    `  --zendir-animation-slow: ${animation.slow};`,\n  ].join('\\n');\n}\n\n/** Build the mode-specific block (background + text + border). */\nfunction buildModeBlock(mode: 'dark' | 'light'): string {\n  const bg = colors.background[mode];\n  const txt = colors.text[mode];\n  const bdr = colors.border[mode];\n  return [\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    `  --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    `  --zendir-border-default: ${bdr.default};`,\n    `  --zendir-border-muted: ${bdr.muted};`,\n    `  --zendir-border-focus: ${bdr.focus};`,\n  ].join('\\n');\n}\n\n/**\n * Single-mode generator. Emits one `:root { … }` block with the\n * mode-invariant tokens AND the chosen mode's bg/text/border.\n *\n * Useful for runtime injection — `<style>` tags written by SSR helpers\n * that target a single mode.\n */\nexport function generateCSSVariables(mode: 'dark' | 'light' = 'dark'): string {\n  return [\n    ':root {',\n    buildInvariantBlock(),\n    '',\n    `  /* ${mode === 'dark' ? 'Dark' : 'Light'}-theme color overrides */`,\n    buildModeBlock(mode),\n    '}',\n  ].join('\\n');\n}\n\n/**\n * Full stylesheet generator. Emits the complete tokens.css equivalent —\n * mode-invariant `:root` block plus `:root, [data-theme=\"dark\"]` and\n * `[data-theme=\"light\"]` mode overrides. This is what scripts/build-tokens.ts\n * writes to src/tokens/tokens.css.\n */\nexport function generateCSSStylesheet(): string {\n  return [\n    '/**',\n    ' * @zendir/ui — CSS Design Tokens',\n    ' *',\n    ' * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.',\n    ' * Regenerate with: npm run build:tokens',\n    ' *',\n    ' * Usage:',\n    \" *   @import '@zendir/ui/tokens/css';\",\n    ' *   .my-component { background: var(--zendir-bg-surface); }',\n    ' */',\n    '',\n    ':root {',\n    buildInvariantBlock(),\n    '}',\n    '',\n    '/* ============================================================',\n    ' * DARK THEME (default)',\n    ' * ============================================================ */',\n    ':root,',\n    '[data-theme=\"dark\"] {',\n    buildModeBlock('dark'),\n    '}',\n    '',\n    '/* ============================================================',\n    ' * LIGHT THEME',\n    ' * ============================================================ */',\n    '[data-theme=\"light\"] {',\n    buildModeBlock('light'),\n    '}',\n    '',\n  ].join('\\n');\n}\n\nexport default {\n  colors,\n  spacing,\n  borderRadius,\n  typography,\n  shadows,\n  animation,\n  generateCSSVariables,\n  generateCSSStylesheet,\n};\n"],"names":[],"mappings":"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"}

package/dist/tokens/tokens.css

@@ -1,21 +1,18 @@
 /**
- * @zendir/ui - CSS Design Tokens
- * 
- * Import this file to use Zendir design tokens as CSS custom properties.
- * 
+ * @zendir/ui — CSS Design Tokens
+ *
+ * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.
+ * Regenerate with: npm run build:tokens
+ *
  * Usage:
  *   @import '@zendir/ui/tokens/css';
- *   
- *   .my-component {
- *     background: var(--zendir-bg-surface);
- *     color: var(--zendir-text-primary);
- *   }
+ *   .my-component { background: var(--zendir-bg-surface); }
  */
 
 :root {
-  /* ========================================
+  /* ============================================================
    * STATUS COLORS (Astro UX Compliant)
-   * ======================================== */
+   * ============================================================ */
   --zendir-status-critical: #ff3838;
   --zendir-status-serious: #ffb302;
   --zendir-status-caution: #fce83a;
@@ -23,7 +20,7 @@
   --zendir-status-standby: #2dccff;
   --zendir-status-off: #a4abb6;
 
-  /* Light Theme Status Fill Colors */
+  /* Light-theme status fill colors */
   --zendir-status-critical-light: #ff2a04;
   --zendir-status-serious-light: #ffaf3d;
   --zendir-status-caution-light: #fad800;
@@ -31,7 +28,7 @@
   --zendir-status-standby-light: #64d9ff;
   --zendir-status-off-light: #7b8089;
 
-  /* Light Theme Status Border Colors */
+  /* Light-theme status border colors */
   --zendir-status-critical-border: #661102;
   --zendir-status-serious-border: #664618;
   --zendir-status-caution-border: #645600;
@@ -39,16 +36,16 @@
   --zendir-status-standby-border: #285766;
   --zendir-status-off-border: #3c3e42;
 
-  /* ========================================
+  /* ============================================================
    * ACCENT COLORS
-   * ======================================== */
+   * ============================================================ */
   --zendir-accent-primary: #4dacff;
   --zendir-accent-secondary: #3d8ddb;
   --zendir-accent-tertiary: #2e6eb3;
 
-  /* ========================================
+  /* ============================================================
    * SPACING
-   * ======================================== */
+   * ============================================================ */
   --zendir-spacing-xs: 4px;
   --zendir-spacing-sm: 8px;
   --zendir-spacing-md: 16px;
@@ -56,50 +53,53 @@
   --zendir-spacing-xl: 32px;
   --zendir-spacing-xxl: 48px;
 
-  /* ========================================
+  /* ============================================================
    * BORDER RADIUS
-   * ======================================== */
+   * ============================================================ */
   --zendir-radius-none: 0;
   --zendir-radius-sm: 2px;
   --zendir-radius-md: 4px;
   --zendir-radius-lg: 8px;
-  --zendir-radius-xl: 16px;
+  --zendir-radius-xl: 12px;
   --zendir-radius-full: 9999px;
 
-  /* ========================================
-   * TYPOGRAPHY - AstroUXDS Compliant
+  /* ============================================================
+   * TYPOGRAPHY
+   * Public Sans leads body, Sora leads headings, Roboto is the
+   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.
    * @see https://www.astrouxds.com/foundations/typography/
-   * ======================================== */
-  --zendir-font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-  --zendir-font-mono: 'Roboto Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
-
-  /* Compact sizes for dense UIs */
-  --zendir-font-size-micro: 0.5625rem; /* 9px */
-  --zendir-font-size-xxs: 0.625rem;    /* 10px */
-  /* Standard sizes */
-  --zendir-font-size-xs: 0.75rem;      /* 12px */
-  --zendir-font-size-sm: 0.875rem;     /* 14px */
-  --zendir-font-size-base: 1rem;       /* 16px */
-  --zendir-font-size-md: 1.125rem;     /* 18px */
-  --zendir-font-size-lg: 1.25rem;      /* 20px */
-  --zendir-font-size-xl: 1.5rem;       /* 24px */
-  --zendir-font-size-xxl: 2rem;        /* 32px */
-  --zendir-font-size-xxxl: 2.5rem;     /* 40px */
-
-  /* Font weights per AstroUXDS: only 300, 400, 500, 700 */
+   * ============================================================ */
+  --zendir-font-primary: "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --zendir-font-heading: "Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --zendir-font-mono: "Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
+
+  /* Font sizes (rem-based, AstroUXDS scale) */
+  --zendir-font-size-micro: 0.5625rem;
+  --zendir-font-size-xxs: 0.625rem;
+  --zendir-font-size-xs: 0.625rem;
+  --zendir-font-size-sm: 0.75rem;
+  --zendir-font-size-base: 0.875rem;
+  --zendir-font-size-md: 0.875rem;
+  --zendir-font-size-lg: 1rem;
+  --zendir-font-size-xl: 1.25rem;
+  --zendir-font-size-xxl: 1.5rem;
+  --zendir-font-size-xxxl: 2.125rem;
+  --zendir-font-size-display: 3.75rem;
+
+  /* Font weights — AstroUXDS supports only 300/400/500/700 */
   --zendir-font-weight-light: 300;
   --zendir-font-weight-normal: 400;
   --zendir-font-weight-medium: 500;
-  --zendir-font-weight-semibold: 500; /* Use medium (500) - Astro doesn't support 600 */
   --zendir-font-weight-bold: 700;
 
+  /* Line heights */
   --zendir-line-height-tight: 1.25;
   --zendir-line-height-normal: 1.5;
   --zendir-line-height-relaxed: 1.75;
 
-  /* ========================================
+  /* ============================================================
    * SHADOWS
-   * ======================================== */
+   * ============================================================ */
   --zendir-shadow-none: none;
   --zendir-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --zendir-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -107,17 +107,17 @@
   --zendir-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
   --zendir-shadow-glow: 0 0 20px rgba(77, 172, 255, 0.4);
 
-  /* ========================================
+  /* ============================================================
    * ANIMATION
-   * ======================================== */
+   * ============================================================ */
   --zendir-animation-fast: 150ms ease;
   --zendir-animation-normal: 250ms ease;
   --zendir-animation-slow: 400ms ease;
 }
 
-/* ========================================
- * DARK THEME (Default)
- * ======================================== */
+/* ============================================================
+ * DARK THEME (default)
+ * ============================================================ */
 :root,
 [data-theme="dark"] {
   --zendir-bg-base: #101923;
@@ -135,9 +135,9 @@
   --zendir-border-focus: #4dacff;
 }
 
-/* ========================================
+/* ============================================================
  * LIGHT THEME
- * ======================================== */
+ * ============================================================ */
 [data-theme="light"] {
   --zendir-bg-base: #f5f6f9;
   --zendir-bg-surface: #ffffff;