From 7ce2a39c0b5b08997f736e296bcb118ff1a4d387 Mon Sep 17 00:00:00 2001 From: Siarhei Yelin Date: Mon, 3 Jun 2024 15:06:11 +0300 Subject: [PATCH 1/2] Make theme tokens generator more generic --- .../tokens/palette/types/sharedTypes.ts | 8 ++----- .../tokens/palette/utils/themeVarUtils.ts | 12 ++++++---- epam-assets/theme/theme_loveship.scss | 2 +- ...veship.scss => _theme_loveship_light.scss} | 0 public/docs/figmaTokensGen/ThemeTokens.json | 6 +++++ .../ts/tasks/themeMixinsGen/constants.ts | 23 ++++--------------- uui-build/ts/tasks/themeMixinsGen/main.ts | 6 ++--- uui-build/ts/tasks/themeTokensGen/config.ts | 3 +-- uui-build/ts/tasks/themeTokensGen/main.ts | 5 +++- .../tasks/themeTokensGen/types/sharedTypes.ts | 8 ++----- .../themeTokensGen/utils/figmaVarUtils.ts | 2 +- 11 files changed, 32 insertions(+), 43 deletions(-) rename epam-assets/theme/tokens/{_theme_loveship.scss => _theme_loveship_light.scss} (100%) diff --git a/app/src/sandbox/tokens/palette/types/sharedTypes.ts b/app/src/sandbox/tokens/palette/types/sharedTypes.ts index b3680d76dd..7376a03683 100644 --- a/app/src/sandbox/tokens/palette/types/sharedTypes.ts +++ b/app/src/sandbox/tokens/palette/types/sharedTypes.ts @@ -6,12 +6,7 @@ */ // -export enum TFigmaThemeName { - LOVESHIP_LIGHT = 'Loveship-Light', - LOVESHIP_DARK = 'Loveship-Dark', - PROMO = 'Promo', - ELECTRIC = 'Electric' -} +export type TFigmaThemeName = string; export type TVariableValue = unknown; export type TUuiCssVarName = `--${string}`; @@ -52,5 +47,6 @@ export interface IThemeVar { }, } export interface IUuiTokensCollection { + modes: Record; exposedTokens: IThemeVar[] } diff --git a/app/src/sandbox/tokens/palette/utils/themeVarUtils.ts b/app/src/sandbox/tokens/palette/utils/themeVarUtils.ts index 5368d90cca..7cecbafd39 100644 --- a/app/src/sandbox/tokens/palette/utils/themeVarUtils.ts +++ b/app/src/sandbox/tokens/palette/utils/themeVarUtils.ts @@ -3,11 +3,15 @@ import { TTheme } from '../../../../common/docs/docsConstants'; import { TFigmaThemeName, TVarType } from '../types/sharedTypes'; import { normalizeColor } from './colorUtils'; +/** + * The Figma theme names (i.e. the values) are hardcoded here. + * Make sure they are updated when modes in "public/docs/figmaTokensGen/Theme.json" are changed. + */ const THEME_MAP: Record = { - [TTheme.electric]: TFigmaThemeName.ELECTRIC, - [TTheme.promo]: TFigmaThemeName.PROMO, - [TTheme.loveship]: TFigmaThemeName.LOVESHIP_LIGHT, - [TTheme.loveship_dark]: TFigmaThemeName.LOVESHIP_DARK, + [TTheme.electric]: 'Electric', + [TTheme.promo]: 'Promo', + [TTheme.loveship]: 'Loveship-Light', + [TTheme.loveship_dark]: 'Loveship-Dark', [TTheme.vanilla_thunder]: undefined, }; diff --git a/epam-assets/theme/theme_loveship.scss b/epam-assets/theme/theme_loveship.scss index 756c04a489..f81fe132c2 100644 --- a/epam-assets/theme/theme_loveship.scss +++ b/epam-assets/theme/theme_loveship.scss @@ -1,5 +1,5 @@ @use '../scss/loveship/font-faces'; -@use './tokens/_theme_loveship.scss' as tokens; +@use './tokens/_theme_loveship_light.scss' as tokens; /* Name convention */ /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */ diff --git a/epam-assets/theme/tokens/_theme_loveship.scss b/epam-assets/theme/tokens/_theme_loveship_light.scss similarity index 100% rename from epam-assets/theme/tokens/_theme_loveship.scss rename to epam-assets/theme/tokens/_theme_loveship_light.scss diff --git a/public/docs/figmaTokensGen/ThemeTokens.json b/public/docs/figmaTokensGen/ThemeTokens.json index 6415cb491e..60470e8af4 100644 --- a/public/docs/figmaTokensGen/ThemeTokens.json +++ b/public/docs/figmaTokensGen/ThemeTokens.json @@ -1,4 +1,10 @@ { + "modes": { + "25178:0": "Loveship-Light", + "25178:1": "Loveship-Dark", + "25178:2": "Promo", + "26302:0": "Electric" + }, "exposedTokens": [ { "id": "core/border-radius", diff --git a/uui-build/ts/tasks/themeMixinsGen/constants.ts b/uui-build/ts/tasks/themeMixinsGen/constants.ts index 3d89b8ee7c..5ca591d576 100644 --- a/uui-build/ts/tasks/themeMixinsGen/constants.ts +++ b/uui-build/ts/tasks/themeMixinsGen/constants.ts @@ -1,4 +1,4 @@ -import { IThemeVar, TFigmaThemeName } from '../themeTokensGen/types/sharedTypes'; +import { IThemeVar } from '../themeTokensGen/types/sharedTypes'; import { PATH } from '../themeTokensGen/constants'; export type TVar = { token: IThemeVar, name: string, value: string }; @@ -12,27 +12,12 @@ export type TMainGroupConfig = { export const TOKENS_MIXIN_NAME = 'theme-tokens'; -const THEME_DIR = './epam-assets/theme'; const THEME_TOKENS_DIR = './epam-assets/theme/tokens'; export const tokensFile = PATH.FIGMA_VARS_COLLECTION_OUT_TOKENS; -export const coreThemeMixinsConfig: Record = { - [TFigmaThemeName.ELECTRIC]: { - themeFile: `${THEME_DIR}/theme_electric.scss`, - mixinsFile: `${THEME_TOKENS_DIR}/_theme_electric.scss`, - }, - [TFigmaThemeName.PROMO]: { - themeFile: `${THEME_DIR}/theme_promo.scss`, - mixinsFile: `${THEME_TOKENS_DIR}/_theme_promo.scss`, - }, - [TFigmaThemeName.LOVESHIP_LIGHT]: { - themeFile: `${THEME_DIR}/theme_loveship.scss`, - mixinsFile: `${THEME_TOKENS_DIR}/_theme_loveship.scss`, - }, - [TFigmaThemeName.LOVESHIP_DARK]: { - themeFile: `${THEME_DIR}/theme_loveship_dark.scss`, - mixinsFile: `${THEME_TOKENS_DIR}/_theme_loveship_dark.scss`, - }, +export const getThemeMixinsFilePath = (themeName: string) => { + const themeNameNorm = themeName.toLowerCase().replaceAll('-', '_'); + return `${THEME_TOKENS_DIR}/_theme_${themeNameNorm}.scss`; }; const getInnerGroupIdLevel2 = (v: TVar) => { diff --git a/uui-build/ts/tasks/themeMixinsGen/main.ts b/uui-build/ts/tasks/themeMixinsGen/main.ts index 6b96b9e0b3..32830b96d3 100644 --- a/uui-build/ts/tasks/themeMixinsGen/main.ts +++ b/uui-build/ts/tasks/themeMixinsGen/main.ts @@ -1,7 +1,7 @@ import path from 'path'; import { logger } from '../../utils/jsBridge'; import { IThemeVar, IUuiTokensCollection, TCssVarSupport, TFigmaThemeName } from '../themeTokensGen/types/sharedTypes'; -import { coreThemeMixinsConfig } from './constants'; +import { getThemeMixinsFilePath } from './constants'; import { ITaskConfig } from '../../utils/taskUtils'; import { uuiRoot } from '../../constants'; import { createFileSync } from '../../utils/fileUtils'; @@ -12,7 +12,7 @@ export const taskConfig: ITaskConfig = { main }; async function main() { const tokens = readFigmaTokens(); - Object.values(TFigmaThemeName).forEach((figmaTheme) => { + Object.values(tokens.modes).forEach((figmaTheme) => { genForFigmaTheme({ tokens, figmaTheme, @@ -54,7 +54,7 @@ function genForFigmaTheme(params: { figmaTheme: TFigmaThemeName, tokens: IUuiTok }); const content = formatVarsAsMixin({ cssVars, scssVars }); - const mixinsPath = coreThemeMixinsConfig[figmaTheme].mixinsFile; + const mixinsPath = getThemeMixinsFilePath(figmaTheme); const mixinsPathRes = path.resolve(uuiRoot, mixinsPath); createFileSync(mixinsPathRes, content); logger.success(`File created: ${mixinsPathRes}`); diff --git a/uui-build/ts/tasks/themeTokensGen/config.ts b/uui-build/ts/tasks/themeTokensGen/config.ts index f3440b852f..9d711a2ad1 100644 --- a/uui-build/ts/tasks/themeTokensGen/config.ts +++ b/uui-build/ts/tasks/themeTokensGen/config.ts @@ -1,10 +1,9 @@ -import { TCssVarSupport, TFigmaThemeName, TUuiCssVarName } from './types/sharedTypes'; +import { TCssVarSupport, TUuiCssVarName } from './types/sharedTypes'; import { corePathToCssVar, palettePathToCssVar } from './utils/cssVarUtils'; interface IFigmaVarsConfig { [pathPrefix: string]: IFigmaVarConfigValue } -export type TList = Record; export interface IFigmaVarConfigValue { enabled: boolean; pathToCssVar: (path: string) => TUuiCssVarName; diff --git a/uui-build/ts/tasks/themeTokensGen/main.ts b/uui-build/ts/tasks/themeTokensGen/main.ts index 21d6f0721f..2005e952b8 100644 --- a/uui-build/ts/tasks/themeTokensGen/main.ts +++ b/uui-build/ts/tasks/themeTokensGen/main.ts @@ -51,7 +51,10 @@ function generateTokens() { FileUtils.writeResults({ newFigmaVarCollection: { ...source, variables }, - uuiTokensCollection: { exposedTokens }, + uuiTokensCollection: { + modes: source.modes, + exposedTokens, + }, ctx, }); } diff --git a/uui-build/ts/tasks/themeTokensGen/types/sharedTypes.ts b/uui-build/ts/tasks/themeTokensGen/types/sharedTypes.ts index b3680d76dd..7376a03683 100644 --- a/uui-build/ts/tasks/themeTokensGen/types/sharedTypes.ts +++ b/uui-build/ts/tasks/themeTokensGen/types/sharedTypes.ts @@ -6,12 +6,7 @@ */ // -export enum TFigmaThemeName { - LOVESHIP_LIGHT = 'Loveship-Light', - LOVESHIP_DARK = 'Loveship-Dark', - PROMO = 'Promo', - ELECTRIC = 'Electric' -} +export type TFigmaThemeName = string; export type TVariableValue = unknown; export type TUuiCssVarName = `--${string}`; @@ -52,5 +47,6 @@ export interface IThemeVar { }, } export interface IUuiTokensCollection { + modes: Record; exposedTokens: IThemeVar[] } diff --git a/uui-build/ts/tasks/themeTokensGen/utils/figmaVarUtils.ts b/uui-build/ts/tasks/themeTokensGen/utils/figmaVarUtils.ts index adcac53b68..9fff5652ad 100644 --- a/uui-build/ts/tasks/themeTokensGen/utils/figmaVarUtils.ts +++ b/uui-build/ts/tasks/themeTokensGen/utils/figmaVarUtils.ts @@ -121,7 +121,7 @@ function isTokenExcludedByAliasRef(params: { rawTokenNorm: IFigmaVarRawNorm, the } return true; } - return Object.values(TFigmaThemeName).every((themeItem) => { + return Object.values(modes).every((themeItem) => { return isTokenExcludedByAliasRef({ rawTokenNorm, theme: themeItem, modes }); }); } From 53bcdcd0d12d6534502a50394b8e438223bdd31d Mon Sep 17 00:00:00 2001 From: Siarhei Yelin Date: Mon, 3 Jun 2024 15:24:44 +0300 Subject: [PATCH 2/2] Add MD file with tokens change process description --- uui-build/ts/themeTokens.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 uui-build/ts/themeTokens.md diff --git a/uui-build/ts/themeTokens.md b/uui-build/ts/themeTokens.md new file mode 100644 index 0000000000..b7b28151a4 --- /dev/null +++ b/uui-build/ts/themeTokens.md @@ -0,0 +1,14 @@ +## The process of updating theme tokens + +1. Reach out to the UX design team in order to obtain the most recent `Theme.json` file exported from Figma +2. Replace existing `public/docs/figmaTokensGen/Theme.json` with the new one +3. Run yarn scripts in next order: +```shell +# It takes "public/docs/figmaTokensGen/Theme.json" as an input and generates "public/docs/figmaTokensGen/ThemeOutput.json" +yarn generate-theme-tokens + +# It takes "public/docs/figmaTokensGen/ThemeOutput.json" as an input and generates the following: +# 1. The "public/docs/figmaTokensGen/ThemeTokens.json" +# 2. Theme-specific mixins (*.scss) with token variables under "epam-assets/theme/tokens/" folder +yarn generate-theme-mixins +```