@multiplatform.one/theme 8.3.0 → 8.5.0

package/dist/cjs/theme/createThemes.native.js

@@ -39,6 +39,7 @@ __export(createThemes_exports, {
   houseComponentThemes: () => houseComponentThemes,
   houseGrandChildrenThemes: () => houseGrandChildrenThemes,
   houseTemplates: () => houseTemplates,
+  postPassThemeKeys: () => postPassThemeKeys,
   tintHueNames: () => import_tintHues.tintHueNames
 });
 module.exports = __toCommonJS(createThemes_exports);
@@ -49,6 +50,7 @@ var import_colorRules = require("./colorRules.native.js");
 var import_builderOptions = require("./defaults/builderOptions.native.js");
 var import_ramps = require("./ramps.native.js");
 var import_accentInk = require("./accentInk.native.js");
+var import_dedupeInherited = require("./dedupeInherited.native.js");
 var import_tintHues = require("./tintHues.native.js");
 var intentInkFloor = {
   /** Stored hsla(41, 99%, 30%, 1); 4.54:1 on $color2, dE76 2.54. */
@@ -70,9 +72,37 @@ var lightSurfaceGrouped = {
   backgroundFocus: import_theme_builder.PALETTE_BACKGROUND_OFFSET,
   backgroundActive: import_theme_builder.PALETTE_BACKGROUND_OFFSET
 };
+var fillKeys = ["background", "backgroundHover", "backgroundPress", "backgroundFocus", "backgroundActive"];
+var edgeKeys = ["borderColor", "borderColorHover", "borderColorFocus", "borderColorPress"];
+function liftOneStep(template) {
+  var lifted = {
+    ...template
+  };
+  for (var _i = 0, _iter = [...fillKeys, ...edgeKeys]; _i < _iter.length; _i++) {
+    var key = _iter[_i];
+    lifted[key] = template[key] + 1;
+  }
+  return lifted;
+}
+var darkSurfaceGrouped = {
+  ...liftOneStep(import_v5.v5Templates.dark_surface1),
+  selectFill: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 4,
+  selectPress: import_theme_builder.PALETTE_BACKGROUND_OFFSET + 5
+};
+var 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
+};
 var houseTemplates = {
   ...import_v5.v5Templates,
-  light_surface1: lightSurfaceGrouped
+  light_surface1: lightSurfaceGrouped,
+  dark_base: darkBasePage,
+  dark_surface1: darkSurfaceGrouped,
+  dark_surface2: liftOneStep(import_v5.v5Templates.dark_surface2)
 };
 var houseComponentThemes = {
   Button: {
@@ -337,7 +367,7 @@ function holdAccentFloor(themes) {
     if (!(base === null || base === void 0 ? void 0 : base.accentBackground) || !base.accentColor) return "continue";
     var paper = luminanceOf(base.color1);
     var ink = luminanceOf(base.color12);
-    var surfaces = [base.color1, base.color2, base.color3, base.color4].map(luminanceOf);
+    var surfaces = [base.color1, base.color2, base.color3, base.color4, ...(scheme === "dark" ? [base.color5] : [])].map(luminanceOf);
     if (paper === null || ink === null || surfaces.some(function (lum) {
       return lum === null;
     })) return "continue";
@@ -441,6 +471,9 @@ function holdSelectionSurface(themes) {
             color4: held,
             ...(theme.borderColor === scope.color4 ? {
               borderColor: held
+            } : null),
+            ...(theme.selectFill === scope.color4 ? {
+              selectFill: held
             } : null)
           };
         }
@@ -476,6 +509,261 @@ function holdSelectionSurface(themes) {
   }
   return out;
 }
+function holdDarkEdges(themes) {
+  var out = {
+    ...themes
+  };
+  var scopes = Object.keys(themes).filter(function (name) {
+    return /^dark(_[a-z]+)?$/.test(name);
+  });
+  var ownerOf = function ownerOf2(name) {
+    return scopes.filter(function (scope) {
+      return name === scope || name.startsWith(`${scope}_`);
+    }).reduce(function (longest, scope) {
+      return scope.length > longest.length ? scope : longest;
+    }, "");
+  };
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    var _loop = function () {
+      var scopeName = _step.value;
+      if (/_(accent|active)$/.test(scopeName)) return "continue";
+      var scope = themes[scopeName];
+      var ramp = Array.from({
+        length: 12
+      }, function (_, index) {
+        return scope[`color${index + 1}`];
+      });
+      var grounds = [scope.background, scope.color4].map(function (color) {
+        return luminanceOf(color);
+      });
+      if (grounds.some(function (ground) {
+        return ground === null;
+      })) return "continue";
+      var brightest = Math.max(...grounds);
+      var clears = function clears2(color) {
+        var luminance = luminanceOf(color);
+        return luminance !== null && luminance > brightest && grounds.every(function (ground) {
+          return (0, import_colorRules.contrastRatio)(luminance, ground) >= import_builderOptions.darkHairlineContrast;
+        });
+      };
+      var hairline = ramp.findIndex(function (color, index) {
+        return index < 11 && clears(color);
+      });
+      if (hairline < 0) return "continue";
+      var medium = hairline + 1;
+      var _iteratorNormalCompletion2 = true,
+        _didIteratorError2 = false,
+        _iteratorError2 = void 0;
+      try {
+        for (var _iterator2 = Object.entries(themes)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion2 = (_step1 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          var [name, theme] = _step1.value;
+          if (ownerOf(name) !== scopeName) continue;
+          var surface = name === scopeName || theme.background === scope.color4;
+          var step = ramp.indexOf(theme.borderColor);
+          var shift = surface && step >= 0 ? medium - step : 0;
+          var moved = {};
+          if ("borderColorHairline" in theme || name === scopeName) moved.borderColorHairline = ramp[hairline];
+          if (shift > 0) {
+            for (var _i = 0, _iter = ["borderColor", "borderColorHover", "borderColorFocus", "borderColorPress"]; _i < _iter.length; _i++) {
+              var key = _iter[_i];
+              var at = ramp.indexOf(theme[key]);
+              if (at >= 0) moved[key] = ramp[Math.min(11, at + shift)];
+            }
+          }
+          out[name] = {
+            ...out[name],
+            ...moved
+          };
+        }
+      } catch (err) {
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+            _iterator2.return();
+          }
+        } finally {
+          if (_didIteratorError2) {
+            throw _iteratorError2;
+          }
+        }
+      }
+    };
+    for (var _iterator = scopes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return out;
+}
+function holdControlEdges(themes) {
+  var _loop = function (_i2, _iter2) {
+    var scheme = _iter2[_i2];
+    var root = themes[scheme];
+    if (!root) return "continue";
+    var neutral = Array.from({
+      length: 12
+    }, function (_, index) {
+      return root[`color${index + 1}`];
+    });
+    var fieldEdges = function fieldEdges2(scopeName) {
+      var scope = themes[scopeName];
+      var field = `${scopeName}_Input`;
+      var edge = firstClearing(neutral, [scope.background, resolved(field, "background")]);
+      if (edge < 0) return void 0;
+      var ramp = Array.from({
+        length: 12
+      }, function (_, index) {
+        return scope[`color${index + 1}`];
+      });
+      var stepOf = function stepOf2(color) {
+        var lum = luminanceOf(color);
+        if (lum === null) return -1;
+        return ramp.reduce(function (best, step, index) {
+          var _luminanceOf, _luminanceOf1;
+          return Math.abs(((_luminanceOf = luminanceOf(step)) !== null && _luminanceOf !== void 0 ? _luminanceOf : 2) - lum) < Math.abs(((_luminanceOf1 = luminanceOf(ramp[best])) !== null && _luminanceOf1 !== void 0 ? _luminanceOf1 : 2) - lum) ? index : best;
+        }, 0);
+      };
+      var rest = stepOf(resolved(field, "borderColor"));
+      var hover = stepOf(resolved(field, "borderColorHover"));
+      return {
+        borderColorField: neutral[edge],
+        borderColorFieldHover: neutral[Math.min(11, Math.max(edge, edge + hover - rest))]
+      };
+    };
+    var rootFields = fieldEdges(scheme);
+    var rootControl = firstClearing(neutral, [root.background]);
+    if (!rootFields || rootControl < 0) return "continue";
+    out[scheme] = {
+      ...out[scheme],
+      ...rootFields,
+      borderColorControl: neutral[rootControl],
+      switchTrackOffBorder: scheme === "light" ? neutral[rootControl] : root.switchTrackOff
+    };
+    var scopes = Object.keys(themes).filter(function (name) {
+      return new RegExp(`^${scheme}_[a-z]+$`).test(name) && !/_(accent|active)$/.test(name);
+    });
+    var pages = [root.background, ...scopes.filter(function (name) {
+      return !semanticIntentNames.has(name.slice(scheme.length + 1));
+    }).map(function (name) {
+      return themes[name].background;
+    })];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      var _loop2 = function () {
+        var scopeName = _step.value;
+        var scope = themes[scopeName];
+        var patch = {};
+        if (scheme === "dark" && "switchTrackOff" in scope) patch.switchTrackOffBorder = scope.switchTrackOff;
+        if (semanticIntentNames.has(scopeName.slice(scheme.length + 1))) {
+          var field = `${scopeName}_Input`;
+          var ramp = Array.from({
+            length: 12
+          }, function (_, index) {
+            return scope[`color${index + 1}`];
+          });
+          var 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 {
+          var fields = fieldEdges(scopeName);
+          if (fields) {
+            var _iteratorNormalCompletion2 = true,
+              _didIteratorError2 = false,
+              _iteratorError2 = void 0;
+            try {
+              for (var _iterator2 = Object.entries(fields)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion2 = (_step1 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+                var [key, value] = _step1.value;
+                if (value !== rootFields[key]) patch[key] = value;
+              }
+            } catch (err) {
+              _didIteratorError2 = true;
+              _iteratorError2 = err;
+            } finally {
+              try {
+                if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+                  _iterator2.return();
+                }
+              } finally {
+                if (_didIteratorError2) {
+                  throw _iteratorError2;
+                }
+              }
+            }
+          }
+          var 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
+        };
+      };
+      for (var _iterator = scopes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop2();
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+  };
+  var out = {
+    ...themes
+  };
+  var firstClearing = function firstClearing2(neutral, grounds) {
+    var lums = grounds.map(function (ground) {
+      return luminanceOf(ground);
+    });
+    if (lums.some(function (lum) {
+      return lum === null;
+    })) return -1;
+    var darkest = Math.min(...lums);
+    var brightest = Math.max(...lums);
+    var light = (0, import_colorRules.isLightGround)(grounds[0]);
+    return neutral.findIndex(function (color) {
+      var lum = luminanceOf(color);
+      return lum !== null && (light ? lum < darkest : lum > brightest) && lums.every(function (ground) {
+        return (0, import_colorRules.contrastRatio)(lum, ground) >= import_colorRules.minContrastRatio;
+      });
+    });
+  };
+  var resolved = function resolved2(name, key) {
+    for (var at = name; at; at = at.slice(0, Math.max(0, at.lastIndexOf("_")))) {
+      var _out_at;
+      var _this;
+      var value = (_this = (_out_at = out[at]) !== null && _out_at !== void 0 ? _out_at : themes[at]) === null || _this === void 0 ? void 0 : _this[key];
+      if (value !== void 0) return value;
+      if (!at.includes("_")) break;
+    }
+    return void 0;
+  };
+  for (var _i = 0, _iter = ["light", "dark"]; _i < _iter.length; _i++) _loop(_i, _iter);
+  return out;
+}
 var selectedTintContrastRatio = 1.1;
 var neutralSelectedTintContrastRatio = 1.25;
 var achromaticChannelSpread = 8;
@@ -570,7 +858,6 @@ var switchStateContrastRatio = 1.5;
 var switchRaisedAlphas = [0.16, 0.2, 0.24, 0.28, 0.32, 0.36, 0.4];
 var switchRaisedAlphaStep = 0.04;
 function raisedGrounds(themes, scheme) {
-  var _themes_scheme;
   if (scheme === "light") return [];
   var hues = Object.entries(themes).filter(function (param) {
     var [name] = param;
@@ -579,10 +866,12 @@ function raisedGrounds(themes, scheme) {
     var [name] = param;
     return !/_(accent|active)$/.test(name);
   });
-  return [(_themes_scheme = themes[scheme]) === null || _themes_scheme === void 0 ? void 0 : _themes_scheme.color4, ...hues.map(function (param) {
+  return [themes[scheme], ...hues.map(function (param) {
     var [, theme] = param;
-    return theme.color4;
-  })].filter(function (color) {
+    return theme;
+  })].flatMap(function (theme) {
+    return [theme === null || theme === void 0 ? void 0 : theme.color4, theme === null || theme === void 0 ? void 0 : theme.color5];
+  }).filter(function (color) {
     return typeof color === "string";
   });
 }
@@ -594,11 +883,48 @@ function holdSwitchTrack(themes) {
     var scheme = _iter[_i];
     var base = themes[scheme];
     if (!base) continue;
-    var paint = switchTrackPaint(base, base.accentBackground, base.background, raisedGrounds(themes, scheme));
+    var paint = switchTrackPaint(base, base.accentBackground, (0, import_colorRules.switchOffGround)(base), raisedGrounds(themes, scheme));
     if (paint) out[scheme] = {
       ...base,
       ...paint
     };
+    if (scheme !== "dark" || !paint) continue;
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      var _loop = function () {
+        var intent = _step.value;
+        var _scope_accentBackground;
+        var scope = themes[`${scheme}_${intent}`];
+        var off = luminanceOf(paint.switchTrackOff);
+        if (!(scope === null || scope === void 0 ? void 0 : scope.color4) || !scope.color5 || off === null) return "continue";
+        var holds = (0, import_colorRules.inSwitchOffBand)(paint.switchTrackOff, scope.color4) && [scope.color4, scope.color5].every(function (ground) {
+          var _luminanceOf;
+          return (0, import_colorRules.contrastRatio)(off, (_luminanceOf = luminanceOf(ground)) !== null && _luminanceOf !== void 0 ? _luminanceOf : off) >= import_colorRules.plateContrastRatio;
+        });
+        if (holds) return "continue";
+        var track = switchTrackPaint(base, (_scope_accentBackground = scope.accentBackground) !== null && _scope_accentBackground !== void 0 ? _scope_accentBackground : base.accentBackground, scope.color4, [base.color4, scope.color4, scope.color5]);
+        if (track) out[`${scheme}_${intent}`] = {
+          ...scope,
+          ...track
+        };
+      };
+      for (var _iterator = semanticIntentNames[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
   }
   return out;
 }
@@ -877,7 +1203,7 @@ function holdColorThemeAccent(themes) {
     try {
       var _loop2 = function () {
         var hue = _step.value;
-        var _ref, _walkToHoldingInk, _ref1;
+        var _ref, _walkToHoldingInk, _ref1, _switchOffGround;
         var scopeName = `${scheme}_${hue}`;
         var scope = themes[scopeName];
         var ramp = Array.from({
@@ -890,7 +1216,7 @@ function holdColorThemeAccent(themes) {
         })) return "continue";
         var paper = luminanceOf(scope.color1);
         var ink = luminanceOf(scope.color12);
-        var surfaces = [scope.color1, scope.color2, scope.color3, scope.color4].map(luminanceOf);
+        var surfaces = [scope.color1, scope.color2, scope.color3, scope.color4, ...(scheme === "dark" ? [scope.color5] : [])].map(luminanceOf);
         if (paper === null || ink === null || surfaces.some(function (lum) {
           return lum === null;
         })) return "continue";
@@ -916,8 +1242,12 @@ function holdColorThemeAccent(themes) {
         };
         var rootOn = luminanceOf(base.switchTrackOff);
         var fillLum = luminanceOf(fill);
-        var rootHolds = rootOn === null || fillLum === null || (0, import_colorRules.contrastRatio)(rootOn, fillLum) >= switchStateContrastRatio;
-        var track = rootHolds ? void 0 : switchTrackPaint(base, fill, scope.background, (0, import_colorRules.isLightGround)(scope.background) ? [] : [scope.color4]);
+        var switchGround = (_switchOffGround = (0, import_colorRules.switchOffGround)(scope)) !== null && _switchOffGround !== void 0 ? _switchOffGround : scope.background;
+        var 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(function (ground) {
+          var _luminanceOf;
+          return (0, import_colorRules.contrastRatio)(rootOn, (_luminanceOf = luminanceOf(ground)) !== null && _luminanceOf !== void 0 ? _luminanceOf : rootOn) >= import_colorRules.plateContrastRatio;
+        });
+        var track = rootHolds ? void 0 : switchTrackPaint(base, fill, switchGround, (0, import_colorRules.isLightGround)(scope.background) ? [] : [base.color4, scope.color4, scope.color5]);
         var _iteratorNormalCompletion2 = true,
           _didIteratorError2 = false,
           _iteratorError2 = void 0;
@@ -1106,6 +1436,60 @@ function holdHouseAccent(themes) {
   }
   return out;
 }
+function holdHouseIdentityInk(themes) {
+  var _loop = function (_i2, _iter2) {
+    var scheme = _iter2[_i2];
+    var _themes_;
+    var base = themes[scheme];
+    var blueInk = (_themes_ = themes[`${scheme}_blue`]) === null || _themes_ === void 0 ? void 0 : _themes_.identityInk;
+    if (!(base === null || base === void 0 ? void 0 : base.identityInk) || !blueInk || base.identityInk === blueInk) return "continue";
+    var held = Array.from({
+      length: 12
+    }, function (_, index) {
+      return index + 1;
+    }).every(function (step) {
+      return base[`accent${step}`] !== void 0 && base[`accent${step}`] === base[`blue${step}`];
+    });
+    if (!held) return "continue";
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = Object.entries(themes)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var [name, theme] = _step.value;
+        if (name !== scheme && !name.startsWith(`${scheme}_`)) continue;
+        var scope = name.split("_")[1];
+        if (scope === "accent" || childrenHues.includes(scope)) continue;
+        if (theme.identityInk !== base.identityInk) continue;
+        var 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
+          };
+        }
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+  };
+  var out = {
+    ...themes
+  };
+  for (var _i = 0, _iter = ["light", "dark"]; _i < _iter.length; _i++) _loop(_i, _iter);
+  return out;
+}
 var defaultLightShadows = {
   shadow1: "rgba(0,0,0,0.04)",
   shadow2: "rgba(0,0,0,0.08)",
@@ -1190,6 +1574,7 @@ function isChromatic(color) {
   });
   return Math.max(...channels) - Math.min(...channels) >= 24;
 }
+var postPassThemeKeys = ["accentOnSurface", "borderColorControl", "borderColorField", "borderColorFieldHover", "borderColorHairline", "identityInk", "selectedBackground", "selectedColor", "switchTrackOff", "switchTrackOffBorder", "switchTrackOffHover", "switchTrackOffPress"];
 function createThemesBuilder(baseTheme, accentTheme, options) {
   var _ref, _ref1;
   var _baseTheme_lightShadows, _baseTheme_darkShadows;
@@ -1265,7 +1650,7 @@ function createThemesBuilder(baseTheme, accentTheme, options) {
     createThemesProps.getTheme = getTheme;
   }
   var initialTheme = (0, import_theme_builder.createThemes)(createThemesProps);
-  var themes = (0, import_accentInk.withIdentityInk)((0, import_accentInk.withAccentOnSurface)(holdFocusRingAccent(holdHouseAccent(holdColorThemeAccent(holdSwitchTrack(holdSyntaxFloor(holdNamedInkFloor(holdSelectedState(holdAccentFloor(holdSelectionSurface(neutralizeSemanticEntryText(neutralizeTintText(initialTheme)))))))))))));
+  var 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;