@hitachivantara/uikit-react-core 5.89.0 → 5.90.0

package/dist/cjs/ActionBar/ActionBar.styles.cjs

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvActionBar
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,
-    borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderTop: `1px solid ${uikitStyles.theme.colors.border}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -64,7 +64,7 @@ const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref)
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
     const actsDropdown = actions.slice(maxVisibleActions);
-    const iconColor = variant === "semantic" && "base_dark" || void 0;
+    const iconColor = variant === "semantic" && "textDark" || void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/AppSwitcher/Action/Action.cjs

@@ -23,8 +23,8 @@ const HvAppSwitcherAction = ({
   const { classes, cx } = Action_styles.useClasses(classesProp);
   const { name, description, disabled, iconElement, iconUrl, url, target } = application;
   const color = uikitStyles.getColor(
-    disabled ? "secondary_60" : application?.color,
-    "secondary"
+    disabled ? "textDisabled" : application?.color,
+    "text"
   );
   const [validIconUrl, setValidIconUrl] = React.useState(true);
   const renderApplicationIcon = () => {

package/dist/cjs/AppSwitcher/Action/Action.styles.cjs

@@ -23,7 +23,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       minHeight: 52,
       padding: `6px ${uikitStyles.theme.space.xs}`,
       border: "none",
-      borderLeft: `solid 2px ${uikitStyles.theme.colors.secondary}`,
+      borderLeft: `2px solid currentcolor`,
       cursor: "pointer",
       textDecoration: "inherit",
       backgroundColor: "inherit",

package/dist/cjs/Avatar/Avatar.cjs

@@ -20,8 +20,8 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     children: childrenProp,
     component = "div",
     size: sizeProp,
-    backgroundColor = "secondary",
-    color = "atmo1",
+    backgroundColor = "text",
+    color = "bgContainer",
     src,
     srcSet,
     sizes: sizes$1,
@@ -73,18 +73,15 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     inlineStyle.borderRadius = "50%";
   }
   if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = uikitStyles.getColor(
-      backgroundColor,
-      uikitStyles.theme.colors.secondary
-    );
-    inlineStyle.color = uikitStyles.getColor(color, uikitStyles.theme.colors.atmo1);
+    inlineStyle.backgroundColor = uikitStyles.getColor(backgroundColor, "text");
+    inlineStyle.color = uikitStyles.getColor(color, "textDimmed");
   }
   const statusInlineStyle = {};
   if (status) {
-    const statusColor = uikitStyles.getColor(status, uikitStyles.theme.colors.positive);
+    const statusColor = uikitStyles.getColor(status, "positive");
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
-  const badgeColor = uikitStyles.getColor(badge || "", uikitStyles.theme.colors.positive);
+  const badgeColor = uikitStyles.getColor(badge || "", "positive");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/cjs/Avatar/Avatar.styles.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
 const EXTRA_SMALL = { container: "32px", avatar: "24px" };
 const SMALL = { container: "40px", avatar: "32px" };
@@ -61,7 +62,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
     position: "absolute",
     top: 0,
     right: 0,
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     zIndex: 1
   },
   xs: {},
@@ -69,7 +70,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
   md: {},
   lg: {},
   xl: {},
-  circular: { borderRadius: "50%" },
+  circular: { borderRadius: uikitStyles.theme.radii.full },
   square: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -61,7 +61,7 @@ const Overflow = ({
         Avatar.HvAvatar,
         {
           size,
-          backgroundColor: uikitStyles.theme.colors.atmo4,
+          backgroundColor: uikitStyles.theme.colors.border,
           classes: {
             avatar: css({
               [`&.HvAvatar-${size}`]: {

package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatarGro
   root: {
     display: "flex",
     [`& .${Avatar_styles.staticClasses.root}`]: {
-      border: `2px solid ${uikitStyles.theme.colors.atmo2}`,
+      border: `2px solid ${uikitStyles.theme.colors.bgPage}`,
       boxSizing: "content-box"
     },
     "&$row": {

package/dist/cjs/Badge/Badge.styles.cjs

@@ -9,9 +9,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
   /** class applied to the badge */
   badgePosition: {
     ...uikitStyles.theme.typography.caption2,
-    color: uikitStyles.theme.colors.atmo1,
+    color: uikitStyles.theme.colors.textDimmed,
     borderRadius: uikitStyles.theme.radii.full,
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",

package/dist/cjs/Banner/Banner.cjs

@@ -16,6 +16,7 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
     id,
     classes: classesProp,
     className,
+    title,
     open,
     onClose,
     anchorOrigin = "top",
@@ -72,6 +73,7 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
         BannerContent.HvBannerContent,
         {
           id: setId.setId(id, "content"),
+          title,
           variant,
           customIcon,
           showIcon,

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs

@@ -14,12 +14,14 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBannerCon
   warning: {},
   error: {},
   default: {},
+  info: {},
+  accent: {},
   message: {
     gap: uikitStyles.theme.space.xs,
     padding: uikitStyles.theme.spacing("xs", 0),
     paddingLeft: uikitStyles.theme.space.sm,
     ...uikitStyles.theme.typography.body,
-    color: uikitStyles.theme.colors.base_dark
+    color: uikitStyles.theme.colors.textDark
   },
   action: {
     padding: uikitStyles.theme.space.xs,

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -12,14 +12,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     borderRadius: uikitStyles.theme.radii.base,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "& svg": {
       width: 16,
       height: 16,
-      color: uikitStyles.theme.colors.atmo1,
+      color: uikitStyles.theme.colors.bgContainer,
       borderRadius: uikitStyles.theme.radii.none,
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      border: `1px solid ${uikitStyles.theme.colors.text}`
     }
   },
   disabled: {
@@ -27,9 +27,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
       cursor: "not-allowed",
       pointerEvents: "initial",
       "& svg": {
-        color: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60,
-        backgroundColor: uikitStyles.theme.colors.atmo3
+        color: uikitStyles.theme.colors.bgDisabled,
+        borderColor: uikitStyles.theme.colors.textDisabled,
+        backgroundColor: uikitStyles.theme.colors.bgDisabled
       }
     }
   },
@@ -41,36 +41,36 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
   icon: {},
   checked: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
-      backgroundColor: uikitStyles.theme.colors.secondary,
-      color: uikitStyles.theme.colors.atmo1
+      border: `1px solid ${uikitStyles.theme.colors.text}`,
+      backgroundColor: uikitStyles.theme.colors.text,
+      color: uikitStyles.theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.secondary_60
+        color: uikitStyles.theme.colors.textDisabled
       }
     }
   },
   indeterminate: {
     "& svg": {
-      color: uikitStyles.theme.colors.secondary
+      color: uikitStyles.theme.colors.text
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.secondary_60
+        color: uikitStyles.theme.colors.textDisabled
       }
     }
   },
   semantic: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.base_dark}`,
-      color: uikitStyles.theme.colors.base_light,
-      backgroundColor: uikitStyles.theme.colors.base_dark
+      border: `1px solid ${uikitStyles.theme.colors.textDark}`,
+      color: uikitStyles.theme.colors.textLight,
+      backgroundColor: uikitStyles.theme.colors.textDark
     },
     "&$indeterminate": {
       "& svg": {
-        color: uikitStyles.theme.colors.base_dark,
-        backgroundColor: uikitStyles.theme.colors.base_light
+        color: uikitStyles.theme.colors.textDark,
+        backgroundColor: uikitStyles.theme.colors.textLight
       }
     }
   }

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -123,7 +123,7 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
           ExpanderComponent,
           {
             iconSize: "XS",
-            color: disabled ? "secondary_60" : void 0,
+            color: disabled ? "textDisabled" : void 0,
             className: classes.arrow
           }
         ) })

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

@@ -17,9 +17,9 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     cursor: "pointer",
     userSelect: "none",
     position: "relative",
-    background: uikitStyles.theme.colors.atmo1,
+    background: 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}`
@@ -33,9 +33,9 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     }
   },
   headerOpen: {
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    border: `1px solid ${uikitStyles.theme.colors.text}`,
     "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      border: `1px solid ${uikitStyles.theme.colors.text}`
     }
   },
   headerOpenUp: {
@@ -47,23 +47,23 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
   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,
+    color: uikitStyles.theme.colors.textDisabled,
+    border: `1px solid currentcolor`,
+    background: uikitStyles.theme.colors.bgPage,
     "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+      border: `1px solid 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,
+    border: `1px solid currentcolor`,
+    background: uikitStyles.theme.colors.bgPage,
     userSelect: "text",
     "&:focus-visible": {
       outline: "none",
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+      border: `1px solid currentcolor`
     }
   },
   arrowContainer: {
@@ -79,17 +79,17 @@ 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}`
   },
   panelOpenedUp: {
     top: 1,
@@ -101,15 +101,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.styles.cjs

@@ -11,16 +11,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     height: 32,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       borderRadius: uikitStyles.theme.radii.base
     },
     "& svg": {
       width: 16,
       height: 16,
-      borderRadius: uikitStyles.theme.radii.circle,
+      borderRadius: uikitStyles.theme.radii.full,
       borderWidth: 1,
-      borderColor: uikitStyles.theme.colors.secondary,
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      borderColor: uikitStyles.theme.colors.text,
+      backgroundColor: uikitStyles.theme.colors.bgContainer
     },
     borderRadius: 0
   },
@@ -28,8 +28,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     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: {
@@ -41,29 +41,29 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
   icon: {},
   checked: {
     "& svg": {
-      borderColor: uikitStyles.theme.colors.secondary,
-      backgroundColor: uikitStyles.theme.colors.secondary,
-      color: uikitStyles.theme.colors.atmo2
+      borderColor: uikitStyles.theme.colors.text,
+      backgroundColor: uikitStyles.theme.colors.text,
+      color: uikitStyles.theme.colors.bgPage
     },
     "&$semantic": {
       "& svg": {
-        borderColor: uikitStyles.theme.colors.base_dark,
-        backgroundColor: uikitStyles.theme.colors.base_light,
-        color: uikitStyles.theme.colors.base_dark
+        borderColor: uikitStyles.theme.colors.textDark,
+        backgroundColor: uikitStyles.theme.colors.textLight,
+        color: uikitStyles.theme.colors.textDark
       }
     },
     "&$disabled": {
       "& svg": {
-        borderColor: uikitStyles.theme.colors.secondary_60,
-        backgroundColor: uikitStyles.theme.colors.secondary_60,
-        color: uikitStyles.theme.colors.atmo3
+        borderColor: uikitStyles.theme.colors.textDisabled,
+        backgroundColor: uikitStyles.theme.colors.textDisabled,
+        color: uikitStyles.theme.colors.bgDisabled
       }
     }
   },
   semantic: {
     "& svg": {
-      borderColor: uikitStyles.theme.colors.base_dark,
-      backgroundColor: uikitStyles.theme.colors.base_light
+      borderColor: uikitStyles.theme.colors.textDark,
+      backgroundColor: uikitStyles.theme.colors.textLight
     }
   }
 });

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

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
     justifyContent: "center",
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     // Higher CSS specificity here
     "& $switchBase": {
@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
         transform: "translateX(16px)",
         "& + $track": {
           opacity: 1,
-          backgroundColor: uikitStyles.theme.colors.secondary
+          backgroundColor: uikitStyles.theme.colors.text
         },
         "&:hover": {
           backgroundColor: "transparent"
@@ -36,8 +36,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.textDisabled}`
         }
       }
     }
@@ -60,16 +60,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
     borderRadius: "15px",
     height: "16px",
     width: "32px",
-    border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    border: `solid 1px ${uikitStyles.theme.colors.text}`,
+    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,
+    border: `solid 1px ${uikitStyles.theme.colors.text}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     marginLeft: "2px",
     marginTop: 0,
     boxShadow: "none"
@@ -81,8 +81,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,20 +8,20 @@ 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: {
@@ -38,7 +38,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