@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

package/dist/cjs/DropdownButton/DropdownButton.styles.cjs

@@ -5,17 +5,10 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const Button_styles = require("../Button/Button.styles.cjs");
 require("../Button/Button.cjs");
 const disabledStyle = {
-  backgroundColor: uikitStyles.theme.colors.atmo3,
-  borderColor: uikitStyles.theme.colors.atmo3,
-  [`&.${Button_styles.staticClasses.subtle}`]: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    borderColor: uikitStyles.theme.colors.atmo3,
-    "&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3 }
-  },
-  [`&.${Button_styles.staticClasses.ghost}`]: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    borderColor: uikitStyles.theme.colors.atmo3,
-    "&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3 }
+  [`&,&.${Button_styles.staticClasses.subtle},&.${Button_styles.staticClasses.ghost}`]: {
+    backgroundColor: uikitStyles.theme.colors.bgDisabled,
+    borderColor: uikitStyles.theme.colors.bgDisabled,
+    "&:hover": { backgroundColor: uikitStyles.theme.colors.bgDisabled }
   }
 };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownButton", {
@@ -37,13 +30,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownB
     ...disabledStyle
   },
   open: {
-    backgroundColor: uikitStyles.theme.colors.atmo1
-  },
-  openUp: {
-    borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
-  },
-  openDown: {
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
+    "--r": uikitStyles.theme.radii.base,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    "&[data-popper-placement*='top']": {
+      borderRadius: "0px 0px var(--r) var(--r)"
+    },
+    "&[data-popper-placement*='bottom']": {
+      borderRadius: "var(--r) var(--r) 0px 0px"
+    }
   },
   selection: {
     color: "inherit",

package/dist/cjs/FileUploader/DropZone/DropZone.styles.cjs

@@ -8,15 +8,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     position: "relative",
     width: "100%",
     display: "flex",
-    border: `1px dashed ${uikitStyles.theme.colors.secondary_60}`,
+    border: `1px dashed ${uikitStyles.theme.colors.textDisabled}`,
     cursor: "pointer",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderRadius: uikitStyles.theme.radii.round,
     "&:hover": {
-      borderColor: uikitStyles.theme.colors.secondary
+      borderColor: uikitStyles.theme.colors.text
     },
     "&:focus-within": {
-      borderColor: uikitStyles.theme.colors.secondary,
+      borderColor: uikitStyles.theme.colors.text,
       ...focusUtils.outlineStyles
     }
   },
@@ -29,12 +29,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropZone"
     }
   },
   dragAction: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderColor: uikitStyles.theme.colors.primary
   },
   dropZoneContainerDisabled: {
-    color: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo3,
+    color: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled,
     borderColor: "currentcolor",
     cursor: "not-allowed",
     "&:hover": {

package/dist/cjs/FileUploader/File/File.cjs

@@ -61,8 +61,10 @@ const HvFile = (props) => {
       }
     ),
     statusIcon,
-    /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.nameText, variant: "label", children: data.name }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.progressTextContainer, children: progressText }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.nameText, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { noWrap: true, variant: "label", children: data.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.progressTextContainer, children: progressText })
+    ] }),
     data.preview && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.previewContainer, children: data.preview }),
     /* @__PURE__ */ jsxRuntime.jsx(
       IconButton.HvIconButton,

package/dist/cjs/FileUploader/File/File.styles.cjs

@@ -3,7 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFile", {
-  root: {},
+  root: {
+    position: "relative",
+    display: "flex",
+    gap: uikitStyles.theme.space.xs,
+    alignItems: "center",
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    padding: uikitStyles.theme.space.xs,
+    border: `1px solid ${uikitStyles.theme.colors.border}`,
+    borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`
+  },
   progressbar: {
     position: "absolute",
     top: "-1px"
@@ -13,23 +22,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFile", {
   },
   progressbarBack: {},
   nameText: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
+    display: "flex",
+    alignItems: "center",
+    flex: 1
   },
   progressTextContainer: {
     display: "flex",
     flexGrow: 1,
     alignItems: "center"
   },
-  removeButton: {
-    width: 32,
-    height: 32,
-    margin: `0px ${uikitStyles.theme.space.xs}`
-  },
+  removeButton: {},
   previewContainer: {
     display: "flex",
-    margin: `0px ${uikitStyles.theme.space.xs}`,
     width: "48px",
     height: "48px",
     justifyContent: "center",
@@ -50,9 +54,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFile", {
     }
   },
   icon: {
-    width: 32,
-    height: 32,
-    margin: `0px ${uikitStyles.theme.space.xs}`
+    margin: uikitStyles.theme.space.xs
   },
   fail: {}
 });

package/dist/cjs/FileUploader/FileList/FileList.cjs

@@ -16,7 +16,7 @@ const HvFileList = (props) => {
   const { classes } = FileList_styles.useClasses(classesProp);
   const hasFiles = list.length > 0;
   if (!hasFiles) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { id: setId.setId(id, "list"), className: classes.list, children: list.map((data) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { id: setId.setId(id, "list"), className: classes.root, children: list.map((data) => /* @__PURE__ */ jsxRuntime.jsx(
     File.HvFile,
     {
       classes: { root: classes?.listItem },

package/dist/cjs/FileUploader/FileList/FileList.styles.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFileList", {
-  list: {
+  root: {
     display: "flex",
     flexDirection: "column",
     gap: uikitStyles.theme.space.xs,
@@ -12,15 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFileList"
     marginTop: uikitStyles.theme.space.sm,
     listStyle: "none"
   },
-  listItem: {
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    background: uikitStyles.theme.colors.atmo1,
-    padding: `${uikitStyles.theme.space.xs} 0px`,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-    borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`
-  }
+  listItem: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/FileUploader/Preview/Preview.styles.cjs

@@ -19,7 +19,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       display: "none",
       justifyContent: "center",
       alignItems: "center",
-      backgroundColor: uikitStyles.theme.colors.primary_20,
+      backgroundColor: uikitStyles.theme.colors.primaryDimmed,
       opacity: "1",
       borderRadius: uikitStyles.theme.radii.base
     }

package/dist/cjs/FilterGroup/FilterContent/FilterContent.styles.cjs

@@ -31,7 +31,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     verticalAlign: "top",
     overflow: "visible",
     boxShadow: "none",
-    borderLeft: `1px solid ${uikitStyles.theme.colors.atmo3}`
+    borderLeft: `1px solid ${uikitStyles.theme.colors.bgPageSecondary}`
   },
   leftSidePanel: {
     display: "inline-block",

package/dist/cjs/Footer/Footer.styles.cjs

@@ -7,12 +7,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    padding: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`,
+    gap: uikitStyles.theme.space.xs,
+    padding: uikitStyles.theme.spacing("xs", "sm"),
     height: 40,
     bottom: 0,
     zIndex: uikitStyles.theme.zIndices.base,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    boxShadow: `0 -1px 0 ${uikitStyles.theme.colors.atmo4}`
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    boxShadow: `0 -1px 0 ${uikitStyles.theme.colors.border}`
   },
   name: {},
   rightContainer: {
@@ -25,8 +26,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
   separator: {
     width: 1,
     height: 16,
-    backgroundColor: uikitStyles.theme.colors.secondary,
-    margin: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`
+    backgroundColor: uikitStyles.theme.colors.text,
+    margin: uikitStyles.theme.spacing("xs", "sm")
   },
   small: {
     "&$root": {
@@ -34,17 +35,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
       flexDirection: "column",
       padding: uikitStyles.theme.space.xs
     },
-    "& $name": {
-      marginBottom: uikitStyles.theme.space.xs
-    },
     "& $rightContainer": {
-      flexDirection: "column",
-      textAlign: "center",
-      marginLeft: "unset"
-    },
-    "& $copyright": {
-      flexDirection: "column",
-      marginBottom: uikitStyles.theme.space.xs
+      display: "contents"
     },
     "& $separator": { display: "none" }
   }

package/dist/cjs/FormElement/CharCounter/CharCounter.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCharCounter", {
   root: { display: "inline-block", float: "right" },
-  counterDisabled: { color: uikitStyles.theme.colors.secondary_60 },
+  counterDisabled: { color: uikitStyles.theme.colors.textDisabled },
   gutter: { paddingLeft: "6px" },
   overloaded: { color: uikitStyles.theme.colors.negative }
 });

package/dist/cjs/FormElement/InfoMessage/InfoMessage.styles.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInfoMessage", {
-  root: { color: uikitStyles.theme.colors.secondary_80, display: "inline-block" },
-  infoDisabled: { color: uikitStyles.theme.colors.secondary_60 },
+  root: { color: uikitStyles.theme.colors.textSubtle, display: "inline-block" },
+  infoDisabled: { color: uikitStyles.theme.colors.textDisabled },
   gutter: { padding: `0 0 6px ${uikitStyles.theme.space.xs}` }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/FormElement/Label/Label.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLabel", {
   root: { fontWeight: uikitStyles.theme.fontWeights.normal, display: "inline-block" },
-  labelDisabled: { color: uikitStyles.theme.colors.secondary_60 },
+  labelDisabled: { color: uikitStyles.theme.colors.textDisabled },
   childGutter: { paddingBottom: 4 }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/FormElement/Suggestions/Suggestions.styles.cjs

@@ -5,8 +5,8 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSuggestions", {
   root: { position: "relative" },
   list: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    border: `1px solid ${uikitStyles.theme.colors.text}`,
     boxShadow: uikitStyles.theme.colors.shadow,
     padding: uikitStyles.theme.space.xs,
     width: "100%"

package/dist/cjs/FormElement/WarningText/WarningText.styles.cjs

@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvWarningText", {
   root: {
     display: "none",
-    color: uikitStyles.theme.colors.negative_120
+    color: uikitStyles.theme.form.errorColor
   },
   defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
   warningText: {

package/dist/cjs/GlobalActions/GlobalActions.styles.cjs

@@ -25,13 +25,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvGlobalAct
       display: "flex",
       position: "absolute",
       inset: 0,
-      background: uikitStyles.theme.colors.atmo2,
+      background: uikitStyles.theme.colors.bgPage,
       opacity: "75%"
     },
     "& $wrapper": {
       top: 0,
       left: 0,
-      backgroundColor: uikitStyles.theme.colors.atmo1,
+      backgroundColor: uikitStyles.theme.colors.bgContainer,
       width: "100%",
       borderWidth: 1,
       borderRadius: uikitStyles.theme.radii.round
@@ -50,7 +50,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvGlobalAct
     justifyContent: "flex-start",
     alignItems: "center",
     gap: uikitStyles.theme.space.xs,
-    borderColor: uikitStyles.theme.colors.atmo4,
+    borderColor: uikitStyles.theme.colors.border,
     paddingLeft: uikitStyles.theme.space.sm
   },
   /** @deprecated use classes.global $wrapper */

package/dist/cjs/Header/Actions/Actions.styles.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader-Ac
     alignItems: "center",
     marginLeft: "auto",
     [`& .${Button_styles.staticClasses?.root}`]: {
-      "&:hover": { backgroundColor: uikitStyles.theme.colors.containerBackgroundHover }
+      "&:hover": { backgroundColor: uikitStyles.theme.colors.bgHover }
     }
   }
 });

package/dist/cjs/Header/Brand/Brand.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader-Br
     width: 1,
     height: uikitStyles.theme.space.sm,
     margin: uikitStyles.theme.space.xs,
-    backgroundColor: uikitStyles.theme.colors.secondary
+    backgroundColor: uikitStyles.theme.colors.text
   },
   brandName: {}
 });

package/dist/cjs/Header/Header.styles.cjs

@@ -5,7 +5,7 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader", {
   root: {
     height: uikitStyles.theme.header.height,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader",
     alignItems: "center",
     width: "100%",
     height: "100%",
-    padding: `0 ${uikitStyles.theme.space.sm}`,
+    padding: uikitStyles.theme.spacing(0, "sm"),
     "& > *:not(nav)": {
       zIndex: 2
     }

package/dist/cjs/Header/Navigation/MenuBar/Bar.styles.cjs

@@ -7,7 +7,7 @@ const show = {
   transition: ["top"],
   boxShadow: uikitStyles.theme.colors.shadow,
   transitionDuration: "500ms",
-  backgroundColor: uikitStyles.theme.colors.atmo2
+  backgroundColor: uikitStyles.theme.colors.bgPage
 };
 const hide = {
   top: 0,
@@ -28,14 +28,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvHeader-Me
     position: "absolute",
     zIndex: -2,
     height: uikitStyles.theme.header.secondLevelHeight,
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     "& li > div": {
       marginTop: 0
     }
   },
   menubar: {
     position: "relative",
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   },
   hidden: { ...hide },
   active: { ...show },

package/dist/cjs/Header/Navigation/MenuItem/MenuItem.styles.cjs

@@ -47,14 +47,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       height: "100%",
       borderBottom: "4px solid transparent",
       ":hover, :focus-within": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+        backgroundColor: uikitStyles.theme.colors.bgHover
       }
     },
     menu: {},
     menubar: {},
     selected: {
-      borderColor: uikitStyles.theme.colors.secondary,
-      color: uikitStyles.theme.colors.secondary
+      color: uikitStyles.theme.colors.text,
+      borderColor: "currentcolor"
     },
     item,
     link: {

package/dist/cjs/InlineEditor/InlineEditor.cjs

@@ -99,11 +99,10 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
     Button.HvButton,
     {
       variant: "secondaryGhost",
-      overrideIconColors: false,
       endIcon: /* @__PURE__ */ jsxRuntime.jsx(
         uikitReactIcons.Edit,
         {
-          color: "secondary_60",
+          color: "textDisabled",
           className: cx(classes.icon, {
             [classes.iconVisible]: showIcon
           })

package/dist/cjs/InlineEditor/InlineEditor.styles.cjs

@@ -14,10 +14,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEdi
   text: {},
   largeText: {},
   textEmpty: {
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled
   },
   button: {
-    padding: uikitStyles.theme.spacing("6px", "8px", "5px", "8px"),
+    padding: uikitStyles.theme.spacing(0, "xs"),
     minHeight: "32px",
     boxSizing: "border-box",
     cursor: "text",
@@ -27,17 +27,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInlineEdi
     justifyContent: "start",
     textAlign: "start",
     alignItems: "center",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderColor: "transparent",
     "&:hover, &:focus": {
       borderColor: uikitStyles.theme.colors.primary,
-      backgroundColor: uikitStyles.theme.colors.atmo1,
+      backgroundColor: uikitStyles.theme.colors.bgContainer,
       "& $icon": {
         visibility: "visible"
       }
     },
     "&:active": {
-      borderColor: uikitStyles.theme.colors.secondary,
+      borderColor: uikitStyles.theme.colors.text,
       backgroundColor: "transparent",
       "& $icon": {
         visibility: "visible"

package/dist/cjs/Input/Input.styles.cjs

@@ -33,8 +33,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
   },
   inputExtension: {
     height: uikitStyles.theme.space.xs,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
-    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
+    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.bgContainer}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
   input: {},
   inputRoot: {

package/dist/cjs/List/List.styles.cjs

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvList", {
   item: {},
   itemSelector: {
     "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   link: {

package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs

@@ -24,11 +24,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     },
     "&.HvIsFocused": {
       ...focusUtils.outlineStyles,
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       zIndex: 2
     }
   },
-  focus: { backgroundColor: uikitStyles.theme.colors.atmo3, zIndex: 2 },
+  focus: { backgroundColor: uikitStyles.theme.colors.bgPageSecondary, zIndex: 2 },
   startAdornment: {},
   endAdornment: {},
   gutters: {
@@ -44,16 +44,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
   interactive: {
     cursor: "pointer",
     "&:not($disabled):not($selected):hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "&$disabled": {
       cursor: "not-allowed"
     }
   },
-  selected: { backgroundColor: uikitStyles.theme.colors.containerBackgroundHover },
+  selected: { backgroundColor: uikitStyles.theme.colors.bgHover },
   disabled: {
-    color: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    color: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled
   },
   withStartAdornment: {
     "& > div": {

package/dist/cjs/Loading/Loading.cjs

@@ -26,7 +26,7 @@ const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
       ref,
       hidden: !!hidden,
       style: uikitReactUtils.mergeStyles(style, {
-        color: uikitStyles.getColor(color, small ? "secondary" : "brand"),
+        color: uikitStyles.getColor(color, small ? "text" : "brand"),
         "--customColor": uikitStyles.getColor(color)
       }),
       className: cx(

package/dist/cjs/Loading/Loading.styles.cjs

@@ -34,7 +34,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
     "@keyframes loading": {
       "50%": {
         height: "var(--height, 60%)",
-        backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.secondary})`
+        backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.text})`
       }
     },
     ":nth-of-type(2)": { animationDelay: "0.22s" },

package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoadingCo
     inset: 0,
     zIndex: uikitStyles.theme.zIndices.overlay,
     transition: "background-color .2s ease",
-    backgroundColor: uikitStyles.theme.alpha("atmo1", "var(--opacity, 80%)")
+    backgroundColor: uikitStyles.theme.alpha("bgContainer", "var(--opacity, 80%)")
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Login/Login.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLogin", {
     margin: "-1px 0 0 0"
   },
   formContainer: {
-    background: uikitStyles.theme.colors.atmo2,
+    background: uikitStyles.theme.colors.bgPage,
     marginLeft: "auto",
     maxWidth: 500,
     height: "100%"