@stackwright/themes 0.3.1 → 0.4.1

package/src/themeLoader.ts

@@ -1,116 +0,0 @@
-import * as yaml from 'js-yaml';
-import { Theme } from './types';
-
-export class ThemeLoader {
-  private static themes: Map<string, Theme> = new Map();
-
-  static loadThemeFromYaml(yamlContent: string): Theme {
-    try {
-      const theme = yaml.load(yamlContent) as Theme;
-      this.themes.set(theme.name, theme);
-      return theme;
-    } catch (error) {
-      throw new Error(`Failed to parse theme YAML: ${error}`);
-    }
-  }
-
-  static loadThemeFromFile(themeName: string): Theme {
-    // In a real implementation, this would load from the file system
-    // For now, we'll embed the themes
-    const themeData = this.getEmbeddedTheme(themeName);
-    return this.loadThemeFromYaml(themeData);
-  }
-
-  static getTheme(name: string): Theme | undefined {
-    return this.themes.get(name);
-  }
-
-  static getAllThemes(): Theme[] {
-    return Array.from(this.themes.values());
-  }
-
-  static registerCustomTheme(theme: Theme): void {
-    this.themes.set(theme.name, theme);
-    console.log(`🎨 Registered custom theme: ${theme.name}`);
-  }
-
-  static loadCustomTheme(theme: Theme): Theme {
-    this.registerCustomTheme(theme);
-    return theme;
-  }
-
-  private static getEmbeddedTheme(name: string): string {
-    const themes: Record<string, string> = {
-      corporate: `
-id: "corporate"
-name: "Corporate"
-description: "A professional amber-toned corporate theme"
-colors:
-  primary: "#f59e0b"
-  secondary: "#334155"
-  accent: "#d97706"
-  background: "#f8fafc"
-  surface: "#ffffff"
-  text: "#1f2937"
-  textSecondary: "#6b7280"
-typography:
-  fontFamily:
-    primary: "Roboto, sans-serif"
-    secondary: "Roboto, sans-serif"
-  scale:
-    xs: "0.75rem"
-    sm: "0.875rem"
-    base: "1rem"
-    lg: "1.125rem"
-    xl: "1.25rem"
-    2xl: "1.5rem"
-    3xl: "1.875rem"
-spacing:
-  xs: "0.5rem"
-  sm: "0.75rem"
-  md: "1rem"
-  lg: "1.5rem"
-  xl: "2rem"
-  2xl: "3rem"
-`,
-      soft: `
-id: "soft"
-name: "Soft"
-description: "A gentle pink-toned soft theme"
-colors:
-  primary: "#ec4899"
-  secondary: "#6b7280"
-  accent: "#db2777"
-  background: "#f9fafb"
-  surface: "#ffffff"
-  text: "#374151"
-  textSecondary: "#9ca3af"
-typography:
-  fontFamily:
-    primary: "Roboto, sans-serif"
-    secondary: "Roboto, sans-serif"
-  scale:
-    xs: "0.75rem"
-    sm: "0.875rem"
-    base: "1rem"
-    lg: "1.125rem"
-    xl: "1.25rem"
-    2xl: "1.5rem"
-    3xl: "1.875rem"
-spacing:
-  xs: "0.5rem"
-  sm: "0.75rem"
-  md: "1rem"
-  lg: "1.5rem"
-  xl: "2rem"
-  2xl: "3rem"
-`
-    };
-
-    if (!themes[name]) {
-      throw new Error(`Theme '${name}' not found`);
-    }
-
-    return themes[name];
-  }
-}

package/src/themes/corporate.ts

@@ -1,31 +0,0 @@
-export const corporateTheme = {
-  colors: {
-    primary: {
-      50: '#fef7ee',
-      100: '#fdedd3',
-      500: '#f59e0b', // amber-500
-      600: '#d97706', // amber-600
-      700: '#b45309', // amber-700
-    },
-    neutral: {
-      50: '#f8fafc',
-      100: '#f1f5f9',
-      700: '#334155',
-      800: '#1e293b',
-      900: '#0f172a',
-    },
-    text: {
-      primary: '#1f2937',
-      secondary: '#6b7280',
-      inverse: '#ffffff',
-    }
-  },
-  spacing: {
-    section: 'py-20',
-    container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
-  },
-  typography: {
-    hero: 'text-4xl md:text-6xl font-bold',
-    subtitle: 'text-xl md:text-2xl',
-  }
-};

package/src/themes/corporate.yaml

@@ -1,36 +0,0 @@
-name: "Corporate"
-colors:
-  primary:
-    50: "#fef7ee"
-    100: "#fdedd3"
-    500: "#f59e0b"
-    600: "#d97706"
-    700: "#b45309"
-  neutral:
-    50: "#f8fafc"
-    100: "#f1f5f9"
-    700: "#334155"
-    800: "#1e293b"
-    900: "#0f172a"
-  text:
-    primary: "#1f2937"
-    secondary: "#6b7280"
-    inverse: "#ffffff"
-
-spacing:
-  section: "py-20"
-  container: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
-
-typography:
-  hero: "text-4xl md:text-6xl font-bold"
-  subtitle: "text-xl md:text-2xl"
-
-components:
-  button:
-    primary: "bg-amber-600 text-white hover:bg-amber-700 px-8 py-3 rounded-lg font-semibold"
-    secondary: "text-amber-600 border border-amber-600 hover:bg-amber-50 px-8 py-3 rounded-lg font-semibold"
-  header:
-    background: "bg-white shadow-sm"
-    border: "border-b border-gray-200"
-  hero:
-    background: "bg-gradient-to-br from-slate-900 to-slate-800"

package/src/themes/soft.ts

@@ -1,32 +0,0 @@
-export const softTheme = {
-  colors: {
-    primary: {
-      50: '#fdf2f8',
-      100: '#fce7f3',
-      500: '#ec4899', // pink-500
-      600: '#db2777', // pink-600
-      700: '#be185d', // pink-700
-    },
-    neutral: {
-      50: '#fefefe',
-      100: '#f9fafb',
-      700: '#6b7280',
-      800: '#4b5563',
-      900: '#374151',
-    },
-    text: {
-      primary: '#374151',
-      secondary: '#9ca3af',
-      inverse: '#ffffff',
-    }
-  },
-  spacing: {
-    section: 'py-16',
-    container: 'max-w-6xl mx-auto px-6 sm:px-8 lg:px-10',
-  },
-  typography: {
-    hero: 'text-3xl md:text-5xl font-semibold',
-    subtitle: 'text-lg md:text-xl',
-  }
-};
-

package/src/themes/soft.yaml

@@ -1,36 +0,0 @@
-name: "Soft"
-colors:
-  primary:
-    50: "#fdf2f8"
-    100: "#fce7f3"
-    500: "#ec4899"
-    600: "#db2777"
-    700: "#be185d"
-  neutral:
-    50: "#fefefe"
-    100: "#f9fafb"
-    700: "#6b7280"
-    800: "#4b5563"
-    900: "#374151"
-  text:
-    primary: "#374151"
-    secondary: "#9ca3af"
-    inverse: "#ffffff"
-
-spacing:
-  section: "py-16"
-  container: "max-w-6xl mx-auto px-6 sm:px-8 lg:px-10"
-
-typography:
-  hero: "text-3xl md:text-5xl font-semibold"
-  subtitle: "text-lg md:text-xl"
-
-components:
-  button:
-    primary: "bg-pink-600 text-white hover:bg-pink-700 px-6 py-2 rounded-full font-medium"
-    secondary: "text-pink-600 border border-pink-600 hover:bg-pink-50 px-6 py-2 rounded-full font-medium"
-  header:
-    background: "bg-neutral-50 shadow-none"
-    border: "border-b border-neutral-200"
-  hero:
-    background: "bg-gradient-to-br from-neutral-100 to-neutral-200"

package/src/types.ts

@@ -1,66 +0,0 @@
-export interface ThemeConfig {
-    id: string;
-    name: string;
-    description: string;
-    colors: {
-        primary: string;
-        secondary: string;
-        accent: string;
-        background: string;
-        surface: string;
-        text: string;
-        textSecondary: string;
-    };
-    backgroundImage?: {
-        url: string;
-        repeat?: "repeat" | "repeat-x" | "repeat-y" | "no-repeat";
-        size?: "auto" | "cover" | "contain" | string;
-        position?: string;
-        attachment?: "scroll" | "fixed" | "local";
-        scale?: number;
-        animation?: "drift" | "float" | "shimmer" | "shimmer-float" | "none";
-        customAnimation?: string;
-    };
-    typography: {
-        fontFamily: {
-            primary: string;
-            secondary: string;
-        };
-        scale: {
-            xs: string;
-            sm: string;
-            base: string;
-            lg: string;
-            xl: string;
-            "2xl": string;
-            "3xl": string;
-        };
-    };
-    spacing: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-    };
-    components?: {
-        button?: ComponentStyle;
-        card?: ComponentStyle;
-        header?: ComponentStyle;
-        footer?: ComponentStyle;
-    };
-}
-
-export interface ComponentStyle {
-    base?: string;
-    primary?: string;
-    secondary?: string;
-    outline?: string;
-    shadow?: string;
-    nav?: string;
-    text?: string;
-    [key: string]: string | undefined;
-}
-
-export interface Theme extends ThemeConfig {}

package/test/setup.ts

@@ -1 +0,0 @@
-// Vitest setup for @stackwright/themes

package/test/themeLoader.test.ts

@@ -1,174 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { ThemeLoader } from '../src/themeLoader';
-import type { Theme } from '../src/types';
-
-// The ThemeLoader uses a static Map, so we need to be careful about state
-// leaking between tests. We work around this by using unique theme names.
-
-const makeCustomTheme = (overrides: Partial<Theme> = {}): Theme => ({
-    id: 'test-theme',
-    name: 'Test Theme',
-    description: 'A theme for testing',
-    colors: {
-        primary: '#aabbcc',
-        secondary: '#112233',
-        accent: '#ccbbaa',
-        background: '#ffffff',
-        surface: '#f0f0f0',
-        text: '#000000',
-        textSecondary: '#666666',
-    },
-    typography: {
-        fontFamily: { primary: 'Arial, sans-serif', secondary: 'Georgia, serif' },
-        scale: {
-            xs: '0.75rem', sm: '0.875rem', base: '1rem',
-            lg: '1.125rem', xl: '1.25rem', '2xl': '1.5rem', '3xl': '1.875rem',
-        },
-    },
-    spacing: {
-        xs: '0.5rem', sm: '0.75rem', md: '1rem',
-        lg: '1.5rem', xl: '2rem', '2xl': '3rem',
-    },
-    ...overrides,
-});
-
-describe('ThemeLoader.loadThemeFromFile', () => {
-    it('loads the corporate theme and returns a valid ThemeConfig', () => {
-        const theme = ThemeLoader.loadThemeFromFile('corporate');
-        expect(theme).toBeDefined();
-        expect(theme.name).toBe('Corporate');
-        expect(theme.id).toBe('corporate');
-    });
-
-    it('corporate theme has flat hex string colors (not nested objects)', () => {
-        const theme = ThemeLoader.loadThemeFromFile('corporate');
-        expect(typeof theme.colors.primary).toBe('string');
-        expect(theme.colors.primary).toMatch(/^#[0-9a-fA-F]{6}$/);
-        expect(typeof theme.colors.secondary).toBe('string');
-        expect(typeof theme.colors.background).toBe('string');
-        expect(typeof theme.colors.surface).toBe('string');
-        expect(typeof theme.colors.text).toBe('string');
-        expect(typeof theme.colors.textSecondary).toBe('string');
-    });
-
-    it('loads the soft theme and returns a valid ThemeConfig', () => {
-        const theme = ThemeLoader.loadThemeFromFile('soft');
-        expect(theme).toBeDefined();
-        expect(theme.name).toBe('Soft');
-        expect(theme.id).toBe('soft');
-    });
-
-    it('soft theme has flat hex string colors', () => {
-        const theme = ThemeLoader.loadThemeFromFile('soft');
-        expect(typeof theme.colors.primary).toBe('string');
-        expect(theme.colors.primary).toMatch(/^#[0-9a-fA-F]{6}$/);
-    });
-
-    it('throws for an unknown theme name', () => {
-        expect(() => ThemeLoader.loadThemeFromFile('nonexistent')).toThrow(
-            "Theme 'nonexistent' not found"
-        );
-    });
-
-    it('loaded themes have required typography and spacing fields', () => {
-        const theme = ThemeLoader.loadThemeFromFile('corporate');
-        expect(theme.typography).toBeDefined();
-        expect(theme.typography.fontFamily.primary).toBeTruthy();
-        expect(theme.spacing).toBeDefined();
-        expect(theme.spacing.md).toBeTruthy();
-    });
-});
-
-describe('ThemeLoader.loadThemeFromYaml', () => {
-    it('parses valid YAML and returns a theme', () => {
-        const yaml = `
-id: "yaml-test"
-name: "YAML Test"
-description: "Parsed from YAML"
-colors:
-  primary: "#ff0000"
-  secondary: "#00ff00"
-  accent: "#0000ff"
-  background: "#ffffff"
-  surface: "#eeeeee"
-  text: "#111111"
-  textSecondary: "#555555"
-typography:
-  fontFamily:
-    primary: "Roboto, sans-serif"
-    secondary: "Roboto, sans-serif"
-  scale:
-    xs: "0.75rem"
-    sm: "0.875rem"
-    base: "1rem"
-    lg: "1.125rem"
-    xl: "1.25rem"
-    2xl: "1.5rem"
-    3xl: "1.875rem"
-spacing:
-  xs: "0.5rem"
-  sm: "0.75rem"
-  md: "1rem"
-  lg: "1.5rem"
-  xl: "2rem"
-  2xl: "3rem"
-`;
-        const theme = ThemeLoader.loadThemeFromYaml(yaml);
-        expect(theme.name).toBe('YAML Test');
-        expect(theme.colors.primary).toBe('#ff0000');
-    });
-
-    it('throws for invalid YAML syntax', () => {
-        expect(() =>
-            ThemeLoader.loadThemeFromYaml('{ invalid: yaml: content: :')
-        ).toThrow('Failed to parse theme YAML');
-    });
-});
-
-describe('ThemeLoader.registerCustomTheme / getTheme', () => {
-    it('registers a custom theme and retrieves it by name', () => {
-        const custom = makeCustomTheme({ name: 'My Custom Theme A' });
-        ThemeLoader.registerCustomTheme(custom);
-        const retrieved = ThemeLoader.getTheme('My Custom Theme A');
-        expect(retrieved).toBeDefined();
-        expect(retrieved?.colors.primary).toBe('#aabbcc');
-    });
-
-    it('getTheme returns undefined for an unregistered name', () => {
-        expect(ThemeLoader.getTheme('__does_not_exist__')).toBeUndefined();
-    });
-
-    it('overwriting a theme by name replaces it', () => {
-        const v1 = makeCustomTheme({ name: 'Overwrite Test', colors: { ...makeCustomTheme().colors, primary: '#111111' } });
-        const v2 = makeCustomTheme({ name: 'Overwrite Test', colors: { ...makeCustomTheme().colors, primary: '#222222' } });
-        ThemeLoader.registerCustomTheme(v1);
-        ThemeLoader.registerCustomTheme(v2);
-        expect(ThemeLoader.getTheme('Overwrite Test')?.colors.primary).toBe('#222222');
-    });
-});
-
-describe('ThemeLoader.loadCustomTheme', () => {
-    it('registers the theme and returns it', () => {
-        const custom = makeCustomTheme({ name: 'LoadCustom Test' });
-        const returned = ThemeLoader.loadCustomTheme(custom);
-        expect(returned).toBe(custom);
-        expect(ThemeLoader.getTheme('LoadCustom Test')).toBeDefined();
-    });
-});
-
-describe('ThemeLoader.getAllThemes', () => {
-    it('returns an array (may include themes registered by other tests)', () => {
-        // Load a known theme to ensure at least one is present
-        ThemeLoader.loadThemeFromFile('corporate');
-        const all = ThemeLoader.getAllThemes();
-        expect(Array.isArray(all)).toBe(true);
-        expect(all.length).toBeGreaterThan(0);
-    });
-
-    it('includes a custom theme after registration', () => {
-        const uniqueName = `AllThemes-${Date.now()}`;
-        ThemeLoader.registerCustomTheme(makeCustomTheme({ name: uniqueName }));
-        const names = ThemeLoader.getAllThemes().map(t => t.name);
-        expect(names).toContain(uniqueName);
-    });
-});

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}

package/tsup.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-  entry: ['src/index.ts'],
-  format: ['cjs', 'esm'],
-  dts: true,
-  target: 'es2022',
-  splitting: false,
-  sourcemap: true,
-  clean: true,
-    outExtension({ format }) {
-    return {
-      js: format === 'cjs' ? '.js' : '.mjs',
-    }
-  }
-});

package/vitest.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./test/setup.ts'],
-  },
-  css: {
-    postcss: {},
-  },
-})