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

package/themes/octaviusVKDark/struct.json

@@ -218,6 +218,9 @@
 		"sizeBorderRadius": {
 			"regular": 8
 		},
+		"sizeBorderRadiusRounded": {
+			"regular": 48
+		},
 		"sizeCheckBorderRadius": {
 			"regular": 4
 		},
@@ -257,7 +260,7 @@
 			"regular": 40
 		},
 		"sizePopupSmall": {
-			"regular": 420
+			"regular": 430
 		},
 		"sizePopupMedium": {
 			"regular": 680
@@ -697,7 +700,7 @@
 			"active": "#353535"
 		},
 		"octaviusColorHeaderButtonText": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
@@ -707,7 +710,7 @@
 			"active": "rgba(255, 255, 255, 0.2)"
 		},
 		"octaviusColorHeaderIcon": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
@@ -727,17 +730,17 @@
 			"active": "#D7D8DB"
 		},
 		"octaviusColorHeaderTextSecondary": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
 		"octaviusColorHeaderSearchIcon": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
 		"octaviusColorHeaderSearchChipBackground": {
-			"normal": "#2C2D2E",
+			"normal": "#2c2d2e",
 			"hover": "#343536",
 			"active": "#3D3E3F"
 		},
@@ -752,22 +755,22 @@
 			"active": "rgba(255, 255, 255, 0.56)"
 		},
 		"octaviusColorHeaderSearchBackground": {
-			"normal": "#0A0A0A",
+			"normal": "#0a0a0a",
 			"hover": "#141414",
 			"active": "#1E1E1E"
 		},
 		"octaviusColorHeaderSearchBackgroundCollapsed": {
-			"normal": "#0A0A0A",
+			"normal": "#0a0a0a",
 			"hover": "#141414",
 			"active": "#1E1E1E"
 		},
 		"octaviusColorHeaderSearchText": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
 		"octaviusColorHeaderSearchTextCollapsed": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
@@ -777,7 +780,7 @@
 			"active": "rgba(255, 255, 255, 0.56)"
 		},
 		"octaviusColorHeaderProgress": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
@@ -792,7 +795,7 @@
 			"active": "#D7D8DB"
 		},
 		"octaviusColorSidebarItemIconPrimary": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
@@ -822,7 +825,7 @@
 			"active": "#D7D8DB"
 		},
 		"octaviusColorSidebarCounterBackgroundAlpha": {
-			"normal": "rgba(255, 255, 255, 0.3)",
+			"normal": "rgba(255, 255, 255, 0.30)",
 			"hover": "rgba(255, 255, 255, 0.34)",
 			"active": "rgba(255, 255, 255, 0.38)"
 		},
@@ -842,12 +845,12 @@
 			"active": "rgba(255, 255, 255, 0.2)"
 		},
 		"octaviusColorSidebarItemIcon": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
 		"octaviusColorSidebarItemText": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
@@ -857,42 +860,42 @@
 			"active": "rgba(255, 255, 255, 0.24)"
 		},
 		"octaviusColorSidebarItemIconSecondary": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
 		"octaviusColorSidebarItemTextSecondary": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
 		"octaviusColorSidebarShortItemIcon": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
 		"octaviusColorSidebarShortItemText": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
 		"octaviusColorSidebarShortItemTextActive": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
 		"octaviusColorSidebarShortItemIconActive": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
 		"octaviusColorSidebarShortItemIconSecondary": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
 		"octaviusColorSidebarShortItemTextSecondary": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
@@ -922,12 +925,12 @@
 			"active": "#316935"
 		},
 		"octaviusColorIconUnread": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
 		"octaviusColorIconFavorite": {
-			"normal": "#FF3347",
+			"normal": "#ff3347",
 			"hover": "#FF3B4E",
 			"active": "#FF4356"
 		},
@@ -977,12 +980,12 @@
 			"active": "rgba(193, 93, 243, 0.18)"
 		},
 		"octaviusColorSidebarIconUnread": {
-			"normal": "#2688EB",
+			"normal": "#2688eb",
 			"hover": "#2F8DEC",
 			"active": "#3792ED"
 		},
 		"octaviusColorSidebarIconFavorite": {
-			"normal": "#FF3347",
+			"normal": "#ff3347",
 			"hover": "#FF3B4E",
 			"active": "#FF4356"
 		},
@@ -1062,12 +1065,12 @@
 			"active": "#D7D8DB"
 		},
 		"octaviusColorDatasetBackground": {
-			"normal": "#19191A",
+			"normal": "#19191a",
 			"hover": "#222223",
 			"active": "#2B2B2C"
 		},
 		"octaviusColorEmptyStateText": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
@@ -1223,7 +1226,7 @@
 	},
 	"color": {
 		"colorBackgroundAccent": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
@@ -1233,7 +1236,7 @@
 			"active": "#D7D8DB"
 		},
 		"colorBackgroundAccentAlternative": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
@@ -1253,7 +1256,7 @@
 			"active": "rgba(255, 255, 255, 0.2)"
 		},
 		"colorBackground": {
-			"normal": "#0A0A0A",
+			"normal": "#0a0a0a",
 			"hover": "#141414",
 			"active": "#1E1E1E"
 		},
@@ -1273,7 +1276,7 @@
 			"active": "#8F7D5E"
 		},
 		"colorBackgroundNegative": {
-			"normal": "#FF5C5C",
+			"normal": "#ff5c5c",
 			"hover": "#FF6363",
 			"active": "#FF6969"
 		},
@@ -1288,24 +1291,24 @@
 			"active": "rgba(255, 255, 255, 0.11)"
 		},
 		"colorBackgroundModal": {
-			"normal": "#2C2D2E",
+			"normal": "#2c2d2e",
 			"hover": "#343536",
 			"active": "#3D3E3F"
 		},
 		"colorBackgroundPositive": {
-			"normal": "#4BB34B",
+			"normal": "#4bb34b",
 			"hover": "#52B652",
 			"active": "#59B959"
 		},
 		"colorBackgroundNegativeTint": {
-			"normal": "#522E2E",
+			"normal": "#522e2e",
 			"hover": "#593636",
 			"active": "#603F3F"
 		},
 		"colorBackgroundPositiveTint": {
-			"normal": "#E8f9e8",
-			"hover": "#E9F9E9",
-			"active": "#EAF9EA"
+			"normal": "#b1d6b1",
+			"hover": "#B4D8B4",
+			"active": "#B7D9B7"
 		},
 		"colorFieldBackground": {
 			"normal": "#232324",
@@ -1318,7 +1321,7 @@
 			"active": "#D7D8DB"
 		},
 		"colorBackgroundContrastInverse": {
-			"normal": "#2C2D2E",
+			"normal": "#2c2d2e",
 			"hover": "#343536",
 			"active": "#3D3E3F"
 		},
@@ -1328,7 +1331,7 @@
 			"active": "#67A6FF"
 		},
 		"colorTextAccent": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
@@ -1338,17 +1341,17 @@
 			"active": "#D7D8DB"
 		},
 		"colorTextNegative": {
-			"normal": "#FF5C5C",
+			"normal": "#ff5c5c",
 			"hover": "#FF6363",
 			"active": "#FF6969"
 		},
 		"colorTextLink": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
 		"colorTextLinkTint": {
-			"normal": "#71AAEB",
+			"normal": "#71aaeb",
 			"hover": "#77ADEC",
 			"active": "#7CB1ED"
 		},
@@ -1358,12 +1361,12 @@
 			"active": "#D7D8DB"
 		},
 		"colorTextMuted": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
 		"colorTextPrimary": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
@@ -1373,22 +1376,22 @@
 			"active": "#141414"
 		},
 		"colorTextSecondary": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
 		"colorTextSubhead": {
-			"normal": "#969A9F",
+			"normal": "#969a9f",
 			"hover": "#9A9EA3",
 			"active": "#9EA2A7"
 		},
 		"colorTextTertiary": {
-			"normal": "#5D5F61",
+			"normal": "#5d5f61",
 			"hover": "#636567",
 			"active": "#6A6C6E"
 		},
 		"colorTextLinkVisited": {
-			"normal": "#4986CC",
+			"normal": "#4986cc",
 			"hover": "#508BCE",
 			"active": "#5890D0"
 		},
@@ -1408,7 +1411,7 @@
 			"active": "#D7D8DB"
 		},
 		"colorTextPositive": {
-			"normal": "#4BB34B",
+			"normal": "#4bb34b",
 			"hover": "#52B652",
 			"active": "#59B959"
 		},
@@ -1418,7 +1421,7 @@
 			"active": "#D7D8DB"
 		},
 		"colorIconAccent": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
@@ -1428,22 +1431,22 @@
 			"active": "#D7D8DB"
 		},
 		"colorIconNegative": {
-			"normal": "#FF5C5C",
+			"normal": "#ff5c5c",
 			"hover": "#FF6363",
 			"active": "#FF6969"
 		},
 		"colorIconPrimary": {
-			"normal": "#E1E3E6",
+			"normal": "#e1e3e6",
 			"hover": "#E2E4E7",
 			"active": "#E3E5E8"
 		},
 		"colorIconPrimaryInvariably": {
-			"normal": "#2C2D2E",
+			"normal": "#2c2d2e",
 			"hover": "#343536",
 			"active": "#3D3E3F"
 		},
 		"colorIconMedium": {
-			"normal": "#B0B1B6",
+			"normal": "#b0b1b6",
 			"hover": "#B3B4B9",
 			"active": "#B6B7BC"
 		},
@@ -1453,7 +1456,7 @@
 			"active": "rgba(241, 247, 255, 0.74)"
 		},
 		"colorIconSecondary": {
-			"normal": "#76787A",
+			"normal": "#76787a",
 			"hover": "#7B7D7F",
 			"active": "#818385"
 		},
@@ -1463,12 +1466,12 @@
 			"active": "rgba(0, 0, 0, 0.51)"
 		},
 		"colorIconTertiary": {
-			"normal": "#5D5F61",
+			"normal": "#5d5f61",
 			"hover": "#636567",
 			"active": "#6A6C6E"
 		},
 		"colorIconTertiaryAlpha": {
-			"normal": "rgba(255, 255, 255, 0.3)",
+			"normal": "rgba(255, 255, 255, 0.30)",
 			"hover": "rgba(255, 255, 255, 0.34)",
 			"active": "rgba(255, 255, 255, 0.38)"
 		},
@@ -1483,12 +1486,12 @@
 			"active": "#141414"
 		},
 		"colorIconPositive": {
-			"normal": "#4BB34B",
+			"normal": "#4bb34b",
 			"hover": "#52B652",
 			"active": "#59B959"
 		},
 		"colorIconContrastSecondary": {
-			"normal": "#F2F3F5",
+			"normal": "#f2f3f5",
 			"hover": "#F3F3F5",
 			"active": "#F3F4F6"
 		},
@@ -1498,7 +1501,7 @@
 			"active": "#D7D8DB"
 		},
 		"colorStrokeAccent": {
-			"normal": "#529EF4",
+			"normal": "#529ef4",
 			"hover": "#59A2F4",
 			"active": "#60A6F5"
 		},
@@ -1513,7 +1516,7 @@
 			"active": "#D7D8DB"
 		},
 		"colorStrokeNegative": {
-			"normal": "#FF5C5C",
+			"normal": "#ff5c5c",
 			"hover": "#FF6363",
 			"active": "#FF6969"
 		},
@@ -1543,7 +1546,7 @@
 			"active": "#464748"
 		},
 		"colorStrokePositive": {
-			"normal": "#4BB34B",
+			"normal": "#4bb34b",
 			"hover": "#52B652",
 			"active": "#59B959"
 		},
@@ -1563,77 +1566,77 @@
 			"active": "#D7D8DB"
 		},
 		"colorAccentBlue": {
-			"normal": "#529EF4",
-			"hover": "#59A2F4",
-			"active": "#60A6F5"
+			"normal": "#71aaeb",
+			"hover": "#77ADEC",
+			"active": "#7CB1ED"
 		},
 		"colorAccentGray": {
-			"normal": "#A3ADB8",
+			"normal": "#a3adb8",
 			"hover": "#A7B0BB",
 			"active": "#AAB4BE"
 		},
 		"colorAccentRed": {
-			"normal": "#FF3347",
+			"normal": "#ff3347",
 			"hover": "#FF3B4E",
 			"active": "#FF4356"
 		},
 		"colorAccentGreen": {
-			"normal": "#4BB34B",
+			"normal": "#4bb34b",
 			"hover": "#52B652",
 			"active": "#59B959"
 		},
 		"colorAccentOrange": {
-			"normal": "#FFA000",
+			"normal": "#ffa000",
 			"hover": "#FFA40A",
 			"active": "#FFA814"
 		},
 		"colorAccentOrangeFire": {
-			"normal": "#F05C44",
+			"normal": "#f05c44",
 			"hover": "#F1634B",
 			"active": "#F16953"
 		},
 		"colorAccentPurple": {
-			"normal": "#735CE6",
-			"hover": "#7963E7",
-			"active": "#7E69E8"
+			"normal": "#8b74ff",
+			"hover": "#907AFF",
+			"active": "#947FFF"
 		},
 		"colorAccentViolet": {
-			"normal": "#792EC0",
-			"hover": "#7E36C3",
-			"active": "#843FC5"
+			"normal": "#a94fff",
+			"hover": "#AC56FF",
+			"active": "#B05DFF"
 		},
 		"colorAccentRaspberryPink": {
-			"normal": "#F060C0",
+			"normal": "#f060c0",
 			"hover": "#F166C3",
 			"active": "#F16DC5"
 		},
 		"colorAccentSecondary": {
-			"normal": "#3F8AE0",
+			"normal": "#3f8ae0",
 			"hover": "#478FE1",
 			"active": "#4E93E2"
 		},
 		"colorActionSheetText": {
-			"normal": "#529EF4",
-			"hover": "#59A2F4",
-			"active": "#60A6F5"
+			"normal": "#71aaeb",
+			"hover": "#77ADEC",
+			"active": "#7CB1ED"
 		},
 		"colorHeaderBackground": {
-			"normal": "#19191A",
+			"normal": "#19191a",
 			"hover": "#222223",
 			"active": "#2B2B2C"
 		},
 		"colorPanelHeaderIcon": {
-			"normal": "#71AAEB",
+			"normal": "#71aaeb",
 			"hover": "#77ADEC",
 			"active": "#7CB1ED"
 		},
 		"colorWriteBarInputBackground": {
-			"normal": "#2C2D2E",
+			"normal": "#2c2d2e",
 			"hover": "#343536",
 			"active": "#3D3E3F"
 		},
 		"colorWriteBarInputBorder": {
-			"normal": "#2C2D2E",
+			"normal": "#2c2d2e",
 			"hover": "#343536",
 			"active": "#3D3E3F"
 		},
@@ -1653,7 +1656,7 @@
 			"active": "#4F647D"
 		},
 		"colorImagePlaceholder": {
-			"normal": "#2A2B2C",
+			"normal": "#2a2b2c",
 			"hover": "#333334",
 			"active": "#3B3C3D"
 		},
@@ -1668,9 +1671,9 @@
 			"active": "#464748"
 		},
 		"colorWriteBarIcon": {
-			"normal": "#529EF4",
-			"hover": "#59A2F4",
-			"active": "#60A6F5"
+			"normal": "#76787a",
+			"hover": "#7B7D7F",
+			"active": "#818385"
 		},
 		"colorSkeletonFrom": {
 			"normal": "#232324",
@@ -1678,12 +1681,12 @@
 			"active": "#353536"
 		},
 		"colorSkeletonTo": {
-			"normal": "#2C2D2E",
+			"normal": "#2c2d2e",
 			"hover": "#343536",
 			"active": "#3D3E3F"
 		},
 		"colorAvatarOverlay": {
-			"normal": "rgba(0, 0, 0, 0.6)",
+			"normal": "rgba(0, 0, 0, 0.60)",
 			"hover": "rgba(0, 0, 0, 0.64)",
 			"active": "rgba(0, 0, 0, 0.68)"
 		},
@@ -1693,15 +1696,25 @@
 			"active": "rgba(255, 255, 255, 0.93)"
 		},
 		"colorOverlayPrimary": {
-			"normal": "rgba(0, 0, 0, 0.4)",
+			"normal": "rgba(0, 0, 0, 0.40)",
 			"hover": "rgba(0, 0, 0, 0.44)",
 			"active": "rgba(0, 0, 0, 0.48)"
 		},
+		"colorOverlaySecondary": {
+			"normal": "rgb(55, 56, 57, 0.5)",
+			"hover": "rgba(55, 56, 57, 0.54)",
+			"active": "rgba(55, 56, 57, 0.58)"
+		},
 		"colorSegmentedControl": {
 			"normal": "#626364",
 			"hover": "#68696A",
 			"active": "#6F6F70"
 		},
+		"colorTabbarTextInactive": {
+			"normal": "#76787a",
+			"hover": "#7B7D7F",
+			"active": "#818385"
+		},
 		"colorTransparent": {
 			"normal": "transparent",
 			"hover": "rgba(255, 255, 255, 0.04)",

package/themes/octaviusWhite/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: 8px;
+	--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;
@@ -112,7 +113,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;
@@ -604,9 +605,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(44, 45, 46, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(44, 45, 46, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(44, 45, 46, 0.58);
 	--vkui--color_segmented_control: #FFFFFF;
 	--vkui--color_segmented_control--hover: #F5F5F7;
 	--vkui--color_segmented_control--active: #EBECEF;
+	--vkui--color_tabbar_text_inactive: #99A2AD;
+	--vkui--color_tabbar_text_inactive--hover: #939CA9;
+	--vkui--color_tabbar_text_inactive--active: #8D96A4;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);
@@ -1603,6 +1610,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: 8px;
+	--vkui--size_border_radius_rounded: 48px;
 	--vkui--size_check_border_radius: 4px;
 	--vkui--size_border_radius_paper: 12px;
 	--vkui--size_border_radius_promo: 20px;
@@ -1614,7 +1622,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;