@fragments-sdk/ui 0.14.0 → 0.16.0

package/dist/utils/theme-presets.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Seed-Based Theme Presets
+ *
+ * Defines theme presets as seed configurations that get expanded via
+ * seedsToTheme(). This guarantees all derived colors (text, surfaces,
+ * semantic text) pass WCAG AAA by construction — no hardcoded values.
+ */
+import { type SeedConfig } from './seed-derivation';
+interface ThemeColors {
+    accent?: string;
+    accentHover?: string;
+    accentActive?: string;
+    danger?: string;
+    dangerHover?: string;
+    success?: string;
+    warning?: string;
+    info?: string;
+    dangerText?: string;
+    successText?: string;
+    warningText?: string;
+    infoText?: string;
+    dangerBg?: string;
+    successBg?: string;
+    warningBg?: string;
+    infoBg?: string;
+}
+interface ThemeSurfaces {
+    bgPrimary?: string;
+    bgSecondary?: string;
+    bgTertiary?: string;
+    bgElevated?: string;
+    bgHover?: string;
+    bgActive?: string;
+}
+interface ThemeTextColors {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    inverse?: string;
+}
+interface ThemeBorders {
+    default?: string;
+    strong?: string;
+}
+interface ThemeRadius {
+    sm?: string;
+    md?: string;
+    lg?: string;
+    full?: string;
+}
+interface ThemeShadows {
+    sm?: string;
+    md?: string;
+}
+interface ThemeDarkMode {
+    surfaces?: ThemeSurfaces;
+    text?: ThemeTextColors;
+    borders?: ThemeBorders;
+    shadows?: ThemeShadows;
+    accent?: string;
+    accentHover?: string;
+    accentActive?: string;
+    dangerText?: string;
+    successText?: string;
+    warningText?: string;
+    infoText?: string;
+    dangerBg?: string;
+    successBg?: string;
+    warningBg?: string;
+    infoBg?: string;
+    backdrop?: string;
+}
+/** Fully derived theme configuration produced by seedsToTheme() */
+export interface ThemeConfig {
+    name: string;
+    colors?: ThemeColors;
+    surfaces?: ThemeSurfaces;
+    text?: ThemeTextColors;
+    borders?: ThemeBorders;
+    radius?: ThemeRadius;
+    shadows?: ThemeShadows;
+    dark?: ThemeDarkMode;
+    density?: string;
+}
+/**
+ * Convert seed configuration to a full theme configuration.
+ * All derived colors pass WCAG AAA by construction via ensureContrast()
+ * and deriveSemanticText().
+ */
+export declare function seedsToTheme(seeds: SeedConfig): ThemeConfig;
+export interface PresetDefinition {
+    name: string;
+    seeds: SeedConfig;
+    /** Overrides applied after seed derivation (e.g. custom surfaces) */
+    overrides?: Partial<ThemeConfig>;
+}
+declare const PRESET_DEFINITIONS: Record<string, PresetDefinition>;
+/** Generate a fully derived ThemeConfig from a preset definition */
+export declare function generatePreset(def: PresetDefinition): ThemeConfig;
+/** All presets, pre-generated with AAA-compliant derived colors */
+export declare const PRESETS: Record<string, ThemeConfig>;
+export { PRESET_DEFINITIONS };
+//# sourceMappingURL=theme-presets.d.ts.map

package/dist/utils/theme-presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-presets.d.ts","sourceRoot":"","sources":["../../src/utils/theme-presets.ts"],"names":[],"mappings":"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"}

package/dist/utils/theme-presets.js

@@ -0,0 +1,229 @@
+import { PALETTES, RADIUS_STYLES, getSemanticColors, deriveSurfaces, deriveText, deriveDarkAccent, deriveSemanticText, deriveSemanticBg, deriveShadows, deriveBorders, deriveAccentActive, deriveAccentHover, deriveSemanticHover } from "./seed-derivation.js";
+function seedsToTheme(seeds) {
+  const palette = PALETTES[seeds.neutral];
+  const radius = RADIUS_STYLES[seeds.radiusStyle];
+  const semanticColors = getSemanticColors(seeds.neutral, {
+    success: seeds.success,
+    warning: seeds.warning,
+    danger: seeds.danger,
+    info: seeds.info
+  });
+  const { danger, success, warning, info } = semanticColors;
+  const lightSurfaces = deriveSurfaces(palette, false, seeds.neutral);
+  const lightText = deriveText(palette, false, seeds.neutral);
+  const lightBorders = deriveBorders(palette, false);
+  const lightShadows = deriveShadows(false);
+  const darkSurfaces = deriveSurfaces(palette, true, seeds.neutral);
+  const darkText = deriveText(palette, true, seeds.neutral);
+  const darkBorders = deriveBorders(palette, true);
+  const darkShadows = deriveShadows(true);
+  const darkAccent = deriveDarkAccent(seeds.brand);
+  const dangerText = deriveSemanticText(danger, false);
+  const successText = deriveSemanticText(success, false);
+  const warningText = deriveSemanticText(warning, false);
+  const infoText = deriveSemanticText(info, false);
+  const dangerTextDark = deriveSemanticText(danger, true);
+  const successTextDark = deriveSemanticText(success, true);
+  const warningTextDark = deriveSemanticText(warning, true);
+  const infoTextDark = deriveSemanticText(info, true);
+  return {
+    name: "Custom",
+    density: seeds.density,
+    colors: {
+      accent: seeds.brand,
+      accentHover: deriveAccentHover(seeds.brand, false),
+      accentActive: deriveAccentActive(seeds.brand, false),
+      danger,
+      dangerHover: deriveSemanticHover(danger),
+      success,
+      warning,
+      info,
+      dangerText,
+      successText,
+      warningText,
+      infoText,
+      dangerBg: deriveSemanticBg(danger, false),
+      successBg: deriveSemanticBg(success, false),
+      warningBg: deriveSemanticBg(warning, false),
+      infoBg: deriveSemanticBg(info, false)
+    },
+    surfaces: {
+      bgPrimary: lightSurfaces.primary,
+      bgSecondary: lightSurfaces.secondary,
+      bgTertiary: lightSurfaces.tertiary,
+      bgElevated: lightSurfaces.elevated,
+      bgHover: lightSurfaces.hover,
+      bgActive: lightSurfaces.active
+    },
+    text: {
+      primary: lightText.primary,
+      secondary: lightText.secondary,
+      tertiary: lightText.tertiary,
+      inverse: lightText.inverse
+    },
+    borders: {
+      default: lightBorders.default,
+      strong: lightBorders.strong
+    },
+    radius: {
+      sm: radius.sm,
+      md: radius.md,
+      lg: radius.lg,
+      full: "9999px"
+    },
+    shadows: {
+      sm: lightShadows.sm,
+      md: lightShadows.md
+    },
+    dark: {
+      accent: darkAccent,
+      accentHover: deriveAccentHover(darkAccent, true),
+      accentActive: deriveAccentActive(darkAccent, true),
+      dangerText: dangerTextDark,
+      successText: successTextDark,
+      warningText: warningTextDark,
+      infoText: infoTextDark,
+      surfaces: {
+        bgPrimary: darkSurfaces.primary,
+        bgSecondary: darkSurfaces.secondary,
+        bgTertiary: darkSurfaces.tertiary,
+        bgElevated: darkSurfaces.elevated,
+        bgHover: darkSurfaces.hover,
+        bgActive: darkSurfaces.active
+      },
+      text: {
+        primary: darkText.primary,
+        secondary: darkText.secondary,
+        tertiary: darkText.tertiary,
+        inverse: darkText.inverse
+      },
+      borders: {
+        default: darkBorders.default,
+        strong: darkBorders.strong
+      },
+      shadows: {
+        sm: darkShadows.sm,
+        md: darkShadows.md
+      },
+      dangerBg: deriveSemanticBg(danger, true),
+      successBg: deriveSemanticBg(success, true),
+      warningBg: deriveSemanticBg(warning, true),
+      infoBg: deriveSemanticBg(info, true),
+      backdrop: "rgba(0, 0, 0, 0.8)"
+    }
+  };
+}
+const PRESET_DEFINITIONS = {
+  default: {
+    name: "Default",
+    seeds: { brand: "#18181b", neutral: "stone", density: "default", radiusStyle: "default" }
+  },
+  neutral: {
+    name: "Neutral",
+    seeds: { brand: "#71717a", neutral: "stone", density: "default", radiusStyle: "default" }
+  },
+  slate: {
+    name: "Slate",
+    seeds: { brand: "#64748b", neutral: "stone", density: "default", radiusStyle: "default" },
+    overrides: {
+      surfaces: { bgSecondary: "#f1f5f9", bgTertiary: "#e2e8f0" },
+      dark: { surfaces: { bgSecondary: "#1e293b", bgTertiary: "#334155" } }
+    }
+  },
+  emerald: {
+    name: "Emerald",
+    seeds: { brand: "#10b981", neutral: "stone", density: "default", radiusStyle: "default" }
+  },
+  rose: {
+    name: "Rose",
+    seeds: { brand: "#f43f5e", neutral: "stone", density: "default", radiusStyle: "default" }
+  },
+  classic: {
+    name: "Classic",
+    seeds: {
+      brand: "#1e40af",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#b91c1c",
+      success: "#15803d",
+      warning: "#a16207",
+      info: "#0369a1"
+    }
+  },
+  bold: {
+    name: "Bold",
+    seeds: {
+      brand: "#7c3aed",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#dc2626",
+      success: "#16a34a",
+      warning: "#ea580c",
+      info: "#2563eb"
+    }
+  },
+  neon: {
+    name: "Neon",
+    seeds: {
+      brand: "#06b6d4",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#f43f5e",
+      success: "#4ade80",
+      warning: "#fbbf24",
+      info: "#a78bfa"
+    }
+  },
+  minimal: {
+    name: "Minimal",
+    seeds: {
+      brand: "#525252",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#78716c",
+      success: "#65a30d",
+      warning: "#ca8a04",
+      info: "#64748b"
+    }
+  }
+};
+function isPlainObject(val) {
+  return typeof val === "object" && val !== null && !Array.isArray(val);
+}
+function deepMergeObjects(base, overrides) {
+  const result = { ...base };
+  for (const key of Object.keys(overrides)) {
+    const baseVal = base[key];
+    const overrideVal = overrides[key];
+    if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {
+      result[key] = deepMergeObjects(baseVal, overrideVal);
+    } else if (overrideVal !== void 0) {
+      result[key] = overrideVal;
+    }
+  }
+  return result;
+}
+function generatePreset(def) {
+  const base = seedsToTheme(def.seeds);
+  base.name = def.name;
+  if (def.overrides) {
+    return deepMergeObjects(
+      base,
+      def.overrides
+    );
+  }
+  return base;
+}
+const PRESETS = Object.fromEntries(
+  Object.entries(PRESET_DEFINITIONS).map(([key, def]) => [key, generatePreset(def)])
+);
+export {
+  PRESETS,
+  PRESET_DEFINITIONS,
+  generatePreset,
+  seedsToTheme
+};