@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

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

@@ -11,57 +11,55 @@ 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,
-      width: "100%",
       maxWidth: 200,
       padding: 0,
-      flex: "1 1 auto",
+      flex: "1 1 0%",
       borderColor: "inherit",
       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: "currentcolor",
         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
         }
       }
     }
@@ -103,20 +101,25 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   selected: {},
   vertical: {
     flexDirection: "column",
+    alignItems: "stretch",
     height: "auto",
-    borderColor: `transparent ${uikitStyles.theme.colors.atmo4}`,
+    borderColor: `transparent ${uikitStyles.theme.colors.border}`,
     "& $button": {
       minWidth: 32,
-      width: "100%",
+      flex: "1 1 32px",
       "&$firstButton": {
-        borderTopColor: uikitStyles.theme.colors.atmo4,
+        borderTopColor: uikitStyles.theme.colors.border,
         borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit"
+        borderTopRightRadius: "inherit",
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
       },
       "&$lastButton": {
-        borderBottomColor: uikitStyles.theme.colors.atmo4,
+        borderBottomColor: uikitStyles.theme.colors.border,
         borderBottomLeftRadius: "inherit",
-        borderBottomRightRadius: "inherit"
+        borderBottomRightRadius: "inherit",
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
       },
       "&:not($firstButton)": {
         marginLeft: 0,
@@ -124,8 +127,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       },
       "&$selected": {
         height: 32,
-        width: "calc(100% + 2px)",
-        borderColor: uikitStyles.theme.colors.secondary
+        borderColor: "currentcolor"
       }
     }
   },

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

@@ -6,7 +6,6 @@ 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 { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {
@@ -32,7 +31,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
       backgroundColor: "transparent",
       height: "24px",
       "&:focus, &:focus-within, &:hover": {
-        backgroundColor: hoverColor
+        backgroundColor: uikitStyles.theme.colors.bgHover
       }
     }
   },
@@ -108,7 +107,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
         borderRadius: uikitStyles.theme.radii.base,
         MozAppearance: "textfield",
         "&:focus": {
-          backgroundColor: hoverColor
+          backgroundColor: uikitStyles.theme.colors.bgHover
         },
         "&:hover": {
           cursor: "pointer"

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,
@@ -77,9 +77,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
   /** Styles applied to the action button container. */
   actionButtonContainer: {
     marginLeft: "auto",
-    "&>*": {
-      marginLeft: uikitStyles.theme.space.sm
-    }
+    display: "flex",
+    gap: uikitStyles.theme.space.sm
   },
   /** Styles applied to the top action button container. */
   topActionButtonContainer: {
@@ -91,7 +90,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,20 +12,15 @@ 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" }
-  },
-  radio: {
-    "& svg": {
-      outline: "none",
-      boxShadow: "none"
-    }
+    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
+  radio: {},
   invalidRadio: {},
   label: {
     verticalAlign: "middle",
@@ -35,7 +30,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: {

package/dist/cjs/Select/Select.cjs

@@ -200,7 +200,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
                 style: {
                   width: variableWidth ? "auto" : (buttonRef.current?.clientWidth || 0) + 2
                 },
-                className: cx(classes.panel, className, {
+                className: cx(classes.panel, {
                   [classes.panelOpenedUp]: placement.includes("top"),
                   [classes.panelOpenedDown]: placement.includes("bottom")
                 }),

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

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   disabled: {},
   readOnly: {},
   invalid: {
-    borderColor: uikitStyles.theme.colors.negative_120
+    borderColor: uikitStyles.theme.form.errorColor
   },
   labelContainer: {
     display: "flex",
@@ -22,26 +22,31 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   description: {},
   select: {},
   popper: {
-    zIndex: uikitStyles.theme.zIndices.popover
+    zIndex: uikitStyles.theme.zIndices.popover,
+    "--r": uikitStyles.theme.radii.base,
+    "&[data-popper-placement*='top'] $panel": {
+      borderRadius: `var(--r) var(--r) 0 0`
+    },
+    "&[data-popper-placement*='bottom'] $panel": {
+      borderRadius: `0 0 var(--r) var(--r)`
+    }
   },
   panel: {
     maxHeight: 400,
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    border: `1px solid ${uikitStyles.theme.colors.text}`,
     marginTop: -1,
     marginBottom: -1,
     // panel styles
     position: "relative",
     padding: uikitStyles.theme.space.xs,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     overflowY: "auto",
     borderRadius: "inherit"
   },
-  panelOpenedUp: {
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`
-  },
-  panelOpenedDown: {
-    borderRadius: `0 0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
-  },
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedUp: {},
+  /** @deprecated leverage `[data-popper-placement]` instead */
+  panelOpenedDown: {},
   error: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/SelectionList/SelectionList.styles.cjs

@@ -32,7 +32,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelection
       zIndex: 1
     }
   },
-  invalid: { borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}` }
+  invalid: { borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}` }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Skeleton/Skeleton.cjs

@@ -25,17 +25,14 @@ const HvSkeleton = (props) => {
       className: cx(
         classes.root,
         classes[variant],
-        animation && classes[animation],
+        classes[animation],
         className
       ),
       style: {
         width,
         height,
         ...backgroundImage && {
-          backgroundImage: `url(${backgroundImage})`,
-          backgroundSize: "contain",
-          backgroundPosition: "center",
-          backgroundRepeat: "no-repeat"
+          background: `center / contain no-repeat url(${backgroundImage})`
         },
         ...style
       },

package/dist/cjs/Skeleton/Skeleton.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton", {
   root: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
     width: "fit-content",
     "& > *": {
       visibility: "hidden"
@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton"
     }
   },
   circle: {
-    borderRadius: uikitStyles.theme.radii.circle
+    borderRadius: uikitStyles.theme.radii.full
   },
   square: {
     borderRadius: uikitStyles.theme.radii.base
@@ -46,7 +46,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton"
       background: `linear-gradient(
             90deg,
             transparent,
-            ${uikitStyles.theme.colors.atmo4},
+            ${uikitStyles.theme.colors.border},
             transparent
           )`,
       content: "''",

package/dist/cjs/Slider/Slider.styles.cjs

@@ -11,8 +11,7 @@ const dot = {
   width: "1px",
   height: "4px",
   border: "none",
-  borderRadius: "0%",
-  backgroundColor: uikitStyles.theme.colors.atmo4,
+  backgroundColor: uikitStyles.theme.colors.border,
   cursor: "pointer",
   verticalAlign: "middle",
   zIndex: "-3"
@@ -26,15 +25,15 @@ const dragSquare = {
   top: "-12px",
   content: "''",
   background: "transparent",
-  borderTop: `12px solid ${uikitStyles.theme.colors.primary_20}`,
-  borderBottom: `12px solid ${uikitStyles.theme.colors.primary_20}`,
+  borderTop: `12px solid ${uikitStyles.theme.colors.primaryDimmed}`,
+  borderBottom: `12px solid ${uikitStyles.theme.colors.primaryDimmed}`,
   zIndex: "-2"
 };
 const ring = {
   width: "32px",
   height: "32px",
-  borderRadius: "50%",
-  border: `9px solid ${uikitStyles.theme.colors.primary_20}`,
+  borderRadius: uikitStyles.theme.radii.full,
+  border: `9px solid ${uikitStyles.theme.colors.primaryDimmed}`,
   opacity: "100%",
   content: "''",
   position: "absolute",
@@ -44,8 +43,8 @@ const ring = {
 const border = {
   width: "20px",
   height: "20px",
-  borderRadius: "50%",
-  border: `2px solid ${uikitStyles.theme.colors.atmo1}`,
+  borderRadius: uikitStyles.theme.radii.full,
+  border: `2px solid ${uikitStyles.theme.colors.textDimmed}`,
   content: "''",
   position: "absolute",
   top: "-4px",
@@ -61,7 +60,7 @@ const sliderStyles = {
   disabledMark: {
     ...uikitStyles.theme.typography.caption1,
     fontFamily: uikitStyles.theme.fontFamily.body,
-    color: `${uikitStyles.theme.colors.secondary_60}`,
+    color: uikitStyles.theme.colors.textDisabled,
     cursor: "not-allowed",
     top: "-2px"
   },
@@ -79,7 +78,6 @@ const sliderStyles = {
     width: "2px",
     marginLeft: "-1px",
     border: "none",
-    borderRadius: "0",
     marginTop: "0px",
     left: "100%",
     touchAction: "none",
@@ -88,16 +86,16 @@ const sliderStyles = {
   knobInner: {
     borderColor: "transparent",
     boxShadow: "none",
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     width: "16px",
     height: "16px"
   },
   knobOuter: {
     position: "relative",
     borderColor: "transparent",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     boxShadow: "none",
-    backgroundColor: uikitStyles.theme.colors.atmo4,
+    backgroundColor: uikitStyles.theme.colors.border,
     width: "32px",
     height: "32px",
     top: "-80%",
@@ -105,12 +103,12 @@ const sliderStyles = {
     zIndex: "-1"
   },
   track: {
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     height: "3px",
     zIndex: "-1",
     marginTop: "-1px"
   },
-  rail: { backgroundColor: uikitStyles.theme.colors.atmo4, height: "1px", zIndex: "-3" }
+  rail: { backgroundColor: uikitStyles.theme.colors.border, height: "1px", zIndex: "-3" }
 };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSlider", {
   sliderBase: { ...base.default },
@@ -206,7 +204,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSlider",
   root: {},
   sliderTooltip: {
     "&& .rc-slider-tooltip-inner": {
-      background: uikitStyles.theme.colors.atmo1,
+      background: uikitStyles.theme.colors.bgContainer,
       borderRadius: 0,
       maxWidth: "532px",
       height: "100%",

package/dist/cjs/Slider/SliderInput/SliderInput.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const SliderInput_styles = require("./SliderInput.styles.cjs");
@@ -32,8 +31,8 @@ const HvSliderInput = ({
   React.useEffect(() => {
     setInputValues(utils.knobsValuesToString(valuesProp, markDigits));
   }, [markDigits, valuesProp]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.inputRoot, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.inputContainer, children: [
-    index !== 0 && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Remove, { color: disabled ? "secondary_60" : void 0 }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    index !== 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "—" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       Input.HvInput,
       {