@thewhileloop/whileui 1.2.3 → 3.0.0

package/dist/lib/theme-presets.js

@@ -0,0 +1,221 @@
+import { THEME_TOKEN_SPECS, WHILEUI_DARK_THEME_COLORS, WHILEUI_LIGHT_THEME_COLORS, } from './theme-contract';
+import { VISUAL_TOKEN_SPECS } from './visual-token-contract';
+// Rounded, airy, frosted. Matches the contract fallbacks.
+export const WHILEUI_PRESET_SOFT = {
+    name: 'soft',
+    description: 'Rounded, airy, frosted surfaces with generous padding.',
+    light: WHILEUI_LIGHT_THEME_COLORS,
+    dark: WHILEUI_DARK_THEME_COLORS,
+    visual: {},
+};
+// Compact geometry, hairline-plus borders, real drop shadows, warm ink.
+const ATELIER_LIGHT = {
+    primary: '#b4552d',
+    primaryForeground: '#fdf6ee',
+    foreground: '#2b2118',
+    background: '#f6efe4',
+    card: '#fbf7ef',
+    cardForeground: '#2b2118',
+    popover: '#fffdf8',
+    popoverForeground: '#2b2118',
+    secondary: 'rgba(43, 33, 24, 0.06)',
+    secondaryForeground: '#4a3a2a',
+    muted: 'rgba(43, 33, 24, 0.05)',
+    mutedForeground: '#7a6a58',
+    border: 'rgba(43, 33, 24, 0.22)',
+    input: '#fffdf8',
+    ring: 'rgba(180, 85, 45, 0.45)',
+    accent: '#1f6f54',
+    accentForeground: '#f0faf5',
+    destructive: '#b3261e',
+    destructiveForeground: '#fdf3f2',
+    success: '#1f6f54',
+    successForeground: '#f0faf5',
+    warning: '#c07b12',
+    warningForeground: '#2b1c02',
+    info: '#2f5d9e',
+    infoForeground: '#f2f7fe',
+    overlay: 'rgba(31, 22, 12, 0.30)',
+    overlayStrong: 'rgba(31, 22, 12, 0.48)',
+    surfaceElevated: '#fffdf8',
+    surfaceTranslucent: 'rgba(251, 247, 239, 0.92)',
+    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)',
+    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)',
+    secondarySoft: 'rgba(31, 111, 84, 0.10)',
+    mutedSoft: 'rgba(43, 33, 24, 0.04)',
+    destructiveSoft: 'rgba(179, 38, 30, 0.10)',
+    destructiveSoftBorder: 'rgba(179, 38, 30, 0.32)',
+    successSoft: 'rgba(31, 111, 84, 0.10)',
+    successSoftBorder: 'rgba(31, 111, 84, 0.32)',
+    warningSoft: 'rgba(192, 123, 18, 0.12)',
+    warningSoftBorder: 'rgba(192, 123, 18, 0.36)',
+    infoSoft: 'rgba(47, 93, 158, 0.10)',
+    infoSoftBorder: 'rgba(47, 93, 158, 0.32)',
+    placeholder: '#7a6a58',
+};
+const ATELIER_DARK = {
+    primary: '#e8935f',
+    primaryForeground: '#241207',
+    foreground: '#efe6d8',
+    background: '#191410',
+    card: '#221c16',
+    cardForeground: '#efe6d8',
+    popover: '#282019',
+    popoverForeground: '#efe6d8',
+    secondary: 'rgba(239, 230, 216, 0.07)',
+    secondaryForeground: '#d8c9b4',
+    muted: 'rgba(239, 230, 216, 0.06)',
+    mutedForeground: '#a3937d',
+    border: 'rgba(239, 230, 216, 0.18)',
+    input: '#211a14',
+    ring: 'rgba(232, 147, 95, 0.45)',
+    accent: '#6fd0a8',
+    accentForeground: '#0b2419',
+    destructive: '#e5695f',
+    destructiveForeground: '#2b0b08',
+    success: '#6fd0a8',
+    successForeground: '#0b2419',
+    warning: '#e5b155',
+    warningForeground: '#2a1c02',
+    info: '#82aae0',
+    infoForeground: '#0a1930',
+    overlay: 'rgba(0, 0, 0, 0.55)',
+    overlayStrong: 'rgba(0, 0, 0, 0.72)',
+    surfaceElevated: '#2a221b',
+    surfaceTranslucent: 'rgba(34, 28, 22, 0.92)',
+    surfaceTranslucentBorder: 'rgba(239, 230, 216, 0.14)',
+    surfaceBorder: 'rgba(239, 230, 216, 0.18)',
+    surfaceHighlight: 'rgba(255, 255, 255, 0.05)',
+    stateHover: 'rgba(232, 147, 95, 0.09)',
+    statePressed: 'rgba(232, 147, 95, 0.18)',
+    stateDisabled: 'rgba(163, 147, 125, 0.28)',
+    shadow: '#000000',
+    primaryActive: '#f0a878',
+    secondaryActive: 'rgba(239, 230, 216, 0.12)',
+    destructiveActive: '#ef8078',
+    primarySoft: 'rgba(232, 147, 95, 0.16)',
+    primarySoftSubtle: 'rgba(232, 147, 95, 0.09)',
+    secondarySoft: 'rgba(111, 208, 168, 0.10)',
+    mutedSoft: 'rgba(239, 230, 216, 0.04)',
+    destructiveSoft: 'rgba(229, 105, 95, 0.16)',
+    destructiveSoftBorder: 'rgba(229, 105, 95, 0.38)',
+    successSoft: 'rgba(111, 208, 168, 0.14)',
+    successSoftBorder: 'rgba(111, 208, 168, 0.36)',
+    warningSoft: 'rgba(229, 177, 85, 0.14)',
+    warningSoftBorder: 'rgba(229, 177, 85, 0.38)',
+    infoSoft: 'rgba(130, 170, 224, 0.14)',
+    infoSoftBorder: 'rgba(130, 170, 224, 0.36)',
+    placeholder: '#a3937d',
+};
+export const WHILEUI_PRESET_ATELIER = {
+    name: 'atelier',
+    description: 'Editorial and tactile: sharp corners, dense controls, hairline borders, real shadows.',
+    light: ATELIER_LIGHT,
+    dark: ATELIER_DARK,
+    visual: {
+        radiusSm: 4,
+        radiusMd: 6,
+        radiusLg: 10,
+        radiusXl: 14,
+        controlHeightSm: 32,
+        controlHeightDefault: 40,
+        controlHeightLg: 48,
+        controlPaddingXSm: 10,
+        controlPaddingXDefault: 14,
+        controlPaddingXLg: 20,
+        controlPaddingYSm: 6,
+        controlPaddingYDefault: 8,
+        controlPaddingYLg: 12,
+        surfacePaddingSm: 12,
+        surfacePaddingDefault: 18,
+        surfacePaddingLg: 26,
+        badgeRadius: 4,
+        badgePaddingX: 8,
+        badgePaddingY: 3,
+        fontSizeXs: 11,
+        fontSizeSm: 12,
+        fontSizeBase: 14,
+        fontSizeLg: 16,
+        fontSizeXl: 19,
+        fontSize2xl: 23,
+        borderWidthHairline: 1,
+        borderWidthControl: 1.25,
+        borderWidthEmphasis: 2,
+        shadowOpacitySm: 0.1,
+        shadowOpacityMd: 0.16,
+        shadowOpacityLg: 0.24,
+        shadowRadiusSm: 2,
+        shadowRadiusMd: 8,
+        shadowRadiusLg: 22,
+        shadowOffsetYSm: 1,
+        shadowOffsetYMd: 3,
+        shadowOffsetYLg: 10,
+        blurIntensitySubtle: 0,
+        blurIntensityMedium: 0,
+        blurIntensityStrong: 0,
+        frostedHighlightHeight: 0,
+    },
+};
+export const WHILEUI_THEME_PRESETS = [
+    WHILEUI_PRESET_SOFT,
+    WHILEUI_PRESET_ATELIER,
+];
+function formatCssNumber(value) {
+    if (typeof value === 'boolean')
+        return value ? '1' : '0';
+    return String(value);
+}
+/**
+ * Flatten a preset into CSS variable maps an app can drop into its theme CSS
+ * (e.g. a Uniwind/Tailwind `@theme` block plus light/dark variants).
+ */
+export function themePresetToCssVariables(preset) {
+    const light = {};
+    const dark = {};
+    for (const spec of THEME_TOKEN_SPECS) {
+        light[spec.cssVar] = preset.light[spec.key];
+        light[spec.appVar] = preset.light[spec.key];
+        dark[spec.cssVar] = preset.dark[spec.key];
+        dark[spec.appVar] = preset.dark[spec.key];
+    }
+    const visual = {};
+    for (const spec of VISUAL_TOKEN_SPECS) {
+        const override = preset.visual[spec.key];
+        visual[spec.cssVar] = formatCssNumber(override ?? spec.fallback);
+    }
+    return { light, dark, visual };
+}
+/** Render a preset as ready-to-paste CSS blocks. */
+export function themePresetToCss(preset) {
+    const { light, dark, visual } = themePresetToCssVariables(preset);
+    const renderVars = (vars, indent) => Object.entries(vars)
+        .map(([name, value]) => `${indent}${name}: ${value};`)
+        .join('\n');
+    return [
+        `/* WhileUI preset: ${preset.name} — ${preset.description} */`,
+        `@theme {`,
+        renderVars(visual, '  '),
+        `}`,
+        ``,
+        `@layer theme {`,
+        `  :root {`,
+        `    @variant light {`,
+        renderVars(light, '      '),
+        `    }`,
+        `    @variant dark {`,
+        renderVars(dark, '      '),
+        `    }`,
+        `  }`,
+        `}`,
+    ].join('\n');
+}

package/dist/lib/tv.d.ts

@@ -13,4 +13,3 @@
  * });
  */
 export { tv, type VariantProps } from 'tailwind-variants';
-//# sourceMappingURL=tv.d.ts.map

package/dist/lib/tv.js

@@ -13,4 +13,3 @@
  * });
  */
 export { tv } from 'tailwind-variants';
-//# sourceMappingURL=tv.js.map

package/dist/lib/visual-token-contract.d.ts

@@ -0,0 +1,110 @@
+export interface VisualTokens {
+    radiusSm: number;
+    radiusMd: number;
+    radiusLg: number;
+    radiusXl: number;
+    controlHeightSm: number;
+    controlHeightDefault: number;
+    controlHeightLg: number;
+    controlPaddingXSm: number;
+    controlPaddingXDefault: number;
+    controlPaddingXLg: number;
+    controlPaddingYSm: number;
+    controlPaddingYDefault: number;
+    controlPaddingYLg: number;
+    surfacePaddingSm: number;
+    surfacePaddingDefault: number;
+    surfacePaddingLg: number;
+    badgeRadius: number;
+    badgePaddingX: number;
+    badgePaddingY: number;
+    fontSizeXs: number;
+    fontSizeSm: number;
+    fontSizeBase: number;
+    fontSizeLg: number;
+    fontSizeXl: number;
+    fontSize2xl: number;
+    letterSpacingCaption: number;
+    letterSpacingLabel: number;
+    letterSpacingBody: number;
+    letterSpacingTitle: number;
+    letterSpacingHeadline: number;
+    borderWidthHairline: number;
+    borderWidthControl: number;
+    borderWidthEmphasis: number;
+    focusRingWidth: number;
+    shadowOpacitySm: number;
+    shadowOpacityMd: number;
+    shadowOpacityLg: number;
+    shadowRadiusSm: number;
+    shadowRadiusMd: number;
+    shadowRadiusLg: number;
+    shadowOffsetYSm: number;
+    shadowOffsetYMd: number;
+    shadowOffsetYLg: number;
+    shadowElevationSm: number;
+    shadowElevationMd: number;
+    shadowElevationLg: number;
+    touchTargetMinSize: number;
+    drawerWidthRatio: number;
+    drawerMaxWidthWeb: number;
+    drawerFrostedInset: number;
+    drawerFrostedRadius: number;
+    drawerContentTopPadding: number;
+    drawerItemFontSize: number;
+    drawerBadgeMinWidth: number;
+    navSectionTitleFontSize: number;
+    navItemBadgeFontSize: number;
+    bottomNavBadgeFontSize: number;
+    dataRowCompactDescriptionSize: number;
+    dataRowRightMaxWidthRatio: number;
+    segmentedWrapBasisRatio: number;
+    textareaMinHeightDefault: number;
+    textareaMinHeightSm: number;
+    textareaMinHeightLg: number;
+    chatBubbleMaxWidthRatio: number;
+    chatSystemBubbleMaxWidthRatio: number;
+    smartInputMaxHeight: number;
+    formModalContentMinHeightRatio: number;
+    sheetTabletBreakpoint: number;
+    sheetMaxWidth: number;
+    sheetHalfMaxHeightRatio: number;
+    sheetHalfMinHeight: number;
+    swipeActionWidth: number;
+    skeletonShimmerBandWidth: number;
+    blurIntensitySubtle: number;
+    blurIntensityMedium: number;
+    blurIntensityStrong: number;
+    blurSaturationPct: number;
+    frostedHighlightHeight: number;
+    frostedBackdropBlurIntensity: number;
+    frostedBackdropBlurScale: number;
+    androidFrostedTintAlphaScale: number;
+    androidExperimentalBlurEnabled: boolean;
+}
+export type VisualTokenKey = keyof VisualTokens;
+export type VisualTokenGroup = 'foundation' | 'typography' | 'depth' | 'motion' | 'surface' | 'component';
+export type VisualTokenKind = 'pixel' | 'ratio' | 'scalar' | 'number' | 'boolean';
+export interface VisualTokenSpec {
+    key: VisualTokenKey;
+    cssVar: string;
+    fallback: number;
+    kind: VisualTokenKind;
+    group: VisualTokenGroup;
+    min?: number;
+    max?: number;
+}
+/**
+ * App-owned visual tuning contract for WhileUI.
+ * These are intentionally exhaustive because the package is primarily for internal app use.
+ */
+export declare const VISUAL_TOKEN_SPECS: readonly VisualTokenSpec[];
+export declare const VISUAL_TOKEN_VARIABLES: string[];
+export declare const VISUAL_TOKEN_GROUPS: {
+    readonly foundation: VisualTokenSpec[];
+    readonly typography: VisualTokenSpec[];
+    readonly depth: VisualTokenSpec[];
+    readonly motion: VisualTokenSpec[];
+    readonly surface: VisualTokenSpec[];
+    readonly component: VisualTokenSpec[];
+};