Partial PR of blendmode value (#193)

* add support for blendmode * merged main and fixed tests Co-authored-by: Lukas Oppermann <[email protected]>
lukasoppermann · Jun 29, 2022 · 1c46e61 · 1c46e61
1 parent 348e65e
commit 1c46e61
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 23 deletions.
diff --git a/src/extractor/extractColors.ts b/src/extractor/extractColors.ts
@@ -12,7 +12,8 @@ import config from '@config/config'
 const transparentFill: fillValuesType = {
   fill: {
     value: { r: 0, g: 0, b: 0, a: 0 },
-    type: 'color'
+    type: 'color',
+    blendMode: 'normal'
   }
 }
 
@@ -59,7 +60,8 @@ const extractFills = (paint): fillValuesType | gradientValuesType => {
     return {
       fill: {
         value: convertPaintToRgba(paint),
-        type: 'color' as PropertyType
+        type: 'color' as PropertyType,
+        blendMode: paint.blendMode?.toLowerCase() || 'normal'
       }
     }
   }

diff --git a/src/transformer/standardTransformer.ts b/src/transformer/standardTransformer.ts
@@ -140,7 +140,8 @@ const typographyValueTransformer = ({ name, values }) => ({
 
 const colorValueTransformer = ({ fill }): StandardTokenDataInterface => ({
   type: 'color' as StandardTokenTypes,
-  value: rgbaObjectToHex8(fill.value)
+  value: rgbaObjectToHex8(fill.value),
+  blendMode: fill.blendMode?.toLowerCase() || 'normal'
 })
 
 const gradientValueTransformer = ({ gradientType, rotation, stops, opacity }): StandardTokenDataInterface => ({
@@ -164,7 +165,8 @@ const fillValueTransformer = (token): StandardTokenDataInterface | StandardToken
   if (token.extensions && token.extensions[config.key.extensionPluginData] && token.extensions[config.key.extensionPluginData].alias) {
     return {
       type: Object.hasOwnProperty.call(token.values[0], 'fill') ? 'color' : 'custom-gradient',
-      value: `{${token.extensions[config.key.extensionPluginData].alias}}`
+      value: `{${token.extensions[config.key.extensionPluginData].alias}}`,
+      blendMode: token.values[0]?.fill?.blendMode?.toLowerCase() || 'normal'
     }
   }
   // no alias, use value

diff --git a/tests/integration/data/original.variables.css b/tests/integration/data/original.variables.css
@@ -168,6 +168,7 @@
   --color-colors-ref-blue: #044aff; /* Some other description */
   --color-colors-special-characters: #40df50; /* Emoji */
   --color-colors-special-characters-nderung: #3456af;
+  --color-invalid-empty: rgba(0, 0, 0, 0);
   --grid-multiple-0-pattern: columns;
   --grid-multiple-0-section-size: 1;
   --grid-multiple-0-gutter-size: 20;

diff --git a/tests/integration/data/standard.variables.css b/tests/integration/data/standard.variables.css
@@ -46,6 +46,7 @@
   --color-colors-ref-blue: rgb(4, 74, 255); /* Some other description */
   --color-colors-special-characters: rgb(64, 223, 80); /* Emoji */
   --color-colors-special-characters-nderung: rgb(52, 86, 175);
+  --color-invalid-empty: rgba(0, 0, 0, 0);
   --grid-multiple-0: [object Object];
   --grid-multiple-1: [object Object];
   --grid-multiple-2: [object Object];

diff --git a/tests/unit/data/extractedFigmaTokens.data.ts b/tests/unit/data/extractedFigmaTokens.data.ts
@@ -579,7 +579,8 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 255, g: 230, b: 0, a: 1 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'NORMAL'
         }
       }
     ],
@@ -594,6 +595,7 @@ export const extractedFigmaTokens = {
     category: 'color' as tokenCategoryType,
     exportKey: 'color' as tokenExportKeyType,
     description: 'a color token',
+    blendMode: 'NORMAL',
     values: [
       {
         fill: {
@@ -618,13 +620,15 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 255, g: 230, b: 0, a: 1 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'NORMAL'
         }
       },
       {
         fill: {
           value: { r: 0, g: 100, b: 255, a: 0.5 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'NORMAL'
         }
       }
     ],
@@ -730,7 +734,8 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 0, g: 100, b: 255, a: 0.5 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'normal'
         }
       }
     ],
@@ -749,7 +754,8 @@ export const extractedFigmaTokens = {
       {
         fill: {
           value: { r: 255, g: 230, b: 0, a: 1 },
-          type: 'color'
+          type: 'color',
+          blendMode: 'normal'
         }
       },
       {

diff --git a/tests/unit/data/transformedStandardTokens.data.ts b/tests/unit/data/transformedStandardTokens.data.ts
@@ -332,6 +332,7 @@ export const transformedStandardTokens = {
     description: 'a color token',
     type: 'color',
     value: '#ffe600ff',
+    blendMode: 'normal',
     extensions: {
       'org.lukasoppermann.figmaDesignTokens': {
         exportKey: 'color'
@@ -343,6 +344,7 @@ export const transformedStandardTokens = {
     description: 'a color token',
     type: 'color',
     value: '{{color}}',
+    blendMode: 'normal',
     extensions: {
       'org.lukasoppermann.figmaDesignTokens': {
         exportKey: 'color',
@@ -360,11 +362,13 @@ export const transformedStandardTokens = {
     description: 'a multi color token',
     0: {
       type: 'color',
-      value: '#ffe600ff'
+      value: '#ffe600ff',
+      blendMode: 'normal'
     },
     1: {
       type: 'color',
-      value: '#0064ff80'
+      value: '#0064ff80',
+      blendMode: 'normal'
     }
   },
   /**
@@ -394,7 +398,8 @@ export const transformedStandardTokens = {
     },
     1: {
       value: '#0064ff80',
-      type: 'color'
+      type: 'color',
+      blendMode: 'normal'
     }
   },
   colorAndGradient: {
@@ -407,7 +412,8 @@ export const transformedStandardTokens = {
     description: 'a color and gradient token',
     0: {
       value: '#ffe600ff',
-      type: 'color'
+      type: 'color',
+      blendMode: 'normal'
     },
     1: {
       type: 'custom-gradient',

diff --git a/tests/unit/extractColors.test.ts b/tests/unit/extractColors.test.ts
@@ -23,7 +23,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -47,7 +48,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -70,7 +72,8 @@ describe('extracting color fills', () => {
               b: 0,
               g: 0,
               r: 0
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -93,7 +96,8 @@ describe('extracting color fills', () => {
               b: 255,
               g: 255,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -116,7 +120,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }, {
           gradientType: {
@@ -234,7 +239,8 @@ describe('extracting color fills', () => {
                 b: 230,
                 g: 128,
                 r: 51
-              }
+              },
+              blendMode: 'normal'
             }
           }
         ]
@@ -262,7 +268,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       },
@@ -286,7 +293,8 @@ describe('extracting color fills', () => {
               b: 186,
               g: 26,
               r: 255
-            }
+            },
+            blendMode: 'normal'
           }
         }]
       }

diff --git a/types/propertyObject.d.ts b/types/propertyObject.d.ts
@@ -2,7 +2,7 @@ import { extractedGridValues } from './extractedData'
 import { StandardTokenExtensionsInterface } from './standardToken'
 import { tokenCategoryType } from './tokenCategory'
 import { tokenExportKeyType } from './tokenExportKey'
-import { ColorRgba, GradientType, GridAlignment, GridPattern, NumericUnitTypes, StrokeAlign, StrokeJoin, StrokeCap, TextCase, TextDecoration, UnitTypePixel, EffectType, PropertyType, UnitTypeSeconds } from './valueTypes'
+import { ColorRgba, BlendType, GradientType, GridAlignment, GridPattern, NumericUnitTypes, StrokeAlign, StrokeJoin, StrokeCap, TextCase, TextDecoration, UnitTypePixel, EffectType, PropertyType, UnitTypeSeconds } from './valueTypes'
 
 export type propertyObject = {
   name: string,
@@ -68,7 +68,8 @@ export type fontPropertyInterface = propertyObject & {
 export type fillValuesType = {
   fill: {
     value: ColorRgba,
-    type: PropertyType
+    type: PropertyType,
+    blendMode: BlendType
   }
 }
 

diff --git a/types/standardToken.d.ts b/types/standardToken.d.ts
@@ -1,3 +1,5 @@
+import type { BlendType } from './valueTypes'
+
 export type customTokenTypes = 'custom-spacing' |
 'custom-radius' |
 'custom-fontStyle' |
@@ -48,6 +50,7 @@ export type StandardTokenDataInterface = {
   description?: string,
   value: StandardTokenValueType | StandardCompositeTokenValueType,
   type: StandardTokenTypes,
+  blendMode?: BlendType,
   extensions?: StandardTokenExtensionsInterface
 }
 

diff --git a/types/valueTypes.d.ts b/types/valueTypes.d.ts
@@ -5,6 +5,8 @@ export type ColorRgba = {
   a: number
 }
 
+export type BlendType = 'normal' | 'darken' | 'multiply' | 'color_burn' | 'lighten' | 'screen' | 'color_dodge' | 'overlay' | 'soft_light' | 'hard_light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'
+
 export type GradientType = 'linear' | 'radial' | 'angular' | 'diamond'
 
 export type UnitTypeDegree = 'degree'
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -47,7 +48,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -70,7 +72,8 @@ describe('extracting color fills', () => { @@
                   b: 0,
                   g: 0,
                   r: 0
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -93,7 +96,8 @@ describe('extracting color fills', () => { @@
                   b: 255,
                   g: 255,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -116,7 +120,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }, {
               gradientType: {
@@ Expand Down Expand Up / @@ -234,7 +239,8 @@ describe('extracting color fills', () => { @@
                     b: 230,
                     g: 128,
                     r: 51
-                  }
+                  },
+                  blendMode: 'normal'
                 }
               }
             ]
@@ Expand Down Expand Up / @@ -262,7 +268,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           },
@@ Expand All / @@ -286,7 +293,8 @@ describe('extracting color fills', () => { @@
                   b: 186,
                   g: 26,
                   r: 255
-                }
+                },
+                blendMode: 'normal'
               }
             }]
           }
@@ Expand Down @@