@vkontakte/vkui-tokens 4.35.2-dev-cfbf64.0 → 4.37.0

package/themes/octaviusCompact/index.styl

@@ -15,6 +15,7 @@ $size-popup-base-padding--compact = 32px;
 $size-popup-header-padding--regular = 16px;
 $size-popup-header-padding--compact = 24px;
 $size-border-radius--regular = 2px;
+$size-border-radius-rounded--regular = 48px;
 $size-check-border-radius--regular = 4px;
 $size-border-radius-paper--regular = 12px;
 $size-border-radius-promo--regular = 20px;
@@ -30,7 +31,7 @@ $size-button-small-height--regular = 32px;
 $size-checkbox--regular = 16px;
 $size-arrow--regular = 8px;
 $size-arrow-promo--regular = 40px;
-$size-popup-small--regular = 420px;
+$size-popup-small--regular = 430px;
 $size-popup-medium--regular = 680px;
 $size-popup-large--regular = 880px;
 $size-field-horizontal-padding--regular = 12px;
@@ -500,9 +501,15 @@ $color-avatar-overlay-inverse-alpha--active = rgba(255, 255, 255, 0.93);
 $color-overlay-primary = rgba(0, 0, 0, 0.48);
 $color-overlay-primary--hover = rgba(0, 0, 0, 0.52);
 $color-overlay-primary--active = rgba(0, 0, 0, 0.56);
+$color-overlay-secondary = rgb(44, 45, 46, 0.5);
+$color-overlay-secondary--hover = rgba(44, 45, 46, 0.54);
+$color-overlay-secondary--active = rgba(44, 45, 46, 0.58);
 $color-segmented-control = #FFFFFF;
 $color-segmented-control--hover = #F5F5F7;
 $color-segmented-control--active = #EBECEF;
+$color-tabbar-text-inactive = #99A2AD;
+$color-tabbar-text-inactive--hover = #939CA9;
+$color-tabbar-text-inactive--active = #8D96A4;
 $color-transparent = transparent;
 $color-transparent--hover = rgba(0, 16, 61, 0.04);
 $color-transparent--active = rgba(0, 16, 61, 0.08);

package/themes/octaviusCompact/struct.json

@@ -235,6 +235,9 @@
 		"sizeBorderRadius": {
 			"regular": 2
 		},
+		"sizeBorderRadiusRounded": {
+			"regular": 48
+		},
 		"sizeCheckBorderRadius": {
 			"regular": 4
 		},
@@ -273,7 +276,7 @@
 			"regular": 40
 		},
 		"sizePopupSmall": {
-			"regular": 420
+			"regular": 430
 		},
 		"sizePopupMedium": {
 			"regular": 680
@@ -1715,11 +1718,21 @@
 			"hover": "rgba(0, 0, 0, 0.52)",
 			"active": "rgba(0, 0, 0, 0.56)"
 		},
+		"colorOverlaySecondary": {
+			"normal": "rgb(44, 45, 46, 0.5)",
+			"hover": "rgba(44, 45, 46, 0.54)",
+			"active": "rgba(44, 45, 46, 0.58)"
+		},
 		"colorSegmentedControl": {
 			"normal": "#FFFFFF",
 			"hover": "#F5F5F7",
 			"active": "#EBECEF"
 		},
+		"colorTabbarTextInactive": {
+			"normal": "#99A2AD",
+			"hover": "#939CA9",
+			"active": "#8D96A4"
+		},
 		"colorTransparent": {
 			"normal": "transparent",
 			"hover": "rgba(0, 16, 61, 0.04)",

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

@@ -96,6 +96,7 @@
 	--vkui--size_popup_header_padding--regular: 16px;
 	--vkui--size_popup_header_padding--compact: 24px;
 	--vkui--size_border_radius--regular: 2px;
+	--vkui--size_border_radius_rounded--regular: 48px;
 	--vkui--size_check_border_radius--regular: 4px;
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;
@@ -111,7 +112,7 @@
 	--vkui--size_checkbox--regular: 16px;
 	--vkui--size_arrow--regular: 8px;
 	--vkui--size_arrow_promo--regular: 40px;
-	--vkui--size_popup_small--regular: 420px;
+	--vkui--size_popup_small--regular: 430px;
 	--vkui--size_popup_medium--regular: 680px;
 	--vkui--size_popup_large--regular: 880px;
 	--vkui--size_field_horizontal_padding--regular: 12px;
@@ -605,9 +606,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(55, 56, 57, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(55, 56, 57, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(55, 56, 57, 0.58);
 	--vkui--color_segmented_control: #626364;
 	--vkui--color_segmented_control--hover: #68696A;
 	--vkui--color_segmented_control--active: #6F6F70;
+	--vkui--color_tabbar_text_inactive: #76787A;
+	--vkui--color_tabbar_text_inactive--hover: #7B7D7F;
+	--vkui--color_tabbar_text_inactive--active: #818385;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(255, 255, 255, 0.04);
 	--vkui--color_transparent--active: rgba(255, 255, 255, 0.08);
@@ -1604,6 +1611,7 @@
 	--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);
 	--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
 	--vkui--size_border_radius: 2px;
+	--vkui--size_border_radius_rounded: 48px;
 	--vkui--size_check_border_radius: 4px;
 	--vkui--size_border_radius_paper: 12px;
 	--vkui--size_border_radius_promo: 20px;
@@ -1615,7 +1623,7 @@
 	--vkui--size_checkbox: 16px;
 	--vkui--size_arrow: 8px;
 	--vkui--size_arrow_promo: 40px;
-	--vkui--size_popup_small: 420px;
+	--vkui--size_popup_small: 430px;
 	--vkui--size_popup_medium: 680px;
 	--vkui--size_popup_large: 880px;
 	--vkui--size_field_horizontal_padding: 12px;

package/themes/octaviusCompactDark/cssVars/declarations/noColors.css

@@ -96,6 +96,7 @@
 	--vkui--size_popup_header_padding--regular: 16px;
 	--vkui--size_popup_header_padding--compact: 24px;
 	--vkui--size_border_radius--regular: 2px;
+	--vkui--size_border_radius_rounded--regular: 48px;
 	--vkui--size_check_border_radius--regular: 4px;
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;
@@ -111,7 +112,7 @@
 	--vkui--size_checkbox--regular: 16px;
 	--vkui--size_arrow--regular: 8px;
 	--vkui--size_arrow_promo--regular: 40px;
-	--vkui--size_popup_small--regular: 420px;
+	--vkui--size_popup_small--regular: 430px;
 	--vkui--size_popup_medium--regular: 680px;
 	--vkui--size_popup_large--regular: 880px;
 	--vkui--size_field_horizontal_padding--regular: 12px;

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

@@ -329,9 +329,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(55, 56, 57, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(55, 56, 57, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(55, 56, 57, 0.58);
 	--vkui--color_segmented_control: #626364;
 	--vkui--color_segmented_control--hover: #68696A;
 	--vkui--color_segmented_control--active: #6F6F70;
+	--vkui--color_tabbar_text_inactive: #76787A;
+	--vkui--color_tabbar_text_inactive--hover: #7B7D7F;
+	--vkui--color_tabbar_text_inactive--active: #818385;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(255, 255, 255, 0.04);
 	--vkui--color_transparent--active: rgba(255, 255, 255, 0.08);

package/themes/octaviusCompactDark/cssVars/declarations/onlyColors.css

@@ -284,9 +284,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(55, 56, 57, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(55, 56, 57, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(55, 56, 57, 0.58);
 	--vkui--color_segmented_control: #626364;
 	--vkui--color_segmented_control--hover: #68696A;
 	--vkui--color_segmented_control--active: #6F6F70;
+	--vkui--color_tabbar_text_inactive: #76787A;
+	--vkui--color_tabbar_text_inactive--hover: #7B7D7F;
+	--vkui--color_tabbar_text_inactive--active: #818385;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(255, 255, 255, 0.04);
 	--vkui--color_transparent--active: rgba(255, 255, 255, 0.08);