Add first color to borders.

Author: bernaferrari

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

@@ -68,7 +68,7 @@ const convertSolidColor = (
     const kind = "solid";
     const hex = rgbTo6hex(fill.color);
     const hexNearestColor = tailwindNearestColor(hex);
-    exported = tailwindSolidColor(fill, kind);
+    exported = tailwindSolidColor(fill.color, fill.opacity, kind);
     colorName = tailwindColors[hexNearestColor];
   } else if (framework === "SwiftUI") {
     exported = swiftuiColor(fill.color, opacity);

packages/backend/src/flutter/builderImpl/flutterColor.ts

@@ -12,8 +12,16 @@ export const flutterColorFromFills = (
   const fill = retrieveTopFill(fills);
 
   if (fill && fill.type === "SOLID") {
-    const opacity = fill.opacity ?? 1.0;
-    return flutterColor(fill.color, opacity);
+    return flutterColor(fill.color, fill.opacity ?? 1.0);
+  } else if (
+    fill &&
+    (fill.type === "GRADIENT_LINEAR" ||
+      fill.type === "GRADIENT_ANGULAR" ||
+      fill.type === "GRADIENT_RADIAL")
+  ) {
+    if (fill.gradientStops.length > 0) {
+      return flutterColor(fill.gradientStops[0].color, fill.opacity ?? 1.0);
+    }
   }
 
   return "";

packages/backend/src/html/builderImpl/htmlColor.ts

@@ -13,6 +13,20 @@ export const htmlColorFromFills = (
     // if fill isn't visible, it shouldn't be painted.
     return htmlColor(fill.color, fill.opacity);
   }
+  if (
+    fill &&
+    (fill.type === "GRADIENT_LINEAR" ||
+      fill.type === "GRADIENT_ANGULAR" ||
+      fill.type === "GRADIENT_RADIAL" ||
+      fill.type === "GRADIENT_DIAMOND")
+  ) {
+    if (fill.gradientStops.length > 0) {
+      return htmlColor(
+        fill.gradientStops[0].color,
+        fill.opacity
+      );
+    }
+  }
 
   return "";
 };

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -90,7 +90,9 @@ export class HtmlDefaultBuilder {
         formatWithJSX(
           "border",
           this.isJSX,
-          [sliceNum(weight), color, borderStyle].filter((d) => d).join(" ")
+          [`${sliceNum(weight)}px`, color, borderStyle]
+            .filter((d) => d)
+            .join(" ")
         )
       );
     } else {

packages/backend/src/swiftui/builderImpl/swiftuiColor.ts

@@ -6,6 +6,15 @@ import { sliceNum } from "../../common/numToAutoFixed";
 export const swiftUISolidColor = (fill: Paint): string => {
   if (fill && fill.type === "SOLID") {
     return swiftuiColor(fill.color, fill.opacity ?? 1.0);
+  } else if (
+    fill &&
+    (fill.type === "GRADIENT_LINEAR" ||
+      fill.type === "GRADIENT_ANGULAR" ||
+      fill.type === "GRADIENT_RADIAL")
+  ) {
+    if (fill.gradientStops.length > 0) {
+      return swiftuiColor(fill.gradientStops[0].color, fill.opacity ?? 1.0);
+    }
   }
 
   return "";

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

@@ -13,22 +13,39 @@ export const tailwindColorFromFills = (
 
   const fill = retrieveTopFill(fills);
   if (fill && fill.type === "SOLID") {
-    return tailwindSolidColor(fill, kind);
+    return tailwindSolidColor(fill.color, fill.opacity, kind);
+  } else if (
+    fill &&
+    (fill.type === "GRADIENT_LINEAR" ||
+      fill.type === "GRADIENT_ANGULAR" ||
+      fill.type === "GRADIENT_RADIAL" ||
+      fill.type === "GRADIENT_DIAMOND")
+  ) {
+    if (fill.gradientStops.length > 0) {
+      return tailwindSolidColor(
+        fill.gradientStops[0].color,
+        fill.opacity,
+        kind
+      );
+    }
   }
-
   return "";
 };
 
-export const tailwindSolidColor = (fill: SolidPaint, kind: string): string => {
-  const opacity = fill.opacity ?? 1.0;
-
+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 ? `${kind}-opacity-${nearestOpacity(opacity)}` : null;
+    opacity !== 1.0
+      ? `${kind}-opacity-${nearestOpacity(opacity ?? 1.0)}`
+      : null;
 
   // example: text-red-500
-  const colorProp = `${kind}-${getTailwindFromFigmaRGB(fill.color)}`;
+  const colorProp = `${kind}-${getTailwindFromFigmaRGB(color)}`;
 
   // if fill isn't visible, it shouldn't be painted.
   return [colorProp, opacityProp].filter((d) => d).join(" ");

packages/plugin-ui/src/PluginUI.tsx

@@ -35,7 +35,7 @@ type PluginUIProps = {
     contrastWhite: number;
     contrastBlack: number;
   }[];
-  gradients: { cssPreview: string; exportedValue: string }[];
+  gradients: { cssPreview: string; exportValue: string }[];
 };
 
 export const PluginUI = (props: PluginUIProps) => {
@@ -443,7 +443,7 @@ export const ColorsPanel = (props: {
 export const GradientsPanel = (props: {
   gradients: {
     cssPreview: string;
-    exportedValue: string;
+    exportValue: string;
   }[];
   onColorClick: (color: string) => void;
 }) => {
@@ -471,7 +471,7 @@ export const GradientsPanel = (props: {
             }`}
             style={{ background: gradient.cssPreview }}
             onClick={() => {
-              handleButtonClick(gradient.exportedValue, idx);
+              handleButtonClick(gradient.exportValue, idx);
             }}
           ></button>
         ))}