Merge pull request #1909 from epam/feat/theme_tokens_mixins_draft

Feat/theme tokens mixins draft

app/src/sandbox/tokens/palette/components/tokenInfo/aliasChain.tsx

@@ -20,8 +20,9 @@ export function AliasChain(props: { resolved: TResolvedValueNorm }) {
         );
     };
 
-    const arrStr = resolved.alias.map(({ id, cssVar, supported }) => {
-        return `${id}${supported ? ` (css: ${cssVar})` : ''}`;
+    const arrStr = resolved.alias.map((item) => {
+        const { id, supported } = item;
+        return `${id}${supported ? ` (css: ${item.cssVar})` : ''}`;
     });
     arrStr.push(String(resolved.value));
     arrStr.reverse();

app/src/sandbox/tokens/palette/hooks/useThemeTokens.tsx

@@ -58,9 +58,15 @@ function loadedTokensConverter(
 ) {
     const { res, expectedValueType, uuiTheme, compStyle } = params;
     const figmaTheme = getFigmaTheme(uuiTheme);
-    return res.map((token) => {
+    return res.reduce<IThemeVarUI[]>((acc, token) => {
         const actual = token.cssVar === undefined ? '' : compStyle.getPropertyValue(token.cssVar);
         const { valueByTheme, ...rest } = token;
+
+        if (figmaTheme && !valueByTheme[figmaTheme]) {
+            // Figma theme exists but token is not defined in this theme. Need to SKIP it.
+            return acc;
+        }
+
         const valueKey = expectedValueType === TExpectedValueType.direct ? 'valueDirect' : 'valueChain';
         const expected = figmaTheme ? valueByTheme[figmaTheme]?.[valueKey] : undefined;
         const tokenUI: IThemeVarUI = {
@@ -73,6 +79,8 @@ function loadedTokensConverter(
         };
 
         const errors = validateActualTokenValue(tokenUI);
-        return { ...tokenUI, value: { ...tokenUI.value, errors } };
-    });
+        acc.push({ ...tokenUI, value: { ...tokenUI.value, errors } });
+
+        return acc;
+    }, []);
 }

app/src/sandbox/tokens/palette/types/sharedTypes.ts

@@ -1,6 +1,6 @@
 /**
  * NOTE: Types in this file are shared with front-end and must be copied as-is.
- * From: uui-build/ts/figmaTokensGen/types/sharedTypes.ts --> To: app/src/sandbox/tokens/palette/types/sharedTypes.ts
+ * From: uui-build/ts/tasks/themeTokensGen/types/sharedTypes.ts --> To: app/src/sandbox/tokens/palette/types/sharedTypes.ts
  *
  * Please make sure that this file has no dependencies to any other files.
  */
@@ -14,17 +14,17 @@ export enum TFigmaThemeName {
 }
 export type TFloatValue = number;
 export type THexaValue = `#${string}`;
-export type TUuiCssVarName = `--uui-${string}`;
+export type TUuiCssVarName = `--${string}`;
 export enum TVarType {
     COLOR = 'COLOR',
     FLOAT = 'FLOAT'
 }
 
 export type TCssVarRef = {
     id: IThemeVar['id'],
-    cssVar: IThemeVar['cssVar'],
-    supported: boolean,
-};
+} & (
+    { cssVar: IThemeVar['cssVar'], supported: true } | { supported: false }
+);
 export type TResolvedValueNorm = {
     value: THexaValue | TFloatValue
     alias: TCssVarRef[],
@@ -40,8 +40,7 @@ export interface IThemeVar {
     type: TVarType,
     description: string,
     useCases: string,
-    /** cssVarName has value only if it's "resolved" */
-    cssVar: TUuiCssVarName | undefined,
+    cssVar: TUuiCssVarName,
     /** resolvedValue in this map is taken from Figma. It can be used to compare with actual rendered value in browser */
     valueByTheme: {
         [themeName in TFigmaThemeName]?: TValueByThemeValue

package.json

@@ -13,7 +13,8 @@
     "eslint": "cross-env LINT_SCRIPT=true yarn --cwd uui-build lint --eslint",
     "eslint-fix": "yarn eslint --fix",
     "generate-components-api": "yarn --cwd uui-build generate-components-api",
-    "generate-tokens": "yarn --cwd uui-build generate-tokens",
+    "generate-theme-tokens": "yarn --cwd uui-build generate-theme-tokens",
+    "generate-theme-mixins": "yarn --cwd uui-build generate-theme-mixins",
     "lint-staged": "cross-env LINT_STAGED=true npx lint-staged",
     "next:dev": "cd ./next-app && yarn && node ../uui-build/scripts/runNextApp.js && yarn dev",
     "postinstall": "cd server && yarn",