Phaser Wind Button Component

import {
  Color,
  type ColorToken,
  createTheme,
  PHASER_WIND_KEY,
  PhaserWindPlugin,
  SceneWithPhaserWind,
} from 'phaser-wind';

const theme = createTheme({});
type Theme = typeof theme;

class ButtonScene extends SceneWithPhaserWind<Theme> {
  create(): void {
    const { pw } = this;
    this.cameras.main.setBackgroundColor(Color.slate(900));

    const createButton = (
      x: number,
      y: number,
      label: string,
      bgToken: ColorToken
    ): Phaser.GameObjects.Container => {
      const text = this.add.text(0, 0, label, {
        fontSize: pw.fontSize.css('lg'),
        color: pw.color.rgb('white'),
      });

      const padX = pw.spacing.px('6');
      const padY = pw.spacing.px('3');
      const width = text.width + padX * 2;
      const height = text.height + padY * 2;

      const bg = this.add.rectangle(0, 0, width, height, pw.color.hex(bgToken));
      bg.setOrigin(0.5);

      const container = this.add.container(x, y, [bg, text]);
      text.setPosition(-text.width / 2, -text.height / 2);
      container.setSize(width, height);

      bg.setInteractive();

      // Hover and click states
      const highColor = bgToken.replace('-500', '-600') as ColorToken;
      const lowColor = bgToken.replace('-500', '-700') as ColorToken;

      bg.on('pointerover', () => (bg.fillColor = pw.color.hex(highColor)));
      bg.on('pointerout', () => (bg.fillColor = pw.color.hex(bgToken)));
      bg.on('pointerdown', () => (bg.fillColor = pw.color.hex(lowColor)));
      bg.on('pointerup', () => (bg.fillColor = pw.color.hex(highColor)));

      return container;
    };

    createButton(300, 120, 'Primary', 'green-500');
    createButton(300, 200, 'Secondary', 'blue-500');
    createButton(300, 280, 'Danger', 'red-500');
  }
}