chore: use uikit colors in icons & ds5 theme (#4865)

Author: zettca

packages/core/src/themes/ds5.ts

@@ -49,33 +49,33 @@ export const ds5 = mergeTheme(ds5Base, {
       classes: {
         root: {
           ":where(:not(.HvButton-disabled,.HvButton-contained))": {
-            "&[data-color=warning]": { color: theme.colors.warning_140 },
+            "&[data-color=warning]": { color: theme.colors.warningDeep },
           },
         },
         contained: {
           ":where([data-color=primary]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.primary_80,
-              borderColor: theme.colors.primary_80,
+              backgroundColor: theme.colors.primaryStrong,
+              borderColor: theme.colors.primaryStrong,
             },
           },
           ":where([data-color=positive]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.positive_80,
-              borderColor: theme.colors.positive_80,
+              backgroundColor: theme.colors.positiveStrong,
+              borderColor: theme.colors.positiveStrong,
             },
           },
           ":where([data-color=warning]:not(.HvButton-disabled))": {
-            backgroundColor: theme.colors.warning_120,
+            backgroundColor: theme.colors.warningStrong,
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.warning_140,
-              borderColor: theme.colors.warning_140,
+              backgroundColor: theme.colors.warningDeep,
+              borderColor: theme.colors.warningDeep,
             },
           },
           ":where([data-color=negative]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.negative_80,
-              borderColor: theme.colors.negative_80,
+              backgroundColor: theme.colors.negativeStrong,
+              borderColor: theme.colors.negativeStrong,
             },
           },
         },
@@ -108,10 +108,10 @@ export const ds5 = mergeTheme(ds5Base, {
         splitGroup: {
           // NEXT5 subtle multi-buttons have a custom background
           "& .HvButton-subtle": {
-            backgroundColor: theme.colors.atmo1,
+            backgroundColor: theme.colors.bgContainer,
           },
           "&& .HvButton-disabled": {
-            backgroundColor: theme.colors.atmo3,
+            backgroundColor: theme.colors.bgDisabled,
           },
         },
       },
@@ -136,7 +136,7 @@ export const ds5 = mergeTheme(ds5Base, {
       classes: {
         root: {
           "&.HvTab-selected": {
-            color: theme.colors.secondary,
+            color: theme.colors.text,
           },
         },
       },
@@ -158,7 +158,7 @@ export const ds5 = mergeTheme(ds5Base, {
             padding: 0,
           },
           "& .HvIconContainer-root": {
-            color: `${theme.colors.secondary}!important`,
+            color: `${theme.colors.text}!important`,
           },
         },
       },

packages/icons/scripts/generateComponent.ts

@@ -1,10 +1,10 @@
 import { HvColor } from "@hitachivantara/uikit-styles";
 
 const hexColorMap: Record<string, HvColor> = {
-  "#414141": "secondary",
-  "#fff": "atmo1",
-  "#f0f0f0": "atmo2",
-  "#ccced0": "atmo4",
+  "#414141": "text", // secondary
+  "#fff": "bgContainer", // atmo1
+  "#f0f0f0": "bgPage", // atmo2
+  "#ccced0": "border", // atmo4
 };
 
 /**

packages/icons/src/IconBase.tsx

@@ -156,7 +156,7 @@ const IconBaseInternal = (
   const title = titleProp ?? ariaLabel;
 
   const inheritColor =
-    !color && palette?.length === 1 && palette?.[0] === "secondary";
+    !color && palette?.length === 1 && palette?.[0] === "text";
 
   return (
     <HvIconContainer

packages/icons/src/IconSprite.tsx

@@ -4,10 +4,10 @@ import { IconBase, IconBaseProps } from "./IconBase";
 import { isSelector, isSort } from "./utils";
 
 const getSecondaryColor = (iconName: string): HvColor => {
-  if (isSelector(iconName)) return "atmo1";
-  if (isSort(iconName)) return "atmo4";
+  if (isSelector(iconName)) return "bgContainer"; // atmo1
+  if (isSort(iconName)) return "border"; // atmo4
 
-  return "atmo2";
+  return "bgPage"; // atmo2
 };
 
 export interface HvIconSpriteProps
@@ -28,7 +28,7 @@ export const HvIconSprite = ({
   ...others
 }: HvIconSpriteProps) => {
   // this color array is fragile... we know it currently covers all the existing icons
-  const baseColors: HvColor[] = ["secondary", getSecondaryColor(iconName)];
+  const baseColors: HvColor[] = ["text", getSecondaryColor(iconName)];
 
   return (
     <IconBase iconName={iconName} palette={baseColors} {...others}>

packages/lab/src/Blade/Blade.styles.tsx

@@ -17,7 +17,7 @@ export const { staticClasses, useClasses } = createClasses("HvBlade", {
     zIndex: 0,
 
     color: theme.colors.text,
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     borderRadius: theme.radii.round,
     border: `1px solid ${theme.colors.border}`,
   },