Merge pull request #2308 from epam/feat/make_tokens_generator_more_ge…

…neric Feat/make tokens generator more generic
epam · Jun 3, 2024 · d69a588 · d69a588
2 parents db5854d + 53bcdcd
commit d69a588
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 43 deletions.
diff --git 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<string, TFigmaThemeName>;
     exposedTokens: IThemeVar[]
 }
diff --git 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, TFigmaThemeName | undefined> = {
-    [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
@@ -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/...-assets/theme/tokens/_theme_loveship.scss → ...s/theme/tokens/_theme_loveship_light.scss b/...-assets/theme/tokens/_theme_loveship.scss → ...s/theme/tokens/_theme_loveship_light.scss
diff --git 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
@@ -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, { themeFile: string, mixinsFile: string }> = {
-    [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
@@ -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
@@ -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<string, TFigmaThemeName[] | '*'>;
 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
@@ -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
@@ -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<string, TFigmaThemeName>;
     exposedTokens: IThemeVar[]
 }
diff --git 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 });
     });
 }

diff --git a/uui-build/ts/themeTokens.md 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
+```