@descope/web-components-ui 1.0.273 → 1.0.275

package/dist/index.d.ts

@@ -7,8 +7,8 @@ export {
   componentsThemeManager,
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
-export { defaultTheme, themeVars } from './theme';
-
+export { defaultTheme, themeVars } from './defaultTheme';
+export { default as darkTheme } from './darkTheme';
 export { ButtonClass } from './components/descope-button';
 export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
 export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle';

package/dist/index.esm.js

@@ -3173,10 +3173,7 @@ const PasswordClass = compose(
       labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
       errorMessageTextColor: { ...errorMessage$7, property: 'color' },
 
-      inputValueTextColor: [
-        { ...inputElement$2, property: 'color' },
-        { ...revealButtonIcon, property: 'color' },
-      ],
+      inputValueTextColor: { ...inputElement$2, property: 'color' },
       inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
 
       revealButtonOffset: [
@@ -3184,6 +3181,7 @@ const PasswordClass = compose(
         { ...revealButtonContainer, property: 'margin-left' },
       ],
       revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
+      revealButtonColor: { ...revealButtonIcon, property: 'color' },
     },
   }),
   draggableMixin,
@@ -6894,6 +6892,7 @@ class RawSelectItem extends createBaseClass({
 	`;
 
     forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
   }
 
   handleFocus() {
@@ -6942,6 +6941,10 @@ const ButtonSelectionGroupItemClass = compose(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.borderRadius,
       },
+      outlineColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.outlineColor,
+      },
     },
   }),
   draggableMixin,
@@ -7452,12 +7455,11 @@ const GridClass = compose(
       ],
       sortIndicatorsColor: { ...sortIndicators, property: 'color' },
       activeSortIndicator: { ...activeSortIndicator, property: 'color' },
-      inputBorderColor: { ...host$1, property: 'border-color' },
-      inputBorderWidth: { ...host$1, property: 'border-width' },
-      inputBorderStyle: { ...host$1, property: 'border-style' },
-      inputBorderRadius: { ...host$1, property: 'border-radius' },
+      borderColor: { ...host$1, property: 'border-color' },
+      borderWidth: { ...host$1, property: 'border-width' },
+      borderStyle: { ...host$1, property: 'border-style' },
+      borderRadius: { ...host$1, property: 'border-radius' },
       selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
-      selectedTextColor: { ...selectedRow, property: 'color' },
       headerRowTextColor: { ...headerRowCell, property: 'color' },
       separatorColor: [
         { ...firstRow, property: 'border-bottom-color' },
@@ -7482,6 +7484,9 @@ const GridClass = compose(
       }
       vaadin-grid-cell-content {
         display: flex;
+      }
+      vaadin-grid::part(selected-row-cell) {
+        background-image: none;
       }
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
@@ -8645,50 +8650,134 @@ const createHelperVars = (theme, prefix) => {
   return [res.theme, res.useVars, res.vars];
 };
 
-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 (color.dark) return color.dark;
+
+  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 (color.light) return color.light;
+
+  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 (color.highlight) return color.highlight;
+
+  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),
-    contrast: color.contrast || genContrast(mainColor),
+    dark: generateDarkColor(mainColor, theme),
+    light: generateLightColor(mainColor, theme),
+    highlight: generateHighlightColor(mainColor, theme),
+    contrast: color.contrast || contrast(mainColor),
   };
-};
-
-const genColors = (colors) => {
-  return Object.keys(colors).reduce((acc, colorName) => {
-    const currentColor = colors[colorName];
 
-    return Object.assign(acc, {
-      [colorName]: genColor(currentColor),
-    });
-  }, {});
+  return res;
 };
 
 const direction = 'ltr';
 
-const colors = genColors({
+const colors$1 = {
   surface: {
-    main: 'lightgray',
-    light: '#fff',
-    dark: '#000',
-  },
-  primary: '#006af5',
-  secondary: '#7D14EB',
-  success: 'green',
-  error: '#e21d12',
-});
+    dark: '#636c74',
+    main: '#ffffff',
+    light: '#cfd3d7',
+    highlight: '#f4f5f6',
+    contrast: '#181a1c',
+  },
+  primary: {
+    main: '#006af5',
+    dark: '#004094',
+    light: '#71aeff',
+    highlight: '#f0f6ff',
+    contrast: '#ffffff',
+  },
+  secondary: {
+    dark: '#6410bc',
+    main: '#802ed6',
+    light: '#be89f5',
+    highlight: '#ede7f6',
+    contrast: '#ffffff',
+  },
+  success: {
+    main: '#008000',
+    dark: '#005700',
+    light: '#8bc38b',
+    highlight: '#f5faf5',
+    contrast: '#ffffff',
+  },
+  error: {
+    main: '#e21d12',
+    dark: '#b3170f',
+    light: '#f4807a',
+    highlight: '#fef1f1',
+    contrast: '#ffffff',
+  },
+};
 
 const fonts = {
   font1: {
@@ -8816,7 +8905,7 @@ const shadow = {
 };
 
 const globals = {
-  colors,
+  colors: colors$1,
   typography,
   spacing,
   border,
@@ -8827,15 +8916,15 @@ const globals = {
 };
 const vars$y = getThemeVars(globals);
 
-const globalRefs$i = getThemeRefs(globals);
+const globalRefs$h = getThemeRefs(globals);
 const compVars$4 = ButtonClass.cssVarList;
 
 const mode = {
-  primary: globalRefs$i.colors.primary,
-  secondary: globalRefs$i.colors.secondary,
-  success: globalRefs$i.colors.success,
-  error: globalRefs$i.colors.error,
-  surface: globalRefs$i.colors.surface,
+  primary: globalRefs$h.colors.primary,
+  secondary: globalRefs$h.colors.secondary,
+  success: globalRefs$h.colors.success,
+  error: globalRefs$h.colors.error,
+  surface: globalRefs$h.colors.surface,
 };
 
 const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$I);
@@ -8843,15 +8932,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
 const button = {
   ...helperTheme$3,
 
-  [compVars$4.fontFamily]: globalRefs$i.fonts.font1.family,
+  [compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
 
   [compVars$4.cursor]: 'pointer',
   [compVars$4.hostHeight]: '3em',
   [compVars$4.hostWidth]: 'auto',
-  [compVars$4.hostDirection]: globalRefs$i.direction,
+  [compVars$4.hostDirection]: globalRefs$h.direction,
 
-  [compVars$4.borderRadius]: globalRefs$i.radius.sm,
-  [compVars$4.borderWidth]: globalRefs$i.border.xs,
+  [compVars$4.borderRadius]: globalRefs$h.radius.sm,
+  [compVars$4.borderWidth]: globalRefs$h.border.xs,
   [compVars$4.borderStyle]: 'solid',
   [compVars$4.borderColor]: 'transparent',
 
@@ -8894,10 +8983,10 @@ const button = {
   },
 
   _disabled: {
-    [helperVars$3.main]: globalRefs$i.colors.surface.main,
-    [helperVars$3.dark]: globalRefs$i.colors.surface.dark,
-    [helperVars$3.light]: globalRefs$i.colors.surface.light,
-    [helperVars$3.contrast]: globalRefs$i.colors.surface.light,
+    [helperVars$3.main]: globalRefs$h.colors.surface.light,
+    [helperVars$3.dark]: globalRefs$h.colors.surface.dark,
+    [helperVars$3.light]: globalRefs$h.colors.surface.light,
+    [helperVars$3.contrast]: globalRefs$h.colors.surface.main,
   },
 
   variant: {
@@ -8917,12 +9006,14 @@ const button = {
 
     outline: {
       [compVars$4.labelTextColor]: helperRefs$3.main,
-      [compVars$4.borderColor]: 'currentColor',
+      [compVars$4.borderColor]: helperRefs$3.main,
       _hover: {
         [compVars$4.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.borderColor]: helperRefs$3.dark,
       },
       _active: {
         [compVars$4.labelTextColor]: helperRefs$3.main,
+        [compVars$4.borderColor]: helperRefs$3.main,
       },
     },
 
@@ -8933,13 +9024,13 @@ const button = {
         [compVars$4.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$4.labelTextColor]: helperRefs$3.dark,
+        [compVars$4.labelTextColor]: helperRefs$3.main,
       },
     },
   },
 
   _focused: {
-    [compVars$4.outlineColor]: globalRefs$i.colors.surface.main,
+    [compVars$4.outlineColor]: helperRefs$3.light,
   },
 };
 
@@ -8955,21 +9046,21 @@ var button$1 = /*#__PURE__*/Object.freeze({
 });
 
 const componentName = getComponentName('input-wrapper');
-const globalRefs$h = getThemeRefs(globals);
+const globalRefs$g = getThemeRefs(globals);
 
 const [theme$1, refs, vars$w] = createHelperVars(
   {
-    labelTextColor: globalRefs$h.colors.surface.contrast,
-    valueTextColor: globalRefs$h.colors.surface.contrast,
-    placeholderTextColor: globalRefs$h.colors.surface.main,
+    labelTextColor: globalRefs$g.colors.surface.dark,
+    valueTextColor: globalRefs$g.colors.surface.contrast,
+    placeholderTextColor: globalRefs$g.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs$h.colors.error.main,
+    errorMessageTextColor: globalRefs$g.colors.error.main,
 
-    borderWidth: globalRefs$h.border.xs,
-    borderRadius: globalRefs$h.radius.xs,
+    borderWidth: globalRefs$g.border.xs,
+    borderRadius: globalRefs$g.radius.xs,
     borderColor: 'transparent',
 
-    outlineWidth: globalRefs$h.border.sm,
+    outlineWidth: globalRefs$g.border.sm,
     outlineStyle: 'solid',
     outlineColor: 'transparent',
     outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
@@ -8980,11 +9071,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
     horizontalPadding: '0.5em',
     verticalPadding: '0.5em',
 
-    backgroundColor: globalRefs$h.colors.surface.light,
+    backgroundColor: globalRefs$g.colors.surface.main,
 
-    fontFamily: globalRefs$h.fonts.font1.family,
+    fontFamily: globalRefs$g.fonts.font1.family,
 
-    direction: globalRefs$h.direction,
+    direction: globalRefs$g.direction,
 
     overlayOpacity: '0.3',
 
@@ -9000,27 +9091,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
     },
 
     _focused: {
-      outlineColor: globalRefs$h.colors.surface.main,
+      outlineColor: globalRefs$g.colors.surface.light,
       _invalid: {
-        outlineColor: globalRefs$h.colors.error.main,
+        outlineColor: globalRefs$g.colors.error.main,
       },
     },
 
     _bordered: {
-      outlineWidth: globalRefs$h.border.xs,
-      borderColor: globalRefs$h.colors.surface.main,
+      outlineWidth: globalRefs$g.border.xs,
+      borderColor: globalRefs$g.colors.surface.light,
       borderStyle: 'solid',
       _invalid: {
-        borderColor: globalRefs$h.colors.error.main,
+        borderColor: globalRefs$g.colors.error.main,
       },
     },
 
     _disabled: {
-      labelTextColor: globalRefs$h.colors.surface.main,
-      borderColor: globalRefs$h.colors.surface.main,
-      valueTextColor: globalRefs$h.colors.surface.dark,
-      placeholderTextColor: globalRefs$h.colors.surface.dark,
-      backgroundColor: globalRefs$h.colors.surface.light,
+      labelTextColor: globalRefs$g.colors.surface.light,
+      borderColor: globalRefs$g.colors.surface.light,
+      valueTextColor: globalRefs$g.colors.surface.light,
+      placeholderTextColor: globalRefs$g.colors.surface.light,
+      backgroundColor: globalRefs$g.colors.surface.main,
     },
   },
   componentName
@@ -9071,7 +9162,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$v
 });
 
-const globalRefs$g = getThemeRefs(globals);
+const globalRefs$f = getThemeRefs(globals);
 const vars$u = PasswordClass.cssVarList;
 
 const password = {
@@ -9095,8 +9186,9 @@ const password = {
   [vars$u.inputOutlineStyle]: refs.outlineStyle,
   [vars$u.inputOutlineColor]: refs.outlineColor,
   [vars$u.inputOutlineOffset]: refs.outlineOffset,
-  [vars$u.revealButtonOffset]: globalRefs$g.spacing.md,
+  [vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
   [vars$u.revealButtonSize]: refs.toggleButtonSize,
+  [vars$u.revealButtonColor]: refs.placeholderTextColor,
 };
 
 var password$1 = /*#__PURE__*/Object.freeze({
@@ -9169,7 +9261,6 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$s
 });
 
-const globalRefs$f = getThemeRefs(globals);
 const vars$r = TextAreaClass.cssVarList;
 
 const textArea = {
@@ -9200,10 +9291,6 @@ const textArea = {
     center: { [vars$r.inputTextAlign]: 'center' },
   },
 
-  _disabled: {
-    [vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
-  },
-
   _readonly: {
     [vars$r.inputResizeType]: 'none',
   },
@@ -9275,7 +9362,7 @@ const switchToggle = {
   [vars$p.trackBorderStyle]: refs.borderStyle,
   [vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
   [vars$p.trackBorderColor]: refs.borderColor,
-  [vars$p.trackBackgroundColor]: 'none',
+  [vars$p.trackBackgroundColor]: refs.backgroundColor,
   [vars$p.trackBorderRadius]: globalRefs$e.radius.md,
   [vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
   [vars$p.trackHeight]: checkboxHeight,
@@ -9284,7 +9371,7 @@ const switchToggle = {
   [vars$p.knobRadius]: '50%',
   [vars$p.knobTopOffset]: '1px',
   [vars$p.knobLeftOffset]: knobMargin,
-  [vars$p.knobColor]: refs.valueTextColor,
+  [vars$p.knobColor]: refs.labelTextColor,
   [vars$p.knobTransitionDuration]: '0.3s',
 
   [vars$p.labelTextColor]: refs.labelTextColor,
@@ -9296,7 +9383,6 @@ const switchToggle = {
 
   _checked: {
     [vars$p.trackBorderColor]: refs.borderColor,
-    [vars$p.trackBackgroundColor]: refs.backgroundColor,
     [vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
     [vars$p.knobColor]: refs.valueTextColor,
     [vars$p.knobTextColor]: refs.valueTextColor,
@@ -9304,7 +9390,7 @@ const switchToggle = {
 
   _disabled: {
     [vars$p.knobColor]: globalRefs$e.colors.surface.light,
-    [vars$p.trackBorderColor]: globalRefs$e.colors.surface.main,
+    [vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
     [vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
     [vars$p.labelTextColor]: refs.labelTextColor,
     _checked: {
@@ -9357,7 +9443,7 @@ const container = {
 
   [compVars$3.hostWidth]: '100%',
   [compVars$3.boxShadow]: 'none',
-  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.light,
+  [compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
   [compVars$3.color]: globalRefs$d.colors.surface.contrast,
   [compVars$3.borderRadius]: '0px',
   [compVars$3.hostDirection]: globalRefs$d.direction,
@@ -9528,10 +9614,10 @@ const text = {
 
   mode: {
     primary: {
-      [vars$k.textColor]: globalRefs$c.colors.primary.main,
+      [vars$k.textColor]: globalRefs$c.colors.surface.contrast,
     },
     secondary: {
-      [vars$k.textColor]: globalRefs$c.colors.secondary.main,
+      [vars$k.textColor]: globalRefs$c.colors.surface.dark,
     },
     error: {
       [vars$k.textColor]: globalRefs$c.colors.error.main,
@@ -9630,7 +9716,7 @@ const divider = {
   [compVars$2.flexDirection]: 'row',
   [compVars$2.alignSelf]: 'stretch',
   [compVars$2.hostWidth]: '100%',
-  [compVars$2.stripeColor]: globalRefs$a.colors.surface.main,
+  [compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
   [compVars$2.stripeColorOpacity]: '0.5',
   [compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
   [compVars$2.labelTextWidth]: 'fit-content',
@@ -9712,7 +9798,7 @@ const loaderLinear = {
   [vars$g.barColor]: globalRefs$9.colors.surface.contrast,
   [vars$g.barWidth]: '20%',
 
-  [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.main,
+  [vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
   [vars$g.barBorderRadius]: '4px',
 
   [vars$g.animationDuration]: '2s',
@@ -9826,7 +9912,7 @@ const comboBox = {
   [vars$e.inputBackgroundColor]: refs.backgroundColor,
   [vars$e.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$e.inputHeight]: refs.inputHeight,
-  [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.main,
+  [vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
   [vars$e.inputDropdownButtonCursor]: 'pointer',
   [vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
@@ -10032,20 +10118,25 @@ const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
   [vars$8.hostDirection]: 'inherit',
-  [vars$8.backgroundColor]: globalRefs$6.colors.surface.light,
+  [vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
   [vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
-  [vars$8.borderColor]: globalRefs$6.colors.surface.main,
+  [vars$8.borderColor]: globalRefs$6.colors.surface.light,
   [vars$8.borderStyle]: 'solid',
   [vars$8.borderRadius]: globalRefs$6.radius.sm,
+  [vars$8.outlineColor]: 'transparent',
 
   _hover: {
-    [vars$8.backgroundColor]: '#f4f5f5', // can we take it from the palette?
+    [vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
+  },
+
+  _focused: {
+    [vars$8.outlineColor]: globalRefs$6.colors.surface.light,
   },
 
   _selected: {
     [vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
     [vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
-    [vars$8.labelTextColor]: globalRefs$6.colors.surface.light,
+    [vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
   },
 };
 
@@ -10096,7 +10187,7 @@ const globalRefs$4 = getThemeRefs(globals);
 const compVars = ModalClass.cssVarList;
 
 const modal = {
-  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.light,
+  [compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
   [compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
   [compVars.overlayWidth]: '540px',
 };
@@ -10119,28 +10210,28 @@ const grid = {
   [vars$4.hostHeight]: '100%',
   [vars$4.hostMinHeight]: '400px',
   [vars$4.fontWeight]: '400',
-  [vars$4.backgroundColor]: globalRefs$3.colors.surface.light,
+  [vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
 
   [vars$4.fontSize]: refs.fontSize,
   [vars$4.fontFamily]: refs.fontFamily,
 
-  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.main,
+  [vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
   [vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
-  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.main,
+  [vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
 
-  [vars$4.inputBorderWidth]: refs.borderWidth,
-  [vars$4.inputBorderStyle]: refs.borderStyle,
-  [vars$4.inputBorderRadius]: refs.borderRadius,
-  [vars$4.inputBorderColor]: 'transparent',
+  [vars$4.borderWidth]: refs.borderWidth,
+  [vars$4.borderStyle]: refs.borderStyle,
+  [vars$4.borderRadius]: refs.borderRadius,
+  [vars$4.borderColor]: 'transparent',
 
   [vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
-  [vars$4.separatorColor]: globalRefs$3.colors.surface.main,
+  [vars$4.separatorColor]: globalRefs$3.colors.surface.light,
 
   [vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
-  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.primary.contrast,
+  [vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
 
   _bordered: {
-    [vars$4.inputBorderColor]: refs.borderColor,
+    [vars$4.borderColor]: refs.borderColor,
   },
 };
 
@@ -10230,7 +10321,7 @@ const multiSelectComboBox = {
   [vars$2.inputHorizontalPadding]: refs.horizontalPadding,
   [vars$2.inputVerticalPadding]: refs.verticalPadding,
   [vars$2.inputHeight]: refs.inputHeight,
-  [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.main,
+  [vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.dark,
   [vars$2.inputDropdownButtonCursor]: 'pointer',
   [vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
   [vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
@@ -10238,7 +10329,7 @@ const multiSelectComboBox = {
   [vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
   [vars$2.chipFontSize]: refs.chipFontSize,
   [vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
-  [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.main,
+  [vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
 
   _readonly: {
     [vars$2.inputDropdownButtonCursor]: 'default',
@@ -10299,7 +10390,7 @@ const badge = {
     default: {
       [vars$1.textColor]: globalRefs.colors.surface.dark,
       _bordered: {
-        [vars$1.borderColor]: globalRefs.colors.surface.main,
+        [vars$1.borderColor]: globalRefs.colors.surface.light,
       },
     },
     primary: {
@@ -10383,5 +10474,49 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$y, components: vars };
 
-export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+const colors = {
+  surface: {
+    main: '#181a1c',
+    dark: '#bec4ca',
+    light: '#555f68',
+    highlight: '#22262a',
+    contrast: '#f5f6f7',
+  },
+  primary: {
+    main: '#1f80ff',
+    dark: '#71aeff',
+    light: '#004094',
+    highlight: '#00214d',
+    contrast: '#000000',
+  },
+  secondary: {
+    main: '#a665eb',
+    dark: '#b9a0f3',
+    light: '#683ae6',
+    highlight: '#361299',
+    contrast: '#000000',
+  },
+  success: {
+    main: '#27963c',
+    dark: '#8bc3a2',
+    light: '#004d0f',
+    highlight: '#001f00',
+    contrast: '#000000',
+  },
+  error: {
+    main: '#f85249',
+    dark: '#fa7c75',
+    light: '#c51107',
+    highlight: '#4a0603',
+    contrast: '#000000',
+  },
+};
+
+const darkTheme = merge({}, defaultTheme, {
+  globals: {
+    colors,
+  },
+});
+
+export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ComboBoxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NotificationClass, NotpImageClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, darkTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map