@multiplatform.one/theme 8.3.0 → 8.5.0

package/dist/cjs/theme/createThemes.cjs

@@ -37,6 +37,7 @@ __export(createThemes_exports, {
   houseComponentThemes: () => houseComponentThemes,
   houseGrandChildrenThemes: () => houseGrandChildrenThemes,
   houseTemplates: () => houseTemplates,
+  postPassThemeKeys: () => postPassThemeKeys,
   tintHueNames: () => import_tintHues.tintHueNames
 });
 module.exports = __toCommonJS(createThemes_exports);
@@ -47,6 +48,7 @@ var import_colorRules = require("./colorRules.cjs");
 var import_builderOptions = require("./defaults/builderOptions.cjs");
 var import_ramps = require("./ramps.cjs");
 var import_accentInk = require("./accentInk.cjs");
+var import_dedupeInherited = require("./dedupeInherited.cjs");
 var import_tintHues = require("./tintHues.cjs");
 const intentInkFloor = {
   /** Stored hsla(41, 99%, 30%, 1); 4.54:1 on $color2, dE76 2.54. */
@@ -68,9 +70,34 @@ const lightSurfaceGrouped = {
   backgroundFocus: import_theme_builder.PALETTE_BACKGROUND_OFFSET,
   backgroundActive: import_theme_builder.PALETTE_BACKGROUND_OFFSET
 };
+const fillKeys = ["background", "backgroundHover", "backgroundPress", "backgroundFocus", "backgroundActive"];
+const edgeKeys = ["borderColor", "borderColorHover", "borderColorFocus", "borderColorPress"];
+function liftOneStep(template) {
+  const lifted = {
+    ...template
+  };
+  for (const key of [...fillKeys, ...edgeKeys]) lifted[key] = template[key] + 1;
+  return lifted;
+}
+const darkSurfaceGrouped = {
+  ...liftOneStep(import_v5.v5Templates.dark_surface1),
+  selectFill: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 4,
+  selectPress: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 5
+};
+const darkBasePage = {
+  ...import_v5.v5Templates.dark_base,
+  background: import_theme_builder.PALETTE_BACKGROUND_OFFSET,
+  backgroundActive: import_theme_builder.PALETTE_BACKGROUND_OFFSET,
+  backgroundFocus: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 1,
+  backgroundHover: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 1,
+  backgroundPress: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 1
+};
 const houseTemplates = {
   ...import_v5.v5Templates,
-  light_surface1: lightSurfaceGrouped
+  light_surface1: lightSurfaceGrouped,
+  dark_base: darkBasePage,
+  dark_surface1: darkSurfaceGrouped,
+  dark_surface2: liftOneStep(import_v5.v5Templates.dark_surface2)
 };
 const houseComponentThemes = {
   Button: {
@@ -223,7 +250,7 @@ function holdAccentFloor(themes) {
     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);
+    const surfaces = [base.color1, base.color2, base.color3, base.color4, ...(scheme === "dark" ? [base.color5] : [])].map(luminanceOf);
     if (paper === null || ink === null || surfaces.some(lum => lum === null)) continue;
     const steps = Array.from({
       length: 12
@@ -276,12 +303,146 @@ function holdSelectionSurface(themes) {
         color4: held,
         ...(theme.borderColor === scope.color4 ? {
           borderColor: held
+        } : null),
+        ...(theme.selectFill === scope.color4 ? {
+          selectFill: held
         } : null)
       };
     }
   }
   return out;
 }
+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;
+    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)];
+        }
+      }
+      out[name] = {
+        ...out[name],
+        ...moved
+      };
+    }
+  }
+  return out;
+}
+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 rootControl = firstClearing(neutral, [root.background]);
+    if (!rootFields || rootControl < 0) continue;
+    out[scheme] = {
+      ...out[scheme],
+      ...rootFields,
+      borderColorControl: neutral[rootControl],
+      switchTrackOffBorder: scheme === "light" ? neutral[rootControl] : root.switchTrackOff
+    };
+    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)];
+    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];
+      }
+      if (Object.keys(patch).length > 0) out[scopeName] = {
+        ...out[scopeName],
+        ...patch
+      };
+    }
+  }
+  return out;
+}
 const selectedTintContrastRatio = 1.1;
 const neutralSelectedTintContrastRatio = 1.25;
 const achromaticChannelSpread = 8;
@@ -349,7 +510,7 @@ 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");
+  return [themes[scheme], ...hues.map(([, theme]) => theme)].flatMap(theme => [theme?.color4, theme?.color5]).filter(color => typeof color === "string");
 }
 function holdSwitchTrack(themes) {
   const out = {
@@ -358,11 +519,24 @@ function holdSwitchTrack(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));
+    const paint = switchTrackPaint(base, base.accentBackground, (0, import_colorRules.switchOffGround)(base), raisedGrounds(themes, scheme));
     if (paint) out[scheme] = {
       ...base,
       ...paint
     };
+    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]);
+      if (track) out[`${scheme}_${intent}`] = {
+        ...scope,
+        ...track
+      };
+    }
   }
   return out;
 }
@@ -526,7 +700,7 @@ function holdColorThemeAccent(themes) {
       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);
+      const surfaces = [scope.color1, scope.color2, scope.color3, scope.color4, ...(scheme === "dark" ? [scope.color5] : [])].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);
@@ -542,8 +716,9 @@ function holdColorThemeAccent(themes) {
       };
       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]);
+      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]);
       for (const [name, theme] of Object.entries(themes)) {
         if (name === scopeName) {
           out[name] = {
@@ -653,6 +828,34 @@ function holdHouseAccent(themes) {
   }
   return out;
 }
+function holdHouseIdentityInk(themes) {
+  const out = {
+    ...themes
+  };
+  for (const scheme of ["light", "dark"]) {
+    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;
+    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
+        };
+      }
+    }
+  }
+  return out;
+}
 const defaultLightShadows = {
   shadow1: "rgba(0,0,0,0.04)",
   shadow2: "rgba(0,0,0,0.08)",
@@ -707,6 +910,7 @@ function isChromatic(color) {
   const channels = [1, 3, 5].map(index => Number.parseInt(hex.slice(index, index + 2), 16));
   return Math.max(...channels) - Math.min(...channels) >= 24;
 }
+const postPassThemeKeys = ["accentOnSurface", "borderColorControl", "borderColorField", "borderColorFieldHover", "borderColorHairline", "identityInk", "selectedBackground", "selectedColor", "switchTrackOff", "switchTrackOffBorder", "switchTrackOffHover", "switchTrackOffPress"];
 function createThemesBuilder(baseTheme, accentTheme, options) {
   const getTheme = options?.getTheme ? sanitizeGetTheme(options.getTheme) : void 0;
   const base = {
@@ -776,7 +980,7 @@ function createThemesBuilder(baseTheme, accentTheme, options) {
     createThemesProps.getTheme = getTheme;
   }
   const initialTheme = (0, import_theme_builder.createThemes)(createThemesProps);
-  const themes = (0, import_accentInk.withIdentityInk)((0, import_accentInk.withAccentOnSurface)(holdFocusRingAccent(holdHouseAccent(holdColorThemeAccent(holdSwitchTrack(holdSyntaxFloor(holdNamedInkFloor(holdSelectedState(holdAccentFloor(holdSelectionSurface(neutralizeSemanticEntryText(neutralizeTintText(initialTheme)))))))))))));
+  const themes = holdHouseIdentityInk((0, import_accentInk.withIdentityInk)((0, import_accentInk.withAccentOnSurface)(holdFocusRingAccent(holdControlEdges(holdHouseAccent(holdColorThemeAccent(holdSwitchTrack(holdSyntaxFloor(holdNamedInkFloor(holdSelectedState(holdAccentFloor(holdDarkEdges(holdSelectionSurface(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))))))))))))))));
   return {
     themes() {
       return themes;