@multiplatform.one/theme 7.83.1 → 7.83.2

package/dist/cjs/theme/createThemes.cjs

@@ -0,0 +1,737 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var createThemes_exports = {};
+__export(createThemes_exports, {
+  createThemesBuilder: () => createThemesBuilder,
+  houseComponentThemes: () => houseComponentThemes,
+  houseGrandChildrenThemes: () => houseGrandChildrenThemes,
+  houseTemplates: () => houseTemplates,
+  tintHueNames: () => tintHueNames
+});
+module.exports = __toCommonJS(createThemes_exports);
+var Colors = __toESM(require("@tamagui/colors"));
+var import_theme_builder = require("@tamagui/theme-builder");
+var import_v5 = require("@tamagui/themes/v5");
+var import_colorRules = require("./colorRules.cjs");
+var import_builderOptions = require("./defaults/builderOptions.cjs");
+var import_ramps = require("./ramps.cjs");
+const intentInkFloor = {
+  /** Stored hsla(41, 99%, 30%, 1); 4.54:1 on $color2, dE76 2.54. */
+  warning: "#986801",
+  /** Stored hsla(154, 63%, 31%, 1); 4.53:1 on $color2, dE76 0.82. */
+  success: "#1d8156"
+};
+function withIntentInkFloor(palette, ink) {
+  if (palette.length !== 12) return palette;
+  const stepped = [...palette];
+  stepped[10] = ink;
+  return stepped;
+}
+const lightSurfaceGrouped = {
+  ...import_v5.v5Templates.light_surface1,
+  background: import_theme_builder.PALETTE_BACKGROUND_OFFSET,
+  backgroundHover: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 1,
+  backgroundPress: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 2,
+  backgroundFocus: import_theme_builder.PALETTE_BACKGROUND_OFFSET,
+  backgroundActive: import_theme_builder.PALETTE_BACKGROUND_OFFSET
+};
+const houseTemplates = {
+  ...import_v5.v5Templates,
+  light_surface1: lightSurfaceGrouped
+};
+const houseComponentThemes = {
+  Button: {
+    template: "surface2"
+  },
+  Input: {
+    template: "surface1"
+  },
+  TextArea: {
+    template: "surface1"
+  },
+  Progress: {
+    template: "surface2"
+  },
+  ProgressIndicator: {
+    template: "surface3"
+  },
+  Slider: {
+    template: "surface2"
+  },
+  SliderActive: {
+    template: "surface3"
+  },
+  SliderThumb: {
+    template: "surface1"
+  },
+  Switch: {
+    template: "surface2"
+  },
+  Card: {
+    template: "surface1"
+  },
+  ListItem: {
+    template: "surface1"
+  },
+  SelectTrigger: {
+    template: "surface1"
+  },
+  SelectItem: {
+    template: "surface1"
+  },
+  InputContainerFrame: {
+    template: "surface1"
+  }
+};
+const houseGrandChildrenThemes = {
+  active: {
+    template: "surface3"
+  },
+  alt1: {
+    template: "surface1"
+  },
+  alt2: {
+    template: "surface2"
+  }
+};
+function sanitizeGetTheme(getTheme) {
+  return props => {
+    const out = {};
+    for (const [key, value] of Object.entries(getTheme(props))) {
+      if (value != null) out[key] = value;
+    }
+    return out;
+  };
+}
+const tintHueNames = /* @__PURE__ */new Set(["amber", "blue", "bronze", "brown", "crimson", "cyan", "gold", "grass", "gray", "green", "indigo", "lime", "mauve", "mint", "olive", "orange", "pink", "plum", "purple", "red", "sage", "sand", "sky", "slate", "teal", "tomato", "violet", "yellow"]);
+const tintNeutralTextKeys = ["color", "colorHover", "colorPress", "colorFocus", "color11", "color12", "placeholderColor"];
+function neutralizeTintText(themes) {
+  const out = {
+    ...themes
+  };
+  for (const [name, theme] of Object.entries(themes)) {
+    const parts = name.split("_");
+    if (parts.length < 2) continue;
+    const scheme = parts[0];
+    if (scheme !== "light" && scheme !== "dark") continue;
+    if (!tintHueNames.has(parts[1])) continue;
+    const base = themes[scheme];
+    if (!base) continue;
+    const patched = {
+      ...theme
+    };
+    for (const key of tintNeutralTextKeys) {
+      if (key in patched && base[key] != null) patched[key] = base[key];
+    }
+    if ("textMuted" in patched) patched.textMuted = (0, import_builderOptions.pickSecondaryInk)(patched, base);
+    out[name] = patched;
+  }
+  return out;
+}
+const semanticIntentNames = /* @__PURE__ */new Set(["error", "warning", "success"]);
+const entryControlNames = /* @__PURE__ */new Set(["Input", "TextArea"]);
+function neutralizeSemanticEntryText(themes) {
+  const out = {
+    ...themes
+  };
+  for (const [name, theme] of Object.entries(themes)) {
+    const [scheme, intent, component, ...rest] = name.split("_");
+    if (rest.length > 0 || scheme !== "light" && scheme !== "dark") continue;
+    if (!intent || !semanticIntentNames.has(intent)) continue;
+    const base = themes[scheme];
+    if (!base) continue;
+    if (component === void 0) {
+      if (base.placeholderColor != null) out[name] = {
+        ...theme,
+        placeholderColor: base.placeholderColor
+      };
+      continue;
+    }
+    if (!entryControlNames.has(component)) continue;
+    const neutral = {
+      ...base,
+      ...themes[`${scheme}_${component}`]
+    };
+    const patched = {
+      ...theme
+    };
+    for (const key of tintNeutralTextKeys) {
+      if (neutral[key] != null) patched[key] = neutral[key];
+    }
+    out[name] = patched;
+  }
+  return out;
+}
+function luminanceOf(color) {
+  const hex = color ? (0, import_colorRules.normalizeToHex)(color) : null;
+  return hex ? (0, import_colorRules.relativeLuminance)(hex) : null;
+}
+function nearestHoldingStep(preferred, steps, holds) {
+  const preferredLum = luminanceOf(preferred);
+  if (preferredLum === null || holds(preferredLum)) return preferred;
+  let best = preferred;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (const step of steps) {
+    const lum = luminanceOf(step);
+    if (step === void 0 || lum === null || !holds(lum)) continue;
+    const distance = Math.abs(lum - preferredLum);
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      best = step;
+    }
+  }
+  return best;
+}
+function holdAccentFloor(themes) {
+  const out = {
+    ...themes
+  };
+  for (const scheme of ["light", "dark"]) {
+    const base = themes[scheme];
+    if (!base?.accentBackground || !base.accentColor) continue;
+    const paper = luminanceOf(base.color1);
+    const ink = luminanceOf(base.color12);
+    const surfaces = [base.color1, base.color2, base.color3, base.color4].map(luminanceOf);
+    if (paper === null || ink === null || surfaces.some(lum => lum === null)) continue;
+    const steps = Array.from({
+      length: 12
+    }, (_, index) => base[`accent${index + 1}`]);
+    const fill = nearestHoldingStep(base.accentBackground, steps.slice(0, 10), lum => Math.max((0, import_colorRules.contrastRatio)(lum, paper), (0, import_colorRules.contrastRatio)(lum, ink)) >= import_colorRules.aaTextContrastRatio && (0, import_colorRules.contrastRatio)(lum, paper) >= import_colorRules.minContrastRatio);
+    const accentInk = nearestHoldingStep(base.accentColor, steps, lum => surfaces.every(surface => (0, import_colorRules.contrastRatio)(lum, surface) >= import_colorRules.aaTextContrastRatio));
+    if (fill === base.accentBackground && accentInk === base.accentColor) continue;
+    for (const [name, theme] of Object.entries(themes)) {
+      if (name !== scheme && !name.startsWith(`${scheme}_`)) continue;
+      const inheritsFill = theme.accentBackground === base.accentBackground;
+      const inheritsInk = theme.accentColor === base.accentColor;
+      if (!inheritsFill && !inheritsInk) continue;
+      out[name] = {
+        ...theme,
+        ...(inheritsFill ? {
+          accentBackground: fill
+        } : null),
+        ...(inheritsInk ? {
+          accentColor: accentInk
+        } : null)
+      };
+    }
+  }
+  return out;
+}
+const selectionSurfaceContrastRatio = 1.16;
+const selectionSurfaceScope = /^(light|dark)(_[a-z]+)?$/;
+function holdSelectionSurface(themes) {
+  const out = {
+    ...themes
+  };
+  for (const [scopeName, scope] of Object.entries(themes)) {
+    if (!selectionSurfaceScope.test(scopeName) || /_(accent|active)$/.test(scopeName)) continue;
+    const page = luminanceOf(scope.background);
+    const [surface, next, last] = [scope.color4, scope.color5, scope.color6].map(color => color ? (0, import_colorRules.normalizeToHex)(color) : null);
+    if (page === null || !surface || !next || !last) continue;
+    if ((0, import_colorRules.contrastRatio)((0, import_colorRules.relativeLuminance)(surface), page) >= selectionSurfaceContrastRatio) continue;
+    const candidates = [...Array.from({
+      length: 20
+    }, (_, index) => mixHex(surface, next, (index + 1) / 20)), ...Array.from({
+      length: 20
+    }, (_, index) => mixHex(next, last, (index + 1) / 20))];
+    const held = candidates.find(candidate => (0, import_colorRules.contrastRatio)((0, import_colorRules.relativeLuminance)(candidate), page) >= selectionSurfaceContrastRatio);
+    if (!held) continue;
+    for (const [name, theme] of Object.entries(themes)) {
+      if (name !== scopeName && !name.startsWith(`${scopeName}_`)) continue;
+      if (theme.color4 !== scope.color4) continue;
+      out[name] = {
+        ...out[name],
+        color4: held,
+        ...(theme.borderColor === scope.color4 ? {
+          borderColor: held
+        } : null)
+      };
+    }
+  }
+  return out;
+}
+const selectedTintContrastRatio = 1.1;
+const neutralSelectedTintContrastRatio = 1.25;
+const achromaticChannelSpread = 8;
+function isAchromaticRamp(steps) {
+  return steps.every(step => {
+    const hex = step ? (0, import_colorRules.normalizeToHex)(step) : null;
+    if (!hex) return false;
+    const channels = [1, 3, 5].map(offset => Number.parseInt(hex.slice(offset, offset + 2), 16));
+    return Math.max(...channels) - Math.min(...channels) <= achromaticChannelSpread;
+  });
+}
+function holdSelectedState(themes) {
+  const out = {
+    ...themes
+  };
+  for (const scheme of ["light", "dark"]) {
+    const base = themes[scheme];
+    if (!base?.accentColor) continue;
+    const steps = Array.from({
+      length: 12
+    }, (_, index) => base[`accent${index + 1}`]);
+    const paint = selectedPaint(base, steps, base.accentColor);
+    if (paint) out[scheme] = {
+      ...base,
+      ...paint
+    };
+  }
+  return out;
+}
+function selectedPaint(scope, steps, accentColor) {
+  const page = luminanceOf(scope.color1);
+  const neutral = luminanceOf(scope.color4);
+  if (page === null || neutral === null) return void 0;
+  const grey = isAchromaticRamp(steps);
+  const offNeutral = grey ? neutralSelectedTintContrastRatio : selectedTintContrastRatio;
+  const tint = nearestHoldingStep(scope.color4, steps, lum => (0, import_colorRules.contrastRatio)(lum, page) >= selectedTintContrastRatio && (0, import_colorRules.contrastRatio)(lum, neutral) >= offNeutral);
+  const tintLum = luminanceOf(tint);
+  if (tint === scope.color4 || tintLum === null) return void 0;
+  if (grey) {
+    let strongest = tint;
+    let strongestRatio = 0;
+    for (const step of steps) {
+      const lum = luminanceOf(step);
+      if (step === void 0 || lum === null) continue;
+      const ratio = (0, import_colorRules.contrastRatio)(lum, tintLum);
+      if (ratio > strongestRatio) {
+        strongest = step;
+        strongestRatio = ratio;
+      }
+    }
+    if (strongestRatio >= import_colorRules.aaTextContrastRatio) return {
+      selectedBackground: tint,
+      selectedColor: strongest
+    };
+  }
+  const ink = nearestHoldingStep(accentColor, steps, lum => (0, import_colorRules.contrastRatio)(lum, tintLum) >= import_colorRules.aaTextContrastRatio);
+  return {
+    selectedBackground: tint,
+    selectedColor: ink
+  };
+}
+const switchStateContrastRatio = 1.5;
+const switchRaisedAlphas = [0.16, 0.2, 0.24, 0.28, 0.32, 0.36, 0.4];
+const switchRaisedAlphaStep = 0.04;
+function raisedGrounds(themes, scheme) {
+  if (scheme === "light") return [];
+  const hues = Object.entries(themes).filter(([name]) => new RegExp(`^${scheme}_[a-z]+$`).test(name)).filter(([name]) => !/_(accent|active)$/.test(name));
+  return [themes[scheme]?.color4, ...hues.map(([, theme]) => theme.color4)].filter(color => typeof color === "string");
+}
+function holdSwitchTrack(themes) {
+  const out = {
+    ...themes
+  };
+  for (const scheme of ["light", "dark"]) {
+    const base = themes[scheme];
+    if (!base) continue;
+    const paint = switchTrackPaint(base, base.accentBackground, base.background, raisedGrounds(themes, scheme));
+    if (paint) out[scheme] = {
+      ...base,
+      ...paint
+    };
+  }
+  return out;
+}
+function switchTrackPaint(base, onFill, ground, raised = []) {
+  const on = luminanceOf(onFill);
+  if (!ground || on === null) return void 0;
+  const alpha = import_colorRules.switchOffFillAlpha[(0, import_colorRules.isLightGround)(ground) ? "light" : "dark"];
+  const target = (0, import_colorRules.systemFillLuminance)(ground, alpha);
+  if (target === null) return void 0;
+  const raisedLums = raised.map(color => luminanceOf(color)).filter(lum => lum !== null);
+  const greys = Array.from({
+    length: 12
+  }, (_, index) => index + 1).map(step => ({
+    color: base[`gray${step}`],
+    lum: luminanceOf(base[`gray${step}`]),
+    hover: base[`gray${Math.max(step - 1, 1)}`],
+    press: base[`gray${Math.min(step + 1, 12)}`]
+  })).filter(entry => entry.lum !== null);
+  const fills = raised[0] ? switchRaisedAlphas.flatMap(fillAlpha => {
+    const color = (0, import_colorRules.systemFillHex)(raised[0], fillAlpha);
+    const hover = (0, import_colorRules.systemFillHex)(raised[0], fillAlpha - switchRaisedAlphaStep);
+    const press = (0, import_colorRules.systemFillHex)(raised[0], fillAlpha + switchRaisedAlphaStep);
+    const lum = luminanceOf(color ?? void 0);
+    return color && hover && press && lum !== null ? [{
+      color,
+      lum,
+      hover,
+      press
+    }] : [];
+  }) : [];
+  const byTarget = (a, b) => Math.abs(a.lum - target) - Math.abs(b.lum - target);
+  const steps = [...greys].sort(byTarget);
+  const inBand = [...greys, ...fills].filter(entry => (0, import_colorRules.inSwitchOffBand)(entry.color, ground)).filter(entry => raisedLums.every(lum => (0, import_colorRules.contrastRatio)(entry.lum, lum) >= import_colorRules.plateContrastRatio)).sort(byTarget);
+  const pick = inBand.find(entry => (0, import_colorRules.contrastRatio)(entry.lum, on) >= switchStateContrastRatio) ?? inBand[0] ?? steps[0];
+  if (!pick) return void 0;
+  return {
+    switchTrackOff: pick.color,
+    switchTrackOffHover: pick.hover,
+    switchTrackOffPress: pick.press
+  };
+}
+const syntaxInkHues = ["purple", "green", "blue", "orange", "red"];
+function mixHex(from, to, share) {
+  const channel = offset => Math.round(Number.parseInt(from.slice(offset, offset + 2), 16) * (1 - share) + Number.parseInt(to.slice(offset, offset + 2), 16) * share).toString(16).padStart(2, "0");
+  return `#${channel(1)}${channel(3)}${channel(5)}`;
+}
+function holdSyntaxFloor(themes) {
+  const out = {
+    ...themes
+  };
+  for (const [name, theme] of Object.entries(themes)) {
+    const surface = luminanceOf(theme.color3);
+    if (surface === null) continue;
+    const ink = {};
+    for (const hue of syntaxInkHues) {
+      const from = theme[`${hue}11`] ? (0, import_colorRules.normalizeToHex)(theme[`${hue}11`]) : null;
+      const to = theme[`${hue}12`] ? (0, import_colorRules.normalizeToHex)(theme[`${hue}12`]) : null;
+      const wash = luminanceOf(theme[`${hue}3`]);
+      if (!from || !to || wash === null) continue;
+      for (let step = 0; step <= 20; step++) {
+        const candidate = mixHex(from, to, step / 20);
+        const lum = (0, import_colorRules.relativeLuminance)(candidate);
+        if ((0, import_colorRules.contrastRatio)(lum, surface) >= import_colorRules.aaTextContrastRatio && (0, import_colorRules.contrastRatio)(lum, wash) >= import_colorRules.aaTextContrastRatio) {
+          ink[`syntax${hue[0].toUpperCase()}${hue.slice(1)}`] = candidate;
+          break;
+        }
+      }
+    }
+    if (Object.keys(ink).length > 0) out[name] = {
+      ...theme,
+      ...ink
+    };
+  }
+  return out;
+}
+const namedInkHues = import_ramps.themeRampHues;
+function holdNamedInkFloor(themes) {
+  const out = {
+    ...themes
+  };
+  for (const [name, theme] of Object.entries(themes)) {
+    const surfaces = [luminanceOf(theme.background), luminanceOf(theme.color3)];
+    if (surfaces.some(surface => surface === null)) continue;
+    const ink = {};
+    for (const hue of namedInkHues) {
+      const from = theme[`${hue}11`] ? (0, import_colorRules.normalizeToHex)(theme[`${hue}11`]) : null;
+      const to = theme[`${hue}12`] ? (0, import_colorRules.normalizeToHex)(theme[`${hue}12`]) : null;
+      if (!from || !to) continue;
+      for (let step = 0; step <= 20; step++) {
+        const candidate = mixHex(from, to, step / 20);
+        const lum = (0, import_colorRules.relativeLuminance)(candidate);
+        if (surfaces.every(surface => (0, import_colorRules.contrastRatio)(lum, surface) >= import_colorRules.aaTextContrastRatio)) {
+          if (step > 0) ink[`${hue}11`] = candidate;
+          break;
+        }
+      }
+    }
+    if (Object.keys(ink).length > 0) out[name] = {
+      ...theme,
+      ...ink
+    };
+  }
+  return out;
+}
+function walkToHoldingInk(step11, step12, holds) {
+  const from = (0, import_colorRules.normalizeToHex)(step11);
+  const to = (0, import_colorRules.normalizeToHex)(step12);
+  if (!from || !to) return null;
+  if (holds((0, import_colorRules.relativeLuminance)(from))) return step11;
+  for (let step = 1; step <= 20; step++) {
+    const candidate = mixHex(from, to, step / 20);
+    if (holds((0, import_colorRules.relativeLuminance)(candidate))) return candidate;
+  }
+  return null;
+}
+function holdFillLabel(preferred, steps, labels, paper) {
+  const preferredLum = luminanceOf(preferred);
+  if (preferredLum === null) return void 0;
+  const labelOn = step => labels.find(label => {
+    const lum = luminanceOf(label);
+    const stepLum = luminanceOf(step);
+    return lum !== null && stepLum !== null && (0, import_colorRules.contrastRatio)(lum, stepLum) >= import_colorRules.aaTextContrastRatio && Math.abs((0, import_colorRules.apcaContrast)(label, step)) >= import_colorRules.fillLabelLc;
+  });
+  let best;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (const step of [preferred, ...steps]) {
+    const lum = luminanceOf(step);
+    if (step === void 0 || lum === null || (0, import_colorRules.contrastRatio)(lum, paper) < import_colorRules.minContrastRatio) continue;
+    const label = labelOn(step);
+    const distance = Math.abs(lum - preferredLum);
+    if (label && distance < bestDistance) {
+      bestDistance = distance;
+      best = {
+        fill: step,
+        label
+      };
+    }
+  }
+  return best;
+}
+function holdColorThemeAccent(themes) {
+  const out = {
+    ...themes
+  };
+  for (const scheme of ["light", "dark"]) {
+    const base = themes[scheme];
+    if (!base) continue;
+    for (const hue of childrenHues) {
+      const scopeName = `${scheme}_${hue}`;
+      const scope = themes[scopeName];
+      const ramp = Array.from({
+        length: 12
+      }, (_, index) => base[`${hue}${index + 1}`]);
+      if (!scope || ramp.some(step => !step)) continue;
+      const paper = luminanceOf(scope.color1);
+      const ink = luminanceOf(scope.color12);
+      const surfaces = [scope.color1, scope.color2, scope.color3, scope.color4].map(luminanceOf);
+      if (paper === null || ink === null || surfaces.some(lum => lum === null)) continue;
+      const labels = [scope.color1, scope.color12].sort((a, b) => luminanceOf(b) - luminanceOf(a));
+      const solid = holdFillLabel(ramp[8], ramp.slice(0, 11), labels, paper);
+      const holdsInk = lum => surfaces.every(surface => (0, import_colorRules.contrastRatio)(lum, surface) >= import_colorRules.aaTextContrastRatio);
+      const fill = solid?.fill ?? nearestHoldingStep(ramp[8], ramp.slice(0, 11), lum => Math.max((0, import_colorRules.contrastRatio)(lum, paper), (0, import_colorRules.contrastRatio)(lum, ink)) >= import_colorRules.aaTextContrastRatio && (0, import_colorRules.contrastRatio)(lum, paper) >= import_colorRules.minContrastRatio);
+      const accentInk = walkToHoldingInk(ramp[10], ramp[11], holdsInk) ?? nearestHoldingStep(ramp[10], ramp, holdsInk);
+      const fillStep = ramp.indexOf(fill);
+      const fillHover = ramp[Math.min(fillStep + 1, ramp.length - 1)];
+      const onFill = solid?.label ?? (0, import_colorRules.holdInkFloor)(fill, (0, import_colorRules.pickReadableForeground)(fill, scope.color1, scope.color12));
+      const accent = {
+        accentBackground: fill,
+        accentColor: accentInk,
+        ...selectedPaint(scope, ramp, accentInk)
+      };
+      const rootOn = luminanceOf(base.switchTrackOff);
+      const fillLum = luminanceOf(fill);
+      const rootHolds = rootOn === null || fillLum === null || (0, import_colorRules.contrastRatio)(rootOn, fillLum) >= switchStateContrastRatio;
+      const track = rootHolds ? void 0 : switchTrackPaint(base, fill, scope.background, (0, import_colorRules.isLightGround)(scope.background) ? [] : [scope.color4]);
+      for (const [name, theme] of Object.entries(themes)) {
+        if (name === scopeName) {
+          out[name] = {
+            ...theme,
+            ...accent,
+            ...track
+          };
+        } else if (name.startsWith(`${scopeName}_`)) {
+          const owned = Object.keys(accent).filter(key => key in theme);
+          if (owned.length > 0) {
+            out[name] = {
+              ...theme,
+              ...Object.fromEntries(owned.map(key => [key, accent[key]]))
+            };
+          }
+        }
+      }
+      out[`${scopeName}_accent`] = {
+        background: fill,
+        backgroundHover: fillHover,
+        backgroundPress: fillHover,
+        backgroundFocus: fillHover,
+        backgroundActive: fill,
+        borderColor: fill,
+        borderColorHover: fillHover,
+        borderColorFocus: fillHover,
+        borderColorPress: fillHover,
+        color: onFill,
+        colorHover: onFill,
+        colorPress: onFill,
+        colorFocus: onFill,
+        placeholderColor: onFill,
+        boundaryColor: onFill,
+        outlineColor: onFill,
+        color10: onFill,
+        color11: onFill,
+        color12: onFill,
+        textMuted: onFill,
+        accentBackground: onFill,
+        accentColor: onFill
+      };
+    }
+  }
+  return out;
+}
+const defaultLightShadows = {
+  shadow1: "rgba(0,0,0,0.04)",
+  shadow2: "rgba(0,0,0,0.08)",
+  shadow3: "rgba(0,0,0,0.12)",
+  shadow4: "rgba(0,0,0,0.22)",
+  shadow5: "rgba(0,0,0,0.33)",
+  shadow6: "rgba(0,0,0,0.44)"
+};
+const defaultDarkShadows = {
+  shadow1: "rgba(0,0,0,0.15)",
+  shadow2: "rgba(0,0,0,0.23)",
+  shadow3: "rgba(0,0,0,0.33)",
+  shadow4: "rgba(0,0,0,0.45)",
+  shadow5: "rgba(0,0,0,0.65)",
+  shadow6: "rgba(0,0,0,0.8)"
+};
+const childrenHues = ["blue", "red", "green", "yellow", "orange", "pink", "purple", "gray"];
+function holdFocusRingAccent(themes) {
+  const out = {
+    ...themes
+  };
+  for (const scheme of ["light", "dark"]) {
+    const base = themes[scheme];
+    if (!base) continue;
+    const grounds = [base.color1, base.color2].map(luminanceOf);
+    if (grounds.some(lum => lum === null)) continue;
+    const holds = color => {
+      const lum = luminanceOf(color);
+      return lum !== null && isChromatic(color) && grounds.every(ground => (0, import_colorRules.contrastRatio)(lum, ground) >= import_colorRules.minContrastRatio);
+    };
+    const rootRing = [base.accentColor, themes[`${scheme}_blue`]?.accentColor].find(holds);
+    for (const [name, theme] of Object.entries(themes)) {
+      if (name !== scheme && !name.startsWith(`${scheme}_`)) continue;
+      if (theme.outlineColor === void 0) continue;
+      const parts = name.split("_");
+      if (parts.includes("accent")) continue;
+      const hue = childrenHues.includes(parts[1] ?? "") ? parts[1] : void 0;
+      const scopeInk = hue ? themes[`${scheme}_${hue}`]?.accentColor : void 0;
+      const ring = holds(scopeInk) ? scopeInk : rootRing;
+      if (!ring || ring === theme.outlineColor) continue;
+      out[name] = {
+        ...theme,
+        outlineColor: ring
+      };
+    }
+  }
+  return out;
+}
+function isChromatic(color) {
+  const hex = color ? (0, import_colorRules.normalizeToHex)(color) : null;
+  if (!hex) return false;
+  const channels = [1, 3, 5].map(index => Number.parseInt(hex.slice(index, index + 2), 16));
+  return Math.max(...channels) - Math.min(...channels) >= 24;
+}
+function createThemesBuilder(baseTheme, accentTheme, options) {
+  const getTheme = options?.getTheme ? sanitizeGetTheme(options.getTheme) : void 0;
+  const base = {
+    palette: {
+      dark: baseTheme.darkPalette,
+      light: baseTheme.lightPalette
+    },
+    extra: {
+      light: {
+        ...Object.assign({}, ...Object.values(import_v5.defaultChildrenThemes).map(theme => theme.light)),
+        ...baseTheme.lightShadows,
+        shadowColor: baseTheme.lightShadows?.shadow3 || defaultLightShadows.shadow3
+      },
+      dark: {
+        ...Object.assign({}, ...Object.values(import_v5.defaultChildrenThemes).map(theme => theme.dark)),
+        ...baseTheme.darkShadows,
+        shadowColor: baseTheme.darkShadows?.shadow3 || defaultDarkShadows.shadow3
+      }
+    }
+  };
+  const childrenThemes = {
+    ...Object.fromEntries(childrenHues.map(name => {
+      const {
+        light,
+        dark
+      } = import_v5.defaultChildrenThemes[name];
+      return [name, {
+        palette: {
+          light: Object.values(light),
+          dark: Object.values(dark)
+        }
+      }];
+    })),
+    warning: {
+      palette: {
+        dark: Object.values(Colors.yellowDark),
+        light: withIntentInkFloor(Object.values(Colors.yellow), intentInkFloor.warning)
+      }
+    },
+    error: {
+      palette: {
+        dark: Object.values(Colors.redDark),
+        light: Object.values(Colors.red)
+      }
+    },
+    success: {
+      palette: {
+        dark: Object.values(Colors.greenDark),
+        light: withIntentInkFloor(Object.values(Colors.green), intentInkFloor.success)
+      }
+    }
+  };
+  const createThemesProps = {
+    templates: houseTemplates,
+    componentThemes: options?.componentThemes ?? houseComponentThemes,
+    grandChildrenThemes: options?.grandChildrenThemes ?? houseGrandChildrenThemes,
+    base,
+    childrenThemes,
+    accent: {
+      palette: {
+        dark: accentTheme.darkPalette,
+        light: accentTheme.lightPalette
+      }
+    }
+  };
+  if (getTheme) {
+    createThemesProps.getTheme = getTheme;
+  }
+  const initialTheme = (0, import_theme_builder.createThemes)(createThemesProps);
+  const themes = holdFocusRingAccent(holdColorThemeAccent(holdSwitchTrack(holdSyntaxFloor(holdNamedInkFloor(holdSelectedState(holdAccentFloor(holdSelectionSurface(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))))))))));
+  return {
+    themes() {
+      return themes;
+    },
+    addTheme(name, theme) {
+      const addThemeProps = {
+        templates: houseTemplates,
+        componentThemes: options?.componentThemes ?? houseComponentThemes,
+        grandChildrenThemes: options?.grandChildrenThemes ?? houseGrandChildrenThemes,
+        base,
+        childrenThemes,
+        accent: {
+          palette: {
+            dark: theme.darkPalette,
+            light: theme.lightPalette
+          }
+        }
+      };
+      if (getTheme) {
+        addThemeProps.getTheme = getTheme;
+      }
+      const createdTheme = (0, import_theme_builder.createThemes)(addThemeProps);
+      return {
+        [`dark_${name}`]: createdTheme.dark_accent,
+        [`light_${name}`]: createdTheme.light_accent
+      };
+    }
+  };
+}