@@ -12,7 +12,7 @@ import {
1212 flutterGradient ,
1313} from "../../flutter/builderImpl/flutterColor" ;
1414import {
15- htmlColor ,
15+ htmlColorFromFill ,
1616 htmlGradientFromFills ,
1717} from "../../html/builderImpl/htmlColor" ;
1818import { calculateContrastRatio } from "./commonUI" ;
@@ -21,31 +21,41 @@ import {
2121 SolidColorConversion ,
2222 Framework ,
2323} from "types" ;
24+ import { processColorVariables } from "../../altNodes/jsonNodeConversion" ;
2425
25- export const retrieveGenericSolidUIColors = (
26+ export const retrieveGenericSolidUIColors = async (
2627 framework : Framework ,
27- ) : Array < SolidColorConversion > => {
28+ ) : Promise < Array < SolidColorConversion > > => {
2829 const selectionColors = figma . getSelectionColors ( ) ;
2930 if ( ! selectionColors || selectionColors . paints . length === 0 ) return [ ] ;
3031
3132 const colors : Array < SolidColorConversion > = [ ] ;
32- selectionColors . paints . forEach ( ( paint ) => {
33- const fill = convertSolidColor ( paint , framework ) ;
34- if ( fill ) {
35- const exists = colors . find ( ( col ) => col . exportValue === fill . exportValue ) ;
36- if ( ! exists ) {
37- colors . push ( fill ) ;
33+
34+ // Process all paints in parallel to handle variables
35+ await Promise . all (
36+ selectionColors . paints . map ( async ( d ) => {
37+ const paint = { ...d } as Paint ;
38+ await processColorVariables ( paint as any ) ;
39+
40+ const fill = await convertSolidColor ( paint , framework ) ;
41+ if ( fill ) {
42+ const exists = colors . find (
43+ ( col ) => col . exportValue === fill . exportValue ,
44+ ) ;
45+ if ( ! exists ) {
46+ colors . push ( fill ) ;
47+ }
3848 }
39- }
40- } ) ;
49+ } ) ,
50+ ) ;
4151
4252 return colors . sort ( ( a , b ) => a . hex . localeCompare ( b . hex ) ) ;
4353} ;
4454
45- const convertSolidColor = (
55+ const convertSolidColor = async (
4656 fill : Paint ,
4757 framework : Framework ,
48- ) : SolidColorConversion | null => {
58+ ) : Promise < SolidColorConversion | null > => {
4959 const black = { r : 0 , g : 0 , b : 0 } ;
5060 const white = { r : 1 , g : 1 , b : 1 } ;
5161
@@ -63,55 +73,80 @@ const convertSolidColor = (
6373 if ( framework === "Flutter" ) {
6474 output . exportValue = flutterColor ( fill . color , opacity ) ;
6575 } else if ( framework === "HTML" ) {
66- output . exportValue = htmlColor ( fill . color , opacity ) ;
76+ output . exportValue = htmlColorFromFill ( fill as any ) ;
6777 } else if ( framework === "Tailwind" ) {
68- Object . assign ( output , tailwindColor ( fill ) ) ;
78+ // Pass true to use CSS variable syntax for variables
79+ output . exportValue = tailwindColor ( fill as any , true ) . exportValue ;
6980 } else if ( framework === "SwiftUI" ) {
7081 output . exportValue = swiftuiColor ( fill . color , opacity ) ;
7182 }
7283
7384 return output ;
7485} ;
7586
76- export const retrieveGenericLinearGradients = (
87+ export const retrieveGenericLinearGradients = async (
7788 framework : Framework ,
78- ) : Array < LinearGradientConversion > => {
89+ ) : Promise < Array < LinearGradientConversion > > => {
7990 const selectionColors = figma . getSelectionColors ( ) ;
8091 const colorStr : Array < LinearGradientConversion > = [ ] ;
8192
82- console . log ( "selectionColors" , selectionColors ) ;
83-
84- selectionColors ?. paints . forEach ( ( paint ) => {
85- if ( paint . type === "GRADIENT_LINEAR" ) {
86- let fill = { ...paint } ;
87- const t = fill . gradientTransform ;
88- fill . gradientHandlePositions = [
89- { x : t [ 0 ] [ 2 ] , y : t [ 1 ] [ 2 ] } , // Start: (e, f)
90- { x : t [ 0 ] [ 0 ] + t [ 0 ] [ 2 ] , y : t [ 1 ] [ 0 ] + t [ 1 ] [ 2 ] } , // End: (a + e, b + f)
91- ] ;
92- console . log ( "fill is" , { ...fill } ) ;
93-
94- let exportValue = "" ;
95- switch ( framework ) {
96- case "Flutter" :
97- exportValue = flutterGradient ( fill ) ;
98- break ;
99- case "HTML" :
100- exportValue = htmlGradientFromFills ( fill ) ;
101- break ;
102- case "Tailwind" :
103- exportValue = tailwindGradient ( fill ) ;
104- break ;
105- case "SwiftUI" :
106- exportValue = swiftuiGradient ( fill ) ;
107- break ;
93+ if ( ! selectionColors || selectionColors . paints . length === 0 ) return [ ] ;
94+
95+ // Process all gradient paints
96+ await Promise . all (
97+ selectionColors . paints . map ( async ( paint ) => {
98+ if ( paint . type === "GRADIENT_LINEAR" ) {
99+ let fill = { ...paint } ;
100+ const t = fill . gradientTransform ;
101+ fill . gradientHandlePositions = [
102+ { x : t [ 0 ] [ 2 ] , y : t [ 1 ] [ 2 ] } , // Start: (e, f)
103+ { x : t [ 0 ] [ 0 ] + t [ 0 ] [ 2 ] , y : t [ 1 ] [ 0 ] + t [ 1 ] [ 2 ] } , // End: (a + e, b + f)
104+ ] ;
105+
106+ // Process gradient stops for variables
107+ if ( fill . gradientStops ) {
108+ for ( const stop of fill . gradientStops ) {
109+ if ( stop . boundVariables ?. color ) {
110+ try {
111+ const variableId = stop . boundVariables . color . id ;
112+ const variable = figma . variables . getVariableById ( variableId ) ;
113+ if ( variable ) {
114+ ( stop as any ) . variableColorName = variable . name
115+ . replace ( / \s + / g, "-" )
116+ . toLowerCase ( ) ;
117+ }
118+ } catch ( e ) {
119+ console . error (
120+ "Error retrieving variable for gradient stop:" ,
121+ e ,
122+ ) ;
123+ }
124+ }
125+ }
126+ }
127+
128+ let exportValue = "" ;
129+ switch ( framework ) {
130+ case "Flutter" :
131+ exportValue = flutterGradient ( fill ) ;
132+ break ;
133+ case "HTML" :
134+ exportValue = htmlGradientFromFills ( fill ) ;
135+ break ;
136+ case "Tailwind" :
137+ exportValue = tailwindGradient ( fill ) ;
138+ break ;
139+ case "SwiftUI" :
140+ exportValue = swiftuiGradient ( fill ) ;
141+ break ;
142+ }
143+ colorStr . push ( {
144+ cssPreview : htmlGradientFromFills ( fill ) ,
145+ exportValue,
146+ } ) ;
108147 }
109- colorStr . push ( {
110- cssPreview : htmlGradientFromFills ( fill ) ,
111- exportValue,
112- } ) ;
113- }
114- } ) ;
148+ } ) ,
149+ ) ;
115150
116151 return colorStr ;
117152} ;
0 commit comments