@fragments-sdk/ui 0.13.0 → 0.15.1

package/dist/utils/seed-derivation.js

@@ -0,0 +1,449 @@
+const PALETTES = {
+  // Stone - Muted cool neutrals (default, balanced)
+  stone: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  // Ice - Cool blue tones (professional, tech)
+  // Dark shades are muted for comfortable dark mode backgrounds
+  ice: {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#0f2d3d",
+    // Darkened and desaturated for dark mode
+    900: "#0a1f2c",
+    // Darkened and desaturated for dark mode
+    950: "#06141c"
+    // Very dark blue-gray for dark mode bg
+  },
+  // Sand - Warm brown/terracotta tones (organic, earthy)
+  // Dark shades are muted for comfortable dark mode backgrounds
+  sand: {
+    50: "#fdf8f3",
+    100: "#f5ebe0",
+    200: "#e8d5c4",
+    300: "#d4b89c",
+    400: "#c19a6b",
+    500: "#a67c52",
+    600: "#8b5e34",
+    700: "#6f4518",
+    800: "#231a12",
+    // Darkened and desaturated for dark mode
+    900: "#181210",
+    // Darkened and desaturated for dark mode
+    950: "#0f0c09"
+    // Very dark warm gray for dark mode bg
+  },
+  // Earth - Green/olive tones (natural, growth)
+  // Dark shades are muted for comfortable dark mode backgrounds
+  earth: {
+    50: "#f5f7f2",
+    100: "#e8ede3",
+    200: "#d1dbc6",
+    300: "#b3c4a0",
+    400: "#8fa872",
+    500: "#6b8c4e",
+    600: "#517035",
+    700: "#3d5527",
+    800: "#1a2316",
+    // Darkened and desaturated for dark mode
+    900: "#121810",
+    // Darkened and desaturated for dark mode
+    950: "#0a0f08"
+    // Very dark green-gray for dark mode bg
+  },
+  // Fire - Warm red/orange tones (energy, passion)
+  // Dark shades are muted for comfortable dark mode backgrounds
+  fire: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#2d1810",
+    // Darkened and desaturated for dark mode
+    900: "#1c100a",
+    // Darkened and desaturated for dark mode
+    950: "#120a06"
+    // Very dark warm gray for dark mode bg
+  }
+};
+const PALETTE_SEMANTIC_COLORS = {
+  // Stone - Standard semantic colors (vibrant, universal)
+  stone: {
+    success: "#22c55e",
+    // Green 500
+    warning: "#f59e0b",
+    // Amber 500
+    danger: "#ef4444",
+    // Red 500
+    info: "#3b82f6"
+    // Blue 500
+  },
+  // Ice - Cool blue-shifted semantic colors
+  ice: {
+    success: "#10b981",
+    // Emerald 500 (cooler green)
+    warning: "#f59e0b",
+    // Amber 500
+    danger: "#f43f5e",
+    // Rose 500 (cooler red)
+    info: "#0ea5e9"
+    // Sky 500 (matches palette)
+  },
+  // Earth - Natural, muted semantic colors
+  earth: {
+    success: "#22c55e",
+    // Green 500 (natural)
+    warning: "#d97706",
+    // Amber 600 (earthier)
+    danger: "#dc2626",
+    // Red 600 (deeper)
+    info: "#0284c7"
+    // Sky 600 (muted)
+  },
+  // Sand - Warm, terracotta-shifted semantic colors
+  sand: {
+    success: "#16a34a",
+    // Green 600 (warmer)
+    warning: "#ea580c",
+    // Orange 600 (warm)
+    danger: "#dc2626",
+    // Red 600
+    info: "#2563eb"
+    // Blue 600
+  },
+  // Fire - Warm, vibrant semantic colors
+  fire: {
+    success: "#16a34a",
+    // Green 600
+    warning: "#f59e0b",
+    // Amber 500
+    danger: "#dc2626",
+    // Red 600 (complements orange)
+    info: "#2563eb"
+    // Blue 600
+  }
+};
+function getSemanticColors(palette, overrides) {
+  const defaults = PALETTE_SEMANTIC_COLORS[palette];
+  return {
+    success: (overrides == null ? void 0 : overrides.success) || defaults.success,
+    warning: (overrides == null ? void 0 : overrides.warning) || defaults.warning,
+    danger: (overrides == null ? void 0 : overrides.danger) || defaults.danger,
+    info: (overrides == null ? void 0 : overrides.info) || defaults.info
+  };
+}
+const RADIUS_STYLES = {
+  sharp: {
+    sm: "0",
+    md: "0",
+    lg: "0",
+    xl: "0"
+  },
+  subtle: {
+    sm: "0.125rem",
+    md: "0.25rem",
+    lg: "0.375rem",
+    xl: "0.5rem"
+  },
+  default: {
+    sm: "0.25rem",
+    md: "0.429rem",
+    lg: "0.571rem",
+    xl: "0.857rem"
+  },
+  rounded: {
+    sm: "0.375rem",
+    md: "0.5rem",
+    lg: "0.75rem",
+    xl: "1rem"
+  },
+  pill: {
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem"
+  }
+};
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  };
+}
+function rgbToHex(r, g, b) {
+  const toHex = (n) => {
+    const clamped = Math.max(0, Math.min(255, Math.round(n)));
+    return clamped.toString(16).padStart(2, "0");
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function lighten(hex, percent) {
+  const { r, g, b } = hexToRgb(hex);
+  const factor = percent / 100;
+  return rgbToHex(
+    r + (255 - r) * factor,
+    g + (255 - g) * factor,
+    b + (255 - b) * factor
+  );
+}
+function darken(hex, percent) {
+  const { r, g, b } = hexToRgb(hex);
+  const factor = 1 - percent / 100;
+  return rgbToHex(r * factor, g * factor, b * factor);
+}
+function mixColors(color1, color2, weight) {
+  const c1 = hexToRgb(color1);
+  const c2 = hexToRgb(color2);
+  const w = weight / 100;
+  return rgbToHex(
+    c1.r * w + c2.r * (1 - w),
+    c1.g * w + c2.g * (1 - w),
+    c1.b * w + c2.b * (1 - w)
+  );
+}
+function getHslLightness(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  const rNorm = r / 255;
+  const gNorm = g / 255;
+  const bNorm = b / 255;
+  const max = Math.max(rNorm, gNorm, bNorm);
+  const min = Math.min(rNorm, gNorm, bNorm);
+  return (max + min) / 2 * 100;
+}
+function deriveAccentHover(base, isDark) {
+  const l = getHslLightness(base);
+  if (isDark) {
+    if (l > 85) {
+      return darken(base, 10);
+    }
+    return lighten(base, 8);
+  } else {
+    if (l < 15) {
+      return lighten(base, 18);
+    }
+    return darken(base, 10);
+  }
+}
+function deriveAccentActive(base, isDark) {
+  const l = getHslLightness(base);
+  if (isDark) {
+    if (l > 85) {
+      return darken(base, 16);
+    }
+    return lighten(base, 14);
+  } else {
+    if (l < 15) {
+      return lighten(base, 28);
+    }
+    return darken(base, 18);
+  }
+}
+function deriveDarkAccent(brand) {
+  const { r, g, b } = hexToRgb(brand);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const saturation = max === 0 ? 0 : (max - min) / max;
+  if (saturation < 0.15) {
+    return "#f2f2f2";
+  }
+  const brightness = max / 255;
+  if (brightness > 0.9 && saturation > 0.7) {
+    return lighten(brand, 10);
+  }
+  if (brightness > 0.6) {
+    return lighten(brand, 20);
+  }
+  const luminance = 0.2126 * (r / 255) + 0.7152 * (g / 255) + 0.0722 * (b / 255);
+  const lightenAmount = luminance < 0.2 ? 45 : 30;
+  return lighten(brand, lightenAmount);
+}
+function interpolateShade(palette, level) {
+  const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  if (level in palette) {
+    return palette[level];
+  }
+  let lower = levels[0];
+  let upper = levels[levels.length - 1];
+  for (const l of levels) {
+    if (l < level) lower = l;
+    if (l > level && upper === levels[levels.length - 1]) upper = l;
+  }
+  const lowerColor = palette[lower];
+  const upperColor = palette[upper];
+  const ratio = (level - lower) / (upper - lower) * 100;
+  return mixColors(upperColor, lowerColor, ratio);
+}
+function deriveSurfaces(palette, isDark, paletteName = "stone") {
+  const isColorful = paletteName !== "stone";
+  if (isDark) {
+    return {
+      primary: palette[950],
+      secondary: palette[900],
+      tertiary: palette[800],
+      elevated: interpolateShade(palette, 875),
+      subtle: interpolateShade(palette, 925),
+      hover: "rgba(255, 255, 255, 0.05)",
+      active: "rgba(255, 255, 255, 0.08)"
+    };
+  }
+  if (isColorful) {
+    return {
+      primary: palette[50],
+      secondary: palette[100],
+      tertiary: palette[200],
+      elevated: "#ffffff",
+      subtle: palette[50],
+      hover: "rgba(0, 0, 0, 0.04)",
+      active: "rgba(0, 0, 0, 0.06)"
+    };
+  }
+  return {
+    primary: "#ffffff",
+    secondary: palette[100],
+    tertiary: palette[100],
+    elevated: "#ffffff",
+    subtle: palette[50],
+    hover: "rgba(0, 0, 0, 0.04)",
+    active: "rgba(0, 0, 0, 0.06)"
+  };
+}
+function deriveText(palette, isDark, paletteName = "stone") {
+  if (isDark) {
+    return {
+      primary: palette[100],
+      secondary: palette[400],
+      // 90/10 mix of palette[400]/palette[500] for WCAG AAA 7:1
+      // against palette[950] backgrounds (pure palette[500] gives ~4.1:1)
+      tertiary: mixColors(palette[400], palette[500], 90),
+      inverse: palette[900]
+    };
+  }
+  const bgPrimary = paletteName === "stone" ? "#ffffff" : palette[50];
+  const aaaTarget = 7;
+  return {
+    primary: palette[900],
+    secondary: ensureContrast(palette[600], bgPrimary, aaaTarget),
+    tertiary: ensureContrast(mixColors(palette[500], palette[600], 20), bgPrimary, aaaTarget),
+    inverse: palette[100]
+  };
+}
+function deriveBorders(palette, isDark) {
+  if (isDark) {
+    return {
+      default: "rgba(255, 255, 255, 0.08)",
+      strong: "rgba(255, 255, 255, 0.14)"
+    };
+  }
+  return {
+    default: "rgba(0, 0, 0, 0.08)",
+    strong: "rgba(0, 0, 0, 0.14)"
+  };
+}
+function deriveShadows(isDark) {
+  if (isDark) {
+    return {
+      sm: "0 1px 2px 0 rgba(0, 0, 0, 0.2)",
+      md: "0 2px 4px -1px rgba(0, 0, 0, 0.25), 0 1px 3px -2px rgba(0, 0, 0, 0.2)",
+      lg: "0 8px 12px -3px rgba(0, 0, 0, 0.35), 0 3px 5px -4px rgba(0, 0, 0, 0.25)"
+    };
+  }
+  return {
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.03)",
+    md: "0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 3px -2px rgba(0, 0, 0, 0.04)",
+    lg: "0 8px 12px -3px rgba(0, 0, 0, 0.08), 0 3px 5px -4px rgba(0, 0, 0, 0.05)"
+  };
+}
+function srgbLinearize(channel) {
+  const srgb = channel / 255;
+  return srgb <= 0.04045 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
+}
+function wcagLuminance(hex) {
+  const { r, g, b } = hexToRgb(hex);
+  return 0.2126 * srgbLinearize(r) + 0.7152 * srgbLinearize(g) + 0.0722 * srgbLinearize(b);
+}
+function wcagContrast(fg, bg) {
+  const l1 = wcagLuminance(fg);
+  const l2 = wcagLuminance(bg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function ensureContrast(fg, bg, targetRatio) {
+  let adjusted = fg;
+  for (let i = 0; i < 40; i++) {
+    if (wcagContrast(adjusted, bg) >= targetRatio) break;
+    adjusted = darken(adjusted, 4);
+  }
+  return adjusted;
+}
+function deriveSemanticText(color, isDark) {
+  const target = isDark ? 7.5 : 7;
+  const bg = isDark ? "#0a0a0a" : "#ffffff";
+  let adjusted = color;
+  for (let i = 0; i < 40; i++) {
+    if (wcagContrast(adjusted, bg) >= target) break;
+    if (isDark) {
+      adjusted = lighten(adjusted, 3);
+    } else {
+      adjusted = darken(adjusted, 3);
+    }
+  }
+  return adjusted;
+}
+function deriveSemanticBg(color, isDark) {
+  const { r, g, b } = hexToRgb(color);
+  const opacity = isDark ? 0.15 : 0.1;
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function deriveSemanticHover(color) {
+  return darken(color, 10);
+}
+const DEFAULT_SEEDS = {
+  brand: "#18181b",
+  neutral: "stone",
+  density: "default",
+  radiusStyle: "default"
+  // Semantic colors omitted - will use palette defaults from PALETTE_SEMANTIC_COLORS
+};
+export {
+  DEFAULT_SEEDS,
+  PALETTES,
+  PALETTE_SEMANTIC_COLORS,
+  RADIUS_STYLES,
+  deriveAccentActive,
+  deriveAccentHover,
+  deriveBorders,
+  deriveDarkAccent,
+  deriveSemanticBg,
+  deriveSemanticHover,
+  deriveSemanticText,
+  deriveShadows,
+  deriveSurfaces,
+  deriveText,
+  getSemanticColors
+};

package/dist/utils/theme-presets.cjs

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const seedDerivation = require("./seed-derivation.cjs");
+function seedsToTheme(seeds) {
+  const palette = seedDerivation.PALETTES[seeds.neutral];
+  const radius = seedDerivation.RADIUS_STYLES[seeds.radiusStyle];
+  const semanticColors = seedDerivation.getSemanticColors(seeds.neutral, {
+    success: seeds.success,
+    warning: seeds.warning,
+    danger: seeds.danger,
+    info: seeds.info
+  });
+  const { danger, success, warning, info } = semanticColors;
+  const lightSurfaces = seedDerivation.deriveSurfaces(palette, false, seeds.neutral);
+  const lightText = seedDerivation.deriveText(palette, false, seeds.neutral);
+  const lightBorders = seedDerivation.deriveBorders(palette, false);
+  const lightShadows = seedDerivation.deriveShadows(false);
+  const darkSurfaces = seedDerivation.deriveSurfaces(palette, true, seeds.neutral);
+  const darkText = seedDerivation.deriveText(palette, true, seeds.neutral);
+  const darkBorders = seedDerivation.deriveBorders(palette, true);
+  const darkShadows = seedDerivation.deriveShadows(true);
+  const darkAccent = seedDerivation.deriveDarkAccent(seeds.brand);
+  const dangerText = seedDerivation.deriveSemanticText(danger, false);
+  const successText = seedDerivation.deriveSemanticText(success, false);
+  const warningText = seedDerivation.deriveSemanticText(warning, false);
+  const infoText = seedDerivation.deriveSemanticText(info, false);
+  const dangerTextDark = seedDerivation.deriveSemanticText(danger, true);
+  const successTextDark = seedDerivation.deriveSemanticText(success, true);
+  const warningTextDark = seedDerivation.deriveSemanticText(warning, true);
+  const infoTextDark = seedDerivation.deriveSemanticText(info, true);
+  return {
+    name: "Custom",
+    density: seeds.density,
+    colors: {
+      accent: seeds.brand,
+      accentHover: seedDerivation.deriveAccentHover(seeds.brand, false),
+      accentActive: seedDerivation.deriveAccentActive(seeds.brand, false),
+      danger,
+      dangerHover: seedDerivation.deriveSemanticHover(danger),
+      success,
+      warning,
+      info,
+      dangerText,
+      successText,
+      warningText,
+      infoText,
+      dangerBg: seedDerivation.deriveSemanticBg(danger, false),
+      successBg: seedDerivation.deriveSemanticBg(success, false),
+      warningBg: seedDerivation.deriveSemanticBg(warning, false),
+      infoBg: seedDerivation.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: seedDerivation.deriveAccentHover(darkAccent, true),
+      accentActive: seedDerivation.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: seedDerivation.deriveSemanticBg(danger, true),
+      successBg: seedDerivation.deriveSemanticBg(success, true),
+      warningBg: seedDerivation.deriveSemanticBg(warning, true),
+      infoBg: seedDerivation.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)])
+);
+exports.PRESETS = PRESETS;
+exports.PRESET_DEFINITIONS = PRESET_DEFINITIONS;
+exports.generatePreset = generatePreset;
+exports.seedsToTheme = seedsToTheme;