refactor(colors): show semantic names in color component

packages/components/src/core/Bases/Colors/__storybook__/components/Color/color.tsx → packages/components/src/core/Bases/Colors/__storybook__/components/Colors/color.tsx

@@ -15,10 +15,11 @@ interface ColorComponentProps {
   value: string;
   shade?: string;
   prefix?: string;
+  semanticName?: string;
 }
 
 const Color = (props: ColorComponentProps) => {
-  const { group, value, shade, prefix = "$" } = props;
+  const { group, value, shade, prefix = "$", semanticName } = props;
 
   const sassVariable = shade
     ? "$" + prefix + "-" + group + "-" + convertToKebabCase(shade)
@@ -48,7 +49,7 @@ const Color = (props: ColorComponentProps) => {
 
       <div>
         <StyledColorCode onClick={() => copyToClipboard(value)}>
-          {String(value)}
+          {String(semanticName)}
         </StyledColorCode>
 
         <StyledColorVariable onClick={() => copyToClipboard(cssVariable)}>

packages/components/src/core/Bases/Colors/__storybook__/components/Color/index.tsx → packages/components/src/core/Bases/Colors/__storybook__/components/Colors/index.tsx

@@ -1,6 +1,8 @@
-import { Color as ColorType } from "src/core/styles";
+import { Color as ColorType, getColors } from "src/core/styles";
 import Color from "./color";
 import { StyledColorGroupTitle, StyledColorsWrapper } from "./style";
+import { useTheme } from "@mui/material";
+import { NestedObject, flattenObj } from "./util";
 
 interface SemanticColorsProps {
   colors: object;
@@ -11,6 +13,13 @@ interface SemanticColorsProps {
 const Colors = (props: SemanticColorsProps): JSX.Element => {
   const { colors, type = "semantic", prefix } = props;
 
+  const theme = useTheme();
+  const primitiveColors = getColors({ theme });
+
+  const flattenColors = primitiveColors
+    ? flattenObj(primitiveColors as unknown as NestedObject, null)
+    : {};
+
   const renderColorGroups = (colorGroups: object) => {
     if (colorGroups) {
       return Object.entries(colorGroups).map(([key, value]) => (
@@ -26,7 +35,16 @@ const Colors = (props: SemanticColorsProps): JSX.Element => {
 
   const renderColors = (sdsColors: ColorType, groupName: string) => {
     if (typeof sdsColors === "string") {
-      return <Color group={groupName} value={sdsColors} prefix={prefix} />;
+      return (
+        <Color
+          group={groupName}
+          semanticName={
+            type === "semantic" ? flattenColors[sdsColors] : sdsColors
+          }
+          value={sdsColors}
+          prefix={prefix}
+        />
+      );
     } else {
       return Object.entries(sdsColors).map(([k, v]) => {
         if (v === "transparent") return;
@@ -36,6 +54,7 @@ const Colors = (props: SemanticColorsProps): JSX.Element => {
             key={k}
             group={groupName}
             value={v}
+            semanticName={type === "semantic" ? flattenColors[v] : v}
             shade={k}
             prefix={prefix}
           />

packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts

@@ -0,0 +1,19 @@
+export type NestedObject = {
+  [key: string]: NestedObject | string;
+};
+
+export function flattenObj(
+  obj: NestedObject,
+  parent: string | null = null,
+  res: { [key: string]: string } = {}
+) {
+  for (const key in obj) {
+    const propName = parent ? `${parent}-${key}` : key;
+    if (typeof obj[key] === "object") {
+      flattenObj(obj[key] as NestedObject, propName, res);
+    } else {
+      res[obj[key] as string] = propName;
+    }
+  }
+  return res;
+}

packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@mui/material";
 import { getColors } from "src/core/styles";
-import Colors from "../components/Color";
+import Colors from "../components/Colors";
 
 export const PrimitiveColorsTemplate = () => {
   const theme = useTheme();

packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@mui/material";
 import { getSemanticComponentColors } from "src/core/styles";
-import Colors from "../components/Color";
+import Colors from "../components/Colors";
 
 export const SemanticComponentColorsTemplate = () => {
   const theme = useTheme();

packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@mui/material";
 import { getSemanticTextColors } from "src/core/styles";
-import Colors from "../components/Color";
+import Colors from "../components/Colors";
 
 export const SemanticTextColorsTemplate = () => {
   const theme = useTheme();