@dryui/theme-wizard 4.0.0 → 5.0.0

package/dist/components/WizardShell.svelte

@@ -1,140 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { useThemeOverride } from '@dryui/primitives/use-theme-override';
-	import { Text } from '@dryui/ui/text';
-	import { Button } from '@dryui/ui/button';
-	import { getAllTokens, wizardState } from '../state.svelte.js';
-	import StepIndicator from './StepIndicator.svelte';
-
-	interface Props {
-		title: string;
-		subtitle?: string;
-		step: number;
-		children: Snippet;
-		onback?: () => void;
-		onnext?: () => void;
-		nextLabel?: string;
-		backLabel?: string;
-		onstep?: (step: number) => void;
-	}
-
-	let {
-		title,
-		subtitle,
-		step,
-		children,
-		onback,
-		onnext,
-		nextLabel = 'Next',
-		backLabel = 'Back',
-		onstep
-	}: Props = $props();
-
-	useThemeOverride(() => getAllTokens());
-</script>
-
-<div class="wizard-shell">
-	<header class="wizard-header">
-		<div class="wizard-header-inner">
-			<Text size="lg" weight="semibold">Theme Wizard</Text>
-			<StepIndicator currentStep={step} {...onstep ? { onstep } : {}} />
-		</div>
-	</header>
-
-	<main class="wizard-main">
-		<div class="wizard-content">
-			<div class="wizard-title">
-				<span class="wizard-step-heading">{title}</span>
-				{#if subtitle}
-					<Text as="p" color="muted">{subtitle}</Text>
-				{/if}
-			</div>
-
-			{@render children()}
-		</div>
-	</main>
-
-	<footer class="wizard-footer">
-		<div class="wizard-footer-inner">
-			{#if onback}
-				<Button variant="ghost" onclick={onback}>&larr; {backLabel}</Button>
-			{/if}
-			{#if onnext}
-				<Button variant="solid" onclick={onnext}>{nextLabel} &rarr;</Button>
-			{/if}
-		</div>
-	</footer>
-</div>
-
-<style>
-	.wizard-shell {
-		display: grid;
-		grid-template-rows: auto 1fr auto;
-		min-height: 100dvh;
-		color: var(--dry-color-text-strong);
-		background-color: var(--dry-color-bg-base);
-		transition: background-color 0.4s ease;
-	}
-
-	.wizard-header {
-		display: grid;
-		grid-template-columns: minmax(0, 64rem);
-		justify-content: center;
-		padding: var(--dry-space-4) var(--dry-space-6);
-		border-bottom: 1px solid var(--dry-app-bar-border, var(--dry-color-stroke-weak));
-		background: var(--dry-app-bar-bg, var(--dry-color-bg-base));
-		box-shadow: var(--dry-app-bar-shadow, none);
-		transition:
-			border-color 0.3s ease,
-			background 0.3s ease,
-			box-shadow 0.3s ease;
-	}
-
-	.wizard-header-inner {
-		display: grid;
-		grid-template-columns: auto 1fr;
-		align-items: center;
-		gap: var(--dry-space-6);
-	}
-
-	.wizard-main {
-		display: grid;
-		grid-template-columns: minmax(0, 48rem);
-		justify-content: center;
-		align-content: start;
-		padding: var(--dry-space-10) var(--dry-space-6);
-		overflow-y: auto;
-	}
-
-	.wizard-content {
-		display: grid;
-		gap: var(--dry-space-10);
-	}
-
-	.wizard-title {
-		display: grid;
-		gap: var(--dry-space-3);
-	}
-
-	.wizard-step-heading {
-		font-family: var(--dry-font-mono);
-		font-size: clamp(1.75rem, 3vw, 2.5rem);
-		letter-spacing: 0.02em;
-	}
-
-	.wizard-footer {
-		display: grid;
-		grid-template-columns: minmax(0, 48rem);
-		justify-content: center;
-		padding: var(--dry-space-4) var(--dry-space-6);
-		border-top: 1px solid var(--dry-app-bar-border, var(--dry-color-stroke-weak));
-		transition: border-color 0.3s ease;
-	}
-
-	.wizard-footer-inner {
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		gap: var(--dry-space-3);
-	}
-</style>

package/dist/components/WizardShell.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    title: string;
-    subtitle?: string;
-    step: number;
-    children: Snippet;
-    onback?: () => void;
-    onnext?: () => void;
-    nextLabel?: string;
-    backLabel?: string;
-    onstep?: (step: number) => void;
-}
-declare const WizardShell: import("svelte").Component<Props, {}, "">;
-type WizardShell = ReturnType<typeof WizardShell>;
-export default WizardShell;

package/dist/engine/derivation.d.ts

@@ -1,282 +0,0 @@
-/**
- * derivation.ts — Color Derivation Engine
- *
- * Pure functions, zero UI dependencies.
- * HSB-first approach: brand input is always HSB (Hue/Saturation/Brightness).
- */
-export interface HSL {
-    h: number;
-    s: number;
-    l: number;
-}
-export interface HSB {
-    h: number;
-    s: number;
-    b: number;
-}
-export interface BrandInput {
-    h: number;
-    s: number;
-    b: number;
-}
-export interface ThemeOptions {
-    neutralMode?: 'monochromatic' | 'neutral';
-    brandCandidates?: BrandInput[];
-    statusHues?: {
-        error?: number;
-        warning?: number;
-        success?: number;
-        info?: number;
-    };
-    darkBg?: {
-        base?: string;
-        raised?: string;
-        overlay?: string;
-    };
-}
-export interface ThemeTokens {
-    light: Record<string, string>;
-    dark: Record<string, string>;
-}
-export type SystemTone = 'error' | 'warning' | 'success' | 'info';
-export interface ThemeReference {
-    source: string;
-    value: string;
-}
-export interface ThemeModeLadder<T> {
-    light: T;
-    dark: T;
-}
-export interface TransparentNeutralLadder {
-    textStrong: string;
-    textWeak: string;
-    icon: string;
-    strokeStrong: string;
-    strokeWeak: string;
-    fill: string;
-    fillHover: string;
-    fillActive: string;
-}
-export interface TransparentBrandLadder {
-    brand: string;
-    text: string;
-    fill: string;
-    fillHover: string;
-    fillActive: string;
-    fillWeak: string;
-    stroke: string;
-    on: string;
-    focusRing: string;
-}
-export interface TransparentToneLadder {
-    text: string;
-    fill: string;
-    fillHover: string;
-    fillWeak: string;
-    stroke: string;
-    on: string;
-}
-export interface TransparentPrimitiveLadders {
-    neutral: ThemeModeLadder<TransparentNeutralLadder>;
-    brand: ThemeModeLadder<TransparentBrandLadder>;
-    system: Record<SystemTone, ThemeModeLadder<TransparentToneLadder>>;
-}
-export interface LiteralTransparentNeutralLadder {
-    '1000': string;
-    '700': string;
-    '500': string;
-    '100': string;
-    '50': string;
-    '25': string;
-}
-export interface LiteralTransparentToneLadder {
-    '1000': string;
-    '800': string;
-    '200': string;
-    '50': string;
-}
-export interface LiteralTransparentPrimitiveLadders {
-    neutral: ThemeModeLadder<LiteralTransparentNeutralLadder>;
-    brand: ThemeModeLadder<LiteralTransparentToneLadder>;
-    system: Record<SystemTone, ThemeModeLadder<LiteralTransparentToneLadder>>;
-}
-export interface SolidSurfaceSteps {
-    '1000'?: string;
-    '900'?: string;
-    '850'?: string;
-    '800'?: string;
-    '50'?: string;
-    '0'?: string;
-}
-export interface SolidSurfaceRoles {
-    sunken: string;
-    base: string;
-    raised?: string;
-    overlay?: string;
-}
-export interface SolidSurfacePalette {
-    steps: SolidSurfaceSteps;
-    roles: SolidSurfaceRoles;
-}
-export interface SolidPrimitiveLadders {
-    grey: ThemeModeLadder<SolidSurfacePalette>;
-    yellow: ThemeModeLadder<{
-        '1000': string;
-    }>;
-}
-export interface InteractiveStateRecipe {
-    baseFill: string;
-    hoverOverlay: string;
-    activeOverlay: string;
-    focusRing: string;
-    label: string;
-    stroke: string;
-    disabledFill: string;
-    disabledLabel: string;
-    disabledStroke: string;
-}
-export interface InteractionStateRecipes {
-    neutral: ThemeModeLadder<InteractiveStateRecipe>;
-    brand: ThemeModeLadder<InteractiveStateRecipe>;
-    system: Record<SystemTone, ThemeModeLadder<InteractiveStateRecipe>>;
-}
-export interface BrandCandidateAssessment {
-    id: string;
-    label: string;
-    input: BrandInput;
-    resolvedInput: BrandInput;
-    usesHueFallback: boolean;
-    lightFill: string;
-    darkFill: string;
-    lightContrast: number;
-    darkContrast: number;
-    minContrast: number;
-    statusConflict: SystemTone | 'warning' | null;
-    score: number;
-    role: 'interactive' | 'decorative';
-}
-export interface BrandPolicy {
-    candidates: BrandCandidateAssessment[];
-    raw: BrandCandidateAssessment;
-    interactive: BrandCandidateAssessment;
-    multipleBrand: boolean;
-    fallbackTriggered: boolean;
-    statusConflictResolved: boolean;
-}
-export interface ThemeAuditCheck extends ForegroundSurfaceAssessment {
-    id: string;
-    label: string;
-    kind: 'text' | 'stroke' | 'shape';
-    contrastThreshold: number;
-    apcaThreshold: number;
-    passes: boolean;
-}
-export interface ThemeAudit {
-    contextChecks: ThemeAuditCheck[];
-    allPass: boolean;
-}
-export interface PhotoTemperatureGuidance {
-    temperature: 'warm' | 'cool' | 'neutral';
-    recommendation: string;
-    accentDirection: string;
-}
-export interface ThemeModelLayer {
-    light: Record<string, ThemeReference>;
-    dark: Record<string, ThemeReference>;
-}
-export interface ThemeModel {
-    primitives: ThemeTokens;
-    transparentPrimitives: TransparentPrimitiveLadders;
-    literalTransparentPrimitives: LiteralTransparentPrimitiveLadders;
-    solidPrimitives: SolidPrimitiveLadders;
-    interactionStates: InteractionStateRecipes;
-    brandPolicy: BrandPolicy;
-    audit: ThemeAudit;
-    photoGuidance: PhotoTemperatureGuidance;
-    _theme: ThemeModelLayer;
-    semantic: ThemeModelLayer;
-    tokens: ThemeTokens;
-}
-/**
- * Convert HSB (Hue/Saturation/Brightness) to HSL.
- * h: 0–360, s: 0–1, b: 0–1
- * Returns { h: 0–360, s: 0–1, l: 0–1 }
- */
-export declare function hsbToHsl(h: number, s: number, b: number): HSL;
-/**
- * Convert HSL to HSB.
- * h: 0–360, s: 0–1, l: 0–1
- * Returns { h: 0–360, s: 0–1, b: 0–1 }
- */
-export declare function hslToHsb(h: number, s: number, l: number): HSB;
-/**
- * Convert HSL to RGB.
- * h: 0–360, s: 0–1, l: 0–1
- * Returns [r, g, b] each 0–255
- */
-export declare function hslToRgb(h: number, s: number, l: number): [number, number, number];
-/**
- * Convert HSL to hex string (#rrggbb).
- * h: 0–360, s: 0–1, l: 0–1
- */
-export declare function hslToHex(h: number, s: number, l: number): string;
-/**
- * Convert hex string (#rrggbb) to HSL.
- */
-export declare function hexToHsl(hex: string): HSL;
-export declare function cssColorToRgb(color: string): [number, number, number] | null;
-/**
- * Compute relative luminance from linear RGB channels (each 0–255).
- * Per WCAG 2.1.
- */
-export declare function relativeLuminance(r: number, g: number, b: number): number;
-/**
- * Compute WCAG contrast ratio from two luminance values.
- * Returns a value between 1 and 21.
- */
-export declare function contrastRatio(lum1: number, lum2: number): number;
-/**
- * Check if two luminance values meet a contrast threshold.
- */
-export declare function meetsContrast(lum1: number, lum2: number, threshold: number): boolean;
-/**
- * Compute relative luminance from HSL values.
- * h: 0–360, s: 0–1, l: 0–1
- */
-export declare function luminanceFromHsl(h: number, s: number, l: number): number;
-export declare function contrastBetweenCssColors(first: string, second: string): number | null;
-export interface ForegroundSurfaceThresholds {
-    contrast?: number;
-    apca?: number;
-}
-export interface ForegroundSurfaceAssessment {
-    foreground: string;
-    surface: string;
-    contrast: number | null;
-    apca: number | null;
-    apcaMagnitude: number | null;
-    passesContrast: boolean;
-    passesApca: boolean;
-}
-export interface ForegroundSurfaceComparison {
-    foreground: string;
-    assessments: ForegroundSurfaceAssessment[];
-    contrastSpread: number | null;
-    apcaMagnitudeSpread: number | null;
-}
-export declare function measureForegroundOnSurface(foreground: string, surface: string, thresholds?: ForegroundSurfaceThresholds): ForegroundSurfaceAssessment;
-export declare function compareForegroundAcrossSurfaces(foreground: string, surfaces: readonly string[], thresholds?: ForegroundSurfaceThresholds): ForegroundSurfaceComparison;
-export declare function apcaSrgbToY(rgb: [number, number, number]): number;
-export declare function apcaContrast(textY: number, backgroundY: number): number;
-export declare function apcaContrastBetweenCssColors(text: string, background: string): number | null;
-export declare function meetsApca(lc: number | null, threshold: number): boolean;
-export declare function generateThemeModel(brand: BrandInput, options?: ThemeOptions): ThemeModel;
-/**
- * Generate a complete design token set for light and dark modes
- * from a brand color specified in HSB.
- *
- * @param brand.h  Hue, 0–360
- * @param brand.s  Saturation, 0–100
- * @param brand.b  Brightness, 0–100
- */
-export declare function generateTheme(brand: BrandInput, options?: ThemeOptions): ThemeTokens;