@multiplatform.one/theme 9.0.1 → 9.0.3

package/dist/cjs/theme/createThemes.cjs

@@ -312,99 +312,149 @@ function holdSelectionSurface(themes) {
   }
   return out;
 }
+function ownerScope(scopes, name) {
+  return scopes.filter(scope => name === scope || name.startsWith(`${scope}_`)).reduce((longest, scope) => scope.length > longest.length ? scope : longest, "");
+}
+function clearsDarkGrounds(color, grounds) {
+  const brightest = Math.max(...grounds);
+  const luminance = luminanceOf(color);
+  return luminance !== null && luminance > brightest && grounds.every(ground => (0, import_colorRules.contrastRatio)(luminance, ground) >= import_builderOptions.darkHairlineContrast);
+}
+function darkHairlineOf(scope) {
+  const ramp = Array.from({
+    length: 12
+  }, (_, index) => scope[`color${index + 1}`]);
+  const grounds = [scope.background, scope.color4].map(color => luminanceOf(color));
+  if (grounds.some(ground => ground === null)) return void 0;
+  const hairline = ramp.findIndex((color, index) => index < 11 && clearsDarkGrounds(color, grounds));
+  return hairline < 0 ? void 0 : {
+    ramp,
+    hairline
+  };
+}
+const darkEdgeStateKeys = ["borderColor", "borderColorHover", "borderColorFocus", "borderColorPress"];
+function darkEdgesOf(name, theme, scopeName, scope, {
+  ramp,
+  hairline
+}) {
+  const medium = hairline + 1;
+  const surface = name === scopeName || theme.background === scope.color4;
+  const step = ramp.indexOf(theme.borderColor);
+  const shift = surface && step >= 0 ? medium - step : 0;
+  const moved = {};
+  if ("borderColorHairline" in theme || name === scopeName) moved.borderColorHairline = ramp[hairline];
+  if (shift <= 0) return moved;
+  for (const key of darkEdgeStateKeys) {
+    const at = ramp.indexOf(theme[key]);
+    if (at >= 0) moved[key] = ramp[Math.min(11, at + shift)];
+  }
+  return moved;
+}
 function holdDarkEdges(themes) {
   const out = {
     ...themes
   };
   const scopes = Object.keys(themes).filter(name => /^dark(_[a-z]+)?$/.test(name));
-  const ownerOf = name => scopes.filter(scope => name === scope || name.startsWith(`${scope}_`)).reduce((longest, scope) => scope.length > longest.length ? scope : longest, "");
   for (const scopeName of scopes) {
     if (/_(accent|active)$/.test(scopeName)) continue;
     const scope = themes[scopeName];
-    const ramp = Array.from({
-      length: 12
-    }, (_, index) => scope[`color${index + 1}`]);
-    const grounds = [scope.background, scope.color4].map(color => luminanceOf(color));
-    if (grounds.some(ground => ground === null)) continue;
-    const brightest = Math.max(...grounds);
-    const clears = color => {
-      const luminance = luminanceOf(color);
-      return luminance !== null && luminance > brightest && grounds.every(ground => (0, import_colorRules.contrastRatio)(luminance, ground) >= import_builderOptions.darkHairlineContrast);
-    };
-    const hairline = ramp.findIndex((color, index) => index < 11 && clears(color));
-    if (hairline < 0) continue;
-    const medium = hairline + 1;
+    const pick = darkHairlineOf(scope);
+    if (!pick) continue;
     for (const [name, theme] of Object.entries(themes)) {
-      if (ownerOf(name) !== scopeName) continue;
-      const surface = name === scopeName || theme.background === scope.color4;
-      const step = ramp.indexOf(theme.borderColor);
-      const shift = surface && step >= 0 ? medium - step : 0;
-      const moved = {};
-      if ("borderColorHairline" in theme || name === scopeName) moved.borderColorHairline = ramp[hairline];
-      if (shift > 0) {
-        for (const key of ["borderColor", "borderColorHover", "borderColorFocus", "borderColorPress"]) {
-          const at = ramp.indexOf(theme[key]);
-          if (at >= 0) moved[key] = ramp[Math.min(11, at + shift)];
-        }
-      }
+      if (ownerScope(scopes, name) !== scopeName) continue;
       out[name] = {
         ...out[name],
-        ...moved
+        ...darkEdgesOf(name, theme, scopeName, scope, pick)
       };
     }
   }
   return out;
 }
+function firstClearing(neutral, grounds) {
+  const lums = grounds.map(ground => luminanceOf(ground));
+  if (lums.some(lum => lum === null)) return -1;
+  const darkest = Math.min(...lums);
+  const brightest = Math.max(...lums);
+  const light = (0, import_colorRules.isLightGround)(grounds[0]);
+  return neutral.findIndex(color => {
+    const lum = luminanceOf(color);
+    return lum !== null && (light ? lum < darkest : lum > brightest) && lums.every(ground => (0, import_colorRules.contrastRatio)(lum, ground) >= import_colorRules.minContrastRatio);
+  });
+}
+function inheritedValue(out, themes, name, key) {
+  for (let at = name; at; at = at.slice(0, Math.max(0, at.lastIndexOf("_")))) {
+    const value = (out[at] ?? themes[at])?.[key];
+    if (value !== void 0) return value;
+    if (!at.includes("_")) break;
+  }
+  return void 0;
+}
+function nearestStep(ramp, color) {
+  const lum = luminanceOf(color);
+  if (lum === null) return -1;
+  return ramp.reduce((best, step, index) => Math.abs((luminanceOf(step) ?? 2) - lum) < Math.abs((luminanceOf(ramp[best]) ?? 2) - lum) ? index : best, 0);
+}
+function fieldEdgesOf(themes, out, neutral, scopeName) {
+  const scope = themes[scopeName];
+  const field = `${scopeName}_Input`;
+  const edge = firstClearing(neutral, [scope.background, inheritedValue(out, themes, field, "background")]);
+  if (edge < 0) return void 0;
+  const ramp = Array.from({
+    length: 12
+  }, (_, index) => scope[`color${index + 1}`]);
+  const rest = nearestStep(ramp, inheritedValue(out, themes, field, "borderColor"));
+  const hover = nearestStep(ramp, inheritedValue(out, themes, field, "borderColorHover"));
+  return {
+    borderColorField: neutral[edge],
+    borderColorFieldHover: neutral[Math.min(11, Math.max(edge, edge + hover - rest))]
+  };
+}
+function intentFieldEdges(themes, out, scopeName, pages) {
+  const scope = themes[scopeName];
+  const field = `${scopeName}_Input`;
+  const ramp = Array.from({
+    length: 12
+  }, (_, index) => scope[`color${index + 1}`]);
+  const edge = firstClearing(ramp, [...pages, inheritedValue(out, themes, field, "background")]);
+  if (edge < 0) return {
+    borderColorField: inheritedValue(out, themes, field, "borderColor"),
+    borderColorFieldHover: inheritedValue(out, themes, field, "borderColorHover")
+  };
+  return {
+    borderColorField: ramp[edge],
+    borderColorFieldHover: ramp[Math.min(11, edge + 1)]
+  };
+}
+function controlEdgePatch(themes, out, scopeName, {
+  scheme,
+  neutral,
+  pages,
+  rootFields,
+  rootControl
+}) {
+  const scope = themes[scopeName];
+  const patch = {};
+  if (scheme === "dark" && "switchTrackOff" in scope) patch.switchTrackOffBorder = scope.switchTrackOff;
+  if (semanticIntentNames.has(scopeName.slice(scheme.length + 1))) return Object.assign(patch, intentFieldEdges(themes, out, scopeName, pages));
+  const fields = fieldEdgesOf(themes, out, neutral, scopeName);
+  if (fields) {
+    for (const [key, value] of Object.entries(fields)) if (value !== rootFields[key]) patch[key] = value;
+  }
+  const control = firstClearing(neutral, [scope.background]);
+  if (control >= 0 && control !== rootControl) patch.borderColorControl = neutral[control];
+  return patch;
+}
 function holdControlEdges(themes) {
   const out = {
     ...themes
   };
-  const firstClearing = (neutral, grounds) => {
-    const lums = grounds.map(ground => luminanceOf(ground));
-    if (lums.some(lum => lum === null)) return -1;
-    const darkest = Math.min(...lums);
-    const brightest = Math.max(...lums);
-    const light = (0, import_colorRules.isLightGround)(grounds[0]);
-    return neutral.findIndex(color => {
-      const lum = luminanceOf(color);
-      return lum !== null && (light ? lum < darkest : lum > brightest) && lums.every(ground => (0, import_colorRules.contrastRatio)(lum, ground) >= import_colorRules.minContrastRatio);
-    });
-  };
-  const resolved = (name, key) => {
-    for (let at = name; at; at = at.slice(0, Math.max(0, at.lastIndexOf("_")))) {
-      const value = (out[at] ?? themes[at])?.[key];
-      if (value !== void 0) return value;
-      if (!at.includes("_")) break;
-    }
-    return void 0;
-  };
   for (const scheme of ["light", "dark"]) {
     const root = themes[scheme];
     if (!root) continue;
     const neutral = Array.from({
       length: 12
     }, (_, index) => root[`color${index + 1}`]);
-    const fieldEdges = scopeName => {
-      const scope = themes[scopeName];
-      const field = `${scopeName}_Input`;
-      const edge = firstClearing(neutral, [scope.background, resolved(field, "background")]);
-      if (edge < 0) return void 0;
-      const ramp = Array.from({
-        length: 12
-      }, (_, index) => scope[`color${index + 1}`]);
-      const stepOf = color => {
-        const lum = luminanceOf(color);
-        if (lum === null) return -1;
-        return ramp.reduce((best, step, index) => Math.abs((luminanceOf(step) ?? 2) - lum) < Math.abs((luminanceOf(ramp[best]) ?? 2) - lum) ? index : best, 0);
-      };
-      const rest = stepOf(resolved(field, "borderColor"));
-      const hover = stepOf(resolved(field, "borderColorHover"));
-      return {
-        borderColorField: neutral[edge],
-        borderColorFieldHover: neutral[Math.min(11, Math.max(edge, edge + hover - rest))]
-      };
-    };
-    const rootFields = fieldEdges(scheme);
+    const rootFields = fieldEdgesOf(themes, out, neutral, scheme);
     const rootControl = firstClearing(neutral, [root.background]);
     if (!rootFields || rootControl < 0) continue;
     out[scheme] = {
@@ -415,26 +465,15 @@ function holdControlEdges(themes) {
     };
     const scopes = Object.keys(themes).filter(name => new RegExp(`^${scheme}_[a-z]+$`).test(name) && !/_(accent|active)$/.test(name));
     const pages = [root.background, ...scopes.filter(name => !semanticIntentNames.has(name.slice(scheme.length + 1))).map(name => themes[name].background)];
+    const context = {
+      scheme,
+      neutral,
+      pages,
+      rootFields,
+      rootControl
+    };
     for (const scopeName of scopes) {
-      const scope = themes[scopeName];
-      const patch = {};
-      if (scheme === "dark" && "switchTrackOff" in scope) patch.switchTrackOffBorder = scope.switchTrackOff;
-      if (semanticIntentNames.has(scopeName.slice(scheme.length + 1))) {
-        const field = `${scopeName}_Input`;
-        const ramp = Array.from({
-          length: 12
-        }, (_, index) => scope[`color${index + 1}`]);
-        const edge = firstClearing(ramp, [...pages, resolved(field, "background")]);
-        patch.borderColorField = edge < 0 ? resolved(field, "borderColor") : ramp[edge];
-        patch.borderColorFieldHover = edge < 0 ? resolved(field, "borderColorHover") : ramp[Math.min(11, edge + 1)];
-      } else {
-        const fields = fieldEdges(scopeName);
-        if (fields) {
-          for (const [key, value] of Object.entries(fields)) if (value !== rootFields[key]) patch[key] = value;
-        }
-        const control = firstClearing(neutral, [scope.background]);
-        if (control >= 0 && control !== rootControl) patch.borderColorControl = neutral[control];
-      }
+      const patch = controlEdgePatch(themes, out, scopeName, context);
       if (Object.keys(patch).length > 0) out[scopeName] = {
         ...out[scopeName],
         ...patch
@@ -527,11 +566,7 @@ function holdSwitchTrack(themes) {
     if (scheme !== "dark" || !paint) continue;
     for (const intent of semanticIntentNames) {
       const scope = themes[`${scheme}_${intent}`];
-      const off = luminanceOf(paint.switchTrackOff);
-      if (!scope?.color4 || !scope.color5 || off === null) continue;
-      const holds = (0, import_colorRules.inSwitchOffBand)(paint.switchTrackOff, scope.color4) && [scope.color4, scope.color5].every(ground => (0, import_colorRules.contrastRatio)(off, luminanceOf(ground) ?? off) >= import_colorRules.plateContrastRatio);
-      if (holds) continue;
-      const track = switchTrackPaint(base, scope.accentBackground ?? base.accentBackground, scope.color4, [base.color4, scope.color4, scope.color5]);
+      const track = intentSwitchTrack(base, scope, paint);
       if (track) out[`${scheme}_${intent}`] = {
         ...scope,
         ...track
@@ -540,6 +575,13 @@ function holdSwitchTrack(themes) {
   }
   return out;
 }
+function intentSwitchTrack(base, scope, paint) {
+  const off = luminanceOf(paint.switchTrackOff);
+  if (!scope?.color4 || !scope.color5 || off === null) return void 0;
+  const holds = (0, import_colorRules.inSwitchOffBand)(paint.switchTrackOff, scope.color4) && [scope.color4, scope.color5].every(ground => (0, import_colorRules.contrastRatio)(off, luminanceOf(ground) ?? off) >= import_colorRules.plateContrastRatio);
+  if (holds) return void 0;
+  return switchTrackPaint(base, scope.accentBackground ?? base.accentBackground, scope.color4, [base.color4, scope.color4, scope.color5]);
+}
 function switchTrackPaint(base, onFill, ground, raised = []) {
   const on = luminanceOf(onFill);
   if (!ground || on === null) return void 0;
@@ -718,7 +760,8 @@ function holdColorThemeAccent(themes) {
       const fillLum = luminanceOf(fill);
       const switchGround = (0, import_colorRules.switchOffGround)(scope) ?? scope.background;
       const rootHolds = rootOn === null || fillLum === null || (0, import_colorRules.contrastRatio)(rootOn, fillLum) >= switchStateContrastRatio && (0, import_colorRules.inSwitchOffBand)(base.switchTrackOff, switchGround) && ((0, import_colorRules.isLightGround)(scope.background) ? [] : [scope.color4, scope.color5]).every(ground => (0, import_colorRules.contrastRatio)(rootOn, luminanceOf(ground) ?? rootOn) >= import_colorRules.plateContrastRatio);
-      const track = rootHolds ? void 0 : switchTrackPaint(base, fill, switchGround, (0, import_colorRules.isLightGround)(scope.background) ? [] : [base.color4, scope.color4, scope.color5]);
+      const trackGrounds = (0, import_colorRules.isLightGround)(scope.background) ? [] : [base.color4, scope.color4, scope.color5];
+      const track = rootHolds ? void 0 : switchTrackPaint(base, fill, switchGround, trackGrounds);
       for (const [name, theme] of Object.entries(themes)) {
         if (name === scopeName) {
           out[name] = {
@@ -836,26 +879,29 @@ function holdHouseIdentityInk(themes) {
     const base = themes[scheme];
     const blueInk = themes[`${scheme}_blue`]?.identityInk;
     if (!base?.identityInk || !blueInk || base.identityInk === blueInk) continue;
-    const held = Array.from({
-      length: 12
-    }, (_, index) => index + 1).every(step => base[`accent${step}`] !== void 0 && base[`accent${step}`] === base[`blue${step}`]);
-    if (!held) continue;
+    if (!accentIsBlue(base)) continue;
     for (const [name, theme] of Object.entries(themes)) {
-      if (name !== scheme && !name.startsWith(`${scheme}_`)) continue;
-      const scope = name.split("_")[1];
-      if (scope === "accent" || childrenHues.includes(scope)) continue;
-      if (theme.identityInk !== base.identityInk) continue;
-      const values = (0, import_dedupeInherited.resolveThemeThroughParents)(themes, name);
-      if ((0, import_accentInk.pickIdentityInk)([blueInk], (0, import_accentInk.pageSurfaces)(name, values)) === blueInk) {
-        out[name] = {
-          ...theme,
-          identityInk: blueInk
-        };
-      }
+      if (takesBlueInk(themes, scheme, name, theme, base, blueInk)) out[name] = {
+        ...theme,
+        identityInk: blueInk
+      };
     }
   }
   return out;
 }
+function accentIsBlue(base) {
+  return Array.from({
+    length: 12
+  }, (_, index) => index + 1).every(step => base[`accent${step}`] !== void 0 && base[`accent${step}`] === base[`blue${step}`]);
+}
+function takesBlueInk(themes, scheme, name, theme, base, blueInk) {
+  if (name !== scheme && !name.startsWith(`${scheme}_`)) return false;
+  const scope = name.split("_")[1];
+  if (scope === "accent" || childrenHues.includes(scope)) return false;
+  if (theme.identityInk !== base.identityInk) return false;
+  const values = (0, import_dedupeInherited.resolveThemeThroughParents)(themes, name);
+  return (0, import_accentInk.pickIdentityInk)([blueInk], (0, import_accentInk.pageSurfaces)(name, values)) === blueInk;
+}
 const defaultLightShadows = {
   shadow1: "rgba(0,0,0,0.04)",
   shadow2: "rgba(0,0,0,0.08)",