refactor: colors generator

atls · Jun 13, 2024 · 209feef · 209feef
1 parent 61299b9
commit 209feef
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 85 deletions.
diff --git a/theme/theme-colors-generator/src/FigmaThemeColorsGenerator.ts b/theme/theme-colors-generator/src/FigmaThemeColorsGenerator.ts
@@ -24,7 +24,10 @@ export class FigmaThemeColorsGenerator extends FigmaThemeGenerator {
 
   getColor(obj) {
     if (obj.type === 'TEXT') return toColorString(obj.fills[0]?.color)
-    if (obj.type === 'INSTANCE') return toColorString(obj.children[0].fills[0].color)
+    if (obj.type === 'INSTANCE')
+      return obj.children[0].fills[0]?.color
+        ? toColorString(obj.children[0].fills[0].color)
+        : 'rgba(0, 0, 0, 0.00)'
 
     return ''
   }
@@ -38,96 +41,104 @@ export class FigmaThemeColorsGenerator extends FigmaThemeGenerator {
       const { name } = node
 
       if (name?.match(this.buttonFrameId)) {
-        const names = node.children.map(
-          (item) => item.children?.map((buttonName) => buttonName.name)
-        )
+        const names = node.children.map((buttonName) => buttonName.name)
 
         const buttons = node.children
-          .map(
-            (child) =>
-              child.children?.map((item) => {
-                const obj = {
-                  name: item.name,
-                  default: item.children[0],
-                  hover: item.children[1],
-                  pressed: item.children[2] !== undefined ? item.children[2] : item.children[0],
-                  disabled: item.children[3] !== undefined ? item.children[3] : item.children[0],
-                }
-
-                const fontColorDefault = this.getColor(obj.default.children[0])
-                const backgroundColorDefault = toColorString(obj.default.backgroundColor)
-                const borderColorDefault =
-                  obj.default.strokes[0]?.color !== undefined
-                    ? toColorOpacityString(
-                        obj.default.strokes[0].color,
-                        obj.default.strokes[0]?.opacity
-                      )
-                    : 'rgba(0, 0, 0, 0.00)'
-
-                const fontColorHover = this.getColor(obj.hover.children[0])
-                const backgroundColorHover = toColorString(obj.hover.backgroundColor)
-                const borderColorHover =
-                  obj.hover.strokes[0]?.color !== undefined
-                    ? toColorOpacityString(
-                        obj.hover.strokes[0].color,
-                        obj.hover.strokes[0]?.opacity
-                      )
-                    : 'rgba(0, 0, 0, 0.00)'
-
-                const fontColorPressed = this.getColor(obj.pressed.children[0])
-                const backgroundColorPressed = toColorString(obj.pressed.backgroundColor)
-                const borderColorPressed =
-                  obj.pressed.strokes[0]?.color !== undefined
-                    ? toColorOpacityString(
-                        obj.pressed.strokes[0].color,
-                        obj.pressed.strokes[0]?.opacity
-                      )
-                    : 'rgba(0, 0, 0, 0.00)'
-
-                const fontColorDisabled = this.getColor(obj.disabled.children[0])
-                const backgroundColorDisabled = toColorString(obj.disabled.backgroundColor)
-                const borderColorDisabled =
-                  obj.disabled.strokes[0]?.color !== undefined
-                    ? toColorOpacityString(
-                        obj.disabled.strokes[0].color,
-                        obj.disabled.strokes[0]?.opacity
-                      )
-                    : 'rgba(0, 0, 0, 0.00)'
-
-                return {
-                  default: {
-                    background: backgroundColorDefault,
-                    font: fontColorDefault,
-                    border: borderColorDefault,
-                  },
-                  hover: {
-                    background: backgroundColorHover,
-                    font: fontColorHover,
-                    border: borderColorHover,
-                  },
-                  pressed: {
-                    background: backgroundColorPressed,
-                    font: fontColorPressed,
-                    border: borderColorPressed,
-                  },
-                  disabled: {
-                    background: backgroundColorDisabled,
-                    font: fontColorDisabled,
-                    border: borderColorDisabled,
-                  },
-                }
-              })
-          )
+          .map((item) => {
+            const obj = {
+              name: item.name,
+              default: item.children[0],
+              hover: item.children[1],
+              pressed: item.children[2] !== undefined ? item.children[2] : item.children[0],
+              disabled: item.children[3] !== undefined ? item.children[3] : item.children[0],
+            }
+
+            const fontDefault = obj.default.children.find((child) => child.type === 'TEXT')
+            const fontColorDefault = fontDefault
+              ? this.getColor(fontDefault)
+              : 'rgba(0, 0, 0, 0.00)'
+
+            const backgroundColorDefault = toColorString(obj.default.backgroundColor)
+            const borderColorDefault =
+              obj.default.strokes[0]?.color !== undefined
+                ? toColorOpacityString(
+                    obj.default.strokes[0].color,
+                    obj.default.strokes[0]?.opacity
+                  )
+                : 'rgba(0, 0, 0, 0.00)'
+
+            const fontHover = obj.hover?.children?.find((child) => child.type === 'TEXT')
+            const fontColorHover = fontHover ? this.getColor(fontHover) : 'rgba(0, 0, 0, 0.00)'
+
+            const backgroundColorHover = obj.hover?.backgroundColor
+              ? toColorString(obj.hover.backgroundColor)
+              : 'rgba(0, 0, 0, 0.00)'
+            const borderColorHover =
+              obj.hover.strokes[0]?.color !== undefined
+                ? toColorOpacityString(obj.hover.strokes[0].color, obj.hover.strokes[0]?.opacity)
+                : 'rgba(0, 0, 0, 0.00)'
+
+            const fontPressed = obj.pressed?.children?.find((child) => child.type === 'TEXT')
+            const fontColorPressed = fontPressed
+              ? this.getColor(fontPressed)
+              : 'rgba(0, 0, 0, 0.00)'
+
+            const backgroundColorPressed = toColorString(obj.pressed.backgroundColor)
+            const borderColorPressed =
+              obj.pressed.strokes[0]?.color !== undefined
+                ? toColorOpacityString(
+                    obj.pressed.strokes[0].color,
+                    obj.pressed.strokes[0]?.opacity
+                  )
+                : 'rgba(0, 0, 0, 0.00)'
+
+            const fontDisabled = obj.disabled?.children?.find((child) => child.type === 'TEXT')
+            const fontColorDisabled = fontDisabled
+              ? this.getColor(fontDisabled)
+              : 'rgba(0, 0, 0, 0.00)'
+
+            const backgroundColorDisabled = toColorString(obj.disabled.backgroundColor)
+            const borderColorDisabled =
+              obj.disabled.strokes[0]?.color !== undefined
+                ? toColorOpacityString(
+                    obj.disabled.strokes[0].color,
+                    obj.disabled.strokes[0]?.opacity
+                  )
+                : 'rgba(0, 0, 0, 0.00)'
+
+            return {
+              default: {
+                background: backgroundColorDefault,
+                font: fontColorDefault,
+                border: borderColorDefault,
+              },
+              hover: {
+                background: backgroundColorHover,
+                font: fontColorHover,
+                border: borderColorHover,
+              },
+              pressed: {
+                background: backgroundColorPressed,
+                font: fontColorPressed,
+                border: borderColorPressed,
+              },
+              disabled: {
+                background: backgroundColorDisabled,
+                font: fontColorDisabled,
+                border: borderColorDisabled,
+              },
+            }
+          })
           .flat()
           .filter((item) => item !== undefined)
 
         buttonStates.push(...buttons)
 
-        names.map((buttonItems: string[]) => {
-          if (buttonItems !== undefined) {
-            const trimItem = buttonItems.map((buttonName) => this.formatString(buttonName))
+        names.map((buttonName: string) => {
+          if (buttonName !== undefined) {
+            const trimItem = this.formatString(buttonName)
 
-            buttonNames.push(...trimItem)
+            buttonNames.push(trimItem)
           }
 
           return []

diff --git a/theme/theme/src/FigmaTheme.ts b/theme/theme/src/FigmaTheme.ts
@@ -1,7 +1,7 @@
 import path                               from 'path'
 import prettier                           from 'prettier'
 import { FileResponse }                   from 'figma-js'
-import { Node }             from 'figma-js'
+import { Node }                           from 'figma-js'
 import { promises as fs }                 from 'fs'
 
 import { FigmaThemeColorsGenerator }      from '@atls/figma-theme-colors-generator'
@@ -11,7 +11,7 @@ import { FigmaThemeFontsGenerator }       from '@atls/figma-theme-fonts-generato
 import { FigmaThemeLineHeightsGenerator } from '@atls/figma-theme-line-heights-generator'
 import { FigmaThemeRadiiGenerator }       from '@atls/figma-theme-radii-generator'
 import { FigmaThemeShadowsGenerator }     from '@atls/figma-theme-shadows-generator'
-import { walk }                            from '@atls/figma-utils'
+import { walk }                           from '@atls/figma-utils'
 
 const generators = [
   FigmaThemeFontSizesGenerator,