@thewhileloop/whileui 4.2.3 → 4.3.0

package/dist/components/input/input.js

@@ -9,7 +9,7 @@ import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { typographyStyle } from '../../lib/recipes';
 import { webAutofillField } from '../../lib/web-autofill';
-import { useFormFieldState } from '../form-field/form-field';
+import { fieldAccessibilityProps, useFormFieldState } from '../form-field/form-field';
 const inputVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
@@ -43,7 +43,7 @@ const Input = React.forwardRef(({ className, prefix, suffix, inputClassName, var
                 paddingHorizontal: plain ? 0 : visual.controlPaddingXDefault,
             },
             !effectiveEditable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', !plain && webAutofillField, inputClassName), style: {
+        ], children: [prefix && (_jsx(View, { style: { paddingRight: Math.max(8, Math.round(visual.controlPaddingXDefault * 0.5)) }, children: prefix })), _jsx(TextInput, { ref: ref, ...fieldAccessibilityProps(field, props), className: cn('flex-1 text-foreground placeholder:text-muted-foreground web:outline-none', !plain && webAutofillField, inputClassName), style: {
                     ...typographyStyle(visual, 'label'),
                     minHeight: visual.controlHeightDefault - 2,
                     paddingVertical: visual.controlPaddingYDefault,

package/dist/components/numeric-input/numeric-input.d.ts

@@ -52,12 +52,15 @@ export interface NumericInputProps extends Omit<TextInputProps, 'value' | 'defau
     inputClassName?: string;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    /** Controlled numeric value. */
     value?: number | null;
     defaultValue?: number;
+    /** Numeric value change callback. */
     onValueChange?: (value: number | null) => void;
     min?: number;
     max?: number;
     step?: number;
+    /** Show decrement/increment controls. */
     showSteppers?: boolean;
     /** Drop the field shell (border, background, radius, padding) for embedding inside another field shell like LabeledField. */
     unstyled?: boolean;

package/dist/components/numeric-input/numeric-input.js

@@ -9,7 +9,7 @@ import { useInteractionTokens, withInteractivePressableStyle } from '../../lib/i
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { typographyStyle } from '../../lib/recipes';
 import { webAutofillField } from '../../lib/web-autofill';
-import { useFormFieldState } from '../form-field/form-field';
+import { fieldAccessibilityProps, useFormFieldState } from '../form-field/form-field';
 const numericInputVariants = tv({
     base: 'w-full flex-row items-center border-border bg-muted',
     variants: {
@@ -171,7 +171,7 @@ const NumericInput = React.forwardRef(({ className, inputClassName, prefix, suff
                 paddingRight: unstyled ? 0 : showSteppers ? stepInset : 0,
             },
             !effectiveEditable ? { opacity: interaction.disabledOpacity } : undefined,
-        ], children: [_jsx(NumericAffix, { side: "prefix", visual: visual, children: prefix }), _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, className: cn(numericInputTextVariants({ size }), 'w-full web:outline-none', !unstyled && webAutofillField, inputClassName), style: numericInputTextStyle(visual, size, unstyled, styleProp), value: model.textValue, onChangeText: model.handleTextChange, onFocus: (event) => {
+        ], children: [_jsx(NumericAffix, { side: "prefix", visual: visual, children: prefix }), _jsx(View, { className: "min-w-0 flex-1", style: Platform.OS === 'web' ? { minWidth: 0, flex: 1 } : undefined, children: _jsx(TextInput, { ref: ref, ...fieldAccessibilityProps(field, props), className: cn(numericInputTextVariants({ size }), 'w-full web:outline-none', !unstyled && webAutofillField, inputClassName), style: numericInputTextStyle(visual, size, unstyled, styleProp), value: model.textValue, onChangeText: model.handleTextChange, onFocus: (event) => {
                         setFocused(true);
                         onFocus?.(event);
                     }, onBlur: (event) => {

package/dist/components/otp-input/otp-input.d.ts

@@ -34,14 +34,22 @@ declare const otpCellVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined>>;
 export interface OTPInputProps extends Omit<ViewProps, 'children'> {
+    /** Number of digit cells. */
     length?: number;
+    /** Controlled value. */
     value?: string;
+    /** Called on each digit change. */
     onValueChange?: (value: string) => void;
+    /** Called when all digits are filled. */
     onComplete?: (code: string) => void;
+    /** Error variant triggers shake. */
     variant?: 'default' | 'error';
+    /** Cell size. */
     size?: 'default' | 'compact';
+    /** Mask digits with dots. */
     secure?: boolean;
     disabled?: boolean;
+    /** Focus first cell on mount. */
     autoFocus?: boolean;
     className?: string;
 }

package/dist/components/pressable/pressable.d.ts

@@ -2,6 +2,7 @@ import { type PressableInstance, type PressableProps as RNPressableProps } from
 import { type DisabledVariant, type PressedVariant } from '../../lib/interaction-tokens';
 import type { ForwardRefComponent } from '../../lib/ref-types';
 export interface PressableProps extends RNPressableProps {
+    /** Additional Tailwind classes. */
     className?: string;
     /** Semantic press feedback. `none` preserves a plain React Native Pressable. */
     feedback?: PressedVariant;

package/dist/components/segmented-control/segmented-control.d.ts

@@ -136,6 +136,7 @@ export interface SegmentedControlProps extends ViewProps {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** Pill = rounded-full items. */
     variant?: 'default' | 'pill';
     wrap?: boolean | 'auto';
     size?: 'default' | 'compact';

package/dist/components/surface/surface.d.ts

@@ -4,10 +4,15 @@ import { type ShadowTier, type SurfacePaddingSize } from '../../lib/recipes';
 import type { ForwardRefComponent } from '../../lib/ref-types';
 export type SurfaceLevel = 'base' | 'raised' | 'overlay';
 export interface SurfaceProps extends ViewProps, FrostedSurfaceProps {
+    /** Semantic background and depth tier. */
     level?: SurfaceLevel;
+    /** Token-backed interior spacing. */
     padding?: SurfacePaddingSize;
+    /** Token-backed corner radius. */
     radius?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Draw the theme hairline border. */
     bordered?: boolean;
+    /** Override the level's depth. */
     shadow?: ShadowTier;
 }
 declare const Surface: ForwardRefComponent<ViewInstance, SurfaceProps>;

package/dist/components/textarea/textarea.js

@@ -9,7 +9,7 @@ import { useInteractionTokens } from '../../lib/interaction-tokens';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { typographyStyle } from '../../lib/recipes';
 import { webAutofillField } from '../../lib/web-autofill';
-import { useFormFieldState } from '../form-field/form-field';
+import { fieldAccessibilityProps, useFormFieldState } from '../form-field/form-field';
 const textareaVariants = tv({
     base: 'w-full border-border bg-muted text-foreground',
     variants: {
@@ -48,7 +48,7 @@ const Textarea = React.forwardRef(({ className, size = 'default', placeholderTex
         paddingVertical: visual.controlPaddingYDefault,
         ...(!effectiveEditable ? { opacity: interaction.disabledOpacity } : null),
     };
-    return (_jsx(TextInput, { ref: ref, className: cn(textareaVariants({ size }), field.invalid && 'border-destructive', focusField, webAutofillField, className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, ...props }));
+    return (_jsx(TextInput, { ref: ref, ...fieldAccessibilityProps(field, props), className: cn(textareaVariants({ size }), field.invalid && 'border-destructive', focusField, webAutofillField, className), style: style, multiline: true, textAlignVertical: "top", placeholderTextColor: placeholderTextColor ?? colors.placeholder, editable: effectiveEditable, "aria-invalid": ariaInvalid ?? field.invalid, ...props }));
 });
 Textarea.displayName = 'Textarea';
 export { Textarea, textareaVariants };

package/dist/components/toast/toast.d.ts

@@ -25,21 +25,21 @@ export interface ToastProviderProps {
 export declare function ToastProvider({ children }: ToastProviderProps): React.JSX.Element;
 declare const toastVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: "border-border bg-background";
-        destructive: "border-destructive bg-destructive";
-        success: "border-success bg-success";
+        default: "border-border";
+        destructive: "border-destructive-soft-border";
+        success: "border-success-soft-border";
     };
-}, undefined, "w-full flex-row items-center justify-between border", {
+}, undefined, "w-full flex-row items-center gap-3 border bg-popover", {
     variant: {
-        default: "border-border bg-background";
-        destructive: "border-destructive bg-destructive";
-        success: "border-success bg-success";
+        default: "border-border";
+        destructive: "border-destructive-soft-border";
+        success: "border-success-soft-border";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: "border-border bg-background";
-        destructive: "border-destructive bg-destructive";
-        success: "border-success bg-success";
+        default: "border-border";
+        destructive: "border-destructive-soft-border";
+        success: "border-success-soft-border";
     };
 }, undefined>>;
 export interface ToastProps extends ViewProps, VariantProps<typeof toastVariants> {

package/dist/components/toast/toast.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Pressable, View } from 'react-native';
-import Animated, { SlideInUp, SlideOutUp } from 'react-native-reanimated';
+import { AccessibilityInfo, Platform, Pressable, View } from 'react-native';
+import Animated, { FadeOut, SlideInUp } from 'react-native-reanimated';
 import { Text } from '../text';
 import { cn } from '../../lib/cn';
+import { focusRing } from '../../lib/focus-ring';
+import { useMotionPolicy } from '../../lib/motion-policy';
 import { tv } from '../../lib/tv';
 import { useVisualTokens } from '../../lib/visual-tokens';
 import { useThemeColors } from '../../lib/theme-colors';
@@ -17,15 +19,11 @@ export function useToast() {
     return context;
 }
 let toastId = 0;
-const TEXT_COLOR_BY_VARIANT = {
-    default: 'text-foreground',
-    destructive: 'text-destructive-foreground',
-    success: 'text-success-foreground',
-};
-const DESCRIPTION_COLOR_BY_VARIANT = {
-    default: 'text-muted-foreground',
-    destructive: 'text-destructive-foreground-muted',
-    success: 'text-success-foreground-muted',
+/** Status variants carry a small dot, not a fill, so every toast sits on the theme's surface. */
+const ACCENT_BY_VARIANT = {
+    default: undefined,
+    destructive: 'bg-destructive',
+    success: 'bg-success',
 };
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
@@ -44,12 +42,12 @@ export function ToastProvider({ children }) {
     return _jsx(ToastContext.Provider, { value: contextValue, children: children });
 }
 const toastVariants = tv({
-    base: 'w-full flex-row items-center justify-between border',
+    base: 'w-full flex-row items-center gap-3 border bg-popover',
     variants: {
         variant: {
-            default: 'border-border bg-background',
-            destructive: 'border-destructive bg-destructive',
-            success: 'border-success bg-success',
+            default: 'border-border',
+            destructive: 'border-destructive-soft-border',
+            success: 'border-success-soft-border',
         },
     },
     defaultVariants: {
@@ -60,31 +58,51 @@ function Toast({ toast: toastData, onDismiss, className, style, ...props }) {
     const { title, description, variant = 'default', duration = 4000, action } = toastData;
     const visual = useVisualTokens();
     const colors = useThemeColors();
+    const motion = useMotionPolicy();
+    const accent = ACCENT_BY_VARIANT[variant];
     useEffect(() => {
         if (duration > 0) {
             const timer = setTimeout(onDismiss, duration);
             return () => clearTimeout(timer);
         }
     }, [duration, onDismiss]);
-    const textColor = TEXT_COLOR_BY_VARIANT[variant];
-    const descColor = DESCRIPTION_COLOR_BY_VARIANT[variant];
-    return (_jsxs(Animated.View, { entering: SlideInUp.duration(300), exiting: SlideOutUp.duration(200), className: cn(toastVariants({ variant }), className), style: [
-            {
-                borderRadius: surfaceRadius(visual, 'lg'),
-                borderWidth: visual.borderWidthHairline,
-                padding: surfacePadding(visual, 'sm'),
-            },
-            shadowStyle(visual, colors, 'lg'),
-            style,
-        ], ...props, children: [_jsxs(View, { className: "flex-1 gap-1", children: [title && (_jsx(Text, { className: cn('font-semibold', textColor), style: typographyStyle(visual, 'label'), children: title })), description && (_jsx(Text, { className: cn(descColor), style: typographyStyle(visual, 'label'), children: description }))] }), _jsxs(View, { className: "flex-row items-center gap-2", children: [action && (_jsx(Pressable, { accessibilityRole: "button", onPress: () => {
-                            action.onPress();
-                            onDismiss();
-                        }, className: "border border-border", style: {
-                            borderRadius: visual.radiusMd,
-                            borderWidth: visual.borderWidthControl,
-                            paddingHorizontal: visual.controlPaddingXSm,
-                            paddingVertical: visual.controlPaddingYSm,
-                        }, children: _jsx(Text, { className: cn('font-medium', textColor), style: typographyStyle(visual, 'label'), children: action.label }) })), _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, className: "p-1", children: _jsx(Text, { className: cn(textColor), style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] })] }));
+    // Android and the web announce through the live region below; iOS has no live
+    // regions, so it is told once, when the toast appears.
+    useEffect(() => {
+        if (Platform.OS !== 'ios')
+            return;
+        const message = [title, description].filter(Boolean).join('. ');
+        if (message)
+            AccessibilityInfo.announceForAccessibility(message);
+        // Announce on appearance only; a re-render must not repeat it.
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- once per toast, by design
+    }, []);
+    return (_jsx(Animated.View, { entering: motion.animationsEnabled ? SlideInUp.duration(motion.durations.normal) : undefined, exiting: motion.animationsEnabled ? FadeOut.duration(motion.durations.fast) : undefined, children: _jsxs(View
+        // Announced where it appears, without moving focus. Set before the spread so a
+        // caller can still override.
+        , { 
+            // Announced where it appears, without moving focus. Set before the spread so a
+            // caller can still override.
+            accessibilityRole: "alert", accessibilityLiveRegion: "polite", className: cn(toastVariants({ variant }), className), style: [
+                {
+                    borderRadius: surfaceRadius(visual, 'lg'),
+                    borderWidth: visual.borderWidthHairline,
+                    padding: surfacePadding(visual, 'sm'),
+                },
+                shadowStyle(visual, colors, 'lg'),
+                style,
+            ], ...props, children: [_jsxs(View, { className: "flex-1 gap-0.5", children: [title ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [accent ? _jsx(View, { className: cn('h-2 w-2 rounded-full', accent) }) : null, _jsx(Text, { className: "font-semibold text-popover-foreground", style: typographyStyle(visual, 'label'), children: title })] })) : null, description ? (_jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'label'), children: description })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", onPress: () => {
+                        action.onPress();
+                        onDismiss();
+                    }, className: cn('border border-border active:bg-state-pressed', focusRing), style: {
+                        borderRadius: visual.radiusMd,
+                        borderWidth: visual.borderWidthControl,
+                        paddingHorizontal: visual.controlPaddingXSm,
+                        paddingVertical: visual.controlPaddingYSm,
+                    }, children: _jsx(Text, { className: "font-medium text-popover-foreground", style: typographyStyle(visual, 'label'), children: action.label }) })) : null, _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Dismiss", onPress: onDismiss, 
+                    // 44 px everywhere, since hitSlop does nothing on the web; the negative margin
+                    // keeps the toast as compact as the old 32 px button left it.
+                    hitSlop: 2, className: cn('-my-1.5 -mr-1.5 h-11 w-11 items-center justify-center rounded-full active:bg-state-pressed', focusRing), children: _jsx(Text, { className: "text-muted-foreground", style: typographyStyle(visual, 'emphasis'), children: "\u00D7" }) })] }) }));
 }
 function ToastContainerItem({ toast, dismiss, }) {
     const handleDismiss = useCallback(() => dismiss(toast.id), [dismiss, toast.id]);
@@ -94,6 +112,6 @@ export function ToastContainer({ position = 'top', className, style, ...props })
     const { toasts, dismiss } = useToast();
     const visual = useVisualTokens();
     const positionClass = position === 'top' ? 'top-0' : 'bottom-0';
-    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }));
+    return (_jsx(View, { className: cn('absolute left-0 right-0 z-50 py-2', positionClass, className), style: [{ paddingHorizontal: visual.surfacePaddingSm }, style], pointerEvents: "box-none", ...props, children: _jsx(View, { className: "w-full max-w-md self-center", pointerEvents: "box-none", children: toasts.map((toast) => (_jsx(ToastContainerItem, { toast: toast, dismiss: dismiss }, toast.id))) }) }));
 }
 export { Toast, toastVariants };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { registerFrostedBlurView, type FrostedSurfaceProps, type FrostedTintToke
 export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, type ControlSize, type SurfacePaddingSize, type SurfaceRecipeOptions, type ShadowTier, type TypographyRole, } from './lib/recipes';
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, type ThemePreset, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS, type ThemeBaseColors } from './lib/theme-derive';
+export { checkThemeContrast, themeFromSeeds, type ContrastCheck, type ThemeSeeds, } from './lib/theme-seeds';
 export { Text, textVariants, type TextProps } from './components/text';
 export { Surface, type SurfaceLevel, type SurfaceProps } from './components/surface';
 export { View, type ViewProps } from './components/view';

package/dist/index.js

@@ -15,6 +15,7 @@ export { registerFrostedBlurView, } from './lib/frosted-surface';
 export { controlRecipe, fieldRecipe, surfaceRecipe, surfacePadding, surfaceRadius, shadowStyle, typographyStyle, useControlRecipe, useFieldRecipe, useSurfaceRecipe, useShadowStyle, useTypography, } from './lib/recipes';
 export { WHILEUI_PRESET_SOFT, WHILEUI_PRESET_ATELIER, WHILEUI_THEME_PRESETS, themePresetToCssVariables, themePresetToCss, } from './lib/theme-presets';
 export { deriveThemeColors, THEME_BASE_TOKEN_KEYS } from './lib/theme-derive';
+export { checkThemeContrast, themeFromSeeds, } from './lib/theme-seeds';
 export { Text, textVariants } from './components/text';
 export { Surface } from './components/surface';
 export { View } from './components/view';

package/dist/lib/frosted-surface.d.ts

@@ -3,8 +3,11 @@ import { type ViewStyle } from 'react-native';
 export type FrostedTintToken = 'surfaceElevated' | 'surfaceTranslucent' | 'card' | 'popover';
 export type FrostedBlurPreset = 'subtle' | 'medium' | 'strong';
 export interface FrostedSurfaceProps {
+    /** Enable the optional frosted overlay. */
     frosted?: boolean;
+    /** Override blur amount directly. */
     blurIntensity?: number;
+    /** Tint token used for frosted mode. */
     blurTintToken?: FrostedTintToken;
 }
 interface UseFrostedSurfaceOptions extends FrostedSurfaceProps {

package/dist/lib/theme-contract.js

@@ -13,16 +13,16 @@ export const WHILEUI_LIGHT_THEME_COLORS = {
     mutedForeground: '#645783',
     border: 'rgba(68, 87, 255, 0.16)',
     input: 'rgba(255, 255, 255, 0.84)',
-    ring: 'rgba(61, 139, 255, 0.34)',
+    ring: '#3d8bff',
     accent: '#a7f432',
     accentForeground: '#163218',
-    destructive: '#f66151',
+    destructive: '#d03d31',
     destructiveForeground: '#fff8f6',
-    success: '#13a86d',
+    success: '#00864d',
     successForeground: '#f5fff9',
     warning: '#ffb224',
     warningForeground: '#3d2200',
-    info: '#3d8bff',
+    info: '#2070e1',
     infoForeground: '#f8fbff',
     overlay: 'rgba(39, 31, 72, 0.14)',
     overlayStrong: 'rgba(39, 31, 72, 0.22)',
@@ -37,19 +37,19 @@ export const WHILEUI_LIGHT_THEME_COLORS = {
     shadow: '#271f48',
     primaryActive: '#3346e6',
     secondaryActive: 'rgba(255, 123, 92, 0.18)',
-    destructiveActive: '#e0503f',
+    destructiveActive: '#bb261d',
     primarySoft: 'rgba(68, 87, 255, 0.13)',
     primarySoftSubtle: 'rgba(68, 87, 255, 0.07)',
     secondarySoft: 'rgba(255, 123, 92, 0.16)',
     mutedSoft: 'rgba(74, 55, 122, 0.05)',
-    destructiveSoft: 'rgba(246, 97, 81, 0.12)',
-    destructiveSoftBorder: 'rgba(246, 97, 81, 0.30)',
-    successSoft: 'rgba(19, 168, 109, 0.12)',
-    successSoftBorder: 'rgba(19, 168, 109, 0.30)',
+    destructiveSoft: 'rgba(208, 61, 49, 0.12)',
+    destructiveSoftBorder: 'rgba(208, 61, 49, 0.30)',
+    successSoft: 'rgba(0, 134, 77, 0.12)',
+    successSoftBorder: 'rgba(0, 134, 77, 0.30)',
     warningSoft: 'rgba(255, 178, 36, 0.14)',
     warningSoftBorder: 'rgba(255, 178, 36, 0.34)',
-    infoSoft: 'rgba(61, 139, 255, 0.12)',
-    infoSoftBorder: 'rgba(61, 139, 255, 0.30)',
+    infoSoft: 'rgba(32, 112, 225, 0.12)',
+    infoSoftBorder: 'rgba(32, 112, 225, 0.30)',
     placeholder: '#645783',
 };
 export const WHILEUI_DARK_THEME_COLORS = {
@@ -67,7 +67,7 @@ export const WHILEUI_DARK_THEME_COLORS = {
     mutedForeground: '#c5bad9',
     border: 'rgba(255, 255, 255, 0.12)',
     input: 'rgba(27, 18, 49, 0.86)',
-    ring: 'rgba(127, 240, 197, 0.36)',
+    ring: '#7ff0c5',
     accent: '#7ff0c5',
     accentForeground: '#0f2d24',
     destructive: '#ff6b57',

package/dist/lib/theme-presets.js

@@ -38,7 +38,7 @@ export const WHILEUI_PRESET_SOFT = {
 };
 // Compact geometry, hairline-plus borders, real drop shadows, warm ink.
 const ATELIER_LIGHT = {
-    primary: '#b4552d',
+    primary: '#af5028',
     primaryForeground: '#fdf6ee',
     foreground: '#2b2118',
     background: '#f6efe4',
@@ -49,10 +49,10 @@ const ATELIER_LIGHT = {
     secondary: 'rgba(43, 33, 24, 0.06)',
     secondaryForeground: '#4a3a2a',
     muted: 'rgba(43, 33, 24, 0.05)',
-    mutedForeground: '#7a6a58',
+    mutedForeground: '#716150',
     border: 'rgba(43, 33, 24, 0.22)',
     input: '#fffdf8',
-    ring: 'rgba(180, 85, 45, 0.45)',
+    ring: '#af5028',
     accent: '#1f6f54',
     accentForeground: '#f0faf5',
     destructive: '#b3261e',
@@ -70,15 +70,15 @@ const ATELIER_LIGHT = {
     surfaceTranslucentBorder: 'rgba(43, 33, 24, 0.16)',
     surfaceBorder: 'rgba(43, 33, 24, 0.22)',
     surfaceHighlight: 'rgba(255, 255, 255, 0.65)',
-    stateHover: 'rgba(180, 85, 45, 0.07)',
-    statePressed: 'rgba(180, 85, 45, 0.14)',
+    stateHover: 'rgba(175, 80, 40, 0.07)',
+    statePressed: 'rgba(175, 80, 40, 0.14)',
     stateDisabled: 'rgba(122, 106, 88, 0.30)',
     shadow: '#3a2c1c',
     primaryActive: '#96431f',
     secondaryActive: 'rgba(43, 33, 24, 0.12)',
     destructiveActive: '#8f1d17',
-    primarySoft: 'rgba(180, 85, 45, 0.12)',
-    primarySoftSubtle: 'rgba(180, 85, 45, 0.06)',
+    primarySoft: 'rgba(175, 80, 40, 0.12)',
+    primarySoftSubtle: 'rgba(175, 80, 40, 0.06)',
     secondarySoft: 'rgba(31, 111, 84, 0.10)',
     mutedSoft: 'rgba(43, 33, 24, 0.04)',
     destructiveSoft: 'rgba(179, 38, 30, 0.10)',
@@ -89,7 +89,7 @@ const ATELIER_LIGHT = {
     warningSoftBorder: 'rgba(192, 123, 18, 0.36)',
     infoSoft: 'rgba(47, 93, 158, 0.10)',
     infoSoftBorder: 'rgba(47, 93, 158, 0.32)',
-    placeholder: '#7a6a58',
+    placeholder: '#716150',
 };
 const ATELIER_DARK = {
     primary: '#e8935f',
@@ -106,7 +106,7 @@ const ATELIER_DARK = {
     mutedForeground: '#a3937d',
     border: 'rgba(239, 230, 216, 0.18)',
     input: '#211a14',
-    ring: 'rgba(232, 147, 95, 0.45)',
+    ring: '#e8935f',
     accent: '#6fd0a8',
     accentForeground: '#0b2419',
     destructive: '#e5695f',

package/dist/lib/theme-seeds.d.ts

@@ -0,0 +1,40 @@
+import type { ThemeColors } from './theme-contract';
+import { type ThemeBaseColors } from './theme-derive';
+import { type ThemePreset } from './theme-presets';
+import type { VisualTokens } from './visual-token-contract';
+export interface ThemeSeeds {
+    /** Page background. */
+    background: string;
+    /** Body text. */
+    foreground: string;
+    /** Brand colour: primary buttons, links, focus ring. */
+    primary: string;
+    /** Second voice for highlights and selected states. Derived from `primary` if left out. */
+    accent?: string;
+}
+/**
+ * A complete preset from seeds. `light` is required; `dark` defaults to a dark page with
+ * the same brand colours. `overrides` replaces any base colour before the rest is
+ * derived, so nothing is out of reach; derived tokens can be adjusted on the result.
+ */
+export declare function themeFromSeeds(input: {
+    name: string;
+    description: string;
+    light: ThemeSeeds;
+    dark?: ThemeSeeds;
+    overrides?: {
+        light?: Partial<ThemeBaseColors>;
+        dark?: Partial<ThemeBaseColors>;
+    };
+    visual?: Partial<VisualTokens>;
+}): ThemePreset;
+export interface ContrastCheck {
+    /** "foreground on background" */
+    pair: string;
+    ratio: number;
+    /** 4.5 for text, 3 for focus rings and other non-text UI (WCAG 1.4.3, 1.4.11). */
+    min: number;
+    pass: boolean;
+}
+/** Every text and focus-ring pairing the components render, checked against WCAG AA. */
+export declare function checkThemeContrast(colors: ThemeColors): ContrastCheck[];

package/dist/lib/theme-seeds.js

@@ -0,0 +1,143 @@
+// A full theme from a few seed colours, plus a contrast check for any palette.
+// Renderer-free: safe in build scripts and for agents generating themes.
+//
+// Seeds are never altered: a brand colour is a brand decision, so when it fails
+// contrast the check reports it instead. Only derived colours (muted text, the text on
+// each filled colour, status colours) are tuned to meet WCAG.
+import { blend, converter, formatHex, parse, wcagContrast } from 'culori';
+import { createThemePreset } from './theme-presets';
+const toOklch = converter('oklch');
+/** WCAG 2.x contrast ratio between two CSS colours, 1–21. */
+function contrastRatio(a, b) {
+    return wcagContrast(a, b);
+}
+function oklch(color) {
+    const parsed = parse(color);
+    if (!parsed)
+        throw new Error(`Not a CSS colour: "${color}"`);
+    return toOklch(parsed);
+}
+const hex = (l, c, h) => formatHex({ mode: 'oklch', l: Math.min(1, Math.max(0, l)), c, h });
+/** Mix `a` toward `b` by `t` in OKLCH lightness and chroma, keeping `a`'s hue. */
+function toward(a, b, t) {
+    const x = oklch(a);
+    const y = oklch(b);
+    return hex(x.l + (y.l - x.l) * t, (x.c ?? 0) + ((y.c ?? 0) - (x.c ?? 0)) * t, x.h ?? y.h ?? 0);
+}
+/** Move `color` away from `against` in lightness until it reaches `min` contrast. */
+function ensureContrast(color, against, min) {
+    const c = oklch(color);
+    const darker = oklch(against).l > 0.5;
+    for (let l = c.l; l >= 0 && l <= 1; l += darker ? -0.01 : 0.01) {
+        const candidate = hex(l, c.c ?? 0, c.h ?? 0);
+        if (contrastRatio(candidate, against) >= min)
+            return candidate;
+    }
+    return darker ? '#000000' : '#ffffff';
+}
+/** Black or white tinted toward the theme, whichever reads better on `fill`. */
+function onFill(fill, seeds) {
+    const light = oklch(seeds.background).l > oklch(seeds.foreground).l ? seeds.background : seeds.foreground;
+    const dark = light === seeds.background ? seeds.foreground : seeds.background;
+    return contrastRatio(light, fill) >= contrastRatio(dark, fill) ? light : dark;
+}
+// Status hues stay recognisable across brands; only their lightness adapts to the page.
+const STATUS_HUES = { destructive: 27, success: 150, warning: 75, info: 240 };
+/** The 25 base colours a theme needs, derived from its seeds. */
+function themeBaseFromSeeds(seeds) {
+    const { background, foreground, primary } = seeds;
+    const dark = oklch(background).l < 0.5;
+    const accent = seeds.accent ?? toward(primary, background, 0.82);
+    const surface = toward(background, foreground, dark ? 0.06 : 0.025);
+    const muted = toward(background, foreground, dark ? 0.1 : 0.06);
+    const status = (hue) => ensureContrast(hex(dark ? 0.72 : 0.55, 0.15, hue), background, 4.5);
+    const destructive = status(STATUS_HUES.destructive);
+    const success = status(STATUS_HUES.success);
+    const warning = status(STATUS_HUES.warning);
+    const info = status(STATUS_HUES.info);
+    const fills = { background, foreground };
+    return {
+        background,
+        foreground,
+        card: surface,
+        cardForeground: foreground,
+        popover: surface,
+        popoverForeground: foreground,
+        primary,
+        primaryForeground: onFill(primary, fills),
+        secondary: muted,
+        secondaryForeground: foreground,
+        accent,
+        accentForeground: onFill(accent, fills),
+        muted,
+        mutedForeground: ensureContrast(toward(foreground, background, 0.42), muted, 4.5),
+        border: toward(background, foreground, dark ? 0.16 : 0.13),
+        input: muted,
+        ring: primary,
+        destructive,
+        destructiveForeground: onFill(destructive, fills),
+        success,
+        successForeground: onFill(success, fills),
+        warning,
+        warningForeground: onFill(warning, fills),
+        info,
+        infoForeground: onFill(info, fills),
+    };
+}
+/**
+ * A complete preset from seeds. `light` is required; `dark` defaults to a dark page with
+ * the same brand colours. `overrides` replaces any base colour before the rest is
+ * derived, so nothing is out of reach; derived tokens can be adjusted on the result.
+ */
+export function themeFromSeeds(input) {
+    const { light } = input;
+    const page = oklch(light.background);
+    const darkPage = hex(0.17, Math.min(page.c ?? 0, 0.02), page.h ?? 0);
+    // Generated, not supplied, so brand colours may be lifted until they read on a dark page.
+    const dark = input.dark ?? {
+        background: darkPage,
+        foreground: hex(0.94, Math.min(page.c ?? 0, 0.015), page.h ?? 0),
+        primary: ensureContrast(light.primary, darkPage, 4.5),
+        accent: light.accent && ensureContrast(light.accent, darkPage, 3),
+    };
+    return createThemePreset({
+        name: input.name,
+        description: input.description,
+        light: { ...themeBaseFromSeeds(light), ...input.overrides?.light },
+        dark: { ...themeBaseFromSeeds(dark), ...input.overrides?.dark },
+        visual: input.visual,
+    });
+}
+const TEXT_PAIRS = [
+    ['foreground', 'background'],
+    ['cardForeground', 'card'],
+    ['popoverForeground', 'popover'],
+    ['mutedForeground', 'background'],
+    ['mutedForeground', 'muted'],
+    ['primaryForeground', 'primary'],
+    ['secondaryForeground', 'secondary'],
+    ['accentForeground', 'accent'],
+    ['destructiveForeground', 'destructive'],
+    ['successForeground', 'success'],
+    ['warningForeground', 'warning'],
+    ['infoForeground', 'info'],
+    ['primary', 'background'],
+    ['destructive', 'background'],
+];
+const UI_PAIRS = [['ring', 'background']];
+/** A translucent colour as it actually renders: blended onto the page. */
+function onPage(color, page) {
+    const parsed = parse(color);
+    if (!parsed || (parsed.alpha ?? 1) >= 1)
+        return color;
+    return formatHex(blend([page, parsed], 'normal'));
+}
+/** Every text and focus-ring pairing the components render, checked against WCAG AA. */
+export function checkThemeContrast(colors) {
+    const check = ([fg, bg], min) => {
+        const background = onPage(colors[bg], colors.background);
+        const ratio = Math.round(contrastRatio(onPage(colors[fg], background), background) * 100) / 100;
+        return { pair: `${fg} on ${bg}`, ratio, min, pass: ratio >= min };
+    };
+    return [...TEXT_PAIRS.map((p) => check(p, 4.5)), ...UI_PAIRS.map((p) => check(p, 3))];
+}