Merge pull request #621 from VKCOM/SevereCloud/feat/add-fontDisplayTitle

feat: add fontDisplayTitle
VKCOM · Oct 4, 2023 · bbb1aa3 · bbb1aa3
2 parents 1faf27e + 0258e72
commit bbb1aa3
Show file tree

Hide file tree

Showing 8 changed files with 11,765 additions and 20 deletions.
diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap
diff --git a/src/interfaces/general/typography/index.ts b/src/interfaces/general/typography/index.ts
@@ -18,6 +18,30 @@ export type Font = {
  * Переменные, отвечающие за группы переменных, отвечающих за шрифты
  */
 export interface Fonts {
+	/**
+	 * @desc Крупный выразительный текст, уровень 1
+	 * @tags font
+	 */
+	fontDisplayTitle1: Font;
+
+	/**
+	 * @desc Крупный выразительный текст, уровень 2
+	 * @tags font
+	 */
+	fontDisplayTitle2: Font;
+
+	/**
+	 * @desc Крупный выразительный текст, уровень 3
+	 * @tags font
+	 */
+	fontDisplayTitle3: Font;
+
+	/**
+	 * @desc Крупный выразительный текст, уровень 4
+	 * @tags font
+	 */
+	fontDisplayTitle4: Font;
+
 	/**
 	 * @desc Основной заголовок, уровень 1
 	 * @tags font

diff --git a/src/themeDescriptions/base/paradigm.ts b/src/themeDescriptions/base/paradigm.ts
@@ -296,6 +296,44 @@ export const lightThemeBase: ThemeDescription = {
 	fontWeightBase1,
 	fontWeightBase2,
 	fontWeightBase3,
+	fontDisplayTitle1: {
+		regular: {
+			fontSize: 23,
+			lineHeight: 28,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
+	fontDisplayTitle2: {
+		regular: {
+			fontSize: 21,
+			lineHeight: 26,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+		compact: {
+			fontSize: 22,
+			lineHeight: 24,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
+	fontDisplayTitle3: {
+		regular: {
+			fontSize: 19,
+			lineHeight: 24,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
+	fontDisplayTitle4: {
+		regular: {
+			fontSize: 17,
+			lineHeight: 24,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
 	fontTitle1: {
 		regular: {
 			fontSize: 24,

diff --git a/src/themeDescriptions/base/vk.ts b/src/themeDescriptions/base/vk.ts
@@ -271,6 +271,44 @@ export const fonts: BaseFonts = {
 	fontWeightBase1,
 	fontWeightBase2,
 	fontWeightBase3,
+	fontDisplayTitle1: {
+		regular: {
+			fontSize: 23,
+			lineHeight: 28,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
+	fontDisplayTitle2: {
+		regular: {
+			fontSize: 21,
+			lineHeight: 26,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+		compact: {
+			fontSize: 22,
+			lineHeight: 24,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
+	fontDisplayTitle3: {
+		regular: {
+			fontSize: 19,
+			lineHeight: 24,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
+	fontDisplayTitle4: {
+		regular: {
+			fontSize: 17,
+			lineHeight: 24,
+			fontFamily: fontFamilyAccent,
+			fontWeight: fontWeightAccent1,
+		},
+	},
 	fontTitle1: {
 		regular: {
 			fontSize: 24,

diff --git a/src/themeDescriptions/themes/vkCom/index.ts b/src/themeDescriptions/themes/vkCom/index.ts
@@ -8,6 +8,7 @@ import {
 	darkColors,
 	darkElevation,
 	darkGradient,
+	fonts,
 	lightColors,
 	lightTheme,
 } from '@/themeDescriptions/base/vk';
@@ -152,20 +153,8 @@ const vkComLightColor: ColorsDescription = {
 	},
 };
 
-export const vkComTheme: ThemeVkComDescription = {
-	...lightTheme,
-	...vkComLightColor,
-	themeName: 'vkCom',
-	themeNameBase: 'vkCom',
-	themeInheritsFrom: 'vkBase',
-
-	sizeBorderRadius: {
-		regular: 8,
-	},
-	sizeBorderRadiusPaper: {
-		regular: 12,
-	},
-
+export const vkComFonts = {
+	...fonts,
 	fontHeadline: alias('fontHeadline1'),
 	fontHeadline1: {
 		regular: {
@@ -205,6 +194,23 @@ export const vkComTheme: ThemeVkComDescription = {
 			lineHeight: 16,
 		},
 	},
+};
+
+export const vkComTheme: ThemeVkComDescription = {
+	...lightTheme,
+	...vkComLightColor,
+	themeName: 'vkCom',
+	themeNameBase: 'vkCom',
+	themeInheritsFrom: 'vkBase',
+
+	sizeBorderRadius: {
+		regular: 8,
+	},
+	sizeBorderRadiusPaper: {
+		regular: 12,
+	},
+
+	...vkComFonts,
 
 	sizeBasePaddingHorizontal: {
 		regular: 12,

diff --git a/src/themeDescriptions/themes/vkontakteAndroid/index.ts b/src/themeDescriptions/themes/vkontakteAndroid/index.ts
@@ -234,9 +234,63 @@ const gradients: VkontakteAndroidGradients = {
 	vkontakteGradientWomensDay: '#FF99CC, #E52E6A',
 };
 
-const androidFonts: typeof fonts = lodash.merge<typeof fonts, DeepPartial<typeof fonts>>(
+export const vkontakteDisplayTitleFontsPartial: DeepPartial<typeof fonts> = {
+	fontDisplayTitle1: {
+		regular: {
+			fontFamily: fontFamilyAccent,
+		},
+	},
+	fontDisplayTitle2: {
+		regular: {
+			fontFamily: fontFamilyAccent,
+		},
+		compact: {
+			fontFamily: fontFamilyAccent,
+		},
+	},
+	fontDisplayTitle3: {
+		regular: {
+			fontFamily: fontFamilyAccent,
+		},
+	},
+	fontDisplayTitle4: {
+		regular: {
+			fontFamily: fontFamilyAccent,
+		},
+	},
+};
+
+export const vkontakteMobileFonts = lodash.merge<typeof fonts, DeepPartial<typeof fonts>>(
 	lodash.cloneDeep(fonts),
+	vkontakteDisplayTitleFontsPartial,
+);
+
+const androidFonts: typeof fonts = lodash.merge<typeof fonts, DeepPartial<typeof fonts>>(
+	lodash.cloneDeep(vkontakteMobileFonts),
 	{
+		fontDisplayTitle1: {
+			regular: {
+				fontFamily: fontFamilyAccent,
+			},
+		},
+		fontDisplayTitle2: {
+			regular: {
+				fontFamily: fontFamilyAccent,
+			},
+			compact: {
+				fontFamily: fontFamilyAccent,
+			},
+		},
+		fontDisplayTitle3: {
+			regular: {
+				fontFamily: fontFamilyAccent,
+			},
+		},
+		fontDisplayTitle4: {
+			regular: {
+				fontFamily: fontFamilyAccent,
+			},
+		},
 		fontHeadline1: {
 			regular: {
 				letterSpacing: '0.15px',

diff --git a/src/themeDescriptions/themes/vkontakteCom/index.ts b/src/themeDescriptions/themes/vkontakteCom/index.ts
@@ -1,8 +1,12 @@
-import { LocalVkontakteAndroidColorsDescriptionStruct } from '../../../interfaces/themes/vkontakteAndroid';
-import { ThemeVkontakteComDescription } from '../../../interfaces/themes/vkontakteCom';
-import { ThemeVkontakteComDarkDescription } from '../../../interfaces/themes/vkontakteComDark';
-import { vkComTheme, vkComThemeDark } from '../vkCom';
-import { vkontakteTokens } from '../vkontakteAndroid';
+import lodash from 'lodash';
+
+import { DeepPartial } from '@/interfaces/general/tools/utils';
+import { LocalVkontakteAndroidColorsDescriptionStruct } from '@/interfaces/themes/vkontakteAndroid';
+import { ThemeVkontakteComDescription } from '@/interfaces/themes/vkontakteCom';
+import { ThemeVkontakteComDarkDescription } from '@/interfaces/themes/vkontakteComDark';
+
+import { vkComFonts, vkComTheme, vkComThemeDark } from '../vkCom';
+import { vkontakteDisplayTitleFontsPartial, vkontakteTokens } from '../vkontakteAndroid';
 
 const themeNameBase = 'vkontakteCom';
 
@@ -188,6 +192,11 @@ const vkontakteComLocalColorDark: LocalVkontakteAndroidColorsDescriptionStruct =
 	vkontakteColorImTextName: '#71AAEB',
 };
 
+const vkontakteComFonts = lodash.merge<typeof vkComFonts, DeepPartial<typeof vkComFonts>>(
+	lodash.cloneDeep(vkComFonts),
+	vkontakteDisplayTitleFontsPartial,
+);
+
 export const vkontakteComTheme: ThemeVkontakteComDescription = {
 	...vkComTheme,
 	themeName: themeNameBase,
@@ -198,6 +207,7 @@ export const vkontakteComTheme: ThemeVkontakteComDescription = {
 		...vkComTheme.colors,
 		...vkontakteComLocalColorLight,
 	},
+	...vkontakteComFonts,
 	...vkontakteTokens,
 };
 
@@ -212,5 +222,6 @@ export const vkontakteComThemeDark: ThemeVkontakteComDarkDescription = {
 		...vkComThemeDark.colors,
 		...vkontakteComLocalColorDark,
 	},
+	...vkontakteComFonts,
 	...vkontakteTokens,
 };
diff --git a/src/themeDescriptions/themes/vkontakteIOS/index.ts b/src/themeDescriptions/themes/vkontakteIOS/index.ts
@@ -4,6 +4,7 @@ import { vkIOSTheme, vkIOSThemeDark } from '../vkIOS';
 import {
 	vkontakteLocalColorDark,
 	vkontakteLocalColorLight,
+	vkontakteMobileFonts,
 	vkontakteTokens,
 } from '../vkontakteAndroid';
 
@@ -33,5 +34,6 @@ export const vkontakteIOSThemeDark: ThemeVkontakteIOSDarkDescription = {
 		...vkIOSThemeDark.colors,
 		...vkontakteLocalColorDark,
 	},
+	...vkontakteMobileFonts,
 	...vkontakteTokens,
 };