@vkontakte/vkui-tokens 4.0.0 → 4.2.0

package/themes/mediaDark/cssVars/theme/fallbacks/index.less

@@ -46,6 +46,10 @@
 @var(--vkui--prefix, vkui)-size-badge-m--regular: var(--vkui--size_badge_m--regular, 24px);
 @var(--vkui--prefix, vkui)-size-badge-l--regular: var(--vkui--size_badge_l--regular, 44px);
 @var(--vkui--prefix, vkui)-size-badge-x-l--regular: var(--vkui--size_badge_x_l--regular, 56px);
+@var(--vkui--prefix, vkui)-size-cardgrid-padding--regular: var(--vkui--size_cardgrid_padding--regular, 12px);
+@var(--vkui--prefix, vkui)-size-card-border-radius--regular: var(--vkui--size_card_border_radius--regular, 16px);
+@var(--vkui--prefix, vkui)-size-cardgrid-padding-vertical--regular: var(--vkui--size_cardgrid_padding_vertical--regular, 8px);
+@var(--vkui--prefix, vkui)-size-base-padding-horizontal--regular: var(--vkui--size_base_padding_horizontal--regular, 16px);
 @var(--vkui--prefix, vkui)-elevation1: var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
 @var(--vkui--prefix, vkui)-elevation2: var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 @var(--vkui--prefix, vkui)-elevation3: var(--vkui--elevation3, 0 4px 20px 0 rgba(0,0,0,.16));
@@ -144,6 +148,7 @@
 @var(--vkui--prefix, vkui)-tone-value-focus: var(--vkui--tone_value_focus, 0.08);
 @var(--vkui--prefix, vkui)-type-border-button: var(--vkui--type_border_button, solid);
 @var(--vkui--prefix, vkui)-type-border-position: var(--vkui--type_border_position, inset);
+@var(--vkui--prefix, vkui)-theme-name-base: 'var\(--vkui--theme_name_base\,\ media\)';
 @var(--vkui--prefix, vkui)-font-family-article: var(--vkui--font_family_article, Georgia, serif);
 @var(--vkui--prefix, vkui)-font-weight-article1: var(--vkui--font_weight_article1, 400);
 @var(--vkui--prefix, vkui)-font-weight-article2: var(--vkui--font_weight_article2, 700);
@@ -519,13 +524,13 @@
 }
 .var(--vkui--prefix, vkui)-font-title3--regular {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--regular, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--regular, 600);
 }
 .var(--vkui--prefix, vkui)-font-title3--compact {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--compact, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--compact, 600);
 }

package/themes/mediaDark/cssVars/theme/fallbacks/index.pcss

@@ -47,6 +47,10 @@
 	--var(--vkui--prefix, vkui)--size-badge-m--regular: var(--vkui--size_badge_m--regular, 24px);
 	--var(--vkui--prefix, vkui)--size-badge-l--regular: var(--vkui--size_badge_l--regular, 44px);
 	--var(--vkui--prefix, vkui)--size-badge-x-l--regular: var(--vkui--size_badge_x_l--regular, 56px);
+	--var(--vkui--prefix, vkui)--size-cardgrid-padding--regular: var(--vkui--size_cardgrid_padding--regular, 12px);
+	--var(--vkui--prefix, vkui)--size-card-border-radius--regular: var(--vkui--size_card_border_radius--regular, 16px);
+	--var(--vkui--prefix, vkui)--size-cardgrid-padding-vertical--regular: var(--vkui--size_cardgrid_padding_vertical--regular, 8px);
+	--var(--vkui--prefix, vkui)--size-base-padding-horizontal--regular: var(--vkui--size_base_padding_horizontal--regular, 16px);
 	--var(--vkui--prefix, vkui)--elevation1: var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
 	--var(--vkui--prefix, vkui)--elevation2: var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 	--var(--vkui--prefix, vkui)--elevation3: var(--vkui--elevation3, 0 4px 20px 0 rgba(0,0,0,.16));
@@ -145,6 +149,7 @@
 	--var(--vkui--prefix, vkui)--tone-value-focus: var(--vkui--tone_value_focus, 0.08);
 	--var(--vkui--prefix, vkui)--type-border-button: var(--vkui--type_border_button, solid);
 	--var(--vkui--prefix, vkui)--type-border-position: var(--vkui--type_border_position, inset);
+	--var(--vkui--prefix, vkui)--theme-name-base: 'var\(--vkui--theme_name_base\,\ media\)';
 	--var(--vkui--prefix, vkui)--font-family-article: var(--vkui--font_family_article, Georgia, serif);
 	--var(--vkui--prefix, vkui)--font-weight-article1: var(--vkui--font_weight_article1, 400);
 	--var(--vkui--prefix, vkui)--font-weight-article2: var(--vkui--font_weight_article2, 700);
@@ -520,13 +525,13 @@
 }
 %var(--vkui--prefix, vkui)--font-title3--regular {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--regular, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--regular, 600);
 }
 %var(--vkui--prefix, vkui)--font-title3--compact {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--compact, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--compact, 600);
 }

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

@@ -46,6 +46,10 @@ $var(--vkui--prefix, vkui)-size-badge-s--regular: var(--vkui--size_badge_s--regu
 $var(--vkui--prefix, vkui)-size-badge-m--regular: var(--vkui--size_badge_m--regular, 24px);
 $var(--vkui--prefix, vkui)-size-badge-l--regular: var(--vkui--size_badge_l--regular, 44px);
 $var(--vkui--prefix, vkui)-size-badge-x-l--regular: var(--vkui--size_badge_x_l--regular, 56px);
+$var(--vkui--prefix, vkui)-size-cardgrid-padding--regular: var(--vkui--size_cardgrid_padding--regular, 12px);
+$var(--vkui--prefix, vkui)-size-card-border-radius--regular: var(--vkui--size_card_border_radius--regular, 16px);
+$var(--vkui--prefix, vkui)-size-cardgrid-padding-vertical--regular: var(--vkui--size_cardgrid_padding_vertical--regular, 8px);
+$var(--vkui--prefix, vkui)-size-base-padding-horizontal--regular: var(--vkui--size_base_padding_horizontal--regular, 16px);
 $var(--vkui--prefix, vkui)-elevation1: var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
 $var(--vkui--prefix, vkui)-elevation2: var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 $var(--vkui--prefix, vkui)-elevation3: var(--vkui--elevation3, 0 4px 20px 0 rgba(0,0,0,.16));
@@ -144,6 +148,7 @@ $var(--vkui--prefix, vkui)-tone-value-active: var(--vkui--tone_value_active, 0.0
 $var(--vkui--prefix, vkui)-tone-value-focus: var(--vkui--tone_value_focus, 0.08);
 $var(--vkui--prefix, vkui)-type-border-button: var(--vkui--type_border_button, solid);
 $var(--vkui--prefix, vkui)-type-border-position: var(--vkui--type_border_position, inset);
+$var(--vkui--prefix, vkui)-theme-name-base: 'var\(--vkui--theme_name_base\,\ media\)';
 $var(--vkui--prefix, vkui)-font-family-article: var(--vkui--font_family_article, Georgia, serif);
 $var(--vkui--prefix, vkui)-font-weight-article1: var(--vkui--font_weight_article1, 400);
 $var(--vkui--prefix, vkui)-font-weight-article2: var(--vkui--font_weight_article2, 700);
@@ -555,31 +560,31 @@ $var(--vkui--prefix, vkui)-font-title2--compact--map: (
 );
 @mixin var(--vkui--prefix, vkui)-font-title3--regular() {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--regular, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--regular, 600);
 }
 $var(--vkui--prefix, vkui)-font-title3--regular--map: (
 	'fontSize': "var(--vkui--font_title3--font_size--regular, 17px)",
-	'lineHeight': "var(--vkui--font_title3--line_height--regular, 24px)",
+	'lineHeight': "var(--vkui--font_title3--line_height--regular, 22px)",
 	'fontFamily': "var(--vkui--font_title3--font_family--regular, MailSans, Inter, Helvetica, Arial, sans-serif)",
 	'fontWeight': "var(--vkui--font_title3--font_weight--regular, 600)",
 );
 @mixin var(--vkui--prefix, vkui)-font-title3--compact() {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--compact, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--compact, 600);
 }
 $var(--vkui--prefix, vkui)-font-title3--regular--map: (
 	'fontSize': "var(--vkui--font_title3--font_size--regular, 17px)",
-	'lineHeight': "var(--vkui--font_title3--line_height--regular, 24px)",
+	'lineHeight': "var(--vkui--font_title3--line_height--regular, 22px)",
 	'fontFamily': "var(--vkui--font_title3--font_family--regular, MailSans, Inter, Helvetica, Arial, sans-serif)",
 	'fontWeight': "var(--vkui--font_title3--font_weight--regular, 600)",
 );
 $var(--vkui--prefix, vkui)-font-title3--compact--map: (
 	'fontSize': "var(--vkui--font_title3--font_size--regular, 17px)",
-	'lineHeight': "var(--vkui--font_title3--line_height--regular, 24px)",
+	'lineHeight': "var(--vkui--font_title3--line_height--regular, 22px)",
 	'fontFamily': "var(--vkui--font_title3--font_family--compact, MailSans, Inter, Helvetica, Arial, sans-serif)",
 	'fontWeight': "var(--vkui--font_title3--font_weight--compact, 600)",
 );

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

@@ -46,6 +46,10 @@ $var(--vkui--prefix, vkui)-size-badge-s--regular = var(--vkui--size_badge_s--reg
 $var(--vkui--prefix, vkui)-size-badge-m--regular = var(--vkui--size_badge_m--regular, 24px);
 $var(--vkui--prefix, vkui)-size-badge-l--regular = var(--vkui--size_badge_l--regular, 44px);
 $var(--vkui--prefix, vkui)-size-badge-x-l--regular = var(--vkui--size_badge_x_l--regular, 56px);
+$var(--vkui--prefix, vkui)-size-cardgrid-padding--regular = var(--vkui--size_cardgrid_padding--regular, 12px);
+$var(--vkui--prefix, vkui)-size-card-border-radius--regular = var(--vkui--size_card_border_radius--regular, 16px);
+$var(--vkui--prefix, vkui)-size-cardgrid-padding-vertical--regular = var(--vkui--size_cardgrid_padding_vertical--regular, 8px);
+$var(--vkui--prefix, vkui)-size-base-padding-horizontal--regular = var(--vkui--size_base_padding_horizontal--regular, 16px);
 $var(--vkui--prefix, vkui)-elevation1 = var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
 $var(--vkui--prefix, vkui)-elevation2 = var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 $var(--vkui--prefix, vkui)-elevation3 = var(--vkui--elevation3, 0 4px 20px 0 rgba(0,0,0,.16));
@@ -144,6 +148,7 @@ $var(--vkui--prefix, vkui)-tone-value-active = var(--vkui--tone_value_active, 0.
 $var(--vkui--prefix, vkui)-tone-value-focus = var(--vkui--tone_value_focus, 0.08);
 $var(--vkui--prefix, vkui)-type-border-button = var(--vkui--type_border_button, solid);
 $var(--vkui--prefix, vkui)-type-border-position = var(--vkui--type_border_position, inset);
+$var(--vkui--prefix, vkui)-theme-name-base = 'var\(--vkui--theme_name_base\,\ media\)';
 $var(--vkui--prefix, vkui)-font-family-article = var(--vkui--font_family_article, Georgia, serif);
 $var(--vkui--prefix, vkui)-font-weight-article1 = var(--vkui--font_weight_article1, 400);
 $var(--vkui--prefix, vkui)-font-weight-article2 = var(--vkui--font_weight_article2, 700);
@@ -519,13 +524,13 @@ var(--vkui--prefix, vkui)-font-title2--compact() {
 }
 var(--vkui--prefix, vkui)-font-title3--regular() {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--regular, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--regular, 600);
 }
 var(--vkui--prefix, vkui)-font-title3--compact() {
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: var(--vkui--font_title3--font_family--compact, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: var(--vkui--font_title3--font_weight--compact, 600);
 }

package/themes/mediaDark/cssVars/theme/index.js

@@ -159,7 +159,7 @@ var theme = {
             },
             "lineHeight": {
                 "name": "--vkui--font_title3--line_height--regular",
-                "value": "var(--vkui--font_title3--line_height--regular, 24px)"
+                "value": "var(--vkui--font_title3--line_height--regular, 22px)"
             },
             "fontFamily": {
                 "name": "--vkui--font_title3--font_family--regular",
@@ -1027,6 +1027,46 @@ var theme = {
             "value": "var(--vkui--size_badge_x_l--regular, 56px)"
         }
     },
+    "sizeCardgridPadding": {
+        "auto": {
+            "name": "--vkui--size_cardgrid_padding",
+            "value": "var(--vkui--size_cardgrid_padding)"
+        },
+        "regular": {
+            "name": "--vkui--size_cardgrid_padding--regular",
+            "value": "var(--vkui--size_cardgrid_padding--regular, 12px)"
+        }
+    },
+    "sizeCardBorderRadius": {
+        "auto": {
+            "name": "--vkui--size_card_border_radius",
+            "value": "var(--vkui--size_card_border_radius)"
+        },
+        "regular": {
+            "name": "--vkui--size_card_border_radius--regular",
+            "value": "var(--vkui--size_card_border_radius--regular, 16px)"
+        }
+    },
+    "sizeCardgridPaddingVertical": {
+        "auto": {
+            "name": "--vkui--size_cardgrid_padding_vertical",
+            "value": "var(--vkui--size_cardgrid_padding_vertical)"
+        },
+        "regular": {
+            "name": "--vkui--size_cardgrid_padding_vertical--regular",
+            "value": "var(--vkui--size_cardgrid_padding_vertical--regular, 8px)"
+        }
+    },
+    "sizeBasePaddingHorizontal": {
+        "auto": {
+            "name": "--vkui--size_base_padding_horizontal",
+            "value": "var(--vkui--size_base_padding_horizontal)"
+        },
+        "regular": {
+            "name": "--vkui--size_base_padding_horizontal--regular",
+            "value": "var(--vkui--size_base_padding_horizontal--regular, 16px)"
+        }
+    },
     "elevation1": {
         "name": "--vkui--elevation1",
         "value": "var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04))"
@@ -1917,6 +1957,10 @@ var theme = {
         "name": "--vkui--type_border_position",
         "value": "var(--vkui--type_border_position, inset)"
     },
+    "themeNameBase": {
+        "name": "--vkui--theme_name_base",
+        "value": "var(--vkui--theme_name_base, media)"
+    },
     "prefix": {
         "name": "--vkui--prefix",
         "value": "var(--vkui--prefix, vkui)"

package/themes/mediaDark/cssVars/theme/index.json

@@ -157,7 +157,7 @@
 			},
 			"lineHeight": {
 				"name": "--vkui--font_title3--line_height--regular",
-				"value": "var(--vkui--font_title3--line_height--regular, 24px)"
+				"value": "var(--vkui--font_title3--line_height--regular, 22px)"
 			},
 			"fontFamily": {
 				"name": "--vkui--font_title3--font_family--regular",
@@ -1025,6 +1025,46 @@
 			"value": "var(--vkui--size_badge_x_l--regular, 56px)"
 		}
 	},
+	"sizeCardgridPadding": {
+		"auto": {
+			"name": "--vkui--size_cardgrid_padding",
+			"value": "var(--vkui--size_cardgrid_padding)"
+		},
+		"regular": {
+			"name": "--vkui--size_cardgrid_padding--regular",
+			"value": "var(--vkui--size_cardgrid_padding--regular, 12px)"
+		}
+	},
+	"sizeCardBorderRadius": {
+		"auto": {
+			"name": "--vkui--size_card_border_radius",
+			"value": "var(--vkui--size_card_border_radius)"
+		},
+		"regular": {
+			"name": "--vkui--size_card_border_radius--regular",
+			"value": "var(--vkui--size_card_border_radius--regular, 16px)"
+		}
+	},
+	"sizeCardgridPaddingVertical": {
+		"auto": {
+			"name": "--vkui--size_cardgrid_padding_vertical",
+			"value": "var(--vkui--size_cardgrid_padding_vertical)"
+		},
+		"regular": {
+			"name": "--vkui--size_cardgrid_padding_vertical--regular",
+			"value": "var(--vkui--size_cardgrid_padding_vertical--regular, 8px)"
+		}
+	},
+	"sizeBasePaddingHorizontal": {
+		"auto": {
+			"name": "--vkui--size_base_padding_horizontal",
+			"value": "var(--vkui--size_base_padding_horizontal)"
+		},
+		"regular": {
+			"name": "--vkui--size_base_padding_horizontal--regular",
+			"value": "var(--vkui--size_base_padding_horizontal--regular, 16px)"
+		}
+	},
 	"elevation1": {
 		"name": "--vkui--elevation1",
 		"value": "var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04))"
@@ -1915,6 +1955,10 @@
 		"name": "--vkui--type_border_position",
 		"value": "var(--vkui--type_border_position, inset)"
 	},
+	"themeNameBase": {
+		"name": "--vkui--theme_name_base",
+		"value": "var(--vkui--theme_name_base, media)"
+	},
 	"prefix": {
 		"name": "--vkui--prefix",
 		"value": "var(--vkui--prefix, vkui)"

package/themes/mediaDark/index.css

@@ -21,7 +21,7 @@
 	--vkui--font_title2--font_family--compact: MailSans, Inter, Helvetica, Arial, sans-serif;
 	--vkui--font_title2--font_weight--compact: 600;
 	--vkui--font_title3--font_size--regular: 17px;
-	--vkui--font_title3--line_height--regular: 24px;
+	--vkui--font_title3--line_height--regular: 22px;
 	--vkui--font_title3--font_family--regular: MailSans, Inter, Helvetica, Arial, sans-serif;
 	--vkui--font_title3--font_weight--regular: 600;
 	--vkui--font_title3--font_family--compact: MailSans, Inter, Helvetica, Arial, sans-serif;
@@ -119,6 +119,10 @@
 	--vkui--size_badge_m--regular: 24px;
 	--vkui--size_badge_l--regular: 44px;
 	--vkui--size_badge_x_l--regular: 56px;
+	--vkui--size_cardgrid_padding--regular: 12px;
+	--vkui--size_card_border_radius--regular: 16px;
+	--vkui--size_cardgrid_padding_vertical--regular: 8px;
+	--vkui--size_base_padding_horizontal--regular: 16px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 4px 20px 0 rgba(0,0,0,.16);
@@ -241,6 +245,7 @@
 	--vkui--tone_value_focus: 0.08;
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
+	--vkui--theme_name_base: 'media';
 	--vkui--font_family_article: Georgia, serif;
 	--vkui--font_weight_article1: 400;
 	--vkui--font_weight_article2: 700;
@@ -662,8 +667,8 @@
 .vkui--font_title3--regular {
 	font-size: 17px;
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: 24px;
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: 22px;
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-family: var(--vkui--font_title3--font_family--regular, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: 600;
@@ -672,8 +677,8 @@
 .vkui--font_title3--compact {
 	font-size: 17px;
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: 24px;
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: 22px;
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-family: var(--vkui--font_title3--font_family--compact, MailSans, Inter, Helvetica, Arial, sans-serif);
 	font-weight: 600;

package/themes/mediaDark/index.js

@@ -37,7 +37,7 @@ var theme = {
     "fontTitle3": {
         "regular": {
             "fontSize": 17,
-            "lineHeight": 24,
+            "lineHeight": 22,
             "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
             "fontWeight": 600
         },
@@ -251,6 +251,18 @@ var theme = {
     "sizeBadgeXL": {
         "regular": 56
     },
+    "sizeCardgridPadding": {
+        "regular": 12
+    },
+    "sizeCardBorderRadius": {
+        "regular": 16
+    },
+    "sizeCardgridPaddingVertical": {
+        "regular": 8
+    },
+    "sizeBasePaddingHorizontal": {
+        "regular": 16
+    },
     "elevation1": "0 2px 0 0 rgba(0, 16, 61, 0.04)",
     "elevation2": "0 4px 32px 0 rgba(0, 16, 61, 0.32)",
     "elevation3": "0 4px 20px 0 rgba(0,0,0,.16)",
@@ -513,6 +525,7 @@ var theme = {
     "toneValueFocus": 0.08,
     "typeBorderButton": "solid",
     "typeBorderPosition": "inset",
+    "themeNameBase": "media",
     "prefix": "vkui",
     "fontFamilyArticle": "Georgia, serif",
     "fontWeightArticle1": 400,

package/themes/mediaDark/index.json

@@ -35,7 +35,7 @@
 	"fontTitle3": {
 		"regular": {
 			"fontSize": 17,
-			"lineHeight": 24,
+			"lineHeight": 22,
 			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
 			"fontWeight": 600
 		},
@@ -249,6 +249,18 @@
 	"sizeBadgeXL": {
 		"regular": 56
 	},
+	"sizeCardgridPadding": {
+		"regular": 12
+	},
+	"sizeCardBorderRadius": {
+		"regular": 16
+	},
+	"sizeCardgridPaddingVertical": {
+		"regular": 8
+	},
+	"sizeBasePaddingHorizontal": {
+		"regular": 16
+	},
 	"elevation1": "0 2px 0 0 rgba(0, 16, 61, 0.04)",
 	"elevation2": "0 4px 32px 0 rgba(0, 16, 61, 0.32)",
 	"elevation3": "0 4px 20px 0 rgba(0,0,0,.16)",
@@ -511,6 +523,7 @@
 	"toneValueFocus": 0.08,
 	"typeBorderButton": "solid",
 	"typeBorderPosition": "inset",
+	"themeNameBase": "media",
 	"prefix": "vkui",
 	"fontFamilyArticle": "Georgia, serif",
 	"fontWeightArticle1": 400,

package/themes/mediaDark/index.less

@@ -46,6 +46,10 @@
 @vkui-size-badge-m--regular: 24px;
 @vkui-size-badge-l--regular: 44px;
 @vkui-size-badge-x-l--regular: 56px;
+@vkui-size-cardgrid-padding--regular: 12px;
+@vkui-size-card-border-radius--regular: 16px;
+@vkui-size-cardgrid-padding-vertical--regular: 8px;
+@vkui-size-base-padding-horizontal--regular: 16px;
 @vkui-elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 @vkui-elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 @vkui-elevation3: 0 4px 20px 0 rgba(0,0,0,.16);
@@ -144,6 +148,7 @@
 @vkui-tone-value-focus: 0.08;
 @vkui-type-border-button: solid;
 @vkui-type-border-position: inset;
+@vkui-theme-name-base: 'media';
 @vkui-font-family-article: Georgia, serif;
 @vkui-font-weight-article1: 400;
 @vkui-font-weight-article2: 700;
@@ -519,13 +524,13 @@
 }
 .vkui-font-title3--regular {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }
 .vkui-font-title3--compact {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }

package/themes/mediaDark/index.pcss

@@ -47,6 +47,10 @@
 	--vkui--size-badge-m--regular: 24px;
 	--vkui--size-badge-l--regular: 44px;
 	--vkui--size-badge-x-l--regular: 56px;
+	--vkui--size-cardgrid-padding--regular: 12px;
+	--vkui--size-card-border-radius--regular: 16px;
+	--vkui--size-cardgrid-padding-vertical--regular: 8px;
+	--vkui--size-base-padding-horizontal--regular: 16px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 4px 20px 0 rgba(0,0,0,.16);
@@ -145,6 +149,7 @@
 	--vkui--tone-value-focus: 0.08;
 	--vkui--type-border-button: solid;
 	--vkui--type-border-position: inset;
+	--vkui--theme-name-base: 'media';
 	--vkui--font-family-article: Georgia, serif;
 	--vkui--font-weight-article1: 400;
 	--vkui--font-weight-article2: 700;
@@ -520,13 +525,13 @@
 }
 %vkui--font-title3--regular {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }
 %vkui--font-title3--compact {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }

package/themes/mediaDark/index.scss

@@ -46,6 +46,10 @@ $vkui-size-badge-s--regular: 16px;
 $vkui-size-badge-m--regular: 24px;
 $vkui-size-badge-l--regular: 44px;
 $vkui-size-badge-x-l--regular: 56px;
+$vkui-size-cardgrid-padding--regular: 12px;
+$vkui-size-card-border-radius--regular: 16px;
+$vkui-size-cardgrid-padding-vertical--regular: 8px;
+$vkui-size-base-padding-horizontal--regular: 16px;
 $vkui-elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 $vkui-elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 $vkui-elevation3: 0 4px 20px 0 rgba(0,0,0,.16);
@@ -144,6 +148,7 @@ $vkui-tone-value-active: 0.08;
 $vkui-tone-value-focus: 0.08;
 $vkui-type-border-button: solid;
 $vkui-type-border-position: inset;
+$vkui-theme-name-base: 'media';
 $vkui-font-family-article: Georgia, serif;
 $vkui-font-weight-article1: 400;
 $vkui-font-weight-article2: 700;
@@ -555,31 +560,31 @@ $vkui-font-title2--compact--map: (
 );
 @mixin vkui-font-title3--regular() {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }
 $vkui-font-title3--regular--map: (
 	'fontSize': 17px,
-	'lineHeight': 24px,
+	'lineHeight': 22px,
 	'fontFamily': "MailSans, Inter, Helvetica, Arial, sans-serif",
 	'fontWeight': 600,
 );
 @mixin vkui-font-title3--compact() {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }
 $vkui-font-title3--regular--map: (
 	'fontSize': 17px,
-	'lineHeight': 24px,
+	'lineHeight': 22px,
 	'fontFamily': "MailSans, Inter, Helvetica, Arial, sans-serif",
 	'fontWeight': 600,
 );
 $vkui-font-title3--compact--map: (
 	'fontSize': 17px,
-	'lineHeight': 24px,
+	'lineHeight': 22px,
 	'fontFamily': "MailSans, Inter, Helvetica, Arial, sans-serif",
 	'fontWeight': 600,
 );

package/themes/mediaDark/index.styl

@@ -46,6 +46,10 @@ $vkui-size-badge-s--regular = 16px;
 $vkui-size-badge-m--regular = 24px;
 $vkui-size-badge-l--regular = 44px;
 $vkui-size-badge-x-l--regular = 56px;
+$vkui-size-cardgrid-padding--regular = 12px;
+$vkui-size-card-border-radius--regular = 16px;
+$vkui-size-cardgrid-padding-vertical--regular = 8px;
+$vkui-size-base-padding-horizontal--regular = 16px;
 $vkui-elevation1 = 0 2px 0 0 rgba(0, 16, 61, 0.04);
 $vkui-elevation2 = 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 $vkui-elevation3 = 0 4px 20px 0 rgba(0,0,0,.16);
@@ -144,6 +148,7 @@ $vkui-tone-value-active = 0.08;
 $vkui-tone-value-focus = 0.08;
 $vkui-type-border-button = solid;
 $vkui-type-border-position = inset;
+$vkui-theme-name-base = 'media';
 $vkui-font-family-article = Georgia, serif;
 $vkui-font-weight-article1 = 400;
 $vkui-font-weight-article2 = 700;
@@ -519,13 +524,13 @@ vkui-font-title2--compact() {
 }
 vkui-font-title3--regular() {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }
 vkui-font-title3--compact() {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 600;
 }

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

@@ -21,7 +21,7 @@
 	--vkui--font_title2--font_family--compact: Proxima Nova, Arial, sans-serif;
 	--vkui--font_title2--font_weight--compact: 600;
 	--vkui--font_title3--font_size--regular: 17px;
-	--vkui--font_title3--line_height--regular: 24px;
+	--vkui--font_title3--line_height--regular: 22px;
 	--vkui--font_title3--font_family--regular: Proxima Nova, Arial, sans-serif;
 	--vkui--font_title3--font_weight--regular: 600;
 	--vkui--font_title3--font_family--compact: Proxima Nova, Arial, sans-serif;
@@ -117,6 +117,10 @@
 	--vkui--size_badge_m--regular: 24px;
 	--vkui--size_badge_l--regular: 44px;
 	--vkui--size_badge_x_l--regular: 56px;
+	--vkui--size_cardgrid_padding--regular: 12px;
+	--vkui--size_card_border_radius--regular: 16px;
+	--vkui--size_cardgrid_padding_vertical--regular: 8px;
+	--vkui--size_base_padding_horizontal--regular: 16px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 4px 20px 0 rgba(0,0,0,.16);
@@ -239,6 +243,7 @@
 	--vkui--tone_value_focus: 0.08;
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
+	--vkui--theme_name_base: 'mycom';
 	--vkui--font_family_article: Georgia, serif;
 	--vkui--font_weight_article1: 400;
 	--vkui--font_weight_article2: 700;
@@ -676,8 +681,8 @@
 .vkui--font_title3--regular {
 	font-size: 17px;
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: 24px;
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: 22px;
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-family: var(--vkui--font_title3--font_family--regular, Proxima Nova, Arial, sans-serif);
 	font-weight: 600;
@@ -692,8 +697,8 @@
 .vkui--font_title3--compact {
 	font-size: 17px;
 	font-size: var(--vkui--font_title3--font_size--regular, 17px);
-	line-height: 24px;
-	line-height: var(--vkui--font_title3--line_height--regular, 24px);
+	line-height: 22px;
+	line-height: var(--vkui--font_title3--line_height--regular, 22px);
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-family: var(--vkui--font_title3--font_family--compact, Proxima Nova, Arial, sans-serif);
 	font-weight: 600;
@@ -1201,6 +1206,10 @@
 	--vkui--size_badge_m: 24px;
 	--vkui--size_badge_l: 44px;
 	--vkui--size_badge_x_l: 56px;
+	--vkui--size_cardgrid_padding: 12px;
+	--vkui--size_card_border_radius: 16px;
+	--vkui--size_cardgrid_padding_vertical: 8px;
+	--vkui--size_base_padding_horizontal: 16px;
 	--vkui--font_h0--font_size: var(--vkui--font_h0--font_size--regular);
 	--vkui--font_h0--line_height: var(--vkui--font_h0--line_height--regular);
 	--vkui--font_h0--font_family: var(--vkui--font_h0--font_family--regular);