From 347595855e61ed28077521ebfd55458e5988ca50 Mon Sep 17 00:00:00 2001
From: josue2591 <josuegv2591@gmail.com>
Date: Fri, 20 Dec 2024 13:20:45 -0600
Subject: [PATCH 1/2] chore(4kdst-13): .nvmrc file added

---
 .nvmrc | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..dc0bb0f
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v22.12.0

From 74ed1f0804f4af99e2a4f3e72e498c1143fff6b9 Mon Sep 17 00:00:00 2001
From: josue2591 <josuegv2591@gmail.com>
Date: Fri, 20 Dec 2024 13:21:01 -0600
Subject: [PATCH 2/2] chore(4kdst-13): Colors token component created

---
 src/tokens/colors/color.stories.tsx | 56 ++++++++++++++++++++++++++
 src/tokens/colors/color.tsx         | 61 +++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+)
 create mode 100644 src/tokens/colors/color.stories.tsx
 create mode 100644 src/tokens/colors/color.tsx

diff --git a/src/tokens/colors/color.stories.tsx b/src/tokens/colors/color.stories.tsx
new file mode 100644
index 0000000..60a9987
--- /dev/null
+++ b/src/tokens/colors/color.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import tokens from '../transformed.tokens.json';
+import ColorTokens from './color';
+
+const meta = {
+  title: 'Tokens/Colors',
+  component: ColorTokens,
+} satisfies Meta<typeof ColorTokens>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Colors: Story = {
+  args: {
+    colors: Object.keys(tokens.color).map((name) => {
+      const colorGroup = tokens.color[name];
+
+      // If it's a direct color token (no further nesting)
+      if (colorGroup.value) {
+        return {
+          name,
+          variants: [
+            {
+              name: null,
+              value: colorGroup.value,
+              type: colorGroup.type,
+              description: colorGroup.description,
+            },
+          ],
+        };
+      }
+
+      // Handle nested structures (recursively flatten)
+      const processVariants = (data: any, parentKey = ""): any[] => {
+        return Object.entries(data).flatMap(([key, value]) => {
+          const currentKey = parentKey ? `${parentKey}-${key}` : key;
+
+          if ((value as any).value) {
+            return {
+              name: currentKey,
+              value: (value as any).value,
+              type: (value as any).type,
+              description: (value as any).description,
+            };
+          } else {
+            return processVariants(value, currentKey);
+          }
+        });
+      };
+
+      return {
+        name,
+        variants: processVariants(colorGroup),
+      };
+    }),
+  },
+};
diff --git a/src/tokens/colors/color.tsx b/src/tokens/colors/color.tsx
new file mode 100644
index 0000000..062bcb9
--- /dev/null
+++ b/src/tokens/colors/color.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+// Utility classes for token display components.
+import clBase from '../../foundation/utility/cl-base.module.scss';
+
+type ColorToken = {
+  name?: string; 
+  value: string;
+  type: string;
+  description?: string;
+};
+
+type ColorTokensProps = {
+  colors: {
+    name: string;
+    variants: ColorToken[];
+  }[];
+};
+export default function ColorTokens({
+  colors,
+}: ColorTokensProps) {
+  return (
+    <div>
+      <h2 className={clBase['sb-title']}>Colors</h2>
+      {colors.map((colorGroup) => (
+        <div key={colorGroup.name}>
+          <h2 className={clBase['sb-subtitle']}>{colorGroup.name}</h2>
+          <ul className={clBase['sb-list']}>
+            {colorGroup.variants.map((variant) => (
+              <li
+                className={`${clBase['sb-list__item']} token-card`}
+                key={`${colorGroup.name}-${variant.name}`}
+              >
+                <span className={clBase['sb-list__label']}>{variant.name ?? colorGroup.name }</span>
+                <span className={clBase['sb-list__value']}>{variant.value}</span>
+                <span className={clBase['sb-list__custom-property']}>
+                  <code className={clBase['sb-custom-property-name']}>
+                    var(--color-{colorGroup.name
+                      .toLowerCase()
+                      .replace("emulsifyblue", "emulsify-blue")}{
+                      variant.name ? `-${variant.name}` : ""
+                    })
+                  </code>
+                </span>
+                <span
+                  className={clBase['sb-list__visualization']}
+                  style={{
+                    backgroundColor: `var(--color-${colorGroup.name
+                      .toLowerCase()
+                      .replace("emulsifyblue", "emulsify-blue")}${
+                      variant.name ? `-${variant.name}` : ""
+                    })`,
+                  }}
+                ></span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}