@northlight/ui 2.36.10 → 2.36.12

package/dist/umd/northlight.cjs

@@ -342,12 +342,16 @@
   };
 
   const luminosity = (hexcolor) => {
-    let color = hexcolor;
-    if (color.slice(0, 1) === "#") {
-      color = color.slice(1);
+    if (!hexcolor || typeof hexcolor !== "string")
+      return Number.NaN;
+    let color = hexcolor.trim();
+    if (!/^#?[0-9a-f]{3}([0-9a-f]{3})?$/i.test(color)) {
+      return Number.NaN;
     }
+    if (color[0] === "#")
+      color = color.slice(1);
     if (color.length === 3) {
-      color = color.split("").map((hex) => hex + hex).join("");
+      color = color.split("").map((h) => h + h).join("");
     }
     const r = parseInt(color.substring(0, 2), 16);
     const g = parseInt(color.substring(2, 4), 16);
@@ -356,16 +360,28 @@
     return brightness;
   };
 
+  function safeUseToken(tokenOrValue) {
+    try {
+      return system.useToken("colors", tokenOrValue);
+    } catch (e) {
+      return tokenOrValue;
+    }
+  }
   const getContrastColor = (color) => {
-    const colorTwo = system.useToken("colors", "text.default");
-    const colorOne = system.useToken("colors", "text.inverted");
-    const colorInHex = system.useToken("colors", color);
-    const l1 = luminosity(colorOne);
-    const l2 = luminosity(colorTwo);
-    const threshold = (l1 + l2) / 2;
-    const brightColor = l1 > l2 ? colorOne : colorTwo;
-    const darkColor = l1 > l2 ? colorTwo : colorOne;
-    return luminosity(colorInHex) >= threshold ? darkColor : brightColor;
+    const textDefault = system.useToken("colors", "text.default");
+    const textInverted = system.useToken("colors", "text.inverted");
+    const normalized = typeof color === "string" ? color.trim() : color;
+    const isHex = /^#?[0-9a-f]{3}([0-9a-f]{3})?$/i.test(normalized);
+    const bgResolved = isHex ? normalized[0] === "#" ? normalized : `#${normalized}` : safeUseToken(normalized);
+    const lInverted = luminosity(textInverted);
+    const lDefault = luminosity(textDefault);
+    const threshold = (lInverted + lDefault) / 2;
+    const brightColor = lInverted > lDefault ? textInverted : textDefault;
+    const darkColor = lInverted > lDefault ? textDefault : textInverted;
+    const lBg = luminosity(bgResolved);
+    if (Number.isNaN(lBg))
+      return void 0;
+    return lBg >= threshold ? darkColor : brightColor;
   };
 
   const ring = {
@@ -762,14 +778,14 @@
         }
       }),
       brandSubdued: ({ theme: { colors: color } }) => ({
-        color: color.text.button.link,
+        color: color.text.button.brandSubdued,
         bgColor: color.background.button.ghost,
         _hover: {
           bg: color.background.button.brand,
           color: color.text.inverted,
           _disabled: {
             bgColor: color.background.button.ghost,
-            color: color.text.button.link
+            color: color.text.button.brandSubdued
           }
         },
         _active: {
@@ -840,6 +856,38 @@
           bg: color.bg.ai.hover,
           color: color.text.inverted
         }
+      }),
+      accent: ({ theme: { colors: color } }) => ({
+        color: color.text.button.accent,
+        bgColor: color.background.button.ghost,
+        _hover: {
+          bg: color.background.button["ghost-active"],
+          color: color.text.button.accent,
+          _disabled: {
+            bgColor: color.background.button.ghost,
+            color: color.text.button.accent
+          }
+        },
+        _active: {
+          bg: color.background.button["ghost-active"],
+          color: color.text.button.accent
+        }
+      }),
+      sidebar: ({ theme: { colors: color } }) => ({
+        color: color.text.button.sidebar,
+        bgColor: color.background.button.sidebar,
+        _hover: {
+          bg: color.background.button["sidebar-hover"],
+          color: color.text.button.sidebar,
+          _disabled: {
+            bgColor: color.background.button.ghost,
+            color: color.text.button.sidebar
+          }
+        },
+        _active: {
+          bg: color.background.button["sidebar-active"],
+          color: color.text.button["sidebar-active"]
+        }
       })
     },
     defaultProps: {
@@ -1624,7 +1672,8 @@
     variants: {
       solid: ({ theme: { colors }, bgColor, colorScheme, currentTheme }) => {
         const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
-        const tagBgColor = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][500] ? colors[processedColorScheme][500] : processedColorScheme;
+        const tagBgColorRaw = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][500] ? colors[processedColorScheme][500] : processedColorScheme;
+        const tagBgColor = typeof tagBgColorRaw === "string" ? tagBgColorRaw.trim() : tagBgColorRaw;
         const tagColor = getContrastColor(react.useToken("colors", tagBgColor));
         return {
           container: {
@@ -1635,7 +1684,8 @@
       },
       subtle: ({ theme: { colors }, colorScheme, bgColor, currentTheme }) => {
         const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
-        const tagBgColor = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][100] ? colors[processedColorScheme][100] : processedColorScheme;
+        const tagBgColorRaw = bgColor != null ? bgColor : colors[processedColorScheme] && colors[processedColorScheme][100] ? colors[processedColorScheme][100] : processedColorScheme;
+        const tagBgColor = typeof tagBgColorRaw === "string" ? tagBgColorRaw.trim() : tagBgColorRaw;
         const tagColor = getContrastColor(react.useToken("colors", tagBgColor));
         return {
           container: {
@@ -3554,12 +3604,13 @@
       };
     },
     variants: {
-      solid: ({ colorScheme, theme: { colors }, currentTheme }) => {
+      solid: ({ colorScheme, theme: { colors }, currentTheme, bg, bgColor }) => {
+        var _a;
         const processedColorScheme = processColorSchemeBasedOnTheme({ currentTheme, colorScheme });
-        const bgColor = processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][500] : colors[processedColorScheme] && colors[processedColorScheme][500];
+        const finalBg = (_a = bg != null ? bg : bgColor) != null ? _a : processedColorScheme === "mediatoolBlue" ? colors[processedColorScheme][500] : colors[processedColorScheme] && colors[processedColorScheme][500];
         return {
-          bgColor,
-          color: getContrastColor(bgColor != null ? bgColor : react.useToken("colors", processedColorScheme))
+          bgColor: finalBg,
+          color: getContrastColor(finalBg != null ? finalBg : react.useToken("colors", processedColorScheme))
         };
       },
       outline: ({ colorScheme, theme: { colors }, currentTheme }) => {
@@ -3594,7 +3645,8 @@
       }
     },
     defaultProps: {
-      size: "sm"
+      size: "sm",
+      variant: "solid"
     }
   };