@dryui/theme-wizard 4.0.0 → 5.0.1

package/dist/engine/export-css.d.ts

@@ -1,32 +0,0 @@
-import type { ThemeTokens } from './derivation.js';
-export interface GenerateCssOptions {
-    personalityTokens?: Record<string, string>;
-    shapeTokens?: Record<string, string>;
-    shadowTokens?: {
-        light: Record<string, string>;
-        dark: Record<string, string>;
-    };
-}
-/**
- * Generate CSS files from a ThemeTokens object.
- *
- * Returns:
- *   defaultCss — `:root { ... }` block with all light tokens.
- *   darkCss    — `[data-theme="dark"] { ... }` block plus `.theme-auto` media query.
- */
-export declare function generateCss(theme: ThemeTokens, options?: GenerateCssOptions): {
-    defaultCss: string;
-    darkCss: string;
-};
-/**
- * Trigger a browser download of the combined CSS as a single file.
- */
-export declare function downloadCss(theme: ThemeTokens, filename?: string, options?: GenerateCssOptions): void;
-/**
- * Copy the combined CSS to the clipboard.
- */
-export declare function copyCss(theme: ThemeTokens, options?: GenerateCssOptions): Promise<void>;
-/**
- * Return a JSON string containing the light and dark token maps.
- */
-export declare function exportJson(theme: ThemeTokens): string;

package/dist/engine/export-css.js

@@ -1,90 +0,0 @@
-/**
- * Generate CSS files from a ThemeTokens object.
- *
- * Returns:
- *   defaultCss — `:root { ... }` block with all light tokens.
- *   darkCss    — `[data-theme="dark"] { ... }` block plus `.theme-auto` media query.
- */
-export function generateCss(theme, options) {
-    // Build default.css (:root block)
-    const defaultLines = [':root {'];
-    for (const [token, value] of Object.entries(theme.light)) {
-        defaultLines.push(`  ${token}: ${value};`);
-    }
-    // Shadow tokens (light mode)
-    if (options?.shadowTokens) {
-        for (const [token, value] of Object.entries(options.shadowTokens.light)) {
-            defaultLines.push(`  ${token}: ${value};`);
-        }
-    }
-    // Shape tokens (mode-independent, go in :root)
-    if (options?.shapeTokens) {
-        for (const [token, value] of Object.entries(options.shapeTokens)) {
-            defaultLines.push(`  ${token}: ${value};`);
-        }
-    }
-    // Personality tokens (use semantic refs, mode-independent, go in :root)
-    if (options?.personalityTokens) {
-        for (const [token, value] of Object.entries(options.personalityTokens)) {
-            defaultLines.push(`  ${token}: ${value};`);
-        }
-    }
-    defaultLines.push('}');
-    const defaultCss = defaultLines.join('\n');
-    // Build dark.css ([data-theme="dark"] + .theme-auto media query)
-    const darkEntries = Object.entries(theme.dark);
-    const darkShadowEntries = options?.shadowTokens ? Object.entries(options.shadowTokens.dark) : [];
-    const darkLines = ['[data-theme="dark"] {'];
-    for (const [token, value] of darkEntries) {
-        darkLines.push(`  ${token}: ${value};`);
-    }
-    for (const [token, value] of darkShadowEntries) {
-        darkLines.push(`  ${token}: ${value};`);
-    }
-    darkLines.push('}');
-    darkLines.push('');
-    darkLines.push('.theme-auto {');
-    darkLines.push('  @media (prefers-color-scheme: dark) {');
-    darkLines.push('    & {');
-    for (const [token, value] of darkEntries) {
-        darkLines.push(`      ${token}: ${value};`);
-    }
-    for (const [token, value] of darkShadowEntries) {
-        darkLines.push(`      ${token}: ${value};`);
-    }
-    darkLines.push('    }');
-    darkLines.push('  }');
-    darkLines.push('}');
-    const darkCss = darkLines.join('\n');
-    return { defaultCss, darkCss };
-}
-/**
- * Trigger a browser download of the combined CSS as a single file.
- */
-export function downloadCss(theme, filename = 'dryui-theme.css', options) {
-    const { defaultCss, darkCss } = generateCss(theme, options);
-    const combined = `${defaultCss}\n\n${darkCss}`;
-    const blob = new Blob([combined], { type: 'text/css' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-}
-/**
- * Copy the combined CSS to the clipboard.
- */
-export async function copyCss(theme, options) {
-    const { defaultCss, darkCss } = generateCss(theme, options);
-    const combined = `${defaultCss}\n\n${darkCss}`;
-    await navigator.clipboard.writeText(combined);
-}
-/**
- * Return a JSON string containing the light and dark token maps.
- */
-export function exportJson(theme) {
-    return JSON.stringify({ light: theme.light, dark: theme.dark }, null, 2);
-}

package/dist/engine/export-css.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/engine/export-css.test.js

@@ -1,78 +0,0 @@
-// apps/docs/src/lib/theme-wizard/export-css.test.ts
-import { describe, test, expect } from 'bun:test';
-import { generateCss, exportJson } from './export-css.js';
-import { generateTheme } from './derivation.js';
-const defaultBrand = generateTheme({ h: 230, s: 65, b: 85 });
-describe('generateCss', () => {
-    test('defaultCss contains a :root block', () => {
-        const { defaultCss } = generateCss(defaultBrand);
-        expect(defaultCss).toContain(':root {');
-    });
-    test('defaultCss contains all light tokens', () => {
-        const { defaultCss } = generateCss(defaultBrand);
-        for (const [token] of Object.entries(defaultBrand.light)) {
-            expect(defaultCss).toContain(token);
-        }
-    });
-    test('defaultCss light token values are present', () => {
-        const { defaultCss } = generateCss(defaultBrand);
-        for (const [token, value] of Object.entries(defaultBrand.light)) {
-            expect(defaultCss).toContain(`${token}: ${value}`);
-        }
-    });
-    test('darkCss contains [data-theme="dark"] block', () => {
-        const { darkCss } = generateCss(defaultBrand);
-        expect(darkCss).toContain('[data-theme="dark"] {');
-    });
-    test('darkCss contains all dark tokens', () => {
-        const { darkCss } = generateCss(defaultBrand);
-        for (const [token] of Object.entries(defaultBrand.dark)) {
-            expect(darkCss).toContain(token);
-        }
-    });
-    test('darkCss contains .theme-auto media query', () => {
-        const { darkCss } = generateCss(defaultBrand);
-        expect(darkCss).toContain('.theme-auto {');
-        expect(darkCss).toContain('@media (prefers-color-scheme: dark)');
-    });
-    test('darkCss .theme-auto block uses & selector', () => {
-        const { darkCss } = generateCss(defaultBrand);
-        expect(darkCss).toContain('& {');
-    });
-    test('darkCss includes dark token values inside .theme-auto', () => {
-        const { darkCss } = generateCss(defaultBrand);
-        // Pick an arbitrary dark token and verify it appears twice (in both blocks)
-        const firstToken = Object.keys(defaultBrand.dark)[0] ?? '--dry-color-text-strong';
-        const occurrences = darkCss.split(firstToken).length - 1;
-        expect(occurrences).toBeGreaterThanOrEqual(2);
-    });
-    test('different brand colors produce different CSS', () => {
-        const oceanTheme = generateTheme({ h: 200, s: 80, b: 70 });
-        const { defaultCss: defaultDefault } = generateCss(defaultBrand);
-        const { defaultCss: defaultOcean } = generateCss(oceanTheme);
-        expect(defaultDefault).not.toBe(defaultOcean);
-    });
-});
-describe('exportJson', () => {
-    test('returns valid JSON', () => {
-        const json = exportJson(defaultBrand);
-        expect(() => JSON.parse(json)).not.toThrow();
-    });
-    test('JSON contains light and dark keys', () => {
-        const parsed = JSON.parse(exportJson(defaultBrand));
-        expect(parsed).toHaveProperty('light');
-        expect(parsed).toHaveProperty('dark');
-    });
-    test('JSON light tokens match theme', () => {
-        const parsed = JSON.parse(exportJson(defaultBrand));
-        for (const [token, value] of Object.entries(defaultBrand.light)) {
-            expect(parsed.light[token]).toBe(value);
-        }
-    });
-    test('JSON dark tokens match theme', () => {
-        const parsed = JSON.parse(exportJson(defaultBrand));
-        for (const [token, value] of Object.entries(defaultBrand.dark)) {
-            expect(parsed.dark[token]).toBe(value);
-        }
-    });
-});

package/dist/engine/index.d.ts

@@ -1,10 +0,0 @@
-export { hsbToHsl, hslToHsb, hslToRgb, hslToHex, hexToHsl, cssColorToRgb, relativeLuminance, contrastRatio, meetsContrast, luminanceFromHsl, contrastBetweenCssColors, measureForegroundOnSurface, compareForegroundAcrossSurfaces, apcaSrgbToY, apcaContrast, apcaContrastBetweenCssColors, meetsApca, generateThemeModel, generateTheme } from './derivation.js';
-export type { HSL, HSB, BrandInput, ThemeOptions, ThemeTokens, SystemTone, ThemeReference, ThemeModeLadder, TransparentNeutralLadder, TransparentBrandLadder, TransparentToneLadder, TransparentPrimitiveLadders, LiteralTransparentNeutralLadder, LiteralTransparentToneLadder, LiteralTransparentPrimitiveLadders, SolidSurfaceSteps, SolidSurfaceRoles, SolidSurfacePalette, SolidPrimitiveLadders, InteractiveStateRecipe, InteractionStateRecipes, BrandCandidateAssessment, BrandPolicy, ForegroundSurfaceThresholds, ForegroundSurfaceAssessment, ForegroundSurfaceComparison, ThemeAuditCheck, ThemeAudit, PhotoTemperatureGuidance, ThemeModelLayer, ThemeModel } from './derivation.js';
-export { generateCss, downloadCss, copyCss, exportJson } from './export-css.js';
-export type { GenerateCssOptions } from './export-css.js';
-export { encodeTheme, decodeTheme, encodeRecipe, decodeRecipe } from './url-codec.js';
-export type { DecodedTheme, WizardRecipe } from './url-codec.js';
-export { generatePalette, textToBrand } from './palette.js';
-export type { PaletteResult } from './palette.js';
-export { PRESETS, RECIPE_PRESETS } from './presets.js';
-export type { Preset, RecipePreset } from './presets.js';

package/dist/engine/index.js

@@ -1,6 +0,0 @@
-// Engine — pure functions, zero Svelte/rune dependencies. Safe for server-side use.
-export { hsbToHsl, hslToHsb, hslToRgb, hslToHex, hexToHsl, cssColorToRgb, relativeLuminance, contrastRatio, meetsContrast, luminanceFromHsl, contrastBetweenCssColors, measureForegroundOnSurface, compareForegroundAcrossSurfaces, apcaSrgbToY, apcaContrast, apcaContrastBetweenCssColors, meetsApca, generateThemeModel, generateTheme } from './derivation.js';
-export { generateCss, downloadCss, copyCss, exportJson } from './export-css.js';
-export { encodeTheme, decodeTheme, encodeRecipe, decodeRecipe } from './url-codec.js';
-export { generatePalette, textToBrand } from './palette.js';
-export { PRESETS, RECIPE_PRESETS } from './presets.js';

package/dist/engine/palette.d.ts

@@ -1,16 +0,0 @@
-import { type BrandInput } from './derivation.js';
-export interface PaletteResult {
-    swatches: string[];
-    bg: string;
-    accent: string;
-}
-/**
- * Generate a 4-color display palette from a brand HSB input.
- * Sweeps from a deep complement through the brand to a light accent.
- */
-export declare function generatePalette(brand: BrandInput): PaletteResult;
-/**
- * Deterministically map arbitrary text to a BrandInput.
- * Same text always produces the same color.
- */
-export declare function textToBrand(text: string): BrandInput;

package/dist/engine/palette.js

@@ -1,44 +0,0 @@
-import { hsbToHsl, hslToHex } from './derivation.js';
-/**
- * Generate a 4-color display palette from a brand HSB input.
- * Sweeps from a deep complement through the brand to a light accent.
- */
-export function generatePalette(brand) {
-    const h = brand.h;
-    const specs = [
-        { hOff: -105, s: 58, b: 45 },
-        { hOff: -50, s: 72, b: 58 },
-        { hOff: -18, s: 80, b: 72 },
-        { hOff: 25, s: 65, b: 82 }
-    ];
-    const swatches = specs.map(({ hOff, s, b }) => {
-        const hue = (((h + hOff) % 360) + 360) % 360;
-        const hsl = hsbToHsl(hue, s / 100, b / 100);
-        return hslToHex(hsl.h, hsl.s, hsl.l);
-    });
-    // Keep background in the dark blue-indigo range, with subtle brand influence
-    const bgHue = 230 + Math.sin((h / 360) * Math.PI * 2) * 25;
-    const bgHsl = hsbToHsl(bgHue, 0.5, 0.14);
-    const bg = hslToHex(bgHsl.h, bgHsl.s, bgHsl.l);
-    const accent = swatches[3];
-    return { swatches, bg, accent };
-}
-/**
- * Deterministically map arbitrary text to a BrandInput.
- * Same text always produces the same color.
- */
-export function textToBrand(text) {
-    const normalized = text.trim().toLowerCase();
-    if (!normalized)
-        return { h: 230, s: 65, b: 85 };
-    let hash = 0;
-    for (let i = 0; i < normalized.length; i++) {
-        hash = ((hash << 5) - hash + normalized.charCodeAt(i)) | 0;
-    }
-    hash = Math.abs(hash);
-    return {
-        h: hash % 360,
-        s: 55 + (hash % 30),
-        b: 60 + ((hash >> 8) % 25)
-    };
-}

package/dist/engine/presets.d.ts

@@ -1,13 +0,0 @@
-import type { BrandInput } from './derivation.js';
-import type { WizardRecipe } from './url-codec.js';
-export interface Preset {
-    name: string;
-    brandInput: BrandInput;
-}
-export declare const PRESETS: Preset[];
-export interface RecipePreset {
-    name: string;
-    description: string;
-    recipe: WizardRecipe;
-}
-export declare const RECIPE_PRESETS: RecipePreset[];

package/dist/engine/presets.js

@@ -1,124 +0,0 @@
-export const PRESETS = [
-    {
-        name: 'Default',
-        brandInput: { h: 230, s: 65, b: 85 }
-    },
-    {
-        name: 'Ocean',
-        brandInput: { h: 200, s: 80, b: 70 }
-    },
-    {
-        name: 'Forest',
-        brandInput: { h: 145, s: 60, b: 55 }
-    },
-    {
-        name: 'Sunset',
-        brandInput: { h: 25, s: 80, b: 90 }
-    },
-    {
-        name: 'Rose',
-        brandInput: { h: 340, s: 65, b: 85 }
-    },
-    {
-        name: 'Lavender',
-        brandInput: { h: 270, s: 45, b: 80 }
-    },
-    {
-        name: 'Midnight',
-        brandInput: { h: 240, s: 80, b: 35 }
-    },
-    {
-        name: 'Ember',
-        brandInput: { h: 10, s: 85, b: 75 }
-    }
-];
-export const RECIPE_PRESETS = [
-    {
-        name: 'Default',
-        description: 'Balanced starting point',
-        recipe: {
-            brand: { h: 230, s: 65, b: 85 },
-            personality: 'structured',
-            typography: { fontPreset: 'System', scale: 'default' },
-            shape: { radiusPreset: 'soft', radiusScale: 1, density: 'default' },
-            shadows: { preset: 'elevated', intensity: 1, tintBrand: true }
-        }
-    },
-    {
-        name: 'Dashboard',
-        description: 'Dense, data-first interface',
-        recipe: {
-            brand: { h: 200, s: 80, b: 70 },
-            personality: 'structured',
-            typography: { fontPreset: 'Geometric', scale: 'compact' },
-            shape: { radiusPreset: 'sharp', radiusScale: 1, density: 'compact' },
-            shadows: { preset: 'subtle', intensity: 1, tintBrand: false }
-        }
-    },
-    {
-        name: 'Editorial',
-        description: 'Warm, readable, content-forward',
-        recipe: {
-            brand: { h: 340, s: 65, b: 85 },
-            personality: 'clean',
-            typography: { fontPreset: 'Serif', scale: 'spacious' },
-            shape: { radiusPreset: 'soft', radiusScale: 1, density: 'spacious' },
-            shadows: { preset: 'flat', intensity: 1, tintBrand: true }
-        }
-    },
-    {
-        name: 'Terminal',
-        description: 'Precise, monospace, technical',
-        recipe: {
-            brand: { h: 145, s: 60, b: 55 },
-            personality: 'minimal',
-            typography: { fontPreset: 'Mono', scale: 'compact' },
-            shape: { radiusPreset: 'sharp', radiusScale: 1, density: 'compact' },
-            shadows: { preset: 'flat', intensity: 1, tintBrand: false }
-        }
-    },
-    {
-        name: 'Playful',
-        description: 'Warm, rounded, approachable',
-        recipe: {
-            brand: { h: 25, s: 80, b: 90 },
-            personality: 'rich',
-            typography: { fontPreset: 'Humanist', scale: 'default' },
-            shape: { radiusPreset: 'pill', radiusScale: 1, density: 'default' },
-            shadows: { preset: 'deep', intensity: 1, tintBrand: true }
-        }
-    },
-    {
-        name: 'Corporate',
-        description: 'Professional and measured',
-        recipe: {
-            brand: { h: 230, s: 65, b: 85 },
-            personality: 'structured',
-            typography: { fontPreset: 'Classical', scale: 'default' },
-            shape: { radiusPreset: 'soft', radiusScale: 1, density: 'default' },
-            shadows: { preset: 'elevated', intensity: 1, tintBrand: false }
-        }
-    },
-    {
-        name: 'Midnight',
-        description: 'Dark, atmospheric, layered',
-        recipe: {
-            brand: { h: 270, s: 45, b: 80 },
-            personality: 'rich',
-            typography: { fontPreset: 'System', scale: 'default' },
-            shape: { radiusPreset: 'rounded', radiusScale: 1, density: 'default' },
-            shadows: { preset: 'deep', intensity: 1, tintBrand: true }
-        }
-    },
-    {
-        name: 'Ember',
-        description: 'Bold, warm, high contrast',
-        recipe: {
-            brand: { h: 10, s: 85, b: 75 },
-            personality: 'structured',
-            typography: { fontPreset: 'Geometric', scale: 'default' },
-            shape: { radiusPreset: 'rounded', radiusScale: 1, density: 'default' },
-            shadows: { preset: 'elevated', intensity: 1, tintBrand: true }
-        }
-    }
-];

package/dist/engine/url-codec.d.ts

@@ -1,53 +0,0 @@
-import type { BrandInput, ThemeOptions } from './derivation.js';
-import type { NeutralMode, Personality, RadiusPreset, Density, ShadowPreset, TypeScale, FontPreset } from '../state.svelte.js';
-export interface DecodedTheme {
-    brand: BrandInput;
-    options?: ThemeOptions;
-}
-export interface WizardRecipe {
-    brand: BrandInput;
-    personality?: Personality;
-    neutralMode?: NeutralMode;
-    statusHues?: {
-        error?: number;
-        warning?: number;
-        success?: number;
-        info?: number;
-    };
-    typography?: {
-        fontPreset: FontPreset;
-        scale: TypeScale;
-    };
-    shape?: {
-        radiusPreset: RadiusPreset;
-        radiusScale: number;
-        density: Density;
-    };
-    shadows?: {
-        preset: ShadowPreset;
-        intensity: number;
-        tintBrand: boolean;
-    };
-}
-/**
- * Encode wizard input state into a compact URL-safe string.
- *
- * Format: `h{hue}s{sat}b{bri}` with optional `-n` neutral-mode flag and
- * `-e{error}w{warning}s{success}i{info}` status suffix.
- *
- * Examples:
- *   Default brand only:             `h230s65b85`
- *   Brand + status hue overrides:   `h230s65b85-e350w45`
- */
-export declare function encodeTheme(input: {
-    brand: BrandInput;
-    options?: ThemeOptions;
-}): string;
-/**
- * Decode a compact theme string back into brand input and options.
- *
- * Throws if the string is not a valid encoded theme.
- */
-export declare function decodeTheme(encoded: string): DecodedTheme;
-export declare function encodeRecipe(recipe: WizardRecipe): string;
-export declare function decodeRecipe(encoded: string): WizardRecipe;