Merge pull request #1011 from VKCOM/4.51.0

4.51.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.50.0",
+  "version": "4.51.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -82,7 +82,7 @@
     "eslint-plugin-unicorn": "51.0.1",
     "fs-extra": "11.2.0",
     "html-webpack-plugin": "5.6.0",
-    "husky": "9.1.3",
+    "husky": "9.1.4",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
     "lint-staged": "15.2.7",
@@ -93,7 +93,7 @@
     "rimraf": "5.0.7",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.1.5",
+    "ts-jest": "29.2.4",
     "ts-loader": "9.5.1",
     "ts-morph": "20.0.0",
     "ts-node": "10.9.2",

src/interfaces/themes/media/index.ts

@@ -142,6 +142,11 @@ interface MediaUniqTokens {
 	 * @tags font
 	 */
 	mediaFontMediaTitle6: Adaptive<Font>;
+	/**
+	 * @desc Подзаголовок, отделённый визуально от заголовка выше
+	 * @tags font
+	 */
+	mediaFontMediaSubtitleLight: Adaptive<Font>;
 	/**
 	 * @desc Лид статьи
 	 * @tags font
@@ -200,6 +205,16 @@ interface MediaUniqTokens {
 	fontH2: Adaptive<Font>;
 	fontH3: Adaptive<Font>;
 	fontH4: Adaptive<Font>;
+	/**
+	 * @desc
+	 * @tags size
+	 */
+	mediaSizeGrid: number;
+	/**
+	 * @desc Базовый gap сетки
+	 * @tags size
+	 */
+	mediaSizeGap: number;
 	/**
 	 * @desc Ширина колонки страницы
 	 * @tags size, component
@@ -210,6 +225,11 @@ interface MediaUniqTokens {
 	 * @tags size, component
 	 */
 	gridMainContent: Adaptive<number | string>;
+	/**
+	 * @desc Ширина основной колонки контента с выносом
+	 * @tags size, component
+	 */
+	gridMainContentWide: Adaptive<number | string>;
 	/**
 	 * @desc Ширина sidebar
 	 * @tags size, component

src/interfaces/themes/tutoria/index.ts

@@ -0,0 +1,88 @@
+import { ThemeCssVars } from '@/interfaces/general';
+import {
+	ColorDescription,
+	ColorsDescriptionStruct,
+	ColorWithStates,
+} from '@/interfaces/general/colors';
+import { Adaptive } from '@/interfaces/general/tools';
+import { Font } from '@/interfaces/general/typography';
+import { ThemeVkBase, ThemeVkBaseDescription } from '@/interfaces/themes/vkBase';
+
+export interface ThemeTutoriaLocalSizes {
+	tutoriaSizePaddingCard: number;
+	tutoriaLayoutMaxWidth: number;
+
+	tutoriaSizeButtonBaseSmallBorderRadius: number;
+	tutoriaSizeButtonBaseMediumBorderRadius: number;
+	tutoriaSizeButtonBaseLargeBorderRadius: number;
+}
+
+export interface ThemeTutoriaOverValues {
+	// кастомные шрифты
+}
+
+export interface LocalTutoriaColorsDescriptionStruct {
+	// токены цветов тутории
+	tutoriaColorBackgroundPrimary: ColorDescription;
+	tutoriaColorBackgroundContentInverse: ColorDescription;
+	tutoriaColorBackgroundOverlayAlpha: ColorDescription;
+	tutoriaColorBackgroundNeutral: ColorDescription;
+	tutoriaColorBackgroundAccentTint: ColorDescription;
+	tutoriaColorBackgroundWarning: ColorDescription;
+	tutoriaColorBackgroundWarningTint: ColorDescription;
+	tutoriaColorBackgroundPositiveTint: ColorDescription;
+	tutoriaColorBackgroundNegativeTint: ColorDescription;
+	tutoriaColorBackgroundInfo: ColorDescription;
+	tutoriaColorBackgroundInfoTint: ColorDescription;
+	tutoriaColorCardBoxShadowAlpha: ColorDescription;
+
+	tutoriaColorTextWarning: ColorDescription;
+	tutoriaColorTextInfo: ColorDescription;
+
+	tutoriaColorIconWarning: ColorDescription;
+	tutoriaColorIconInfo: ColorDescription;
+	tutoriaColorIconLink: ColorDescription;
+
+	tutoriaColorSeparatorPrimaryAlpha: ColorDescription;
+	tutoriaColorSeparatorSecondaryAlpha: ColorDescription;
+
+	tutoriaColorStrokePrimary: ColorDescription;
+	tutoriaColorStrokeSecondary: ColorDescription;
+	tutoriaColorStrokeTertiary: ColorDescription;
+	tutoriaColorStrokeAccentTint: ColorDescription;
+	tutoriaColorStrokePositiveTint: ColorDescription;
+	tutoriaColorStrokeWarning: ColorDescription;
+	tutoriaColorStrokeWarningTint: ColorDescription;
+	tutoriaColorStrokeNegativeTint: ColorDescription;
+	tutoriaColorStrokeInfo: ColorDescription;
+	tutoriaColorStrokeInfoTint: ColorDescription;
+}
+
+export interface LocalTutoriaFontStruct {
+	tutoriaFontTextTitle1: Font;
+	tutoriaFontTextTitle2: Font;
+	tutoriaFontTextTitle3: Font;
+}
+
+type ThemeTutoriaAdaptiveValues = LocalTutoriaFontStruct & ThemeTutoriaLocalSizes;
+export type ThemeTutoriaAdaptiveTokens = {
+	[key in keyof ThemeTutoriaAdaptiveValues]: Adaptive<ThemeTutoriaAdaptiveValues[key]>;
+};
+
+export type TutoriaLocalColors = {
+	[key in keyof LocalTutoriaColorsDescriptionStruct]: ColorWithStates;
+};
+
+export interface ThemeTutoriaDescription
+	extends ThemeVkBaseDescription,
+		ThemeTutoriaOverValues,
+		ThemeTutoriaAdaptiveTokens {
+	colors: LocalTutoriaColorsDescriptionStruct & ColorsDescriptionStruct;
+}
+export interface ThemeTutoria
+	extends ThemeVkBase,
+		ThemeTutoriaOverValues,
+		TutoriaLocalColors,
+		ThemeTutoriaAdaptiveTokens {}
+
+export interface ThemeTutoriaCssVars extends ThemeCssVars<ThemeTutoria> {}

src/interfaces/themes/tutoriaDark/index.ts

@@ -0,0 +1,9 @@
+import {
+	ThemeTutoria,
+	ThemeTutoriaCssVars,
+	ThemeTutoriaDescription,
+} from '@/interfaces/themes/tutoria';
+
+export type ThemeTutoriaDark = ThemeTutoria;
+export type ThemeTutoriaDarkDescription = ThemeTutoriaDescription;
+export type ThemeTutoriaDarkCssVars = ThemeTutoriaCssVars;

src/themeDescriptions/base/paradigm.ts

@@ -9,7 +9,7 @@ import { ParadigmThemeDescription } from '@/interfaces/namespaces/paradigm';
 import { helpers } from '@/themeDescriptions/common';
 
 const fontFamilyFallbacks = 'Helvetica, Arial, sans-serif';
-const fontFamilyAccent = `MailSans, ${fontFamilyFallbacks}`;
+const fontFamilyAccent = `VKSansDisplay, MailSans, ${fontFamilyFallbacks}`;
 const fontFamilyBase = fontFamilyFallbacks;
 const fontWeightAccent1 = 500;
 const fontWeightAccent2 = 500;

src/themeDescriptions/index.ts

@@ -22,6 +22,7 @@ import { promoTheme } from '@/themeDescriptions/themes/promo';
 import { pulseTheme, pulseThemeDark } from '@/themeDescriptions/themes/pulse';
 import { searchTheme } from '@/themeDescriptions/themes/search';
 import { todoTheme } from '@/themeDescriptions/themes/todo';
+import { tutoriaDarkTheme, tutoriaTheme } from '@/themeDescriptions/themes/tutoria';
 import {
 	vkAccessibilityTheme,
 	vkAccessibilityThemeDark,
@@ -75,6 +76,8 @@ export const themes = [
 	vkIdOkThemeDark,
 	vkIdOkIOSTheme,
 	vkIdOkIOSThemeDark,
+	tutoriaTheme,
+	tutoriaDarkTheme,
 
 	// ==== Темы, наследуемые от базовой темы Paradigm ====
 	// Темы, наследуемые от Octavius

src/themeDescriptions/themes/calendar/index.ts

@@ -9,7 +9,8 @@ import { fontSizes, helpers } from '../../common';
 
 const { x2, x4, x5 } = helpers;
 
-export const fontFamily: Property.FontFamily = 'MailSans, Helvetica, Arial, sans-serif';
+export const fontFamily: Property.FontFamily =
+	'VKSansDisplay, MailSans, Helvetica, Arial, sans-serif';
 
 const fontSize2 = {
 	...fontSizes.fontSize2,

src/themeDescriptions/themes/media/index.ts

@@ -219,6 +219,14 @@ export const mediaTheme: ThemeMediaDescription = {
 			letterSpacing: '-0.005em',
 		},
 	},
+	mediaFontMediaSubtitleLight: {
+		regular: {
+			fontFamily: staticRef(fontFamilyAccent),
+			fontWeight: fontWeightMedia4,
+			fontSize: 20,
+			lineHeight: 26,
+		},
+	},
 	mediaFontMediaLead: {
 		regular: {
 			fontFamily: staticRef(fontFamilyAccent),
@@ -540,12 +548,20 @@ export const mediaTheme: ThemeMediaDescription = {
 		compact: 620,
 		large: 780,
 	},
+	gridMainContentWide: {
+		regular: '100%',
+		compactX: 620,
+		compact: 620,
+		large: 860,
+	},
 	gridAsideContent: {
 		regular: '100%',
 		compactX: 300,
 		compact: 300,
 		large: 300,
 	},
+	mediaSizeGap: 20,
+	mediaSizeGrid: 60,
 
 	// @deprecated
 	gridColumnX2: {

src/themeDescriptions/themes/octavius/index.ts

@@ -255,7 +255,8 @@ export const octaviusTheme: ThemeOctaviusDescription = {
 
 	octaviusFontFamilyDefault: 'HelveticaNeue, Helvetica, Arial, sans-serif',
 
-	octaviusFontFamilyMailSans: 'MailSans, HelveticaNeue, Helvetica, Arial, sans-serif',
+	octaviusFontFamilyMailSans:
+		'VKSansDisplay, MailSans, HelveticaNeue, Helvetica, Arial, sans-serif',
 
 	octaviusFontFamilyGlobal: 'Arial, Tahoma, Verdana, sans-serif',
 	octaviusFontFamilyMac: 'Helvetica, Arial, Tahoma, Verdana, sans-serif',