@hitachivantara/uikit-react-core 5.89.0 → 5.90.0

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%",

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

@@ -103,7 +103,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
       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,7 +14,7 @@ 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"),
@@ -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%"

package/dist/cjs/MultiButton/MultiButton.styles.cjs

@@ -11,9 +11,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
     position: "relative"
   },
   multiple: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     borderWidth: 0,
-    borderColor: `${uikitStyles.theme.colors.atmo4} transparent`,
+    borderColor: `${uikitStyles.theme.colors.border} transparent`,
     borderRadius: uikitStyles.theme.radii.base,
     "& $button": {
       minWidth: 32,
@@ -25,43 +25,43 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       borderRadius: 0,
       fontWeight: uikitStyles.theme.typography.body.fontWeight,
       "&:disabled": {
-        color: uikitStyles.theme.colors.secondary_60,
+        color: uikitStyles.theme.colors.textDisabled,
         borderColor: "inherit"
       },
       "&:hover": {
         borderColor: "inherit"
       },
       "&$firstButton": {
-        borderLeftColor: uikitStyles.theme.colors.atmo4,
+        borderLeftColor: uikitStyles.theme.colors.border,
         borderTopLeftRadius: "inherit",
         borderBottomLeftRadius: "inherit",
         "&:disabled": {
-          borderLeftColor: uikitStyles.theme.colors.atmo4
+          borderLeftColor: uikitStyles.theme.colors.border
         }
       },
       "&$lastButton": {
-        borderRightColor: uikitStyles.theme.colors.atmo4,
+        borderRightColor: uikitStyles.theme.colors.border,
         borderTopRightRadius: "inherit",
         borderBottomRightRadius: "inherit",
         "&:disabled": {
-          borderRightColor: uikitStyles.theme.colors.atmo4
+          borderRightColor: uikitStyles.theme.colors.border
         }
       },
       "&:not($firstButton)": {
         marginLeft: "-1px"
       },
       "&$selected": {
-        backgroundColor: uikitStyles.theme.colors.atmo1,
+        backgroundColor: uikitStyles.theme.colors.bgContainer,
         fontWeight: uikitStyles.theme.typography.label.fontWeight,
         borderRadius: "inherit",
-        borderColor: uikitStyles.theme.colors.secondary,
+        borderColor: uikitStyles.theme.colors.text,
         zIndex: 2,
         "&:hover:not(:disabled),&:focus-visible": {
-          backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+          backgroundColor: uikitStyles.theme.colors.bgHover
         },
         "&:disabled": {
           zIndex: 1,
-          borderColor: uikitStyles.theme.colors.atmo4
+          borderColor: uikitStyles.theme.colors.border
         }
       }
     }
@@ -104,17 +104,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   vertical: {
     flexDirection: "column",
     height: "auto",
-    borderColor: `transparent ${uikitStyles.theme.colors.atmo4}`,
+    borderColor: `transparent ${uikitStyles.theme.colors.border}`,
     "& $button": {
       minWidth: 32,
       width: "100%",
       "&$firstButton": {
-        borderTopColor: uikitStyles.theme.colors.atmo4,
+        borderTopColor: uikitStyles.theme.colors.border,
         borderTopLeftRadius: "inherit",
         borderTopRightRadius: "inherit"
       },
       "&$lastButton": {
-        borderBottomColor: uikitStyles.theme.colors.atmo4,
+        borderBottomColor: uikitStyles.theme.colors.border,
         borderBottomLeftRadius: "inherit",
         borderBottomRightRadius: "inherit"
       },
@@ -125,7 +125,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       "&$selected": {
         height: 32,
         width: "calc(100% + 2px)",
-        borderColor: uikitStyles.theme.colors.secondary
+        borderColor: uikitStyles.theme.colors.text
       }
     }
   },

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -6,7 +6,7 @@ const Input_styles = require("../Input/Input.styles.cjs");
 require("../Input/Input.cjs");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
-const hoverColor = uikitStyles.theme.colors.atmo3;
+const hoverColor = uikitStyles.theme.colors.bgHover;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {

package/dist/cjs/Pagination/Select.styles.cjs

@@ -6,16 +6,16 @@ const { useClasses } = uikitReactUtils.createClasses("HvPaginationSelect", {
   root: {},
   header: {
     backgroundColor: "transparent",
-    borderColor: uikitStyles.theme.colors.secondary_80,
+    borderColor: uikitStyles.theme.colors.textSubtle,
     "&:hover": {
-      borderColor: uikitStyles.theme.colors.secondary_80
+      borderColor: uikitStyles.theme.colors.textSubtle
     }
   },
   selection: {
     padding: uikitStyles.theme.spacing(0, "md", 0, "xs")
   },
   headerOpen: {
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   }
 });
 exports.useClasses = useClasses;

package/dist/cjs/Panel/Panel.styles.cjs

@@ -6,8 +6,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvPanel", {
   root: {
     position: "relative",
     padding: uikitStyles.theme.space.sm,
-    borderColor: uikitStyles.theme.colors.atmo4,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    borderColor: uikitStyles.theme.colors.border,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     overflow: "auto",
     borderRadius: "inherit"
   }

package/dist/cjs/ProgressBar/ProgressBar.styles.cjs

@@ -15,7 +15,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvProgressB
     width: "100%"
   },
   progressBar: {
-    backgroundColor: uikitStyles.theme.colors.secondary
+    backgroundColor: uikitStyles.theme.colors.text
   },
   progressBarLabel: {
     backgroundColor: "transparent",
@@ -32,7 +32,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvProgressB
     display: "flex",
     width: "100%",
     height: 4,
-    backgroundColor: uikitStyles.theme.colors.atmo4
+    backgroundColor: uikitStyles.theme.colors.border
   },
   progressError: {
     backgroundColor: uikitStyles.theme.colors.negative

package/dist/cjs/QueryBuilder/QueryBuilder.styles.cjs

@@ -9,7 +9,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
     padding: uikitStyles.theme.space.sm,
     marginTop: 12,
     marginBottom: 32,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    border: `1px solid ${uikitStyles.theme.colors.border}`
   },
   /** Styles applied to the top group container. */
   topGroup: {
@@ -29,8 +29,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
       zIndex: 2,
       width: 21,
       height: 36,
-      borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-      borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+      borderBottom: `1px solid ${uikitStyles.theme.colors.border}`,
+      borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
       top: -38,
       left: -38
     },
@@ -40,7 +40,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
       zIndex: 1,
       width: 32,
       height: "100%",
-      borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+      borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
       top: 0,
       left: `calc(${uikitStyles.theme.space.sm} + 2)`
     }
@@ -60,12 +60,12 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
   /** Styles applied to the remove button on the top group. */
   topRemoveButton: { position: "absolute", top: -16, right: -16 },
   /** Styles applied to the remove button when disabled on the top group. */
-  topRemoveButtonDisabled: { backgroundColor: uikitStyles.theme.colors.atmo2 },
+  topRemoveButtonDisabled: { backgroundColor: uikitStyles.theme.colors.bgPage },
   /** Styles applied to the rules container. */
   rulesContainer: {},
   /** Styles applied to the sub rules container. */
   subRulesContainer: {
-    borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
     marginLeft: uikitStyles.theme.space.sm,
     marginBottom: uikitStyles.theme.space.md,
     paddingLeft: uikitStyles.theme.space.sm,
@@ -91,7 +91,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
   topRulesContainer: {},
   /** Styles applied to the background of buttons to remove transparency */
   buttonBackground: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     display: "inline-flex"
   },
   createConditionButton: {

package/dist/cjs/QueryBuilder/Rule/Rule.styles.cjs

@@ -23,8 +23,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses(
         zIndex: 2,
         width: "17px",
         height: "39px",
-        borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-        borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+        borderBottom: `1px solid ${uikitStyles.theme.colors.border}`,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
         top: 0,
         left: `calc(-1 * 17px)`
       },
@@ -34,7 +34,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses(
         zIndex: 1,
         width: "17px",
         height: "100%",
-        borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
         top: 0,
         left: `calc(-1 * 17px)`
       }

package/dist/cjs/Radio/Radio.styles.cjs

@@ -12,13 +12,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     borderRadius: uikitStyles.theme.radii.base,
     ":hover:not($disabled)": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   invalidContainer: {},
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: uikitStyles.theme.colors.secondary_60, cursor: "not-allowed" }
+    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
   radio: {
     "& svg": {
@@ -35,7 +35,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     lineHeight: "32px",
     width: "100%"
   },
-  focusVisible: { backgroundColor: uikitStyles.theme.colors.atmo3, ...focusUtils.outlineStyles },
+  focusVisible: {
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+    ...focusUtils.outlineStyles
+  },
   checked: {},
   semantic: {}
 });

package/dist/cjs/RadioGroup/RadioGroup.styles.cjs

@@ -28,7 +28,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadioGrou
   },
   invalid: {
     paddingBottom: uikitStyles.theme.space.xs,
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`
   },
   error: {}
 });

package/dist/cjs/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs

@@ -32,18 +32,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     height: 24,
     width: 24,
     fontSize: 4,
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     "& > span": {
       margin: "auto",
       width: "1em",
       height: "1em",
       backgroundColor: "currentcolor",
-      borderRadius: "50%"
+      borderRadius: uikitStyles.theme.radii.full
     }
   },
   bulletSelected: {
     fontSize: 6,
-    color: uikitStyles.theme.colors.secondary
+    color: uikitStyles.theme.colors.text
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/ScrollToHorizontal/ScrollToHorizontal.styles.cjs

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       listStyleType: "none",
       flexWrap: "wrap",
       backdropFilter: `blur(4px)`,
-      backgroundColor: uikitStyles.theme.alpha("atmo2", 0.9)
+      backgroundColor: uikitStyles.theme.alpha("bgPage", 0.9)
     },
     positionSticky: {
       position: "sticky",

package/dist/cjs/ScrollToVertical/ScrollToVertical.styles.cjs

@@ -14,7 +14,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       flexWrap: "wrap",
       flexDirection: "column",
       backdropFilter: `blur(4px)`,
-      backgroundColor: uikitStyles.theme.alpha("atmo2", 0.9)
+      backgroundColor: uikitStyles.theme.alpha("bgPage", 0.9)
     },
     positionAbsolute: {
       width: "32px",

package/dist/cjs/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs

@@ -16,15 +16,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   icon: {
     width: "1em",
     height: "1em",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     fontSize: 6,
-    color: uikitStyles.theme.colors.secondary,
+    color: uikitStyles.theme.colors.text,
     display: "inline-block",
     backgroundColor: "currentcolor"
   },
   notSelected: {
     fontSize: 4,
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled
   },
   // TODO: remove in v6 (use classes.button)
   text: {},
@@ -34,13 +34,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     alignItems: "center",
     height: "16px",
     width: "16px",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       "& $notSelected": {
         fontSize: 6,
-        color: uikitStyles.theme.colors.secondary
+        color: uikitStyles.theme.colors.text
       }
     },
     "&:focus": {

package/dist/cjs/Section/Section.styles.cjs

@@ -7,9 +7,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderRadius: uikitStyles.theme.radii.round,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    border: `1px solid ${uikitStyles.theme.colors.border}`
   },
   hidden: { height: 0, display: "none" },
   header: {
@@ -17,7 +17,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     alignItems: "center",
     borderColor: "inherit",
     position: "relative",
-    minHeight: uikitStyles.theme.sizes.sm,
     padding: uikitStyles.theme.space.sm
   },
   content: {