@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/themes/vkCom/index.json

@@ -1,5 +1,6 @@
 {
 	"themeName": "vkCom",
+	"themeNameBase": "vkCom",
 	"fontFamilyAccent": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
 	"fontFamilyBase": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
 	"fontWeightAccent1": 400,
@@ -29,7 +30,7 @@
 	"fontTitle3": {
 		"regular": {
 			"fontSize": 17,
-			"lineHeight": 24,
+			"lineHeight": 22,
 			"letterSpacing": "-0.22px",
 			"fontFamily": "\"TT Commons\", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif",
 			"fontWeight": 600
@@ -159,7 +160,7 @@
 		"regular": 16
 	},
 	"sizeBorderRadius": {
-		"regular": 8
+		"regular": 4
 	},
 	"sizeCheckBorderRadius": {
 		"regular": 4
@@ -184,7 +185,7 @@
 	},
 	"sizeButtonSmallHeight": {
 		"regular": 30,
-		"compact": 26
+		"compact": 28
 	},
 	"sizeCheckbox": {
 		"regular": 16
@@ -249,6 +250,18 @@
 	"sizeBadgeXL": {
 		"regular": 56
 	},
+	"sizeCardgridPadding": {
+		"regular": 8
+	},
+	"sizeCardBorderRadius": {
+		"regular": 8
+	},
+	"sizeCardgridPaddingVertical": {
+		"regular": 8
+	},
+	"sizeBasePaddingHorizontal": {
+		"regular": 16
+	},
 	"elevation1": "0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)",
 	"elevation2": "0px 0px 2px rgba(0, 0, 0, 0.04), 0px 4px 4px rgba(0, 0, 0, 0.08)",
 	"elevation3": "0px 0px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.16)",
@@ -261,16 +274,51 @@
 	"opacityDisableAccessibility": 0.64,
 	"colorsScheme": "light",
 	"colorBackgroundAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorBackgroundAccentThemed": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorBackgroundAccentAlternative": {
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
+	},
+	"colorIconAccent": {
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
+	},
+	"colorTextAccent": {
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
+	},
+	"colorTextAccentThemed": {
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
+	},
+	"colorStrokeAccent": {
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
+	},
+	"colorStrokeAccentThemed": {
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
+	},
+	"colorStrokeContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#F5F5F7",
+		"active": "#EBECEF"
+	},
+	"colorActionSheetText": {
 		"normal": "#3F8AE0",
 		"hover": "#3C85D9",
 		"active": "#3A80D3"
@@ -320,110 +368,35 @@
 		"hover": "#DD4446",
 		"active": "#D44245"
 	},
-	"colorBackgroundModal": {
-		"normal": "#FFFFFF",
-		"hover": "#F5F5F7",
-		"active": "#EBECEF"
-	},
-	"colorBackgroundPositive": {
-		"normal": "#4BB34B",
-		"hover": "#48AC4A",
-		"active": "#45A64A"
-	},
 	"colorBackgroundNegativeTint": {
 		"normal": "#FAEBEB",
 		"hover": "#F0E2E4",
 		"active": "#E6D9DD"
 	},
-	"colorTextAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
-	},
-	"colorTextAccentThemed": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
-	},
 	"colorTextNegative": {
 		"normal": "#E64646",
 		"hover": "#DD4446",
 		"active": "#D44245"
 	},
-	"colorTextLink": {
-		"normal": "#4986CC",
-		"hover": "#4681C6",
-		"active": "#437DC1"
-	},
-	"colorTextLinkThemed": {
-		"normal": "#4986CC",
-		"hover": "#4681C6",
-		"active": "#437DC1"
-	},
-	"colorTextMuted": {
-		"normal": "#2C2D2E",
-		"hover": "#2A2C2F",
-		"active": "#282B2F"
-	},
-	"colorTextPrimary": {
-		"normal": "#000000",
-		"hover": "#000102",
-		"active": "#000105"
-	},
-	"colorTextPrimaryInvariably": {
-		"normal": "#000000",
-		"hover": "#000102",
-		"active": "#000105"
-	},
-	"colorTextSecondary": {
-		"normal": "#818C99",
-		"hover": "#7C8795",
-		"active": "#778292"
-	},
-	"colorTextSubhead": {
-		"normal": "#6D7885",
-		"hover": "#697482",
-		"active": "#64707F"
-	},
-	"colorTextTertiary": {
-		"normal": "#99A2AD",
-		"hover": "#939CA9",
-		"active": "#8D96A4"
-	},
-	"colorTextLinkVisited": {
-		"normal": "#4986CC",
-		"hover": "#4681C6",
-		"active": "#437DC1"
-	},
-	"colorTextContrast": {
-		"normal": "#FFFFFF",
-		"hover": "#F5F5F7",
-		"active": "#EBECEF"
+	"colorIconNegative": {
+		"normal": "#E64646",
+		"hover": "#DD4446",
+		"active": "#D44245"
 	},
-	"colorTextContrastThemed": {
-		"normal": "#FFFFFF",
-		"hover": "#F5F5F7",
-		"active": "#EBECEF"
+	"colorStrokeNegative": {
+		"normal": "#E64646",
+		"hover": "#DD4446",
+		"active": "#D44245"
 	},
-	"colorLinkContrast": {
+	"colorHeaderBackground": {
 		"normal": "#FFFFFF",
 		"hover": "#F5F5F7",
 		"active": "#EBECEF"
 	},
-	"colorTextPositive": {
-		"normal": "#4BB34B",
-		"hover": "#48AC4A",
-		"active": "#45A64A"
-	},
-	"colorIconAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
-	},
-	"colorIconNegative": {
-		"normal": "#E64646",
-		"hover": "#DD4446",
-		"active": "#D44245"
+	"colorPanelHeaderIcon": {
+		"normal": "#2688EB",
+		"hover": "#2483E4",
+		"active": "#237EDD"
 	},
 	"colorIconPrimary": {
 		"normal": "#2C2D2E",
@@ -465,45 +438,50 @@
 		"hover": "rgba(0, 0, 0, 0.28)",
 		"active": "rgba(0, 0, 0, 0.32)"
 	},
-	"colorIconContrast": {
-		"normal": "#FFFFFF",
-		"hover": "#F5F5F7",
-		"active": "#EBECEF"
+	"colorImageBorderAlpha": {
+		"normal": "rgba(0, 0, 0, 0.08)",
+		"hover": "rgba(0, 0, 0, 0.12)",
+		"active": "rgba(0, 0, 0, 0.16)"
 	},
-	"colorIconContrastThemed": {
-		"normal": "#FFFFFF",
-		"hover": "#F5F5F7",
-		"active": "#EBECEF"
+	"colorWriteBarInputBackground": {
+		"normal": "#F2F3F5",
+		"hover": "#E8EAEE",
+		"active": "#DFE1E6"
 	},
-	"colorIconPositive": {
-		"normal": "#4BB34B",
-		"hover": "#48AC4A",
-		"active": "#45A64A"
+	"colorWriteBarInputBorderAlpha": {
+		"normal": "rgba(0, 0, 0, 0.08)",
+		"hover": "rgba(0, 0, 0, 0.12)",
+		"active": "rgba(0, 0, 0, 0.16)"
 	},
-	"colorStrokeAccent": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+	"colorTrackBackground": {
+		"normal": "#E1E3E6",
+		"hover": "#D8DBDF",
+		"active": "#CFD2D8"
 	},
-	"colorStrokeAccentThemed": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+	"colorTrackBuffer": {
+		"normal": "#A0BFE4",
+		"hover": "#9AB8DD",
+		"active": "#93B1D7"
 	},
-	"colorStrokeContrast": {
+	"colorBackgroundModal": {
 		"normal": "#FFFFFF",
 		"hover": "#F5F5F7",
 		"active": "#EBECEF"
 	},
-	"colorStrokeNegative": {
-		"normal": "#E64646",
-		"hover": "#DD4446",
-		"active": "#D44245"
+	"colorImagePlaceholderAlpha": {
+		"normal": "rgba(0, 28, 61, 0.08)",
+		"hover": "rgba(0, 28, 61, 0.12)",
+		"active": "rgba(0, 28, 61, 0.16)"
 	},
-	"colorImageBorderAlpha": {
-		"normal": "rgba(0, 0, 0, 0.08)",
-		"hover": "rgba(0, 0, 0, 0.12)",
-		"active": "rgba(0, 0, 0, 0.16)"
+	"colorImagePlaceholder": {
+		"normal": "#F2F3F5",
+		"hover": "#E8EAEE",
+		"active": "#DFE1E6"
+	},
+	"colorSearchFieldBackground": {
+		"normal": "#EBEDF0",
+		"hover": "#E2E4E9",
+		"active": "#D8DBE2"
 	},
 	"colorFieldBorderAlpha": {
 		"normal": "rgba(0, 0, 0, 0.12)",
@@ -525,10 +503,50 @@
 		"hover": "#CED0D3",
 		"active": "#C6C8CD"
 	},
-	"colorStrokePositive": {
-		"normal": "#4BB34B",
-		"hover": "#48AC4A",
-		"active": "#45A64A"
+	"colorTextLink": {
+		"normal": "#2D81E0",
+		"hover": "#2B7CD9",
+		"active": "#2978D3"
+	},
+	"colorTextLinkThemed": {
+		"normal": "#4986CC",
+		"hover": "#4681C6",
+		"active": "#437DC1"
+	},
+	"colorTextMuted": {
+		"normal": "#2C2D2E",
+		"hover": "#2A2C2F",
+		"active": "#282B2F"
+	},
+	"colorTextPrimary": {
+		"normal": "#000000",
+		"hover": "#000102",
+		"active": "#000105"
+	},
+	"colorTextPrimaryInvariably": {
+		"normal": "#000000",
+		"hover": "#000102",
+		"active": "#000105"
+	},
+	"colorTextSecondary": {
+		"normal": "#818C99",
+		"hover": "#7C8795",
+		"active": "#778292"
+	},
+	"colorTextSubhead": {
+		"normal": "#6D7885",
+		"hover": "#697482",
+		"active": "#64707F"
+	},
+	"colorTextTertiary": {
+		"normal": "#99A2AD",
+		"hover": "#939CA9",
+		"active": "#8D96A4"
+	},
+	"colorWriteBarIcon": {
+		"normal": "#3F8AE0",
+		"hover": "#3C85D9",
+		"active": "#3A80D3"
 	},
 	"colorAccentBlue": {
 		"normal": "#3F8AE0",
@@ -565,75 +583,70 @@
 		"hover": "#742DBB",
 		"active": "#6F2CB6"
 	},
+	"colorSkeletonFrom": {
+		"normal": "#F5F5F5",
+		"hover": "#EBECEE",
+		"active": "#E1E3E6"
+	},
+	"colorSkeletonTo": {
+		"normal": "#E1E3E6",
+		"hover": "#D8DBDF",
+		"active": "#CFD2D8"
+	},
 	"colorAccentSecondary": {
 		"normal": "#3F8AE0",
 		"hover": "#3C85D9",
 		"active": "#3A80D3"
 	},
-	"colorActionSheetText": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+	"colorTextLinkVisited": {
+		"normal": "#4986CC",
+		"hover": "#4681C6",
+		"active": "#437DC1"
 	},
-	"colorHeaderBackground": {
+	"colorTextContrast": {
 		"normal": "#FFFFFF",
 		"hover": "#F5F5F7",
 		"active": "#EBECEF"
 	},
-	"colorPanelHeaderIcon": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
-	},
-	"colorWriteBarInputBackground": {
-		"normal": "#F2F3F5",
-		"hover": "#E8EAEE",
-		"active": "#DFE1E6"
-	},
-	"colorWriteBarInputBorderAlpha": {
-		"normal": "rgba(0, 0, 0, 0.08)",
-		"hover": "rgba(0, 0, 0, 0.12)",
-		"active": "rgba(0, 0, 0, 0.16)"
-	},
-	"colorTrackBackground": {
-		"normal": "#E1E3E6",
-		"hover": "#D8DBDF",
-		"active": "#CFD2D8"
+	"colorTextContrastThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#F5F5F7",
+		"active": "#EBECEF"
 	},
-	"colorTrackBuffer": {
-		"normal": "#A0BFE4",
-		"hover": "#9AB8DD",
-		"active": "#93B1D7"
+	"colorIconContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#F5F5F7",
+		"active": "#EBECEF"
 	},
-	"colorImagePlaceholderAlpha": {
-		"normal": "rgba(0, 28, 61, 0.08)",
-		"hover": "rgba(0, 28, 61, 0.12)",
-		"active": "rgba(0, 28, 61, 0.16)"
+	"colorIconContrastThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#F5F5F7",
+		"active": "#EBECEF"
 	},
-	"colorImagePlaceholder": {
-		"normal": "#F2F3F5",
-		"hover": "#E8EAEE",
-		"active": "#DFE1E6"
+	"colorLinkContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#F5F5F7",
+		"active": "#EBECEF"
 	},
-	"colorSearchFieldBackground": {
-		"normal": "#EBEDF0",
-		"hover": "#E2E4E9",
-		"active": "#D8DBE2"
+	"colorTextPositive": {
+		"normal": "#4BB34B",
+		"hover": "#48AC4A",
+		"active": "#45A64A"
 	},
-	"colorWriteBarIcon": {
-		"normal": "#3F8AE0",
-		"hover": "#3C85D9",
-		"active": "#3A80D3"
+	"colorBackgroundPositive": {
+		"normal": "#4BB34B",
+		"hover": "#48AC4A",
+		"active": "#45A64A"
 	},
-	"colorSkeletonFrom": {
-		"normal": "#F5F5F5",
-		"hover": "#EBECEE",
-		"active": "#E1E3E6"
+	"colorIconPositive": {
+		"normal": "#4BB34B",
+		"hover": "#48AC4A",
+		"active": "#45A64A"
 	},
-	"colorSkeletonTo": {
-		"normal": "#E1E3E6",
-		"hover": "#D8DBDF",
-		"active": "#CFD2D8"
+	"colorStrokePositive": {
+		"normal": "#4BB34B",
+		"hover": "#48AC4A",
+		"active": "#45A64A"
 	},
 	"colorAvatarOverlay": {
 		"normal": "rgba(129, 140, 153, 0.48)",