@number10/jsx-core 5.0.0

package/dist/colors/color-presets.js

@@ -0,0 +1,236 @@
+import { HexColor } from "./color-types.js";
+import { hexToNumber, numberToHex, hslToNumber, numberToHsl } from "./color-utils.js";
+const LIGHT_NEUTRALS = {
+  background: {
+    lightest: "#ffffff",
+    light: "#fafafa",
+    medium: "#f0f0f0",
+    dark: "#e5e5e5",
+    darkest: "#d0d0d0"
+  },
+  surface: {
+    lightest: "#f5f5f5",
+    light: "#ebebeb",
+    medium: "#e0e0e0",
+    dark: "#d5d5d5",
+    darkest: "#c8c8c8"
+  },
+  text: {
+    lightest: "#e0e0e0",
+    light: "#666666",
+    medium: "#555555",
+    dark: "#424242",
+    darkest: "#212121"
+  },
+  border: {
+    lightest: "#d5d5d5",
+    light: "#c0c0c0",
+    medium: "#a8a8a8",
+    dark: "#8e8e8e",
+    darkest: "#6e6e6e"
+  }
+};
+const DARK_NEUTRALS = {
+  background: {
+    lightest: "#3a3a3a",
+    light: "#2e2e2e",
+    medium: "#1e1e1e",
+    dark: "#161616",
+    darkest: "#0a0a0a"
+  },
+  surface: {
+    lightest: "#4a4a4a",
+    light: "#3e3e3e",
+    medium: "#333333",
+    dark: "#2a2a2a",
+    darkest: "#222222"
+  },
+  text: {
+    lightest: "#ffffff",
+    light: "#e8e8e8",
+    medium: "#cccccc",
+    dark: "#bebebe",
+    darkest: "#808080"
+  },
+  border: {
+    lightest: "#757575",
+    light: "#616161",
+    medium: "#4a4a4a",
+    dark: "#3a3a3a",
+    darkest: "#2e2e2e"
+  }
+};
+function toColorShade(shades) {
+  return {
+    lightest: HexColor.from(shades.lightest),
+    light: HexColor.from(shades.light),
+    medium: HexColor.from(shades.medium),
+    dark: HexColor.from(shades.dark),
+    darkest: HexColor.from(shades.darkest),
+    DEFAULT: HexColor.from(shades.medium)
+  };
+}
+function addDefault(shade) {
+  return { ...shade, DEFAULT: shade.medium };
+}
+function generateColorScale(baseColor) {
+  const num = hexToNumber(baseColor);
+  const hsl = numberToHsl(num);
+  return addDefault({
+    lightest: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s, 0.92))),
+    light: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s * 0.7, 0.72))),
+    medium: HexColor.from(baseColor),
+    dark: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s * 0.8, 0.35))),
+    darkest: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s * 0.6, 0.15)))
+  });
+}
+const oceanBluePreset = {
+  name: "oceanBlue",
+  colors: {
+    // Brand colors
+    primary: generateColorScale("#2196f3"),
+    // Material Blue
+    secondary: generateColorScale("#607d8b"),
+    // Blue Grey
+    accent: generateColorScale("#00bcd4"),
+    // Cyan
+    // Feedback colors
+    success: generateColorScale("#4caf50"),
+    // Green
+    warning: generateColorScale("#ff9800"),
+    // Orange
+    error: generateColorScale("#f44336"),
+    // Red
+    info: generateColorScale("#2196f3"),
+    // Blue (same as primary)
+    // Neutral colors - designed for light mode
+    background: toColorShade(LIGHT_NEUTRALS.background),
+    surface: toColorShade(LIGHT_NEUTRALS.surface),
+    text: toColorShade(LIGHT_NEUTRALS.text),
+    border: toColorShade(LIGHT_NEUTRALS.border)
+  }
+};
+const forestGreenPreset = {
+  name: "forestGreen",
+  colors: {
+    // Brand colors
+    primary: generateColorScale("#4caf50"),
+    // Green
+    secondary: generateColorScale("#8bc34a"),
+    // Light Green
+    accent: generateColorScale("#ff8f00"),
+    // Amber (warm earth tone)
+    // Feedback colors
+    success: generateColorScale("#66bb6a"),
+    // Light Green
+    warning: generateColorScale("#ffa726"),
+    // Orange
+    error: generateColorScale("#ef5350"),
+    // Red
+    info: generateColorScale("#29b6f6"),
+    // Light Blue
+    // Neutral colors - green-tinted
+    background: toColorShade({
+      lightest: "#ffffff",
+      light: "#f1f8e9",
+      medium: "#dcedc8",
+      dark: "#c5e1a5",
+      darkest: "#aed581"
+    }),
+    surface: toColorShade({
+      lightest: "#ffffff",
+      light: "#f9fbe7",
+      medium: "#f0f4c3",
+      dark: "#e6ee9c",
+      darkest: "#dce775"
+    }),
+    text: toColorShade({
+      lightest: "#9e9e9e",
+      light: "#757575",
+      medium: "#616161",
+      dark: "#424242",
+      darkest: "#1b5e20"
+    }),
+    border: toColorShade({
+      lightest: "#dcedc8",
+      light: "#c5e1a5",
+      medium: "#aed581",
+      dark: "#9ccc65",
+      darkest: "#7cb342"
+    })
+  }
+};
+const midnightPreset = {
+  name: "midnight",
+  colors: {
+    // Brand colors
+    primary: generateColorScale("#9c27b0"),
+    // Purple
+    secondary: generateColorScale("#673ab7"),
+    // Deep Purple
+    accent: generateColorScale("#e91e63"),
+    // Pink
+    // Feedback colors
+    success: generateColorScale("#66bb6a"),
+    // Green
+    warning: generateColorScale("#ffa726"),
+    // Orange
+    error: generateColorScale("#ef5350"),
+    // Red
+    info: generateColorScale("#42a5f5"),
+    // Blue
+    // Neutral colors - designed for dark mode
+    background: toColorShade(DARK_NEUTRALS.background),
+    surface: toColorShade(DARK_NEUTRALS.surface),
+    text: toColorShade(DARK_NEUTRALS.text),
+    border: toColorShade(DARK_NEUTRALS.border)
+  }
+};
+function applyLightMode(preset) {
+  return {
+    ...preset,
+    colors: {
+      ...preset.colors,
+      background: toColorShade(LIGHT_NEUTRALS.background),
+      surface: toColorShade(LIGHT_NEUTRALS.surface),
+      text: toColorShade(LIGHT_NEUTRALS.text),
+      border: toColorShade(LIGHT_NEUTRALS.border)
+    }
+  };
+}
+function applyDarkMode(preset) {
+  return {
+    ...preset,
+    colors: {
+      ...preset.colors,
+      background: toColorShade(DARK_NEUTRALS.background),
+      surface: toColorShade(DARK_NEUTRALS.surface),
+      text: toColorShade(DARK_NEUTRALS.text),
+      border: toColorShade(DARK_NEUTRALS.border)
+    }
+  };
+}
+const presets = {
+  oceanBlue: oceanBluePreset,
+  forestGreen: forestGreenPreset,
+  midnight: midnightPreset
+};
+function getPreset(name) {
+  return presets[name];
+}
+function getPresetWithMode(name, mode) {
+  const preset = getPreset(name);
+  return mode === "light" ? applyLightMode(preset) : applyDarkMode(preset);
+}
+export {
+  applyDarkMode,
+  applyLightMode,
+  forestGreenPreset,
+  generateColorScale,
+  getPreset,
+  getPresetWithMode,
+  midnightPreset,
+  oceanBluePreset,
+  presets
+};
+//# sourceMappingURL=color-presets.js.map

package/dist/colors/color-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-presets.js","sources":["../../src/colors/color-presets.ts"],"sourcesContent":["/**\n * Color preset definitions for PhaserJSX UI\n * Provides pre-configured color palettes with light/dark mode support\n */\n\nimport { HexColor, type ColorShade, type ColorTokens } from './color-types'\nimport { hexToNumber, hslToNumber, numberToHex, numberToHsl } from './color-utils'\n\n/**\n * Base ColorShade without DEFAULT property\n */\ntype ColorShadeBase = Omit<ColorShade, 'DEFAULT'>\n\n/** Neutral color hex values per shade level */\ntype NeutralHexValues = Record<'lightest' | 'light' | 'medium' | 'dark' | 'darkest', string>\n\n/** Light mode neutral color definitions */\nconst LIGHT_NEUTRALS = {\n  background: {\n    lightest: '#ffffff',\n    light: '#fafafa',\n    medium: '#f0f0f0',\n    dark: '#e5e5e5',\n    darkest: '#d0d0d0',\n  },\n  surface: {\n    lightest: '#f5f5f5',\n    light: '#ebebeb',\n    medium: '#e0e0e0',\n    dark: '#d5d5d5',\n    darkest: '#c8c8c8',\n  },\n  text: {\n    lightest: '#e0e0e0',\n    light: '#666666',\n    medium: '#555555',\n    dark: '#424242',\n    darkest: '#212121',\n  },\n  border: {\n    lightest: '#d5d5d5',\n    light: '#c0c0c0',\n    medium: '#a8a8a8',\n    dark: '#8e8e8e',\n    darkest: '#6e6e6e',\n  },\n} as const satisfies Record<string, NeutralHexValues>\n\n/** Dark mode neutral color definitions */\nconst DARK_NEUTRALS = {\n  background: {\n    lightest: '#3a3a3a',\n    light: '#2e2e2e',\n    medium: '#1e1e1e',\n    dark: '#161616',\n    darkest: '#0a0a0a',\n  },\n  surface: {\n    lightest: '#4a4a4a',\n    light: '#3e3e3e',\n    medium: '#333333',\n    dark: '#2a2a2a',\n    darkest: '#222222',\n  },\n  text: {\n    lightest: '#ffffff',\n    light: '#e8e8e8',\n    medium: '#cccccc',\n    dark: '#bebebe',\n    darkest: '#808080',\n  },\n  border: {\n    lightest: '#757575',\n    light: '#616161',\n    medium: '#4a4a4a',\n    dark: '#3a3a3a',\n    darkest: '#2e2e2e',\n  },\n} as const satisfies Record<string, NeutralHexValues>\n\n/**\n * Convert neutral hex values to a full ColorShade with DEFAULT alias\n * @param shades - Record of shade level to hex string\n * @returns ColorShade with HexColor instances and DEFAULT pointing to medium\n */\nfunction toColorShade(shades: NeutralHexValues): ColorShade {\n  return {\n    lightest: HexColor.from(shades.lightest),\n    light: HexColor.from(shades.light),\n    medium: HexColor.from(shades.medium),\n    dark: HexColor.from(shades.dark),\n    darkest: HexColor.from(shades.darkest),\n    DEFAULT: HexColor.from(shades.medium),\n  }\n}\n\n/**\n * Create a ColorShade with DEFAULT pointing to medium\n * @param shade - ColorShade object without DEFAULT\n * @returns ColorShade with DEFAULT set to medium\n */\nfunction addDefault(shade: ColorShadeBase): ColorShade {\n  return { ...shade, DEFAULT: shade.medium }\n}\n\n/**\n * Generate a complete color scale from a base color using HSL-based perceptual scaling\n * Creates shades from lightest to darkest with DEFAULT pointing to medium\n * @param baseColor - The base color in hex format (e.g., '#2196f3')\n * @returns Complete ColorShade with all semantic levels as HexColor objects\n * @example\n * ```typescript\n * const primaryScale = generateColorScale('#2196f3')\n * // Usage: colors.primary.medium.toNumber()\n * // DEFAULT also works: colors.primary.DEFAULT.toNumber()\n * ```\n */\nexport function generateColorScale(baseColor: string): ColorShade {\n  const num = hexToNumber(baseColor)\n  const hsl = numberToHsl(num)\n\n  return addDefault({\n    lightest: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s, 0.92))),\n    light: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s * 0.7, 0.72))),\n    medium: HexColor.from(baseColor),\n    dark: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s * 0.8, 0.35))),\n    darkest: HexColor.from(numberToHex(hslToNumber(hsl.h, hsl.s * 0.6, 0.15))),\n  })\n}\n\n/**\n * Color preset configuration\n * Defines a complete set of semantic colors for a theme\n */\nexport interface ColorPreset {\n  /** Preset name for identification */\n  name: string\n  /** Complete color token set */\n  colors: ColorTokens\n}\n\n/**\n * Ocean Blue Preset\n * Clean, professional blue-based palette\n */\nexport const oceanBluePreset: ColorPreset = {\n  name: 'oceanBlue',\n  colors: {\n    // Brand colors\n    primary: generateColorScale('#2196f3'), // Material Blue\n    secondary: generateColorScale('#607d8b'), // Blue Grey\n    accent: generateColorScale('#00bcd4'), // Cyan\n\n    // Feedback colors\n    success: generateColorScale('#4caf50'), // Green\n    warning: generateColorScale('#ff9800'), // Orange\n    error: generateColorScale('#f44336'), // Red\n    info: generateColorScale('#2196f3'), // Blue (same as primary)\n\n    // Neutral colors - designed for light mode\n    background: toColorShade(LIGHT_NEUTRALS.background),\n    surface: toColorShade(LIGHT_NEUTRALS.surface),\n    text: toColorShade(LIGHT_NEUTRALS.text),\n    border: toColorShade(LIGHT_NEUTRALS.border),\n  },\n}\n\n/**\n * Forest Green Preset\n * Nature-inspired green-based palette\n */\nexport const forestGreenPreset: ColorPreset = {\n  name: 'forestGreen',\n  colors: {\n    // Brand colors\n    primary: generateColorScale('#4caf50'), // Green\n    secondary: generateColorScale('#8bc34a'), // Light Green\n    accent: generateColorScale('#ff8f00'), // Amber (warm earth tone)\n\n    // Feedback colors\n    success: generateColorScale('#66bb6a'), // Light Green\n    warning: generateColorScale('#ffa726'), // Orange\n    error: generateColorScale('#ef5350'), // Red\n    info: generateColorScale('#29b6f6'), // Light Blue\n\n    // Neutral colors - green-tinted\n    background: toColorShade({\n      lightest: '#ffffff',\n      light: '#f1f8e9',\n      medium: '#dcedc8',\n      dark: '#c5e1a5',\n      darkest: '#aed581',\n    }),\n    surface: toColorShade({\n      lightest: '#ffffff',\n      light: '#f9fbe7',\n      medium: '#f0f4c3',\n      dark: '#e6ee9c',\n      darkest: '#dce775',\n    }),\n    text: toColorShade({\n      lightest: '#9e9e9e',\n      light: '#757575',\n      medium: '#616161',\n      dark: '#424242',\n      darkest: '#1b5e20',\n    }),\n    border: toColorShade({\n      lightest: '#dcedc8',\n      light: '#c5e1a5',\n      medium: '#aed581',\n      dark: '#9ccc65',\n      darkest: '#7cb342',\n    }),\n  },\n}\n\n/**\n * Midnight Preset\n * Dark, elegant purple-based palette\n */\nexport const midnightPreset: ColorPreset = {\n  name: 'midnight',\n  colors: {\n    // Brand colors\n    primary: generateColorScale('#9c27b0'), // Purple\n    secondary: generateColorScale('#673ab7'), // Deep Purple\n    accent: generateColorScale('#e91e63'), // Pink\n\n    // Feedback colors\n    success: generateColorScale('#66bb6a'), // Green\n    warning: generateColorScale('#ffa726'), // Orange\n    error: generateColorScale('#ef5350'), // Red\n    info: generateColorScale('#42a5f5'), // Blue\n\n    // Neutral colors - designed for dark mode\n    background: toColorShade(DARK_NEUTRALS.background),\n    surface: toColorShade(DARK_NEUTRALS.surface),\n    text: toColorShade(DARK_NEUTRALS.text),\n    border: toColorShade(DARK_NEUTRALS.border),\n  },\n}\n\n/**\n * Apply light mode overrides to a preset\n * Adjusts neutral colors for optimal light mode appearance\n * @param preset - Base preset to modify\n * @returns New preset with light mode neutral colors\n */\nexport function applyLightMode(preset: ColorPreset): ColorPreset {\n  return {\n    ...preset,\n    colors: {\n      ...preset.colors,\n      background: toColorShade(LIGHT_NEUTRALS.background),\n      surface: toColorShade(LIGHT_NEUTRALS.surface),\n      text: toColorShade(LIGHT_NEUTRALS.text),\n      border: toColorShade(LIGHT_NEUTRALS.border),\n    },\n  }\n}\n\n/**\n * Apply dark mode overrides to a preset\n * Adjusts neutral colors for optimal dark mode appearance\n * @param preset - Base preset to modify\n * @returns New preset with dark mode neutral colors\n */\nexport function applyDarkMode(preset: ColorPreset): ColorPreset {\n  return {\n    ...preset,\n    colors: {\n      ...preset.colors,\n      background: toColorShade(DARK_NEUTRALS.background),\n      surface: toColorShade(DARK_NEUTRALS.surface),\n      text: toColorShade(DARK_NEUTRALS.text),\n      border: toColorShade(DARK_NEUTRALS.border),\n    },\n  }\n}\n\n/**\n * All available presets\n */\nexport const presets = {\n  oceanBlue: oceanBluePreset,\n  forestGreen: forestGreenPreset,\n  midnight: midnightPreset,\n} as const\n\n/**\n * Preset names for type safety\n */\nexport type PresetName = keyof typeof presets\n\n/**\n * Get a preset by name\n * @param name - Preset name\n * @returns Color preset\n * @example\n * ```typescript\n * const preset = getPreset('oceanBlue')\n * const primaryColor = preset.colors.primary.DEFAULT\n * ```\n */\nexport function getPreset(name: PresetName): ColorPreset {\n  return presets[name]\n}\n\n/**\n * Get a preset with color mode applied\n * @param name - Preset name\n * @param mode - Color mode ('light' or 'dark')\n * @returns Color preset with mode-specific neutral colors\n * @example\n * ```typescript\n * const darkPreset = getPresetWithMode('oceanBlue', 'dark')\n * const bgColor = darkPreset.colors.background.DEFAULT\n * ```\n */\nexport function getPresetWithMode(name: PresetName, mode: 'light' | 'dark'): ColorPreset {\n  const preset = getPreset(name)\n  return mode === 'light' ? applyLightMode(preset) : applyDarkMode(preset)\n}\n"],"names":[],"mappings":"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"}

package/dist/colors/color-theme-helpers.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const colorUtils = require("./color-utils.cjs");
+function colorsToTheme(colors, colorKey, options = {}) {
+  const { backgroundShade = "DEFAULT", borderShade = "dark", includeBorder = true } = options;
+  const result = {
+    backgroundColor: colors[colorKey][backgroundShade].toNumber()
+  };
+  if (includeBorder) {
+    result.borderColor = colors[colorKey][borderShade].toNumber();
+  }
+  return result;
+}
+function getTextColor(colors, shade = "DEFAULT", alphaValue) {
+  const color = colors.text[shade];
+  return alphaValue !== void 0 ? colorUtils.alpha(color.toNumber(), alphaValue) : color.toString();
+}
+function getBackgroundColor(colors, shade = "DEFAULT") {
+  return colors.background[shade].toNumber();
+}
+function getSurfaceColor(colors, shade = "DEFAULT") {
+  return colors.surface[shade].toNumber();
+}
+function getBorderColor(colors, shade = "DEFAULT") {
+  return colors.border[shade].toNumber();
+}
+exports.colorsToTheme = colorsToTheme;
+exports.getBackgroundColor = getBackgroundColor;
+exports.getBorderColor = getBorderColor;
+exports.getSurfaceColor = getSurfaceColor;
+exports.getTextColor = getTextColor;
+//# sourceMappingURL=color-theme-helpers.cjs.map

package/dist/colors/color-theme-helpers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-theme-helpers.cjs","sources":["../../src/colors/color-theme-helpers.ts"],"sourcesContent":["/**\n * Helper functions for color system integration with theme\n */\nimport type { ColorTokens } from './color-types'\nimport { alpha } from './color-utils'\n\n/**\n * Convert ColorTokens to a theme-compatible object\n * Maps semantic color names to Phaser number format for View/Button components\n * @param colors - ColorTokens to convert\n * @returns Object with backgroundColor, borderColor, etc.\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const buttonTheme = {\n *   ...colorsToTheme(colors, 'primary'),\n *   padding: 8,\n * }\n * // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }\n * ```\n */\nexport function colorsToTheme(\n  colors: ColorTokens,\n  colorKey: keyof Pick<\n    ColorTokens,\n    'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\n  >,\n  options: {\n    /** Which shade to use for background (default: 'DEFAULT') */\n    backgroundShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n    /** Which shade to use for border (default: 'dark') */\n    borderShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n    /** Include border color (default: true) */\n    includeBorder?: boolean\n  } = {}\n): {\n  backgroundColor: number\n  borderColor?: number\n} {\n  const { backgroundShade = 'DEFAULT', borderShade = 'dark', includeBorder = true } = options\n\n  const result: { backgroundColor: number; borderColor?: number } = {\n    backgroundColor: colors[colorKey][backgroundShade].toNumber(),\n  }\n\n  if (includeBorder) {\n    result.borderColor = colors[colorKey][borderShade].toNumber()\n  }\n\n  return result\n}\n\n/**\n * Get text color from ColorTokens as hex string for Phaser Text style\n * @param colors - ColorTokens to use\n * @param shade - Which text shade to use (default: 'DEFAULT')\n * @param alphaValue - Optional alpha value (0-1)\n * @returns Hex string or rgba string for Text style\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const textStyle = {\n *   color: getTextColor(colors),\n *   fontSize: '18px'\n * }\n * ```\n */\nexport function getTextColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT',\n  alphaValue?: number\n): string {\n  const color = colors.text[shade]\n  return alphaValue !== undefined ? alpha(color.toNumber(), alphaValue) : color.toString()\n}\n\n/**\n * Get background color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBackgroundColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n  return colors.background[shade].toNumber()\n}\n\n/**\n * Get surface color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getSurfaceColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n  return colors.surface[shade].toNumber()\n}\n\n/**\n * Get border color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBorderColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n  return colors.border[shade].toNumber()\n}\n"],"names":["alpha"],"mappings":";;;AAqBO,SAAS,cACd,QACA,UAIA,UAOI,CAAA,GAIJ;AACA,QAAM,EAAE,kBAAkB,WAAW,cAAc,QAAQ,gBAAgB,SAAS;AAEpF,QAAM,SAA4D;AAAA,IAChE,iBAAiB,OAAO,QAAQ,EAAE,eAAe,EAAE,SAAA;AAAA,EAAS;AAG9D,MAAI,eAAe;AACjB,WAAO,cAAc,OAAO,QAAQ,EAAE,WAAW,EAAE,SAAA;AAAA,EACrD;AAEA,SAAO;AACT;AAiBO,SAAS,aACd,QACA,QAA0E,WAC1E,YACQ;AACR,QAAM,QAAQ,OAAO,KAAK,KAAK;AAC/B,SAAO,eAAe,SAAYA,WAAAA,MAAM,MAAM,YAAY,UAAU,IAAI,MAAM,SAAA;AAChF;AAQO,SAAS,mBACd,QACA,QAA0E,WAClE;AACR,SAAO,OAAO,WAAW,KAAK,EAAE,SAAA;AAClC;AAQO,SAAS,gBACd,QACA,QAA0E,WAClE;AACR,SAAO,OAAO,QAAQ,KAAK,EAAE,SAAA;AAC/B;AAQO,SAAS,eACd,QACA,QAA0E,WAClE;AACR,SAAO,OAAO,OAAO,KAAK,EAAE,SAAA;AAC9B;;;;;;"}

package/dist/colors/color-theme-helpers.d.ts

@@ -0,0 +1,65 @@
+import { ColorTokens } from './color-types';
+/**
+ * Convert ColorTokens to a theme-compatible object
+ * Maps semantic color names to Phaser number format for View/Button components
+ * @param colors - ColorTokens to convert
+ * @returns Object with backgroundColor, borderColor, etc.
+ * @example
+ * ```typescript
+ * const colors = getPreset('oceanBlue').colors
+ * const buttonTheme = {
+ *   ...colorsToTheme(colors, 'primary'),
+ *   padding: 8,
+ * }
+ * // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }
+ * ```
+ */
+export declare function colorsToTheme(colors: ColorTokens, colorKey: keyof Pick<ColorTokens, 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'>, options?: {
+    /** Which shade to use for background (default: 'DEFAULT') */
+    backgroundShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT';
+    /** Which shade to use for border (default: 'dark') */
+    borderShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT';
+    /** Include border color (default: true) */
+    includeBorder?: boolean;
+}): {
+    backgroundColor: number;
+    borderColor?: number;
+};
+/**
+ * Get text color from ColorTokens as hex string for Phaser Text style
+ * @param colors - ColorTokens to use
+ * @param shade - Which text shade to use (default: 'DEFAULT')
+ * @param alphaValue - Optional alpha value (0-1)
+ * @returns Hex string or rgba string for Text style
+ * @example
+ * ```typescript
+ * const colors = getPreset('oceanBlue').colors
+ * const textStyle = {
+ *   color: getTextColor(colors),
+ *   fontSize: '18px'
+ * }
+ * ```
+ */
+export declare function getTextColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT', alphaValue?: number): string;
+/**
+ * Get background color from ColorTokens
+ * @param colors - ColorTokens to use
+ * @param shade - Which shade to use (default: 'DEFAULT')
+ * @returns Phaser color number
+ */
+export declare function getBackgroundColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'): number;
+/**
+ * Get surface color from ColorTokens
+ * @param colors - ColorTokens to use
+ * @param shade - Which shade to use (default: 'DEFAULT')
+ * @returns Phaser color number
+ */
+export declare function getSurfaceColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'): number;
+/**
+ * Get border color from ColorTokens
+ * @param colors - ColorTokens to use
+ * @param shade - Which shade to use (default: 'DEFAULT')
+ * @returns Phaser color number
+ */
+export declare function getBorderColor(colors: ColorTokens, shade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'): number;
+//# sourceMappingURL=color-theme-helpers.d.ts.map

package/dist/colors/color-theme-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-theme-helpers.d.ts","sourceRoot":"","sources":["../../src/colors/color-theme-helpers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAGhD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,WAAW,EACnB,QAAQ,EAAE,MAAM,IAAI,CAClB,WAAW,EACX,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAC9E,EACD,OAAO,GAAE;IACP,6DAA6D;IAC7D,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IAClF,sDAAsD;IACtD,WAAW,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;IAC9E,2CAA2C;IAC3C,aAAa,CAAC,EAAE,OAAO,CAAA;CACnB,GACL;IACD,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAYA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,EACnF,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CAGR;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,GAClF,MAAM,CAER;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,GAClF,MAAM,CAER;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,WAAW,EACnB,KAAK,GAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAqB,GAClF,MAAM,CAER"}

package/dist/colors/color-theme-helpers.js

@@ -0,0 +1,32 @@
+import { alpha } from "./color-utils.js";
+function colorsToTheme(colors, colorKey, options = {}) {
+  const { backgroundShade = "DEFAULT", borderShade = "dark", includeBorder = true } = options;
+  const result = {
+    backgroundColor: colors[colorKey][backgroundShade].toNumber()
+  };
+  if (includeBorder) {
+    result.borderColor = colors[colorKey][borderShade].toNumber();
+  }
+  return result;
+}
+function getTextColor(colors, shade = "DEFAULT", alphaValue) {
+  const color = colors.text[shade];
+  return alphaValue !== void 0 ? alpha(color.toNumber(), alphaValue) : color.toString();
+}
+function getBackgroundColor(colors, shade = "DEFAULT") {
+  return colors.background[shade].toNumber();
+}
+function getSurfaceColor(colors, shade = "DEFAULT") {
+  return colors.surface[shade].toNumber();
+}
+function getBorderColor(colors, shade = "DEFAULT") {
+  return colors.border[shade].toNumber();
+}
+export {
+  colorsToTheme,
+  getBackgroundColor,
+  getBorderColor,
+  getSurfaceColor,
+  getTextColor
+};
+//# sourceMappingURL=color-theme-helpers.js.map

package/dist/colors/color-theme-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-theme-helpers.js","sources":["../../src/colors/color-theme-helpers.ts"],"sourcesContent":["/**\n * Helper functions for color system integration with theme\n */\nimport type { ColorTokens } from './color-types'\nimport { alpha } from './color-utils'\n\n/**\n * Convert ColorTokens to a theme-compatible object\n * Maps semantic color names to Phaser number format for View/Button components\n * @param colors - ColorTokens to convert\n * @returns Object with backgroundColor, borderColor, etc.\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const buttonTheme = {\n *   ...colorsToTheme(colors, 'primary'),\n *   padding: 8,\n * }\n * // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }\n * ```\n */\nexport function colorsToTheme(\n  colors: ColorTokens,\n  colorKey: keyof Pick<\n    ColorTokens,\n    'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\n  >,\n  options: {\n    /** Which shade to use for background (default: 'DEFAULT') */\n    backgroundShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n    /** Which shade to use for border (default: 'dark') */\n    borderShade?: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT'\n    /** Include border color (default: true) */\n    includeBorder?: boolean\n  } = {}\n): {\n  backgroundColor: number\n  borderColor?: number\n} {\n  const { backgroundShade = 'DEFAULT', borderShade = 'dark', includeBorder = true } = options\n\n  const result: { backgroundColor: number; borderColor?: number } = {\n    backgroundColor: colors[colorKey][backgroundShade].toNumber(),\n  }\n\n  if (includeBorder) {\n    result.borderColor = colors[colorKey][borderShade].toNumber()\n  }\n\n  return result\n}\n\n/**\n * Get text color from ColorTokens as hex string for Phaser Text style\n * @param colors - ColorTokens to use\n * @param shade - Which text shade to use (default: 'DEFAULT')\n * @param alphaValue - Optional alpha value (0-1)\n * @returns Hex string or rgba string for Text style\n * @example\n * ```typescript\n * const colors = getPreset('oceanBlue').colors\n * const textStyle = {\n *   color: getTextColor(colors),\n *   fontSize: '18px'\n * }\n * ```\n */\nexport function getTextColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT',\n  alphaValue?: number\n): string {\n  const color = colors.text[shade]\n  return alphaValue !== undefined ? alpha(color.toNumber(), alphaValue) : color.toString()\n}\n\n/**\n * Get background color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBackgroundColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n  return colors.background[shade].toNumber()\n}\n\n/**\n * Get surface color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getSurfaceColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n  return colors.surface[shade].toNumber()\n}\n\n/**\n * Get border color from ColorTokens\n * @param colors - ColorTokens to use\n * @param shade - Which shade to use (default: 'DEFAULT')\n * @returns Phaser color number\n */\nexport function getBorderColor(\n  colors: ColorTokens,\n  shade: 'lightest' | 'light' | 'medium' | 'dark' | 'darkest' | 'DEFAULT' = 'DEFAULT'\n): number {\n  return colors.border[shade].toNumber()\n}\n"],"names":[],"mappings":";AAqBO,SAAS,cACd,QACA,UAIA,UAOI,CAAA,GAIJ;AACA,QAAM,EAAE,kBAAkB,WAAW,cAAc,QAAQ,gBAAgB,SAAS;AAEpF,QAAM,SAA4D;AAAA,IAChE,iBAAiB,OAAO,QAAQ,EAAE,eAAe,EAAE,SAAA;AAAA,EAAS;AAG9D,MAAI,eAAe;AACjB,WAAO,cAAc,OAAO,QAAQ,EAAE,WAAW,EAAE,SAAA;AAAA,EACrD;AAEA,SAAO;AACT;AAiBO,SAAS,aACd,QACA,QAA0E,WAC1E,YACQ;AACR,QAAM,QAAQ,OAAO,KAAK,KAAK;AAC/B,SAAO,eAAe,SAAY,MAAM,MAAM,YAAY,UAAU,IAAI,MAAM,SAAA;AAChF;AAQO,SAAS,mBACd,QACA,QAA0E,WAClE;AACR,SAAO,OAAO,WAAW,KAAK,EAAE,SAAA;AAClC;AAQO,SAAS,gBACd,QACA,QAA0E,WAClE;AACR,SAAO,OAAO,QAAQ,KAAK,EAAE,SAAA;AAC/B;AAQO,SAAS,eACd,QACA,QAA0E,WAClE;AACR,SAAO,OAAO,OAAO,KAAK,EAAE,SAAA;AAC9B;"}

package/dist/colors/color-types.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class HexColor {
+  #value;
+  constructor(hex) {
+    this.#value = hex;
+  }
+  /**
+   * Convert to Phaser number format
+   * @returns Color as number (0xffffff)
+   */
+  toNumber() {
+    return parseInt(this.#value.replace("#", ""), 16);
+  }
+  /**
+   * Return the hex string value
+   * @returns Hex color string
+   */
+  toString() {
+    return this.#value;
+  }
+  /**
+   * Primitive string value for coercion contexts
+   * @returns Hex color string
+   */
+  valueOf() {
+    return this.#value;
+  }
+  /**
+   * Create a HexColor from a hex string
+   * @param hex - Hex color string
+   */
+  static from(hex) {
+    return new HexColor(hex);
+  }
+}
+exports.HexColor = HexColor;
+//# sourceMappingURL=color-types.cjs.map

package/dist/colors/color-types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-types.cjs","sources":["../../src/colors/color-types.ts"],"sourcesContent":["/**\n * Color system types for PhaserJSX UI\n * Provides semantic color tokens with named shade levels\n */\n\n/**\n * Named shade levels for color scales\n * Uses semantic names instead of numeric values\n */\nexport type ShadeLevel = 'lightest' | 'light' | 'medium' | 'dark' | 'darkest'\n\n/**\n * Hex color with conversion method for Phaser compatibility\n * Wraps a string value and provides toNumber() for Phaser color integration\n */\nexport class HexColor {\n  readonly #value: string\n\n  constructor(hex: string) {\n    this.#value = hex\n  }\n\n  /**\n   * Convert to Phaser number format\n   * @returns Color as number (0xffffff)\n   */\n  toNumber(): number {\n    return parseInt(this.#value.replace('#', ''), 16)\n  }\n\n  /**\n   * Return the hex string value\n   * @returns Hex color string\n   */\n  toString(): string {\n    return this.#value\n  }\n\n  /**\n   * Primitive string value for coercion contexts\n   * @returns Hex color string\n   */\n  valueOf(): string {\n    return this.#value\n  }\n\n  /**\n   * Create a HexColor from a hex string\n   * @param hex - Hex color string\n   */\n  static from(hex: string): HexColor {\n    return new HexColor(hex)\n  }\n}\n\n/**\n * Color shade scale with semantic naming\n * Each color token has multiple shades for different use cases\n * Uses HexColor type for VS Code color picker support and .toNumber() method\n * DEFAULT is an alias for medium\n * @example\n * ```typescript\n * const primaryShade: ColorShade = {\n *   lightest: HexColor.from('#e3f2fd'),\n *   light: HexColor.from('#90caf9'),\n *   medium: HexColor.from('#42a5f5'),\n *   dark: HexColor.from('#1976d2'),\n *   darkest: HexColor.from('#0d47a1'),\n *   DEFAULT: HexColor.from('#42a5f5'), // alias to medium\n * }\n * // Usage:\n * backgroundColor: colors.primary.DEFAULT.toNumber() // same as medium\n * backgroundColor: colors.primary.medium.toNumber()\n * ```\n */\nexport interface ColorShade {\n  /** Lightest shade - backgrounds, hover states */\n  lightest: HexColor\n  /** Light shade - secondary elements */\n  light: HexColor\n  /** Medium shade - interactive elements (also available as DEFAULT) */\n  medium: HexColor\n  /** Dark shade - borders, dividers */\n  dark: HexColor\n  /** Darkest shade - text, emphasis */\n  darkest: HexColor\n  /** DEFAULT shade - alias for medium */\n  readonly DEFAULT: HexColor\n}\n\n/**\n * Complete color token system with semantic color categories\n * Designed for global theme usage with nested theme support\n */\nexport interface ColorTokens {\n  /** Primary brand color - main actions and emphasis */\n  primary: ColorShade\n  /** Secondary brand color - supporting actions */\n  secondary: ColorShade\n  /** Accent color - highlights and special elements */\n  accent: ColorShade\n\n  /** Success state color - confirmations, positive feedback */\n  success: ColorShade\n  /** Warning state color - cautions, alerts */\n  warning: ColorShade\n  /** Error state color - errors, destructive actions */\n  error: ColorShade\n  /** Info state color - informational messages */\n  info: ColorShade\n\n  /** Background colors - main app backgrounds */\n  background: ColorShade\n  /** Surface colors - cards, panels, elevated elements */\n  surface: ColorShade\n  /** Text colors - typography hierarchy */\n  text: ColorShade\n  /** Border colors - dividers, outlines */\n  border: ColorShade\n}\n\n/**\n * Color mode enum for light/dark theme switching\n */\nexport type ColorMode = 'light' | 'dark'\n\n/**\n * RGB color representation\n */\nexport interface RGBColor {\n  r: number\n  g: number\n  b: number\n}\n"],"names":[],"mappings":";;AAeO,MAAM,SAAS;AAAA,EACX;AAAA,EAET,YAAY,KAAa;AACvB,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAmB;AACjB,WAAO,SAAS,KAAK,OAAO,QAAQ,KAAK,EAAE,GAAG,EAAE;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAmB;AACjB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAkB;AAChB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,KAAK,KAAuB;AACjC,WAAO,IAAI,SAAS,GAAG;AAAA,EACzB;AACF;;"}

package/dist/colors/color-types.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Color system types for PhaserJSX UI
+ * Provides semantic color tokens with named shade levels
+ */
+/**
+ * Named shade levels for color scales
+ * Uses semantic names instead of numeric values
+ */
+export type ShadeLevel = 'lightest' | 'light' | 'medium' | 'dark' | 'darkest';
+/**
+ * Hex color with conversion method for Phaser compatibility
+ * Wraps a string value and provides toNumber() for Phaser color integration
+ */
+export declare class HexColor {
+    #private;
+    constructor(hex: string);
+    /**
+     * Convert to Phaser number format
+     * @returns Color as number (0xffffff)
+     */
+    toNumber(): number;
+    /**
+     * Return the hex string value
+     * @returns Hex color string
+     */
+    toString(): string;
+    /**
+     * Primitive string value for coercion contexts
+     * @returns Hex color string
+     */
+    valueOf(): string;
+    /**
+     * Create a HexColor from a hex string
+     * @param hex - Hex color string
+     */
+    static from(hex: string): HexColor;
+}
+/**
+ * Color shade scale with semantic naming
+ * Each color token has multiple shades for different use cases
+ * Uses HexColor type for VS Code color picker support and .toNumber() method
+ * DEFAULT is an alias for medium
+ * @example
+ * ```typescript
+ * const primaryShade: ColorShade = {
+ *   lightest: HexColor.from('#e3f2fd'),
+ *   light: HexColor.from('#90caf9'),
+ *   medium: HexColor.from('#42a5f5'),
+ *   dark: HexColor.from('#1976d2'),
+ *   darkest: HexColor.from('#0d47a1'),
+ *   DEFAULT: HexColor.from('#42a5f5'), // alias to medium
+ * }
+ * // Usage:
+ * backgroundColor: colors.primary.DEFAULT.toNumber() // same as medium
+ * backgroundColor: colors.primary.medium.toNumber()
+ * ```
+ */
+export interface ColorShade {
+    /** Lightest shade - backgrounds, hover states */
+    lightest: HexColor;
+    /** Light shade - secondary elements */
+    light: HexColor;
+    /** Medium shade - interactive elements (also available as DEFAULT) */
+    medium: HexColor;
+    /** Dark shade - borders, dividers */
+    dark: HexColor;
+    /** Darkest shade - text, emphasis */
+    darkest: HexColor;
+    /** DEFAULT shade - alias for medium */
+    readonly DEFAULT: HexColor;
+}
+/**
+ * Complete color token system with semantic color categories
+ * Designed for global theme usage with nested theme support
+ */
+export interface ColorTokens {
+    /** Primary brand color - main actions and emphasis */
+    primary: ColorShade;
+    /** Secondary brand color - supporting actions */
+    secondary: ColorShade;
+    /** Accent color - highlights and special elements */
+    accent: ColorShade;
+    /** Success state color - confirmations, positive feedback */
+    success: ColorShade;
+    /** Warning state color - cautions, alerts */
+    warning: ColorShade;
+    /** Error state color - errors, destructive actions */
+    error: ColorShade;
+    /** Info state color - informational messages */
+    info: ColorShade;
+    /** Background colors - main app backgrounds */
+    background: ColorShade;
+    /** Surface colors - cards, panels, elevated elements */
+    surface: ColorShade;
+    /** Text colors - typography hierarchy */
+    text: ColorShade;
+    /** Border colors - dividers, outlines */
+    border: ColorShade;
+}
+/**
+ * Color mode enum for light/dark theme switching
+ */
+export type ColorMode = 'light' | 'dark';
+/**
+ * RGB color representation
+ */
+export interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+}
+//# sourceMappingURL=color-types.d.ts.map

package/dist/colors/color-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-types.d.ts","sourceRoot":"","sources":["../../src/colors/color-types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAE7E;;;GAGG;AACH,qBAAa,QAAQ;;gBAGP,GAAG,EAAE,MAAM;IAIvB;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB;;;OAGG;IACH,OAAO,IAAI,MAAM;IAIjB;;;OAGG;IACH,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ;CAGnC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,UAAU;IACzB,iDAAiD;IACjD,QAAQ,EAAE,QAAQ,CAAA;IAClB,uCAAuC;IACvC,KAAK,EAAE,QAAQ,CAAA;IACf,sEAAsE;IACtE,MAAM,EAAE,QAAQ,CAAA;IAChB,qCAAqC;IACrC,IAAI,EAAE,QAAQ,CAAA;IACd,qCAAqC;IACrC,OAAO,EAAE,QAAQ,CAAA;IACjB,uCAAuC;IACvC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAA;CAC3B;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,sDAAsD;IACtD,OAAO,EAAE,UAAU,CAAA;IACnB,iDAAiD;IACjD,SAAS,EAAE,UAAU,CAAA;IACrB,qDAAqD;IACrD,MAAM,EAAE,UAAU,CAAA;IAElB,6DAA6D;IAC7D,OAAO,EAAE,UAAU,CAAA;IACnB,6CAA6C;IAC7C,OAAO,EAAE,UAAU,CAAA;IACnB,sDAAsD;IACtD,KAAK,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,IAAI,EAAE,UAAU,CAAA;IAEhB,+CAA+C;IAC/C,UAAU,EAAE,UAAU,CAAA;IACtB,wDAAwD;IACxD,OAAO,EAAE,UAAU,CAAA;IACnB,yCAAyC;IACzC,IAAI,EAAE,UAAU,CAAA;IAChB,yCAAyC;IACzC,MAAM,EAAE,UAAU,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV"}

package/dist/colors/color-types.js

@@ -0,0 +1,38 @@
+class HexColor {
+  #value;
+  constructor(hex) {
+    this.#value = hex;
+  }
+  /**
+   * Convert to Phaser number format
+   * @returns Color as number (0xffffff)
+   */
+  toNumber() {
+    return parseInt(this.#value.replace("#", ""), 16);
+  }
+  /**
+   * Return the hex string value
+   * @returns Hex color string
+   */
+  toString() {
+    return this.#value;
+  }
+  /**
+   * Primitive string value for coercion contexts
+   * @returns Hex color string
+   */
+  valueOf() {
+    return this.#value;
+  }
+  /**
+   * Create a HexColor from a hex string
+   * @param hex - Hex color string
+   */
+  static from(hex) {
+    return new HexColor(hex);
+  }
+}
+export {
+  HexColor
+};
+//# sourceMappingURL=color-types.js.map

package/dist/colors/color-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-types.js","sources":["../../src/colors/color-types.ts"],"sourcesContent":["/**\n * Color system types for PhaserJSX UI\n * Provides semantic color tokens with named shade levels\n */\n\n/**\n * Named shade levels for color scales\n * Uses semantic names instead of numeric values\n */\nexport type ShadeLevel = 'lightest' | 'light' | 'medium' | 'dark' | 'darkest'\n\n/**\n * Hex color with conversion method for Phaser compatibility\n * Wraps a string value and provides toNumber() for Phaser color integration\n */\nexport class HexColor {\n  readonly #value: string\n\n  constructor(hex: string) {\n    this.#value = hex\n  }\n\n  /**\n   * Convert to Phaser number format\n   * @returns Color as number (0xffffff)\n   */\n  toNumber(): number {\n    return parseInt(this.#value.replace('#', ''), 16)\n  }\n\n  /**\n   * Return the hex string value\n   * @returns Hex color string\n   */\n  toString(): string {\n    return this.#value\n  }\n\n  /**\n   * Primitive string value for coercion contexts\n   * @returns Hex color string\n   */\n  valueOf(): string {\n    return this.#value\n  }\n\n  /**\n   * Create a HexColor from a hex string\n   * @param hex - Hex color string\n   */\n  static from(hex: string): HexColor {\n    return new HexColor(hex)\n  }\n}\n\n/**\n * Color shade scale with semantic naming\n * Each color token has multiple shades for different use cases\n * Uses HexColor type for VS Code color picker support and .toNumber() method\n * DEFAULT is an alias for medium\n * @example\n * ```typescript\n * const primaryShade: ColorShade = {\n *   lightest: HexColor.from('#e3f2fd'),\n *   light: HexColor.from('#90caf9'),\n *   medium: HexColor.from('#42a5f5'),\n *   dark: HexColor.from('#1976d2'),\n *   darkest: HexColor.from('#0d47a1'),\n *   DEFAULT: HexColor.from('#42a5f5'), // alias to medium\n * }\n * // Usage:\n * backgroundColor: colors.primary.DEFAULT.toNumber() // same as medium\n * backgroundColor: colors.primary.medium.toNumber()\n * ```\n */\nexport interface ColorShade {\n  /** Lightest shade - backgrounds, hover states */\n  lightest: HexColor\n  /** Light shade - secondary elements */\n  light: HexColor\n  /** Medium shade - interactive elements (also available as DEFAULT) */\n  medium: HexColor\n  /** Dark shade - borders, dividers */\n  dark: HexColor\n  /** Darkest shade - text, emphasis */\n  darkest: HexColor\n  /** DEFAULT shade - alias for medium */\n  readonly DEFAULT: HexColor\n}\n\n/**\n * Complete color token system with semantic color categories\n * Designed for global theme usage with nested theme support\n */\nexport interface ColorTokens {\n  /** Primary brand color - main actions and emphasis */\n  primary: ColorShade\n  /** Secondary brand color - supporting actions */\n  secondary: ColorShade\n  /** Accent color - highlights and special elements */\n  accent: ColorShade\n\n  /** Success state color - confirmations, positive feedback */\n  success: ColorShade\n  /** Warning state color - cautions, alerts */\n  warning: ColorShade\n  /** Error state color - errors, destructive actions */\n  error: ColorShade\n  /** Info state color - informational messages */\n  info: ColorShade\n\n  /** Background colors - main app backgrounds */\n  background: ColorShade\n  /** Surface colors - cards, panels, elevated elements */\n  surface: ColorShade\n  /** Text colors - typography hierarchy */\n  text: ColorShade\n  /** Border colors - dividers, outlines */\n  border: ColorShade\n}\n\n/**\n * Color mode enum for light/dark theme switching\n */\nexport type ColorMode = 'light' | 'dark'\n\n/**\n * RGB color representation\n */\nexport interface RGBColor {\n  r: number\n  g: number\n  b: number\n}\n"],"names":[],"mappings":"AAeO,MAAM,SAAS;AAAA,EACX;AAAA,EAET,YAAY,KAAa;AACvB,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAmB;AACjB,WAAO,SAAS,KAAK,OAAO,QAAQ,KAAK,EAAE,GAAG,EAAE;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAmB;AACjB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAkB;AAChB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,KAAK,KAAuB;AACjC,WAAO,IAAI,SAAS,GAAG;AAAA,EACzB;AACF;"}