feat(core-themes): Add methods for fallback tokens generate

salute-developers · Aug 16, 2024 · 550fe68 · 550fe68
1 parent c7ed8f4
commit 550fe68
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 3 deletions.
diff --git a/packages/themes/core-themes/src/generate.ts b/packages/themes/core-themes/src/generate.ts
@@ -16,7 +16,7 @@ import {
     generateThemes,
     generateTokens,
 } from './generators';
-import { getMetaGrouped, readTheme } from './utils';
+import { getMetaGrouped, readTheme, fallbackCreateColorTokensWrapper } from './utils';
 
 export const generate = async (themes: ThemeRequest[]) => {
     const themeDir = 'src';
@@ -29,8 +29,14 @@ export const generate = async (themes: ThemeRequest[]) => {
         const { meta, variations } = themeSource;
         const metaGrouped = getMetaGrouped(themeSource.meta);
 
-        const colorCSSVariables = createColorTokens(variations.color, metaGrouped.color);
-        const colorJSVariables = createColorTokens(variations.color, metaGrouped.color, isJS);
+        // TODO: Использовать createColorTokens: https://github.com/salute-developers/plasma/issues/1363
+        const colorCSSVariables = fallbackCreateColorTokensWrapper(theme.name, variations.color, metaGrouped.color);
+        const colorJSVariables = fallbackCreateColorTokensWrapper(
+            theme.name,
+            variations.color,
+            metaGrouped.color,
+            isJS,
+        );
 
         const gradientCSSVariables = createGradientTokens(variations.gradient, metaGrouped.gradient);
         const gradientJSVariables = createGradientTokens(variations.gradient, metaGrouped.gradient, isJS);

diff --git a/packages/themes/core-themes/src/utils/fallbackTokens.ts b/packages/themes/core-themes/src/utils/fallbackTokens.ts
@@ -0,0 +1,74 @@
+// TODO: Убрать использование файла: https://github.com/salute-developers/plasma/issues/1363
+
+import { createColorTokens } from '../creators';
+import { TokenType } from '../types';
+
+import { camelToKebab } from './other';
+
+export const deprecatedColorTokenOnActualToken: Record<string, string> = {
+    whitePrimary: 'onDarkTextPrimary',
+    whiteSecondary: 'onDarkTextSecondary',
+    whiteTertiary: 'onDarkTextTertiary',
+    blackPrimary: 'onLightTextPrimary',
+    blackSecondary: 'onLightTextSecondary',
+    blackTertiary: 'onLightTextTertiary',
+    buttonBlack: 'onLightSurfaceSolidDefault',
+    buttonBlackSecondary: 'onLightSurfaceTransparentSecondary',
+    buttonWhite: 'onDarkSurfaceSolidDefault',
+    buttonWhiteSecondary: 'onDarkSurfaceTransparentSecondary',
+    text: 'textPrimary',
+    primary: 'textPrimary',
+    secondary: 'textSecondary',
+    tertiary: 'textTertiary',
+    paragraph: 'textParagraph',
+    background: 'backgroundPrimary',
+    accent: 'textAccent',
+    success: 'textPositive',
+    warning: 'textWarning',
+    critical: 'textNegative',
+    overlay: 'overlaySoft',
+    surfaceLiquid01: 'surfaceTransparentPrimary',
+    surfaceLiquid02: 'surfaceTransparentSecondary',
+    surfaceLiquid03: 'surfaceTransparentTertiary',
+    surfaceSolid01: 'surfaceSolidPrimary',
+    surfaceSolid02: 'surfaceSolidSecondary',
+    surfaceSolid03: 'surfaceSolidTertiary',
+    surfaceCard: 'surfaceTransparentCard',
+    buttonSecondary: 'surfaceTransparentSecondary',
+    buttonAccent: 'textAccent',
+    buttonSuccess: 'surfacePositive',
+    buttonWarning: 'surfaceWarning',
+    buttonCritical: 'surfaceNegative',
+};
+
+export const getFallbackTokens = (isJS?: boolean) => {
+    const legacyPrefix = 'plasmaColors';
+
+    return Object.entries(deprecatedColorTokenOnActualToken)
+        .map(([oldName, actualName]) => {
+            const oldVarName = `--${camelToKebab(legacyPrefix)}-${camelToKebab(oldName)}`;
+            const actualVarName = `--${camelToKebab(actualName)}`;
+
+            if (isJS) {
+                return `/** @deprecated instead use ${actualName} */\nexport const ${oldName} = 'var(${oldVarName}, var(${actualVarName}))';\n`;
+            }
+
+            return `  ${oldVarName}: var(${actualVarName});`;
+        })
+        .join('\n');
+};
+
+export const fallbackCreateColorTokensWrapper = (name: string, color: any, tokens?: Array<TokenType>, isJS = false) => {
+    const colorVariables = createColorTokens(color, tokens, isJS);
+
+    if (name === 'plasma_web' || name === 'plasma_b2c') {
+        const fallbackTokens = getFallbackTokens(isJS);
+
+        return {
+            dark: `${colorVariables.dark}\n${fallbackTokens}`,
+            light: `${colorVariables.light}\n${fallbackTokens}`,
+        };
+    }
+
+    return colorVariables;
+};
diff --git a/packages/themes/core-themes/src/utils/index.ts b/packages/themes/core-themes/src/utils/index.ts
@@ -1,3 +1,4 @@
 export * from './meta';
 export * from './theme';
 export * from './other';
+export * from './fallbackTokens';
diff --git a/packages/themes/core-themes/src/utils/other.ts b/packages/themes/core-themes/src/utils/other.ts
@@ -1,2 +1,4 @@
 export const kebabToCamel = (str: string) =>
     str.replace(/-([a-z])/g, (_, group) => group.toUpperCase()).replace(/^./, (char) => char.toLowerCase());
+
+export const camelToKebab = (str: string) => str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);