Feat/themes typography section

package.json

@@ -40,7 +40,8 @@
     "remark-link-rewrite": "^1.0.7",
     "swiper": "^10.2.0",
     "typescript": "^5.1.6",
-    "url": "^0.11.0"
+    "url": "^0.11.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@gravity-ui/eslint-config": "^2.0.0",
@@ -57,6 +58,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/react-timeago": "^4.1.3",
+    "@types/uuid": "^10.0.0",
     "dotenv": "^16.0.3",
     "eslint": "^8.27.0",
     "eslint-plugin-testing-library": "^5.9.1",

src/components/SelectableCard/SelectableCard.scss

@@ -5,7 +5,7 @@ $block: '.#{variables.$ns}selectable-card';
 #{$block} {
     position: relative;
     display: flex;
-    padding: 26px;
+    padding: 22px 16px;
     height: 80px;
     align-items: center;
     justify-content: center;

src/components/Themes/Themes.tsx

@@ -8,12 +8,14 @@ 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';
 import {PreviewTab} from './ui/PreviewTab/PreviewTab';
 import {ThemeCreatorContextProvider} from './ui/ThemeCreatorContextProvider';
 import {ThemeExportDialog} from './ui/ThemeExportDialog/ThemeExportDialog';
+import {TypographyTab} from './ui/TypographyTab/TypographyTab';
 
 const b = block('themes');
 
@@ -26,7 +28,7 @@ enum ThemeTab {
 
 const tabToComponent: Record<ThemeTab, React.ComponentType | undefined> = {
     [ThemeTab.Colors]: ColorsTab,
-    [ThemeTab.Typography]: () => <div>TODO Typography</div>,
+    [ThemeTab.Typography]: TypographyTab,
     [ThemeTab.BorderRadius]: BorderRadiusTab,
     [ThemeTab.Preview]: PreviewTab,
 };

src/components/Themes/base-fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

src/components/Themes/lib/constants.ts

@@ -1,4 +1,5 @@
 import {RadiusPresetName, RadiusValue, type ThemeOptions} from './types';
+import {defaultTypographyPreset} from './typography/constants';
 
 export const THEME_COLOR_VARIABLE_PREFIX = '--g-color';
 
@@ -98,5 +99,5 @@ export const DEFAULT_THEME: ThemeOptions = {
         preset: RadiusPresetName.Regular,
         values: RADIUS_PRESETS[RadiusPresetName.Regular],
     },
-    typography: {},
+    typography: defaultTypographyPreset,
 };

src/components/Themes/lib/themeCreatorContext.ts

@@ -5,11 +5,15 @@ import {DEFAULT_THEME} from './constants';
 import {initThemeCreator} from './themeCreatorUtils';
 import type {
     AddColorToThemeParams,
+    AddFontFamilyTypeParams,
     ChangeRadiusPresetInThemeParams,
     ChangeUtilityColorInThemeParams,
     RenameColorInThemeParams,
+    UpdateAdvancedTypographySettingsParams,
     UpdateColorInThemeParams,
     UpdateCustomRadiusPresetInThemeParams,
+    UpdateFontFamilyParams,
+    UpdateFontFamilyTypeTitleParams,
 } from './themeCreatorUtils';
 import type {ThemeCreatorState} from './types';
 
@@ -25,6 +29,11 @@ export interface ThemeCreatorMethodsContextType {
     changeUtilityColor: (params: ChangeUtilityColorInThemeParams) => void;
     changeRadiusPreset: (params: ChangeRadiusPresetInThemeParams) => void;
     updateCustomRadiusPreset: (params: UpdateCustomRadiusPresetInThemeParams) => void;
+    updateFontFamily: (params: UpdateFontFamilyParams) => void;
+    addFontFamilyType: (params: AddFontFamilyTypeParams) => void;
+    updateFontFamilyTypeTitle: (params: UpdateFontFamilyTypeTitleParams) => void;
+    removeFontFamilyType: ({fontType}: {fontType: string}) => void;
+    updateAdvancedTypographySettings: (params: UpdateAdvancedTypographySettingsParams) => void;
 }
 
 export const ThemeCreatorMethodsContext = createContext<ThemeCreatorMethodsContextType>({
@@ -35,4 +44,9 @@ export const ThemeCreatorMethodsContext = createContext<ThemeCreatorMethodsConte
     changeUtilityColor: noop,
     changeRadiusPreset: noop,
     updateCustomRadiusPreset: noop,
+    updateFontFamily: noop,
+    addFontFamilyType: noop,
+    updateFontFamilyTypeTitle: noop,
+    removeFontFamilyType: noop,
+    updateAdvancedTypographySettings: noop,
 });

src/components/Themes/lib/themeCreatorExport.ts

@@ -1,31 +1,41 @@
 import {DEFAULT_PALETTE, DEFAULT_THEME} from './constants';
 import {
     createBorderRadiusPresetForExport,
+    createFontImportsForExport,
     createPrivateColorCssVariable,
     createPrivateColorCssVariableFromToken,
     createPrivateColorToken,
+    createTypographyPresetForExport,
     createUtilityColorCssVariable,
     isPrivateColorToken,
 } from './themeCreatorUtils';
 import type {ColorOption, ThemeCreatorState, ThemeVariant} from './types';
 
 const COMMON_VARIABLES_TEMPLATE_NAME = '%COMMON_VARIABLES%';
+const LIGHT_THEME_VARIABLES_TEMPLATE_NAME = '%LIGHT_THEME_VARIABLES%';
+const DARK_THEME_VARIABLES_TEMPLATE_NAME = '%DARK_THEME_VARIABLES%';
+const FONTS_TEMPLATE_NAME = '%IMPORT_FONTS%';
 
 const SCSS_TEMPLATE = `
 @use '@gravity-ui/uikit/styles/themes';
 
+${FONTS_TEMPLATE_NAME}
+
 .g-root {
+    @include themes.g-theme-common;
+
     ${COMMON_VARIABLES_TEMPLATE_NAME}
+
     &_theme_light {
         @include themes.g-theme-light;
 
-        %LIGHT_THEME_VARIABLES%
+        ${LIGHT_THEME_VARIABLES_TEMPLATE_NAME}
     }
 
     &_theme_dark {
         @include themes.g-theme-dark;
 
-        %DARK_THEME_VARIABLES%
+       ${DARK_THEME_VARIABLES_TEMPLATE_NAME}
     }
 }
 `.trim();
@@ -65,7 +75,7 @@
             }
 
             if (paletteTokens[token]?.privateColors[themeVariant]) {
                 Object.entries(paletteTokens[token].privateColors[themeVariant]!).forEach(
                     ([privateColorCode, color]) => {
                         privateColors[createPrivateColorToken(token, privateColorCode)] = color;
                         cssVariables += `${createPrivateColorCssVariable(
@@ -111,17 +121,36 @@
                 forPreview,
                 ignoreDefaultValues,
             });
+
+            cssVariables += createTypographyPresetForExport({
+                typography: themeState.typography,
+                ignoreDefaultValues,
+                forPreview,
+            });
         }
 
         return cssVariables.trim();
     };
 
-    return {
-        common: createBorderRadiusPresetForExport({
+    const prepareCommonThemeVariables = () => {
+        const borderRadiusVariabels = createBorderRadiusPresetForExport({
             borders: themeState.borders,
             forPreview,
             ignoreDefaultValues,
-        }),
+        });
+
+        const typographyVariables = createTypographyPresetForExport({
+            typography: themeState.typography,
+            ignoreDefaultValues,
+            forPreview,
+        });
+
+        return borderRadiusVariabels + '\n' + typographyVariables;
+    };
+
+    return {
+        fontImports: createFontImportsForExport(themeState.typography.baseSetting.fontFamilies),
+        common: prepareCommonThemeVariables(),
         light: prepareThemeVariables('light'),
         dark: prepareThemeVariables('dark'),
     };
@@ -134,12 +163,14 @@
         return 'not implemented';
     }
 
-    const {common, light, dark} = exportTheme({themeState, format, forPreview: false});
+    const {common, light, dark, fontImports} = exportTheme({
+        themeState,
+        format,
+        forPreview: false,
+    });
 
-    return SCSS_TEMPLATE.replace(
-        COMMON_VARIABLES_TEMPLATE_NAME,
-        common.replaceAll('\n', '\n'.padEnd(5)),
-    )
-        .replace('%LIGHT_THEME_VARIABLES%', light.replaceAll('\n', '\n'.padEnd(9)))
-        .replace('%DARK_THEME_VARIABLES%', dark.replaceAll('\n', '\n'.padEnd(9)));
+    return SCSS_TEMPLATE.replace(FONTS_TEMPLATE_NAME, fontImports)
+        .replace(COMMON_VARIABLES_TEMPLATE_NAME, common.replaceAll('\n', '\n'.padEnd(5)))
+        .replace(LIGHT_THEME_VARIABLES_TEMPLATE_NAME, light.replaceAll('\n', '\n'.padEnd(9)))
+        .replace(DARK_THEME_VARIABLES_TEMPLATE_NAME, dark.replaceAll('\n', '\n'.padEnd(9)));
 }