@descope/web-components-ui 1.0.287 → 1.0.289

package/dist/index.d.ts

@@ -51,6 +51,8 @@ export type Theme = {
     typography: Record<string, any>;
     shadow: Record<string, string>;
     spacing: Record<string, string>;
+    radius: Record<string, string>;
+    border: Record<string, string>;
   };
   components: {
     button: Record<string, any>;
@@ -60,5 +62,6 @@ export type Theme = {
     link: Record<string, any>;
     text: Record<string, any>;
     inputWrapper: Record<string, any>;
+    buttonSelectionGroupItem: Record<string, any>;
   };
 };

package/dist/index.esm.js

@@ -7015,6 +7015,10 @@ const ButtonSelectionGroupItemClass = compose(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderColor,
       },
+      borderWidth: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderWidth,
+      },
       borderStyle: {
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderStyle,
@@ -9384,27 +9388,87 @@ const createHelperVars = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
-// TODO: fix generated colors strategy
-const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
-const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
-const genContrast = (c, percentage = 0.9) => {
+const colorGaps = {
+  darkLight: 0.4,
+  highlight: 0.8,
+  contrast: 1,
+  edgeColor: {
+    darkLight: 0.25,
+    highlight: 0.1,
+  },
+};
+
+const darken = (c, percentage) => c.darken(percentage).hex();
+
+const contrast = (c) => {
   const isDark = c.isDark();
   return c
-    .mix(Color(isDark ? 'white' : 'black'), percentage)
+    .mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
     .saturate(1)
     .hex();
 };
 
-const genColor = (color) => {
+const lighten = (c, percentage) => {
+  const isDark = c.lightness() < 0.5;
+
+  if (isDark) {
+    return c.lightness(percentage * 100).hex();
+  }
+
+  return c.lighten(percentage).hex();
+};
+
+const isNearBlack = (color) => color.luminosity() < 0.01;
+const isNearWhite = (color) => color.luminosity() > 0.99;
+
+const generateDarkColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearWhite(color)
+      ? darken(color, colorGaps.edgeColor.darkLight)
+      : lighten(color, colorGaps.darkLight);
+  }
+
+  return isNearBlack(color)
+    ? lighten(color, colorGaps.edgeColor.darkLight)
+    : darken(color, colorGaps.darkLight);
+};
+
+const generateLightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.darkLight)
+      : darken(color, colorGaps.darkLight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.darkLight)
+    : lighten(color, colorGaps.darkLight);
+};
+
+const generateHighlightColor = (color, theme) => {
+  if (theme === 'dark') {
+    return isNearBlack(color)
+      ? lighten(color, colorGaps.edgeColor.highlight)
+      : darken(color, colorGaps.highlight);
+  }
+
+  return isNearWhite(color)
+    ? darken(color, colorGaps.edgeColor.highlight)
+    : lighten(color, colorGaps.highlight);
+};
+
+const genColor = (color, theme) => {
   const mainColor = new Color(color.main || color);
 
-  return {
+  const res = {
     main: mainColor.hex(),
-    dark: color.dark || genDark(mainColor),
-    light: color.light || genLight(mainColor),
-    highlight: color.highlight || genLight(mainColor),
-    contrast: color.contrast || genContrast(mainColor),
+    dark: color.dark || generateDarkColor(mainColor, theme),
+    light: color.light || generateLightColor(mainColor, theme),
+    highlight: color.highlight || generateHighlightColor(mainColor, theme),
+    contrast: color.contrast || contrast(mainColor),
   };
+
+  return res;
 };
 
 const genColors = (colors) => {
@@ -10805,6 +10869,7 @@ const buttonSelectionGroupItem = {
   [vars$a.borderStyle]: 'solid',
   [vars$a.borderRadius]: globalRefs$8.radius.sm,
   [vars$a.outlineColor]: 'transparent',
+  [vars$a.borderWidth]: globalRefs$8.border.xs,
 
   _hover: {
     [vars$a.backgroundColor]: globalRefs$8.colors.surface.highlight,