@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

@@ -17,53 +17,54 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     cursor: "pointer",
     userSelect: "none",
     position: "relative",
-    background: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     boxSizing: "border-box",
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    border: `1px solid ${uikitStyles.theme.colors.text}`,
     borderRadius: uikitStyles.theme.radii.base,
-    "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.primary}`
+    ":hover,:focus-visible": {
+      borderColor: uikitStyles.theme.colors.primary
     },
-    "&:focus": {
+    ":focus": {
       outline: "none"
     },
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      border: `1px solid ${uikitStyles.theme.colors.primary}`
+    ":focus-visible": {
+      ...focusUtils.outlineStyles
     }
   },
   headerOpen: {
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
-    "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+    "&,:hover": {
+      borderColor: uikitStyles.theme.colors.text
+    },
+    "&[data-popper-placement*='top']": {
+      borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+    },
+    "&[data-popper-placement*='bottom']": {
+      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
     }
   },
-  headerOpenUp: {
-    borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
-  },
-  headerOpenDown: {
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
-  },
+  /** @deprecated use `[data-popper-placement*='top']` selector instead */
+  headerOpenUp: {},
+  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */
+  headerOpenDown: {},
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: uikitStyles.theme.colors.secondary_60,
-    border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-    background: uikitStyles.theme.colors.atmo2,
-    "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+    color: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
+    "&,:hover": {
+      borderColor: "currentcolor"
     }
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: uikitStyles.theme.colors.secondary_80,
-    border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-    background: uikitStyles.theme.colors.atmo2,
+    color: uikitStyles.theme.colors.textSubtle,
+    borderColor: "currentcolor",
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     userSelect: "text",
-    "&:focus-visible": {
+    ":focus-visible": {
       outline: "none",
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+      borderColor: "currentcolor"
     }
   },
   arrowContainer: {
@@ -79,18 +80,19 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     height: "30px",
     boxSizing: "border-box",
     paddingLeft: uikitStyles.theme.space.xs,
-    paddingRight: uikitStyles.theme.sizes.sm
+    paddingRight: 32
   },
   selectionDisabled: {},
   placeholder: {
     display: "block",
-    color: uikitStyles.theme.colors.secondary_80
+    color: uikitStyles.theme.colors.textSubtle
   },
   panel: {
     // TODO: remove padding override in v6 (most elements need it)
     padding: 0,
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`
+    border: `1px solid ${uikitStyles.theme.colors.text}`
   },
+  // TODO: change from classes to [data-popper-placement] selectors
   panelOpenedUp: {
     top: 1,
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`
@@ -101,15 +103,15 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
   },
   inputExtensionOpen: {
     height: "0px",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderTop: "none",
     borderBottom: "none",
-    borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`,
-    borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`
+    borderRight: `1px solid ${uikitStyles.theme.colors.text}`,
+    borderLeft: `1px solid ${uikitStyles.theme.colors.text}`
   },
   inputExtensionLeftPosition: { marginLeft: "auto" },
   inputExtensionOpenShadow: {
-    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
   inputExtensionFloatRight: { float: "right" },
   inputExtensionFloatLeft: { float: "left" }

package/dist/cjs/BaseInput/BaseInput.styles.cjs

@@ -7,8 +7,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
   root: {
     // #region `input` style reset
     "input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.atmo1} inset`,
-      WebkitTextFillColor: uikitStyles.theme.colors.secondary
+      WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.textDimmed} inset`,
+      WebkitTextFillColor: uikitStyles.theme.colors.text
     },
     // Clears number input up/down arrows in Chrome and Firefox
     "input[type=number]": {
@@ -34,9 +34,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     borderRadius: uikitStyles.theme.radii.base,
     height: "32px",
     borderWidth: 1,
-    borderColor: uikitStyles.theme.colors.secondary,
+    borderColor: uikitStyles.theme.colors.text,
     boxSizing: "border-box",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     fontFamily: uikitStyles.theme.fontFamily.body,
     ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: uikitStyles.theme.colors.primary
@@ -46,15 +46,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     }
   },
   disabled: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
-    borderColor: uikitStyles.theme.colors.secondary_60,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
+    borderColor: uikitStyles.theme.colors.textDisabled,
     cursor: "not-allowed",
     "&&::before": {
       borderBottomStyle: "none"
     }
   },
   invalid: {
-    borderColor: uikitStyles.theme.colors.negative_120
+    borderColor: uikitStyles.theme.form.errorColor
   },
   multiline: {
     padding: 0,
@@ -71,19 +71,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
   },
   resizable: { width: "auto" },
   readOnly: {
-    borderColor: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo2
+    borderColor: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgPage
   },
   focused: {},
   /** @deprecated unused. use `::after` instead */
   inputBorderContainer: {},
   /** @deprecated use `classes.invalid` instead */
-  inputRootInvalid: { borderColor: uikitStyles.theme.colors.negative_120 },
+  inputRootInvalid: {},
   /** @deprecated use `classes.readOnly` instead */
-  inputRootReadOnly: {
-    borderColor: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo2
-  },
+  inputRootReadOnly: {},
   /** @deprecated use `classes.root` instead */
   inputRoot: {},
   /** @deprecated unused */
@@ -106,15 +103,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     ...uikitStyles.theme.typography.body,
     "&::placeholder": {
       opacity: 1,
-      color: uikitStyles.theme.colors.secondary_80
+      color: uikitStyles.theme.colors.textSubtle
     }
   },
   inputDisabled: {
-    color: uikitStyles.theme.colors.secondary_60,
-    WebkitTextFillColor: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled,
+    WebkitTextFillColor: uikitStyles.theme.colors.textDisabled
   },
   inputReadOnly: {
-    color: uikitStyles.theme.colors.secondary_80
+    color: uikitStyles.theme.colors.textSubtle
   },
   inputResizable: {
     resize: "both",

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -5,14 +5,12 @@ const React = require("react");
 const MuiRadio = require("@mui/material/Radio");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseRadio_styles = require("./BaseRadio.styles.cjs");
-const icons = require("./icons.cjs");
+const icons$1 = require("./icons.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiRadio__default = /* @__PURE__ */ _interopDefault(MuiRadio);
-const getSelectorIcons = () => {
-  return {
-    radio: /* @__PURE__ */ jsxRuntime.jsx(icons.Unselected, {}),
-    radioChecked: /* @__PURE__ */ jsxRuntime.jsx(icons.Selected, {})
-  };
+const icons = {
+  radio: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Unselected, {}),
+  radioChecked: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Selected, {})
 };
 const HvBaseRadio = React.forwardRef(
   function HvBaseRadio2(props, ref) {
@@ -52,7 +50,6 @@ const HvBaseRadio = React.forwardRef(
       },
       [onBlur]
     );
-    const icons2 = getSelectorIcons();
     const onLocalChange = React.useCallback(
       (evt) => {
         if (readOnly) {
@@ -78,8 +75,8 @@ const HvBaseRadio = React.forwardRef(
           },
           className
         ),
-        icon: icon || icons2.radio,
-        checkedIcon: checkedIcon || icons2.radioChecked,
+        icon: icon || icons.radio,
+        checkedIcon: checkedIcon || icons.radioChecked,
         color: "default",
         disabled,
         required,
@@ -98,4 +95,3 @@ const HvBaseRadio = React.forwardRef(
 );
 exports.baseRadioClasses = BaseRadio_styles.staticClasses;
 exports.HvBaseRadio = HvBaseRadio;
-exports.getSelectorIcons = getSelectorIcons;

package/dist/cjs/BaseRadio/BaseRadio.styles.cjs

@@ -10,62 +10,48 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     minWidth: 32,
     height: 32,
     cursor: "pointer",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
-      borderRadius: uikitStyles.theme.radii.base
-    },
     "& svg": {
       width: 16,
       height: 16,
-      borderRadius: uikitStyles.theme.radii.circle,
-      borderWidth: 1,
-      borderColor: uikitStyles.theme.colors.secondary,
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      borderRadius: uikitStyles.theme.radii.full,
+      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`,
+      backgroundColor: uikitStyles.theme.colors.bgContainer
     },
-    borderRadius: 0
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover,
+      borderRadius: uikitStyles.theme.radii.round
+    }
   },
   disabled: {
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
-      borderColor: uikitStyles.theme.colors.secondary_60,
-      backgroundColor: uikitStyles.theme.colors.atmo3
+      borderColor: uikitStyles.theme.colors.textDisabled,
+      backgroundColor: uikitStyles.theme.colors.bgDisabled
     }
   },
   focusVisible: {
     "& svg": {
-      borderRadius: "8px",
+      borderRadius: uikitStyles.theme.radii.full,
       ...focusUtils.outlineStyles
     }
   },
   icon: {},
   checked: {
     "& svg": {
-      borderColor: uikitStyles.theme.colors.secondary,
-      backgroundColor: uikitStyles.theme.colors.secondary,
-      color: uikitStyles.theme.colors.atmo2
-    },
-    "&$semantic": {
-      "& svg": {
-        borderColor: uikitStyles.theme.colors.base_dark,
-        backgroundColor: uikitStyles.theme.colors.base_light,
-        color: uikitStyles.theme.colors.base_dark
-      }
+      borderColor: "transparent",
+      backgroundColor: uikitStyles.theme.colors.primaryStrong,
+      color: uikitStyles.theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        borderColor: uikitStyles.theme.colors.secondary_60,
-        backgroundColor: uikitStyles.theme.colors.secondary_60,
-        color: uikitStyles.theme.colors.atmo3
+        borderColor: "transparent",
+        backgroundColor: uikitStyles.theme.colors.borderDisabled,
+        color: uikitStyles.theme.colors.bgDisabled
       }
     }
   },
-  semantic: {
-    "& svg": {
-      borderColor: uikitStyles.theme.colors.base_dark,
-      backgroundColor: uikitStyles.theme.colors.base_light
-    }
-  }
+  semantic: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/BaseSwitch/BaseSwitch.styles.cjs

@@ -11,9 +11,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
     height: "32px",
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: uikitStyles.theme.radii.base,
+    borderRadius: uikitStyles.theme.radii.round,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     // Higher CSS specificity here
     "& $switchBase": {
@@ -24,7 +24,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
         transform: "translateX(16px)",
         "& + $track": {
           opacity: 1,
-          backgroundColor: uikitStyles.theme.colors.secondary
+          backgroundColor: uikitStyles.theme.colors.primary,
+          borderColor: "transparent"
+        },
+        "& $thumb:not:has($disabled)": {
+          borderColor: "transparent"
         },
         "&:hover": {
           backgroundColor: "transparent"
@@ -36,8 +40,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
       "& $switchBase": {
         "& + $track": {
           opacity: 1,
-          backgroundColor: uikitStyles.theme.colors.atmo3,
-          border: `solid 1px ${uikitStyles.theme.colors.secondary_60}`
+          backgroundColor: uikitStyles.theme.colors.bgDisabled,
+          border: `solid 1px ${uikitStyles.theme.colors.borderDisabled}`
         }
       }
     }
@@ -57,19 +61,19 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
   },
   track: {
     opacity: 1,
-    borderRadius: "15px",
+    borderRadius: uikitStyles.theme.radii.full,
     height: "16px",
     width: "32px",
-    border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    border: `solid 1px ${uikitStyles.theme.colors.borderStrong}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   },
   thumb: {
     position: "relative",
     left: "-9px",
-    width: "12px",
-    height: "12px",
-    border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    width: "10px",
+    height: "10px",
+    border: `solid 1px ${uikitStyles.theme.colors.borderStrong}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     marginLeft: "2px",
     marginTop: 0,
     boxShadow: "none"
@@ -81,8 +85,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
       cursor: "not-allowed"
     },
     "& $thumb": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      border: `solid 1px ${uikitStyles.theme.colors.secondary_60}`
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+      border: `solid 1px ${uikitStyles.theme.colors.textDisabled}`
     }
   },
   readOnly: {},

package/dist/cjs/BreadCrumb/Page/Page.styles.cjs

@@ -11,10 +11,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBreadCrum
     textTransform: "capitalize",
     "&:hover": {
       cursor: "pointer",
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "&:focus": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "&:focus-visible": {
       ...focusUtils.outlineStyles

package/dist/cjs/BreadCrumb/PathElement/PathElement.cjs

@@ -15,7 +15,7 @@ const HvPathElement = ({
       uikitReactIcons.DropRightXS,
       {
         className: classes.separatorContainer,
-        color: "secondary_60"
+        color: "textDisabled"
       }
     )
   ] });

package/dist/cjs/BreadCrumb/utils.cjs

@@ -19,7 +19,7 @@ const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps)
       DropDownMenu.HvDropDownMenu,
       {
         id: setId.setId(id, "submenu"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, { iconSize: "S", color: "secondary" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, { iconSize: "S", color: "text" }),
         dataList: subMenuList,
         ...dropDownMenuProps,
         onClick: onClick != null ? handleClick : void 0

package/dist/cjs/BulkActions/BulkActions.styles.cjs

@@ -8,29 +8,30 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActio
   root: {
     display: "flex",
     alignItems: "center",
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    border: `1px solid ${uikitStyles.theme.colors.border}`,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     padding: uikitStyles.theme.spacing("xs", "md"),
     marginBottom: uikitStyles.theme.space.xs
   },
   semantic: {
-    backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+    backgroundColor: uikitStyles.theme.colors.bgHover,
     "& $selectAll div": {
       "&:hover:not(:disabled)": {
-        backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
+        backgroundColor: uikitStyles.theme.alpha("textLight", 0.3)
       }
     },
     "& $selectAll:focus-within div": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.3)
     }
   },
   actions: {
     display: "inline-flex",
     marginLeft: "auto",
     [`& .${ActionsGeneric_styles.staticClasses.dropDownMenuButton}:disabled`]: {
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      "&:hover": { backgroundColor: "transparent", borderColor: "transparent" }
+      "&,:hover": {
+        backgroundColor: "transparent",
+        borderColor: "transparent"
+      }
     }
   },
   selectAllContainer: { display: "flex", alignItems: "center" },
@@ -38,7 +39,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActio
   selectAllPages: {},
   divider: {
     display: "flex",
-    backgroundColor: uikitStyles.theme.colors.atmo4,
+    backgroundColor: uikitStyles.theme.colors.border,
     width: "1px",
     height: "32px",
     marginLeft: uikitStyles.theme.space.sm

package/dist/cjs/Button/Button.styles.cjs

@@ -15,7 +15,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     // Background color common for almost all variants
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+        backgroundColor: uikitStyles.theme.colors.bgHover
       }
     },
     ":focus-visible": {
@@ -26,28 +26,30 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     ...uikitStyles.theme.typography.label,
     color: "var(--color, currentcolor)",
     backgroundColor: "transparent",
-    height: "var(--HvButton-height)",
+    height: "var(--HvButton-height, fit-content)",
     border: "1px solid transparent",
     borderRadius: `var(--radius, ${uikitStyles.theme.radii.base})`,
-    padding: uikitStyles.theme.spacing(0, "sm")
+    padding: uikitStyles.theme.spacing(0, "sm"),
+    "& $startIcon, & $endIcon": {
+      flexShrink: 0,
+      lineHeight: 0,
+      marginTop: -1,
+      marginBottom: -1
+    }
   },
   /** applied to the _left_ icon container */
   startIcon: {
-    marginLeft: uikitStyles.theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginLeft: uikitStyles.theme.spacing(-1)
   },
   /** applied to the _right_ icon container */
   endIcon: {
-    marginRight: uikitStyles.theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1
+    marginRight: uikitStyles.theme.spacing(-1)
   },
   focusVisible: {},
   /** applied to the root element when disabled */
   disabled: {
     cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     backgroundColor: "transparent",
     borderColor: "transparent",
     ":hover, :focus-visible": {
@@ -59,15 +61,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   icon: {
     margin: 0,
     padding: 0,
-    height: "fit-content",
-    "& > *": {
-      margin: -1
-    }
+    width: "var(--HvButton-height, fit-content)"
   },
   /** applied to the root element when using the `contained` variant */
   contained: {
-    color: uikitStyles.theme.colors.atmo1,
-    // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,
+    color: uikitStyles.theme.colors.textDimmed,
+    // `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,
     backgroundColor: "var(--color)",
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
@@ -86,17 +85,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   ghost: {},
   /** applied to the root element when using the `semantic` variant */
   semantic: {
-    color: uikitStyles.theme.colors.base_dark,
+    color: uikitStyles.theme.colors.textDark,
     backgroundColor: "transparent",
     borderColor: "transparent",
     "&:hover, &:focus-visible": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.3)
     },
     "&:active": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.5)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.5)
     },
     "&$disabled": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.1)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.1)
     }
   },
   // TODO - remove in v6

package/dist/cjs/ButtonBase/ButtonBase.styles.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButtonBas
     // Background color common for almost all variants
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+        backgroundColor: uikitStyles.theme.colors.bgHover
       }
     },
     ":focus-visible": {
@@ -25,7 +25,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButtonBas
   },
   disabled: {
     cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     "&:hover, &:focus-visible": {
       backgroundColor: "transparent"
     }

package/dist/cjs/Calendar/Calendar.styles.cjs

@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendar"
           "& > div:nth-of-type(3)": {
             "& > div": {
               "& > div[data-calendar-cell='calendarCell']": {
-                backgroundColor: uikitStyles.theme.colors.atmo1
+                backgroundColor: uikitStyles.theme.colors.bgContainer
               }
             }
           }

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarH
   },
   invalid: {},
   headerDayOfWeek: {
-    color: uikitStyles.theme.colors.secondary_80
+    color: uikitStyles.theme.colors.textSubtle
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.cjs

@@ -19,7 +19,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMonthSele
     width: "92px"
   },
   calendarMonthlyCellSelected: {
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Calendar/CalendarNavigation/Navigation/Navigation.styles.cjs

@@ -14,7 +14,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvNavigatio
   text: {
     minWidth: "unset",
     flex: 1,
-    color: uikitStyles.theme.colors.secondary,
+    color: uikitStyles.theme.colors.text,
     fontWeight: uikitStyles.theme.typography.body.fontWeight,
     padding: 0
   },