npm - @vkontakte/vkui-tokens - Versions diffs - 4.87.0 → 4.89.0 - Mend

@vkontakte/vkui-tokens 4.87.0 → 4.89.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (318) hide show

package/themes/legoAndroid/cssVars/declarations/onlyVariablesLocal.css CHANGED Viewed

@@ -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;
@@ -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;
@@ -239,6 +233,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 +332,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);
@@ -425,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;
@@ -536,24 +536,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 +566,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;
@@ -647,12 +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/onlyVariablesLocalIncremental.css CHANGED Viewed

@@ -1,6 +1,8 @@
 .vkui--legoAndroid--light {
 	--vkui--theme_name: 'legoAndroid';
 	--vkui--theme_name_base: 'legoAndroid';
+	--vkui--blur_l: 32px;
+	--vkui--blur_x_l: 64px;
 	--vkui--font_family_accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_display_title1--font_size--regular: 23px;
 	--vkui--font_display_title1--line_height--regular: 28px;
@@ -101,17 +103,10 @@
 	--vkui--font_caption3_caps--font_weight--regular: 600;
 	--vkui--font_caption3_caps--text_transform--regular: uppercase;
 	--vkui--size_cell_height--regular: 52px;
-	--vkui--size_cell_height--compact: 48px;
 	--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_base_padding_horizontal--regular: 16px;
-	--vkui--size_base_padding_horizontal--compact: 16px;
 	--vkui--theme_inherits_from: 'vkontakteAndroid';
 	--vkui--radius_2x_s: 4px;
 	--vkui--radius_x_s: 6px;
@@ -158,9 +153,9 @@
 	--vkui--color_background: #ffffff;
 	--vkui--color_background--hover: #F5F5F7;
 	--vkui--color_background--active: #EBECEF;
-	--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_tertiary: #f7f7f7;
 	--vkui--color_background_tertiary--hover: #EDEEF0;
 	--vkui--color_background_tertiary--active: #E3E5E8;
@@ -221,12 +216,6 @@
 	--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_icon_accent: #2e90ff;
 	--vkui--color_icon_accent--hover: #2C8BF7;
 	--vkui--color_icon_accent--active: #2A86EF;
@@ -290,24 +279,33 @@
 	--vkui--color_accent_blue: #2e90ff;
 	--vkui--color_accent_blue--hover: #2C8BF7;
 	--vkui--color_accent_blue--active: #2A86EF;
+	--vkui--color_accent_red: #ff5773;
+	--vkui--color_accent_red--hover: #F55471;
+	--vkui--color_accent_red--active: #EB516F;
+	--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;
 	--vkui--color_accent_azure: #0077ff;
 	--vkui--color_accent_azure--hover: #0073F7;
 	--vkui--color_accent_azure--active: #006FEF;
-	--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_overlay_primary: #3b3b3b;
 	--vkui--color_overlay_primary--hover: #39393B;
 	--vkui--color_overlay_primary--active: #36383B;
@@ -326,10 +324,31 @@
 	--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;
 }

package/themes/legoAndroid/cssVars/theme/fallbacks/index.css CHANGED Viewed

@@ -8,8 +8,8 @@
 	--vkui--elevation4: var(--vkui--elevation4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16));
 	--vkui--blur_s: var(--vkui--blur_s, 8px);
 	--vkui--blur_m: var(--vkui--blur_m, 16px);
-	--vkui--blur_l: var(--vkui--blur_l, 48px);
-	--vkui--blur_x_l: var(--vkui--blur_x_l, 96px);
+	--vkui--blur_l: var(--vkui--blur_l, 32px);
+	--vkui--blur_x_l: var(--vkui--blur_x_l, 64px);
 	--vkui--font_family_fallbacks: var(--vkui--font_family_fallbacks, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	--vkui--font_family_accent: var(--vkui--font_family_accent, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	--vkui--font_family_base: var(--vkui--font_family_base, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
@@ -136,19 +136,14 @@
 	--vkui--size_border_radius_paper--regular: var(--vkui--size_border_radius_paper--regular, 12px);
 	--vkui--size_border_radius_promo--regular: var(--vkui--size_border_radius_promo--regular, 20px);
 	--vkui--size_cell_height--regular: var(--vkui--size_cell_height--regular, 52px);
-	--vkui--size_cell_height--compact: var(--vkui--size_cell_height--compact, 48px);
 	--vkui--size_field_height--regular: var(--vkui--size_field_height--regular, 44px);
 	--vkui--size_field_height--compact: var(--vkui--size_field_height--compact, 36px);
 	--vkui--size_search_height--regular: var(--vkui--size_search_height--regular, 36px);
 	--vkui--size_search_height--compact: var(--vkui--size_search_height--compact, 32px);
 	--vkui--size_button_extra_small_height--regular: var(--vkui--size_button_extra_small_height--regular, 28px);
-	--vkui--size_button_extra_small_height--compact: var(--vkui--size_button_extra_small_height--compact, 24px);
-	--vkui--size_button_small_height--regular: var(--vkui--size_button_small_height--regular, 36px);
-	--vkui--size_button_small_height--compact: var(--vkui--size_button_small_height--compact, 32px);
-	--vkui--size_button_medium_height--regular: var(--vkui--size_button_medium_height--regular, 44px);
-	--vkui--size_button_medium_height--compact: var(--vkui--size_button_medium_height--compact, 36px);
+	--vkui--size_button_small_height--regular: var(--vkui--size_button_small_height--regular, 28px);
+	--vkui--size_button_medium_height--regular: var(--vkui--size_button_medium_height--regular, 38px);
 	--vkui--size_button_large_height--regular: var(--vkui--size_button_large_height--regular, 52px);
-	--vkui--size_button_large_height--compact: var(--vkui--size_button_large_height--compact, 44px);
 	--vkui--size_checkbox--regular: var(--vkui--size_checkbox--regular, 16px);
 	--vkui--size_arrow--regular: var(--vkui--size_arrow--regular, 8px);
 	--vkui--size_arrow_promo--regular: var(--vkui--size_arrow_promo--regular, 40px);
@@ -174,7 +169,6 @@
 	--vkui--size_card_border_radius--regular: var(--vkui--size_card_border_radius--regular, 8px);
 	--vkui--size_cardgrid_padding_vertical--regular: var(--vkui--size_cardgrid_padding_vertical--regular, 8px);
 	--vkui--size_base_padding_horizontal--regular: var(--vkui--size_base_padding_horizontal--regular, 16px);
-	--vkui--size_base_padding_horizontal--compact: var(--vkui--size_base_padding_horizontal--compact, 16px);
 	--vkui--size_base_padding_vertical--regular: var(--vkui--size_base_padding_vertical--regular, 12px);
 	--vkui--size_button_group_gap_space--regular: var(--vkui--size_button_group_gap_space--regular, 1px);
 	--vkui--size_button_group_gap_small--regular: var(--vkui--size_button_group_gap_small--regular, 8px);
@@ -239,6 +233,12 @@
 	--vkui--radius_x_l: var(--vkui--radius_x_l, 20px);
 	--vkui--radius_2x_l: var(--vkui--radius_2x_l, 24px);
 	--vkui--radius_3x_l: var(--vkui--radius_3x_l, 32px);
+	--vkui--animation_easing_linear: var(--vkui--animation_easing_linear, cubic-bezier(0, 0, 1, 1));
+	--vkui--animation_easing_in_smooth: var(--vkui--animation_easing_in_smooth, cubic-bezier(1, 0, 0.7, 1));
+	--vkui--animation_easing_out_smooth: var(--vkui--animation_easing_out_smooth, cubic-bezier(0.3, 0, 0, 1));
+	--vkui--animation_easing_in_out_smooth: var(--vkui--animation_easing_in_out_smooth, cubic-bezier(0.3, 0, 0.7, 1));
+	--vkui--animation_easing_out_sharp: var(--vkui--animation_easing_out_sharp, cubic-bezier(0.2, 0, 0, 1));
+	--vkui--animation_easing_in_out_sharp: var(--vkui--animation_easing_in_out_sharp, cubic-bezier(0.7, 0, 0.3, 1));
 	--vkui--font_label1--font_size--regular: var(--vkui--font_label1--font_size--regular, 19px);
 	--vkui--font_label1--line_height--regular: var(--vkui--font_label1--line_height--regular, 20px);
 	--vkui--font_label1--font_weight--regular: var(--vkui--font_label1--font_weight--regular, 670);
@@ -332,9 +332,9 @@
 	--vkui--color_background_content_inverse: var(--vkui--color_background_content_inverse, #19191A);
 	--vkui--color_background_content_inverse--hover: var(--vkui--color_background_content_inverse--hover, #18191B);
 	--vkui--color_background_content_inverse--active: var(--vkui--color_background_content_inverse--active, #17181D);
-	--vkui--color_background_secondary: var(--vkui--color_background_secondary, #f7f7f7);
-	--vkui--color_background_secondary--hover: var(--vkui--color_background_secondary--hover, #EDEEF0);
-	--vkui--color_background_secondary--active: var(--vkui--color_background_secondary--active, #E3E5E8);
+	--vkui--color_background_secondary: var(--vkui--color_background_secondary, #f2f2f2);
+	--vkui--color_background_secondary--hover: var(--vkui--color_background_secondary--hover, #E8E9EB);
+	--vkui--color_background_secondary--active: var(--vkui--color_background_secondary--active, #DFE0E4);
 	--vkui--color_background_secondary_alpha: var(--vkui--color_background_secondary_alpha, rgba(0, 0, 0, 0.04));
 	--vkui--color_background_secondary_alpha--hover: var(--vkui--color_background_secondary_alpha--hover, rgba(0, 0, 0, 0.08));
 	--vkui--color_background_secondary_alpha--active: var(--vkui--color_background_secondary_alpha--active, rgba(0, 0, 0, 0.12));
@@ -425,12 +425,12 @@
 	--vkui--color_text_negative: var(--vkui--color_text_negative, #f65460);
 	--vkui--color_text_negative--hover: var(--vkui--color_text_negative--hover, #EC515F);
 	--vkui--color_text_negative--active: var(--vkui--color_text_negative--active, #E24F5D);
-	--vkui--color_text_link: var(--vkui--color_text_link, #2e90ff);
-	--vkui--color_text_link--hover: var(--vkui--color_text_link--hover, #2C8BF7);
-	--vkui--color_text_link--active: var(--vkui--color_text_link--active, #2A86EF);
-	--vkui--color_text_link_themed: var(--vkui--color_text_link_themed, #2e90ff);
-	--vkui--color_text_link_themed--hover: var(--vkui--color_text_link_themed--hover, #2C8BF7);
-	--vkui--color_text_link_themed--active: var(--vkui--color_text_link_themed--active, #2A86EF);
+	--vkui--color_text_link: var(--vkui--color_text_link, #2d81e0);
+	--vkui--color_text_link--hover: var(--vkui--color_text_link--hover, #2B7CD9);
+	--vkui--color_text_link--active: var(--vkui--color_text_link--active, #2978D3);
+	--vkui--color_text_link_themed: var(--vkui--color_text_link_themed, #2d81e0);
+	--vkui--color_text_link_themed--hover: var(--vkui--color_text_link_themed--hover, #2B7CD9);
+	--vkui--color_text_link_themed--active: var(--vkui--color_text_link_themed--active, #2978D3);
 	--vkui--color_text_link_tint: var(--vkui--color_text_link_tint, #71aaeb);
 	--vkui--color_text_link_tint--hover: var(--vkui--color_text_link_tint--hover, #6CA4E4);
 	--vkui--color_text_link_tint--active: var(--vkui--color_text_link_tint--active, #689EDD);
@@ -536,24 +536,24 @@
 	--vkui--color_accent_gray: var(--vkui--color_accent_gray, #a3adb8);
 	--vkui--color_accent_gray--hover: var(--vkui--color_accent_gray--hover, #9CA7B3);
 	--vkui--color_accent_gray--active: var(--vkui--color_accent_gray--active, #96A0AE);
-	--vkui--color_accent_red: var(--vkui--color_accent_red, #ff3347);
-	--vkui--color_accent_red--hover: var(--vkui--color_accent_red--hover, #F53247);
-	--vkui--color_accent_red--active: var(--vkui--color_accent_red--active, #EB3046);
+	--vkui--color_accent_red: var(--vkui--color_accent_red, #ff5773);
+	--vkui--color_accent_red--hover: var(--vkui--color_accent_red--hover, #F55471);
+	--vkui--color_accent_red--active: var(--vkui--color_accent_red--active, #EB516F);
 	--vkui--color_accent_orange_fire: var(--vkui--color_accent_orange_fire, #f05c44);
 	--vkui--color_accent_orange_fire--hover: var(--vkui--color_accent_orange_fire--hover, #E65944);
 	--vkui--color_accent_orange_fire--active: var(--vkui--color_accent_orange_fire--active, #DD5643);
-	--vkui--color_accent_orange: var(--vkui--color_accent_orange, #ffa000);
-	--vkui--color_accent_orange--hover: var(--vkui--color_accent_orange--hover, #F59A02);
-	--vkui--color_accent_orange--active: var(--vkui--color_accent_orange--active, #EB9405);
+	--vkui--color_accent_orange: var(--vkui--color_accent_orange, #ff913d);
+	--vkui--color_accent_orange--hover: var(--vkui--color_accent_orange--hover, #F58C3D);
+	--vkui--color_accent_orange--active: var(--vkui--color_accent_orange--active, #EB873D);
 	--vkui--color_accent_orange_peach: var(--vkui--color_accent_orange_peach, #f9b54f);
 	--vkui--color_accent_orange_peach--hover: var(--vkui--color_accent_orange_peach--hover, #EFAE4E);
 	--vkui--color_accent_orange_peach--active: var(--vkui--color_accent_orange_peach--active, #E5A84E);
 	--vkui--color_accent_lime: var(--vkui--color_accent_lime, #aff70d);
 	--vkui--color_accent_lime--hover: var(--vkui--color_accent_lime--hover, #A8EE0F);
 	--vkui--color_accent_lime--active: var(--vkui--color_accent_lime--active, #A1E511);
-	--vkui--color_accent_green: var(--vkui--color_accent_green, #34c759);
-	--vkui--color_accent_green--hover: var(--vkui--color_accent_green--hover, #32C058);
-	--vkui--color_accent_green--active: var(--vkui--color_accent_green--active, #30B857);
+	--vkui--color_accent_green: var(--vkui--color_accent_green, #42d347);
+	--vkui--color_accent_green--hover: var(--vkui--color_accent_green--hover, #3FCB47);
+	--vkui--color_accent_green--active: var(--vkui--color_accent_green--active, #3DC346);
 	--vkui--color_accent_cyan: var(--vkui--color_accent_cyan, #13ffd0);
 	--vkui--color_accent_cyan--hover: var(--vkui--color_accent_cyan--hover, #12F5CA);
 	--vkui--color_accent_cyan--active: var(--vkui--color_accent_cyan--active, #11ECC4);
@@ -566,12 +566,12 @@
 	--vkui--color_accent_violet: var(--vkui--color_accent_violet, #792ec0);
 	--vkui--color_accent_violet--hover: var(--vkui--color_accent_violet--hover, #742DBB);
 	--vkui--color_accent_violet--active: var(--vkui--color_accent_violet--active, #6F2CB6);
-	--vkui--color_accent_raspberry_pink: var(--vkui--color_accent_raspberry_pink, #e03fab);
-	--vkui--color_accent_raspberry_pink--hover: var(--vkui--color_accent_raspberry_pink--hover, #D73DA7);
-	--vkui--color_accent_raspberry_pink--active: var(--vkui--color_accent_raspberry_pink--active, #CE3BA2);
-	--vkui--color_accent_pink: var(--vkui--color_accent_pink, #f45fff);
-	--vkui--color_accent_pink--hover: var(--vkui--color_accent_pink--hover, #EA5CF7);
-	--vkui--color_accent_pink--active: var(--vkui--color_accent_pink--active, #E059EF);
+	--vkui--color_accent_raspberry_pink: var(--vkui--color_accent_raspberry_pink, #fa7fbb);
+	--vkui--color_accent_raspberry_pink--hover: var(--vkui--color_accent_raspberry_pink--hover, #F07BB6);
+	--vkui--color_accent_raspberry_pink--active: var(--vkui--color_accent_raspberry_pink--active, #E676B1);
+	--vkui--color_accent_pink: var(--vkui--color_accent_pink, #e866ff);
+	--vkui--color_accent_pink--hover: var(--vkui--color_accent_pink--hover, #DF63F7);
+	--vkui--color_accent_pink--active: var(--vkui--color_accent_pink--active, #D55FEF);
 	--vkui--color_accent_secondary: var(--vkui--color_accent_secondary, #3f8ae0);
 	--vkui--color_accent_secondary--hover: var(--vkui--color_accent_secondary--hover, #3C85D9);
 	--vkui--color_accent_secondary--active: var(--vkui--color_accent_secondary--active, #3A80D3);
@@ -647,12 +647,33 @@
 	--vkui--color_background_inverse: var(--vkui--color_background_inverse, #262626);
 	--vkui--color_background_inverse--hover: var(--vkui--color_background_inverse--hover, #242527);
 	--vkui--color_background_inverse--active: var(--vkui--color_background_inverse--active, #232428);
-	--vkui--color_stroke_contrast_secondary_alpha: var(--vkui--color_stroke_contrast_secondary_alpha, #ffffff1e);
-	--vkui--color_stroke_contrast_secondary_alpha--hover: var(--vkui--color_stroke_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.16));
-	--vkui--color_stroke_contrast_secondary_alpha--active: var(--vkui--color_stroke_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.2));
 	--vkui--color_text_tertiary_alpha: var(--vkui--color_text_tertiary_alpha, #3b3b3b66);
 	--vkui--color_text_tertiary_alpha--hover: var(--vkui--color_text_tertiary_alpha--hover, rgba(59, 59, 59, 0.44));
 	--vkui--color_text_tertiary_alpha--active: var(--vkui--color_text_tertiary_alpha--active, rgba(59, 59, 59, 0.48));
+	--vkui--color_text_contrast_secondary_alpha: var(--vkui--color_text_contrast_secondary_alpha, #ffffff7f);
+	--vkui--color_text_contrast_secondary_alpha--hover: var(--vkui--color_text_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.54));
+	--vkui--color_text_contrast_secondary_alpha--active: var(--vkui--color_text_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.58));
+	--vkui--color_icon_contrast_secondary_alpha: var(--vkui--color_icon_contrast_secondary_alpha, #ffffff7f);
+	--vkui--color_icon_contrast_secondary_alpha--hover: var(--vkui--color_icon_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.54));
+	--vkui--color_icon_contrast_secondary_alpha--active: var(--vkui--color_icon_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.58));
+	--vkui--color_stroke_contrast_secondary_alpha: var(--vkui--color_stroke_contrast_secondary_alpha, #ffffff1e);
+	--vkui--color_stroke_contrast_secondary_alpha--hover: var(--vkui--color_stroke_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.16));
+	--vkui--color_stroke_contrast_secondary_alpha--active: var(--vkui--color_stroke_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.2));
+	--vkui--color_accent_mint: var(--vkui--color_accent_mint, #a3fd79);
+	--vkui--color_accent_mint--hover: var(--vkui--color_accent_mint--hover, #9CF477);
+	--vkui--color_accent_mint--active: var(--vkui--color_accent_mint--active, #96EA74);
+	--vkui--color_text_link_in_primary: var(--vkui--color_text_link_in_primary, #999999);
+	--vkui--color_text_link_in_primary--hover: var(--vkui--color_text_link_in_primary--hover, #939495);
+	--vkui--color_text_link_in_primary--active: var(--vkui--color_text_link_in_primary--active, #8D8E92);
+	--vkui--color_text_link_in_secondary: var(--vkui--color_text_link_in_secondary, #3b3b3b);
+	--vkui--color_text_link_in_secondary--hover: var(--vkui--color_text_link_in_secondary--hover, #39393B);
+	--vkui--color_text_link_in_secondary--active: var(--vkui--color_text_link_in_secondary--active, #36383B);
+	--vkui--color_text_link_in_contrast: var(--vkui--color_text_link_in_contrast, #ffffff7f);
+	--vkui--color_text_link_in_contrast--hover: var(--vkui--color_text_link_in_contrast--hover, rgba(255, 255, 255, 0.54));
+	--vkui--color_text_link_in_contrast--active: var(--vkui--color_text_link_in_contrast--active, rgba(255, 255, 255, 0.58));
+	--vkui--color_text_link_in_contrast_secondary_alpha: var(--vkui--color_text_link_in_contrast_secondary_alpha, #ffffff);
+	--vkui--color_text_link_in_contrast_secondary_alpha--hover: var(--vkui--color_text_link_in_contrast_secondary_alpha--hover, #F5F5F7);
+	--vkui--color_text_link_in_contrast_secondary_alpha--active: var(--vkui--color_text_link_in_contrast_secondary_alpha--active, #EBECEF);
 	--vkui--vkontakte_color_snippet_border_alpha: var(--vkui--vkontakte_color_snippet_border_alpha, rgba(0, 0, 0, 0.15));
 	--vkui--vkontakte_color_snippet_border_alpha--hover: var(--vkui--vkontakte_color_snippet_border_alpha--hover, rgba(0, 0, 0, 0.19));
 	--vkui--vkontakte_color_snippet_border_alpha--active: var(--vkui--vkontakte_color_snippet_border_alpha--active, rgba(0, 0, 0, 0.23));