Support tailwind version

assets/convert_tailwind_colors.js

@@ -370,9 +370,29 @@ const tailwind_colors = {
   },
 };
 
+const cc_colors = {
+  "cc-teal": {
+    tint: "#9ef5f2",
+    base: "#03bfbc",
+    50: "#e7f3f3",
+    100: "#cce5e5",
+    200: "#b4d9d9",
+    300: "#99cccb",
+    400: "#82bfbe",
+    500: "#68b1b0",
+    600: "#4ea6a5",
+    700: "#369b99",
+    800: "#1c8d8b",
+    900: "#027e7c",
+  },
+  "cc-red": {
+    200: "#fcdad3",
+  },
+};
+
 // Step #2: Transform that into an array (Array(2), Array(2), ...);
 // Example: ["fuchsia", {…}] where {…} is {50: "#fdf4ff", ...}
-const colorsArr = Object.entries(tailwind_colors);
+const colorsArr = Object.entries({ ...tailwind_colors, ...cc_colors });
 
 // Step #3: Transform into (Array(10), Array(10), ...) while reverting key-value;
 // Example: {#fdf4ff: "fuchsia-50"}

package.json

@@ -69,5 +69,9 @@
     "url-loader": "^4.1.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
+  },
+  "volta": {
+    "node": "16.15.0",
+    "npm": "8.10.0"
   }
 }

src/tailwind/builderImpl/tailwindBlend.ts

@@ -11,7 +11,7 @@ import { AltLayoutMixin, AltSceneNode } from "../../altNodes/altMixins";
 export const tailwindOpacity = (node: AltBlendMixin): string => {
   // [when testing] node.opacity can be undefined
   if (node.opacity !== undefined && node.opacity !== 1) {
-    return `opacity-${nearestOpacity(node.opacity)} `;
+    return `tw-opacity-${nearestOpacity(node.opacity)} `;
   }
   return "";
 };
@@ -27,7 +27,7 @@ export const tailwindVisibility = (node: AltSceneNode): string => {
   // Therefore, instead of changing the visibility (which causes bugs in nested divs),
   // this plugin is going to ignore color and stroke
   if (node.visible !== undefined && !node.visible) {
-    return "invisible ";
+    return "tw-invisible ";
   }
   return "";
 };
@@ -66,7 +66,7 @@ export const tailwindRotation = (node: AltLayoutMixin): string => {
       nearest = -nearest;
     }
 
-    return `transform ${minusIfNegative}rotate-${nearest} `;
+    return `tw-transform ${minusIfNegative}rotate-${nearest} `;
   }
   return "";
 };

src/tailwind/builderImpl/tailwindBorder.ts

@@ -14,7 +14,7 @@ export const tailwindBorderWidth = (node: AltGeometryMixin): string => {
     const nearest = nearestValue(node.strokeWeight, allowedValues);
     if (nearest === 1) {
       // special case
-      return "border ";
+      return "tw-border ";
     } else {
       return `border-${nearest} `;
     }
@@ -29,7 +29,7 @@ export const tailwindBorderWidth = (node: AltGeometryMixin): string => {
  */
 export const tailwindBorderRadius = (node: AltSceneNode): string => {
   if (node.type === "ELLIPSE") {
-    return "rounded-full ";
+    return "tw-rounded-full ";
   } else if (
     (!("cornerRadius" in node) && !("topLeftRadius" in node)) ||
     (node.cornerRadius === figma.mixed && node.topLeftRadius === undefined) ||
@@ -45,23 +45,23 @@ export const tailwindBorderRadius = (node: AltSceneNode): string => {
   if (node.cornerRadius !== figma.mixed) {
     if (node.cornerRadius >= node.height / 2) {
       // special case. If height is 90 and cornerRadius is 45, it is full.
-      comp += "rounded-full ";
+      comp += "tw-rounded-full ";
     } else {
-      comp += `rounded${pxToBorderRadius(node.cornerRadius)} `;
+      comp += `tw-rounded${pxToBorderRadius(node.cornerRadius)} `;
     }
   } else {
     // todo optimize for tr/tl/br/bl instead of t/r/l/b
     if (node.topLeftRadius !== 0) {
-      comp += `rounded-tl${pxToBorderRadius(node.topLeftRadius)} `;
+      comp += `tw-rounded-tl${pxToBorderRadius(node.topLeftRadius)} `;
     }
     if (node.topRightRadius !== 0) {
-      comp += `rounded-tr${pxToBorderRadius(node.topRightRadius)} `;
+      comp += `tw-rounded-tr${pxToBorderRadius(node.topRightRadius)} `;
     }
     if (node.bottomLeftRadius !== 0) {
-      comp += `rounded-bl${pxToBorderRadius(node.bottomLeftRadius)} `;
+      comp += `tw-rounded-bl${pxToBorderRadius(node.bottomLeftRadius)} `;
     }
     if (node.bottomRightRadius !== 0) {
-      comp += `rounded-br${pxToBorderRadius(node.bottomRightRadius)} `;
+      comp += `tw-rounded-br${pxToBorderRadius(node.bottomRightRadius)} `;
     }
   }
 

src/tailwind/builderImpl/tailwindColor.ts

@@ -37,12 +37,13 @@ export const tailwindSolidColor = (fill: SolidPaint, 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)} ` : "";
+    opacity !== 1.0 ? `tw-${kind}-opacity-${nearestOpacity(opacity)} ` : "";
 
   // example: text-red-500
-  const colorProp = `${kind}-${getTailwindFromFigmaRGB(fill.color)} `;
+  const colorProp = `tw-${kind}-${getTailwindFromFigmaRGB(fill.color)} `;
 
   // if fill isn't visible, it shouldn't be painted.
+  // not sure about this one
   return `${colorProp}${opacityProp}`;
 };
 
@@ -70,12 +71,12 @@ export const tailwindGradient = (fill: GradientPaint): string => {
   if (fill.gradientStops.length === 1) {
     const fromColor = getTailwindFromFigmaRGB(fill.gradientStops[0].color);
 
-    return `${direction} from-${fromColor} `;
+    return `tw-${direction} tw-from-${fromColor} `;
   } else if (fill.gradientStops.length === 2) {
     const fromColor = getTailwindFromFigmaRGB(fill.gradientStops[0].color);
     const toColor = getTailwindFromFigmaRGB(fill.gradientStops[1].color);
 
-    return `${direction} from-${fromColor} to-${toColor} `;
+    return `tw-${direction} tw-gradient-from-${fromColor} tw-gradient-to-${toColor} `;
   } else {
     const fromColor = getTailwindFromFigmaRGB(fill.gradientStops[0].color);
 
@@ -87,7 +88,7 @@ export const tailwindGradient = (fill: GradientPaint): string => {
       fill.gradientStops[fill.gradientStops.length - 1].color
     );
 
-    return `${direction} from-${fromColor} via-${viaColor} to-${toColor} `;
+    return `tw-${direction} tw-from-${fromColor} tw-via-${viaColor} tw-to-${toColor} `;
   }
 };
 
@@ -414,6 +415,92 @@ export const tailwindColors: Record<string, string> = {
   "#b91c1c": "red-700",
   "#991b1b": "red-800",
   "#7f1d1d": "red-900",
+  "#fafaf9": "warmGray-50",
+  "#f5f5f4": "warmGray-100",
+  "#e7e5e4": "warmGray-200",
+  "#d6d3d1": "warmGray-300",
+  "#a8a29e": "warmGray-400",
+  "#78716c": "warmGray-500",
+  "#57534e": "warmGray-600",
+  "#44403c": "warmGray-700",
+  "#292524": "warmGray-800",
+  "#1c1917": "warmGray-900",
+  "#fafafa": "gray-50",
+  "#f5f5f5": "trueGray-100",
+  "#e5e5e5": "trueGray-200",
+  "#d4d4d4": "trueGray-300",
+  "#a3a3a3": "trueGray-400",
+  "#737373": "trueGray-500",
+  "#525252": "trueGray-600",
+  "#404040": "trueGray-700",
+  "#262626": "trueGray-800",
+  "#171717": "trueGray-900",
+  "#f4f4f5": "gray-100",
+  "#e4e4e7": "gray-200",
+  "#d4d4d8": "gray-300",
+  "#a1a1aa": "gray-400",
+  "#71717a": "gray-500",
+  "#52525b": "gray-600",
+  "#3f3f46": "gray-700",
+  "#27272a": "gray-800",
+  "#18181b": "gray-900",
+  "#f9fafb": "coolGray-50",
+  "#f3f4f6": "coolGray-100",
+  "#e5e7eb": "coolGray-200",
+  "#d1d5db": "coolGray-300",
+  "#9ca3af": "coolGray-400",
+  "#6b7280": "coolGray-500",
+  "#4b5563": "coolGray-600",
+  "#374151": "coolGray-700",
+  "#1f2937": "coolGray-800",
+  "#111827": "coolGray-900",
+  "#f8fafc": "blueGray-50",
+  "#f1f5f9": "blueGray-100",
+  "#e2e8f0": "blueGray-200",
+  "#cbd5e1": "blueGray-300",
+  "#94a3b8": "blueGray-400",
+  "#64748b": "blueGray-500",
+  "#475569": "blueGray-600",
+  "#334155": "blueGray-700",
+  "#1e293b": "blueGray-800",
+  "#0f172a": "blueGray-900",
+};
+
+export const ccColors: Record<string, string> = {
+  "#f5826f": "warningRed",
+  "#00bfbc": "ocean",
+  "#9df5f2": "ocean-light",
+  "#047f7d": "ocean-dark",
+  "#dbefee": "ocean-neutral",
+  "#e6f3f2": "stormyOcean-50",
+  "#cde5e5": "stormyOcean-100",
+  "#b3d8d8": "stormyOcean-200",
+  "#9bcccb": "stormyOcean-300",
+  "#81bfbe": "stormyOcean-400",
+  "#68b2b1": "stormyOcean-500",
+  "#4fa5a3": "stormyOcean-600",
+  "#369997": "stormyOcean-700",
+  "#1e8c8a": "stormyOcean-800",
+  "#00e1a2": "spring",
+  "#9ff8d8": "spring-light",
+  "#02835c": "spring-dark",
+  "#e1eee8": "spring-neutral",
+  "#ff7fa8": "bubblegum",
+  "#ffddeb": "bubblegum-light",
+  "#ca3b72": "bubblegum-dark",
+  "#f9e7eb": "bubblegum-neutral",
+  "#f7d12f": "dandelion",
+  "#fbe697": "dandelion-light",
+  "#877001": "dandelion-dark",
+  "#f5ead2": "dandelion-neutral",
+  "#ff7b68": "sunset",
+  "#fedfd9": "sunset-light",
+  "#cc4135": "sunset-dark",
+  "#fae7e4": "sunset-neutral",
+  "#daa0de": "lavender",
+  "#fedbff": "lavender-light",
+  "#9f57a5": "lavender-dark",
+  "#f7e6f8": "lavender-neutral",
   "#f9fafb": "gray-50",
   "#f3f4f6": "gray-100",
   "#e5e7eb": "gray-200",
@@ -426,9 +513,7 @@ export const tailwindColors: Record<string, string> = {
   "#111827": "gray-900",
 };
 
-export const tailwindNearestColor = nearestColorFrom(
-  Object.keys(tailwindColors)
-);
+export const tailwindNearestColor = nearestColorFrom(Object.keys(ccColors));
 
 // figma uses r,g,b in [0, 1], while nearestColor uses it in [0, 255]
 export const getTailwindFromFigmaRGB = (color: RGB): string => {
@@ -438,9 +523,9 @@ export const getTailwindFromFigmaRGB = (color: RGB): string => {
     b: color.b * 255,
   };
 
-  return tailwindColors[tailwindNearestColor(colorMultiplied)];
+  return ccColors[tailwindNearestColor(colorMultiplied)];
 };
 
 export const getTailwindColor = (color: string | RGB): string => {
-  return tailwindColors[tailwindNearestColor(color)];
+  return ccColors[tailwindNearestColor(color)];
 };

src/tailwind/builderImpl/tailwindPadding.ts

@@ -15,17 +15,17 @@ export const tailwindPadding = (
   }
 
   if ("all" in padding) {
-    return `p-${pxToLayoutSize(padding.all)} `;
+    return `tw-p-${pxToLayoutSize(padding.all)} `;
   }
 
   let comp = "";
 
   // horizontal and vertical, as the default AutoLayout
   if (padding.horizontal) {
-    comp += `px-${pxToLayoutSize(padding.horizontal)} `;
+    comp += `tw-px-${pxToLayoutSize(padding.horizontal)} `;
   }
   if (padding.vertical) {
-    comp += `py-${pxToLayoutSize(padding.vertical)} `;
+    comp += `tw-py-${pxToLayoutSize(padding.vertical)} `;
   }
 
   // if left and right exists, verify if they are the same after [pxToLayoutSize] conversion.
@@ -34,14 +34,14 @@ export const tailwindPadding = (
     const right = pxToLayoutSize(padding.right);
 
     if (left === right) {
-      comp += `px-${left} `;
+      comp += `tw-px-${left} `;
     } else {
-      comp += `pl-${left} pr-${right} `;
+      comp += `tw-pl-${left} pr-${right} `;
     }
   } else if (padding.left) {
-    comp += `pl-${pxToLayoutSize(padding.left)} `;
+    comp += `tw-pl-${pxToLayoutSize(padding.left)} `;
   } else if (padding.right) {
-    comp += `pr-${pxToLayoutSize(padding.right)} `;
+    comp += `tw-pr-${pxToLayoutSize(padding.right)} `;
   }
 
   // if top and bottom exists, verify if they are the same after [pxToLayoutSize] conversion.
@@ -50,14 +50,14 @@ export const tailwindPadding = (
     const bottom = pxToLayoutSize(padding.bottom);
 
     if (top === bottom) {
-      comp += `py-${top} `;
+      comp += `tw-py-${top} `;
     } else {
-      comp += `pt-${top} pb-${bottom} `;
+      comp += `tw-pt-${top} tw-pb-${bottom} `;
     }
   } else if (padding.top) {
-    comp += `pt-${pxToLayoutSize(padding.top)} `;
+    comp += `tw-pt-${pxToLayoutSize(padding.top)} `;
   } else if (padding.bottom) {
-    comp += `pb-${pxToLayoutSize(padding.bottom)} `;
+    comp += `tw-pb-${pxToLayoutSize(padding.bottom)} `;
   }
 
   return comp;

src/tailwind/builderImpl/tailwindShadow.ts

@@ -13,13 +13,13 @@ export const tailwindShadow = (node: AltBlendMixin): string => {
     let boxShadow = "";
     // simple shadow from tailwind
     if (dropShadow.length > 0) {
-      boxShadow = "shadow ";
+      boxShadow = "tw-shadow ";
     }
 
     const innerShadow =
       node.effects.filter((d): d is ShadowEffect => d.type === "INNER_SHADOW")
         .length > 0
-        ? "shadow-inner "
+        ? "tw-shadow-inner "
         : "";
 
     return boxShadow + innerShadow;

src/tailwind/builderImpl/tailwindSize.ts

@@ -12,35 +12,35 @@ export const tailwindSizePartial = (node: AltSceneNode): [string, string] => {
 
   let w = "";
   if (typeof size.width === "number") {
-    w += `w-${pxToLayoutSize(size.width)} `;
+    w += `tw-w-${pxToLayoutSize(size.width)} `;
   } else if (typeof size.width === "string") {
     if (
       size.width === "full" &&
       node.parent &&
       "layoutMode" in node.parent &&
       node.parent.layoutMode === "HORIZONTAL"
     ) {
-      w += `flex-1 `;
+      w += `tw-flex-1 `;
     } else {
-      w += `w-${size.width} `;
+      w += `tw-w-${size.width} `;
     }
   }
 
   let h = "";
   // console.log("sizeResults is ", sizeResult, node);
 
   if (typeof size.height === "number") {
-    h = `h-${pxToLayoutSize(size.height)} `;
+    h = `tw-h-${pxToLayoutSize(size.height)} `;
   } else if (typeof size.height === "string") {
     if (
       size.height === "full" &&
       node.parent &&
       "layoutMode" in node.parent &&
       node.parent.layoutMode === "VERTICAL"
     ) {
-      h += `flex-1 `;
+      h += `tw-flex-1 `;
     } else {
-      h += `h-${size.height} `;
+      h += `tw-h-${size.height} `;
     }
   }