feat: add manual custom font editing

src/components/Themes/Themes.scss

@@ -2,6 +2,8 @@
 @use '~@gravity-ui/uikit/styles/mixins' as ukitMixins;
 @use '../../variables.scss';
 
+@use './base-fonts.scss';
+
 $block: '.#{variables.$ns}themes';
 
 #{$block} {

src/components/Themes/Themes.tsx

@@ -8,7 +8,6 @@ import {block} from '../../utils';
 import {TagItem, Tags} from '../Tags/Tags';
 
 import './Themes.scss';
-import './base-fonts.scss';
 import {DEFAULT_THEME} from './lib/constants';
 import {BorderRadiusTab} from './ui/BorderRadiusTab/BorderRadiusTab';
 import {ColorsTab} from './ui/ColorsTab/ColorsTab';

src/components/Themes/lib/themeCreatorUtils.ts

@@ -24,8 +24,8 @@
     ThemeOptions,
     ThemeVariant,
 } from './types';
-import {RadiusPresetName, TypographyOptions} from './types';
-import {DefaultFontFamilyType, TextVariants} from './typography/constants';
+import {CustomFontSelectType, RadiusPresetName, TypographyOptions} from './types';
+import {DefaultFontFamilyType, TextVariants, defaultTypographyPreset} from './typography/constants';
 import {
     createFontFamilyVariable,
     createFontLinkImport,
@@ -403,7 +403,7 @@
                     color: palette[themeVariant][token],
                     title: paletteTokens[token].title,
                     privateColors: Object.entries(
                         paletteTokens[token].privateColors[themeVariant]!,
                     ).map(([privateColorCode, color]) => ({
                         token: createPrivateColorToken(token, privateColorCode),
                         title: createPrivateColorCssVariable(token, privateColorCode),
@@ -528,19 +528,20 @@
 
 export type UpdateFontFamilyParams = {
     fontType: DefaultFontFamilyType | string;
-    isCustom?: boolean;
     fontWebsite?: string;
-
+    isCustom?: boolean;
+    customType?: string;
     value?: {
         title: string;
         key: string;
         link: string;
+        alternatives: string[];
     };
 };
 
 export function updateFontFamilyInTheme(
     themeState: ThemeCreatorState,
-    {fontType, value, isCustom, fontWebsite}: UpdateFontFamilyParams,
+    {fontType, value, isCustom, fontWebsite, customType}: UpdateFontFamilyParams,
 ): ThemeCreatorState {
     const previousFontFamilySettings = themeState.typography.baseSetting.fontFamilies;
 
@@ -550,6 +551,7 @@
             ...previousFontFamilySettings[fontType],
             ...(value || {}),
             isCustom,
+            customType: customType || previousFontFamilySettings[fontType].customType,
             fontWebsite,
         },
     };
@@ -591,6 +593,17 @@
             ...themeState.typography,
             baseSetting: {
                 ...themeState.typography.baseSetting,
+                fontFamilies: {
+                    ...themeState.typography.baseSetting.fontFamilies,
+                    [newFontType]: {
+                        isCustom: true,
+                        customType: CustomFontSelectType.GoogleFonts,
+                        title: '',
+                        key: '',
+                        link: '',
+                        alternatives: [],
+                    },
+                },
                 customFontFamilyType: newCustomFontFamily,
             },
         },
@@ -744,43 +757,58 @@
         cssString += `${createFontFamilyVariable(
             customFontKey ? kebabCase(customFontKey) : key,
             value.title,
+            value.alternatives,
             forPreview,
         )}\n`;
     });
 
-    cssString += '\n';
-
     Object.entries(advanced).forEach(([key, data]) => {
-        const customFontTypeKey = getCustomFontTypeKey(
-            data.selectedFontFamilyType,
-            baseSetting.customFontFamilyType,
-        );
-
-        cssString += `${createTextFontFamilyVariable(
-            key as TextVariants,
-            customFontTypeKey ? kebabCase(customFontTypeKey) : data.selectedFontFamilyType,
-            forPreview,
-        )}\n`;
-        cssString += `${createTextFontWeightVariable(
-            key as TextVariants,
-            data.fontWeight,
-            forPreview,
-        )}\n`;
+        const defaultAdvancedSetting = defaultTypographyPreset.advanced[key as TextVariants];
 
-        cssString += '\n';
+        if (defaultAdvancedSetting.selectedFontFamilyType !== data.selectedFontFamilyType) {
+            const customFontTypeKey = getCustomFontTypeKey(
+                data.selectedFontFamilyType,
+                baseSetting.customFontFamilyType,
+            );
 
-        Object.entries(data.sizes).forEach(([sizeKey, sizeData]) => {
-            cssString += `${createTextFontSizeVariable(
-                sizeKey as TextProps['variant'],
-                sizeData.fontSize,
+            cssString += `${createTextFontFamilyVariable(
+                key as TextVariants,
+                customFontTypeKey ? kebabCase(customFontTypeKey) : data.selectedFontFamilyType,
                 forPreview,
             )}\n`;
-            cssString += `${createTextLineHeightVariable(
-                sizeKey as TextProps['variant'],
-                sizeData.lineHeight,
+        }
+        if (defaultAdvancedSetting.fontWeight !== data.fontWeight) {
+            cssString += `${createTextFontWeightVariable(
+                key as TextVariants,
+                data.fontWeight,
                 forPreview,
             )}\n`;
             cssString += '\n';
+        }
+
+        Object.entries(data.sizes).forEach(([sizeKey, sizeData]) => {
+            if (
+                defaultAdvancedSetting.sizes[sizeKey as Exclude<TextProps['variant'], undefined>]
+                    ?.fontSize !== sizeData.fontSize
+            ) {
+                cssString += `${createTextFontSizeVariable(
+                    sizeKey as TextProps['variant'],
+                    sizeData.fontSize,
+                    forPreview,
+                )}\n`;
+            }
+
+            if (
+                defaultAdvancedSetting.sizes[sizeKey as Exclude<TextProps['variant'], undefined>]
+                    ?.lineHeight !== sizeData.lineHeight
+            ) {
+                cssString += `${createTextLineHeightVariable(
+                    sizeKey as TextProps['variant'],
+                    sizeData.lineHeight,
+                    forPreview,
+                )}\n`;
+                cssString += '\n';
+            }
         });
     });
 

src/components/Themes/lib/types.ts

@@ -42,6 +42,11 @@ export type BordersOption = {
     values: RadiusValue;
 };
 
+export enum CustomFontSelectType {
+    GoogleFonts = 'google-fonts',
+    Manual = 'manual',
+}
+
 export type TypographyOptions = {
     baseSetting: {
         defaultFontFamilyType: {
@@ -58,7 +63,9 @@ export type TypographyOptions = {
                 title: string;
                 key: string;
                 link: string;
+                alternatives: string[];
                 isCustom?: boolean;
+                customType?: string;
                 fontWebsite?: string;
             }
         >;

src/components/Themes/lib/typography/constants.ts

@@ -1,4 +1,4 @@
-import {TypographyOptions} from '../types';
+import {CustomFontSelectType, TypographyOptions} from '../types';
 
 export const THEME_FONT_FAMILY_PREFIX = '--g-font-family';
 export const THEME_TEXT_PREFIX = '--g-text';
@@ -49,11 +49,15 @@ export const defaultTypographyPreset: TypographyOptions = {
                 title: 'Inter',
                 key: 'inter',
                 link: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap',
+                customType: CustomFontSelectType.GoogleFonts,
+                alternatives: DEFAULT_FONTS[DefaultFontFamilyType.Sans],
             },
             [DefaultFontFamilyType.Monospace]: {
                 title: 'Roboto Mono',
                 key: 'roboto_mono',
                 link: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap',
+                customType: CustomFontSelectType.GoogleFonts,
+                alternatives: DEFAULT_FONTS[DefaultFontFamilyType.Monospace],
             },
         },
     },
@@ -63,6 +67,11 @@ export const defaultTypographyPreset: TypographyOptions = {
             fontWeight: 400,
             selectedFontFamilyType: DefaultFontFamilyType.Sans,
             sizes: {
+                'body-short': {
+                    title: 'Body 1 Short',
+                    fontSize: 13,
+                    lineHeight: 16,
+                },
                 'body-1': {
                     title: 'Body 1',
                     fontSize: 13,
@@ -78,11 +87,6 @@ export const defaultTypographyPreset: TypographyOptions = {
                     fontSize: 17,
                     lineHeight: 24,
                 },
-                'body-short': {
-                    title: 'Body 1 Short',
-                    fontSize: 13,
-                    lineHeight: 16,
-                },
             },
         },
         [TextVariants.Caption]: {
@@ -178,26 +182,26 @@ export const defaultTypographyPreset: TypographyOptions = {
                     fontSize: 12,
                     lineHeight: 18,
                 },
-                'code-2': {
-                    title: 'Code 2',
-                    fontSize: 14,
-                    lineHeight: 20,
-                },
-                'code-3': {
-                    title: 'Code 3',
-                    fontSize: 16,
-                    lineHeight: 24,
-                },
                 'code-inline-1': {
                     title: 'Code Inline 1',
                     fontSize: 12,
                     lineHeight: 14,
                 },
+                'code-2': {
+                    title: 'Code 2',
+                    fontSize: 14,
+                    lineHeight: 20,
+                },
                 'code-inline-2': {
                     title: 'Code Inline 2',
                     fontSize: 14,
                     lineHeight: 16,
                 },
+                'code-3': {
+                    title: 'Code 3',
+                    fontSize: 16,
+                    lineHeight: 24,
+                },
                 'code-inline-3': {
                     title: 'Code Inline 3',
                     fontSize: 16,

src/components/Themes/lib/typography/utils.ts

@@ -3,7 +3,6 @@ import {TextProps} from '@gravity-ui/uikit';
 import {TypographyOptions} from '../types';
 
 import {
-    DEFAULT_FONTS,
     GOOGLE_FONTS_DOWNLOAD_HOST,
     THEME_FONT_FAMILY_PREFIX,
     THEME_TEXT_PREFIX,
@@ -17,12 +16,11 @@ export const createFontLinkImport = (fontLink: string) => {
 export const createFontFamilyVariable = (
     fontFamilyType: string,
     value: string,
+    alternatives: string[],
     forPreview: boolean,
 ) => {
-    const additionalFonts = DEFAULT_FONTS[fontFamilyType];
-
     return `${THEME_FONT_FAMILY_PREFIX}-${fontFamilyType}: '${value}'${
-        additionalFonts ? `, ${additionalFonts}` : ''
+        alternatives.length ? `, ${alternatives.join(', ')}` : ''
     }${forPreview ? '!important' : ''};`;
 };
 
@@ -66,7 +64,11 @@ export const createTextLineHeightVariable = (
     };`;
 };
 
-export const generateGoogleFontDownloadLink = (fontName: string) => {
+export const generateGoogleFontDownloadLink = (fontName?: string) => {
+    if (!fontName) {
+        return '';
+    }
+
     return `${GOOGLE_FONTS_DOWNLOAD_HOST}?family=${fontName}&display=swap`;
 };