@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/themes/vkBaseDark/index.json

@@ -1,5 +1,6 @@
 {
 	"themeName": "vkBaseDark",
+	"themeNameBase": "vkBase",
 	"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
@@ -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,9 +274,9 @@
 	"opacityDisableAccessibility": 0.64,
 	"colorsScheme": "dark",
 	"colorBackgroundAccent": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
 	},
 	"colorBackgroundAccentThemed": {
 		"normal": "#FFFFFF",
@@ -271,9 +284,44 @@
 		"active": "#FFFFFF"
 	},
 	"colorBackgroundAccentAlternative": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorIconAccent": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorTextAccent": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorTextAccentThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorStrokeAccent": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorStrokeAccentThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorStrokeContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorActionSheetText": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
 	},
 	"colorBackgroundContent": {
 		"normal": "#19191A",
@@ -320,111 +368,36 @@
 		"hover": "#E74D4D",
 		"active": "#E85555"
 	},
-	"colorBackgroundModal": {
-		"normal": "#2D2D2E",
-		"hover": "#353536",
-		"active": "#3E3E3F"
-	},
-	"colorBackgroundPositive": {
-		"normal": "#4BB34B",
-		"hover": "#52B652",
-		"active": "#59B959"
-	},
 	"colorBackgroundNegativeTint": {
-		"normal": "#522e2e",
+		"normal": "#522E2E",
 		"hover": "#593636",
 		"active": "#603F3F"
 	},
-	"colorTextAccent": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
-	},
-	"colorTextAccentThemed": {
-		"normal": "#FFFFFF",
-		"hover": "#FFFFFF",
-		"active": "#FFFFFF"
-	},
 	"colorTextNegative": {
 		"normal": "#E64646",
 		"hover": "#E74D4D",
 		"active": "#E85555"
 	},
-	"colorTextLink": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
-	},
-	"colorTextLinkThemed": {
-		"normal": "#FFFFFF",
-		"hover": "#FFFFFF",
-		"active": "#FFFFFF"
-	},
-	"colorTextMuted": {
-		"normal": "#E1E3E6",
-		"hover": "#E2E4E7",
-		"active": "#E3E5E8"
-	},
-	"colorTextPrimary": {
-		"normal": "#E1E3E6",
-		"hover": "#E2E4E7",
-		"active": "#E3E5E8"
-	},
-	"colorTextPrimaryInvariably": {
-		"normal": "#000000",
-		"hover": "#0A0A0A",
-		"active": "#141414"
-	},
-	"colorTextSecondary": {
-		"normal": "#76787A",
-		"hover": "#7B7D7F",
-		"active": "#818385"
-	},
-	"colorTextSubhead": {
-		"normal": "#C1C3C6",
-		"hover": "#C3C5C8",
-		"active": "#C6C8CB"
-	},
-	"colorTextTertiary": {
-		"normal": "#636567",
-		"hover": "#696B6D",
-		"active": "#6F7173"
-	},
-	"colorTextLinkVisited": {
-		"normal": "#4986CC",
-		"hover": "#508BCE",
-		"active": "#5890D0"
-	},
-	"colorTextContrast": {
-		"normal": "#FFFFFF",
-		"hover": "#FFFFFF",
-		"active": "#FFFFFF"
-	},
-	"colorTextContrastThemed": {
-		"normal": "#000000",
-		"hover": "#0A0A0A",
-		"active": "#141414"
+	"colorIconNegative": {
+		"normal": "#E64646",
+		"hover": "#E74D4D",
+		"active": "#E85555"
 	},
-	"colorLinkContrast": {
-		"normal": "#FFFFFF",
-		"hover": "#FFFFFF",
-		"active": "#FFFFFF"
+	"colorStrokeNegative": {
+		"normal": "#E64646",
+		"hover": "#E74D4D",
+		"active": "#E85555"
 	},
-	"colorTextPositive": {
-		"normal": "#4BB34B",
-		"hover": "#52B652",
-		"active": "#59B959"
+	"colorHeaderBackground": {
+		"normal": "#19191A",
+		"hover": "#222223",
+		"active": "#2B2B2C"
 	},
-	"colorIconAccent": {
+	"colorPanelHeaderIcon": {
 		"normal": "#71AAEB",
 		"hover": "#77ADEC",
 		"active": "#7CB1ED"
 	},
-	"colorIconNegative": {
-		"normal": "#E64646",
-		"hover": "#E74D4D",
-		"active": "#E85555"
-	},
 	"colorIconPrimary": {
 		"normal": "#E1E3E6",
 		"hover": "#E2E4E7",
@@ -465,45 +438,50 @@
 		"hover": "rgba(255, 255, 255, 0.34)",
 		"active": "rgba(255, 255, 255, 0.38)"
 	},
-	"colorIconContrast": {
-		"normal": "#FFFFFF",
-		"hover": "#FFFFFF",
-		"active": "#FFFFFF"
+	"colorImageBorderAlpha": {
+		"normal": "rgba(255, 255, 255, 0.08)",
+		"hover": "rgba(255, 255, 255, 0.12)",
+		"active": "rgba(255, 255, 255, 0.16)"
 	},
-	"colorIconContrastThemed": {
-		"normal": "#000000",
-		"hover": "#0A0A0A",
-		"active": "#141414"
+	"colorWriteBarInputBackground": {
+		"normal": "#232324",
+		"hover": "#2C2C2D",
+		"active": "#353536"
 	},
-	"colorIconPositive": {
-		"normal": "#4BB34B",
-		"hover": "#52B652",
-		"active": "#59B959"
+	"colorWriteBarInputBorderAlpha": {
+		"normal": "rgba(255, 255, 255, 0.8)",
+		"hover": "rgba(255, 255, 255, 0.84)",
+		"active": "rgba(255, 255, 255, 0.88)"
 	},
-	"colorStrokeAccent": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
+	"colorTrackBackground": {
+		"normal": "#202021",
+		"hover": "#29292A",
+		"active": "#323233"
 	},
-	"colorStrokeAccentThemed": {
-		"normal": "#FFFFFF",
-		"hover": "#FFFFFF",
-		"active": "#FFFFFF"
+	"colorTrackBuffer": {
+		"normal": "#405772",
+		"hover": "#485E78",
+		"active": "#4F647D"
 	},
-	"colorStrokeContrast": {
-		"normal": "#FFFFFF",
-		"hover": "#FFFFFF",
-		"active": "#FFFFFF"
+	"colorBackgroundModal": {
+		"normal": "#2D2D2E",
+		"hover": "#353536",
+		"active": "#3E3E3F"
 	},
-	"colorStrokeNegative": {
-		"normal": "#E64646",
-		"hover": "#E74D4D",
-		"active": "#E85555"
+	"colorImagePlaceholderAlpha": {
+		"normal": "rgba(241, 247, 255, 0.08)",
+		"hover": "rgba(241, 247, 255, 0.12)",
+		"active": "rgba(241, 247, 255, 0.16)"
 	},
-	"colorImageBorderAlpha": {
-		"normal": "rgba(255, 255, 255, 0.08)",
-		"hover": "rgba(255, 255, 255, 0.12)",
-		"active": "rgba(255, 255, 255, 0.16)"
+	"colorImagePlaceholder": {
+		"normal": "#2A2B2C",
+		"hover": "#333334",
+		"active": "#3B3C3D"
+	},
+	"colorSearchFieldBackground": {
+		"normal": "#232324",
+		"hover": "#2C2C2D",
+		"active": "#353536"
 	},
 	"colorFieldBorderAlpha": {
 		"normal": "rgba(255, 255, 255, 0.12)",
@@ -525,15 +503,55 @@
 		"hover": "#19191A",
 		"active": "#222223"
 	},
-	"colorStrokePositive": {
-		"normal": "#4BB34B",
-		"hover": "#52B652",
-		"active": "#59B959"
+	"colorTextLink": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
+	},
+	"colorTextLinkThemed": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
+	},
+	"colorTextMuted": {
+		"normal": "#E1E3E6",
+		"hover": "#E2E4E7",
+		"active": "#E3E5E8"
+	},
+	"colorTextPrimary": {
+		"normal": "#E1E3E6",
+		"hover": "#E2E4E7",
+		"active": "#E3E5E8"
+	},
+	"colorTextPrimaryInvariably": {
+		"normal": "#000000",
+		"hover": "#0A0A0A",
+		"active": "#141414"
+	},
+	"colorTextSecondary": {
+		"normal": "#76787A",
+		"hover": "#7B7D7F",
+		"active": "#818385"
+	},
+	"colorTextSubhead": {
+		"normal": "#C1C3C6",
+		"hover": "#C3C5C8",
+		"active": "#C6C8CB"
+	},
+	"colorTextTertiary": {
+		"normal": "#636567",
+		"hover": "#696B6D",
+		"active": "#6F7173"
+	},
+	"colorWriteBarIcon": {
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
 	},
 	"colorAccentBlue": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
+		"normal": "#529EF4",
+		"hover": "#59A2F4",
+		"active": "#60A6F5"
 	},
 	"colorAccentGray": {
 		"normal": "#A3ADB8",
@@ -565,75 +583,70 @@
 		"hover": "#7E36C3",
 		"active": "#843FC5"
 	},
+	"colorSkeletonFrom": {
+		"normal": "#F5F5F5",
+		"hover": "#F5F5F5",
+		"active": "#F6F6F6"
+	},
+	"colorSkeletonTo": {
+		"normal": "#E1E3E6",
+		"hover": "#E2E4E7",
+		"active": "#E3E5E8"
+	},
 	"colorAccentSecondary": {
 		"normal": "#3F8AE0",
 		"hover": "#478FE1",
 		"active": "#4E93E2"
 	},
-	"colorActionSheetText": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
-	},
-	"colorHeaderBackground": {
-		"normal": "#19191A",
-		"hover": "#222223",
-		"active": "#2B2B2C"
-	},
-	"colorPanelHeaderIcon": {
-		"normal": "#71AAEB",
-		"hover": "#77ADEC",
-		"active": "#7CB1ED"
-	},
-	"colorWriteBarInputBackground": {
-		"normal": "#232324",
-		"hover": "#2C2C2D",
-		"active": "#353536"
+	"colorTextLinkVisited": {
+		"normal": "#4986CC",
+		"hover": "#508BCE",
+		"active": "#5890D0"
 	},
-	"colorWriteBarInputBorderAlpha": {
-		"normal": "rgba(255, 255, 255, 0.8)",
-		"hover": "rgba(255, 255, 255, 0.84)",
-		"active": "rgba(255, 255, 255, 0.88)"
+	"colorTextContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
 	},
-	"colorTrackBackground": {
-		"normal": "#202021",
-		"hover": "#29292A",
-		"active": "#323233"
+	"colorTextContrastThemed": {
+		"normal": "#000000",
+		"hover": "#0A0A0A",
+		"active": "#141414"
 	},
-	"colorTrackBuffer": {
-		"normal": "#405772",
-		"hover": "#485E78",
-		"active": "#4F647D"
+	"colorIconContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
 	},
-	"colorImagePlaceholderAlpha": {
-		"normal": "rgba(241, 247, 255, 0.08)",
-		"hover": "rgba(241, 247, 255, 0.12)",
-		"active": "rgba(241, 247, 255, 0.16)"
+	"colorIconContrastThemed": {
+		"normal": "#000000",
+		"hover": "#0A0A0A",
+		"active": "#141414"
 	},
-	"colorImagePlaceholder": {
-		"normal": "#2A2B2C",
-		"hover": "#333334",
-		"active": "#3B3C3D"
+	"colorLinkContrast": {
+		"normal": "#FFFFFF",
+		"hover": "#FFFFFF",
+		"active": "#FFFFFF"
 	},
-	"colorSearchFieldBackground": {
-		"normal": "#232324",
-		"hover": "#2C2C2D",
-		"active": "#353536"
+	"colorTextPositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
 	},
-	"colorWriteBarIcon": {
-		"normal": "#76787A",
-		"hover": "#7B7D7F",
-		"active": "#818385"
+	"colorBackgroundPositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
 	},
-	"colorSkeletonFrom": {
-		"normal": "#F5F5F5",
-		"hover": "#F5F5F5",
-		"active": "#F6F6F6"
+	"colorIconPositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
 	},
-	"colorSkeletonTo": {
-		"normal": "#E1E3E6",
-		"hover": "#E2E4E7",
-		"active": "#E3E5E8"
+	"colorStrokePositive": {
+		"normal": "#4BB34B",
+		"hover": "#52B652",
+		"active": "#59B959"
 	},
 	"colorAvatarOverlay": {
 		"normal": "rgba(129, 140, 153, 0.48)",