@hitachivantara/uikit-react-core 5.89.0 → 5.90.0

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": {
@@ -47,7 +47,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   /** 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": {
@@ -66,8 +66,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   },
   /** 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 +86,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
   },

package/dist/cjs/Calendar/SingleCalendar/CalendarCell.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 hover = {
-  backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+  backgroundColor: uikitStyles.theme.colors.bgHover,
   cursor: "pointer"
 };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarCell", {
@@ -17,28 +17,28 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarC
     width: "40px"
   },
   calendarDateSelected: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    color: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+    color: uikitStyles.theme.colors.text,
     "&:hover": {
       ...hover
     }
   },
   calendarDateNotInMonth: {
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     cursor: "not-allowed"
   },
   calendarDateInSelectionRange: {
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   },
   calendarDateDisabled: {
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     cursor: "no-drop"
   },
   startBookend: {
-    borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`
+    borderLeft: `1px solid ${uikitStyles.theme.colors.text}`
   },
   endBookend: {
-    borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`
+    borderRight: `1px solid ${uikitStyles.theme.colors.text}`
   },
   dateWrapper: {
     width: "40px",

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

@@ -10,34 +10,34 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCal
     display: "grid",
     gridTemplateColumns: "repeat(7, 1fr)",
     "& $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       "& $startBookend": {
-        borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`,
-        backgroundColor: uikitStyles.theme.colors.atmo3,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.text}`,
+        backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
         "&:hover": {
-          borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`
+          borderRight: `1px solid ${uikitStyles.theme.colors.text}`
         }
       }
     },
     "&:hover $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       "& $startBookend": {
-        borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.text}`,
         borderRight: "inherit"
       }
     },
     "& $cellsInRange:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       "& $calendarDate": {
-        borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`
+        borderRight: `1px solid ${uikitStyles.theme.colors.text}`
       }
     },
     "& $cellsInRange:hover ~ $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      backgroundColor: uikitStyles.theme.colors.bgContainer
       // controls the right side of the hovered range
     },
     "& $cellsOutsideRange:hover ~ $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      backgroundColor: uikitStyles.theme.colors.bgContainer
       // control the right side when hovering outside of the range
     }
   },
@@ -60,7 +60,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCal
   startBookend: {},
   endBookend: {},
   cellsInRange: {
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   },
   cellsOutsideRange: {},
   cellContainer: {}

package/dist/cjs/Card/Card.cjs

@@ -19,7 +19,7 @@ const HvCard = React.forwardRef(function HvCard2(props, ref) {
     ...others
   } = uikitReactUtils.useDefaultProps("HvCard", props);
   const { classes, cx } = Card_styles.useClasses(classesProp);
-  const barColor = statusColor !== "sema0" && statusColor || selected && "secondary" || "atmo4";
+  const barColor = statusColor !== "sema0" && statusColor || selected && "text" || "border";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/cjs/Card/Card.styles.cjs

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCard", {
   root: {
     overflow: "visible",
     position: "relative",
-    outline: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    outline: `1px solid ${uikitStyles.theme.colors.border}`,
     borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`,
     backgroundColor: "var(--bg-color)",
     "&:focus-visible": {
@@ -18,12 +18,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCard", {
     }
   },
   selected: {
-    outline: `1px solid ${uikitStyles.theme.colors.secondary}`,
-    "&:hover": {
-      outline: `1px solid ${uikitStyles.theme.colors.secondary}`
-    },
-    "&:focus": {
-      outline: `1px solid ${uikitStyles.theme.colors.secondary}`
+    "&,&:hover,&:focus": {
+      outline: `1px solid ${uikitStyles.theme.colors.text}`
     }
   },
   selectable: {

package/dist/cjs/Carousel/Carousel.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     display: "flex",
     alignItems: "stretch",
     flexDirection: "column",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     margin: 0,
     paddingTop: uikitStyles.theme.spacing(2),
     paddingBottom: uikitStyles.theme.spacing(2)
@@ -58,8 +58,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     position: "relative",
     height: 32,
     justifyContent: "center",
-    backgroundColor: uikitStyles.theme.colors.atmo2,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
+    border: `1px solid ${uikitStyles.theme.colors.border}`,
     gap: uikitStyles.theme.space.xs,
     "&:has($dots)": {
       justifyContent: "center"
@@ -87,8 +87,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     display: "none"
   },
   counter: {
-    color: uikitStyles.theme.colors.base_light,
-    backgroundColor: uikitStyles.theme.colors.base_dark,
+    color: uikitStyles.theme.colors.textLight,
+    backgroundColor: uikitStyles.theme.colors.textDark,
     padding: uikitStyles.theme.spacing(0, "sm")
   },
   slideControls: {
@@ -129,13 +129,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     width: 5,
     height: 5,
     margin: uikitStyles.theme.space.xs,
-    borderRadius: "50%",
-    backgroundColor: uikitStyles.theme.colors.atmo4
+    borderRadius: uikitStyles.theme.radii.full,
+    backgroundColor: uikitStyles.theme.colors.border
   },
   dotSelected: {
     width: 10,
     height: 10,
-    backgroundColor: uikitStyles.theme.colors.secondary_80
+    backgroundColor: uikitStyles.theme.colors.textSubtle
   },
   panel: {
     display: "flex",

package/dist/cjs/CheckBox/CheckBox.styles.cjs

@@ -11,18 +11,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
     height: "32px",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       borderRadius: uikitStyles.theme.radii.base
     }
   },
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: uikitStyles.theme.colors.secondary_60, cursor: "not-allowed" }
+    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
   focusVisible: {
     ...focusUtils.outlineStyles,
     "& div": {
-      backgroundColor: uikitStyles.theme.colors.atmo3
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary
     },
     [`& $checkbox div > svg`]: {
       outline: "none",
@@ -30,7 +30,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
     }
   },
   invalidContainer: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`,
     "&:hover": {
       borderBottomLeftRadius: "0px",
       borderBottomRightRadius: "0px"
@@ -38,7 +38,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
   },
   checkbox: { height: "32px" },
   invalidCheckbox: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`,
     borderBottomLeftRadius: "0px",
     borderBottomRightRadius: "0px"
   },

package/dist/cjs/CheckBoxGroup/CheckBoxGroup.styles.cjs

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

package/dist/cjs/ColorPicker/Picker/Picker.styles.cjs

@@ -29,7 +29,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     height: "8px",
     boxShadow: `0 0 0 2px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),
             0 0 1px 2px rgba(0,0,0,.4)`,
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     transform: "translate(-3px, -3px)"
   },
   hue: {
@@ -49,7 +49,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     boxShadow: "0 0 2px rgb(0 0 0 / 60%)",
     marginLeft: "0px",
     border: "2px solid #fff",
-    borderRadius: uikitStyles.theme.radii.circle,
+    borderRadius: uikitStyles.theme.radii.full,
     "&.vertical": {
       transform: "translate(0px, -2px)"
     },

package/dist/cjs/ColorPicker/SavedColors/SavedColors.styles.cjs

@@ -36,7 +36,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     alignItems: "center",
     height: 16,
     width: 16,
-    background: uikitStyles.theme.colors.atmo1,
+    background: uikitStyles.theme.colors.bgContainer,
     borderRadius: uikitStyles.theme.radii.base
   },
   removeButton: {

package/dist/cjs/DatePicker/DatePicker.styles.cjs

@@ -23,9 +23,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDatePicke
   },
   panel: {},
   dropdownHeaderInvalid: {
-    border: `1px solid ${uikitStyles.theme.colors.negative_120}`,
-    "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    "&,:hover": {
+      border: `1px solid ${uikitStyles.theme.form.errorColor}`
     }
   },
   dropdownHeaderOpen: {},

package/dist/cjs/Dialog/Actions/Actions.styles.cjs

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Ac
     margin: 0,
     padding: uikitStyles.theme.space.sm,
     backgroundColor: "inherit",
-    borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
+    borderTop: `1px solid ${uikitStyles.theme.colors.border}`,
     height: 65,
     maxHeight: 65
   },

package/dist/cjs/Dialog/Dialog.styles.cjs

@@ -4,12 +4,14 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog", {
   root: {},
-  background: { background: uikitStyles.theme.alpha("atmo4", 0.8) },
+  background: {
+    backgroundColor: uikitStyles.theme.colors.bgOverlay
+  },
   paper: {
-    color: uikitStyles.theme.colors.secondary,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    color: uikitStyles.theme.colors.text,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     boxShadow: uikitStyles.theme.colors.shadow,
-    borderColor: uikitStyles.theme.colors.atmo4,
+    borderColor: uikitStyles.theme.colors.border,
     borderRadius: uikitStyles.theme.radii.round
   },
   fullscreen: {},

package/dist/cjs/DotPagination/DotPagination.styles.cjs

@@ -17,8 +17,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvDotPagina
     minWidth: 16,
     color: "inherit",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.neutral_20,
-      borderRadius: "100%"
+      backgroundColor: uikitStyles.theme.colors.infoDimmed,
+      borderRadius: uikitStyles.theme.radii.full
     }
   },
   icon: {

package/dist/cjs/Drawer/Drawer.styles.cjs

@@ -5,13 +5,13 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDrawer", {
   root: {},
   paper: {
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     padding: 0,
     overflow: "auto",
     boxShadow: uikitStyles.theme.colors.shadow
   },
   background: {
-    background: uikitStyles.theme.alpha("atmo4", 0.8)
+    backgroundColor: uikitStyles.theme.colors.bgOverlay
   },
   closeButton: {
     position: "absolute",

package/dist/cjs/Dropdown/Dropdown.styles.cjs

@@ -18,17 +18,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdown"
     whiteSpace: "nowrap"
   },
   placeholderClosed: {
-    color: uikitStyles.theme.colors.secondary_80
+    color: uikitStyles.theme.colors.textSubtle
   },
   selectionDisabled: {
     lineHeight: uikitStyles.theme.space.md,
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled
   },
   dropdown: {
     width: "100%",
     borderRadius: uikitStyles.theme.radii.base,
     "& $dropdownHeaderInvalid": {
-      border: `1px solid ${uikitStyles.theme.colors.negative_120}`
+      border: `1px solid ${uikitStyles.theme.form.errorColor}`
     }
   },
   arrow: {},
@@ -38,12 +38,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdown"
   dropdownListContainer: {},
   rootList: {},
   disabled: {
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled
   },
   readOnly: {
     "& $dropdownHeader": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary_80}`,
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      border: `1px solid ${uikitStyles.theme.colors.textSubtle}`,
+      backgroundColor: uikitStyles.theme.colors.bgContainer
     }
   }
 });

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

@@ -5,17 +5,12 @@ 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 }
+  backgroundColor: uikitStyles.theme.colors.bgDisabled,
+  borderColor: uikitStyles.theme.colors.bgDisabled,
+  [`&.${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,7 +32,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownB
     ...disabledStyle
   },
   open: {
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   },
   openUp: {
     borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`

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/FileList/FileList.styles.cjs

@@ -16,9 +16,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFileList"
     position: "relative",
     display: "flex",
     alignItems: "center",
-    background: uikitStyles.theme.colors.atmo1,
+    background: uikitStyles.theme.colors.bgContainer,
     padding: `${uikitStyles.theme.space.xs} 0px`,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    border: `1px solid ${uikitStyles.theme.colors.border}`,
     borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`
   }
 });

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

@@ -11,8 +11,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
     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,7 +25,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFooter",
   separator: {
     width: 1,
     height: 16,
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     margin: `${uikitStyles.theme.space.xs} ${uikitStyles.theme.space.sm}`
   },
   small: {

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;