Add Tailwind support for Figma variables (#109)

* Modify Tailwind color functions to support Figma variables

* Refactor function to arrow function

* Fix fill opacity code

* Add new Tailwind preferences

* Prefer Tailwind color when color matches exactly

* Update UI with shorter labels and tooltips

---------

Co-authored-by: Dave Stewart <[email protected]>

Author: davestewart

apps/plugin/plugin-src/code.ts

@@ -24,7 +24,9 @@ const defaultPluginSettings: PluginSettings = {
   responsiveRoot: false,
   flutterGenerationMode: "snippet",
   swiftUIGenerationMode: "snippet",
-  roundTailwind: false,
+  roundTailwindValues: false,
+  roundTailwindColors: false,
+  customTailwindColors: false,
 };
 
 // A helper type guard to ensure the key belongs to the PluginSettings type

packages/backend/src/code.ts

@@ -19,7 +19,9 @@ export type PluginSettings = {
   responsiveRoot: boolean;
   flutterGenerationMode: string;
   swiftUIGenerationMode: string;
-  roundTailwind: boolean;
+  roundTailwindValues: boolean;
+  roundTailwindColors: boolean,
+  customTailwindColors: boolean,
 };
 
 export const run = (settings: PluginSettings) => {

packages/backend/src/common/retrieveUI/retrieveColors.ts

@@ -4,10 +4,11 @@ import {
   swiftuiGradient,
 } from "../../swiftui/builderImpl/swiftuiColor";
 import {
+  getTailwindFromVariable,
   tailwindColors,
   tailwindGradient,
   tailwindNearestColor,
-  tailwindSolidColor,
+  tailwindSolidColor
 } from "../../tailwind/builderImpl/tailwindColor";
 import {
   flutterColor,
@@ -68,8 +69,11 @@ const convertSolidColor = (
     const kind = "solid";
     const hex = rgbTo6hex(fill.color);
     const hexNearestColor = tailwindNearestColor(hex);
-    exported = tailwindSolidColor(fill.color, fill.opacity, kind);
-    colorName = tailwindColors[hexNearestColor];
+    const colorVar = fill.boundVariables?.color
+    exported = tailwindSolidColor(fill, kind);
+    colorName = colorVar
+      ? getTailwindFromVariable(colorVar)
+      : tailwindColors[hexNearestColor];
   } else if (framework === "SwiftUI") {
     exported = swiftuiColor(fill.color, opacity);
   }

packages/backend/src/tailwind/builderImpl/tailwindColor.ts

@@ -1,7 +1,8 @@
 import { nearestColorFrom } from "../../nearest-color/nearestColor";
 import { retrieveTopFill } from "../../common/retrieveFill";
-import { gradientAngle } from "../../common/color";
+import { gradientAngle, rgbTo6hex } from "../../common/color";
 import { nearestOpacity, nearestValue } from "../conversionTables";
+import { localTailwindSettings } from "../tailwindMain";
 
 // retrieve the SOLID color for tailwind
 export const tailwindColorFromFills = (
@@ -13,7 +14,7 @@ export const tailwindColorFromFills = (
 
   const fill = retrieveTopFill(fills);
   if (fill && fill.type === "SOLID") {
-    return tailwindSolidColor(fill.color, fill.opacity, kind);
+    return tailwindSolidColor(fill, kind);
   } else if (
     fill &&
     (fill.type === "GRADIENT_LINEAR" ||
@@ -22,31 +23,45 @@ export const tailwindColorFromFills = (
       fill.type === "GRADIENT_DIAMOND")
   ) {
     if (fill.gradientStops.length > 0) {
-      return tailwindSolidColor(
-        fill.gradientStops[0].color,
-        fill.opacity,
-        kind
-      );
+      return tailwindSolidColor(fill.gradientStops[0], kind);
     }
   }
   return "";
 };
 
-export const tailwindSolidColor = (
-  color: RGB,
-  opacity: number | undefined,
-  kind: string
-): string => {
-  // example: text-opacity-50
-  // ignore the 100. If opacity was changed, let it be visible.
-  const opacityProp =
-    opacity !== 1.0 ? `opacity-${nearestOpacity(opacity ?? 1.0)}` : null;
+/**
+ * Get the tailwind token name for a given color
+ *
+ * - variables: uses the tokenised variable name
+ * - colors:    uses the nearest Tailwind color name
+ */
+export const tailwindSolidColor = (fill: SolidPaint | ColorStop, kind?: string): string => {
+  // example: stone-500 or custom-color-700
+  let color: string;
+  if (localTailwindSettings.customTailwindColors && fill.boundVariables?.color) {
+    color = getTailwindFromVariable(fill.boundVariables.color);
+  } else {
+    const colorValue = "#" + rgbTo6hex(fill.color);
+    const { name, value } = getTailwindFromFigmaRGB(fill.color);
+    if (localTailwindSettings.roundTailwindColors || colorValue === value) {
+      color = name;
+    } else {
+      color = `[#${rgbTo6hex(fill.color)}]`;
+    }
+  }
 
-  // example: text-red-500
-  const colorProp = `${kind}-${getTailwindFromFigmaRGB(color)}${opacityProp ? `/${opacityProp}` : ""}`;
+  // if no kind, it's a variable stop, so just return the name
+  if (!kind) {
+    return color;
+  }
 
-  // if fill isn't visible, it shouldn't be painted.
-  return colorProp;
+  // grab opacity, or set it to full
+  const opacity = "opacity" in fill && fill.opacity !== 1.0
+    ? `/${nearestOpacity(fill.opacity ?? 1.0)}`
+    : "";
+
+  // example: text-red-500, text-custom-color-700/25
+  return `${kind}-${color}${opacity}`;
 };
 
 /**
@@ -71,24 +86,22 @@ export const tailwindGradient = (fill: GradientPaint): string => {
   const direction = gradientDirection(gradientAngle(fill));
 
   if (fill.gradientStops.length === 1) {
-    const fromColor = getTailwindFromFigmaRGB(fill.gradientStops[0].color);
+    const fromColor = tailwindSolidColor(fill.gradientStops[0]);
 
     return `${direction} from-${fromColor}`;
   } else if (fill.gradientStops.length === 2) {
-    const fromColor = getTailwindFromFigmaRGB(fill.gradientStops[0].color);
-    const toColor = getTailwindFromFigmaRGB(fill.gradientStops[1].color);
+    const fromColor = tailwindSolidColor(fill.gradientStops[0]);
+    const toColor = tailwindSolidColor(fill.gradientStops[1]);
 
     return `${direction} from-${fromColor} to-${toColor}`;
   } else {
-    const fromColor = getTailwindFromFigmaRGB(fill.gradientStops[0].color);
+    const fromColor = tailwindSolidColor(fill.gradientStops[0]);
 
     // middle (second color)
-    const viaColor = getTailwindFromFigmaRGB(fill.gradientStops[1].color);
+    const viaColor = tailwindSolidColor(fill.gradientStops[1]);
 
     // last
-    const toColor = getTailwindFromFigmaRGB(
-      fill.gradientStops[fill.gradientStops.length - 1].color
-    );
+    const toColor = tailwindSolidColor(fill.gradientStops[fill.gradientStops.length - 1]);
 
     return `${direction} from-${fromColor} via-${viaColor} to-${toColor}`;
   }
@@ -368,16 +381,17 @@ export const tailwindNearestColor = nearestColorFrom(
 );
 
 // figma uses r,g,b in [0, 1], while nearestColor uses it in [0, 255]
-export const getTailwindFromFigmaRGB = (color: RGB): string => {
+export const getTailwindFromFigmaRGB = (color: RGB) => {
   const colorMultiplied = {
     r: color.r * 255,
     g: color.g * 255,
     b: color.b * 255,
   };
-
-  return tailwindColors[tailwindNearestColor(colorMultiplied)];
+  const value = tailwindNearestColor(colorMultiplied);
+  const name = tailwindColors[value];
+  return { name, value };
 };
 
-export const getTailwindColor = (color: string | RGB): string => {
-  return tailwindColors[tailwindNearestColor(color)];
+export const getTailwindFromVariable = (alias: VariableAlias) => {
+  return figma.variables.getVariableById(alias.id)?.name.replaceAll("/", "-") || alias.id;
 };

packages/backend/src/tailwind/conversionTables.ts

@@ -37,7 +37,7 @@ const pxToRemToTailwind = (
 
   if (convertedValue) {
     return conversionMap[convertedValue];
-  } else if (localTailwindSettings.roundTailwind) {
+  } else if (localTailwindSettings.roundTailwindValues) {
     return conversionMap[nearestValue(value / 16, keys)];
   }
 
@@ -53,7 +53,7 @@ const pxToTailwind = (
 
   if (convertedValue) {
     return conversionMap[convertedValue];
-  } else if (localTailwindSettings.roundTailwind) {
+  } else if (localTailwindSettings.roundTailwindValues) {
     return conversionMap[nearestValue(value, keys)];
   }
 

packages/plugin-ui/src/PluginUI.tsx

@@ -15,7 +15,9 @@ export type PluginSettings = {
   responsiveRoot: boolean;
   flutterGenerationMode: string;
   swiftUIGenerationMode: string;
-  roundTailwind: boolean;
+  roundTailwindValues: boolean;
+  roundTailwindColors: boolean;
+  customTailwindColors: boolean;
 };
 
 type PluginUIProps = {
@@ -161,6 +163,7 @@ type LocalCodegenPreference =
       "framework" | "flutterGenerationMode" | "swiftUIGenerationMode"
     >;
     label: string;
+    description: string;
     value?: boolean;
     isDefault?: boolean;
     includedLanguages?: FrameworkTypes[];
@@ -171,6 +174,7 @@ export const preferenceOptions: LocalCodegenPreference[] = [
     itemType: "individual_select",
     propertyName: "jsx",
     label: "React (JSX)",
+    description: 'Render "class" attributes as "className"',
     isDefault: false,
     includedLanguages: ["HTML", "Tailwind"],
   },
@@ -191,21 +195,40 @@ export const preferenceOptions: LocalCodegenPreference[] = [
   {
     itemType: "individual_select",
     propertyName: "optimizeLayout",
-    label: "Optimize Layout",
+    label: "Optimize layout",
+    description: 'Attempt to auto-layout suitable element groups',
     isDefault: true,
     includedLanguages: ["HTML", "Tailwind", "Flutter", "SwiftUI"],
   },
   {
     itemType: "individual_select",
     propertyName: "layerName",
-    label: "Layer Names",
+    label: "Layer names",
+    description: 'Include layer names in classes',
     isDefault: false,
     includedLanguages: ["HTML", "Tailwind"],
   },
   {
     itemType: "individual_select",
-    propertyName: "roundTailwind",
-    label: "Round to Tailwind Values",
+    propertyName: "roundTailwindValues",
+    label: "Round values",
+    description: 'Round pixel values to nearest Tailwind sizes',
+    isDefault: false,
+    includedLanguages: ["Tailwind"],
+  },
+  {
+    itemType: "individual_select",
+    propertyName: "roundTailwindColors",
+    label: "Round colors",
+    description: 'Round color values to nearest Tailwind colors',
+    isDefault: false,
+    includedLanguages: ["Tailwind"],
+  },
+  {
+    itemType: "individual_select",
+    propertyName: "customTailwindColors",
+    label: "Custom colors",
+    description: 'Use color variable names as custom color names',
     isDefault: false,
     includedLanguages: ["Tailwind"],
   },
@@ -318,6 +341,7 @@ export const CodePanel = (props: {
                 <SelectableToggle
                   key={preference.propertyName}
                   title={preference.label}
+                  description={preference.description}
                   isSelected={
                     props.preferences?.[preference.propertyName] ??
                     preference.isDefault
@@ -547,6 +571,7 @@ type SelectableToggleProps = {
   onSelect: (isSelected: boolean) => void;
   isSelected?: boolean;
   title: string;
+  description?: string;
   buttonClass: string;
   checkClass: string;
 };
@@ -555,6 +580,7 @@ const SelectableToggle = ({
   onSelect,
   isSelected = false,
   title,
+  description,
   buttonClass,
   checkClass,
 }: SelectableToggleProps) => {
@@ -565,6 +591,7 @@ const SelectableToggle = ({
   return (
     <button
       onClick={handleClick}
+      title={description}
       className={`h-8 px-2 truncate flex items-center justify-center rounded-md cursor-pointer transition-all duration-300
       hover:bg-neutral-200 dark:hover:bg-neutral-700 gap-2 text-sm ring-1 
       ${