@vkontakte/vkui-tokens 4.78.0 → 4.79.0

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

@@ -9,7 +9,10 @@ $elevation1-invert-y = var(--vkui--elevation1_invert_y, 0px 0px 2px 0px rgba(0,
 $elevation2 = var(--vkui--elevation2, 0px 4px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.20));
 $elevation3 = var(--vkui--elevation3, 0px 0px 2px 0px rgba(0, 0, 0, 0.30), 0px 4px 16px 0px rgba(0, 0, 0, 0.30));
 $elevation4 = var(--vkui--elevation4, 0px 0px 8px 0px rgba(0, 0, 0, 0.10), 0px 16px 16px 0px rgba(0, 0, 0, 0.20));
+$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);
 $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);
@@ -143,9 +146,9 @@ $color-background-accent-alternative--active = var(--vkui--color_background_acce
 $color-background = var(--vkui--color_background, #000000);
 $color-background--hover = var(--vkui--color_background--hover, #0A0A0A);
 $color-background--active = var(--vkui--color_background--active, #141414);
-$color-background-content = var(--vkui--color_background_content, #19191a);
-$color-background-content--hover = var(--vkui--color_background_content--hover, #222223);
-$color-background-content--active = var(--vkui--color_background_content--active, #2B2B2C);
+$color-background-content = var(--vkui--color_background_content, #000000);
+$color-background-content--hover = var(--vkui--color_background_content--hover, #0A0A0A);
+$color-background-content--active = var(--vkui--color_background_content--active, #141414);
 $color-background-content-alpha = var(--vkui--color_background_content_alpha, rgba(25, 25, 26, 0.8));
 $color-background-content-alpha--hover = var(--vkui--color_background_content_alpha--hover, rgba(25, 25, 26, 0.84));
 $color-background-content-alpha--active = var(--vkui--color_background_content_alpha--active, rgba(25, 25, 26, 0.88));
@@ -167,15 +170,15 @@ $color-background-tertiary-alpha--active = var(--vkui--color_background_tertiary
 $color-background-contrast = var(--vkui--color_background_contrast, #FFFFFF);
 $color-background-contrast--hover = var(--vkui--color_background_contrast--hover, #EBEDF0);
 $color-background-contrast--active = var(--vkui--color_background_contrast--active, #D7D8DB);
-$color-background-contrast-secondary-alpha = var(--vkui--color_background_contrast_secondary_alpha, rgba(255, 255, 255, 0.2));
+$color-background-contrast-secondary-alpha = var(--vkui--color_background_contrast_secondary_alpha, #ffffff33);
 $color-background-contrast-secondary-alpha--hover = var(--vkui--color_background_contrast_secondary_alpha--hover, rgba(255, 255, 255, 0.24));
 $color-background-contrast-secondary-alpha--active = var(--vkui--color_background_contrast_secondary_alpha--active, rgba(255, 255, 255, 0.28));
 $color-background-contrast-inverse = var(--vkui--color_background_contrast_inverse, #000000);
 $color-background-contrast-inverse--hover = var(--vkui--color_background_contrast_inverse--hover, #0A0A0A);
 $color-background-contrast-inverse--active = var(--vkui--color_background_contrast_inverse--active, #141414);
-$color-background-contrast-themed = var(--vkui--color_background_contrast_themed, #000000);
-$color-background-contrast-themed--hover = var(--vkui--color_background_contrast_themed--hover, #0A0A0A);
-$color-background-contrast-themed--active = var(--vkui--color_background_contrast_themed--active, #141414);
+$color-background-contrast-themed = var(--vkui--color_background_contrast_themed, #1e1e1c);
+$color-background-contrast-themed--hover = var(--vkui--color_background_contrast_themed--hover, #272725);
+$color-background-contrast-themed--active = var(--vkui--color_background_contrast_themed--active, #30302E);
 $color-background-modal = var(--vkui--color_background_modal, #000000);
 $color-background-modal--hover = var(--vkui--color_background_modal--hover, #0A0A0A);
 $color-background-modal--active = var(--vkui--color_background_modal--active, #141414);
@@ -191,7 +194,7 @@ $color-background-positive-tint--active = var(--vkui--color_background_positive_
 $color-background-warning = var(--vkui--color_background_warning, #483416);
 $color-background-warning--hover = var(--vkui--color_background_warning--hover, #4F3C1F);
 $color-background-warning--active = var(--vkui--color_background_warning--active, #574429);
-$color-background-negative = var(--vkui--color_background_negative, #FD6571);
+$color-background-negative = var(--vkui--color_background_negative, #fd6571);
 $color-background-negative--hover = var(--vkui--color_background_negative--hover, #FD6B77);
 $color-background-negative--active = var(--vkui--color_background_negative--active, #FD717C);
 $color-background-negative-tint = var(--vkui--color_background_negative_tint, #4b2727);
@@ -242,7 +245,7 @@ $color-text-contrast-themed--active = var(--vkui--color_text_contrast_themed--ac
 $color-text-positive = var(--vkui--color_text_positive, #34c759);
 $color-text-positive--hover = var(--vkui--color_text_positive--hover, #3CC960);
 $color-text-positive--active = var(--vkui--color_text_positive--active, #44CB66);
-$color-text-negative = var(--vkui--color_text_negative, #FD6571);
+$color-text-negative = var(--vkui--color_text_negative, #fd6571);
 $color-text-negative--hover = var(--vkui--color_text_negative--hover, #FD6B77);
 $color-text-negative--active = var(--vkui--color_text_negative--active, #FD717C);
 $color-text-link = var(--vkui--color_text_link, #2e90ff);
@@ -308,7 +311,7 @@ $color-icon-positive--active = var(--vkui--color_icon_positive--active, #44CB66)
 $color-icon-warning = var(--vkui--color_icon_warning, #ff6900);
 $color-icon-warning--hover = var(--vkui--color_icon_warning--hover, #FF6F0A);
 $color-icon-warning--active = var(--vkui--color_icon_warning--active, #FF7514);
-$color-icon-negative = var(--vkui--color_icon_negative, #FD6571);
+$color-icon-negative = var(--vkui--color_icon_negative, #fd6571);
 $color-icon-negative--hover = var(--vkui--color_icon_negative--hover, #FD6B77);
 $color-icon-negative--active = var(--vkui--color_icon_negative--active, #FD717C);
 $color-stroke-accent = var(--vkui--color_stroke_accent, #529ef4);
@@ -335,7 +338,7 @@ $color-separator-secondary--active = var(--vkui--color_separator_secondary--acti
 $color-stroke-positive = var(--vkui--color_stroke_positive, #34c759);
 $color-stroke-positive--hover = var(--vkui--color_stroke_positive--hover, #3CC960);
 $color-stroke-positive--active = var(--vkui--color_stroke_positive--active, #44CB66);
-$color-stroke-negative = var(--vkui--color_stroke_negative, #FD6571);
+$color-stroke-negative = var(--vkui--color_stroke_negative, #fd6571);
 $color-stroke-negative--hover = var(--vkui--color_stroke_negative--hover, #FD6B77);
 $color-stroke-negative--active = var(--vkui--color_stroke_negative--active, #FD717C);
 $color-stroke-contrast = var(--vkui--color_stroke_contrast, #FFFFFF);
@@ -461,13 +464,13 @@ $color-segmented-control--active = var(--vkui--color_segmented_control--active,
 $color-tabbar-text-inactive = var(--vkui--color_tabbar_text_inactive, #76787a);
 $color-tabbar-text-inactive--hover = var(--vkui--color_tabbar_text_inactive--hover, #7B7D7F);
 $color-tabbar-text-inactive--active = var(--vkui--color_tabbar_text_inactive--active, #818385);
-$color-transparent = var(--vkui--color_transparent, #00000000);
-$color-transparent--hover = var(--vkui--color_transparent--hover, rgba(0, 0, 0, 0.04));
-$color-transparent--active = var(--vkui--color_transparent--active, rgba(0, 0, 0, 0.08));
+$color-transparent = var(--vkui--color_transparent, transparent);
+$color-transparent--hover = var(--vkui--color_transparent--hover, rgba(255, 255, 255, 0.04));
+$color-transparent--active = var(--vkui--color_transparent--active, rgba(255, 255, 255, 0.08));
 $color-background-inverse = var(--vkui--color_background_inverse, #FFFFFF);
 $color-background-inverse--hover = var(--vkui--color_background_inverse--hover, #EBEDF0);
 $color-background-inverse--active = var(--vkui--color_background_inverse--active, #D7D8DB);
-$color-stroke-contrast-secondary-alpha = var(--vkui--color_stroke_contrast_secondary_alpha, #ffffff1f);
+$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));
 
@@ -643,6 +646,16 @@ font-body--regular() {
 	line-height: var(--vkui--font_body--line_height--regular, 21px);
 	font-weight: var(--vkui--font_body--font_weight--regular, 520);
 }
+font-text-bold--regular() {
+	font-size: var(--vkui--font_text_bold--font_size--regular, 16px);
+	line-height: var(--vkui--font_text_bold--line_height--regular, 18.5px);
+	font-weight: var(--vkui--font_text_bold--font_weight--regular, 700);
+}
+font-footnote-bold--regular() {
+	font-size: var(--vkui--font_footnote_bold--font_size--regular, 13.5px);
+	line-height: var(--vkui--font_footnote_bold--line_height--regular, 15px);
+	font-weight: var(--vkui--font_footnote_bold--font_weight--regular, 700);
+}
 font-headline--regular() {
 	font-size: var(--vkui--font_headline--font_size--regular, 17px);
 	line-height: var(--vkui--font_headline--line_height--regular, 20px);