@easemate/web-kit 0.1.5 → 0.3.0

package/build/theme.cjs

@@ -0,0 +1,746 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/theme/index.ts
+var theme_exports = {};
+__export(theme_exports, {
+  DARK_THEME_ALIAS: () => DARK_THEME_ALIAS,
+  DEFAULT_THEME_NAME: () => DEFAULT_THEME_NAME,
+  EASE_THEME_ATTRIBUTE: () => EASE_THEME_ATTRIBUTE,
+  applyTheme: () => applyTheme,
+  createDarkTheme: () => createDarkTheme,
+  createTheme: () => createTheme,
+  defaultColors: () => defaultColors,
+  defaultEaseVars: () => defaultEaseVars,
+  defaultRadii: () => defaultRadii,
+  defaultSpacing: () => defaultSpacing,
+  defaultThemeConfig: () => defaultThemeConfig,
+  defaultTypography: () => defaultTypography,
+  defineTheme: () => defineTheme,
+  followSystemTheme: () => followSystemTheme,
+  getSystemThemeMode: () => getSystemThemeMode,
+  getTheme: () => getTheme,
+  getThemeName: () => getThemeName,
+  getThemeNames: () => getThemeNames,
+  getThemeValue: () => getThemeValue,
+  hasTheme: () => hasTheme,
+  isThemeConfig: () => isThemeConfig,
+  isThemeRef: () => isThemeRef,
+  mergeTheme: () => mergeTheme,
+  registerTheme: () => registerTheme,
+  removeTheme: () => removeTheme,
+  setThemeName: () => setThemeName,
+  setThemeValue: () => setThemeValue,
+  themeRef: () => themeRef
+});
+module.exports = __toCommonJS(theme_exports);
+
+// swc:/home/runner/work/web-kit/web-kit/packages/core/src/theme/tokens.ts
+var defaultColors = {
+  gray: {
+    0: "oklab(98.81% 0 0)",
+    100: "oklab(97.64% 0.0004 -0.0013)",
+    300: "oklab(93.49% 0.0011 -0.0039)",
+    400: "oklab(89.52% 0.0009 -0.0068)",
+    500: "oklab(81.71% -0.0002 -0.0073)",
+    600: "oklab(65.21% -0.0019 -0.0144)",
+    700: "oklab(37.92% -0.0006 -0.0179)",
+    800: "oklab(28.45% -0.0012 -0.0118)",
+    825: "oklab(26.45% -0.0012 -0.0105)",
+    850: "oklab(24.50% -0.0012 -0.0105)",
+    875: "oklab(22.66% -0.0009 -0.0097)",
+    900: "oklab(20.68% -0.0006 -0.0065)",
+    1e3: "oklab(18.81% -0.0012 -0.006)"
+  },
+  blue: {
+    100: "oklab(98.65% 0.0019 -0.0063)",
+    200: "oklab(97.45% 0.0057 -0.0121)",
+    300: "oklab(95.88% 0.0086 -0.0183)",
+    400: "oklab(91.21% 0.0179 -0.0399)",
+    500: "oklab(84.61% 0.0327 -0.0725)",
+    600: "oklab(76.85% 0.0462 -0.1115)",
+    700: "oklab(68.28% 0.0582 -0.1575)",
+    800: "oklab(59.36% 0.0641 -0.2083)",
+    900: "oklab(50.69% 0.0492 -0.2575)",
+    1e3: "oklab(46.82% 0.0475 -0.2273)",
+    1100: "oklch(0.4013 0.171 284.66)"
+  },
+  green: {
+    100: "oklab(98.44% -0.009 0.0042)",
+    200: "oklab(97.57% -0.0127 0.0058)",
+    300: "oklab(96.32% -0.0176 0.0071)",
+    400: "oklab(93.66% -0.0341 0.0149)",
+    500: "oklab(89.96% -0.0529 0.0237)",
+    600: "oklab(85.44% -0.0759 0.0346)",
+    700: "oklab(80.59% -0.1005 0.0484)",
+    800: "oklab(75.87% -0.1245 0.0639)",
+    900: "oklab(71.18% -0.1439 0.0799)",
+    1e3: "oklab(64.89% -0.1265 0.0677)"
+  },
+  red: {
+    100: "oklab(99.04% 0.0031 0.0009)",
+    200: "oklab(97.85% 0.0072 0.0022)",
+    300: "oklab(95.52% 0.0159 0.0036)",
+    400: "oklab(89.9% 0.037 0.0091)",
+    500: "oklab(82.78% 0.0664 0.0181)",
+    600: "oklab(74.46% 0.105 0.031)",
+    700: "oklab(65.73% 0.1467 0.0503)",
+    800: "oklab(58.28% 0.1811 0.0773)",
+    900: "oklab(53.11% 0.1914 0.1028)",
+    1e3: "oklab(48.4% 0.1727 0.0903)"
+  },
+  orange: {
+    100: "oklab(99.47% 0.0009 0.0044)",
+    200: "oklab(98.95% 0.0018 0.0088)",
+    300: "oklab(97.58% 0.0073 0.0133)",
+    400: "oklab(94.81% 0.0136 0.0305)",
+    500: "oklab(90.97% 0.0248 0.0519)",
+    600: "oklab(86.55% 0.0389 0.0778)",
+    700: "oklab(81.73% 0.0568 0.1053)",
+    800: "oklab(77.05% 0.0777 0.1296)",
+    900: "oklab(72.25% 0.108 0.143)",
+    1e3: "oklab(65.81% 0.092 0.1281)"
+  },
+  yellow: {
+    100: "oklab(99.14% 0.0004 0.0098)",
+    200: "oklab(97.98% 0.0003 0.0248)",
+    300: "oklab(96.81% -0.0002 0.0409)",
+    400: "oklab(95.68% -0.0003 0.0555)",
+    500: "oklab(91.97% 0.0002 0.102)",
+    600: "oklab(88.75% 0.0018 0.1409)",
+    700: "oklab(85.67% 0.0101 0.1648)",
+    800: "oklab(76.85% 0.0212 0.1568)"
+  },
+  white: "oklab(95.14% -0.0013 -0.0186)",
+  black: "oklab(0% 0 0)",
+  whiteAlpha: {
+    0: "oklab(95.14% -0.0013 -0.0186 / 0)",
+    2: "oklab(95.14% -0.0013 -0.0186 / 0.02)",
+    4: "oklab(95.14% -0.0013 -0.0186 / 0.04)",
+    6: "oklab(95.14% -0.0013 -0.0186 / 0.06)",
+    8: "oklab(95.14% -0.0013 -0.0186 / 0.08)",
+    10: "oklab(95.14% -0.0013 -0.0186 / 0.1)",
+    12: "oklab(95.14% -0.0013 -0.0186 / 0.12)",
+    15: "oklab(95.14% -0.0013 -0.0186 / 0.15)",
+    20: "oklab(95.14% -0.0013 -0.0186 / 0.2)",
+    30: "oklab(95.14% -0.0013 -0.0186 / 0.3)",
+    40: "oklab(95.14% -0.0013 -0.0186 / 0.4)",
+    50: "oklab(95.14% -0.0013 -0.0186 / 0.5)",
+    70: "oklab(95.14% -0.0013 -0.0186 / 0.7)",
+    80: "oklab(95.14% -0.0013 -0.0186 / 0.8)",
+    90: "oklab(95.14% -0.0013 -0.0186 / 0.9)"
+  },
+  blackAlpha: {
+    0: "oklab(0% 0 0 / 0)",
+    2: "oklab(0% 0 0 / 0.02)",
+    4: "oklab(0% 0 0 / 0.04)",
+    6: "oklab(0% 0 0 / 0.06)",
+    8: "oklab(0% 0 0 / 0.08)",
+    10: "oklab(0% 0 0 / 0.1)",
+    12: "oklab(0% 0 0 / 0.12)",
+    15: "oklab(0% 0 0 / 0.15)",
+    20: "oklab(0% 0 0 / 0.2)",
+    30: "oklab(0% 0 0 / 0.3)",
+    40: "oklab(0% 0 0 / 0.4)",
+    50: "oklab(0% 0 0 / 0.5)",
+    70: "oklab(0% 0 0 / 0.7)",
+    80: "oklab(0% 0 0 / 0.8)",
+    90: "oklab(0% 0 0 / 0.9)"
+  },
+  foreground: "var(--color-gray-0)"
+};
+var defaultRadii = {
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  full: "9999px"
+};
+var defaultSpacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px"
+};
+var defaultTypography = {
+  fontFamily: '"Instrument Sans", system-ui, sans-serif',
+  fontMono: '"Geist Mono", monospace',
+  fontSize: "13px",
+  lineHeight: "1.5"
+};
+
+// swc:/home/runner/work/web-kit/web-kit/packages/core/src/theme/presets.ts
+var defaultEaseVars = {
+  // Typography aliases
+  "--ease-font-family": "var(--font-family)",
+  "--ease-font-mono": "var(--font-mono)",
+  "--ease-font-size": "var(--font-size)",
+  "--ease-font-size-sm": "12px",
+  "--ease-line-height": "var(--font-line-height)",
+  // Panel (ease-state)
+  "--ease-panel-max-width": "332px",
+  "--ease-panel-padding": "var(--spacing-md)",
+  "--ease-panel-radius": "var(--radii-lg)",
+  "--ease-panel-border-color": "var(--color-white-6)",
+  "--ease-panel-background": "var(--color-gray-1000)",
+  "--ease-panel-shadow": "0 0 40px 0 var(--color-white-2) inset",
+  "--ease-panel-title-font-size": "14px",
+  "--ease-panel-title-font-weight": "500",
+  "--ease-panel-title-line-height": "24px",
+  "--ease-panel-title-color": "var(--color-blue-100)",
+  // Field (ease-field)
+  "--ease-field-label-width": "36%",
+  "--ease-field-column-gap": "var(--spacing-md)",
+  "--ease-field-row-gap": "6px",
+  "--ease-field-min-height": "30px",
+  "--ease-field-label-font-size": "var(--ease-font-size-sm)",
+  "--ease-field-label-color": "var(--color-gray-600)",
+  "--ease-field-label-padding-left": "4px"
+};
+var defaultThemeConfig = {
+  colors: defaultColors,
+  radii: defaultRadii,
+  spacing: defaultSpacing,
+  typography: defaultTypography,
+  vars: defaultEaseVars
+};
+var DEFAULT_THEME_NAME = "default";
+var DARK_THEME_ALIAS = "dark";
+
+// swc:/home/runner/work/web-kit/web-kit/packages/core/src/theme/registry.ts
+var registry = /* @__PURE__ */ new Map();
+var mergeConfigs = (base, overrides) => {
+  return {
+    colors: {
+      ...base.colors,
+      ...overrides.colors,
+      gray: {
+        ...base.colors?.gray,
+        ...overrides.colors?.gray
+      },
+      blue: {
+        ...base.colors?.blue,
+        ...overrides.colors?.blue
+      },
+      green: {
+        ...base.colors?.green,
+        ...overrides.colors?.green
+      },
+      red: {
+        ...base.colors?.red,
+        ...overrides.colors?.red
+      },
+      orange: {
+        ...base.colors?.orange,
+        ...overrides.colors?.orange
+      },
+      yellow: {
+        ...base.colors?.yellow,
+        ...overrides.colors?.yellow
+      },
+      whiteAlpha: {
+        ...base.colors?.whiteAlpha,
+        ...overrides.colors?.whiteAlpha
+      },
+      blackAlpha: {
+        ...base.colors?.blackAlpha,
+        ...overrides.colors?.blackAlpha
+      }
+    },
+    radii: {
+      ...base.radii,
+      ...overrides.radii
+    },
+    spacing: {
+      ...base.spacing,
+      ...overrides.spacing
+    },
+    typography: {
+      ...base.typography,
+      ...overrides.typography
+    },
+    vars: {
+      ...base.vars,
+      ...overrides.vars
+    }
+  };
+};
+var resolveThemeConfig = (name, visited = /* @__PURE__ */ new Set()) => {
+  if (visited.has(name)) {
+    throw new Error(`[web-kit] Circular theme dependency detected: ${Array.from(visited).join(" -> ")} -> ${name}`);
+  }
+  const entry = registry.get(name);
+  if (!entry) {
+    throw new Error(`[web-kit] Theme "${name}" is not registered.`);
+  }
+  if (entry.resolved) {
+    return entry.resolved;
+  }
+  visited.add(name);
+  let resolved;
+  if (entry.base === null) {
+    resolved = entry.config;
+  } else {
+    const baseConfig = resolveThemeConfig(entry.base, visited);
+    resolved = mergeConfigs(baseConfig, entry.config);
+  }
+  entry.resolved = resolved;
+  return resolved;
+};
+var initBuiltInThemes = () => {
+  if (registry.has(DEFAULT_THEME_NAME)) {
+    return;
+  }
+  registry.set(DEFAULT_THEME_NAME, {
+    name: DEFAULT_THEME_NAME,
+    base: null,
+    config: defaultThemeConfig,
+    resolved: defaultThemeConfig
+  });
+  registry.set(DARK_THEME_ALIAS, {
+    name: DARK_THEME_ALIAS,
+    base: DEFAULT_THEME_NAME,
+    config: {},
+    resolved: null
+  });
+};
+initBuiltInThemes();
+var isThemeRef = (value) => typeof value === "object" && value !== null && "__brand" in value && value.__brand === "WebKitThemeRef";
+var isThemeConfig = (value) => {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  if (isThemeRef(value)) {
+    return false;
+  }
+  const obj = value;
+  return obj.colors !== void 0 || obj.radii !== void 0 || obj.spacing !== void 0 || obj.typography !== void 0 || obj.vars !== void 0;
+};
+function registerTheme(name, options = {}) {
+  const { base = DEFAULT_THEME_NAME, config = {} } = options;
+  let baseName = null;
+  if (base !== null) {
+    baseName = isThemeRef(base) ? base.name : base;
+    if (!registry.has(baseName)) {
+      throw new Error(`[web-kit] Base theme "${baseName}" is not registered.`);
+    }
+  }
+  if (registry.has(name)) {
+    for (const entry of registry.values()) {
+      if (entry.base === name) {
+        entry.resolved = null;
+      }
+    }
+  }
+  registry.set(name, {
+    name,
+    base: baseName,
+    config,
+    resolved: null
+  });
+  return {
+    __brand: "WebKitThemeRef",
+    name
+  };
+}
+function getTheme(theme) {
+  if (isThemeConfig(theme)) {
+    return theme;
+  }
+  const name = isThemeRef(theme) ? theme.name : theme;
+  return resolveThemeConfig(name);
+}
+function hasTheme(name) {
+  return registry.has(name);
+}
+function getThemeNames() {
+  return Array.from(registry.keys());
+}
+function themeRef(name) {
+  if (!registry.has(name)) {
+    throw new Error(`[web-kit] Theme "${name}" is not registered.`);
+  }
+  return {
+    __brand: "WebKitThemeRef",
+    name
+  };
+}
+
+// src/theme/index.ts
+var CSS_PREFIX = "--color";
+var RADII_PREFIX = "--radii";
+var SPACING_PREFIX = "--spacing";
+var TYPOGRAPHY_PREFIX = "--font";
+var toVarName = (prefix, ...parts) => `${prefix}-${parts.join("-")}`;
+var generateColorScaleVars = (name, scale) => {
+  const vars = {};
+  for (const [level, value] of Object.entries(scale)) {
+    if (value !== void 0) {
+      vars[toVarName(CSS_PREFIX, name, level)] = value;
+    }
+  }
+  return vars;
+};
+var withAlpha = (color, alpha) => {
+  const trimmed = color.trim();
+  const match = /^(oklab|oklch)\((.+)\)$/.exec(trimmed);
+  if (match) {
+    const fn = match[1];
+    const innerRaw = match[2];
+    if (fn && innerRaw) {
+      const inner = innerRaw.trim();
+      if (inner.includes("/")) {
+        return `${fn}(${inner})`;
+      }
+      return `${fn}(${inner} / ${alpha})`;
+    }
+  }
+  const pct = Math.round(alpha * 1e3) / 10;
+  return `color-mix(in oklab, ${trimmed} ${pct}%, transparent)`;
+};
+var generateColorVars = (colors) => {
+  const vars = {};
+  if (colors.gray) {
+    Object.assign(vars, generateColorScaleVars("gray", colors.gray));
+  }
+  if (colors.blue) {
+    Object.assign(vars, generateColorScaleVars("blue", colors.blue));
+  }
+  const blue = colors.blue;
+  if (blue?.["200"]) {
+    vars[toVarName(CSS_PREFIX, "blue", "100-50")] = withAlpha(blue["200"], 0.5);
+  }
+  if (blue?.["300"]) {
+    vars[toVarName(CSS_PREFIX, "blue", "300-40")] = withAlpha(blue["300"], 0.4);
+  }
+  if (colors.green) {
+    Object.assign(vars, generateColorScaleVars("green", colors.green));
+  }
+  if (colors.red) {
+    Object.assign(vars, generateColorScaleVars("red", colors.red));
+  }
+  if (colors.orange) {
+    Object.assign(vars, generateColorScaleVars("orange", colors.orange));
+  }
+  if (colors.yellow) {
+    Object.assign(vars, generateColorScaleVars("yellow", colors.yellow));
+  }
+  if (colors.white) {
+    vars[toVarName(CSS_PREFIX, "white")] = colors.white;
+  }
+  if (colors.black) {
+    vars[toVarName(CSS_PREFIX, "black")] = colors.black;
+  }
+  if (colors.whiteAlpha) {
+    for (const [level, value] of Object.entries(colors.whiteAlpha)) {
+      if (value !== void 0) {
+        vars[toVarName(CSS_PREFIX, "white", level)] = value;
+      }
+    }
+  }
+  if (!vars[toVarName(CSS_PREFIX, "white", 0)] && colors.white) {
+    vars[toVarName(CSS_PREFIX, "white", 0)] = withAlpha(colors.white, 0);
+  }
+  if (colors.blackAlpha) {
+    for (const [level, value] of Object.entries(colors.blackAlpha)) {
+      if (value !== void 0) {
+        vars[toVarName(CSS_PREFIX, "black", level)] = value;
+      }
+    }
+  }
+  if (colors.foreground) {
+    vars[toVarName(CSS_PREFIX, "foreground")] = colors.foreground;
+  }
+  return vars;
+};
+var resolveThemeTarget = (element) => {
+  if (element) {
+    return element;
+  }
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return document.documentElement;
+};
+var generateRadiiVars = (radii) => {
+  const vars = {};
+  for (const [name, value] of Object.entries(radii)) {
+    if (value !== void 0) {
+      vars[toVarName(RADII_PREFIX, name)] = value;
+    }
+  }
+  return vars;
+};
+var generateSpacingVars = (spacing) => {
+  const vars = {};
+  for (const [name, value] of Object.entries(spacing)) {
+    if (value !== void 0) {
+      vars[toVarName(SPACING_PREFIX, name)] = value;
+    }
+  }
+  return vars;
+};
+var generateTypographyVars = (typography) => {
+  const vars = {};
+  if (typography.fontFamily) {
+    vars[toVarName(TYPOGRAPHY_PREFIX, "family")] = typography.fontFamily;
+  }
+  if (typography.fontMono) {
+    vars[toVarName(TYPOGRAPHY_PREFIX, "mono")] = typography.fontMono;
+  }
+  if (typography.fontSize) {
+    vars[toVarName(TYPOGRAPHY_PREFIX, "size")] = typography.fontSize;
+  }
+  if (typography.lineHeight) {
+    vars[toVarName(TYPOGRAPHY_PREFIX, "line-height")] = typography.lineHeight;
+  }
+  return vars;
+};
+var normalizeCustomVarName = (name) => {
+  const trimmed = name.trim();
+  if (!trimmed) {
+    return null;
+  }
+  return trimmed.startsWith("--") ? trimmed : `--${trimmed}`;
+};
+var generateCustomVars = (vars) => {
+  const out = {};
+  for (const [key, value] of Object.entries(vars)) {
+    if (value === null || value === void 0) {
+      continue;
+    }
+    const name = normalizeCustomVarName(key);
+    if (!name) {
+      continue;
+    }
+    out[name] = String(value);
+  }
+  return out;
+};
+var generateThemeVars = (config) => {
+  const vars = {};
+  if (config.colors) {
+    Object.assign(vars, generateColorVars(config.colors));
+  }
+  if (config.radii) {
+    Object.assign(vars, generateRadiiVars(config.radii));
+  }
+  if (config.spacing) {
+    Object.assign(vars, generateSpacingVars(config.spacing));
+  }
+  if (config.typography) {
+    Object.assign(vars, generateTypographyVars(config.typography));
+  }
+  if (config.vars) {
+    Object.assign(vars, generateCustomVars(config.vars));
+  }
+  return vars;
+};
+var createTheme = (config, selector = ":root") => {
+  const vars = generateThemeVars(config);
+  const declarations = Object.entries(vars).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  return `${selector} {
+${declarations}
+}`;
+};
+var defineTheme = (config, element) => {
+  const target = resolveThemeTarget(element);
+  if (!target) {
+    return;
+  }
+  const vars = generateThemeVars(config);
+  for (const [name, value] of Object.entries(vars)) {
+    target.style.setProperty(name, value);
+  }
+};
+var removeTheme = (config, element) => {
+  const target = resolveThemeTarget(element);
+  if (!target) {
+    return;
+  }
+  const vars = generateThemeVars(config);
+  for (const name of Object.keys(vars)) {
+    target.style.removeProperty(name);
+  }
+};
+var getThemeValue = (token, element) => {
+  const target = resolveThemeTarget(element);
+  if (!target || typeof getComputedStyle === "undefined") {
+    return "";
+  }
+  const varName = token.startsWith("--") ? token : `--${token}`;
+  return getComputedStyle(target).getPropertyValue(varName).trim();
+};
+var setThemeValue = (token, value, element) => {
+  const target = resolveThemeTarget(element);
+  if (!target) {
+    return;
+  }
+  const varName = token.startsWith("--") ? token : `--${token}`;
+  target.style.setProperty(varName, value);
+};
+var EASE_THEME_ATTRIBUTE = "data-ease-theme";
+var mergeTheme = (overrides = {}) => {
+  return {
+    colors: {
+      ...defaultColors,
+      ...overrides.colors,
+      gray: {
+        ...defaultColors.gray,
+        ...overrides.colors?.gray
+      },
+      blue: {
+        ...defaultColors.blue,
+        ...overrides.colors?.blue
+      },
+      green: {
+        ...defaultColors.green,
+        ...overrides.colors?.green
+      },
+      red: {
+        ...defaultColors.red,
+        ...overrides.colors?.red
+      },
+      orange: {
+        ...defaultColors.orange,
+        ...overrides.colors?.orange
+      },
+      yellow: {
+        ...defaultColors.yellow,
+        ...overrides.colors?.yellow
+      },
+      whiteAlpha: {
+        ...defaultColors.whiteAlpha,
+        ...overrides.colors?.whiteAlpha
+      },
+      blackAlpha: {
+        ...defaultColors.blackAlpha,
+        ...overrides.colors?.blackAlpha
+      }
+    },
+    radii: {
+      ...defaultRadii,
+      ...overrides.radii
+    },
+    spacing: {
+      ...defaultSpacing,
+      ...overrides.spacing
+    },
+    typography: {
+      ...defaultTypography,
+      ...overrides.typography
+    },
+    vars: overrides.vars ? {
+      ...overrides.vars
+    } : void 0
+  };
+};
+var createDarkTheme = (overrides = {}) => mergeTheme(overrides);
+var setThemeName = (name, options = {}) => {
+  const target = resolveThemeTarget(options.element);
+  if (!target) {
+    return;
+  }
+  const attribute = options.attribute ?? EASE_THEME_ATTRIBUTE;
+  target.setAttribute(attribute, name);
+  if (options.colorScheme && options.setColorScheme !== false) {
+    target.style.colorScheme = options.colorScheme;
+  }
+};
+var getThemeName = (element, attribute = EASE_THEME_ATTRIBUTE) => {
+  const target = resolveThemeTarget(element);
+  if (!target) {
+    return null;
+  }
+  return target.getAttribute(attribute);
+};
+var applyTheme = (theme, options = {}) => {
+  const target = resolveThemeTarget(options.element);
+  const attribute = options.attribute ?? EASE_THEME_ATTRIBUTE;
+  const config = options.mergeWithDefaults ? mergeTheme(theme) : theme;
+  defineTheme(config, target);
+  if (!target) {
+    return config;
+  }
+  if (options.name && options.setAttribute !== false) {
+    target.setAttribute(attribute, options.name);
+  }
+  if (options.colorScheme && options.setColorScheme !== false) {
+    target.style.colorScheme = options.colorScheme;
+  }
+  return config;
+};
+var getSystemThemeMode = () => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "dark";
+  }
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+};
+var followSystemTheme = (themes, options = {}) => {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return () => {
+    };
+  }
+  const media = window.matchMedia("(prefers-color-scheme: light)");
+  const apply = () => {
+    const mode = media.matches ? "light" : "dark";
+    const theme = mode === "light" ? themes.light : themes.dark;
+    applyTheme(theme, {
+      ...options,
+      name: mode === "light" ? options.lightName ?? "light" : options.darkName ?? "dark",
+      colorScheme: mode
+    });
+  };
+  apply();
+  media.addEventListener("change", apply);
+  return () => media.removeEventListener("change", apply);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DARK_THEME_ALIAS,
+  DEFAULT_THEME_NAME,
+  EASE_THEME_ATTRIBUTE,
+  applyTheme,
+  createDarkTheme,
+  createTheme,
+  defaultColors,
+  defaultEaseVars,
+  defaultRadii,
+  defaultSpacing,
+  defaultThemeConfig,
+  defaultTypography,
+  defineTheme,
+  followSystemTheme,
+  getSystemThemeMode,
+  getTheme,
+  getThemeName,
+  getThemeNames,
+  getThemeValue,
+  hasTheme,
+  isThemeConfig,
+  isThemeRef,
+  mergeTheme,
+  registerTheme,
+  removeTheme,
+  setThemeName,
+  setThemeValue,
+  themeRef
+});
+//# sourceMappingURL=theme.cjs.map