multi fill working, but single fill still has fill property

lukasoppermann · Sep 30, 2020 · ea8503d · ea8503d
1 parent 605575d
commit ea8503d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/src/extractor/extractColors.ts b/src/extractor/extractColors.ts
@@ -3,6 +3,7 @@ import { colorPropertyInterface, fillValuesType, gradientValuesType } from '../.
 import { GradientType, PropertyType } from '../../types/valueTypes'
 import { convertPaintToRgba, roundRgba } from '../utilities/convertColor'
 import getTokenStyles from '../utilities/getTokenStyles'
+import roundWithDecimals from '../utilities/roundWithDecimals'
 
 const gradientType = {
   "GRADIENT_LINEAR": "linear",
@@ -20,7 +21,42 @@ const paintCategory = (paint: Paint) => {
   }
 }
 
-const extractFill = (paint): fillValuesType | gradientValuesType => {
+// const extractFill = (paint): fillValuesType | gradientValuesType => {
+//   if (paint.type === "SOLID") {
+//     return {
+//       fill: {
+//         value: convertPaintToRgba(paint),
+//         type: 'color' as PropertyType
+//       }
+//     }
+//   }
+//   if (["GRADIENT_LINEAR", "GRADIENT_RADIAL", "GRADIENT_ANGULAR", "GRADIENT_DIAMOND"].includes(paint.type)) {
+//     return {
+//       gradientType: {
+//         value: gradientType[paint.type] as GradientType,
+//         type: "string" as PropertyType
+//       },
+//       stops: paint.gradientStops.map(stop => ({
+//         position: {
+//           value: stop.position,
+//           type: "number" as PropertyType
+//         },
+//         color: {
+//           value: roundRgba(stop.color),
+//           type: "color" as PropertyType
+//         }
+//       })),
+//       opacity: {
+//         value: paint.opacity,
+//         type: "number" as PropertyType
+//       }
+//     }
+//   }
+
+//   return null
+// } 
+
+const extractFills = (paint): fillValuesType | gradientValuesType => {
   if (paint.type === "SOLID") {
     return {
       fill: {
@@ -37,7 +73,7 @@ const extractFill = (paint): fillValuesType | gradientValuesType => {
       },
       stops: paint.gradientStops.map(stop => ({
         position: {
-          value: stop.position,
+          value: roundWithDecimals(stop.position),
           type: "number" as PropertyType
         },
         color: {
@@ -46,7 +82,7 @@ const extractFill = (paint): fillValuesType | gradientValuesType => {
         }
       })),
       opacity: {
-        value: paint.opacity,
+        value: roundWithDecimals(paint.opacity),
         type: "number" as PropertyType
       }
     }
@@ -70,8 +106,8 @@ const extractColors: extractorInterface = (tokenNodes: PaintStyle[]): colorPrope
     name: node.name,
     // id: node.id,
     description: node.description || null,
-    category: paintCategory(node.paints[0]),
-    values: extractFill(node.paints[0])
+    category: 'fill', //paintCategory(node.paints[0]),
+    values: node.paints.map(paint => extractFills(paint)) // extractFill(node.paints[0])
   }))
 
 }

diff --git a/src/transformer/styleDictionaryTransformer.ts b/src/transformer/styleDictionaryTransformer.ts
@@ -40,7 +40,8 @@ const categoryTransformer = {
   gradient: defaultTransformer,
   grid: defaultTransformer,
   effect: defaultTransformer,
-  radius: defaultTransformer
+  radius: defaultTransformer,
+  fill: defaultTransformer
 }
 
 const styleDictionaryConvertValue = (value, type: string) => {