@vkontakte/vkui-tokens 4.87.0 → 4.88.0

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

@@ -4,6 +4,7 @@ import type { Radii } from "../../general/radii/index.ts";
 import type { Adaptive } from "../../general/tools/index.ts";
 import type { Font } from "../../general/typography/index.ts";
 import type { ThemeVkBase, ThemeVkBaseDescription } from "../vkBase/index.ts";
+import type { Property } from "csstype";
 export interface LocalLegoIOSFonts {
     fontLabel1: Adaptive<Font>;
     fontLabel2: Adaptive<Font>;
@@ -14,14 +15,25 @@ export interface LocalLegoIOSFonts {
 export interface LocalLegoIOSColorsDescriptionStruct {
     colorBackgroundInverse: ColorDescription;
     colorStrokeContrastSecondaryAlpha: ColorDescription;
+    colorTextContrastSecondaryAlpha: ColorDescription;
+    colorIconContrastSecondaryAlpha: ColorDescription;
     colorTextTertiaryAlpha: ColorDescription;
+    colorAccentMint: ColorDescription;
 }
 type LegoIOSLocalColors = {
     [key in keyof LocalLegoIOSColorsDescriptionStruct]: ColorWithStates;
 };
-export interface ThemeLegoIOS extends ThemeVkBase, LocalLegoIOSFonts, LegoIOSLocalColors, Radii {
+type LegoIOSLocalEasings = {
+    animationEasingLinear: Property.TransitionTimingFunction;
+    animationEasingInSmooth: Property.TransitionTimingFunction;
+    animationEasingOutSmooth: Property.TransitionTimingFunction;
+    animationEasingInOutSmooth: Property.TransitionTimingFunction;
+    animationEasingOutSharp: Property.TransitionTimingFunction;
+    animationEasingInOutSharp: Property.TransitionTimingFunction;
+};
+export interface ThemeLegoIOS extends ThemeVkBase, LocalLegoIOSFonts, LegoIOSLocalColors, Radii, LegoIOSLocalEasings {
 }
-export interface ThemeLegoIOSDescription extends ThemeVkBaseDescription, LocalLegoIOSFonts, Radii {
+export interface ThemeLegoIOSDescription extends ThemeVkBaseDescription, LocalLegoIOSFonts, Radii, LegoIOSLocalEasings {
     colors: ColorsDescriptionStruct & LocalLegoIOSColorsDescriptionStruct;
 }
 export interface ThemeLegoIOSCssVars extends ThemeCssVars<ThemeLegoIOS> {

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

@@ -145,6 +145,7 @@ export interface LocalVkontakteAndroidColorsDescriptionStruct {
     colorBackgroundInverse: ColorDescription;
     colorStrokeContrastSecondaryAlpha: ColorDescription;
     colorTextTertiaryAlpha: ColorDescription;
+    colorAccentMint: ColorDescription;
     vkontakteColorSnippetBorderAlpha: ColorDescription;
     vkontakteColorSnippetBackground: ColorDescription;
     vkontakteColorModalCardBorderAlpha: ColorDescription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.87.0",
+  "version": "4.88.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "type": "module",
   "license": "MIT",

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

@@ -8,8 +8,8 @@
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
 	--vkui--blur_s: 8px;
 	--vkui--blur_m: 16px;
-	--vkui--blur_l: 48px;
-	--vkui--blur_x_l: 96px;
+	--vkui--blur_l: 32px;
+	--vkui--blur_x_l: 64px;
 	--vkui--font_family_fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -239,6 +239,12 @@
 	--vkui--radius_x_l: 20px;
 	--vkui--radius_2x_l: 24px;
 	--vkui--radius_3x_l: 32px;
+	--vkui--animation_easing_linear: cubic-bezier(0, 0, 1, 1);
+	--vkui--animation_easing_in_smooth: cubic-bezier(1, 0, 0.7, 1);
+	--vkui--animation_easing_out_smooth: cubic-bezier(0.3, 0, 0, 1);
+	--vkui--animation_easing_in_out_smooth: cubic-bezier(0.3, 0, 0.7, 1);
+	--vkui--animation_easing_out_sharp: cubic-bezier(0.2, 0, 0, 1);
+	--vkui--animation_easing_in_out_sharp: cubic-bezier(0.7, 0, 0.3, 1);
 	--vkui--font_label1--font_size--regular: 19px;
 	--vkui--font_label1--line_height--regular: 20px;
 	--vkui--font_label1--font_weight--regular: 670;
@@ -332,9 +338,9 @@
 	--vkui--color_background_content_inverse: #19191A;
 	--vkui--color_background_content_inverse--hover: #18191B;
 	--vkui--color_background_content_inverse--active: #17181D;
-	--vkui--color_background_secondary: #f7f7f7;
-	--vkui--color_background_secondary--hover: #EDEEF0;
-	--vkui--color_background_secondary--active: #E3E5E8;
+	--vkui--color_background_secondary: #f2f2f2;
+	--vkui--color_background_secondary--hover: #E8E9EB;
+	--vkui--color_background_secondary--active: #DFE0E4;
 	--vkui--color_background_secondary_alpha: rgba(0, 0, 0, 0.04);
 	--vkui--color_background_secondary_alpha--hover: rgba(0, 0, 0, 0.08);
 	--vkui--color_background_secondary_alpha--active: rgba(0, 0, 0, 0.12);
@@ -536,24 +542,24 @@
 	--vkui--color_accent_gray: #a3adb8;
 	--vkui--color_accent_gray--hover: #9CA7B3;
 	--vkui--color_accent_gray--active: #96A0AE;
-	--vkui--color_accent_red: #ff3347;
-	--vkui--color_accent_red--hover: #F53247;
-	--vkui--color_accent_red--active: #EB3046;
+	--vkui--color_accent_red: #ff5773;
+	--vkui--color_accent_red--hover: #F55471;
+	--vkui--color_accent_red--active: #EB516F;
 	--vkui--color_accent_orange_fire: #f05c44;
 	--vkui--color_accent_orange_fire--hover: #E65944;
 	--vkui--color_accent_orange_fire--active: #DD5643;
-	--vkui--color_accent_orange: #ffa000;
-	--vkui--color_accent_orange--hover: #F59A02;
-	--vkui--color_accent_orange--active: #EB9405;
+	--vkui--color_accent_orange: #ff913d;
+	--vkui--color_accent_orange--hover: #F58C3D;
+	--vkui--color_accent_orange--active: #EB873D;
 	--vkui--color_accent_orange_peach: #f9b54f;
 	--vkui--color_accent_orange_peach--hover: #EFAE4E;
 	--vkui--color_accent_orange_peach--active: #E5A84E;
 	--vkui--color_accent_lime: #aff70d;
 	--vkui--color_accent_lime--hover: #A8EE0F;
 	--vkui--color_accent_lime--active: #A1E511;
-	--vkui--color_accent_green: #34c759;
-	--vkui--color_accent_green--hover: #32C058;
-	--vkui--color_accent_green--active: #30B857;
+	--vkui--color_accent_green: #42d347;
+	--vkui--color_accent_green--hover: #3FCB47;
+	--vkui--color_accent_green--active: #3DC346;
 	--vkui--color_accent_cyan: #13ffd0;
 	--vkui--color_accent_cyan--hover: #12F5CA;
 	--vkui--color_accent_cyan--active: #11ECC4;
@@ -566,12 +572,12 @@
 	--vkui--color_accent_violet: #792ec0;
 	--vkui--color_accent_violet--hover: #742DBB;
 	--vkui--color_accent_violet--active: #6F2CB6;
-	--vkui--color_accent_raspberry_pink: #e03fab;
-	--vkui--color_accent_raspberry_pink--hover: #D73DA7;
-	--vkui--color_accent_raspberry_pink--active: #CE3BA2;
-	--vkui--color_accent_pink: #f45fff;
-	--vkui--color_accent_pink--hover: #EA5CF7;
-	--vkui--color_accent_pink--active: #E059EF;
+	--vkui--color_accent_raspberry_pink: #fa7fbb;
+	--vkui--color_accent_raspberry_pink--hover: #F07BB6;
+	--vkui--color_accent_raspberry_pink--active: #E676B1;
+	--vkui--color_accent_pink: #e866ff;
+	--vkui--color_accent_pink--hover: #DF63F7;
+	--vkui--color_accent_pink--active: #D55FEF;
 	--vkui--color_accent_secondary: #3f8ae0;
 	--vkui--color_accent_secondary--hover: #3C85D9;
 	--vkui--color_accent_secondary--active: #3A80D3;
@@ -653,6 +659,9 @@
 	--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_accent_mint: #a3fd79;
+	--vkui--color_accent_mint--hover: #9CF477;
+	--vkui--color_accent_mint--active: #96EA74;
 	--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

@@ -8,8 +8,8 @@
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
 	--vkui--blur_s: 8px;
 	--vkui--blur_m: 16px;
-	--vkui--blur_l: 48px;
-	--vkui--blur_x_l: 96px;
+	--vkui--blur_l: 32px;
+	--vkui--blur_x_l: 64px;
 	--vkui--font_family_fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_family_base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -239,6 +239,12 @@
 	--vkui--radius_x_l: 20px;
 	--vkui--radius_2x_l: 24px;
 	--vkui--radius_3x_l: 32px;
+	--vkui--animation_easing_linear: cubic-bezier(0, 0, 1, 1);
+	--vkui--animation_easing_in_smooth: cubic-bezier(1, 0, 0.7, 1);
+	--vkui--animation_easing_out_smooth: cubic-bezier(0.3, 0, 0, 1);
+	--vkui--animation_easing_in_out_smooth: cubic-bezier(0.3, 0, 0.7, 1);
+	--vkui--animation_easing_out_sharp: cubic-bezier(0.2, 0, 0, 1);
+	--vkui--animation_easing_in_out_sharp: cubic-bezier(0.7, 0, 0.3, 1);
 	--vkui--font_label1--font_size--regular: 19px;
 	--vkui--font_label1--line_height--regular: 20px;
 	--vkui--font_label1--font_weight--regular: 670;

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

@@ -8,8 +8,8 @@
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
 	--vkui--blur_s: 8px;
 	--vkui--blur_m: 16px;
-	--vkui--blur_l: 48px;
-	--vkui--blur_x_l: 96px;
+	--vkui--blur_l: 32px;
+	--vkui--blur_x_l: 64px;
 	--vkui--spacing_size_3xs: 2px;
 	--vkui--spacing_size_2xs: 2px;
 	--vkui--spacing_size_xs: 4px;
@@ -41,6 +41,12 @@
 	--vkui--radius_x_l: 20px;
 	--vkui--radius_2x_l: 24px;
 	--vkui--radius_3x_l: 32px;
+	--vkui--animation_easing_linear: cubic-bezier(0, 0, 1, 1);
+	--vkui--animation_easing_in_smooth: cubic-bezier(1, 0, 0.7, 1);
+	--vkui--animation_easing_out_smooth: cubic-bezier(0.3, 0, 0, 1);
+	--vkui--animation_easing_in_out_smooth: cubic-bezier(0.3, 0, 0.7, 1);
+	--vkui--animation_easing_out_sharp: cubic-bezier(0.2, 0, 0, 1);
+	--vkui--animation_easing_in_out_sharp: cubic-bezier(0.7, 0, 0.3, 1);
 	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%;
 	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%;
 	--vkui--gradient_tint: rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.05) 15%, rgba(247, 247, 247, 0.2) 30%, rgba(247, 247, 247, 0.8) 70%, rgba(247, 247, 247, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(247, 247, 247, 1)) 100%;
@@ -107,9 +113,9 @@
 	--vkui--color_background_content_inverse: #19191A;
 	--vkui--color_background_content_inverse--hover: #18191B;
 	--vkui--color_background_content_inverse--active: #17181D;
-	--vkui--color_background_secondary: #f7f7f7;
-	--vkui--color_background_secondary--hover: #EDEEF0;
-	--vkui--color_background_secondary--active: #E3E5E8;
+	--vkui--color_background_secondary: #f2f2f2;
+	--vkui--color_background_secondary--hover: #E8E9EB;
+	--vkui--color_background_secondary--active: #DFE0E4;
 	--vkui--color_background_secondary_alpha: rgba(0, 0, 0, 0.04);
 	--vkui--color_background_secondary_alpha--hover: rgba(0, 0, 0, 0.08);
 	--vkui--color_background_secondary_alpha--active: rgba(0, 0, 0, 0.12);
@@ -311,24 +317,24 @@
 	--vkui--color_accent_gray: #a3adb8;
 	--vkui--color_accent_gray--hover: #9CA7B3;
 	--vkui--color_accent_gray--active: #96A0AE;
-	--vkui--color_accent_red: #ff3347;
-	--vkui--color_accent_red--hover: #F53247;
-	--vkui--color_accent_red--active: #EB3046;
+	--vkui--color_accent_red: #ff5773;
+	--vkui--color_accent_red--hover: #F55471;
+	--vkui--color_accent_red--active: #EB516F;
 	--vkui--color_accent_orange_fire: #f05c44;
 	--vkui--color_accent_orange_fire--hover: #E65944;
 	--vkui--color_accent_orange_fire--active: #DD5643;
-	--vkui--color_accent_orange: #ffa000;
-	--vkui--color_accent_orange--hover: #F59A02;
-	--vkui--color_accent_orange--active: #EB9405;
+	--vkui--color_accent_orange: #ff913d;
+	--vkui--color_accent_orange--hover: #F58C3D;
+	--vkui--color_accent_orange--active: #EB873D;
 	--vkui--color_accent_orange_peach: #f9b54f;
 	--vkui--color_accent_orange_peach--hover: #EFAE4E;
 	--vkui--color_accent_orange_peach--active: #E5A84E;
 	--vkui--color_accent_lime: #aff70d;
 	--vkui--color_accent_lime--hover: #A8EE0F;
 	--vkui--color_accent_lime--active: #A1E511;
-	--vkui--color_accent_green: #34c759;
-	--vkui--color_accent_green--hover: #32C058;
-	--vkui--color_accent_green--active: #30B857;
+	--vkui--color_accent_green: #42d347;
+	--vkui--color_accent_green--hover: #3FCB47;
+	--vkui--color_accent_green--active: #3DC346;
 	--vkui--color_accent_cyan: #13ffd0;
 	--vkui--color_accent_cyan--hover: #12F5CA;
 	--vkui--color_accent_cyan--active: #11ECC4;
@@ -341,12 +347,12 @@
 	--vkui--color_accent_violet: #792ec0;
 	--vkui--color_accent_violet--hover: #742DBB;
 	--vkui--color_accent_violet--active: #6F2CB6;
-	--vkui--color_accent_raspberry_pink: #e03fab;
-	--vkui--color_accent_raspberry_pink--hover: #D73DA7;
-	--vkui--color_accent_raspberry_pink--active: #CE3BA2;
-	--vkui--color_accent_pink: #f45fff;
-	--vkui--color_accent_pink--hover: #EA5CF7;
-	--vkui--color_accent_pink--active: #E059EF;
+	--vkui--color_accent_raspberry_pink: #fa7fbb;
+	--vkui--color_accent_raspberry_pink--hover: #F07BB6;
+	--vkui--color_accent_raspberry_pink--active: #E676B1;
+	--vkui--color_accent_pink: #e866ff;
+	--vkui--color_accent_pink--hover: #DF63F7;
+	--vkui--color_accent_pink--active: #D55FEF;
 	--vkui--color_accent_secondary: #3f8ae0;
 	--vkui--color_accent_secondary--hover: #3C85D9;
 	--vkui--color_accent_secondary--active: #3A80D3;
@@ -428,6 +434,9 @@
 	--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_accent_mint: #a3fd79;
+	--vkui--color_accent_mint--hover: #9CF477;
+	--vkui--color_accent_mint--active: #96EA74;
 	--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

@@ -26,9 +26,9 @@
 	--vkui--color_background_content_inverse: #19191A;
 	--vkui--color_background_content_inverse--hover: #18191B;
 	--vkui--color_background_content_inverse--active: #17181D;
-	--vkui--color_background_secondary: #f7f7f7;
-	--vkui--color_background_secondary--hover: #EDEEF0;
-	--vkui--color_background_secondary--active: #E3E5E8;
+	--vkui--color_background_secondary: #f2f2f2;
+	--vkui--color_background_secondary--hover: #E8E9EB;
+	--vkui--color_background_secondary--active: #DFE0E4;
 	--vkui--color_background_secondary_alpha: rgba(0, 0, 0, 0.04);
 	--vkui--color_background_secondary_alpha--hover: rgba(0, 0, 0, 0.08);
 	--vkui--color_background_secondary_alpha--active: rgba(0, 0, 0, 0.12);
@@ -230,24 +230,24 @@
 	--vkui--color_accent_gray: #a3adb8;
 	--vkui--color_accent_gray--hover: #9CA7B3;
 	--vkui--color_accent_gray--active: #96A0AE;
-	--vkui--color_accent_red: #ff3347;
-	--vkui--color_accent_red--hover: #F53247;
-	--vkui--color_accent_red--active: #EB3046;
+	--vkui--color_accent_red: #ff5773;
+	--vkui--color_accent_red--hover: #F55471;
+	--vkui--color_accent_red--active: #EB516F;
 	--vkui--color_accent_orange_fire: #f05c44;
 	--vkui--color_accent_orange_fire--hover: #E65944;
 	--vkui--color_accent_orange_fire--active: #DD5643;
-	--vkui--color_accent_orange: #ffa000;
-	--vkui--color_accent_orange--hover: #F59A02;
-	--vkui--color_accent_orange--active: #EB9405;
+	--vkui--color_accent_orange: #ff913d;
+	--vkui--color_accent_orange--hover: #F58C3D;
+	--vkui--color_accent_orange--active: #EB873D;
 	--vkui--color_accent_orange_peach: #f9b54f;
 	--vkui--color_accent_orange_peach--hover: #EFAE4E;
 	--vkui--color_accent_orange_peach--active: #E5A84E;
 	--vkui--color_accent_lime: #aff70d;
 	--vkui--color_accent_lime--hover: #A8EE0F;
 	--vkui--color_accent_lime--active: #A1E511;
-	--vkui--color_accent_green: #34c759;
-	--vkui--color_accent_green--hover: #32C058;
-	--vkui--color_accent_green--active: #30B857;
+	--vkui--color_accent_green: #42d347;
+	--vkui--color_accent_green--hover: #3FCB47;
+	--vkui--color_accent_green--active: #3DC346;
 	--vkui--color_accent_cyan: #13ffd0;
 	--vkui--color_accent_cyan--hover: #12F5CA;
 	--vkui--color_accent_cyan--active: #11ECC4;
@@ -260,12 +260,12 @@
 	--vkui--color_accent_violet: #792ec0;
 	--vkui--color_accent_violet--hover: #742DBB;
 	--vkui--color_accent_violet--active: #6F2CB6;
-	--vkui--color_accent_raspberry_pink: #e03fab;
-	--vkui--color_accent_raspberry_pink--hover: #D73DA7;
-	--vkui--color_accent_raspberry_pink--active: #CE3BA2;
-	--vkui--color_accent_pink: #f45fff;
-	--vkui--color_accent_pink--hover: #EA5CF7;
-	--vkui--color_accent_pink--active: #E059EF;
+	--vkui--color_accent_raspberry_pink: #fa7fbb;
+	--vkui--color_accent_raspberry_pink--hover: #F07BB6;
+	--vkui--color_accent_raspberry_pink--active: #E676B1;
+	--vkui--color_accent_pink: #e866ff;
+	--vkui--color_accent_pink--hover: #DF63F7;
+	--vkui--color_accent_pink--active: #D55FEF;
 	--vkui--color_accent_secondary: #3f8ae0;
 	--vkui--color_accent_secondary--hover: #3C85D9;
 	--vkui--color_accent_secondary--active: #3A80D3;
@@ -347,6 +347,9 @@
 	--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_accent_mint: #a3fd79;
+	--vkui--color_accent_mint--hover: #9CF477;
+	--vkui--color_accent_mint--active: #96EA74;
 	--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);