@zendir/ui 0.5.0 → 0.6.0

package/dist/react/charts/unified/theme.js

@@ -1,665 +1,629 @@
-const ZENDIR_BRAND_COLORS = {
-  // === Core Brand Colors ===
-  /** Electric - Primary accent (#3E3CFF) */
-  electric: "#3E3CFF",
-  /** Purple - Secondary accent (#9D70FF) */
-  purple: "#9D70FF",
-  /** Prussian Blue - Subsections (#1B2DA0) */
-  prussianBlue: "#1B2DA0",
-  /** Black */
-  black: "#000000",
-  /** White */
-  white: "#FFFFFF",
-  // === Electric Shades (10%, 20%, 35% overlays) ===
-  electricLighter: "#9997FF",
-  // 35% white overlay
-  electricLight: "#6B69FF",
-  // 20% white overlay  
-  electricSoft: "#5250FF",
-  // 10% white overlay
-  electricDark: "#3836E6",
-  // 10% black overlay
-  electricDarker: "#3230CC",
-  // 20% black overlay
-  electricDeep: "#2926A3",
-  // 35% black overlay
-  // === Purple Shades ===
-  purpleLighter: "#C9A8FF",
-  // 35% white overlay
-  purpleLight: "#B48DFF",
-  // 20% white overlay
-  purpleSoft: "#A97FFF",
-  // 10% white overlay
-  purpleDark: "#8E64E6",
-  // 10% black overlay
-  purpleDarker: "#7E5ACC",
-  // 20% black overlay
-  purpleDeep: "#5F4499",
-  // 35% black overlay
-  // === Prussian Blue Shades ===
-  prussianBlueLighter: "#4A5FD6",
-  // 35% white overlay
-  prussianBlueLight: "#3548C0",
-  // 20% white overlay
-  prussianBlueSoft: "#2838B0",
-  // 10% white overlay
-  prussianBlueDark: "#182890",
-  // 10% black overlay
-  prussianBlueDarker: "#142380",
-  // 20% black overlay
-  prussianBlueDeep: "#0F1A60"
-  // 35% black overlay
+//#region src/react/charts/unified/theme.ts
+/**
+* Zendir Brand Colors (from Brand Guide v2026)
+* Core: Electric (#3E3CFF), Purple (#9D70FF), Prussian Blue (#1B2DA0)
+* Shades derived using 10%, 20%, 35% white/black overlays per brand guide
+*/
+var ZENDIR_BRAND_COLORS = {
+	/** Electric - Primary accent (#3E3CFF) */
+	electric: "#3E3CFF",
+	/** Purple - Secondary accent (#9D70FF) */
+	purple: "#9D70FF",
+	/** Prussian Blue - Subsections (#1B2DA0) */
+	prussianBlue: "#1B2DA0",
+	/** Black */
+	black: "#000000",
+	/** White */
+	white: "#FFFFFF",
+	electricLighter: "#9997FF",
+	electricLight: "#6B69FF",
+	electricSoft: "#5250FF",
+	electricDark: "#3836E6",
+	electricDarker: "#3230CC",
+	electricDeep: "#2926A3",
+	purpleLighter: "#C9A8FF",
+	purpleLight: "#B48DFF",
+	purpleSoft: "#A97FFF",
+	purpleDark: "#8E64E6",
+	purpleDarker: "#7E5ACC",
+	purpleDeep: "#5F4499",
+	prussianBlueLighter: "#4A5FD6",
+	prussianBlueLight: "#3548C0",
+	prussianBlueSoft: "#2838B0",
+	prussianBlueDark: "#182890",
+	prussianBlueDarker: "#142380",
+	prussianBlueDeep: "#0F1A60"
 };
-const OFFICIAL_ASTRO_DATA_VIZ_COLORS = {
-  /** Official AstroUXDS data visualization palette (8 colors) */
-  primary: [
-    "#00c7cb",
-    // color-data-visualization-1 - Teal 500
-    "#938bdb",
-    // color-data-visualization-2 - Purple 400
-    "#4dacff",
-    // color-data-visualization-3 - Brightblue 500
-    "#70dde0",
-    // color-data-visualization-4 - Teal 300
-    "#c9c5ed",
-    // color-data-visualization-5 - Purple 200
-    "#92cbff",
-    // color-data-visualization-6 - Brightblue 400
-    "#a1e9eb",
-    // color-data-visualization-7 - Teal 200
-    "#b7dcff"
-    // color-data-visualization-8 - Brightblue 300
-  ],
-  /** Extended palette - primary + additional derived colors for 11 max */
-  extended: [
-    "#00c7cb",
-    // Teal 500 - Primary
-    "#938bdb",
-    // Purple 400 - Secondary
-    "#4dacff",
-    // Brightblue 500
-    "#70dde0",
-    // Teal 300
-    "#c9c5ed",
-    // Purple 200
-    "#92cbff",
-    // Brightblue 400
-    "#a1e9eb",
-    // Teal 200
-    "#b7dcff",
-    // Brightblue 300
-    "#009a9d",
-    // Teal 600 (darker)
-    "#756bb8",
-    // Purple 500 (darker)
-    "#2b659b"
-    // Brightblue 700 (darker)
-  ],
-  /** Sequential palettes for heatmaps using AstroUXDS colors */
-  sequential: {
-    /** Teal sequential */
-    teal: ["#e5f9f9", "#a1e9eb", "#70dde0", "#00c7cb", "#009a9d", "#006e70"],
-    /** Purple sequential */
-    purple: ["#eceaf7", "#c9c5ed", "#a9a3dc", "#938bdb", "#756bb8", "#5b5299"],
-    /** Brightblue sequential */
-    brightblue: ["#e8f4ff", "#b7dcff", "#92cbff", "#4dacff", "#2b659b", "#1c3f5e"],
-    /** Thermal - Status colors for temperature */
-    thermal: ["#00c7cb", "#56f000", "#fce83a", "#ffb302", "#ff6b35", "#ff3838"]
-  }
+/**
+* Official AstroUXDS Data Visualization Color Palette
+* Per https://astrouxds.com/design-tokens/system/#data-viz
+*
+* These are the OFFICIAL AstroUXDS data visualization colors from the design system.
+* Use these for pure AstroUXDS compliance (e.g., 'astro' theme).
+*
+* @see https://astrouxds.com/design-tokens/system/
+*/
+var OFFICIAL_ASTRO_DATA_VIZ_COLORS = {
+	/** Official AstroUXDS data visualization palette (8 colors) */
+	primary: [
+		"#00c7cb",
+		"#938bdb",
+		"#4dacff",
+		"#70dde0",
+		"#c9c5ed",
+		"#92cbff",
+		"#a1e9eb",
+		"#b7dcff"
+	],
+	/** Extended palette - primary + additional derived colors for 11 max */
+	extended: [
+		"#00c7cb",
+		"#938bdb",
+		"#4dacff",
+		"#70dde0",
+		"#c9c5ed",
+		"#92cbff",
+		"#a1e9eb",
+		"#b7dcff",
+		"#009a9d",
+		"#756bb8",
+		"#2b659b"
+	],
+	/** Sequential palettes for heatmaps using AstroUXDS colors */
+	sequential: {
+		/** Teal sequential */
+		teal: [
+			"#e5f9f9",
+			"#a1e9eb",
+			"#70dde0",
+			"#00c7cb",
+			"#009a9d",
+			"#006e70"
+		],
+		/** Purple sequential */
+		purple: [
+			"#eceaf7",
+			"#c9c5ed",
+			"#a9a3dc",
+			"#938bdb",
+			"#756bb8",
+			"#5b5299"
+		],
+		/** Brightblue sequential */
+		brightblue: [
+			"#e8f4ff",
+			"#b7dcff",
+			"#92cbff",
+			"#4dacff",
+			"#2b659b",
+			"#1c3f5e"
+		],
+		/** Thermal - Status colors for temperature */
+		thermal: [
+			"#00c7cb",
+			"#56f000",
+			"#fce83a",
+			"#ffb302",
+			"#ff6b35",
+			"#ff3838"
+		]
+	}
 };
-const ASTRO_DATA_VIZ_COLORS = {
-  /** 
-   * Primary data visualization palette - Pure Zendir Brand
-   * Uses only Zendir brand colors and their derived shades
-   * Max 11 colors per AstroUXDS compliance requirement 3.2.1
-   * 
-   * NOTE: Status colors (green, yellow, red) reserved for status indication only
-   */
-  mixed: [
-    ZENDIR_BRAND_COLORS.electric,
-    // #3E3CFF - Primary
-    ZENDIR_BRAND_COLORS.purple,
-    // #9D70FF - Secondary
-    ZENDIR_BRAND_COLORS.electricLight,
-    // #6B69FF - Electric 20% lighter
-    ZENDIR_BRAND_COLORS.purpleLight,
-    // #B48DFF - Purple 20% lighter
-    ZENDIR_BRAND_COLORS.prussianBlueLight,
-    // #3548C0 - Prussian Blue lighter
-    ZENDIR_BRAND_COLORS.electricLighter,
-    // #9997FF - Electric 35% lighter
-    ZENDIR_BRAND_COLORS.purpleLighter,
-    // #C9A8FF - Purple 35% lighter
-    ZENDIR_BRAND_COLORS.prussianBlue,
-    // #1B2DA0 - Prussian Blue
-    ZENDIR_BRAND_COLORS.electricDarker,
-    // #3230CC - Electric 20% darker
-    ZENDIR_BRAND_COLORS.purpleDarker,
-    // #7E5ACC - Purple 20% darker
-    ZENDIR_BRAND_COLORS.prussianBlueLighter
-    // #4A5FD6 - Prussian Blue lightest
-  ],
-  /** 
-   * Zendir Brand palette - Full brand spectrum
-   * Complete set of Zendir brand colors for maximum brand expression
-   */
-  zendir: [
-    ZENDIR_BRAND_COLORS.electric,
-    // #3E3CFF - Primary
-    ZENDIR_BRAND_COLORS.purple,
-    // #9D70FF - Secondary
-    ZENDIR_BRAND_COLORS.electricLight,
-    // #6B69FF
-    ZENDIR_BRAND_COLORS.purpleLight,
-    // #B48DFF
-    ZENDIR_BRAND_COLORS.prussianBlue,
-    // #1B2DA0
-    ZENDIR_BRAND_COLORS.electricLighter,
-    // #9997FF
-    ZENDIR_BRAND_COLORS.purpleLighter,
-    // #C9A8FF
-    ZENDIR_BRAND_COLORS.prussianBlueLight
-    // #3548C0
-  ],
-  /** 
-   * Extended Zendir palette - All shades for complex visualizations
-   * Includes dark and light variants for maximum differentiation
-   */
-  zendirExtended: [
-    ZENDIR_BRAND_COLORS.electric,
-    // #3E3CFF
-    ZENDIR_BRAND_COLORS.purple,
-    // #9D70FF
-    ZENDIR_BRAND_COLORS.prussianBlue,
-    // #1B2DA0
-    ZENDIR_BRAND_COLORS.electricLight,
-    // #6B69FF
-    ZENDIR_BRAND_COLORS.purpleLight,
-    // #B48DFF
-    ZENDIR_BRAND_COLORS.prussianBlueLight,
-    // #3548C0
-    ZENDIR_BRAND_COLORS.electricLighter,
-    // #9997FF
-    ZENDIR_BRAND_COLORS.purpleLighter,
-    // #C9A8FF
-    ZENDIR_BRAND_COLORS.electricDarker,
-    // #3230CC
-    ZENDIR_BRAND_COLORS.purpleDarker,
-    // #7E5ACC
-    ZENDIR_BRAND_COLORS.prussianBlueDarker
-    // #142380
-  ],
-  /** 
-   * Cool palette - Blues and purples
-   * Professional Zendir-branded cool tones
-   */
-  cool: [
-    ZENDIR_BRAND_COLORS.electric,
-    // #3E3CFF
-    ZENDIR_BRAND_COLORS.prussianBlue,
-    // #1B2DA0
-    ZENDIR_BRAND_COLORS.purple,
-    // #9D70FF
-    ZENDIR_BRAND_COLORS.electricLight,
-    // #6B69FF
-    ZENDIR_BRAND_COLORS.prussianBlueLight,
-    // #3548C0
-    ZENDIR_BRAND_COLORS.purpleLight,
-    // #B48DFF
-    ZENDIR_BRAND_COLORS.electricLighter,
-    // #9997FF
-    ZENDIR_BRAND_COLORS.prussianBlueLighter
-    // #4A5FD6
-  ],
-  /** 
-   * Warm accent palette - For charts needing warm tones
-   * Use sparingly - not part of Zendir brand
-   */
-  warm: [
-    "#ffb302",
-    // Amber
-    "#ff9966",
-    // Coral
-    "#fce83a",
-    // Yellow
-    "#ff6b6b",
-    // Salmon
-    "#f0a000",
-    // Orange
-    "#ffcc80",
-    // Peach
-    "#e0a86c",
-    // Tan
-    "#d4b896"
-    // Sand
-  ],
-  /** 
-   * Electric-Purple gradient palette (Zendir brand gradient)
-   * Matches the official brand gradient from Electric to Purple
-   */
-  electricPurple: [
-    ZENDIR_BRAND_COLORS.electric,
-    // #3E3CFF
-    ZENDIR_BRAND_COLORS.electricSoft,
-    // #5250FF
-    ZENDIR_BRAND_COLORS.electricLight,
-    // #6B69FF
-    "#8070FF",
-    // Blend E→P
-    ZENDIR_BRAND_COLORS.purple,
-    // #9D70FF
-    ZENDIR_BRAND_COLORS.purpleLight,
-    // #B48DFF
-    ZENDIR_BRAND_COLORS.purpleLighter,
-    // #C9A8FF
-    "#DCC4FF"
-    // Lightest
-  ],
-  /** 
-   * Prussian-Electric gradient palette
-   * Deep to vibrant brand progression
-   */
-  prussianElectric: [
-    ZENDIR_BRAND_COLORS.prussianBlueDarker,
-    // #142380
-    ZENDIR_BRAND_COLORS.prussianBlue,
-    // #1B2DA0
-    ZENDIR_BRAND_COLORS.prussianBlueLight,
-    // #3548C0
-    ZENDIR_BRAND_COLORS.electricDarker,
-    // #3230CC
-    ZENDIR_BRAND_COLORS.electric,
-    // #3E3CFF
-    ZENDIR_BRAND_COLORS.electricLight
-    // #6B69FF
-  ],
-  /** 
-   * Full Zendir spectrum gradient
-   * Prussian Blue → Electric → Purple
-   */
-  zendirSpectrum: [
-    ZENDIR_BRAND_COLORS.prussianBlue,
-    // #1B2DA0
-    ZENDIR_BRAND_COLORS.prussianBlueLight,
-    // #3548C0
-    ZENDIR_BRAND_COLORS.electric,
-    // #3E3CFF
-    ZENDIR_BRAND_COLORS.electricLight,
-    // #6B69FF
-    ZENDIR_BRAND_COLORS.purple,
-    // #9D70FF
-    ZENDIR_BRAND_COLORS.purpleLight
-    // #B48DFF
-  ],
-  /**
-   * Sequential palettes for heatmaps and gradual data
-   * Zendir brand-forward gradients
-   */
-  sequential: {
-    /** Zendir Electric sequential - Primary brand gradient */
-    electric: ["#E8E8FF", "#C9C8FF", "#9997FF", "#6B69FF", "#3E3CFF", "#3230CC", "#262499"],
-    /** Zendir Purple sequential - Secondary brand gradient */
-    purple: ["#F0E8FF", "#DCC4FF", "#C9A8FF", "#B48DFF", "#9D70FF", "#7E5ACC", "#5F4499"],
-    /** Zendir Prussian Blue sequential - Deep brand gradient */
-    prussianBlue: ["#E8ECFF", "#C5CFF0", "#8A9DD6", "#4A5FD6", "#3548C0", "#1B2DA0", "#0F1A60"],
-    /** Zendir gradient - Electric → Purple blend */
-    brand: ["#3E3CFF", "#5250FF", "#6B69FF", "#7E70FF", "#9D70FF", "#B48DFF", "#C9A8FF"],
-    /** Thermal - Status colors for temperature (AstroUXDS compliant) */
-    thermal: ["#00C7CB", "#56F000", "#FCE83A", "#FFB302", "#FF6B35", "#FF3838"]
-  }
+/**
+* Zendir-branded Data Visualization Color Palette
+* Uses Zendir brand colors (Electric, Purple, Prussian Blue)
+* while maintaining AstroUXDS compliance (max 11 colors, colorblind-accessible)
+*
+* @see https://www.astrouxds.com/patterns/data-visualization/
+*/
+var ASTRO_DATA_VIZ_COLORS = {
+	/**
+	* Primary data visualization palette - Pure Zendir Brand
+	* Uses only Zendir brand colors and their derived shades
+	* Max 11 colors per AstroUXDS compliance requirement 3.2.1
+	*
+	* NOTE: Status colors (green, yellow, red) reserved for status indication only
+	*/
+	mixed: [
+		ZENDIR_BRAND_COLORS.electric,
+		ZENDIR_BRAND_COLORS.purple,
+		ZENDIR_BRAND_COLORS.electricLight,
+		ZENDIR_BRAND_COLORS.purpleLight,
+		ZENDIR_BRAND_COLORS.prussianBlueLight,
+		ZENDIR_BRAND_COLORS.electricLighter,
+		ZENDIR_BRAND_COLORS.purpleLighter,
+		ZENDIR_BRAND_COLORS.prussianBlue,
+		ZENDIR_BRAND_COLORS.electricDarker,
+		ZENDIR_BRAND_COLORS.purpleDarker,
+		ZENDIR_BRAND_COLORS.prussianBlueLighter
+	],
+	/**
+	* Zendir Brand palette - Full brand spectrum
+	* Complete set of Zendir brand colors for maximum brand expression
+	*/
+	zendir: [
+		ZENDIR_BRAND_COLORS.electric,
+		ZENDIR_BRAND_COLORS.purple,
+		ZENDIR_BRAND_COLORS.electricLight,
+		ZENDIR_BRAND_COLORS.purpleLight,
+		ZENDIR_BRAND_COLORS.prussianBlue,
+		ZENDIR_BRAND_COLORS.electricLighter,
+		ZENDIR_BRAND_COLORS.purpleLighter,
+		ZENDIR_BRAND_COLORS.prussianBlueLight
+	],
+	/**
+	* Extended Zendir palette - All shades for complex visualizations
+	* Includes dark and light variants for maximum differentiation
+	*/
+	zendirExtended: [
+		ZENDIR_BRAND_COLORS.electric,
+		ZENDIR_BRAND_COLORS.purple,
+		ZENDIR_BRAND_COLORS.prussianBlue,
+		ZENDIR_BRAND_COLORS.electricLight,
+		ZENDIR_BRAND_COLORS.purpleLight,
+		ZENDIR_BRAND_COLORS.prussianBlueLight,
+		ZENDIR_BRAND_COLORS.electricLighter,
+		ZENDIR_BRAND_COLORS.purpleLighter,
+		ZENDIR_BRAND_COLORS.electricDarker,
+		ZENDIR_BRAND_COLORS.purpleDarker,
+		ZENDIR_BRAND_COLORS.prussianBlueDarker
+	],
+	/**
+	* Cool palette - Blues and purples
+	* Professional Zendir-branded cool tones
+	*/
+	cool: [
+		ZENDIR_BRAND_COLORS.electric,
+		ZENDIR_BRAND_COLORS.prussianBlue,
+		ZENDIR_BRAND_COLORS.purple,
+		ZENDIR_BRAND_COLORS.electricLight,
+		ZENDIR_BRAND_COLORS.prussianBlueLight,
+		ZENDIR_BRAND_COLORS.purpleLight,
+		ZENDIR_BRAND_COLORS.electricLighter,
+		ZENDIR_BRAND_COLORS.prussianBlueLighter
+	],
+	/**
+	* Warm accent palette - For charts needing warm tones
+	* Use sparingly - not part of Zendir brand
+	*/
+	warm: [
+		"#ffb302",
+		"#ff9966",
+		"#fce83a",
+		"#ff6b6b",
+		"#f0a000",
+		"#ffcc80",
+		"#e0a86c",
+		"#d4b896"
+	],
+	/**
+	* Electric-Purple gradient palette (Zendir brand gradient)
+	* Matches the official brand gradient from Electric to Purple
+	*/
+	electricPurple: [
+		ZENDIR_BRAND_COLORS.electric,
+		ZENDIR_BRAND_COLORS.electricSoft,
+		ZENDIR_BRAND_COLORS.electricLight,
+		"#8070FF",
+		ZENDIR_BRAND_COLORS.purple,
+		ZENDIR_BRAND_COLORS.purpleLight,
+		ZENDIR_BRAND_COLORS.purpleLighter,
+		"#DCC4FF"
+	],
+	/**
+	* Prussian-Electric gradient palette
+	* Deep to vibrant brand progression
+	*/
+	prussianElectric: [
+		ZENDIR_BRAND_COLORS.prussianBlueDarker,
+		ZENDIR_BRAND_COLORS.prussianBlue,
+		ZENDIR_BRAND_COLORS.prussianBlueLight,
+		ZENDIR_BRAND_COLORS.electricDarker,
+		ZENDIR_BRAND_COLORS.electric,
+		ZENDIR_BRAND_COLORS.electricLight
+	],
+	/**
+	* Full Zendir spectrum gradient
+	* Prussian Blue → Electric → Purple
+	*/
+	zendirSpectrum: [
+		ZENDIR_BRAND_COLORS.prussianBlue,
+		ZENDIR_BRAND_COLORS.prussianBlueLight,
+		ZENDIR_BRAND_COLORS.electric,
+		ZENDIR_BRAND_COLORS.electricLight,
+		ZENDIR_BRAND_COLORS.purple,
+		ZENDIR_BRAND_COLORS.purpleLight
+	],
+	/**
+	* Sequential palettes for heatmaps and gradual data
+	* Zendir brand-forward gradients
+	*/
+	sequential: {
+		/** Zendir Electric sequential - Primary brand gradient */
+		electric: [
+			"#E8E8FF",
+			"#C9C8FF",
+			"#9997FF",
+			"#6B69FF",
+			"#3E3CFF",
+			"#3230CC",
+			"#262499"
+		],
+		/** Zendir Purple sequential - Secondary brand gradient */
+		purple: [
+			"#F0E8FF",
+			"#DCC4FF",
+			"#C9A8FF",
+			"#B48DFF",
+			"#9D70FF",
+			"#7E5ACC",
+			"#5F4499"
+		],
+		/** Zendir Prussian Blue sequential - Deep brand gradient */
+		prussianBlue: [
+			"#E8ECFF",
+			"#C5CFF0",
+			"#8A9DD6",
+			"#4A5FD6",
+			"#3548C0",
+			"#1B2DA0",
+			"#0F1A60"
+		],
+		/** Zendir gradient - Electric → Purple blend */
+		brand: [
+			"#3E3CFF",
+			"#5250FF",
+			"#6B69FF",
+			"#7E70FF",
+			"#9D70FF",
+			"#B48DFF",
+			"#C9A8FF"
+		],
+		/** Thermal - Status colors for temperature (AstroUXDS compliant) */
+		thermal: [
+			"#00C7CB",
+			"#56F000",
+			"#FCE83A",
+			"#FFB302",
+			"#FF6B35",
+			"#FF3838"
+		]
+	}
 };
-const STATUS_COLORS = {
-  normal: "#56f000",
-  // Green - System operating normally
-  standby: "#2dccff",
-  // Cyan - Awaiting/standby state
-  caution: "#fce83a",
-  // Yellow - Requires attention
-  serious: "#ffb302",
-  // Orange - Significant issue
-  critical: "#ff3838",
-  // Red - Immediate action required
-  off: "#a4abb6"
-  // Grey - Inactive/off state
+/**
+* AstroUXDS Status Colors (DO NOT MODIFY)
+* Per https://www.astrouxds.com/patterns/status-system/
+*
+* These colors are RESERVED for status indication only.
+* Per compliance requirement, do not use status colors for
+* non-status data visualization.
+*
+* @see https://www.astrouxds.com/compliance/astro-design-compliance/
+* Rule 3.1.2: Elements indicating state shall use only specified Status Colors
+*/
+var STATUS_COLORS = {
+	normal: "#56f000",
+	standby: "#2dccff",
+	caution: "#fce83a",
+	serious: "#ffb302",
+	critical: "#ff3838",
+	off: "#a4abb6"
 };
-({
-  /** Primary accent - Zendir Electric */
-  primary: ZENDIR_BRAND_COLORS.electric,
-  /** Secondary accent - Zendir Purple */
-  secondary: ZENDIR_BRAND_COLORS.purple,
-  /** Tertiary accent - Zendir Prussian Blue */
-  tertiary: ZENDIR_BRAND_COLORS.prussianBlue,
-  /** Info accent - Prussian Blue Light */
-  info: ZENDIR_BRAND_COLORS.prussianBlueLight,
-  /** Highlight - Electric Light */
-  highlight: ZENDIR_BRAND_COLORS.electricLight
-});
+ZENDIR_BRAND_COLORS.electric, ZENDIR_BRAND_COLORS.purple, ZENDIR_BRAND_COLORS.prussianBlue, ZENDIR_BRAND_COLORS.prussianBlueLight, ZENDIR_BRAND_COLORS.electricLight;
+/**
+* Generate ECharts theme from Astro tokens
+*
+* Creates a theme that:
+* - Uses official AstroUXDS colors for 'astro' theme variant
+* - Uses Zendir brand colors for all other theme variants
+* - Maintains AstroUXDS compliance (max 11 colors, 14pt min font)
+* - Preserves status colors for their reserved purposes
+* - Supports both dark and light modes
+*
+* @param tokens - Theme tokens from ThemeProvider
+* @param mode - Current theme mode ('dark' | 'light')
+* @param themeVariant - Optional theme variant to determine color palette
+* @returns ECharts theme configuration
+*/
 function createAstroEChartsTheme(tokens, mode, themeVariant) {
-  const isDark = mode === "dark";
-  const isAstroTheme = themeVariant === "astro";
-  const dataVizColors = isAstroTheme ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended] : ASTRO_DATA_VIZ_COLORS.mixed;
-  return {
-    // Data visualization color palette
-    // - 'astro' theme: Official AstroUXDS colors (teal, purple, brightblue)
-    // - Other themes: Zendir brand colors (electric, purple, prussian blue)
-    color: dataVizColors,
-    // Background
-    backgroundColor: "transparent",
-    // Global text style - 14pt minimum per AstroUXDS; no white border on labels
-    textStyle: {
-      color: tokens.colors.text.primary,
-      fontFamily: tokens.typography.fontFamily.primary,
-      fontSize: 14,
-      // AstroUXD minimum requirement
-      textBorderWidth: 0,
-      textBorderColor: "transparent"
-    },
-    // Title - Grey for readability, AstroUXDS compliant
-    title: {
-      textStyle: {
-        color: tokens.colors.text.secondary,
-        // Grey for headings
-        fontSize: 14,
-        fontWeight: "bold",
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      },
-      subtextStyle: {
-        color: tokens.colors.text.tertiary,
-        fontSize: 12,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      }
-    },
-    // Legend
-    legend: {
-      textStyle: {
-        color: tokens.colors.text.secondary,
-        fontSize: 12,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      },
-      inactiveColor: tokens.colors.text.tertiary
-    },
-    // Tooltip
-    tooltip: {
-      backgroundColor: isDark ? "rgba(27, 45, 62, 0.95)" : "rgba(255, 255, 255, 0.95)",
-      borderColor: tokens.colors.border.default,
-      borderWidth: 1,
-      textStyle: {
-        color: tokens.colors.text.primary,
-        fontSize: 12,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      },
-      extraCssText: `
+	const isDark = mode === "dark";
+	const isAstroTheme = themeVariant === "astro";
+	return {
+		color: isAstroTheme ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended] : ASTRO_DATA_VIZ_COLORS.mixed,
+		backgroundColor: "transparent",
+		textStyle: {
+			color: tokens.colors.text.primary,
+			fontFamily: tokens.typography.fontFamily.primary,
+			fontSize: 14,
+			textBorderWidth: 0,
+			textBorderColor: "transparent"
+		},
+		title: {
+			textStyle: {
+				color: tokens.colors.text.secondary,
+				fontSize: 14,
+				fontWeight: "bold",
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			},
+			subtextStyle: {
+				color: tokens.colors.text.tertiary,
+				fontSize: 12,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			}
+		},
+		legend: {
+			textStyle: {
+				color: tokens.colors.text.secondary,
+				fontSize: 12,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			},
+			inactiveColor: tokens.colors.text.tertiary
+		},
+		tooltip: {
+			backgroundColor: isDark ? "rgba(27, 45, 62, 0.95)" : "rgba(255, 255, 255, 0.95)",
+			borderColor: tokens.colors.border.default,
+			borderWidth: 1,
+			textStyle: {
+				color: tokens.colors.text.primary,
+				fontSize: 12,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			},
+			extraCssText: `
         border-radius: ${tokens.borderRadius.md};
         box-shadow: ${tokens.shadows.lg};
         backdrop-filter: blur(8px);
       `
-    },
-    // Axis pointer / crosshair - Subtle grey for clarity
-    axisPointer: {
-      lineStyle: {
-        color: tokens.colors.text.tertiary,
-        // Subtle grey
-        width: 1
-      },
-      crossStyle: {
-        color: tokens.colors.text.tertiary,
-        // Subtle grey
-        width: 1
-      }
-    },
-    // X Axis
-    xAxis: {
-      axisLine: {
-        lineStyle: {
-          color: tokens.colors.border.default
-        }
-      },
-      axisTick: {
-        lineStyle: {
-          color: tokens.colors.border.muted
-        }
-      },
-      axisLabel: {
-        color: tokens.colors.text.secondary,
-        fontSize: 12,
-        fontFamily: tokens.typography.fontFamily.mono,
-        // Tabular numbers
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      },
-      splitLine: {
-        lineStyle: {
-          color: tokens.colors.border.muted,
-          type: "dashed"
-        }
-      },
-      nameTextStyle: {
-        color: tokens.colors.text.secondary,
-        fontSize: 12,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      }
-    },
-    // Y Axis
-    yAxis: {
-      axisLine: {
-        lineStyle: {
-          color: tokens.colors.border.default
-        }
-      },
-      axisTick: {
-        lineStyle: {
-          color: tokens.colors.border.muted
-        }
-      },
-      axisLabel: {
-        color: tokens.colors.text.secondary,
-        fontSize: 12,
-        fontFamily: tokens.typography.fontFamily.mono,
-        // Tabular numbers
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      },
-      splitLine: {
-        lineStyle: {
-          color: tokens.colors.border.muted,
-          type: "dashed"
-        }
-      },
-      nameTextStyle: {
-        color: tokens.colors.text.secondary,
-        fontSize: 12,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      }
-    },
-    // Series defaults
-    series: {
-      line: {
-        lineStyle: {
-          width: 2
-        },
-        symbolSize: 6
-      },
-      bar: {
-        barMaxWidth: 40,
-        itemStyle: {
-          borderRadius: [4, 4, 0, 0]
-        }
-      },
-      pie: {
-        itemStyle: {
-          borderColor: tokens.colors.background.surface,
-          borderWidth: 2
-        },
-        label: {
-          color: tokens.colors.text.primary,
-          textBorderWidth: 0,
-          textBorderColor: "transparent",
-          fontSize: 12
-        }
-      },
-      scatter: {
-        symbolSize: 10
-      },
-      gauge: {
-        axisLine: {
-          lineStyle: {
-            width: 10
-          }
-        }
-      }
-    },
-    // Data zoom - Theme-aware interactive controls
-    dataZoom: {
-      backgroundColor: isDark ? "rgba(27, 45, 62, 0.5)" : "rgba(234, 238, 244, 0.5)",
-      borderColor: tokens.colors.border.muted,
-      // Astro theme uses brightblue, others use Zendir Electric
-      fillerColor: isAstroTheme ? "rgba(77, 172, 255, 0.15)" : "rgba(62, 60, 255, 0.15)",
-      // Zendir Electric
-      handleColor: isAstroTheme ? "#4dacff" : ZENDIR_BRAND_COLORS.electric,
-      // Zendir Electric
-      textStyle: {
-        color: tokens.colors.text.secondary,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      }
-    },
-    // Visual map (for heatmaps) - Theme-aware sequential palette
-    visualMap: {
-      textStyle: {
-        color: tokens.colors.text.secondary,
-        textBorderWidth: 0,
-        textBorderColor: "transparent"
-      },
-      inRange: {
-        // Astro theme uses official teal gradient, others use Zendir Electric
-        color: isAstroTheme ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal] : ASTRO_DATA_VIZ_COLORS.sequential.electric
-      }
-    },
-    // Grid
-    grid: {
-      borderColor: tokens.colors.border.muted
-    }
-  };
+		},
+		axisPointer: {
+			lineStyle: {
+				color: tokens.colors.text.tertiary,
+				width: 1
+			},
+			crossStyle: {
+				color: tokens.colors.text.tertiary,
+				width: 1
+			}
+		},
+		xAxis: {
+			axisLine: { lineStyle: { color: tokens.colors.border.default } },
+			axisTick: { lineStyle: { color: tokens.colors.border.muted } },
+			axisLabel: {
+				color: tokens.colors.text.secondary,
+				fontSize: 12,
+				fontFamily: tokens.typography.fontFamily.mono,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			},
+			splitLine: { lineStyle: {
+				color: tokens.colors.border.muted,
+				type: "dashed"
+			} },
+			nameTextStyle: {
+				color: tokens.colors.text.secondary,
+				fontSize: 12,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			}
+		},
+		yAxis: {
+			axisLine: { lineStyle: { color: tokens.colors.border.default } },
+			axisTick: { lineStyle: { color: tokens.colors.border.muted } },
+			axisLabel: {
+				color: tokens.colors.text.secondary,
+				fontSize: 12,
+				fontFamily: tokens.typography.fontFamily.mono,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			},
+			splitLine: { lineStyle: {
+				color: tokens.colors.border.muted,
+				type: "dashed"
+			} },
+			nameTextStyle: {
+				color: tokens.colors.text.secondary,
+				fontSize: 12,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			}
+		},
+		series: {
+			line: {
+				lineStyle: { width: 2 },
+				symbolSize: 6
+			},
+			bar: {
+				barMaxWidth: 40,
+				itemStyle: { borderRadius: [
+					4,
+					4,
+					0,
+					0
+				] }
+			},
+			pie: {
+				itemStyle: {
+					borderColor: tokens.colors.background.surface,
+					borderWidth: 2
+				},
+				label: {
+					color: tokens.colors.text.primary,
+					textBorderWidth: 0,
+					textBorderColor: "transparent",
+					fontSize: 12
+				}
+			},
+			scatter: { symbolSize: 10 },
+			gauge: { axisLine: { lineStyle: { width: 10 } } }
+		},
+		dataZoom: {
+			backgroundColor: isDark ? "rgba(27, 45, 62, 0.5)" : "rgba(234, 238, 244, 0.5)",
+			borderColor: tokens.colors.border.muted,
+			fillerColor: isAstroTheme ? "rgba(77, 172, 255, 0.15)" : "rgba(62, 60, 255, 0.15)",
+			handleColor: isAstroTheme ? "#4dacff" : ZENDIR_BRAND_COLORS.electric,
+			textStyle: {
+				color: tokens.colors.text.secondary,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			}
+		},
+		visualMap: {
+			textStyle: {
+				color: tokens.colors.text.secondary,
+				textBorderWidth: 0,
+				textBorderColor: "transparent"
+			},
+			inRange: { color: isAstroTheme ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal] : ASTRO_DATA_VIZ_COLORS.sequential.electric }
+		},
+		grid: { borderColor: tokens.colors.border.muted }
+	};
 }
+/**
+* Get status color from value and thresholds
+*/
 function getStatusColor(value, thresholds) {
-  if (thresholds.critical !== void 0 && value >= thresholds.critical) {
-    return STATUS_COLORS.critical;
-  }
-  if (thresholds.serious !== void 0 && value >= thresholds.serious) {
-    return STATUS_COLORS.serious;
-  }
-  if (thresholds.caution !== void 0 && value >= thresholds.caution) {
-    return STATUS_COLORS.caution;
-  }
-  return STATUS_COLORS.normal;
+	if (thresholds.critical !== void 0 && value >= thresholds.critical) return STATUS_COLORS.critical;
+	if (thresholds.serious !== void 0 && value >= thresholds.serious) return STATUS_COLORS.serious;
+	if (thresholds.caution !== void 0 && value >= thresholds.caution) return STATUS_COLORS.caution;
+	return STATUS_COLORS.normal;
 }
+/**
+* Get color for series by index (wraps around palette)
+*
+* @param index - Series index
+* @param palette - Color palette to use (defaults to Zendir-Astro mixed)
+* @returns Hex color string
+*
+* @example
+* ```tsx
+* // Uses Zendir-Astro fusion palette
+* const color = getSeriesColor(0); // #3E3CFF (Zendir Electric)
+*
+* // Use Zendir-only palette
+* const brandColor = getSeriesColor(0, ASTRO_DATA_VIZ_COLORS.zendir);
+* ```
+*/
 function getSeriesColor(index, palette = ASTRO_DATA_VIZ_COLORS.mixed) {
-  return palette[index % palette.length];
+	return palette[index % palette.length];
 }
+/**
+* Get appropriate palette based on data type and optional theme
+*
+* @param dataType - Type of data being visualized
+* @param useAstroTheme - If true, uses official AstroUXDS colors; otherwise Zendir colors
+* @returns Appropriate color palette
+*
+* @example
+* ```tsx
+* // For general multi-series data (Zendir brand - default)
+* const colors = getPaletteForDataType('categorical');
+*
+* // For official AstroUXDS colors
+* const astroColors = getPaletteForDataType('categorical', true);
+*
+* // For Zendir brand-forward charts
+* const brandColors = getPaletteForDataType('zendir');
+*
+* // For official AstroUXDS palette explicitly
+* const officialColors = getPaletteForDataType('astro-official');
+*
+* // For status-based data (uses reserved AstroUXDS status colors)
+* const statusColors = getPaletteForDataType('status');
+* ```
+*/
 function getPaletteForDataType(dataType, useAstroTheme = false) {
-  if (useAstroTheme && (dataType === "categorical" || dataType === "sequential")) {
-    return dataType === "sequential" ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal] : [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];
-  }
-  switch (dataType) {
-    case "astro-official":
-      return [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];
-    case "categorical":
-      return ASTRO_DATA_VIZ_COLORS.mixed;
-    case "zendir":
-      return ASTRO_DATA_VIZ_COLORS.zendir;
-    case "zendirExtended":
-      return ASTRO_DATA_VIZ_COLORS.zendirExtended;
-    case "sequential":
-      return ASTRO_DATA_VIZ_COLORS.sequential.electric;
-    case "diverging":
-      return [...ASTRO_DATA_VIZ_COLORS.sequential.electric].reverse().concat(ASTRO_DATA_VIZ_COLORS.sequential.purple);
-    case "status":
-      return [
-        STATUS_COLORS.normal,
-        STATUS_COLORS.standby,
-        STATUS_COLORS.caution,
-        STATUS_COLORS.serious,
-        STATUS_COLORS.critical
-      ];
-    case "cool":
-      return ASTRO_DATA_VIZ_COLORS.cool;
-    case "warm":
-      return ASTRO_DATA_VIZ_COLORS.warm;
-    default:
-      return ASTRO_DATA_VIZ_COLORS.mixed;
-  }
+	if (useAstroTheme && (dataType === "categorical" || dataType === "sequential")) return dataType === "sequential" ? [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.sequential.teal] : [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];
+	switch (dataType) {
+		case "astro-official": return [...OFFICIAL_ASTRO_DATA_VIZ_COLORS.extended];
+		case "categorical": return ASTRO_DATA_VIZ_COLORS.mixed;
+		case "zendir": return ASTRO_DATA_VIZ_COLORS.zendir;
+		case "zendirExtended": return ASTRO_DATA_VIZ_COLORS.zendirExtended;
+		case "sequential": return ASTRO_DATA_VIZ_COLORS.sequential.electric;
+		case "diverging": return [...ASTRO_DATA_VIZ_COLORS.sequential.electric].reverse().concat(ASTRO_DATA_VIZ_COLORS.sequential.purple);
+		case "status": return [
+			STATUS_COLORS.normal,
+			STATUS_COLORS.standby,
+			STATUS_COLORS.caution,
+			STATUS_COLORS.serious,
+			STATUS_COLORS.critical
+		];
+		case "cool": return ASTRO_DATA_VIZ_COLORS.cool;
+		case "warm": return ASTRO_DATA_VIZ_COLORS.warm;
+		default: return ASTRO_DATA_VIZ_COLORS.mixed;
+	}
 }
+/**
+* Create gradient for area charts
+*/
 function createAreaGradient(color, direction = "vertical") {
-  return {
-    type: "linear",
-    x: 0,
-    y: direction === "vertical" ? 0 : 0,
-    x2: direction === "horizontal" ? 1 : 0,
-    y2: direction === "vertical" ? 1 : 0,
-    colorStops: [
-      { offset: 0, color: `${color}40` },
-      { offset: 1, color: `${color}05` }
-    ]
-  };
+	return {
+		type: "linear",
+		x: 0,
+		y: direction === "vertical" ? 0 : 0,
+		x2: direction === "horizontal" ? 1 : 0,
+		y2: direction === "vertical" ? 1 : 0,
+		colorStops: [{
+			offset: 0,
+			color: `${color}40`
+		}, {
+			offset: 1,
+			color: `${color}05`
+		}]
+	};
 }
+/**
+* Format time for axis labels
+*/
 function formatTimeLabel(timestamp, format = "short") {
-  const date = new Date(timestamp);
-  switch (format) {
-    case "short":
-      return date.toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false
-      });
-    case "medium":
-      return date.toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false
-      });
-    case "long":
-      return date.toLocaleString([], {
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false
-      });
-  }
+	const date = new Date(timestamp);
+	switch (format) {
+		case "short": return date.toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit",
+			hour12: false
+		});
+		case "medium": return date.toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+			hour12: false
+		});
+		case "long": return date.toLocaleString([], {
+			month: "short",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit",
+			hour12: false
+		});
+	}
 }
+/**
+* Format number with unit suffix
+*/
 function formatValueWithUnit(value, unit, precision = 2) {
-  const formatted = Number.isInteger(value) ? value.toString() : value.toFixed(precision);
-  return unit ? `${formatted}${unit}` : formatted;
+	const formatted = Number.isInteger(value) ? value.toString() : value.toFixed(precision);
+	return unit ? `${formatted}${unit}` : formatted;
 }
-function calculateAxisBounds(values, padding = 0.1) {
-  if (values.length === 0) return { min: 0, max: 100 };
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const range = max - min || 1;
-  return {
-    min: min - range * padding,
-    max: max + range * padding
-  };
+/**
+* Calculate nice axis bounds
+*/
+function calculateAxisBounds(values, padding = .1) {
+	if (values.length === 0) return {
+		min: 0,
+		max: 100
+	};
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const range = max - min || 1;
+	return {
+		min: min - range * padding,
+		max: max + range * padding
+	};
 }
-export {
-  ASTRO_DATA_VIZ_COLORS,
-  OFFICIAL_ASTRO_DATA_VIZ_COLORS,
-  STATUS_COLORS,
-  ZENDIR_BRAND_COLORS,
-  calculateAxisBounds,
-  createAreaGradient,
-  createAstroEChartsTheme,
-  formatTimeLabel,
-  formatValueWithUnit,
-  getPaletteForDataType,
-  getSeriesColor,
-  getStatusColor
-};
-//# sourceMappingURL=theme.js.map
+//#endregion
+export { ASTRO_DATA_VIZ_COLORS, OFFICIAL_ASTRO_DATA_VIZ_COLORS, STATUS_COLORS, ZENDIR_BRAND_COLORS, calculateAxisBounds, createAreaGradient, createAstroEChartsTheme, formatTimeLabel, formatValueWithUnit, getPaletteForDataType, getSeriesColor, getStatusColor };
+
+//# sourceMappingURL=theme.js.map