@vkontakte/vkui-tokens 4.78.1 → 4.80.0

package/themes/legoAndroidDark/cssVars/theme/fallbacks/index.scss

@@ -5,7 +5,10 @@ $elevation1-invert-y: var(--vkui--elevation1_invert_y, 0px 0px 2px rgba(0, 0, 0,
 $elevation2: var(--vkui--elevation2, 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06));
 $elevation3: var(--vkui--elevation3, 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08));
 $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);
 $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);
@@ -202,15 +205,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);
@@ -226,7 +229,7 @@ $color-background-positive-tint--active: var(--vkui--color_background_positive_t
 $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);
@@ -277,7 +280,7 @@ $color-text-contrast-themed--active: var(--vkui--color_text_contrast_themed--act
 $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);
@@ -343,7 +346,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);
@@ -370,7 +373,7 @@ $color-separator-secondary--active: var(--vkui--color_separator_secondary--activ
 $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);
@@ -496,13 +499,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));
 $vkontakte-color-snippet-border-alpha: var(--vkui--vkontakte_color_snippet_border_alpha, rgba(255, 255, 255, 0.15));
@@ -751,6 +754,9 @@ $vkontakte-stories-skeleton-loader-background--active: var(--vkui--vkontakte_sto
 $vkontakte-palette-black: var(--vkui--vkontakte_palette_black, #000000);
 $vkontakte-palette-black--hover: var(--vkui--vkontakte_palette_black--hover, #0A0A0A);
 $vkontakte-palette-black--active: var(--vkui--vkontakte_palette_black--active, #141414);
+$color-text-tertiary-alpha: var(--vkui--color_text_tertiary_alpha, #ffffff7f);
+$color-text-tertiary-alpha--hover: var(--vkui--color_text_tertiary_alpha--hover, rgba(255, 255, 255, 0.54));
+$color-text-tertiary-alpha--active: var(--vkui--color_text_tertiary_alpha--active, rgba(255, 255, 255, 0.58));
 
 
 @mixin font-display-title1--regular() {
@@ -1136,6 +1142,28 @@ $font-body--regular--map: (
 	'fontWeight': "var(--vkui--font_body--font_weight--regular, 520)",
 	'fontVariationSettings.opticalSize': "var(--vkui--font_body--font_variation_settings--optical_size--regular, 22)",
 );
+@mixin 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, 670);
+}
+$font-text-bold--regular--map: (
+	'fontSize': "var(--vkui--font_text_bold--font_size--regular, 16px)",
+	'lineHeight': "var(--vkui--font_text_bold--line_height--regular, 18.5px)",
+	'fontWeight': "var(--vkui--font_text_bold--font_weight--regular, 670)",
+	'fontVariationSettings.opticalSize': "var(--vkui--font_text_bold--font_variation_settings--optical_size--regular, 21.8)",
+);
+@mixin 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, 670);
+}
+$font-footnote-bold--regular--map: (
+	'fontSize': "var(--vkui--font_footnote_bold--font_size--regular, 13.5px)",
+	'lineHeight': "var(--vkui--font_footnote_bold--line_height--regular, 15px)",
+	'fontWeight': "var(--vkui--font_footnote_bold--font_weight--regular, 670)",
+	'fontVariationSettings.opticalSize': "var(--vkui--font_footnote_bold--font_variation_settings--optical_size--regular, 20)",
+);
 @mixin font-headline--regular() {
 	font-size: var(--vkui--font_headline--font_size--regular, 17px);
 	line-height: var(--vkui--font_headline--line_height--regular, 20px);

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

@@ -5,7 +5,10 @@ $elevation1-invert-y = var(--vkui--elevation1_invert_y, 0px 0px 2px rgba(0, 0, 0
 $elevation2 = var(--vkui--elevation2, 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06));
 $elevation3 = var(--vkui--elevation3, 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08));
 $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);
 $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);
@@ -202,15 +205,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);
@@ -226,7 +229,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);
@@ -277,7 +280,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);
@@ -343,7 +346,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);
@@ -370,7 +373,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);
@@ -496,13 +499,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));
 $vkontakte-color-snippet-border-alpha = var(--vkui--vkontakte_color_snippet_border_alpha, rgba(255, 255, 255, 0.15));
@@ -751,6 +754,9 @@ $vkontakte-stories-skeleton-loader-background--active = var(--vkui--vkontakte_st
 $vkontakte-palette-black = var(--vkui--vkontakte_palette_black, #000000);
 $vkontakte-palette-black--hover = var(--vkui--vkontakte_palette_black--hover, #0A0A0A);
 $vkontakte-palette-black--active = var(--vkui--vkontakte_palette_black--active, #141414);
+$color-text-tertiary-alpha = var(--vkui--color_text_tertiary_alpha, #ffffff7f);
+$color-text-tertiary-alpha--hover = var(--vkui--color_text_tertiary_alpha--hover, rgba(255, 255, 255, 0.54));
+$color-text-tertiary-alpha--active = var(--vkui--color_text_tertiary_alpha--active, rgba(255, 255, 255, 0.58));
 
 
 font-display-title1--regular() {
@@ -923,6 +929,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, 670);
+}
+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, 670);
+}
 font-headline--regular() {
 	font-size: var(--vkui--font_headline--font_size--regular, 17px);
 	line-height: var(--vkui--font_headline--line_height--regular, 20px);