phaser-wind 0.1.0 → 0.2.0

package/README.md

@@ -58,6 +58,9 @@ const title = this.add.text(200, 100, 'Game Title', {
 
 - 🎨 **Complete Tailwind Color Palette** - All 22 color families with 11 shades each
 - 📐 **Semantic Font Sizes** - From `xs` to `6xl`, just like Tailwind
+- 🎨 **Structured Theme System** - Nested design tokens for colors, fonts, spacing, typography, and effects
+- 🔄 **Dynamic Theme Switching** - Change themes at runtime with full type safety
+- 🎯 **Smart Token Resolution** - Themes can reference other theme tokens automatically
 - 🔧 **TypeScript First** - Full type safety and IntelliSense
 - 🎮 **Phaser Ready** - Designed specifically for Phaser 3 games
 - 🌈 **Consistent Design** - No more guessing colors and sizes
@@ -146,6 +149,234 @@ const responsiveText = FontSizePicker.rem('xl'); // 1.25
 
 ---
 
+## 🎨 Theme System
+
+Phaser Wind includes a powerful **structured theme system** that lets you organize your design tokens into logical categories and create consistent, reusable designs.
+
+### 🏗️ **Theme Structure**
+
+```typescript
+import { createTheme, ThemeManager } from 'phaser-wind';
+
+const gameTheme = createTheme({
+  fonts: {
+    primary: 'Inter, system-ui, sans-serif',
+    display: 'Orbitron, monospace', // Sci-fi font for headers
+    ui: 'Roboto, Arial, sans-serif',
+  },
+  colors: {
+    primary: 'purple-600',
+    secondary: 'cyan-500',
+    'ui-background': 'slate-900',
+    'player-health': 'green-500',
+    'enemy-health': 'red-600',
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  },
+  typography: {
+    heading: {
+      fontSize: '2xl',
+      fontFamily: 'fonts.display', // 🔗 References fonts.display!
+      fontWeight: 600,
+      lineHeight: 1.2,
+    },
+    body: {
+      fontSize: 'md',
+      fontFamily: 'fonts.primary',
+      fontWeight: 400,
+      lineHeight: 1.5,
+    },
+  },
+  effects: {
+    'glow-primary': {
+      blur: 8,
+      color: 'colors.primary', // 🔗 References colors.primary!
+      alpha: 0.6,
+    },
+  },
+  // Custom categories work too!
+  animations: {
+    duration: 300,
+    easing: 'ease-out',
+  },
+});
+
+// Initialize your theme
+ThemeManager.init(gameTheme);
+```
+
+### 🎯 **Using Theme Tokens**
+
+```typescript
+import {
+  ColorPicker,
+  FontPicker,
+  SpacingPicker,
+  TypographyPicker,
+  EffectPicker,
+} from 'phaser-wind';
+
+// Colors - automatically looks in colors.*
+const primaryColor = ColorPicker.rgb('primary'); // Gets colors.primary
+const uiBackground = ColorPicker.hex('ui-background'); // Gets colors.ui-background
+
+// Fonts
+const displayFont = FontPicker.family('display'); // Gets fonts.display
+const primaryFont = FontPicker.family('primary'); // Gets fonts.primary
+
+// Spacing
+const mediumSpace = SpacingPicker.px('md'); // Gets spacing.md (16px)
+const largeSpace = SpacingPicker.px('lg'); // Gets spacing.lg (24px)
+
+// Complete typography styles
+const headingStyle = TypographyPicker.phaserStyle('heading');
+// Returns: { fontSize: '24px', fontFamily: 'Orbitron, monospace', fontStyle: 'bold' }
+
+// Effects
+const glowConfig = EffectPicker.config('glow-primary');
+// Returns: { blur: 8, color: 'purple-600', alpha: 0.6 }
+
+// Custom tokens
+const animDuration = ThemeManager.getToken('animations.duration'); // 300
+```
+
+### 🔄 **Dynamic Theme Switching**
+
+```typescript
+// Register multiple themes
+ThemeManager.registerTheme('light', lightTheme);
+ThemeManager.registerTheme('dark', darkTheme);
+ThemeManager.registerTheme('cyberpunk', cyberpunkTheme);
+
+// Switch themes instantly
+ThemeManager.setTheme('dark');
+
+// Listen for theme changes
+ThemeManager.onThemeChange(newTheme => {
+  console.log('Theme changed!', newTheme);
+  // Update your game UI here
+});
+
+// Get available themes
+const themes = ThemeManager.getRegisteredThemes(); // ['light', 'dark', 'cyberpunk']
+```
+
+### 🎮 **Real Game Example**
+
+```typescript
+export class GameScene extends Phaser.Scene {
+  create() {
+    // Player health bar with theme colors
+    const healthWidth = SpacingPicker.px('massive'); // 96px
+    const healthHeight = SpacingPicker.px('md'); // 16px
+
+    this.add.rectangle(
+      50,
+      50,
+      healthWidth,
+      healthHeight,
+      ColorPicker.hex('player-health')
+    ); // Green from theme
+
+    // Game title with theme typography
+    const titleStyle = TypographyPicker.phaserStyle('heading');
+    this.add
+      .text(400, 50, 'CYBER QUEST', {
+        ...titleStyle,
+        color: ColorPicker.rgb('primary'), // Purple from theme
+      })
+      .setOrigin(0.5);
+
+    // UI button with consistent spacing and colors
+    this.createButton(
+      400,
+      400,
+      'START GAME',
+      SpacingPicker.px('huge'), // 64px width
+      SpacingPicker.px('lg') // 24px height
+    );
+  }
+
+  createButton(
+    x: number,
+    y: number,
+    text: string,
+    width: number,
+    height: number
+  ) {
+    const button = this.add
+      .rectangle(x, y, width, height, ColorPicker.hex('ui-background'))
+      .setInteractive()
+      .on('pointerover', () =>
+        button.setFillStyle(ColorPicker.hex('secondary'))
+      )
+      .on('pointerout', () =>
+        button.setFillStyle(ColorPicker.hex('ui-background'))
+      );
+
+    const buttonText = TypographyPicker.phaserStyle('body');
+    this.add
+      .text(x, y, text, {
+        ...buttonText,
+        color: ColorPicker.rgb('primary'),
+      })
+      .setOrigin(0.5);
+  }
+}
+```
+
+### 🎨 **Pre-built Themes**
+
+```typescript
+import { defaultLightTheme, defaultDarkTheme } from 'phaser-wind';
+
+// Light theme with professional colors
+ThemeManager.init(defaultLightTheme);
+
+// Dark theme perfect for games
+ThemeManager.init(defaultDarkTheme);
+
+// Create variations
+const winterTheme = ThemeManager.extendCurrentTheme({
+  'colors.primary': 'blue-400',
+  'colors.secondary': 'cyan-300',
+  'colors.accent': 'white',
+});
+```
+
+### 🔗 **Smart Token References**
+
+Themes can reference other tokens using dot notation:
+
+```typescript
+const theme = createTheme({
+  colors: {
+    brand: 'purple-600',
+    danger: 'red-500',
+  },
+  typography: {
+    title: {
+      fontSize: '4xl',
+      fontFamily: 'fonts.display', // 🔗 Auto-resolves to fonts.display
+      color: 'colors.brand', // 🔗 Auto-resolves to purple-600
+    },
+  },
+  effects: {
+    'brand-glow': {
+      color: 'colors.brand', // 🔗 Auto-resolves to purple-600
+      blur: 8,
+    },
+  },
+});
+```
+
+---
+
 ## 💡 Real-World Examples
 
 ### Game UI Components
@@ -394,24 +625,26 @@ Plus, `phaser-wind` is way easier to type than `phaser-tailwind-css-design-token
 
 ## 📚 Compared to Raw Phaser
 
-| Without Phaser Wind      | With Phaser Wind                     |
-| ------------------------ | ------------------------------------ |
-| `fill: '#3B82F6'`        | `fill: ColorPicker.rgb('blue-500')`  |
-| `fontSize: '18px'`       | `fontSize: FontSizePicker.css('lg')` |
-| `tint: 0x4ADE80`         | `tint: ColorPicker.hex('green-400')` |
-| Magic numbers everywhere | Semantic, consistent tokens          |
-| Color picking hell       | Harmonious color palettes            |
-| Inconsistent sizing      | Perfect typography scale             |
+| Without Phaser Wind      | With Phaser Wind                      |
+| ------------------------ | ------------------------------------- |
+| `fill: '#3B82F6'`        | `fill: ColorPicker.rgb('primary')`    |
+| `fontSize: '18px'`       | `fontSize: FontSizePicker.css('lg')`  |
+| `tint: 0x4ADE80`         | `tint: ColorPicker.hex('success')`    |
+| `fontFamily: 'Arial'`    | `fontFamily: FontPicker.family('ui')` |
+| Magic numbers everywhere | Semantic, consistent tokens           |
+| Color picking hell       | Harmonious color palettes             |
+| Inconsistent sizing      | Perfect typography scale              |
+| No design system         | Complete theme architecture           |
 
 ---
 
 ## 🔮 Coming Soon
 
-- 🎯 **Spacing System** - Consistent margins and padding tokens
 - 📐 **Layout Utilities** - Flexbox-inspired alignment helpers
-- 🎨 **Theme System** - Easy dark/light mode switching
 - 📱 **Responsive Utilities** - Breakpoint-based design tokens
 - ⚡ **Animation Presets** - Smooth, consistent transitions
+- 🎮 **Component Library** - Pre-built Phaser components with theme support
+- 🔧 **CLI Tool** - Generate themes and components from the command line
 
 ---
 

package/dist/color/color-picker.d.ts

@@ -5,8 +5,18 @@ export type ColorToken = `${ColorKey}-${ShadeKey}` | 'black' | 'white';
 export declare class ColorPicker {
     private colorKey;
     constructor(colorKey: ColorKey);
-    static rgb(color: ColorToken): string;
-    static hex(color: ColorToken): number;
+    /**
+     * Get RGB string for a color token or theme token
+     * @param color - Color token (e.g., 'blue-500') or theme token (e.g., 'primary', 'colors.primary')
+     * @returns RGB string format 'rgb(r, g, b)'
+     */
+    static rgb(color: ColorToken | string): string;
+    /**
+     * Get hex number for a color token or theme token
+     * @param color - Color token (e.g., 'blue-500') or theme token (e.g., 'primary', 'colors.primary')
+     * @returns Hex number format 0xRRGGBB
+     */
+    static hex(color: ColorToken | string): number;
     getRgb(shade: ShadeKey): string;
     getHex(shade: ShadeKey): number;
 }

package/dist/color/color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/color/color-picker.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,OAAO,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,GAAG,QAAQ,IAAI,QAAQ,EAAE,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvE,qBAAa,WAAW;IACV,OAAO,CAAC,QAAQ;gBAAR,QAAQ,EAAE,QAAQ;IAEtC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAUrC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM;IAoBrC,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM;IAQ/B,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM;CAmBhC"}
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/color/color-picker.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,OAAO,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,GAAG,QAAQ,IAAI,QAAQ,EAAE,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvE,qBAAa,WAAW;IACV,OAAO,CAAC,QAAQ;gBAAR,QAAQ,EAAE,QAAQ;IAEtC;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM;IAyC9C;;;;OAIG;IACH,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM;IA0C9C,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM;IAQ/B,MAAM,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM;CAmBhC"}

package/dist/color/color-picker.js

@@ -1,21 +1,78 @@
 /* eslint-disable no-magic-numbers */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { ThemeManager } from '../theme/theme-manager';
 import { pallete } from './pallete';
 export class ColorPicker {
     colorKey;
     constructor(colorKey) {
         this.colorKey = colorKey;
     }
+    /**
+     * Get RGB string for a color token or theme token
+     * @param color - Color token (e.g., 'blue-500') or theme token (e.g., 'primary', 'colors.primary')
+     * @returns RGB string format 'rgb(r, g, b)'
+     */
     static rgb(color) {
+        // First check if it's a theme token (with or without colors. prefix)
+        const colorPath = color.includes('.') ? color : `colors.${color}`;
+        if (ThemeManager.hasToken(colorPath)) {
+            const themeValue = ThemeManager.getToken(colorPath);
+            if (themeValue) {
+                // Recursively resolve the theme token
+                const resolved = ThemeManager.resolveToken(themeValue);
+                return ColorPicker.rgb(resolved);
+            }
+        }
+        // Fallback: check if it's a direct theme token (backwards compatibility)
+        if (ThemeManager.hasToken(color)) {
+            const themeValue = ThemeManager.getToken(color);
+            if (themeValue) {
+                const resolved = ThemeManager.resolveToken(themeValue);
+                return ColorPicker.rgb(resolved);
+            }
+        }
+        // Handle direct color tokens
         const parts = color.split('-');
         if (parts.length === 2) {
             const colorKey = parts[0];
             const shade = parts[1];
-            return pallete[colorKey][shade];
+            const colorValue = pallete[colorKey]?.[shade];
+            if (!colorValue) {
+                throw new Error(`Color token "${colorKey}-${shade}" not found`);
+            }
+            return colorValue;
+        }
+        const colorValue = pallete[color];
+        if (!colorValue) {
+            throw new Error(`Color token "${color}" not found`);
         }
-        return pallete[color];
+        return colorValue;
     }
+    /**
+     * Get hex number for a color token or theme token
+     * @param color - Color token (e.g., 'blue-500') or theme token (e.g., 'primary', 'colors.primary')
+     * @returns Hex number format 0xRRGGBB
+     */
     static hex(color) {
+        // First check if it's a theme token (with or without colors. prefix)
+        const colorPath = color.includes('.') ? color : `colors.${color}`;
+        if (ThemeManager.hasToken(colorPath)) {
+            const themeValue = ThemeManager.getToken(colorPath);
+            if (themeValue) {
+                // Recursively resolve the theme token
+                const resolved = ThemeManager.resolveToken(themeValue);
+                return ColorPicker.hex(resolved);
+            }
+        }
+        // Fallback: check if it's a direct theme token (backwards compatibility)
+        if (ThemeManager.hasToken(color)) {
+            const themeValue = ThemeManager.getToken(color);
+            if (themeValue) {
+                const resolved = ThemeManager.resolveToken(themeValue);
+                return ColorPicker.hex(resolved);
+            }
+        }
+        // Handle direct color tokens
         const parts = color.split('-');
         if (parts.length === 2) {
             const colorKey = parts[0];

package/dist/color/color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../src/color/color-picker.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../src/color/color-picker.ts"],"names":[],"mappings":"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"}

package/dist/color/color-picker.spec.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-magic-numbers */
 /* eslint-disable max-lines-per-function */
 import { describe, expect, it } from 'vitest';
+import { createTheme, ThemeManager } from '../theme';
 import { ColorPicker } from './color-picker';
 describe('ColorPicker', () => {
     it('should get the correct hex value for a shade', () => {
@@ -37,5 +38,23 @@ describe('ColorPicker', () => {
         expect(ColorPicker.hex('slate-950')).toBe(0x020617);
         expect(ColorPicker.hex('slate-800')).toBe(0x1e293b);
     });
+    describe('with theme manager', () => {
+        const fakeTheme = createTheme({
+            colors: {
+                primary: 'red-500',
+                secondary: 'slate-50',
+            },
+        });
+        ThemeManager.init(fakeTheme);
+        it('should get the correct hex in theme', () => {
+            expect(ColorPicker.rgb('colors.primary')).toBe('rgb(239, 68, 68)');
+        });
+        it('should get the correct hex in theme using color token', () => {
+            expect(ColorPicker.rgb('colors.secondary')).toBe('rgb(248, 250, 252)');
+        });
+        it('should throw an error if the color token is not found', () => {
+            expect(() => ColorPicker.rgb('colors.not-found')).toThrow('Color token "colors.not-found" not found');
+        });
+    });
 });
 //# sourceMappingURL=color-picker.spec.js.map

package/dist/color/color-picker.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.spec.js","sourceRoot":"","sources":["../../src/color/color-picker.spec.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,2CAA2C;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAgC,MAAM,gBAAgB,CAAC;AAE3E,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,IAAI,CAAC;QACN,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC;QACzB,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;QAC1B,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC;QAC5B,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;KAC3B,CAAC,CAAC,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;QAC9D,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,KAAiB,CAAC,CAAC;QACvD,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,KAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9C,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"color-picker.spec.js","sourceRoot":"","sources":["../../src/color/color-picker.spec.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,2CAA2C;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAErD,OAAO,EAAE,WAAW,EAAgC,MAAM,gBAAgB,CAAC;AAE3E,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,IAAI,CAAC;QACN,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC;QACzB,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;QAC1B,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC;QAC5B,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QACzB,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC;KAC3B,CAAC,CAAC,gCAAgC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;QAC9D,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,KAAiB,CAAC,CAAC;QACvD,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,KAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9C,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAClC,MAAM,SAAS,GAAG,WAAW,CAAC;YAC5B,MAAM,EAAE;gBACN,OAAO,EAAE,SAAS;gBAClB,SAAS,EAAE,UAAU;aACtB;SACF,CAAC,CAAC;QAEH,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAE7B,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC7C,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACrE,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;YAC/D,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACzE,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;YAC/D,MAAM,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CACvD,0CAA0C,CAC3C,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/examples/nested-theme-example.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Example usage of Phaser Wind with nested theme structure
+ * This file demonstrates the new complex theme system
+ */
+import Phaser from 'phaser';
+import { type BaseThemeConfig } from '..';
+export declare const createGameTheme: () => BaseThemeConfig;
+export declare class AdvancedGameScene extends Phaser.Scene {
+    create(): void;
+    private createBackground;
+    private createHUD;
+    private createStatBar;
+    private createGameElements;
+    private createItem;
+    private createUI;
+    private createButton;
+}
+export declare const demonstrateThemeSwitching: () => void;
+export declare const demonstrateAPIUsage: () => void;
+export declare class ThemedButton {
+    private background;
+    private text;
+    constructor(scene: Phaser.Scene, x: number, y: number, label: string, variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error');
+    private onHover;
+    private onLeave;
+    private onClick;
+}
+//# sourceMappingURL=nested-theme-example.d.ts.map

package/dist/examples/nested-theme-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nested-theme-example.d.ts","sourceRoot":"","sources":["../../src/examples/nested-theme-example.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,OAAO,EAWL,KAAK,eAAe,EACrB,MAAM,IAAI,CAAC;AAGZ,eAAO,MAAM,eAAe,QAAO,eA4G/B,CAAC;AAGL,qBAAa,iBAAkB,SAAQ,MAAM,CAAC,KAAK;IACjD,MAAM,IAAI,IAAI;IAWd,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAsCrB,OAAO,CAAC,kBAAkB;IAoC1B,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,QAAQ;IAqBhB,OAAO,CAAC,YAAY;CAgCrB;AAGD,eAAO,MAAM,yBAAyB,QAAO,IAyB5C,CAAC;AAGF,eAAO,MAAM,mBAAmB,QAAO,IAqCtC,CAAC;AAGF,qBAAa,YAAY;IACvB,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,IAAI,CAA0B;gBAGpC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,MAAM,EACb,OAAO,GACH,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,OAAmB;IAuBzB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,OAAO;CAGhB"}