@vkontakte/vkui-tokens 4.87.0 → 4.89.0

package/themes/legoAndroid/cssVars/theme/fallbacks/index.styl

@@ -7,8 +7,8 @@ $elevation3 = var(--vkui--elevation3, 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 1
 $elevation4 = var(--vkui--elevation4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16));
 $blur-s = var(--vkui--blur_s, 8px);
 $blur-m = var(--vkui--blur_m, 16px);
-$blur-l = var(--vkui--blur_l, 48px);
-$blur-x-l = var(--vkui--blur_x_l, 96px);
+$blur-l = var(--vkui--blur_l, 32px);
+$blur-x-l = var(--vkui--blur_x_l, 64px);
 $font-family-fallbacks = var(--vkui--font_family_fallbacks, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 $font-family-accent = var(--vkui--font_family_accent, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 $font-family-base = var(--vkui--font_family_base, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
@@ -31,19 +31,14 @@ $size-check-border-radius--regular = var(--vkui--size_check_border_radius--regul
 $size-border-radius-paper--regular = var(--vkui--size_border_radius_paper--regular, 12px);
 $size-border-radius-promo--regular = var(--vkui--size_border_radius_promo--regular, 20px);
 $size-cell-height--regular = var(--vkui--size_cell_height--regular, 52px);
-$size-cell-height--compact = var(--vkui--size_cell_height--compact, 48px);
 $size-field-height--regular = var(--vkui--size_field_height--regular, 44px);
 $size-field-height--compact = var(--vkui--size_field_height--compact, 36px);
 $size-search-height--regular = var(--vkui--size_search_height--regular, 36px);
 $size-search-height--compact = var(--vkui--size_search_height--compact, 32px);
 $size-button-extra-small-height--regular = var(--vkui--size_button_extra_small_height--regular, 28px);
-$size-button-extra-small-height--compact = var(--vkui--size_button_extra_small_height--compact, 24px);
-$size-button-small-height--regular = var(--vkui--size_button_small_height--regular, 36px);
-$size-button-small-height--compact = var(--vkui--size_button_small_height--compact, 32px);
-$size-button-medium-height--regular = var(--vkui--size_button_medium_height--regular, 44px);
-$size-button-medium-height--compact = var(--vkui--size_button_medium_height--compact, 36px);
+$size-button-small-height--regular = var(--vkui--size_button_small_height--regular, 28px);
+$size-button-medium-height--regular = var(--vkui--size_button_medium_height--regular, 38px);
 $size-button-large-height--regular = var(--vkui--size_button_large_height--regular, 52px);
-$size-button-large-height--compact = var(--vkui--size_button_large_height--compact, 44px);
 $size-checkbox--regular = var(--vkui--size_checkbox--regular, 16px);
 $size-arrow--regular = var(--vkui--size_arrow--regular, 8px);
 $size-arrow-promo--regular = var(--vkui--size_arrow_promo--regular, 40px);
@@ -69,7 +64,6 @@ $size-cardgrid-padding--regular = var(--vkui--size_cardgrid_padding--regular, 8p
 $size-card-border-radius--regular = var(--vkui--size_card_border_radius--regular, 8px);
 $size-cardgrid-padding-vertical--regular = var(--vkui--size_cardgrid_padding_vertical--regular, 8px);
 $size-base-padding-horizontal--regular = var(--vkui--size_base_padding_horizontal--regular, 16px);
-$size-base-padding-horizontal--compact = var(--vkui--size_base_padding_horizontal--compact, 16px);
 $size-base-padding-vertical--regular = var(--vkui--size_base_padding_vertical--regular, 12px);
 $size-button-group-gap-space--regular = var(--vkui--size_button_group_gap_space--regular, 1px);
 $size-button-group-gap-small--regular = var(--vkui--size_button_group_gap_small--regular, 8px);
@@ -134,6 +128,12 @@ $radius-l = var(--vkui--radius_l, 16px);
 $radius-x-l = var(--vkui--radius_x_l, 20px);
 $radius-2x-l = var(--vkui--radius_2x_l, 24px);
 $radius-3x-l = var(--vkui--radius_3x_l, 32px);
+$animation-easing-linear = var(--vkui--animation_easing_linear, cubic-bezier(0, 0, 1, 1));
+$animation-easing-in-smooth = var(--vkui--animation_easing_in_smooth, cubic-bezier(1, 0, 0.7, 1));
+$animation-easing-out-smooth = var(--vkui--animation_easing_out_smooth, cubic-bezier(0.3, 0, 0, 1));
+$animation-easing-in-out-smooth = var(--vkui--animation_easing_in_out_smooth, cubic-bezier(0.3, 0, 0.7, 1));
+$animation-easing-out-sharp = var(--vkui--animation_easing_out_sharp, cubic-bezier(0.2, 0, 0, 1));
+$animation-easing-in-out-sharp = var(--vkui--animation_easing_in_out_sharp, cubic-bezier(0.7, 0, 0.3, 1));
 $gradient-black = var(--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%);
 $gradient-white = var(--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%);
 $gradient-tint = var(--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%);
@@ -200,9 +200,9 @@ $color-background-content-alpha--active = var(--vkui--color_background_content_a
 $color-background-content-inverse = var(--vkui--color_background_content_inverse, #19191A);
 $color-background-content-inverse--hover = var(--vkui--color_background_content_inverse--hover, #18191B);
 $color-background-content-inverse--active = var(--vkui--color_background_content_inverse--active, #17181D);
-$color-background-secondary = var(--vkui--color_background_secondary, #f7f7f7);
-$color-background-secondary--hover = var(--vkui--color_background_secondary--hover, #EDEEF0);
-$color-background-secondary--active = var(--vkui--color_background_secondary--active, #E3E5E8);
+$color-background-secondary = var(--vkui--color_background_secondary, #f2f2f2);
+$color-background-secondary--hover = var(--vkui--color_background_secondary--hover, #E8E9EB);
+$color-background-secondary--active = var(--vkui--color_background_secondary--active, #DFE0E4);
 $color-background-secondary-alpha = var(--vkui--color_background_secondary_alpha, rgba(0, 0, 0, 0.04));
 $color-background-secondary-alpha--hover = var(--vkui--color_background_secondary_alpha--hover, rgba(0, 0, 0, 0.08));
 $color-background-secondary-alpha--active = var(--vkui--color_background_secondary_alpha--active, rgba(0, 0, 0, 0.12));
@@ -293,12 +293,12 @@ $color-text-positive--active = var(--vkui--color_text_positive--active, #30B857)
 $color-text-negative = var(--vkui--color_text_negative, #f65460);
 $color-text-negative--hover = var(--vkui--color_text_negative--hover, #EC515F);
 $color-text-negative--active = var(--vkui--color_text_negative--active, #E24F5D);
-$color-text-link = var(--vkui--color_text_link, #2e90ff);
-$color-text-link--hover = var(--vkui--color_text_link--hover, #2C8BF7);
-$color-text-link--active = var(--vkui--color_text_link--active, #2A86EF);
-$color-text-link-themed = var(--vkui--color_text_link_themed, #2e90ff);
-$color-text-link-themed--hover = var(--vkui--color_text_link_themed--hover, #2C8BF7);
-$color-text-link-themed--active = var(--vkui--color_text_link_themed--active, #2A86EF);
+$color-text-link = var(--vkui--color_text_link, #2d81e0);
+$color-text-link--hover = var(--vkui--color_text_link--hover, #2B7CD9);
+$color-text-link--active = var(--vkui--color_text_link--active, #2978D3);
+$color-text-link-themed = var(--vkui--color_text_link_themed, #2d81e0);
+$color-text-link-themed--hover = var(--vkui--color_text_link_themed--hover, #2B7CD9);
+$color-text-link-themed--active = var(--vkui--color_text_link_themed--active, #2978D3);
 $color-text-link-tint = var(--vkui--color_text_link_tint, #71aaeb);
 $color-text-link-tint--hover = var(--vkui--color_text_link_tint--hover, #6CA4E4);
 $color-text-link-tint--active = var(--vkui--color_text_link_tint--active, #689EDD);
@@ -404,24 +404,24 @@ $color-accent-blue--active = var(--vkui--color_accent_blue--active, #2A86EF);
 $color-accent-gray = var(--vkui--color_accent_gray, #a3adb8);
 $color-accent-gray--hover = var(--vkui--color_accent_gray--hover, #9CA7B3);
 $color-accent-gray--active = var(--vkui--color_accent_gray--active, #96A0AE);
-$color-accent-red = var(--vkui--color_accent_red, #ff3347);
-$color-accent-red--hover = var(--vkui--color_accent_red--hover, #F53247);
-$color-accent-red--active = var(--vkui--color_accent_red--active, #EB3046);
+$color-accent-red = var(--vkui--color_accent_red, #ff5773);
+$color-accent-red--hover = var(--vkui--color_accent_red--hover, #F55471);
+$color-accent-red--active = var(--vkui--color_accent_red--active, #EB516F);
 $color-accent-orange-fire = var(--vkui--color_accent_orange_fire, #f05c44);
 $color-accent-orange-fire--hover = var(--vkui--color_accent_orange_fire--hover, #E65944);
 $color-accent-orange-fire--active = var(--vkui--color_accent_orange_fire--active, #DD5643);
-$color-accent-orange = var(--vkui--color_accent_orange, #ffa000);
-$color-accent-orange--hover = var(--vkui--color_accent_orange--hover, #F59A02);
-$color-accent-orange--active = var(--vkui--color_accent_orange--active, #EB9405);
+$color-accent-orange = var(--vkui--color_accent_orange, #ff913d);
+$color-accent-orange--hover = var(--vkui--color_accent_orange--hover, #F58C3D);
+$color-accent-orange--active = var(--vkui--color_accent_orange--active, #EB873D);
 $color-accent-orange-peach = var(--vkui--color_accent_orange_peach, #f9b54f);
 $color-accent-orange-peach--hover = var(--vkui--color_accent_orange_peach--hover, #EFAE4E);
 $color-accent-orange-peach--active = var(--vkui--color_accent_orange_peach--active, #E5A84E);
 $color-accent-lime = var(--vkui--color_accent_lime, #aff70d);
 $color-accent-lime--hover = var(--vkui--color_accent_lime--hover, #A8EE0F);
 $color-accent-lime--active = var(--vkui--color_accent_lime--active, #A1E511);
-$color-accent-green = var(--vkui--color_accent_green, #34c759);
-$color-accent-green--hover = var(--vkui--color_accent_green--hover, #32C058);
-$color-accent-green--active = var(--vkui--color_accent_green--active, #30B857);
+$color-accent-green = var(--vkui--color_accent_green, #42d347);
+$color-accent-green--hover = var(--vkui--color_accent_green--hover, #3FCB47);
+$color-accent-green--active = var(--vkui--color_accent_green--active, #3DC346);
 $color-accent-cyan = var(--vkui--color_accent_cyan, #13ffd0);
 $color-accent-cyan--hover = var(--vkui--color_accent_cyan--hover, #12F5CA);
 $color-accent-cyan--active = var(--vkui--color_accent_cyan--active, #11ECC4);
@@ -434,12 +434,12 @@ $color-accent-purple--active = var(--vkui--color_accent_purple--active, #6A56D8)
 $color-accent-violet = var(--vkui--color_accent_violet, #792ec0);
 $color-accent-violet--hover = var(--vkui--color_accent_violet--hover, #742DBB);
 $color-accent-violet--active = var(--vkui--color_accent_violet--active, #6F2CB6);
-$color-accent-raspberry-pink = var(--vkui--color_accent_raspberry_pink, #e03fab);
-$color-accent-raspberry-pink--hover = var(--vkui--color_accent_raspberry_pink--hover, #D73DA7);
-$color-accent-raspberry-pink--active = var(--vkui--color_accent_raspberry_pink--active, #CE3BA2);
-$color-accent-pink = var(--vkui--color_accent_pink, #f45fff);
-$color-accent-pink--hover = var(--vkui--color_accent_pink--hover, #EA5CF7);
-$color-accent-pink--active = var(--vkui--color_accent_pink--active, #E059EF);
+$color-accent-raspberry-pink = var(--vkui--color_accent_raspberry_pink, #fa7fbb);
+$color-accent-raspberry-pink--hover = var(--vkui--color_accent_raspberry_pink--hover, #F07BB6);
+$color-accent-raspberry-pink--active = var(--vkui--color_accent_raspberry_pink--active, #E676B1);
+$color-accent-pink = var(--vkui--color_accent_pink, #e866ff);
+$color-accent-pink--hover = var(--vkui--color_accent_pink--hover, #DF63F7);
+$color-accent-pink--active = var(--vkui--color_accent_pink--active, #D55FEF);
 $color-accent-secondary = var(--vkui--color_accent_secondary, #3f8ae0);
 $color-accent-secondary--hover = var(--vkui--color_accent_secondary--hover, #3C85D9);
 $color-accent-secondary--active = var(--vkui--color_accent_secondary--active, #3A80D3);
@@ -515,12 +515,33 @@ $color-transparent--active = var(--vkui--color_transparent--active, rgba(0, 0, 0
 $color-background-inverse = var(--vkui--color_background_inverse, #262626);
 $color-background-inverse--hover = var(--vkui--color_background_inverse--hover, #242527);
 $color-background-inverse--active = var(--vkui--color_background_inverse--active, #232428);
-$color-stroke-contrast-secondary-alpha = var(--vkui--color_stroke_contrast_secondary_alpha, #ffffff1e);
-$color-stroke-contrast-secondary-alpha--hover = var(--vkui--color_stroke_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.16));
-$color-stroke-contrast-secondary-alpha--active = var(--vkui--color_stroke_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.2));
 $color-text-tertiary-alpha = var(--vkui--color_text_tertiary_alpha, #3b3b3b66);
 $color-text-tertiary-alpha--hover = var(--vkui--color_text_tertiary_alpha--hover, rgba(59, 59, 59, 0.44));
 $color-text-tertiary-alpha--active = var(--vkui--color_text_tertiary_alpha--active, rgba(59, 59, 59, 0.48));
+$color-text-contrast-secondary-alpha = var(--vkui--color_text_contrast_secondary_alpha, #ffffff7f);
+$color-text-contrast-secondary-alpha--hover = var(--vkui--color_text_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.54));
+$color-text-contrast-secondary-alpha--active = var(--vkui--color_text_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.58));
+$color-icon-contrast-secondary-alpha = var(--vkui--color_icon_contrast_secondary_alpha, #ffffff7f);
+$color-icon-contrast-secondary-alpha--hover = var(--vkui--color_icon_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.54));
+$color-icon-contrast-secondary-alpha--active = var(--vkui--color_icon_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.58));
+$color-stroke-contrast-secondary-alpha = var(--vkui--color_stroke_contrast_secondary_alpha, #ffffff1e);
+$color-stroke-contrast-secondary-alpha--hover = var(--vkui--color_stroke_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.16));
+$color-stroke-contrast-secondary-alpha--active = var(--vkui--color_stroke_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.2));
+$color-accent-mint = var(--vkui--color_accent_mint, #a3fd79);
+$color-accent-mint--hover = var(--vkui--color_accent_mint--hover, #9CF477);
+$color-accent-mint--active = var(--vkui--color_accent_mint--active, #96EA74);
+$color-text-link-in-primary = var(--vkui--color_text_link_in_primary, #999999);
+$color-text-link-in-primary--hover = var(--vkui--color_text_link_in_primary--hover, #939495);
+$color-text-link-in-primary--active = var(--vkui--color_text_link_in_primary--active, #8D8E92);
+$color-text-link-in-secondary = var(--vkui--color_text_link_in_secondary, #3b3b3b);
+$color-text-link-in-secondary--hover = var(--vkui--color_text_link_in_secondary--hover, #39393B);
+$color-text-link-in-secondary--active = var(--vkui--color_text_link_in_secondary--active, #36383B);
+$color-text-link-in-contrast = var(--vkui--color_text_link_in_contrast, #ffffff7f);
+$color-text-link-in-contrast--hover = var(--vkui--color_text_link_in_contrast--hover, rgba(255, 255, 255, 0.54));
+$color-text-link-in-contrast--active = var(--vkui--color_text_link_in_contrast--active, rgba(255, 255, 255, 0.58));
+$color-text-link-in-contrast-secondary-alpha = var(--vkui--color_text_link_in_contrast_secondary_alpha, #ffffff);
+$color-text-link-in-contrast-secondary-alpha--hover = var(--vkui--color_text_link_in_contrast_secondary_alpha--hover, #F5F5F7);
+$color-text-link-in-contrast-secondary-alpha--active = var(--vkui--color_text_link_in_contrast_secondary_alpha--active, #EBECEF);
 $vkontakte-color-snippet-border-alpha = var(--vkui--vkontakte_color_snippet_border_alpha, rgba(0, 0, 0, 0.15));
 $vkontakte-color-snippet-border-alpha--hover = var(--vkui--vkontakte_color_snippet_border_alpha--hover, rgba(0, 0, 0, 0.19));
 $vkontakte-color-snippet-border-alpha--active = var(--vkui--vkontakte_color_snippet_border_alpha--active, rgba(0, 0, 0, 0.23));