Changeset

Runroom · Dec 12, 2023 · e65da5e · e65da5e
1 parent d2b1e35
commit e65da5e
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/.changeset/few-avocados-juggle.md b/.changeset/few-avocados-juggle.md
@@ -0,0 +1,5 @@
+---
+'@runroom/design-tokens': minor
+---
+
+Move style variables to StyleDictionary
diff --git a/src/functions/getTokens.ts b/src/functions/getTokens.ts
@@ -63,7 +63,17 @@ const getTokens = <T extends FigmaComponent, P extends TokenCollection, K extend
     const data = decorator(component);
 
     if (data) {
-      Object.assign(payload[componentsIndex], data);
+      const key = Object.keys(data)[0];
+
+      if (payload[componentsIndex][key]) {
+        const accumulatedData = {
+          ...(payload[componentsIndex][key] as any),
+          ...(data[key] as any)
+        };
+        Object.assign(payload[componentsIndex], accumulatedData);
+      } else {
+        Object.assign(payload[componentsIndex], data);
+      }
     }
   });
 

diff --git a/src/tokens/Colors.ts b/src/tokens/Colors.ts
@@ -6,7 +6,7 @@ import {
   TokenPayload
 } from '@/types/designTokens';
 import { FigmaColorComponent } from '@/types/figma';
-import { camelCase, fullColorHex, fullColorHsl, getTokens, rgbaGenObject } from '@/functions';
+import { fullColorHex, fullColorHsl, getTokens, rgbaGenObject } from '@/functions';
 
 const getColors = (component: FigmaColorComponent): ColorToken | false => {
   if (
@@ -23,11 +23,25 @@ const getColors = (component: FigmaColorComponent): ColorToken | false => {
   }
 
   const { r, g, b, a } = component.children[0].fills[0].color;
-  const name = camelCase(component.name);
+  const [prefix, suffix] = component.name.split('-');
+  const name = component.name;
   const rgbColor = rgbaGenObject(r, g, b, a);
   const hexColor = fullColorHex(rgbColor.r, rgbColor.g, rgbColor.b);
   const hslColor = fullColorHsl(rgbColor.r, rgbColor.g, rgbColor.b, rgbColor.a);
 
+  if (suffix && prefix) {
+    return {
+      [prefix]: {
+        [suffix]: {
+          name,
+          value: hexColor,
+          valueRgb: rgbColor,
+          valueHsl: hslColor
+        }
+      }
+    };
+  }
+
   return {
     [name]: {
       name: component.name,

diff --git a/src/types/designTokens/color.ts b/src/types/designTokens/color.ts
@@ -28,5 +28,9 @@ export interface RgbColor {
 }
 
 export interface ColorToken extends Tokens {
-  [key: string]: Color;
+  [key: string]:
+    | Color
+    | {
+        [key: string]: Color;
+      };
 }