@ppg_pl/tinting 0.0.7 → 0.0.8

package/dist/cjs/modal-header_9.cjs.entry.js

@@ -2737,6 +2737,35 @@ const setDataLayer = (obj) => {
   return window.dataLayer.push(obj);
 };
 
+/**
+ * Returns true when a hex color is so light it is hard to distinguish from a
+ * white background (e.g. NCS S 0300-N ≈ #fafaf8). Uses perceived luminance.
+ * Accepts values with or without a leading '#', in 3- or 6-digit form.
+ */
+function isVeryLightColor(hex) {
+  var _a;
+  const cleaned = (_a = hex === null || hex === void 0 ? void 0 : hex.replace('#', '')) !== null && _a !== void 0 ? _a : '';
+  if (cleaned.length !== 6 && cleaned.length !== 3)
+    return false;
+  const short = cleaned.length === 3;
+  const r = parseInt(short ? cleaned[0] + cleaned[0] : cleaned.slice(0, 2), 16) / 255;
+  const g = parseInt(short ? cleaned[1] + cleaned[1] : cleaned.slice(2, 4), 16) / 255;
+  const b = parseInt(short ? cleaned[2] + cleaned[2] : cleaned.slice(4, 6), 16) / 255;
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+  return luminance > 0.96;
+}
+function debounce$1(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}
+
 const indexCss$5 = "@import url(\"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap\"); .tinting-wrapper *{font-family:\"Poppins\", sans-serif}.my-color-box{width:125px;height:125px;display:block;margin-bottom:5px;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;position:relative}@media (max-width: 1024px){.my-color-box{width:65px;height:65px}}.my-color-box .color-name{width:100%;background-color:#fff;padding:15px 0px 10px;border-top-left-radius:15px;border-top-right-radius:15px;opacity:0;transition:0.3s opacity ease-in-out;font-size:10px;color:#232323;text-transform:lowercase}.my-color-box.active .color-name{opacity:1}.my-color-box.categoryactive{width:120px;height:115px}.my-color-box.categoryactive .color-name{opacity:1}@media (max-width: 1024px){.my-color-box.categoryactive{width:72px;height:72px}}.my-color-box:hover .color-name{opacity:1}";
 
 const MyColorBox = class {
@@ -2763,6 +2792,21 @@ const MyColorBox = class {
       const blue = parseInt(color[5] + color[6], 16) - 20;
       return `rgb(${red},${green},${blue})`;
     };
+    this.isLightSwatch = () => { var _a; return !((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) && isVeryLightColor(this.color); };
+    // Active category keeps its 5px solid border (all active swatches share it, so
+    // alignment is consistent). In the normal grid we use an inset box-shadow
+    // instead of a border so light swatches gain a visible edge without changing
+    // their box size and skewing the grid.
+    this.getBorder = () => {
+      if (!this.isCategoryActive)
+        return '';
+      return `5px solid ${this.isLightSwatch() ? '#d9d9d9' : this.darkenColor(this.color)}`;
+    };
+    this.getBoxShadow = () => {
+      if (this.isCategoryActive)
+        return '';
+      return this.isLightSwatch() ? 'inset 0 0 0 1px #d9d9d9' : '';
+    };
     this.color = undefined;
     this.name = undefined;
     this.shop = undefined;
@@ -2777,7 +2821,8 @@ const MyColorBox = class {
         backgroundSize: ((_a = this.isImageInsteadHex) === null || _a === void 0 ? void 0 : _a.isImageInsteadHex) ? 'cover' : '',
         backgroundImage: ((_b = this.isImageInsteadHex) === null || _b === void 0 ? void 0 : _b.isImageInsteadHex) ? `url(${APIURL}/assets/${this.isImageInsteadHex.bigImage}?access_token=${accessToken})` : '',
         background: ((_c = this.isImageInsteadHex) === null || _c === void 0 ? void 0 : _c.isImageInsteadHex) ? this.isImageInsteadHex.bigImage : this.color,
-        border: this.isCategoryActive ? `5px solid ${this.darkenColor(this.color)}` : '',
+        border: this.getBorder(),
+        boxShadow: this.getBoxShadow(),
       } }, index$2.h("div", { class: "color-name" }, this.name)));
   }
 };
@@ -2826,17 +2871,9 @@ const MyColorInfo = class {
       return string.charAt(0).toUpperCase() + string.slice(1).toLocaleLowerCase();
     };
     this.isVeryLightBackground = () => {
-      var _a, _b;
       if (this.currentColor.imageInsteadHex)
         return true;
-      const hex = (_b = (_a = this.currentColor.hex) === null || _a === void 0 ? void 0 : _a.replace('#', '')) !== null && _b !== void 0 ? _b : '';
-      if (hex.length !== 6 && hex.length !== 3)
-        return false;
-      const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) / 255;
-      const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) / 255;
-      const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) / 255;
-      const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
-      return luminance > 0.96;
+      return isVeryLightColor(this.currentColor.hex);
     };
     this.getButtonClass = () => {
       if (this.currentColor.imageInsteadHex)
@@ -3087,18 +3124,6 @@ const MyModalBundle = class {
 };
 MyModalBundle.style = indexCss$4;
 
-function debounce$1(func, wait) {
-  let timeout;
-  return function executedFunction(...args) {
-    const later = () => {
-      clearTimeout(timeout);
-      func(...args);
-    };
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
 const { min: min$4, max: max$4 } = Math;
 
 const limit = (x, low = 0, high = 1) => {