add variable alias for effects

patrick-lienau · Sep 12, 2024 · 0fd6214 · 0fd6214
1 parent 38aa835
commit 0fd6214
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 30 deletions.
diff --git a/src/utils/styles/effectStylesToTokens.ts b/src/utils/styles/effectStylesToTokens.ts
@@ -1,62 +1,88 @@
 import { groupObjectNamesIntoCategories } from "../groupObjectNamesIntoCategories";
 import { convertRGBA } from "../color/convertRGBA";
 import { getTokenKeyName } from "../getTokenKeyName";
+import { getAliasVariableName } from "../getAliasVariableName";
 
 const wrapShadowObject = (
   shadowEffect: DropShadowEffect | InnerShadowEffect,
-  colorMode: colorModeType
+  colorMode: colorModeType,
+  isDTCGForamt: boolean,
+  includeValueAliasString: boolean
 ) => {
+  const effectBoundVariables = shadowEffect.boundVariables;
+
+  const getAlias = (key: string) => {
+    if (effectBoundVariables && effectBoundVariables[key]) {
+      return getAliasVariableName(
+        effectBoundVariables[key].id,
+        isDTCGForamt,
+        includeValueAliasString
+      );
+    }
+    return null;
+  }
+
+  console.log("shadowEffect", shadowEffect);
   return {
     inset: shadowEffect.type === "INNER_SHADOW",
     color: convertRGBA(shadowEffect.color, colorMode),
-    offsetX: `${shadowEffect.offset.x}px`,
-    offsetY: `${shadowEffect.offset.y}px`,
-    blur: `${shadowEffect.radius}px`,
-    spread: `${shadowEffect.spread}px`,
+    offsetX: getAlias("offsetX") || `${shadowEffect.offset.x}px`,
+    offsetY: getAlias("offsetY") || `${shadowEffect.offset.y}px`,
+    blur: getAlias("blur") || `${shadowEffect.radius}px`,
+    spread: getAlias("spread") || `${shadowEffect.spread}px`,
   };
 };
 
 export const effectStylesToTokens = async (
   customName: string,
   colorMode: colorModeType,
-  isDTCGForamt: boolean
+  isDTCGForamt: boolean,
+  includeValueAliasString: boolean
 ) => {
   const keyNames = getTokenKeyName(isDTCGForamt);
   const effectStyles = figma.getLocalEffectStyles();
 
-  console.log("effectStyles length", effectStyles.length);
+
+  // console.log("effectStyles", effectStyles);
 
   let effectTokens = {};
 
   const allEffectStyles = effectStyles.reduce((result, style) => {
     const styleName = style.name;
     const effectType = style.effects[0].type;
 
-    console.log(styleName, style.effects);
-
     if (effectType === "DROP_SHADOW" || effectType === "INNER_SHADOW") {
       const styleObject = {
         [keyNames.type]: "shadow",
         [keyNames.value]:
-          style.effects.length === 1
-            ? wrapShadowObject(style.effects[0], colorMode)
-            : style.effects.map((effect) =>
-                wrapShadowObject(
-                  effect as DropShadowEffect | InnerShadowEffect,
-                  colorMode
-                )
-              ),
+          style.effects.map((effect) =>
+            wrapShadowObject(
+              effect as DropShadowEffect | InnerShadowEffect,
+              colorMode, isDTCGForamt, includeValueAliasString
+            )
+          ),
       } as unknown as ShadowTokenI;
       result[styleName] = styleObject;
     }
 
     if (effectType === "LAYER_BLUR" || effectType === "BACKGROUND_BLUR") {
       const effect = style.effects[0];
+      const aliasRef = effect.boundVariables?.radius;
+      let aliasVariable = null;
+
+      if (aliasRef) {
+        aliasVariable = getAliasVariableName(
+          aliasRef.id,
+          isDTCGForamt,
+          includeValueAliasString
+        )
+      };
+
       const styleObject = {
         $type: "blur",
         $value: {
           role: effectType === "LAYER_BLUR" ? "layer" : "background",
-          blur: `${effect.radius}px`,
+          blur: aliasVariable || `${effect.radius}px`,
         },
       } as BlurTokenI;
       result[styleName] = styleObject;

diff --git a/src/utils/styles/gridStylesToTokens.ts b/src/utils/styles/gridStylesToTokens.ts
@@ -8,7 +8,7 @@ export const gridStylesToTokens = async (
   const keyNames = getTokenKeyName(isDTCGForamt);
   const gridStyles = figma.getLocalGridStyles();
 
-  console.log("gridStyles length", gridStyles.length);
+  console.log("gridStyles", gridStyles);
 
   let textTokens = {};
 

diff --git a/src/utils/styles/stylesToTokens.ts b/src/utils/styles/stylesToTokens.ts
@@ -43,7 +43,8 @@ export const stylesToTokens = async (props: iProps) => {
     const effectTokens = await effectStylesToTokens(
       includedStyles.effects.customName,
       colorMode,
-      isDTCGForamt
+      isDTCGForamt,
+      includeValueAliasString
     );
 
     styleTokens.push(effectTokens);

diff --git a/src/utils/styles/textStylesToTokens.ts b/src/utils/styles/textStylesToTokens.ts
@@ -4,8 +4,7 @@ import { getLineHeight } from "../text/getLineHeight";
 import { getLetterSpacing } from "../text/getLetterSpacing";
 import { getFontWeight } from "../text/getFontWeight";
 import { getTokenKeyName } from "../getTokenKeyName";
-// import {normalizeValue} from "../normalizeValue";
-import {getAliasVariableName} from "../getAliasVariableName";
+import { getAliasVariableName } from "../getAliasVariableName";
 
 
 export const textStylesToTokens = async (
@@ -16,17 +15,19 @@ export const textStylesToTokens = async (
   const keyNames = getTokenKeyName(isDTCGForamt);
   const textStyles = figma.getLocalTextStyles();
 
+  console.log("textStyles", textStyles);
+
   let textTokens = {};
 
   const allTextStyles = textStyles.reduce((result, style) => {
 
-    let aliasNames = {} as TextStyle["boundVariables"];
+    let aliasVariables = {} as TextStyle["boundVariables"];
     const boundVariables = style.boundVariables;
 
     if (boundVariables) {
       Object.keys(boundVariables).forEach((key: VariableBindableTextField) => {
-        aliasNames = {
-          ...aliasNames,
+        aliasVariables = {
+          ...aliasVariables,
           [key]: getAliasVariableName(
             boundVariables[key].id,
             isDTCGForamt,
@@ -39,11 +40,11 @@ export const textStylesToTokens = async (
     const styleObject = {
       [keyNames.type]: "typography",
       [keyNames.value]: {
-        fontFamily: aliasNames.fontFamily || style.fontName.family,
-        fontWeight: aliasNames.fontWeight || getFontWeight(style.fontName.style),
-        fontSize: aliasNames.fontSize || `${style.fontSize}px`,
-        lineHeight: aliasNames.lineHeight || getLineHeight(style.lineHeight),
-        letterSpacing: aliasNames.letterSpacing || getLetterSpacing(style.letterSpacing),
+        fontFamily: aliasVariables.fontFamily || style.fontName.family,
+        fontWeight: aliasVariables.fontWeight || getFontWeight(style.fontName.style),
+        fontSize: aliasVariables.fontSize || `${style.fontSize}px`,
+        lineHeight: aliasVariables.lineHeight || getLineHeight(style.lineHeight),
+        letterSpacing: aliasVariables.letterSpacing || getLetterSpacing(style.letterSpacing),
         textDecoration: style.textDecoration,
         textCase: style.textCase
       },