Merge pull request #1025 from VKCOM/4.52.0

4.52.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.51.0",
+  "version": "4.52.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -44,7 +44,7 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.25.2",
     "@svgr/webpack": "8.1.0",
     "@types/color": "3.0.6",
     "@types/common-tags": "1.8.4",
@@ -57,7 +57,7 @@
     "@vkontakte/icons": "2.124.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.14.2",
-    "@vkontakte/vkjs": "1.2.0",
+    "@vkontakte/vkjs": "1.3.0",
     "@vkontakte/vkui": "6.3.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
@@ -85,7 +85,7 @@
     "husky": "9.1.4",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "lint-staged": "15.2.7",
+    "lint-staged": "15.2.9",
     "lodash": "4.17.21",
     "prettier": "3.3.2",
     "react": "18.3.1",
@@ -102,7 +102,7 @@
     "type-fest": "4.23.0",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
-    "webpack": "5.92.1",
+    "webpack": "5.93.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",
     "webpack-notifier": "1.15.0"

src/interfaces/namespaces/paradigm/index.ts

@@ -127,6 +127,10 @@ export interface LocalParadigmColorsDescriptionStruct {
 	colorTooltipTextGreenThemed: ColorDescription;
 	colorTooltipTextOrangeThemed: ColorDescription;
 	colorTooltipTextPurpleThemed: ColorDescription;
+
+	// Цвета для Байта
+	colorBackgroundSky: ColorDescription;
+	colorBackgroundSkyAlpha: ColorDescription;
 }
 
 export type ParadigmLocalColors = {

src/interfaces/themes/cloud/index.ts

@@ -1,7 +1,13 @@
+import {
+	ColorDescription,
+	ColorsDescriptionStruct,
+	ColorWithStates,
+} from '@/interfaces/general/colors';
 import { Adaptive } from '@/interfaces/general/tools';
 import { DefaultViewports } from '@/interfaces/general/tools/viewports';
 import { Font } from '@/interfaces/general/typography';
 import {
+	LocalParadigmColorsDescriptionStruct,
 	ParadigmTheme,
 	ParadigmThemeCssVars,
 	ParadigmThemeDescription,
@@ -63,6 +69,105 @@ interface ThemeCloudTypohraphy {
 	fontLargeText: Font;
 }
 
-export interface ThemeCloud extends ParadigmTheme, ThemeCloudTypohraphy {}
-export interface ThemeCloudDescription extends ParadigmThemeDescription, ThemeCloudTypohraphy {}
+export interface LocalCloudColorsDescriptionStruct {
+	// Текст
+	cloudColorTextSecondaryAlpha: ColorDescription;
+	cloudColorTextAccentAlternative: ColorDescription;
+	cloudColorTextSnackbarAccent: ColorDescription;
+	cloudColorTextContrastThemedAlpha: ColorDescription;
+
+	// Background
+	cloudColorToolbarBackground: ColorDescription;
+	cloudColorViewerBackground: ColorDescription;
+	cloudColorTabbarBackgroundAlpha: ColorDescription;
+	cloudColorHeaderIconBackgroundAlpha: ColorDescription;
+	cloudColorBackgroundDragAndDrop: ColorDescription;
+	cloudColorBackgroundCTA: ColorDescription;
+	cloudColorHeaderSearchBackground: ColorDescription;
+	cloudColorHeaderSearchBackgroundCollapsed: ColorDescription;
+	cloudColorBackgroundPortal: ColorDescription;
+	cloudColorBackgroundAlternative: ColorDescription;
+	cloudColorBackgroundContentAlternative: ColorDescription;
+	cloudColorBackgroundFastScroll: ColorDescription;
+
+	// Icons
+	cloudColorIconAccentAlternative: ColorDescription;
+	cloudColorIconRating: ColorDescription;
+	cloudColorIconFolder: ColorDescription;
+
+	// Stroke
+	cloudColorLandingStrokeTariff: ColorDescription;
+
+	// Pallette
+	cloudColorSweetblue: ColorDescription;
+	cloudColorBlueAccentThemed: ColorDescription;
+	cloudColorSweetgreen: ColorDescription;
+	cloudColorGreenAccentThemed: ColorDescription;
+	cloudColorSweetorange: ColorDescription;
+	cloudColorOrangeAccentThemed: ColorDescription;
+	cloudColorSweetpurple: ColorDescription;
+	cloudColorPurpleAccentThemed: ColorDescription;
+	cloudColorIconIDCardThemedAlpha: ColorDescription;
+	cloudColorIconIDCard: ColorDescription;
+	cloudColorIconOfficialThemedAlpha: ColorDescription;
+	cloudColorIconOfficial: ColorDescription;
+	cloudColorIconTransportThemed: ColorDescription;
+	cloudColorIconTransport: ColorDescription;
+	cloudColorIconFinanceThemed: ColorDescription;
+	cloudColorIconFinance: ColorDescription;
+	cloudColorIconFileDocumentInvariably: ColorDescription;
+	cloudColorIconFilePresentationInvariably: ColorDescription;
+	cloudColorIconFileTableInvariably: ColorDescription;
+	cloudColorBackgroundFileDocument: ColorDescription;
+	cloudColorBackgroundFilePresentation: ColorDescription;
+	cloudColorBackgroundFileTable: ColorDescription;
+	cloudColorBackgroundFileOtherAlpha: ColorDescription;
+	cloudColorBackgroundProfileTariff: ColorDescription;
+	cloudColorIconProfileTariff: ColorDescription;
+	cloudColorBackgroundProfileAccess: ColorDescription;
+	cloudColorIconProfileAccess: ColorDescription;
+	cloudColorBackgroundProfileUploading: ColorDescription;
+	cloudColorIconProfileUploading: ColorDescription;
+	cloudColorBackgroundProfileTrash: ColorDescription;
+	cloudColorIconProfileTrash: ColorDescription;
+	cloudColorBackgroundProfileSettings: ColorDescription;
+	cloudColorIconProfileSettings: ColorDescription;
+	cloudColorBackgroundProfileMail: ColorDescription;
+	cloudColorIconProfileMail: ColorDescription;
+
+	// Other
+	cloudColorLandingBackground: ColorDescription;
+	cloudColorLandingSecondaryBackground: ColorDescription;
+	cloudColorLandingTertiaryBackground: ColorDescription;
+	cloudColorLandingMediumBackground: ColorDescription;
+	cloudColorLandingButtonBackground: ColorDescription;
+	cloudColorLandingLabelBackground: ColorDescription;
+	cloudColorLandingLabelInverseBackground: ColorDescription;
+	cloudColorLandingControlPrimaryBackground: ColorDescription;
+	cloudColorLandingControlSecondaryBackground: ColorDescription;
+	cloudColorSubscriptionButtonBackground: ColorDescription;
+	cloudColorScrollIndicatorAlpha: ColorDescription;
+
+	// Сайдбар
+	cloudColorSidebarItemText: ColorDescription;
+	cloudColorSidebarItemTextPrimary: ColorDescription;
+	cloudColorSidebarItemTextSecondary: ColorDescription;
+	cloudColorSidebarItemBackgroundAlpha: ColorDescription;
+
+	// Фон страницы
+	cloudColorBackground: ColorDescription;
+	cloudColorOverlayBackground: ColorDescription;
+}
+
+export type CloudLocalColors = {
+	[key in keyof LocalCloudColorsDescriptionStruct]: ColorWithStates;
+};
+
+export interface ThemeCloud extends ParadigmTheme, ThemeCloudTypohraphy, CloudLocalColors {}
+export interface ThemeCloudDescription extends ParadigmThemeDescription, ThemeCloudTypohraphy {
+	colors: LocalCloudColorsDescriptionStruct &
+		LocalParadigmColorsDescriptionStruct &
+		ColorsDescriptionStruct;
+}
+
 export interface ThemeCloudCssVars extends ParadigmThemeCssVars<DefaultViewports, ThemeCloud> {}

src/interfaces/themes/octaviusWhiteDark/index.ts

@@ -0,0 +1,9 @@
+import {
+	ThemeOctavius,
+	ThemeOctaviusCssVars,
+	ThemeOctaviusDescription,
+} from '@/interfaces/themes/octavius';
+
+export type ThemeOctaviusWhiteDark = ThemeOctavius;
+export type ThemeOctaviusWhiteDarkDescription = ThemeOctaviusDescription;
+export type ThemeOctaviusWhiteDarkCssVars = ThemeOctaviusCssVars;

src/interfaces/themes/widgets/index.ts

@@ -0,0 +1,9 @@
+import {
+	ParadigmTheme,
+	ParadigmThemeCssVars,
+	ParadigmThemeDescription,
+} from '@/interfaces/namespaces/paradigm';
+
+export interface ThemeWidgetsDescription extends ParadigmThemeDescription {}
+export interface ThemeWidgets extends ParadigmTheme {}
+export interface ThemeWidgetsCssVars extends ParadigmThemeCssVars {}

src/interfaces/themes/widgetsDark/index.ts

@@ -0,0 +1,9 @@
+import {
+	ParadigmTheme,
+	ParadigmThemeCssVars,
+	ParadigmThemeDescription,
+} from '@/interfaces/namespaces/paradigm';
+
+export interface ThemeWidgetsDarkDescription extends ParadigmThemeDescription {}
+export interface ThemeWidgetsDark extends ParadigmTheme {}
+export interface ThemeWidgetsDarkCssVars extends ParadigmThemeCssVars {}

src/lint/__snapshots__/lint.test.ts.snap

@@ -1,3 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`lint snapshot 1`] = `[]`;
+exports[`lint snapshot 1`] = `
+[
+  "cloud: colors.cloudColorIconTransportThemed error: Color token type mismatch: opaque token name but alpha value",
+  "cloud: colors.cloudColorIconFinanceThemed error: Color token type mismatch: opaque token name but alpha value",
+  "cloudDark: colors.cloudColorIconTransportThemed error: Color token type mismatch: opaque token name but alpha value",
+  "cloudDark: colors.cloudColorIconFinanceThemed error: Color token type mismatch: opaque token name but alpha value",
+]
+`;