chore: add component tokens (#1615)

Localitos · Jul 24, 2024 · 59de1bb · 59de1bb
1 parent 15fc429
commit 59de1bb
Show file tree

Hide file tree

Showing 5 changed files with 2,456 additions and 3 deletions.
diff --git a/.changeset/calm-readers-rest.md b/.changeset/calm-readers-rest.md
@@ -0,0 +1,6 @@
+---
+"@localyze-pluto/design-tokens": minor
+"@localyze-pluto/theme": minor
+---
+
+Add component specific tokens
diff --git a/packages/design-tokens/config.js b/packages/design-tokens/config.js
@@ -48,6 +48,61 @@ const colorPrefixes = [
   "bg",
   "content",
   "border",
+
+  "checkbox",
+  "tooltip",
+  "title",
+  "toast",
+  "text-area",
+  "table-header",
+  "table-cell",
+  "table",
+  "tab",
+  "status-dot",
+  "step-progress",
+  "step-progress-item",
+  "switch",
+  "step-header",
+  "step-indicator",
+  "step-card",
+  "select",
+  "sidebar-link-icon",
+  "sidebar",
+  "sidebar-link",
+  "radio-button",
+  "search",
+  "radio",
+  "progess",
+  "paragraph",
+  "pagination-item",
+  "modal",
+  "logo",
+  "link",
+  "help-text",
+  "icon-wrapper",
+  "hero-section",
+  "emoji-wrapper",
+  "form-field",
+  "field-text",
+  "field-suffix",
+  "field-prefix",
+  "field-label",
+  "dropzone",
+  "document-upload",
+  "document-list-item",
+  "document-list-header",
+  "document-list",
+  "divider",
+  "day-label",
+  "callout",
+  "day",
+  "date-picker",
+  "card",
+  "button",
+  "bullet",
+  "badge",
+  "avatar",
+  "alert-dialog",
 ];
 
 module.exports = {

diff --git 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",