From 78409545f769f0bef3a9235384331f81678b8f6c Mon Sep 17 00:00:00 2001
From: Rafael Specht <rafaelspdasilva@gmail.com>
Date: Thu, 6 Jun 2024 17:31:46 -0300
Subject: [PATCH] chore: remove unnecessary changeset, add fix to render colors

---
 .changeset/great-flies-yawn.md                |  6 ----
 .../docs/components/constants.tsx             | 30 +++++++++++++++++--
 2 files changed, 27 insertions(+), 9 deletions(-)
 delete mode 100644 .changeset/great-flies-yawn.md

diff --git a/.changeset/great-flies-yawn.md b/.changeset/great-flies-yawn.md
deleted file mode 100644
index 9a5065786..000000000
--- a/.changeset/great-flies-yawn.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-"@localyze-pluto/design-tokens": minor
-"@localyze-pluto/theme": minor
----
-
-Use token variables instead of repeating/duplicating
diff --git a/packages/design-tokens/docs/components/constants.tsx b/packages/design-tokens/docs/components/constants.tsx
index d8a7a14cd..00aef6743 100644
--- a/packages/design-tokens/docs/components/constants.tsx
+++ b/packages/design-tokens/docs/components/constants.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import keys from "lodash/keys";
 import filter from "lodash/filter";
 import reduce from "lodash/reduce";
+import get from "lodash/get";
+import replace from "lodash/replace";
+import startsWith from "lodash/startsWith";
 import fontSizeTokens from "../../src/tokens/font-size.tokens.json";
 import fontWeightTokens from "../../src/tokens/font-weight.tokens.json";
 import colorTokens from "../../src/tokens/color.tokens.json";
@@ -24,6 +27,7 @@ import {
 import { Box } from "../../../components/src/primitives/Box";
 import { Text } from "../../../components/src/primitives/Text";
 import { TokenColumn } from "../types/TokenColumn";
+import { Token } from "../types/Token";
 import { createPreview } from "./createPreview";
 
 const TEXT_PREVIEW = (
@@ -34,6 +38,10 @@ type TokenColumnsProps = {
   [key: string]: Array<TokenColumn>;
 };
 
+const getTokenFromVariable = (tokens: unknown, token: Token): string => {
+  return get(tokens, replace(token.value, /[{}]/g, "")).value as string;
+};
+
 const COLORS = reduce(
   filter(keys(colorTokens), (item) => item !== "default"),
   (acc, prefix) => {
@@ -42,14 +50,30 @@ const COLORS = reduce(
         name: "Name",
         transform: getTokenNameFromTuple(prefix),
       },
-      { name: "Hex", transform: getTokenValue },
+      {
+        name: "Raw",
+        transform: ([, token]: TokenTuple) => token.value,
+      },
+      {
+        name: "Hex",
+        transform: ([, token]: TokenTuple) =>
+          startsWith(token.value, "{")
+            ? getTokenFromVariable(colorTokens, token)
+            : token.value,
+      },
       {
         name: "RGB",
-        transform: ([, token]: TokenTuple): string => hexToRgb(token.value),
+        transform: ([, token]: TokenTuple): string =>
+          startsWith(token.value, "{")
+            ? hexToRgb(getTokenFromVariable(colorTokens, token))
+            : hexToRgb(token.value),
       },
       {
         name: "Hsla",
-        transform: ([, token]: TokenTuple): string => hexToHsla(token.value),
+        transform: ([, token]: TokenTuple): string =>
+          startsWith(token.value, "{")
+            ? hexToHsla(getTokenFromVariable(colorTokens, token))
+            : hexToHsla(token.value),
       },
       {
         name: "Preview",