@fluid-app/rep-core 0.1.14 → 0.1.16

package/dist/theme/index.js

@@ -1,611 +0,0 @@
-import Color2 from 'colorjs.io';
-
-// src/theme/color-engine.ts
-
-// src/theme/types.ts
-var SEMANTIC_COLOR_NAMES = [
-  "background",
-  "foreground",
-  "primary",
-  "secondary",
-  "accent",
-  "muted",
-  "destructive"
-];
-var SHADE_STEPS = [
-  100,
-  200,
-  300,
-  400,
-  500,
-  600,
-  700,
-  800,
-  900
-];
-var FONT_SIZE_KEYS = [
-  "extraSmall",
-  "small",
-  "regular",
-  "large",
-  "extraLarge",
-  "giant"
-];
-var FONT_FAMILY_KEYS = ["header", "body"];
-var RADIUS_KEYS = ["small", "medium", "large", "extraLarge"];
-
-// src/theme/color-engine.ts
-function parseColor(value) {
-  if (value.length === 6) {
-    value = `#${value}`;
-  }
-  try {
-    return new Color2(value);
-  } catch (error) {
-    console.warn("[theme] Failed to parse color:", value, error);
-    return new Color2("oklch", [0.5, 0, 0]);
-  }
-}
-function getForegroundColor(foreground, color) {
-  if (foreground.oklch.l == null || color.oklch.l == null) {
-    return foreground;
-  }
-  const contrast = color.contrastAPCA(foreground);
-  if (contrast < 50) {
-    return new Color2("oklch", [
-      color.oklch.l < 0.7 ? 0.95 : 0.15,
-      foreground.oklch.c || 0,
-      foreground.oklch.h || 0
-    ]);
-  }
-  return foreground;
-}
-function generateShades(base) {
-  const l = base.oklch.l ?? 0;
-  const c = base.oklch.c ?? 0;
-  const h = base.oklch.h ?? 0;
-  const safeMax = l >= 0.885 ? 0.995 : 0.97;
-  const safeMin = l <= 0.33 ? 0 : 0.21;
-  const lightStep = (safeMax - l) / 5;
-  const darkStep = -(l - safeMin) / 8;
-  const shade = (lDelta, cDelta) => {
-    return new Color2("oklch", [
-      Math.max(0, Math.min(1, l + lDelta)),
-      c <= 1e-3 ? c : Math.max(0, c + cDelta),
-      h
-    ]);
-  };
-  return {
-    100: shade(5 * lightStep, -375e-5),
-    200: shade(4 * lightStep, -375e-5),
-    300: shade(3 * lightStep, -375e-5),
-    400: shade(2 * lightStep, -375e-5),
-    500: new Color2("oklch", [l, c, h]),
-    600: shade(1.6 * darkStep, 0.025),
-    700: shade(1.875 * 2 * darkStep, 0.05),
-    800: shade(3 * 2 * darkStep, 0.075),
-    900: shade(4 * 2 * darkStep, 0.1)
-  };
-}
-var DARK_DERIVATION_CONFIG = {
-  background: { baseLightness: 0.15, fgLightness: 0.93 },
-  foreground: { baseLightness: 0.93, fgLightness: 0.15 },
-  muted: { baseLightness: 0.22, fgLightness: 0.75 },
-  primary: { baseLightness: "invert", fgLightness: 0.95, chromaScale: 0.9 },
-  secondary: { baseLightness: "invert", fgLightness: 0.93, chromaScale: 0.85 },
-  accent: { baseLightness: "invert", fgLightness: 0.95, chromaScale: 0.9 },
-  destructive: {
-    baseLightness: "invert",
-    fgLightness: 0.95,
-    chromaScale: 0.95
-  }
-};
-function invertLightness(l) {
-  const inverted = 1 - l;
-  return Math.max(0.35, Math.min(0.75, inverted));
-}
-function deriveDarkVariant(name, light) {
-  const config = DARK_DERIVATION_CONFIG[name];
-  const chromaScale = config.chromaScale ?? 1;
-  const baseLightness = config.baseLightness === "invert" ? invertLightness(light.base.oklch.l ?? 0) : config.baseLightness;
-  const fgLightness = config.fgLightness === "invert" ? invertLightness(light.foreground.oklch.l ?? 0) : config.fgLightness;
-  return {
-    base: new Color2("oklch", [
-      baseLightness,
-      (light.base.oklch.c || 0) * chromaScale,
-      light.base.oklch.h || 0
-    ]),
-    foreground: new Color2("oklch", [
-      fgLightness,
-      (light.foreground.oklch.c || 0) * chromaScale,
-      light.foreground.oklch.h || 0
-    ])
-  };
-}
-function mergeDarkOverrides(def) {
-  const darkColors = {};
-  for (const name of SEMANTIC_COLOR_NAMES) {
-    const lightInput = def.light[name];
-    const darkOverride = def.dark[name];
-    if (darkOverride?.base && darkOverride?.foreground) {
-      darkColors[name] = darkOverride;
-    } else if (darkOverride) {
-      const base = darkOverride.base ?? deriveDarkVariant(name, lightInput).base;
-      darkColors[name] = {
-        base,
-        foreground: darkOverride.foreground ?? getForegroundColor(def.light.foreground.base, base)
-      };
-    } else {
-      darkColors[name] = deriveDarkVariant(name, lightInput);
-    }
-  }
-  return darkColors;
-}
-function resolveColorSet(colors) {
-  const resolved = {};
-  for (const name of SEMANTIC_COLOR_NAMES) {
-    const input = colors[name];
-    const shades = generateShades(input.base);
-    const resolvedShades = {};
-    for (const step of SHADE_STEPS) {
-      resolvedShades[step] = shades[step];
-    }
-    resolved[name] = {
-      base: input.base.clone(),
-      foreground: input.foreground.clone(),
-      shades: resolvedShades
-    };
-  }
-  return resolved;
-}
-function resolveTheme(def) {
-  return {
-    id: def.id,
-    name: def.name,
-    light: resolveColorSet(def.light),
-    dark: resolveColorSet(mergeDarkOverrides(def)),
-    fontSizes: { ...def.fontSizes },
-    fontFamilies: { ...def.fontFamilies },
-    spacing: def.spacing,
-    radii: { ...def.radii }
-  };
-}
-
-// src/theme/tailwind-overrides.ts
-var OVERRIDES = {
-  "--color-gray-50": "var(--color-muted)",
-  "--color-gray-100": "var(--color-muted-600)",
-  "--color-gray-200": "var(--color-border)"
-};
-function getInvertedStep(shade) {
-  const shadeIndex = SHADE_STEPS.indexOf(shade);
-  const invertedIndex = SHADE_STEPS.length - 1 - shadeIndex;
-  return SHADE_STEPS[invertedIndex] || 500;
-}
-function emitTailwindOverrides(darkMode = false) {
-  const TAILWIND_COLOR_MAP = {
-    gray: "foreground",
-    red: "destructive",
-    blue: "primary",
-    green: "accent"
-  };
-  const TAILWIND_SHADES = [
-    50,
-    100,
-    200,
-    300,
-    400,
-    500,
-    600,
-    700,
-    800,
-    900,
-    950
-  ];
-  const SHADE_REMAP = {
-    50: 100,
-    950: 900
-  };
-  const lines = [];
-  for (const [twName, semantic] of Object.entries(TAILWIND_COLOR_MAP)) {
-    for (const shade of TAILWIND_SHADES) {
-      const step = SHADE_REMAP[shade] ?? shade;
-      const override = OVERRIDES[`--color-${twName}-${shade}`];
-      lines.push(
-        `--color-${twName}-${shade}: ${override ? override : `var(--color-${semantic}-${semantic === "foreground" && darkMode === true ? getInvertedStep(step) : step})`};`
-      );
-    }
-  }
-  lines.push("--color-white: var(--color-background);");
-  lines.push("--color-black: var(--color-foreground);");
-  return lines;
-}
-
-// src/theme/css-generator.ts
-function colorToCSS(color) {
-  const result = color.toString({ format: "oklch" });
-  if (result.includes("NaN")) {
-    console.warn(
-      "[theme] colorToCSS produced NaN, using neutral fallback:",
-      result
-    );
-    return "oklch(0.5 0 0)";
-  }
-  return result;
-}
-function camelToKebab(str) {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-function emitColorVars(colors) {
-  const lines = [];
-  for (const name of SEMANTIC_COLOR_NAMES) {
-    const color = colors[name];
-    lines.push(`--color-${name}: ${colorToCSS(color.base)};`);
-    lines.push(`--color-${name}-foreground: ${colorToCSS(color.foreground)};`);
-    for (const step of SHADE_STEPS) {
-      lines.push(`--color-${name}-${step}: ${colorToCSS(color.shades[step])};`);
-    }
-  }
-  return lines;
-}
-function emitNonColorVars(theme) {
-  const lines = [];
-  for (const key of FONT_SIZE_KEYS) {
-    lines.push(`--font-size-${camelToKebab(key)}: ${theme.fontSizes[key]};`);
-  }
-  for (const key of FONT_FAMILY_KEYS) {
-    lines.push(`--font-${key}: ${theme.fontFamilies[key]};`);
-  }
-  lines.push(`--spacing: ${theme.spacing};`);
-  for (const key of RADIUS_KEYS) {
-    lines.push(`--radius-${camelToKebab(key)}: ${theme.radii[key]};`);
-  }
-  return lines;
-}
-var globalCSSOverride = [
-  "--color-background-foreground: var(--color-foreground);",
-  "--color-foreground-foreground: var(--color-background);",
-  ...SEMANTIC_COLOR_NAMES.map((value) => `--${value}: var(--color-${value});`),
-  ...SEMANTIC_COLOR_NAMES.map(
-    (value) => `--${value}-foreground: var(--color-${value}-foreground);`
-  ),
-  "--sidebar-ring: var(--color-primary);",
-  "--sidebar-border: var(--color-border);",
-  "--sidebar-accent-foreground: var(--color-accent-foreground);",
-  "--sidebar-accent: var(--color-accent);",
-  "--sidebar-primary-foreground: var(--color-primary-foreground);",
-  "--sidebar-primary: var(--color-primary);",
-  "--sidebar-foreground: var(--color-muted-foreground);",
-  "--sidebar: var(--color-muted);",
-  "--border: var(--color-background-600);",
-  "--ring: var(--color-primary);",
-  "--popover: var(--color-background);",
-  "--popover-foreground: var(--color-foreground);",
-  "--card: var(--color-muted);",
-  "--card-foreground: var(--color-muted-foreground);",
-  "--radius-sm: var(--radius-small);",
-  "--radius-md: var(--radius-medium);",
-  "--radius-lg: var(--radius-large);",
-  "--radius-xl: var(--radius-extra-large);",
-  "--text-xs: var(--font-size-extra-small);",
-  "--text-sm: var(--font-size-small);",
-  "--text-base: var(--font-size-regular);",
-  "--text-lg: var(--font-size-large);",
-  "--text-xl: var(--font-size-extra-large);",
-  "--text-2xl: var(--font-size-giant);",
-  "--font-sans: var(--font-body);",
-  // Tailwind's font-mono is repurposed as the display/header font
-  "--font-mono: var(--font-header);"
-];
-var globalDarkCSSOverride = ["--border: var(--color-background-400);"];
-function generateThemeCSS(theme, options = {}) {
-  const sel = `[data-theme="${theme.id}"]`;
-  const tw = options.mapTailwindColors ?? true;
-  const blocks = [];
-  blocks.push(`${sel} {`);
-  blocks.push(...globalCSSOverride);
-  blocks.push(...emitNonColorVars(theme));
-  blocks.push(...emitColorVars(theme.light));
-  if (tw) blocks.push(...emitTailwindOverrides());
-  blocks.push(`}`);
-  blocks.push(`${sel}[data-theme-mode="dark"] {`);
-  blocks.push(...globalDarkCSSOverride);
-  blocks.push(...emitColorVars(theme.dark));
-  if (tw) blocks.push(...emitTailwindOverrides(true));
-  blocks.push(`}`);
-  if (!options.disableAutoTheme) {
-    blocks.push(`@media (prefers-color-scheme: dark) {`);
-    blocks.push(`${sel}:not([data-theme-mode]) {`);
-    blocks.push(...globalDarkCSSOverride);
-    blocks.push(...emitColorVars(theme.dark).map((l) => `${l}`));
-    if (tw) blocks.push(...emitTailwindOverrides(true).map((l) => `${l}`));
-    blocks.push(`}`);
-    blocks.push(`}`);
-  }
-  return blocks.join("\n");
-}
-var DEFAULT_FONT_SIZES = {
-  extraSmall: "0.75rem",
-  small: "0.875rem",
-  regular: "1rem",
-  large: "1.125rem",
-  extraLarge: "1.25rem",
-  giant: "1.5rem"
-};
-var DEFAULT_FONT_FAMILIES = {
-  header: "var(--font-inter)",
-  body: "var(--font-inter)"
-};
-var DEFAULT_SPACING = "0.25rem";
-var DEFAULT_RADII = {
-  small: "0.25rem",
-  medium: "0.5rem",
-  large: "0.75rem",
-  extraLarge: "1rem"
-};
-var DEFAULT_COLORS = {
-  background: "#ffffff",
-  foreground: "#1a1a1a",
-  primary: "#3b82f6",
-  secondary: "#6b7280",
-  accent: "#10b981",
-  muted: "#f3f4f6",
-  destructive: "#ef4444",
-  mutedForeground: "#6b7280"
-};
-var DEFAULT_THEME_ID = "default";
-var DEFAULT_THEME_NAME = "Default Theme";
-function getDefaultThemeDefinition() {
-  const bg = new Color2(DEFAULT_COLORS.background);
-  const fg = new Color2(DEFAULT_COLORS.foreground);
-  const primary = new Color2(DEFAULT_COLORS.primary);
-  const secondary = new Color2(DEFAULT_COLORS.secondary);
-  const accent = new Color2(DEFAULT_COLORS.accent);
-  const muted = new Color2(DEFAULT_COLORS.muted);
-  const destructive = new Color2(DEFAULT_COLORS.destructive);
-  const mutedFg = new Color2(DEFAULT_COLORS.mutedForeground);
-  const darkBg = new Color2("#0a0a0a");
-  const darkFg = new Color2("#fafafa");
-  const darkMuted = new Color2("#171717");
-  const darkMutedForeground = new Color2("#dddddd");
-  return {
-    id: DEFAULT_THEME_ID,
-    name: DEFAULT_THEME_NAME,
-    light: {
-      background: { base: bg, foreground: fg },
-      foreground: { base: fg, foreground: bg },
-      primary: {
-        base: primary,
-        foreground: getForegroundColor(fg, primary)
-      },
-      secondary: {
-        base: secondary,
-        foreground: getForegroundColor(fg, secondary)
-      },
-      accent: {
-        base: accent,
-        foreground: getForegroundColor(fg, accent)
-      },
-      muted: { base: muted, foreground: mutedFg },
-      destructive: {
-        base: destructive,
-        foreground: getForegroundColor(fg, destructive)
-      }
-    },
-    dark: {
-      background: { base: darkBg, foreground: darkFg },
-      foreground: { base: darkFg, foreground: darkBg },
-      muted: { base: darkMuted, foreground: darkMutedForeground }
-    },
-    fontSizes: { ...DEFAULT_FONT_SIZES },
-    fontFamilies: { ...DEFAULT_FONT_FAMILIES },
-    spacing: DEFAULT_SPACING,
-    radii: { ...DEFAULT_RADII }
-  };
-}
-
-// src/theme/serialisation.ts
-function colorToPlain(color) {
-  return {
-    l: color.oklch.l ?? 0,
-    c: color.oklch.c ?? 0,
-    h: color.oklch.h ?? 0
-  };
-}
-function plainToColor(plain) {
-  return new Color2("oklch", [plain.l, plain.c, plain.h]);
-}
-function serialiseTheme(def) {
-  const light = {};
-  for (const name of SEMANTIC_COLOR_NAMES) {
-    light[name] = {
-      base: colorToPlain(def.light[name].base),
-      foreground: colorToPlain(def.light[name].foreground)
-    };
-  }
-  const dark = {};
-  for (const [name, value] of Object.entries(def.dark)) {
-    if (!value) continue;
-    dark[name] = {
-      ...value.base ? { base: colorToPlain(value.base) } : {},
-      ...value.foreground ? { foreground: colorToPlain(value.foreground) } : {}
-    };
-  }
-  return {
-    id: def.id,
-    name: def.name,
-    light,
-    dark,
-    fontSizes: { ...def.fontSizes },
-    fontFamilies: { ...def.fontFamilies },
-    spacing: def.spacing,
-    radii: { ...def.radii },
-    ...def.syncWithBrandColors ? { syncWithBrandColors: true } : {}
-  };
-}
-function deserialiseTheme(payload) {
-  const lightRaw = payload.light ?? {};
-  const darkRaw = payload.dark ?? {};
-  const defaults = getDefaultThemeDefinition();
-  const light = {};
-  for (const name of SEMANTIC_COLOR_NAMES) {
-    const entry = lightRaw[name];
-    if (entry) {
-      light[name] = {
-        base: plainToColor(entry.base),
-        foreground: plainToColor(entry.foreground)
-      };
-    } else {
-      console.warn(
-        `[theme] deserialiseTheme: missing light color "${name}", using default`
-      );
-      light[name] = defaults.light[name];
-    }
-  }
-  const dark = {};
-  for (const [name, value] of Object.entries(darkRaw)) {
-    if (!value) continue;
-    dark[name] = {
-      ...value.base ? { base: plainToColor(value.base) } : {},
-      ...value.foreground ? { foreground: plainToColor(value.foreground) } : {}
-    };
-  }
-  return {
-    id: payload.id,
-    name: payload.name,
-    light,
-    dark,
-    fontSizes: payload.fontSizes ?? DEFAULT_FONT_SIZES,
-    fontFamilies: payload.fontFamilies ?? DEFAULT_FONT_FAMILIES,
-    spacing: payload.spacing ?? DEFAULT_SPACING,
-    radii: payload.radii ?? DEFAULT_RADII,
-    ...payload.syncWithBrandColors === true ? { syncWithBrandColors: true } : {}
-  };
-}
-
-// src/theme/transforms.ts
-function isNewThemeFormat(config) {
-  return config.light != null && typeof config.light === "object";
-}
-function legacyConfigToDefinition(id, name, config) {
-  const bg = parseColor(
-    config.base ?? config.background ?? DEFAULT_COLORS.background
-  );
-  const fg = parseColor(
-    config.text ?? config.foreground ?? DEFAULT_COLORS.foreground
-  );
-  const primary = parseColor(config.primary ?? DEFAULT_COLORS.primary);
-  const secondary = parseColor(config.secondary ?? DEFAULT_COLORS.secondary);
-  const accent = parseColor(config.accent ?? DEFAULT_COLORS.accent);
-  const muted = parseColor(config.muted ?? DEFAULT_COLORS.muted);
-  const destructive = parseColor(
-    config.destructive ?? DEFAULT_COLORS.destructive
-  );
-  const mutedFg = parseColor(
-    config.mutedForeground ?? DEFAULT_COLORS.mutedForeground
-  );
-  return {
-    id: String(id),
-    name,
-    light: {
-      background: { base: bg, foreground: fg },
-      foreground: { base: fg, foreground: bg },
-      primary: {
-        base: primary,
-        foreground: getForegroundColor(fg, primary)
-      },
-      secondary: {
-        base: secondary,
-        foreground: getForegroundColor(fg, secondary)
-      },
-      accent: {
-        base: accent,
-        foreground: getForegroundColor(fg, accent)
-      },
-      muted: { base: muted, foreground: mutedFg },
-      destructive: {
-        base: destructive,
-        foreground: getForegroundColor(fg, destructive)
-      }
-    },
-    dark: {},
-    fontSizes: {
-      extraSmall: config.extraSmall ?? DEFAULT_FONT_SIZES.extraSmall,
-      small: config.small ?? DEFAULT_FONT_SIZES.small,
-      regular: config.regular ?? DEFAULT_FONT_SIZES.regular,
-      large: config.large ?? DEFAULT_FONT_SIZES.large,
-      extraLarge: config.extraLarge ?? DEFAULT_FONT_SIZES.extraLarge,
-      giant: config.giant ?? DEFAULT_FONT_SIZES.giant
-    },
-    fontFamilies: {
-      header: config.headerFont ?? DEFAULT_FONT_FAMILIES.header,
-      body: config.bodyFont ?? DEFAULT_FONT_FAMILIES.body
-    },
-    spacing: config.globalSpacing ?? DEFAULT_SPACING,
-    radii: {
-      small: config.radiusSmall ?? DEFAULT_RADII.small,
-      medium: config.radiusMedium ?? DEFAULT_RADII.medium,
-      large: config.radiusLarge ?? DEFAULT_RADII.large,
-      extraLarge: config.radiusExtraLarge ?? DEFAULT_RADII.extraLarge
-    }
-  };
-}
-function buildThemeDefinition(theme) {
-  const config = theme.config ?? {};
-  if (isNewThemeFormat(config)) {
-    return deserialiseTheme({
-      ...config,
-      id: String(theme.id),
-      name: theme.name ?? "Untitled Theme"
-    });
-  }
-  return legacyConfigToDefinition(
-    theme.id,
-    theme.name ?? "Untitled Theme",
-    config
-  );
-}
-function transformThemes(themes) {
-  return themes.flatMap((theme) => {
-    try {
-      return [buildThemeDefinition(theme)];
-    } catch (error) {
-      console.error(`[theme] Failed to build theme id=${theme.id}:`, error);
-      return [];
-    }
-  });
-}
-function getActiveThemeId(themes) {
-  const active = themes.find((t) => t.active) ?? themes[0];
-  return active ? String(active.id) : void 0;
-}
-
-// src/theme/theme-applicator.ts
-var STYLE_PREFIX = "theme-style-";
-function applyTheme(theme, options) {
-  if (typeof document === "undefined") return;
-  try {
-    const styleId = `${STYLE_PREFIX}${theme.id}`;
-    let el = document.getElementById(styleId);
-    if (!el) {
-      el = document.createElement("style");
-      el.id = styleId;
-      document.head.appendChild(el);
-    }
-    el.textContent = generateThemeCSS(theme, options);
-  } catch (error) {
-    console.error(`[theme] applyTheme failed for "${theme.id}":`, error);
-  }
-}
-function removeTheme(themeId) {
-  if (typeof document === "undefined") return;
-  document.getElementById(`${STYLE_PREFIX}${themeId}`)?.remove();
-}
-function removeAllThemes() {
-  if (typeof document === "undefined") return;
-  document.querySelectorAll(`style[id^="${STYLE_PREFIX}"]`).forEach((el) => el.remove());
-}
-
-export { DEFAULT_COLORS, DEFAULT_FONT_FAMILIES, DEFAULT_FONT_SIZES, DEFAULT_RADII, DEFAULT_SPACING, DEFAULT_THEME_ID, DEFAULT_THEME_NAME, FONT_FAMILY_KEYS, FONT_SIZE_KEYS, RADIUS_KEYS, SEMANTIC_COLOR_NAMES, SHADE_STEPS, applyTheme, buildThemeDefinition, deriveDarkVariant, deserialiseTheme, generateShades, generateThemeCSS, getActiveThemeId, getDefaultThemeDefinition, getForegroundColor, mergeDarkOverrides, parseColor, removeAllThemes, removeTheme, resolveTheme, serialiseTheme, transformThemes };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map