From 209feef8d38eb83606a5d0d0931a7f3668aef255 Mon Sep 17 00:00:00 2001 From: Viktoria Dragun Date: Thu, 13 Jun 2024 15:36:25 +0300 Subject: [PATCH] refactor: colors generator --- .../src/FigmaThemeColorsGenerator.ts | 177 ++++++++++-------- theme/theme/src/FigmaTheme.ts | 4 +- 2 files changed, 96 insertions(+), 85 deletions(-) diff --git a/theme/theme-colors-generator/src/FigmaThemeColorsGenerator.ts b/theme/theme-colors-generator/src/FigmaThemeColorsGenerator.ts index b9079fc..1361e98 100644 --- 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 index a1ca2a1..dd9bebe 100644 --- 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,