Merge pull request #518 from VKCOM/4.35.0

4.35.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.34.1",
+  "version": "4.35.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -33,7 +33,7 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.21.4",
+    "@babel/core": "7.21.8",
     "@svgr/webpack": "7.0.0",
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
@@ -43,12 +43,12 @@
     "@types/react": "18.2.0",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.2",
-    "@vkontakte/icons": "2.28.0",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.4",
+    "@vkontakte/icons": "2.34.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.7.2",
     "@vkontakte/vkjs": "0.32.2",
-    "@vkontakte/vkui": "5.1.0",
+    "@vkontakte/vkui": "5.4.1",
     "babel-jest": "29.5.0",
     "babel-loader": "9.1.2",
     "clean-webpack-plugin": "4.0.0",
@@ -73,7 +73,7 @@
     "jest": "29.5.0",
     "jest-junit": "16.0.0",
     "lodash": "4.17.21",
-    "prettier": "2.8.7",
+    "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.0",

src/interfaces/general/colors/index.ts

@@ -244,6 +244,12 @@ export interface ColorsDescriptionStruct {
 	 */
 	colorTextLinkThemed: ColorDescription;
 
+	/**
+	 * @desc Третичный цвет текста ссылок
+	 * @tags color, text
+	 */
+	colorTextLinkTint: ColorDescription;
+
 	/**
 	 * @desc Цвет текста посещенных ссылок
 	 * @tags color, text
@@ -457,6 +463,12 @@ export interface ColorsDescriptionStruct {
 	 */
 	colorAccentOrange: ColorDescription;
 
+	/**
+	 * @desc Палитра цветов. Огненно оранжевый цвет
+	 * @tags color, palette
+	 */
+	colorAccentOrangeFire: ColorDescription;
+
 	/**
 	 * @desc Палитра цветов. Фиолетовый цвет
 	 * @tags color, palette

src/interfaces/themes/calendar/index.ts

@@ -28,16 +28,98 @@ export interface ThemeCalendarOverValues {
 }
 
 export interface LocalCalendarColorDescriptionStruct {
-	calendarColorBackgroundPositiveTintAlpha4: ColorDescription;
 	calendarColorBackgroundAccentTintThemed: ColorDescription;
 	calendarColorButtonGroupBackgroundPositiveTint: ColorDescription;
 	calendarColorButtonGroupBackgroundNegativeTint: ColorDescription;
 	calendarColorButtonGroupBackgroundAccentTint: ColorDescription;
 	calendarColorButtonGroupTextPositive: ColorDescription;
 	calendarColorButtonGroupTextNegative: ColorDescription;
+
+	// #region Event
+	// Цвета событий
+	calendarColorEventRed: ColorDescription;
+	calendarColorEventSalmon: ColorDescription;
+	calendarColorEventOrange: ColorDescription;
+	calendarColorEventYellow: ColorDescription;
+	calendarColorEventLemon: ColorDescription;
+	calendarColorEventLime: ColorDescription;
+	calendarColorEventGrass: ColorDescription;
+	calendarColorEventMint: ColorDescription;
+	calendarColorEventSea: ColorDescription;
+	calendarColorEventTurquoise: ColorDescription;
+	calendarColorEventLightSky: ColorDescription;
+	calendarColorEventMainSky: ColorDescription;
+	calendarColorEventSky: ColorDescription;
+	calendarColorEventMidnightSky: ColorDescription;
+	calendarColorEventViolet: ColorDescription;
+	calendarColorEventPurple: ColorDescription;
+	calendarColorEventMagenta: ColorDescription;
+	calendarColorEventPink: ColorDescription;
+	// #endregion Event
+
+	// #region Text-Event
+	calendarColorEventTextRed: ColorDescription;
+	calendarColorEventTextOrange: ColorDescription;
+	calendarColorEventTextYellow: ColorDescription;
+	calendarColorEventTextLemon: ColorDescription;
+	calendarColorEventTextLime: ColorDescription;
+	calendarColorEventTextGrass: ColorDescription;
+	calendarColorEventTextMint: ColorDescription;
+	calendarColorEventTextSea: ColorDescription;
+	calendarColorEventTextTurquoise: ColorDescription;
+	calendarColorEventTextLightSky: ColorDescription;
 	calendarColorEventTextMainSky: ColorDescription;
-	calendarColorBackgroundMainSkyTint: ColorDescription;
+	calendarColorEventTextSky: ColorDescription;
+	calendarColorEventTextMidnightSky: ColorDescription;
+	calendarColorEventTextViolet: ColorDescription;
+	calendarColorEventTextPurple: ColorDescription;
+	calendarColorEventTextMagenta: ColorDescription;
+	calendarColorEventTextPink: ColorDescription;
+	// #endregion Text-Event
+
+	// #region Background-TintAlpha20-Alpha
+	calendarColorBackgroundRedTintAlpha20: ColorDescription;
+	calendarColorBackgroundSalmonTintAlpha20: ColorDescription;
+	calendarColorBackgroundOrangeTintAlpha20: ColorDescription;
+	calendarColorBackgroundYellowTintAlpha20: ColorDescription;
+	calendarColorBackgroundLemonTintAlpha20: ColorDescription;
+	calendarColorBackgroundLimeTintAlpha20: ColorDescription;
+	calendarColorBackgroundGrassTintAlpha20: ColorDescription;
+	calendarColorBackgroundMintTintAlpha20: ColorDescription;
+	calendarColorBackgroundSeaTintAlpha20: ColorDescription;
+	calendarColorBackgroundTurquoiseTintAlpha20: ColorDescription;
+	calendarColorBackgroundLightSkyTintAlpha20: ColorDescription;
 	calendarColorBackgroundMainSkyTintAlpha20: ColorDescription;
+	calendarColorBackgroundSkyTintAlpha20: ColorDescription;
+	calendarColorBackgroundMidnightSkyTintAlpha20: ColorDescription;
+	calendarColorBackgroundVioletTintAlpha20: ColorDescription;
+	calendarColorBackgroundPurpleTintAlpha20: ColorDescription;
+	calendarColorBackgroundMagentaTintAlpha20: ColorDescription;
+	calendarColorBackgroundPinkTintAlpha20: ColorDescription;
+	calendarColorBackgroundPositiveTintAlpha4: ColorDescription;
+	// #endregion Background-TintAlpha20
+
+	// #region Background-Tint
+	// Тинтовые цвета событий без прозрачности. Нужны для растягивания событий, т.к. если под растягиваемым событие есть событие того же цвета, они сливаются
+	calendarColorBackgroundRedTint: ColorDescription;
+	calendarColorBackgroundSalmonTint: ColorDescription;
+	calendarColorBackgroundOrangeTint: ColorDescription;
+	calendarColorBackgroundYellowTint: ColorDescription;
+	calendarColorBackgroundLemonTint: ColorDescription;
+	calendarColorBackgroundLimeTint: ColorDescription;
+	calendarColorBackgroundGrassTint: ColorDescription;
+	calendarColorBackgroundMintTint: ColorDescription;
+	calendarColorBackgroundSeaTint: ColorDescription;
+	calendarColorBackgroundTurquoiseTint: ColorDescription;
+	calendarColorBackgroundLightSkyTint: ColorDescription;
+	calendarColorBackgroundMainSkyTint: ColorDescription;
+	calendarColorBackgroundSkyTint: ColorDescription;
+	calendarColorBackgroundMidnightSkyTint: ColorDescription;
+	calendarColorBackgroundVioletTint: ColorDescription;
+	calendarColorBackgroundPurpleTint: ColorDescription;
+	calendarColorBackgroundMagentaTint: ColorDescription;
+	calendarColorBackgroundPinkTint: ColorDescription;
+	// #endregion Background-Tint
 
 	// Фон страницы (отличается от colorBackground)
 	calendarColorBackground: ColorDescription;

src/themeDescriptions/base/paradigm.ts

@@ -64,6 +64,7 @@ export const lightColors: ColorsDescription = {
 		colorTextAccentThemed: '#005FF9',
 		colorTextNegative: '#ED0A34',
 		colorTextLink: '#005BD1',
+		colorTextLinkTint: '#71AAEB',
 		colorTextLinkThemed: '#005BD1',
 		colorTextMuted: '#2C2D2E',
 		colorTextPrimary: '#2C2D2E',
@@ -114,6 +115,7 @@ export const lightColors: ColorsDescription = {
 		colorAccentRed: '#ED0A34',
 		colorAccentGreen: '#0DC268',
 		colorAccentOrange: '#FF9E00',
+		colorAccentOrangeFire: '#F05C44',
 		colorAccentPurple: '#4F6DDC',
 		colorAccentViolet: '#C15DF3',
 		colorAccentRaspberryPink: '#E03FAB',
@@ -185,6 +187,7 @@ export const darkColors: ColorsDescription = {
 		colorTextAccentThemed: '#FFFFFF',
 		colorTextNegative: '#FF5C5C',
 		colorTextLink: '#589BFF',
+		colorTextLinkTint: '#71AAEB',
 		colorTextLinkThemed: '#FFFFFF',
 		colorTextMuted: '#E7E8EA',
 		colorTextPrimary: '#E7E8EA',
@@ -235,6 +238,7 @@ export const darkColors: ColorsDescription = {
 		colorAccentRed: '#ED0A34',
 		colorAccentGreen: '#0DC268',
 		colorAccentOrange: '#FF9E00',
+		colorAccentOrangeFire: '#F05C44',
 		colorAccentPurple: '#4F6DDC',
 		colorAccentViolet: '#C15DF3',
 		colorAccentRaspberryPink: '#F060C0',

src/themeDescriptions/base/vk.ts

@@ -72,6 +72,7 @@ export const lightColors: ColorsDescription = {
 		colorTextNegative: '#E64646',
 		colorTextLink: '#2D81E0',
 		colorTextLinkThemed: '#2D81E0',
+		colorTextLinkTint: '#71AAEB',
 		colorTextLinkVisited: '#4986CC',
 		colorTextMuted: '#2C2D2E',
 		colorLinkContrast: '#FFFFFF',
@@ -117,6 +118,7 @@ export const lightColors: ColorsDescription = {
 		colorAccentRed: '#FF3347',
 		colorAccentGreen: '#4BB34B',
 		colorAccentOrange: '#FFA000',
+		colorAccentOrangeFire: '#F05C44',
 		colorAccentPurple: '#735CE6',
 		colorAccentViolet: '#792EC0',
 		colorAccentRaspberryPink: '#E03FAB',
@@ -211,6 +213,7 @@ export const darkColors: ColorsDescription = {
 		colorTextNegative: '#FF5C5C',
 		colorTextLink: '#529EF4',
 		colorTextLinkThemed: '#FFFFFF',
+		colorTextLinkTint: '#71AAEB',
 		colorTextLinkVisited: '#4986CC',
 		colorTextMuted: '#E1E3E6',
 		colorLinkContrast: '#FFFFFF',
@@ -252,6 +255,7 @@ export const darkColors: ColorsDescription = {
 		colorAccentRed: '#FF3347',
 		colorAccentGreen: '#4BB34B',
 		colorAccentOrange: '#FFA000',
+		colorAccentOrangeFire: '#F05C44',
 		colorAccentPurple: '#735CE6',
 		colorAccentViolet: '#792EC0',
 		colorAccentRaspberryPink: '#F060C0',