@northlight/ui 2.36.10 → 2.36.12

package/dist/es/northlight.d.ts

@@ -542,7 +542,7 @@ interface BlinkerProps {
  */
 declare const Blinker: ({ color, size, isBlinking, ...rest }: BlinkerProps) => JSX.Element;
 
-type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost' | 'ai' | 'outline' | 'solid';
+type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost' | 'ai' | 'outline' | 'solid' | 'accent' | 'sidebar';
 type ButtonProps = Omit<ButtonProps$1, 'as' | 'size'> & {
     variant?: ButtonVariants;
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -590,7 +590,7 @@ type ButtonProps = Omit<ButtonProps$1, 'as' | 'size'> & {
  * @example (Example)
  * (?
  * +
- * const variants = ['link', 'success', 'default', 'danger', 'brand',
+ * const variants = ['link', 'success', 'default', 'danger', 'brand', 'accent',
  *  'ghost', 'ai', 'outline', 'brandSubdued', 'solid']
  *
  * const ExampleButton = () => {
@@ -2589,7 +2589,7 @@ declare const useOverflowGroup: () => {
     containerRef: (node: any) => void;
 };
 
-declare const getContrastColor: (color: string) => "text.default" | "text.inverted";
+declare const getContrastColor: (color: string) => "text.default" | "text.inverted" | undefined;
 
 declare const luminosity: (hexcolor: string) => number;
 

package/dist/es/northlight.js

@@ -364,12 +364,16 @@ const useDidUpdateEffect = (effect, dependencies) => {
 };
 
 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);
@@ -378,16 +382,28 @@ const luminosity = (hexcolor) => {
   return brightness;
 };
 
+function safeUseToken(tokenOrValue) {
+  try {
+    return useToken("colors", tokenOrValue);
+  } catch (e) {
+    return tokenOrValue;
+  }
+}
 const getContrastColor = (color) => {
-  const colorTwo = useToken("colors", "text.default");
-  const colorOne = useToken("colors", "text.inverted");
-  const colorInHex = 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 = useToken("colors", "text.default");
+  const textInverted = 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 = {
@@ -784,14 +800,14 @@ const Button$1 = {
       }
     }),
     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: {
@@ -862,6 +878,38 @@ const Button$1 = {
         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: {
@@ -1646,7 +1694,8 @@ const Tag$1 = {
   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(useToken$1("colors", tagBgColor));
       return {
         container: {
@@ -1657,7 +1706,8 @@ const Tag$1 = {
     },
     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(useToken$1("colors", tagBgColor));
       return {
         container: {
@@ -3576,12 +3626,13 @@ const Badge$1 = {
     };
   },
   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 : useToken$1("colors", processedColorScheme))
+        bgColor: finalBg,
+        color: getContrastColor(finalBg != null ? finalBg : useToken$1("colors", processedColorScheme))
       };
     },
     outline: ({ colorScheme, theme: { colors }, currentTheme }) => {
@@ -3616,7 +3667,8 @@ const Badge$1 = {
     }
   },
   defaultProps: {
-    size: "sm"
+    size: "sm",
+    variant: "solid"
   }
 };