@vkontakte/vkui-tokens 4.88.0 → 4.89.0

package/README.md

@@ -1,7 +1,7 @@
 <img src="assets/vkui_logo.png" alt="vkui logo" height="52"/>
 <img src="assets/logo.svg" alt="vkui logo" height="52"/>
 
-[![Tests](https://github.com/VKCOM/vkui-tokens/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/VKCOM/vkui-tokens/actions/workflows/test.yml)
+[![Checks](https://github.com/VKCOM/vkui-tokens/actions/workflo../../utils/common_checks.yml/badge.svg?branch=master)](https://github.com/VKCOM/vkui-tokens/actions/workflo../../utils/common_checks.yml)
 [![Npm](https://img.shields.io/npm/v/@vkontakte/vkui-tokens)](https://www.npmjs.com/package/@vkontakte/vkui-tokens)
 [![GitHub Repo stars](https://img.shields.io/github/stars/VKCOM/vkui-tokens?label=GitHub%20Repo%20Stars&style=social)](https://github.com/VKCOM/vkui-tokens)
 

package/interfaces/themes/legoIOS/index.d.ts

@@ -19,6 +19,10 @@ export interface LocalLegoIOSColorsDescriptionStruct {
     colorIconContrastSecondaryAlpha: ColorDescription;
     colorTextTertiaryAlpha: ColorDescription;
     colorAccentMint: ColorDescription;
+    colorTextLinkInPrimary: ColorDescription;
+    colorTextLinkInSecondary: ColorDescription;
+    colorTextLinkInContrast: ColorDescription;
+    colorTextLinkInContrastSecondaryAlpha: ColorDescription;
 }
 type LegoIOSLocalColors = {
     [key in keyof LocalLegoIOSColorsDescriptionStruct]: ColorWithStates;

package/interfaces/themes/legoSimpleAndroid/index.d.ts

@@ -0,0 +1,5 @@
+// Реэкспорт интерфейсов, так как набор переменных должен совпадать
+import type { ThemeLegoAndroid, ThemeLegoAndroidCssVars, ThemeLegoAndroidDescription } from "../legoAndroid/index.ts";
+export type ThemeLegoSimpleAndroid = ThemeLegoAndroid;
+export type ThemeLegoSimpleAndroidDescription = ThemeLegoAndroidDescription;
+export type ThemeLegoSimpleAndroidCssVars = ThemeLegoAndroidCssVars;

package/interfaces/themes/legoSimpleAndroid/index.js

@@ -0,0 +1 @@
+export{};

package/interfaces/themes/legoSimpleAndroidDark/index.d.ts

@@ -0,0 +1,2 @@
+// Реэкспорт интерфейсов, так как набор переменных в тёмной теме такой же
+export type { ThemeLegoSimpleAndroid as ThemeLegoSimpleAndroidDark, ThemeLegoSimpleAndroidCssVars as ThemeLegoSimpleAndroidDarkCssVars, ThemeLegoSimpleAndroidDescription as ThemeLegoSimpleAndroidDarkDescription } from "../legoSimpleAndroid/index.ts";

package/interfaces/themes/legoSimpleAndroidDark/index.js

@@ -0,0 +1 @@
+export{};

package/interfaces/themes/vkontakteAndroid/index.d.ts

@@ -143,9 +143,15 @@ export interface VkontakteAndroidGradients {
 }
 export interface LocalVkontakteAndroidColorsDescriptionStruct {
     colorBackgroundInverse: ColorDescription;
-    colorStrokeContrastSecondaryAlpha: ColorDescription;
     colorTextTertiaryAlpha: ColorDescription;
+    colorTextContrastSecondaryAlpha: ColorDescription;
+    colorIconContrastSecondaryAlpha: ColorDescription;
+    colorStrokeContrastSecondaryAlpha: ColorDescription;
     colorAccentMint: ColorDescription;
+    colorTextLinkInPrimary: ColorDescription;
+    colorTextLinkInSecondary: ColorDescription;
+    colorTextLinkInContrast: ColorDescription;
+    colorTextLinkInContrastSecondaryAlpha: ColorDescription;
     vkontakteColorSnippetBorderAlpha: ColorDescription;
     vkontakteColorSnippetBackground: ColorDescription;
     vkontakteColorModalCardBorderAlpha: ColorDescription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.88.0",
+  "version": "4.89.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "type": "module",
   "license": "MIT",
@@ -33,22 +33,22 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.6",
-    "@rspack/cli": "^2.1.7",
-    "@rspack/core": "^2.1.7",
+    "@biomejs/biome": "2.5.7",
+    "@rspack/cli": "^2.1.8",
+    "@rspack/core": "^2.1.8",
     "@svgr/webpack": "^8.1.0",
     "@swc/cli": "^0.8.1",
-    "@swc/core": "^1.15.46",
+    "@swc/core": "^1.15.47",
     "@swc/plugin-transform-imports": "^12.15.0",
     "@types/color": "^4.2.1",
     "@types/common-tags": "^1.8.4",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.24",
+    "@types/lodash": "^4.17.25",
     "@types/node": "^24.1.0",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
-    "@vkontakte/icons": "^3.64.1",
+    "@vkontakte/icons": "^3.65.0",
     "@vkontakte/vkjs": "^2.0.2",
     "@vkontakte/vkui": "^8.3.1",
     "clsx": "^2.1.1",
@@ -59,7 +59,7 @@
     "highlight.js": "^11.11.1",
     "html-loader": "^5.1.0",
     "husky": "^9.1.7",
-    "lint-staged": "^17.2.0",
+    "lint-staged": "^17.3.0",
     "lodash": "^4.18.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

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

@@ -136,19 +136,14 @@
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;
 	--vkui--size_cell_height--regular: 52px;
-	--vkui--size_cell_height--compact: 48px;
 	--vkui--size_field_height--regular: 44px;
 	--vkui--size_field_height--compact: 36px;
 	--vkui--size_search_height--regular: 36px;
 	--vkui--size_search_height--compact: 32px;
 	--vkui--size_button_extra_small_height--regular: 28px;
-	--vkui--size_button_extra_small_height--compact: 24px;
-	--vkui--size_button_small_height--regular: 36px;
-	--vkui--size_button_small_height--compact: 32px;
-	--vkui--size_button_medium_height--regular: 44px;
-	--vkui--size_button_medium_height--compact: 36px;
+	--vkui--size_button_small_height--regular: 28px;
+	--vkui--size_button_medium_height--regular: 38px;
 	--vkui--size_button_large_height--regular: 52px;
-	--vkui--size_button_large_height--compact: 44px;
 	--vkui--size_checkbox--regular: 16px;
 	--vkui--size_arrow--regular: 8px;
 	--vkui--size_arrow_promo--regular: 40px;
@@ -174,7 +169,6 @@
 	--vkui--size_card_border_radius--regular: 8px;
 	--vkui--size_cardgrid_padding_vertical--regular: 8px;
 	--vkui--size_base_padding_horizontal--regular: 16px;
-	--vkui--size_base_padding_horizontal--compact: 16px;
 	--vkui--size_base_padding_vertical--regular: 12px;
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
@@ -431,12 +425,12 @@
 	--vkui--color_text_negative: #f65460;
 	--vkui--color_text_negative--hover: #EC515F;
 	--vkui--color_text_negative--active: #E24F5D;
-	--vkui--color_text_link: #2e90ff;
-	--vkui--color_text_link--hover: #2C8BF7;
-	--vkui--color_text_link--active: #2A86EF;
-	--vkui--color_text_link_themed: #2e90ff;
-	--vkui--color_text_link_themed--hover: #2C8BF7;
-	--vkui--color_text_link_themed--active: #2A86EF;
+	--vkui--color_text_link: #2d81e0;
+	--vkui--color_text_link--hover: #2B7CD9;
+	--vkui--color_text_link--active: #2978D3;
+	--vkui--color_text_link_themed: #2d81e0;
+	--vkui--color_text_link_themed--hover: #2B7CD9;
+	--vkui--color_text_link_themed--active: #2978D3;
 	--vkui--color_text_link_tint: #71aaeb;
 	--vkui--color_text_link_tint--hover: #6CA4E4;
 	--vkui--color_text_link_tint--active: #689EDD;
@@ -653,15 +647,33 @@
 	--vkui--color_background_inverse: #262626;
 	--vkui--color_background_inverse--hover: #242527;
 	--vkui--color_background_inverse--active: #232428;
-	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1e;
-	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
-	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--color_text_tertiary_alpha: #3b3b3b66;
 	--vkui--color_text_tertiary_alpha--hover: rgba(59, 59, 59, 0.44);
 	--vkui--color_text_tertiary_alpha--active: rgba(59, 59, 59, 0.48);
+	--vkui--color_text_contrast_secondary_alpha: #ffffff7f;
+	--vkui--color_text_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_text_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_icon_contrast_secondary_alpha: #ffffff7f;
+	--vkui--color_icon_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_icon_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1e;
+	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
+	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--color_accent_mint: #a3fd79;
 	--vkui--color_accent_mint--hover: #9CF477;
 	--vkui--color_accent_mint--active: #96EA74;
+	--vkui--color_text_link_in_primary: #999999;
+	--vkui--color_text_link_in_primary--hover: #939495;
+	--vkui--color_text_link_in_primary--active: #8D8E92;
+	--vkui--color_text_link_in_secondary: #3b3b3b;
+	--vkui--color_text_link_in_secondary--hover: #39393B;
+	--vkui--color_text_link_in_secondary--active: #36383B;
+	--vkui--color_text_link_in_contrast: #ffffff7f;
+	--vkui--color_text_link_in_contrast--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_text_link_in_contrast--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_text_link_in_contrast_secondary_alpha: #ffffff;
+	--vkui--color_text_link_in_contrast_secondary_alpha--hover: #F5F5F7;
+	--vkui--color_text_link_in_contrast_secondary_alpha--active: #EBECEF;
 	--vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
 	--vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
 	--vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);

package/themes/legoAndroid/cssVars/declarations/noColors.css

@@ -136,19 +136,14 @@
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;
 	--vkui--size_cell_height--regular: 52px;
-	--vkui--size_cell_height--compact: 48px;
 	--vkui--size_field_height--regular: 44px;
 	--vkui--size_field_height--compact: 36px;
 	--vkui--size_search_height--regular: 36px;
 	--vkui--size_search_height--compact: 32px;
 	--vkui--size_button_extra_small_height--regular: 28px;
-	--vkui--size_button_extra_small_height--compact: 24px;
-	--vkui--size_button_small_height--regular: 36px;
-	--vkui--size_button_small_height--compact: 32px;
-	--vkui--size_button_medium_height--regular: 44px;
-	--vkui--size_button_medium_height--compact: 36px;
+	--vkui--size_button_small_height--regular: 28px;
+	--vkui--size_button_medium_height--regular: 38px;
 	--vkui--size_button_large_height--regular: 52px;
-	--vkui--size_button_large_height--compact: 44px;
 	--vkui--size_checkbox--regular: 16px;
 	--vkui--size_arrow--regular: 8px;
 	--vkui--size_arrow_promo--regular: 40px;
@@ -174,7 +169,6 @@
 	--vkui--size_card_border_radius--regular: 8px;
 	--vkui--size_cardgrid_padding_vertical--regular: 8px;
 	--vkui--size_base_padding_horizontal--regular: 16px;
-	--vkui--size_base_padding_horizontal--compact: 16px;
 	--vkui--size_base_padding_vertical--regular: 12px;
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;

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

@@ -206,12 +206,12 @@
 	--vkui--color_text_negative: #f65460;
 	--vkui--color_text_negative--hover: #EC515F;
 	--vkui--color_text_negative--active: #E24F5D;
-	--vkui--color_text_link: #2e90ff;
-	--vkui--color_text_link--hover: #2C8BF7;
-	--vkui--color_text_link--active: #2A86EF;
-	--vkui--color_text_link_themed: #2e90ff;
-	--vkui--color_text_link_themed--hover: #2C8BF7;
-	--vkui--color_text_link_themed--active: #2A86EF;
+	--vkui--color_text_link: #2d81e0;
+	--vkui--color_text_link--hover: #2B7CD9;
+	--vkui--color_text_link--active: #2978D3;
+	--vkui--color_text_link_themed: #2d81e0;
+	--vkui--color_text_link_themed--hover: #2B7CD9;
+	--vkui--color_text_link_themed--active: #2978D3;
 	--vkui--color_text_link_tint: #71aaeb;
 	--vkui--color_text_link_tint--hover: #6CA4E4;
 	--vkui--color_text_link_tint--active: #689EDD;
@@ -428,15 +428,33 @@
 	--vkui--color_background_inverse: #262626;
 	--vkui--color_background_inverse--hover: #242527;
 	--vkui--color_background_inverse--active: #232428;
-	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1e;
-	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
-	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--color_text_tertiary_alpha: #3b3b3b66;
 	--vkui--color_text_tertiary_alpha--hover: rgba(59, 59, 59, 0.44);
 	--vkui--color_text_tertiary_alpha--active: rgba(59, 59, 59, 0.48);
+	--vkui--color_text_contrast_secondary_alpha: #ffffff7f;
+	--vkui--color_text_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_text_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_icon_contrast_secondary_alpha: #ffffff7f;
+	--vkui--color_icon_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_icon_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1e;
+	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
+	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--color_accent_mint: #a3fd79;
 	--vkui--color_accent_mint--hover: #9CF477;
 	--vkui--color_accent_mint--active: #96EA74;
+	--vkui--color_text_link_in_primary: #999999;
+	--vkui--color_text_link_in_primary--hover: #939495;
+	--vkui--color_text_link_in_primary--active: #8D8E92;
+	--vkui--color_text_link_in_secondary: #3b3b3b;
+	--vkui--color_text_link_in_secondary--hover: #39393B;
+	--vkui--color_text_link_in_secondary--active: #36383B;
+	--vkui--color_text_link_in_contrast: #ffffff7f;
+	--vkui--color_text_link_in_contrast--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_text_link_in_contrast--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_text_link_in_contrast_secondary_alpha: #ffffff;
+	--vkui--color_text_link_in_contrast_secondary_alpha--hover: #F5F5F7;
+	--vkui--color_text_link_in_contrast_secondary_alpha--active: #EBECEF;
 	--vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
 	--vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
 	--vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);

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

@@ -119,12 +119,12 @@
 	--vkui--color_text_negative: #f65460;
 	--vkui--color_text_negative--hover: #EC515F;
 	--vkui--color_text_negative--active: #E24F5D;
-	--vkui--color_text_link: #2e90ff;
-	--vkui--color_text_link--hover: #2C8BF7;
-	--vkui--color_text_link--active: #2A86EF;
-	--vkui--color_text_link_themed: #2e90ff;
-	--vkui--color_text_link_themed--hover: #2C8BF7;
-	--vkui--color_text_link_themed--active: #2A86EF;
+	--vkui--color_text_link: #2d81e0;
+	--vkui--color_text_link--hover: #2B7CD9;
+	--vkui--color_text_link--active: #2978D3;
+	--vkui--color_text_link_themed: #2d81e0;
+	--vkui--color_text_link_themed--hover: #2B7CD9;
+	--vkui--color_text_link_themed--active: #2978D3;
 	--vkui--color_text_link_tint: #71aaeb;
 	--vkui--color_text_link_tint--hover: #6CA4E4;
 	--vkui--color_text_link_tint--active: #689EDD;
@@ -341,15 +341,33 @@
 	--vkui--color_background_inverse: #262626;
 	--vkui--color_background_inverse--hover: #242527;
 	--vkui--color_background_inverse--active: #232428;
-	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1e;
-	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
-	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--color_text_tertiary_alpha: #3b3b3b66;
 	--vkui--color_text_tertiary_alpha--hover: rgba(59, 59, 59, 0.44);
 	--vkui--color_text_tertiary_alpha--active: rgba(59, 59, 59, 0.48);
+	--vkui--color_text_contrast_secondary_alpha: #ffffff7f;
+	--vkui--color_text_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_text_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_icon_contrast_secondary_alpha: #ffffff7f;
+	--vkui--color_icon_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_icon_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1e;
+	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
+	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--color_accent_mint: #a3fd79;
 	--vkui--color_accent_mint--hover: #9CF477;
 	--vkui--color_accent_mint--active: #96EA74;
+	--vkui--color_text_link_in_primary: #999999;
+	--vkui--color_text_link_in_primary--hover: #939495;
+	--vkui--color_text_link_in_primary--active: #8D8E92;
+	--vkui--color_text_link_in_secondary: #3b3b3b;
+	--vkui--color_text_link_in_secondary--hover: #39393B;
+	--vkui--color_text_link_in_secondary--active: #36383B;
+	--vkui--color_text_link_in_contrast: #ffffff7f;
+	--vkui--color_text_link_in_contrast--hover: rgba(255, 255, 255, 0.54);
+	--vkui--color_text_link_in_contrast--active: rgba(255, 255, 255, 0.58);
+	--vkui--color_text_link_in_contrast_secondary_alpha: #ffffff;
+	--vkui--color_text_link_in_contrast_secondary_alpha--hover: #F5F5F7;
+	--vkui--color_text_link_in_contrast_secondary_alpha--active: #EBECEF;
 	--vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
 	--vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
 	--vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);