4.39.1

.github/workflows/coverage.yml

@@ -4,6 +4,8 @@ on:
     branches:
       - master
 
+permissions: write-all
+
 jobs:
   coverage:
     runs-on: ubuntu-latest

docs/src/components/pages/Tokens/TokensContent/TokensContent.css

@@ -12,7 +12,7 @@
 }
 
 .tokens-content-item > div {
-	overflow: auto;
+	overflow: visible;
 }
 
 .tokens-content-header > div:nth-child(1),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.39.0",
+  "version": "4.39.1",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -48,18 +48,19 @@
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
     "@types/fs-extra": "11.0.1",
+    "@types/lodash": "4.14.198",
     "@types/node": "18.11.10",
     "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.1",
+    "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.4",
     "@vkontakte/icons": "2.54.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.11.1",
-    "@vkontakte/vkjs": "0.32.2",
-    "@vkontakte/vkui": "5.8.0",
-    "babel-jest": "29.6.2",
+    "@vkontakte/vkjs": "1.1.0",
+    "@vkontakte/vkui": "5.8.1",
+    "babel-jest": "29.7.0",
     "babel-loader": "9.1.2",
     "clean-webpack-plugin": "4.0.0",
     "clsx": "1.2.1",

src/interfaces/general/tools/utils.ts

@@ -33,3 +33,13 @@ export type StringifyObject<Base> = {
 		? StringifyObject<Base[Key]>
 		: Base[Key];
 };
+
+/**
+ * Как Partial, но уходящий вглубь.
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type DeepPartial<T> = T extends object
+	? {
+			[P in keyof T]?: DeepPartial<T[P]>;
+	  }
+	: T;

src/themeDescriptions/base/vk.ts

@@ -3,6 +3,8 @@ import { alias } from '@/build/helpers/tokenHelpers';
 import { ColorsDescription, ThemeDescription } from '@/interfaces/general';
 import { Elevation } from '@/interfaces/general/elevation';
 import { Gradients } from '@/interfaces/general/gradients';
+import { Adaptive } from '@/interfaces/general/tools';
+import { Fonts, TypographyBaseProps } from '@/interfaces/general/typography';
 import figma from '@/themeDescriptions/base/figma/vk.json';
 
 const fontFamilyFallbacks = '-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif';
@@ -250,12 +252,15 @@ export const darkElevation: Elevation = {
 	elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)',
 };
 
-export const lightTheme: ThemeDescription = {
-	themeName: 'vkBase',
-	themeNameBase: 'vkBase',
-	...lightColors,
-	...lightGradient,
-	...lightElevation,
+type BaseFonts = Omit<
+	{
+		[key in keyof Fonts]: Adaptive<Fonts[key]>;
+	},
+	'fontHeadline'
+> &
+	TypographyBaseProps;
+
+export const fonts: BaseFonts = {
 	// Типографика
 	fontFamilyFallbacks,
 	fontFamilyAccent,
@@ -290,7 +295,6 @@ export const lightTheme: ThemeDescription = {
 			fontWeight: fontWeightAccent1,
 		},
 	},
-	fontHeadline: alias('fontHeadline1'),
 	fontHeadline1: {
 		regular: {
 			fontSize: 16,
@@ -415,6 +419,16 @@ export const lightTheme: ThemeDescription = {
 			textTransform: 'uppercase',
 		},
 	},
+};
+
+export const lightTheme: ThemeDescription = {
+	themeName: 'vkBase',
+	themeNameBase: 'vkBase',
+	...lightColors,
+	...lightGradient,
+	...lightElevation,
+	...fonts,
+	fontHeadline: alias('fontHeadline1'),
 
 	// Размеры
 	sizeSelectIconPadding: {

src/themeDescriptions/themes/vkontakteAndroid/index.ts

@@ -1,11 +1,14 @@
+import lodash from 'lodash';
+
+import { DeepPartial } from '@/interfaces/general/tools/utils';
 import type {
 	LocalVkontakteAndroidColorsDescriptionStruct,
 	ThemeVkontakteAndroidDescription,
 	VkontakteAndroidGradients,
 } from '@/interfaces/themes/vkontakteAndroid';
 import type { ThemeVkontakteAndroidDarkDescription } from '@/interfaces/themes/vkontakteAndroidDark';
 
-import { darkTheme as vkDarkTheme, lightTheme as vkLightTheme } from '../../base/vk';
+import { darkTheme as vkDarkTheme, fonts, lightTheme as vkLightTheme } from '../../base/vk';
 
 const themeNameBase = 'vkontakteAndroid';
 
@@ -228,6 +231,76 @@ const gradients: VkontakteAndroidGradients = {
 	vkontakteGradientWomensDay: '#FF99CC, #E52E6A',
 };
 
+const androidFonts: typeof fonts = lodash.merge<typeof fonts, DeepPartial<typeof fonts>>(
+	lodash.cloneDeep(fonts),
+	{
+		fontHeadline1: {
+			regular: {
+				letterSpacing: '0.15px',
+			},
+			compact: {
+				letterSpacing: '0.15px',
+			},
+		},
+		fontText: {
+			regular: {
+				letterSpacing: '0.15px',
+			},
+			compact: {
+				letterSpacing: '0.15px',
+			},
+		},
+		fontSubhead: {
+			regular: {
+				letterSpacing: '0.15px',
+			},
+			compact: {
+				letterSpacing: '0.15px',
+			},
+		},
+		fontFootnote: {
+			regular: {
+				letterSpacing: '0.2px',
+			},
+		},
+		fontFootnoteCaps: {
+			regular: {
+				letterSpacing: '0.2px',
+			},
+		},
+		fontCaption1: {
+			regular: {
+				letterSpacing: '0.3px',
+			},
+		},
+		fontCaption1Caps: {
+			regular: {
+				letterSpacing: '0.3px',
+			},
+		},
+		fontCaption2: {
+			regular: {
+				letterSpacing: '0.3px',
+			},
+		},
+		fontCaption2Caps: {
+			regular: {
+				letterSpacing: '0.3px',
+			},
+		},
+		fontCaption3: {
+			regular: {
+				letterSpacing: '0.3px',
+			},
+		},
+		fontCaption3Caps: {
+			regular: {
+				letterSpacing: '0.3px',
+			},
+		},
+	},
+);
+
 export const vkontakteTokens = {
 	...gradients,
 };
@@ -243,6 +316,7 @@ export const vkontakteAndroidTheme: ThemeVkontakteAndroidDescription = {
 		...vkontakteLocalColorLight,
 	},
 	...vkontakteTokens,
+	...androidFonts,
 };
 
 export const vkontakteAndroidThemeDark: ThemeVkontakteAndroidDarkDescription = {
@@ -257,4 +331,5 @@ export const vkontakteAndroidThemeDark: ThemeVkontakteAndroidDarkDescription = {
 		...vkontakteLocalColorDark,
 	},
 	...vkontakteTokens,
+	...androidFonts,
 };