@configuratorware/configurator-frontendgui 1.57.10 → 1.57.11

package/App/Services/DesignDataService.js

@@ -1907,6 +1907,11 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
           state,
           showHighlight,
           staticBorderColor,
+          dynamicDesignAreaHighlightBorderColor,
+          dynamicDesignAreaHighlightBorderColorMode,
+          getDesignAreaUnderlyingColor,
+          allDesignAreasForBorderColor,
+          borderColor,
           textureBuilderConfig,
           variantIdentifier,
           effectEnabled,
@@ -1919,11 +1924,16 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
               state = _ServiceLocator.Services.store.state;
               showHighlight = (0, _get2["default"])(state, 'designArea.showHighlight');
               staticBorderColor = (0, _Selectors3.getClientHighlightColor)(state);
+              dynamicDesignAreaHighlightBorderColor = (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColor');
+              dynamicDesignAreaHighlightBorderColorMode = (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColorMode');
+              getDesignAreaUnderlyingColor = function getDesignAreaUnderlyingColor(identifier) {
+                return _ServiceLocator.Services.visualization.getDesignAreaUnderlyingColor(identifier);
+              }; // 2D invokes drawingFn once per area with a single-element list; unify borders from the full view.
+              allDesignAreasForBorderColor = this.getDesignAreas();
+              borderColor = dynamicDesignAreaHighlightBorderColor ? (0, _getDesignAreaBorderColor.createBorderColorResolver)(getDesignAreaUnderlyingColor, staticBorderColor, dynamicDesignAreaHighlightBorderColorMode, allDesignAreasForBorderColor) : staticBorderColor;
               textureBuilderConfig = (0, _merge["default"])({
                 highlight: {
-                  borderColor: (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColor') ? (0, _getDesignAreaBorderColor.createBorderColorResolver)(function (identifier) {
-                    return _ServiceLocator.Services.visualization.getDesignAreaUnderlyingColor(identifier);
-                  }, staticBorderColor, (0, _configuration.getConf)('visualization.dynamicDesignAreaHighlightBorderColorMode')) : staticBorderColor,
+                  borderColor: borderColor,
                   backgroundColor: (0, _configuration.getConf)('visualization.designAreaHighlightBackgroundColor'),
                   lineWidth: (0, _configuration.getConf)('visualization.designAreaHighlightBorderWidth', 2)
                 }
@@ -2119,22 +2129,22 @@ var DesignDataService = exports["default"] = /*#__PURE__*/function () {
                   return _ref17.apply(this, arguments);
                 };
               }();
-              _context22.prev = 8;
-              _context22.next = 11;
-              return getDrawingContext(drawingFn, true /* update alpha */, true /* clean up texture before drawing */);
-            case 11:
+              _context22.prev = 13;
               _context22.next = 16;
+              return getDrawingContext(drawingFn, true /* update alpha */, true /* clean up texture before drawing */);
+            case 16:
+              _context22.next = 21;
               break;
-            case 13:
-              _context22.prev = 13;
-              _context22.t0 = _context22["catch"](8);
+            case 18:
+              _context22.prev = 18;
+              _context22.t0 = _context22["catch"](13);
               // eslint-disable-next-line no-console
               console.warn('Could not get drawing context, texture update is skipped!', _context22.t0.message);
-            case 16:
+            case 21:
             case "end":
               return _context22.stop();
           }
-        }, _callee21, null, [[8, 13]]);
+        }, _callee21, this, [[13, 18]]);
       }));
       function redrawAllDesignAreas(_x20, _x21) {
         return _redrawAllDesignAreas.apply(this, arguments);

package/App/Utils/getDesignAreaBorderColor.js

@@ -3,9 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rgbToHsl = exports.invertColor = exports.getContrastBorderColor = exports.getComplementaryBorderColor = exports.getBorderColorForAverage = exports.createBorderColorResolver = exports.BorderColorModes = void 0;
+exports.rgbToHsl = exports.invertColor = exports.getContrastBorderColor = exports.getComplementaryBorderColor = exports.getBorderColorForAverage = exports.createBorderColorResolver = exports.computeUnifiedContrastBorders = exports.BorderColorModes = void 0;
 var _styles = require("@material-ui/core/styles");
 var _Selectors = require("../Reducers/DesignArea/Selectors");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /**
  * Minimum contrast between the border and the area it is drawn on, the WCAG AA requirement for
  * graphical objects. Below it the derived color is not considered visible enough.
@@ -112,6 +119,135 @@ var getContrastBorderColor = exports.getContrastBorderColor = function getContra
   return (0, _styles.getContrastRatio)(averageHex, NEUTRAL_DARK) >= (0, _styles.getContrastRatio)(averageHex, NEUTRAL_LIGHT) ? NEUTRAL_DARK : NEUTRAL_LIGHT;
 };
 
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {number}
+ */
+var minContrastForNeutralAcrossAreas = function minContrastForNeutralAcrossAreas(neutral, areas) {
+  return Math.min.apply(Math, _toConsumableArray(areas.map(function (_ref3) {
+    var averageHex = _ref3.averageHex;
+    return (0, _styles.getContrastRatio)(averageHex, neutral);
+  })));
+};
+
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {boolean}
+ */
+var neutralMeetsMinContrastOnAllAreas = function neutralMeetsMinContrastOnAllAreas(neutral, areas) {
+  return minContrastForNeutralAcrossAreas(neutral, areas) >= MIN_CONTRAST_RATIO;
+};
+
+/**
+ * Picks one near-black or near-white border for every design area in a highlight pass when possible,
+ * so similar product shades do not flip border color at the luminance tie-break.
+ * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
+ * @param {Array<{identifier: string}>} designAreas
+ * @return {Map<string, string>}
+ */
+var computeUnifiedContrastBorders = exports.computeUnifiedContrastBorders = function computeUnifiedContrastBorders(getUnderlyingColor, designAreas) {
+  var areas = [];
+  var _iterator = _createForOfIteratorHelper(designAreas),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var designArea = _step.value;
+      var _identifier3 = designArea && designArea.identifier;
+      if (!_identifier3) {
+        continue;
+      }
+      var average = getUnderlyingColor(_identifier3);
+      if (!average) {
+        continue;
+      }
+      areas.push({
+        identifier: _identifier3,
+        averageHex: (0, _Selectors.rgbToHex)(average.r, average.g, average.b)
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var borderByIdentifier = new Map();
+  if (!areas.length) {
+    return borderByIdentifier;
+  }
+  var darkVotes = 0;
+  var lightVotes = 0;
+  for (var _i = 0, _areas = areas; _i < _areas.length; _i++) {
+    var averageHex = _areas[_i].averageHex;
+    var vote = getContrastBorderColor(averageHex);
+    if (vote === NEUTRAL_DARK) {
+      darkVotes += 1;
+    } else {
+      lightVotes += 1;
+    }
+  }
+  var majorityNeutral;
+  if (darkVotes > lightVotes) {
+    majorityNeutral = NEUTRAL_DARK;
+  } else if (lightVotes > darkVotes) {
+    majorityNeutral = NEUTRAL_LIGHT;
+  }
+  if (majorityNeutral && neutralMeetsMinContrastOnAllAreas(majorityNeutral, areas)) {
+    var _iterator2 = _createForOfIteratorHelper(areas),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var identifier = _step2.value.identifier;
+        borderByIdentifier.set(identifier, majorityNeutral);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return borderByIdentifier;
+  }
+  var qualifyingNeutrals = [NEUTRAL_DARK, NEUTRAL_LIGHT].filter(function (neutral) {
+    return neutralMeetsMinContrastOnAllAreas(neutral, areas);
+  });
+  if (qualifyingNeutrals.length) {
+    var maximinNeutral = qualifyingNeutrals.reduce(function (best, neutral) {
+      var minContrast = minContrastForNeutralAcrossAreas(neutral, areas);
+      if (!best) {
+        return {
+          neutral: neutral,
+          minContrast: minContrast
+        };
+      }
+      return minContrast > best.minContrast ? {
+        neutral: neutral,
+        minContrast: minContrast
+      } : best;
+    }, null).neutral;
+    var _iterator3 = _createForOfIteratorHelper(areas),
+      _step3;
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _identifier = _step3.value.identifier;
+        borderByIdentifier.set(_identifier, maximinNeutral);
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+    return borderByIdentifier;
+  }
+  for (var _i2 = 0, _areas2 = areas; _i2 < _areas2.length; _i2++) {
+    var _areas2$_i = _areas2[_i2],
+      _identifier2 = _areas2$_i.identifier,
+      _averageHex = _areas2$_i.averageHex;
+    borderByIdentifier.set(_identifier2, getContrastBorderColor(_averageHex));
+  }
+  return borderByIdentifier;
+};
+
 /**
  * Keeps the hue of the inverted (complementary) color at a high saturation and moves the lightness
  * away from the average, only as far as needed to reach a visible contrast, so the border is a vivid
@@ -128,8 +264,8 @@ var getComplementaryBorderColor = exports.getComplementaryBorderColor = function
     saturation = _rgbToHsl.saturation;
   if (saturation >= MIN_SATURATION) {
     var lightnessCandidates = (0, _styles.getLuminance)(averageHex) > LIGHT_AVERAGE_LUMINANCE ? LIGHTNESS_ON_LIGHT_AVERAGE : LIGHTNESS_ON_DARK_AVERAGE;
-    for (var _i = 0, _lightnessCandidates = lightnessCandidates; _i < _lightnessCandidates.length; _i++) {
-      var lightness = _lightnessCandidates[_i];
+    for (var _i3 = 0, _lightnessCandidates = lightnessCandidates; _i3 < _lightnessCandidates.length; _i3++) {
+      var lightness = _lightnessCandidates[_i3];
       var candidate = (0, _Selectors.rgbString2hex)((0, _styles.hslToRgb)("hsl(".concat(Math.round(hue), ", ").concat(BORDER_SATURATION, "%, ").concat(lightness, "%)")));
       if (candidate && (0, _styles.getContrastRatio)(averageHex, candidate) >= MIN_CONTRAST_RATIO) {
         return candidate;
@@ -160,11 +296,31 @@ var getBorderColorForAverage = exports.getBorderColorForAverage = function getBo
  * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
  * @param {string} fallbackColor
  * @param {string} [mode] One of BorderColorModes
+ * @param {Array<{identifier: string}>} [designAreas] When set in contrast mode, one border is chosen for the pass
  * @return {function(object): string}
  */
-var createBorderColorResolver = exports.createBorderColorResolver = function createBorderColorResolver(getUnderlyingColor, fallbackColor, mode) {
+var createBorderColorResolver = exports.createBorderColorResolver = function createBorderColorResolver(getUnderlyingColor, fallbackColor, mode, designAreas) {
+  var useUnifiedContrast = mode !== BorderColorModes.Complementary && designAreas && designAreas.length;
+  var unifiedBorderByIdentifier = null;
+  var getUnifiedBorderByIdentifier = function getUnifiedBorderByIdentifier() {
+    if (!useUnifiedContrast) {
+      return null;
+    }
+    var sampledCount = designAreas.filter(function (designArea) {
+      return (designArea === null || designArea === void 0 ? void 0 : designArea.identifier) && getUnderlyingColor(designArea.identifier);
+    }).length;
+    if (!unifiedBorderByIdentifier || sampledCount > 0 && unifiedBorderByIdentifier.size < sampledCount) {
+      unifiedBorderByIdentifier = computeUnifiedContrastBorders(getUnderlyingColor, designAreas);
+    }
+    return unifiedBorderByIdentifier;
+  };
   return function (designArea) {
-    var average = getUnderlyingColor(designArea && designArea.identifier);
+    var identifier = designArea && designArea.identifier;
+    var unified = getUnifiedBorderByIdentifier();
+    if (unified && identifier && unified.has(identifier)) {
+      return unified.get(identifier);
+    }
+    var average = getUnderlyingColor(identifier);
     return average ? getBorderColorForAverage(average, mode) : fallbackColor;
   };
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.57.10",
+  "version": "1.57.11",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.57.10",
+    "@configuratorware/scripts": "1.57.11",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
@@ -36,8 +36,8 @@
     "react-router-dom": "^5.3.4",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.57.10",
-    "redhotmagma-visualization": "1.57.10",
+    "redhotmagma-graphics-editor": "1.57.11",
+    "redhotmagma-visualization": "1.57.11",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
@@ -64,7 +64,7 @@
     "css-loader": "^5.2.7",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "node-sass": "^9.0.0",
+    "sass": "1.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",

package/src/App/Services/DesignDataService.js

@@ -1604,16 +1604,28 @@ export default class DesignDataService {
         const showHighlight = get(state, 'designArea.showHighlight');
 
         const staticBorderColor = getClientHighlightColor(state);
+        const dynamicDesignAreaHighlightBorderColor = getConf(
+            'visualization.dynamicDesignAreaHighlightBorderColor'
+        );
+        const dynamicDesignAreaHighlightBorderColorMode = getConf(
+            'visualization.dynamicDesignAreaHighlightBorderColorMode'
+        );
+        const getDesignAreaUnderlyingColor = identifier =>
+            Services.visualization.getDesignAreaUnderlyingColor(identifier);
+        // 2D invokes drawingFn once per area with a single-element list; unify borders from the full view.
+        const allDesignAreasForBorderColor = this.getDesignAreas();
+        const borderColor = dynamicDesignAreaHighlightBorderColor
+            ? createBorderColorResolver(
+                  getDesignAreaUnderlyingColor,
+                  staticBorderColor,
+                  dynamicDesignAreaHighlightBorderColorMode,
+                  allDesignAreasForBorderColor
+              )
+            : staticBorderColor;
         const textureBuilderConfig = merge(
             {
                 highlight: {
-                    borderColor: getConf('visualization.dynamicDesignAreaHighlightBorderColor')
-                        ? createBorderColorResolver(
-                              identifier => Services.visualization.getDesignAreaUnderlyingColor(identifier),
-                              staticBorderColor,
-                              getConf('visualization.dynamicDesignAreaHighlightBorderColorMode')
-                          )
-                        : staticBorderColor,
+                    borderColor,
                     backgroundColor: getConf('visualization.designAreaHighlightBackgroundColor'),
                     lineWidth: getConf('visualization.designAreaHighlightBorderWidth', 2),
                 },

package/src/App/Utils/__tests__/getDesignAreaBorderColor.test.js

@@ -1,7 +1,9 @@
 import {
     BorderColorModes,
+    computeUnifiedContrastBorders,
     createBorderColorResolver,
     getBorderColorForAverage,
+    getContrastBorderColor,
     invertColor,
     rgbToHsl,
 } from '../getDesignAreaBorderColor';
@@ -96,6 +98,70 @@ describe('getBorderColorForAverage in complementary mode', () => {
     });
 });
 
+const grey = value => ({ r: value, g: value, b: value });
+
+describe('computeUnifiedContrastBorders', () => {
+    test('uses one border for similar greys that would flip individually', () => {
+        const colors = {
+            left: grey(100),
+            right: grey(120),
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'left' },
+            { identifier: 'right' },
+        ]);
+
+        expect(getContrastBorderColor('#646464')).toBe('#eeeeee');
+        expect(getContrastBorderColor('#787878')).toBe('#111111');
+        expect(borders.get('left')).toBe(borders.get('right'));
+    });
+
+    test('uses majority neutral when it is visible on every area', () => {
+        const colors = {
+            a: grey(50),
+            b: grey(60),
+            c: grey(128),
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'a' },
+            { identifier: 'b' },
+            { identifier: 'c' },
+        ]);
+
+        expect(borders.get('a')).toBe('#eeeeee');
+        expect(borders.get('b')).toBe('#eeeeee');
+        expect(borders.get('c')).toBe('#eeeeee');
+    });
+
+    test('falls back to maximin when majority neutral fails on an area', () => {
+        const colors = {
+            dark: grey(30),
+            mid: grey(128),
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'dark' },
+            { identifier: 'mid' },
+        ]);
+
+        expect(borders.get('dark')).toBe('#eeeeee');
+        expect(borders.get('mid')).toBe('#eeeeee');
+    });
+
+    test('allows per-area colors when no single neutral works everywhere', () => {
+        const colors = {
+            light: { r: 255, g: 255, b: 255 },
+            dark: { r: 0, g: 0, b: 0 },
+        };
+        const borders = computeUnifiedContrastBorders(id => colors[id], [
+            { identifier: 'light' },
+            { identifier: 'dark' },
+        ]);
+
+        expect(borders.get('light')).toBe('#111111');
+        expect(borders.get('dark')).toBe('#eeeeee');
+    });
+});
+
 describe('createBorderColorResolver', () => {
     test('resolves the border color from the underlying color of the design area', () => {
         const getUnderlyingColor = jest.fn().mockReturnValue(JACKET_GREEN);
@@ -125,4 +191,75 @@ describe('createBorderColorResolver', () => {
     test('falls back to the given color without a design area', () => {
         expect(createBorderColorResolver(() => null, '#abcdef')()).toBe('#abcdef');
     });
+
+    test('unifies contrast borders across design areas when the list is given', () => {
+        const colors = {
+            left: grey(100),
+            right: grey(120),
+        };
+        const resolve = createBorderColorResolver(id => colors[id], '#abcdef', BorderColorModes.Contrast, [
+            { identifier: 'left' },
+            { identifier: 'right' },
+        ]);
+
+        expect(resolve({ identifier: 'left' })).toBe(resolve({ identifier: 'right' }));
+    });
+
+    test('unifies when resolved one area at a time like 2D drawing passes', () => {
+        const colors = {
+            chestLeft: grey(100),
+            chestRight: grey(120),
+            collar: grey(115),
+        };
+        const allAreas = [
+            { identifier: 'chestLeft' },
+            { identifier: 'chestRight' },
+            { identifier: 'collar' },
+        ];
+        const resolve = createBorderColorResolver(
+            id => colors[id],
+            '#abcdef',
+            BorderColorModes.Contrast,
+            allAreas
+        );
+
+        const chestLeftBorder = resolve({ identifier: 'chestLeft' });
+        const chestRightBorder = resolve({ identifier: 'chestRight' });
+        const collarBorder = resolve({ identifier: 'collar' });
+
+        expect(chestLeftBorder).toBe(chestRightBorder);
+        expect(chestRightBorder).toBe(collarBorder);
+    });
+
+    test('resolves per area when design areas are omitted', () => {
+        const resolve = createBorderColorResolver(
+            id => (id === 'left' ? grey(100) : grey(120)),
+            '#abcdef',
+            BorderColorModes.Contrast
+        );
+
+        expect(resolve({ identifier: 'left' })).toBe('#eeeeee');
+        expect(resolve({ identifier: 'right' })).toBe('#111111');
+    });
+
+    test('does not unify borders in complementary mode', () => {
+        const colors = {
+            left: grey(100),
+            right: grey(120),
+        };
+        const resolve = createBorderColorResolver(
+            id => colors[id],
+            '#abcdef',
+            BorderColorModes.Complementary,
+            [{ identifier: 'left' }, { identifier: 'right' }]
+        );
+
+        expect(resolve({ identifier: 'left' })).toBe(
+            getBorderColorForAverage(colors.left, BorderColorModes.Complementary)
+        );
+        expect(resolve({ identifier: 'right' })).toBe(
+            getBorderColorForAverage(colors.right, BorderColorModes.Complementary)
+        );
+        expect(resolve({ identifier: 'left' })).not.toBe(resolve({ identifier: 'right' }));
+    });
 });

package/src/App/Utils/getDesignAreaBorderColor.js

@@ -95,6 +95,105 @@ export const getContrastBorderColor = averageHex =>
         ? NEUTRAL_DARK
         : NEUTRAL_LIGHT;
 
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {number}
+ */
+const minContrastForNeutralAcrossAreas = (neutral, areas) =>
+    Math.min(...areas.map(({ averageHex }) => getContrastRatio(averageHex, neutral)));
+
+/**
+ * @param {string} neutral
+ * @param {Array<{averageHex: string}>} areas
+ * @return {boolean}
+ */
+const neutralMeetsMinContrastOnAllAreas = (neutral, areas) =>
+    minContrastForNeutralAcrossAreas(neutral, areas) >= MIN_CONTRAST_RATIO;
+
+/**
+ * Picks one near-black or near-white border for every design area in a highlight pass when possible,
+ * so similar product shades do not flip border color at the luminance tie-break.
+ * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
+ * @param {Array<{identifier: string}>} designAreas
+ * @return {Map<string, string>}
+ */
+export const computeUnifiedContrastBorders = (getUnderlyingColor, designAreas) => {
+    const areas = [];
+
+    for (const designArea of designAreas) {
+        const identifier = designArea && designArea.identifier;
+        if (!identifier) {
+            continue;
+        }
+        const average = getUnderlyingColor(identifier);
+        if (!average) {
+            continue;
+        }
+        areas.push({
+            identifier,
+            averageHex: rgbToHex(average.r, average.g, average.b),
+        });
+    }
+
+    const borderByIdentifier = new Map();
+
+    if (!areas.length) {
+        return borderByIdentifier;
+    }
+
+    let darkVotes = 0;
+    let lightVotes = 0;
+
+    for (const { averageHex } of areas) {
+        const vote = getContrastBorderColor(averageHex);
+        if (vote === NEUTRAL_DARK) {
+            darkVotes += 1;
+        } else {
+            lightVotes += 1;
+        }
+    }
+
+    let majorityNeutral;
+    if (darkVotes > lightVotes) {
+        majorityNeutral = NEUTRAL_DARK;
+    } else if (lightVotes > darkVotes) {
+        majorityNeutral = NEUTRAL_LIGHT;
+    }
+
+    if (majorityNeutral && neutralMeetsMinContrastOnAllAreas(majorityNeutral, areas)) {
+        for (const { identifier } of areas) {
+            borderByIdentifier.set(identifier, majorityNeutral);
+        }
+        return borderByIdentifier;
+    }
+
+    const qualifyingNeutrals = [NEUTRAL_DARK, NEUTRAL_LIGHT].filter(neutral =>
+        neutralMeetsMinContrastOnAllAreas(neutral, areas)
+    );
+
+    if (qualifyingNeutrals.length) {
+        const maximinNeutral = qualifyingNeutrals.reduce((best, neutral) => {
+            const minContrast = minContrastForNeutralAcrossAreas(neutral, areas);
+            if (!best) {
+                return { neutral, minContrast };
+            }
+            return minContrast > best.minContrast ? { neutral, minContrast } : best;
+        }, null).neutral;
+
+        for (const { identifier } of areas) {
+            borderByIdentifier.set(identifier, maximinNeutral);
+        }
+        return borderByIdentifier;
+    }
+
+    for (const { identifier, averageHex } of areas) {
+        borderByIdentifier.set(identifier, getContrastBorderColor(averageHex));
+    }
+
+    return borderByIdentifier;
+};
+
 /**
  * Keeps the hue of the inverted (complementary) color at a high saturation and moves the lightness
  * away from the average, only as far as needed to reach a visible contrast, so the border is a vivid
@@ -150,9 +249,38 @@ export const getBorderColorForAverage = (average, mode = BorderColorModes.Contra
  * @param {function(string): ({r: number, g: number, b: number}|null|undefined)} getUnderlyingColor
  * @param {string} fallbackColor
  * @param {string} [mode] One of BorderColorModes
+ * @param {Array<{identifier: string}>} [designAreas] When set in contrast mode, one border is chosen for the pass
  * @return {function(object): string}
  */
-export const createBorderColorResolver = (getUnderlyingColor, fallbackColor, mode) => designArea => {
-    const average = getUnderlyingColor(designArea && designArea.identifier);
-    return average ? getBorderColorForAverage(average, mode) : fallbackColor;
+export const createBorderColorResolver = (getUnderlyingColor, fallbackColor, mode, designAreas) => {
+    const useUnifiedContrast = mode !== BorderColorModes.Complementary && designAreas && designAreas.length;
+    let unifiedBorderByIdentifier = null;
+
+    const getUnifiedBorderByIdentifier = () => {
+        if (!useUnifiedContrast) {
+            return null;
+        }
+        const sampledCount = designAreas.filter(
+            designArea => designArea?.identifier && getUnderlyingColor(designArea.identifier)
+        ).length;
+        if (
+            !unifiedBorderByIdentifier ||
+            (sampledCount > 0 && unifiedBorderByIdentifier.size < sampledCount)
+        ) {
+            unifiedBorderByIdentifier = computeUnifiedContrastBorders(getUnderlyingColor, designAreas);
+        }
+        return unifiedBorderByIdentifier;
+    };
+
+    return designArea => {
+        const identifier = designArea && designArea.identifier;
+        const unified = getUnifiedBorderByIdentifier();
+
+        if (unified && identifier && unified.has(identifier)) {
+            return unified.get(identifier);
+        }
+
+        const average = getUnderlyingColor(identifier);
+        return average ? getBorderColorForAverage(average, mode) : fallbackColor;
+    };
 };