@vkontakte/vkui-tokens 4.22.0 → 4.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.22.0",
+  "version": "4.23.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -32,23 +32,23 @@
     "csstype": "3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.19.3",
+    "@babel/core": "7.20.2",
     "@svgr/webpack": "6.4.0",
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
     "@types/fs-extra": "9.0.13",
     "@types/jest": "26.0.23",
     "@types/node": "15.0.1",
-    "@types/react": "18.0.21",
+    "@types/react": "18.0.25",
     "@types/react-dom": "18.0.8",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.51.4",
     "@vkontakte/icons": "1.201.0",
     "@vkontakte/vk-bridge": "2.7.0",
-    "@vkontakte/vkui": "4.38.0",
+    "@vkontakte/vkui": "4.39.0",
     "babel-jest": "26.0.0",
-    "babel-loader": "8.2.5",
+    "babel-loader": "9.1.0",
     "clean-webpack-plugin": "4.0.0",
     "clsx": "1.2.1",
     "color": "4.2.3",
@@ -65,7 +65,7 @@
     "eslint-plugin-jasmine": "4.1.3",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-plugin-sonarjs": "0.15.0",
+    "eslint-plugin-sonarjs": "0.16.0",
     "fs-extra": "10.1.0",
     "html-webpack-plugin": "5.5.0",
     "jest": "26.6.3",

package/themeDescriptions/base/paradigm.js

@@ -144,7 +144,11 @@ exports.darkColors = {
     colors: {
         // Background
         colorBackgroundAccent: '#2775FC',
-        colorBackgroundAccentThemed: '#FFFFFF',
+        colorBackgroundAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorBackgroundAccentAlternative: '#FF9E00',
         colorBackgroundContent: '#232324',
         colorBackgroundSecondary: '#2A2A2B',
@@ -160,7 +164,11 @@ exports.darkColors = {
             active: 'rgba(255, 255, 255, 0.14)',
         },
         colorBackground: '#19191A',
-        colorBackgroundContrast: '#FFFFFF',
+        colorBackgroundContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorBackgroundContrastSecondaryAlpha: {
             normal: 'rgba(255, 255, 255, 0.2)',
             hover: 'rgba(255, 255, 255, 0.24)',
@@ -173,15 +181,27 @@ exports.darkColors = {
         colorBackgroundNegativeTint: '#522e2e',
         colorBackgroundPositiveTint: '#182A22',
         colorFieldBackground: '#232324',
-        colorBackgroundModalInverse: '#ffffff',
+        colorBackgroundModalInverse: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorBackgroundContrastInverse: '#303030',
         colorBackgroundAccentTint: '#5a9eff',
         // Text
         colorTextAccent: '#3C82FD',
-        colorTextAccentThemed: '#FFFFFF',
+        colorTextAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorTextNegative: '#ED0A34',
         colorTextLink: '#589BFF',
-        colorTextLinkThemed: '#FFFFFF',
+        colorTextLinkThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorTextMuted: '#E7E8EA',
         colorTextPrimary: '#E7E8EA',
         colorTextPrimaryInvariably: '#2C2D2E',
@@ -189,13 +209,25 @@ exports.darkColors = {
         colorTextSubhead: '#BFC1C5',
         colorTextTertiary: '#74767A',
         colorTextLinkVisited: '#528FDF',
-        colorTextContrast: '#FFFFFF',
+        colorTextContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorTextContrastThemed: '#2C2D2E',
-        colorLinkContrast: '#FFFFFF',
+        colorLinkContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorTextPositive: '#0DC268',
         // Icons
         colorIconAccent: '#3C82FD',
-        colorIconAccentThemed: '#FFFFFF',
+        colorIconAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorIconNegative: '#ED0A34',
         colorIconPrimary: '#D9DADD',
         colorIconPrimaryInvariably: '#2C2D2E',
@@ -205,14 +237,26 @@ exports.darkColors = {
         colorIconSecondaryAlpha: 'rgba(245, 246, 255, 0.6)',
         colorIconTertiary: '#83848A',
         colorIconTertiaryAlpha: 'rgba(245, 246, 255, 0.5)',
-        colorIconContrast: '#FFFFFF',
+        colorIconContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorIconContrastThemed: '#2C2D2E',
         colorIconPositive: '#0DC268',
         colorIconContrastSecondary: '#F2F3F5',
         // Stroke
         colorStrokeAccent: '#3C82FD',
-        colorStrokeAccentThemed: '#FFFFFF',
-        colorStrokeContrast: '#FFFFFF',
+        colorStrokeAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
+        colorStrokeContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorStrokeNegative: '#ED0A34',
         colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.16)',

package/themeDescriptions/base/vk.js

@@ -159,7 +159,11 @@ exports.darkColors = {
     colors: {
         // Background
         colorBackgroundAccent: '#529EF4',
-        colorBackgroundAccentThemed: '#FFFFFF',
+        colorBackgroundAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorBackgroundAccentTint: '#5a9eff',
         colorBackgroundAccentAlternative: '#529EF4',
         colorBackground: '#0A0A0A',
@@ -176,7 +180,11 @@ exports.darkColors = {
             hover: 'rgba(255, 255, 255, 0.07)',
             active: 'rgba(255, 255, 255, 0.11)',
         },
-        colorBackgroundContrast: '#FFFFFF',
+        colorBackgroundContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorBackgroundContrastSecondaryAlpha: {
             normal: 'rgba(255, 255, 255, 0.2)',
             hover: 'rgba(255, 255, 255, 0.24)',
@@ -184,7 +192,11 @@ exports.darkColors = {
         },
         colorBackgroundContrastInverse: '#2d2d2e',
         colorBackgroundModal: '#2D2D2E',
-        colorBackgroundModalInverse: '#ffffff',
+        colorBackgroundModalInverse: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorBackgroundWarning: '#857250',
         colorBackgroundPositive: '#4BB34B',
         colorBackgroundNegative: '#FF5C5C',
@@ -194,24 +206,44 @@ exports.darkColors = {
         colorHeaderBackground: '#19191A',
         // Text
         colorTextAccent: '#529EF4',
-        colorTextAccentThemed: '#FFFFFF',
+        colorTextAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorTextPrimary: '#E1E3E6',
         colorTextPrimaryInvariably: '#000000',
         colorTextSecondary: '#76787A',
         colorTextSubhead: '#969A9F',
         colorTextTertiary: '#636567',
-        colorTextContrast: '#FFFFFF',
+        colorTextContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorTextContrastThemed: '#000000',
         colorTextPositive: '#4BB34B',
         colorTextNegative: '#FF5C5C',
         colorTextLink: '#529EF4',
-        colorTextLinkThemed: '#FFFFFF',
+        colorTextLinkThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorTextLinkVisited: '#4986CC',
         colorTextMuted: '#E1E3E6',
-        colorLinkContrast: '#FFFFFF',
+        colorLinkContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         // Icons
         colorIconAccent: '#529EF4',
-        colorIconAccentThemed: '#FFFFFF',
+        colorIconAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorIconPrimary: '#E1E3E6',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#B0B1B6',
@@ -220,14 +252,22 @@ exports.darkColors = {
         colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.43)',
         colorIconTertiary: '#5D5F61',
         colorIconTertiaryAlpha: 'rgba(255, 255, 255, 0.3)',
-        colorIconContrast: '#FFFFFF',
+        colorIconContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorIconContrastThemed: '#000000',
         colorIconContrastSecondary: '#F2F3F5',
         colorIconPositive: '#4BB34B',
         colorIconNegative: '#FF5C5C',
         // Stroke
         colorStrokeAccent: '#529EF4',
-        colorStrokeAccentThemed: '#FFFFFF',
+        colorStrokeAccentThemed: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorSeparatorPrimary: '#363738',
         colorSeparatorPrimary2x: '#444546',
         colorSeparatorPrimary3x: '#505253',
@@ -235,7 +275,11 @@ exports.darkColors = {
         colorSeparatorSecondary: '#141415',
         colorStrokePositive: '#4BB34B',
         colorStrokeNegative: '#FF5C5C',
-        colorStrokeContrast: '#FFFFFF',
+        colorStrokeContrast: {
+            normal: '#FFFFFF',
+            hover: '#EBEDF0',
+            active: '#D7D8DB',
+        },
         colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
         // Palette

package/themes/calendarDark/cssVars/declarations/index.css

@@ -377,8 +377,8 @@
 	--vkui--color_background_accent--hover: #307BFC;
 	--vkui--color_background_accent--active: #3880FC;
 	--vkui--color_background_accent_themed: #FFFFFF;
-	--vkui--color_background_accent_themed--hover: #FFFFFF;
-	--vkui--color_background_accent_themed--active: #FFFFFF;
+	--vkui--color_background_accent_themed--hover: #EBEDF0;
+	--vkui--color_background_accent_themed--active: #D7D8DB;
 	--vkui--color_background_accent_alternative: #FF9E00;
 	--vkui--color_background_accent_alternative--hover: #FFA20A;
 	--vkui--color_background_accent_alternative--active: #FFA614;
@@ -395,8 +395,8 @@
 	--vkui--color_background--hover: #222223;
 	--vkui--color_background--active: #2B2B2C;
 	--vkui--color_background_contrast: #FFFFFF;
-	--vkui--color_background_contrast--hover: #FFFFFF;
-	--vkui--color_background_contrast--active: #FFFFFF;
+	--vkui--color_background_contrast--hover: #EBEDF0;
+	--vkui--color_background_contrast--active: #D7D8DB;
 	--vkui--color_background_contrast_secondary_alpha: rgba(255, 255, 255, 0.2);
 	--vkui--color_background_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.24);
 	--vkui--color_background_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.28);
@@ -427,9 +427,9 @@
 	--vkui--color_field_background: #232324;
 	--vkui--color_field_background--hover: #2C2C2D;
 	--vkui--color_field_background--active: #353536;
-	--vkui--color_background_modal_inverse: #ffffff;
-	--vkui--color_background_modal_inverse--hover: #FFFFFF;
-	--vkui--color_background_modal_inverse--active: #FFFFFF;
+	--vkui--color_background_modal_inverse: #FFFFFF;
+	--vkui--color_background_modal_inverse--hover: #EBEDF0;
+	--vkui--color_background_modal_inverse--active: #D7D8DB;
 	--vkui--color_background_contrast_inverse: #303030;
 	--vkui--color_background_contrast_inverse--hover: #383838;
 	--vkui--color_background_contrast_inverse--active: #414141;
@@ -440,8 +440,8 @@
 	--vkui--color_text_accent--hover: #4487FD;
 	--vkui--color_text_accent--active: #4C8CFD;
 	--vkui--color_text_accent_themed: #FFFFFF;
-	--vkui--color_text_accent_themed--hover: #FFFFFF;
-	--vkui--color_text_accent_themed--active: #FFFFFF;
+	--vkui--color_text_accent_themed--hover: #EBEDF0;
+	--vkui--color_text_accent_themed--active: #D7D8DB;
 	--vkui--color_text_negative: #ED0A34;
 	--vkui--color_text_negative--hover: #EE143C;
 	--vkui--color_text_negative--active: #EE1E44;
@@ -449,8 +449,8 @@
 	--vkui--color_text_link--hover: #5F9FFF;
 	--vkui--color_text_link--active: #65A3FF;
 	--vkui--color_text_link_themed: #FFFFFF;
-	--vkui--color_text_link_themed--hover: #FFFFFF;
-	--vkui--color_text_link_themed--active: #FFFFFF;
+	--vkui--color_text_link_themed--hover: #EBEDF0;
+	--vkui--color_text_link_themed--active: #D7D8DB;
 	--vkui--color_text_muted: #E7E8EA;
 	--vkui--color_text_muted--hover: #E8E9EB;
 	--vkui--color_text_muted--active: #E9EAEC;
@@ -473,14 +473,14 @@
 	--vkui--color_text_link_visited--hover: #5993E0;
 	--vkui--color_text_link_visited--active: #6098E2;
 	--vkui--color_text_contrast: #FFFFFF;
-	--vkui--color_text_contrast--hover: #FFFFFF;
-	--vkui--color_text_contrast--active: #FFFFFF;
+	--vkui--color_text_contrast--hover: #EBEDF0;
+	--vkui--color_text_contrast--active: #D7D8DB;
 	--vkui--color_text_contrast_themed: #2C2D2E;
 	--vkui--color_text_contrast_themed--hover: #343536;
 	--vkui--color_text_contrast_themed--active: #3D3E3F;
 	--vkui--color_link_contrast: #FFFFFF;
-	--vkui--color_link_contrast--hover: #FFFFFF;
-	--vkui--color_link_contrast--active: #FFFFFF;
+	--vkui--color_link_contrast--hover: #EBEDF0;
+	--vkui--color_link_contrast--active: #D7D8DB;
 	--vkui--color_text_positive: #0DC268;
 	--vkui--color_text_positive--hover: #17C46E;
 	--vkui--color_text_positive--active: #20C774;
@@ -488,8 +488,8 @@
 	--vkui--color_icon_accent--hover: #4487FD;
 	--vkui--color_icon_accent--active: #4C8CFD;
 	--vkui--color_icon_accent_themed: #FFFFFF;
-	--vkui--color_icon_accent_themed--hover: #FFFFFF;
-	--vkui--color_icon_accent_themed--active: #FFFFFF;
+	--vkui--color_icon_accent_themed--hover: #EBEDF0;
+	--vkui--color_icon_accent_themed--active: #D7D8DB;
 	--vkui--color_icon_negative: #ED0A34;
 	--vkui--color_icon_negative--hover: #EE143C;
 	--vkui--color_icon_negative--active: #EE1E44;
@@ -518,8 +518,8 @@
 	--vkui--color_icon_tertiary_alpha--hover: rgba(245, 246, 255, 0.54);
 	--vkui--color_icon_tertiary_alpha--active: rgba(245, 246, 255, 0.58);
 	--vkui--color_icon_contrast: #FFFFFF;
-	--vkui--color_icon_contrast--hover: #FFFFFF;
-	--vkui--color_icon_contrast--active: #FFFFFF;
+	--vkui--color_icon_contrast--hover: #EBEDF0;
+	--vkui--color_icon_contrast--active: #D7D8DB;
 	--vkui--color_icon_contrast_themed: #2C2D2E;
 	--vkui--color_icon_contrast_themed--hover: #343536;
 	--vkui--color_icon_contrast_themed--active: #3D3E3F;
@@ -533,11 +533,11 @@
 	--vkui--color_stroke_accent--hover: #4487FD;
 	--vkui--color_stroke_accent--active: #4C8CFD;
 	--vkui--color_stroke_accent_themed: #FFFFFF;
-	--vkui--color_stroke_accent_themed--hover: #FFFFFF;
-	--vkui--color_stroke_accent_themed--active: #FFFFFF;
+	--vkui--color_stroke_accent_themed--hover: #EBEDF0;
+	--vkui--color_stroke_accent_themed--active: #D7D8DB;
 	--vkui--color_stroke_contrast: #FFFFFF;
-	--vkui--color_stroke_contrast--hover: #FFFFFF;
-	--vkui--color_stroke_contrast--active: #FFFFFF;
+	--vkui--color_stroke_contrast--hover: #EBEDF0;
+	--vkui--color_stroke_contrast--active: #D7D8DB;
 	--vkui--color_stroke_negative: #ED0A34;
 	--vkui--color_stroke_negative--hover: #EE143C;
 	--vkui--color_stroke_negative--active: #EE1E44;

package/themes/calendarDark/cssVars/declarations/noSizes.css

@@ -30,8 +30,8 @@
 	--vkui--color_background_accent--hover: #307BFC;
 	--vkui--color_background_accent--active: #3880FC;
 	--vkui--color_background_accent_themed: #FFFFFF;
-	--vkui--color_background_accent_themed--hover: #FFFFFF;
-	--vkui--color_background_accent_themed--active: #FFFFFF;
+	--vkui--color_background_accent_themed--hover: #EBEDF0;
+	--vkui--color_background_accent_themed--active: #D7D8DB;
 	--vkui--color_background_accent_alternative: #FF9E00;
 	--vkui--color_background_accent_alternative--hover: #FFA20A;
 	--vkui--color_background_accent_alternative--active: #FFA614;
@@ -48,8 +48,8 @@
 	--vkui--color_background--hover: #222223;
 	--vkui--color_background--active: #2B2B2C;
 	--vkui--color_background_contrast: #FFFFFF;
-	--vkui--color_background_contrast--hover: #FFFFFF;
-	--vkui--color_background_contrast--active: #FFFFFF;
+	--vkui--color_background_contrast--hover: #EBEDF0;
+	--vkui--color_background_contrast--active: #D7D8DB;
 	--vkui--color_background_contrast_secondary_alpha: rgba(255, 255, 255, 0.2);
 	--vkui--color_background_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.24);
 	--vkui--color_background_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.28);
@@ -80,9 +80,9 @@
 	--vkui--color_field_background: #232324;
 	--vkui--color_field_background--hover: #2C2C2D;
 	--vkui--color_field_background--active: #353536;
-	--vkui--color_background_modal_inverse: #ffffff;
-	--vkui--color_background_modal_inverse--hover: #FFFFFF;
-	--vkui--color_background_modal_inverse--active: #FFFFFF;
+	--vkui--color_background_modal_inverse: #FFFFFF;
+	--vkui--color_background_modal_inverse--hover: #EBEDF0;
+	--vkui--color_background_modal_inverse--active: #D7D8DB;
 	--vkui--color_background_contrast_inverse: #303030;
 	--vkui--color_background_contrast_inverse--hover: #383838;
 	--vkui--color_background_contrast_inverse--active: #414141;
@@ -93,8 +93,8 @@
 	--vkui--color_text_accent--hover: #4487FD;
 	--vkui--color_text_accent--active: #4C8CFD;
 	--vkui--color_text_accent_themed: #FFFFFF;
-	--vkui--color_text_accent_themed--hover: #FFFFFF;
-	--vkui--color_text_accent_themed--active: #FFFFFF;
+	--vkui--color_text_accent_themed--hover: #EBEDF0;
+	--vkui--color_text_accent_themed--active: #D7D8DB;
 	--vkui--color_text_negative: #ED0A34;
 	--vkui--color_text_negative--hover: #EE143C;
 	--vkui--color_text_negative--active: #EE1E44;
@@ -102,8 +102,8 @@
 	--vkui--color_text_link--hover: #5F9FFF;
 	--vkui--color_text_link--active: #65A3FF;
 	--vkui--color_text_link_themed: #FFFFFF;
-	--vkui--color_text_link_themed--hover: #FFFFFF;
-	--vkui--color_text_link_themed--active: #FFFFFF;
+	--vkui--color_text_link_themed--hover: #EBEDF0;
+	--vkui--color_text_link_themed--active: #D7D8DB;
 	--vkui--color_text_muted: #E7E8EA;
 	--vkui--color_text_muted--hover: #E8E9EB;
 	--vkui--color_text_muted--active: #E9EAEC;
@@ -126,14 +126,14 @@
 	--vkui--color_text_link_visited--hover: #5993E0;
 	--vkui--color_text_link_visited--active: #6098E2;
 	--vkui--color_text_contrast: #FFFFFF;
-	--vkui--color_text_contrast--hover: #FFFFFF;
-	--vkui--color_text_contrast--active: #FFFFFF;
+	--vkui--color_text_contrast--hover: #EBEDF0;
+	--vkui--color_text_contrast--active: #D7D8DB;
 	--vkui--color_text_contrast_themed: #2C2D2E;
 	--vkui--color_text_contrast_themed--hover: #343536;
 	--vkui--color_text_contrast_themed--active: #3D3E3F;
 	--vkui--color_link_contrast: #FFFFFF;
-	--vkui--color_link_contrast--hover: #FFFFFF;
-	--vkui--color_link_contrast--active: #FFFFFF;
+	--vkui--color_link_contrast--hover: #EBEDF0;
+	--vkui--color_link_contrast--active: #D7D8DB;
 	--vkui--color_text_positive: #0DC268;
 	--vkui--color_text_positive--hover: #17C46E;
 	--vkui--color_text_positive--active: #20C774;
@@ -141,8 +141,8 @@
 	--vkui--color_icon_accent--hover: #4487FD;
 	--vkui--color_icon_accent--active: #4C8CFD;
 	--vkui--color_icon_accent_themed: #FFFFFF;
-	--vkui--color_icon_accent_themed--hover: #FFFFFF;
-	--vkui--color_icon_accent_themed--active: #FFFFFF;
+	--vkui--color_icon_accent_themed--hover: #EBEDF0;
+	--vkui--color_icon_accent_themed--active: #D7D8DB;
 	--vkui--color_icon_negative: #ED0A34;
 	--vkui--color_icon_negative--hover: #EE143C;
 	--vkui--color_icon_negative--active: #EE1E44;
@@ -171,8 +171,8 @@
 	--vkui--color_icon_tertiary_alpha--hover: rgba(245, 246, 255, 0.54);
 	--vkui--color_icon_tertiary_alpha--active: rgba(245, 246, 255, 0.58);
 	--vkui--color_icon_contrast: #FFFFFF;
-	--vkui--color_icon_contrast--hover: #FFFFFF;
-	--vkui--color_icon_contrast--active: #FFFFFF;
+	--vkui--color_icon_contrast--hover: #EBEDF0;
+	--vkui--color_icon_contrast--active: #D7D8DB;
 	--vkui--color_icon_contrast_themed: #2C2D2E;
 	--vkui--color_icon_contrast_themed--hover: #343536;
 	--vkui--color_icon_contrast_themed--active: #3D3E3F;
@@ -186,11 +186,11 @@
 	--vkui--color_stroke_accent--hover: #4487FD;
 	--vkui--color_stroke_accent--active: #4C8CFD;
 	--vkui--color_stroke_accent_themed: #FFFFFF;
-	--vkui--color_stroke_accent_themed--hover: #FFFFFF;
-	--vkui--color_stroke_accent_themed--active: #FFFFFF;
+	--vkui--color_stroke_accent_themed--hover: #EBEDF0;
+	--vkui--color_stroke_accent_themed--active: #D7D8DB;
 	--vkui--color_stroke_contrast: #FFFFFF;
-	--vkui--color_stroke_contrast--hover: #FFFFFF;
-	--vkui--color_stroke_contrast--active: #FFFFFF;
+	--vkui--color_stroke_contrast--hover: #EBEDF0;
+	--vkui--color_stroke_contrast--active: #D7D8DB;
 	--vkui--color_stroke_negative: #ED0A34;
 	--vkui--color_stroke_negative--hover: #EE143C;
 	--vkui--color_stroke_negative--active: #EE1E44;

package/themes/calendarDark/cssVars/declarations/onlyColors.css

@@ -3,8 +3,8 @@
 	--vkui--color_background_accent--hover: #307BFC;
 	--vkui--color_background_accent--active: #3880FC;
 	--vkui--color_background_accent_themed: #FFFFFF;
-	--vkui--color_background_accent_themed--hover: #FFFFFF;
-	--vkui--color_background_accent_themed--active: #FFFFFF;
+	--vkui--color_background_accent_themed--hover: #EBEDF0;
+	--vkui--color_background_accent_themed--active: #D7D8DB;
 	--vkui--color_background_accent_alternative: #FF9E00;
 	--vkui--color_background_accent_alternative--hover: #FFA20A;
 	--vkui--color_background_accent_alternative--active: #FFA614;
@@ -21,8 +21,8 @@
 	--vkui--color_background--hover: #222223;
 	--vkui--color_background--active: #2B2B2C;
 	--vkui--color_background_contrast: #FFFFFF;
-	--vkui--color_background_contrast--hover: #FFFFFF;
-	--vkui--color_background_contrast--active: #FFFFFF;
+	--vkui--color_background_contrast--hover: #EBEDF0;
+	--vkui--color_background_contrast--active: #D7D8DB;
 	--vkui--color_background_contrast_secondary_alpha: rgba(255, 255, 255, 0.2);
 	--vkui--color_background_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.24);
 	--vkui--color_background_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.28);
@@ -53,9 +53,9 @@
 	--vkui--color_field_background: #232324;
 	--vkui--color_field_background--hover: #2C2C2D;
 	--vkui--color_field_background--active: #353536;
-	--vkui--color_background_modal_inverse: #ffffff;
-	--vkui--color_background_modal_inverse--hover: #FFFFFF;
-	--vkui--color_background_modal_inverse--active: #FFFFFF;
+	--vkui--color_background_modal_inverse: #FFFFFF;
+	--vkui--color_background_modal_inverse--hover: #EBEDF0;
+	--vkui--color_background_modal_inverse--active: #D7D8DB;
 	--vkui--color_background_contrast_inverse: #303030;
 	--vkui--color_background_contrast_inverse--hover: #383838;
 	--vkui--color_background_contrast_inverse--active: #414141;
@@ -66,8 +66,8 @@
 	--vkui--color_text_accent--hover: #4487FD;
 	--vkui--color_text_accent--active: #4C8CFD;
 	--vkui--color_text_accent_themed: #FFFFFF;
-	--vkui--color_text_accent_themed--hover: #FFFFFF;
-	--vkui--color_text_accent_themed--active: #FFFFFF;
+	--vkui--color_text_accent_themed--hover: #EBEDF0;
+	--vkui--color_text_accent_themed--active: #D7D8DB;
 	--vkui--color_text_negative: #ED0A34;
 	--vkui--color_text_negative--hover: #EE143C;
 	--vkui--color_text_negative--active: #EE1E44;
@@ -75,8 +75,8 @@
 	--vkui--color_text_link--hover: #5F9FFF;
 	--vkui--color_text_link--active: #65A3FF;
 	--vkui--color_text_link_themed: #FFFFFF;
-	--vkui--color_text_link_themed--hover: #FFFFFF;
-	--vkui--color_text_link_themed--active: #FFFFFF;
+	--vkui--color_text_link_themed--hover: #EBEDF0;
+	--vkui--color_text_link_themed--active: #D7D8DB;
 	--vkui--color_text_muted: #E7E8EA;
 	--vkui--color_text_muted--hover: #E8E9EB;
 	--vkui--color_text_muted--active: #E9EAEC;
@@ -99,14 +99,14 @@
 	--vkui--color_text_link_visited--hover: #5993E0;
 	--vkui--color_text_link_visited--active: #6098E2;
 	--vkui--color_text_contrast: #FFFFFF;
-	--vkui--color_text_contrast--hover: #FFFFFF;
-	--vkui--color_text_contrast--active: #FFFFFF;
+	--vkui--color_text_contrast--hover: #EBEDF0;
+	--vkui--color_text_contrast--active: #D7D8DB;
 	--vkui--color_text_contrast_themed: #2C2D2E;
 	--vkui--color_text_contrast_themed--hover: #343536;
 	--vkui--color_text_contrast_themed--active: #3D3E3F;
 	--vkui--color_link_contrast: #FFFFFF;
-	--vkui--color_link_contrast--hover: #FFFFFF;
-	--vkui--color_link_contrast--active: #FFFFFF;
+	--vkui--color_link_contrast--hover: #EBEDF0;
+	--vkui--color_link_contrast--active: #D7D8DB;
 	--vkui--color_text_positive: #0DC268;
 	--vkui--color_text_positive--hover: #17C46E;
 	--vkui--color_text_positive--active: #20C774;
@@ -114,8 +114,8 @@
 	--vkui--color_icon_accent--hover: #4487FD;
 	--vkui--color_icon_accent--active: #4C8CFD;
 	--vkui--color_icon_accent_themed: #FFFFFF;
-	--vkui--color_icon_accent_themed--hover: #FFFFFF;
-	--vkui--color_icon_accent_themed--active: #FFFFFF;
+	--vkui--color_icon_accent_themed--hover: #EBEDF0;
+	--vkui--color_icon_accent_themed--active: #D7D8DB;
 	--vkui--color_icon_negative: #ED0A34;
 	--vkui--color_icon_negative--hover: #EE143C;
 	--vkui--color_icon_negative--active: #EE1E44;
@@ -144,8 +144,8 @@
 	--vkui--color_icon_tertiary_alpha--hover: rgba(245, 246, 255, 0.54);
 	--vkui--color_icon_tertiary_alpha--active: rgba(245, 246, 255, 0.58);
 	--vkui--color_icon_contrast: #FFFFFF;
-	--vkui--color_icon_contrast--hover: #FFFFFF;
-	--vkui--color_icon_contrast--active: #FFFFFF;
+	--vkui--color_icon_contrast--hover: #EBEDF0;
+	--vkui--color_icon_contrast--active: #D7D8DB;
 	--vkui--color_icon_contrast_themed: #2C2D2E;
 	--vkui--color_icon_contrast_themed--hover: #343536;
 	--vkui--color_icon_contrast_themed--active: #3D3E3F;
@@ -159,11 +159,11 @@
 	--vkui--color_stroke_accent--hover: #4487FD;
 	--vkui--color_stroke_accent--active: #4C8CFD;
 	--vkui--color_stroke_accent_themed: #FFFFFF;
-	--vkui--color_stroke_accent_themed--hover: #FFFFFF;
-	--vkui--color_stroke_accent_themed--active: #FFFFFF;
+	--vkui--color_stroke_accent_themed--hover: #EBEDF0;
+	--vkui--color_stroke_accent_themed--active: #D7D8DB;
 	--vkui--color_stroke_contrast: #FFFFFF;
-	--vkui--color_stroke_contrast--hover: #FFFFFF;
-	--vkui--color_stroke_contrast--active: #FFFFFF;
+	--vkui--color_stroke_contrast--hover: #EBEDF0;
+	--vkui--color_stroke_contrast--active: #D7D8DB;
 	--vkui--color_stroke_negative: #ED0A34;
 	--vkui--color_stroke_negative--hover: #EE143C;
 	--vkui--color_stroke_negative--active: #EE1E44;