@vkontakte/vkui-tokens 4.0.0 → 4.2.0

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

@@ -139,7 +139,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",
@@ -995,6 +995,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, 0px 4px 12px rgba(18, 25, 43, 0.12))"
@@ -1833,6 +1873,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, home)"
+    },
     "homeFontFamilyDefault": {
         "name": "--vkui--home_font_family_default",
         "value": "var(--vkui--home_font_family_default, Helvetica, Arial, sans-serif)"

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

@@ -137,7 +137,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",
@@ -993,6 +993,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, 0px 4px 12px rgba(18, 25, 43, 0.12))"
@@ -1831,6 +1871,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, home)"
+	},
 	"homeFontFamilyDefault": {
 		"name": "--vkui--home_font_family_default",
 		"value": "var(--vkui--home_font_family_default, Helvetica, Arial, sans-serif)"

package/themes/home/index.css

@@ -17,7 +17,7 @@
 	--vkui--font_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_title2--font_weight--regular: 500;
 	--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, Helvetica, Arial, sans-serif;
 	--vkui--font_title3--font_weight--regular: 500;
 	--vkui--font_headline--font_size--regular: 15px;
@@ -113,6 +113,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: 0px 4px 12px rgba(18, 25, 43, 0.12);
 	--vkui--elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 	--vkui--elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
@@ -224,6 +228,7 @@
 	--vkui--tone_value_focus: 0.08;
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
+	--vkui--theme_name_base: 'home';
 	--vkui--home_font_family_default: Helvetica, Arial, sans-serif;
 	--vkui--home_font_weight_normal: 400;
 	--vkui--home_font_weight_bold: 700;
@@ -514,8 +519,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, Helvetica, Arial, sans-serif;
 	font-family: var(--vkui--font_title3--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;

package/themes/home/index.js

@@ -29,7 +29,7 @@ var theme = {
     "fontTitle3": {
         "regular": {
             "fontSize": 17,
-            "lineHeight": 24,
+            "lineHeight": 22,
             "fontFamily": "MailSans, Helvetica, Arial, sans-serif",
             "fontWeight": 500
         }
@@ -237,6 +237,18 @@ var theme = {
     "sizeBadgeXL": {
         "regular": 56
     },
+    "sizeCardgridPadding": {
+        "regular": 12
+    },
+    "sizeCardBorderRadius": {
+        "regular": 16
+    },
+    "sizeCardgridPaddingVertical": {
+        "regular": 8
+    },
+    "sizeBasePaddingHorizontal": {
+        "regular": 16
+    },
     "elevation1": "0px 4px 12px rgba(18, 25, 43, 0.12)",
     "elevation2": "0px 4px 20px rgba(18, 25, 43, 0.2)",
     "elevation3": "0px 16px 48px rgba(18, 25, 43, 0.28)",
@@ -480,6 +492,7 @@ var theme = {
     "toneValueFocus": 0.08,
     "typeBorderButton": "solid",
     "typeBorderPosition": "inset",
+    "themeNameBase": "home",
     "homeFontFamilyDefault": "Helvetica, Arial, sans-serif",
     "homeFontWeightNormal": "400",
     "homeFontWeightBold": "700",

package/themes/home/index.json

@@ -27,7 +27,7 @@
 	"fontTitle3": {
 		"regular": {
 			"fontSize": 17,
-			"lineHeight": 24,
+			"lineHeight": 22,
 			"fontFamily": "MailSans, Helvetica, Arial, sans-serif",
 			"fontWeight": 500
 		}
@@ -235,6 +235,18 @@
 	"sizeBadgeXL": {
 		"regular": 56
 	},
+	"sizeCardgridPadding": {
+		"regular": 12
+	},
+	"sizeCardBorderRadius": {
+		"regular": 16
+	},
+	"sizeCardgridPaddingVertical": {
+		"regular": 8
+	},
+	"sizeBasePaddingHorizontal": {
+		"regular": 16
+	},
 	"elevation1": "0px 4px 12px rgba(18, 25, 43, 0.12)",
 	"elevation2": "0px 4px 20px rgba(18, 25, 43, 0.2)",
 	"elevation3": "0px 16px 48px rgba(18, 25, 43, 0.28)",
@@ -478,6 +490,7 @@
 	"toneValueFocus": 0.08,
 	"typeBorderButton": "solid",
 	"typeBorderPosition": "inset",
+	"themeNameBase": "home",
 	"homeFontFamilyDefault": "Helvetica, Arial, sans-serif",
 	"homeFontWeightNormal": "400",
 	"homeFontWeightBold": "700",

package/themes/home/index.less

@@ -48,6 +48,10 @@
 @size-badge-m--regular: 24px;
 @size-badge-l--regular: 44px;
 @size-badge-x-l--regular: 56px;
+@size-cardgrid-padding--regular: 12px;
+@size-card-border-radius--regular: 16px;
+@size-cardgrid-padding-vertical--regular: 8px;
+@size-base-padding-horizontal--regular: 16px;
 @elevation1: 0px 4px 12px rgba(18, 25, 43, 0.12);
 @elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 @elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
@@ -141,6 +145,7 @@
 @tone-value-focus: 0.08;
 @type-border-button: solid;
 @type-border-position: inset;
+@theme-name-base: 'home';
 @home-font-family-default: Helvetica, Arial, sans-serif;
 @home-font-weight-normal: 400;
 @home-font-weight-bold: 700;
@@ -422,7 +427,7 @@
 }
 .font-title3--regular {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 	font-weight: 500;
 }

package/themes/home/index.pcss

@@ -49,6 +49,10 @@
 	--size-badge-m--regular: 24px;
 	--size-badge-l--regular: 44px;
 	--size-badge-x-l--regular: 56px;
+	--size-cardgrid-padding--regular: 12px;
+	--size-card-border-radius--regular: 16px;
+	--size-cardgrid-padding-vertical--regular: 8px;
+	--size-base-padding-horizontal--regular: 16px;
 	--elevation1: 0px 4px 12px rgba(18, 25, 43, 0.12);
 	--elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 	--elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
@@ -142,6 +146,7 @@
 	--tone-value-focus: 0.08;
 	--type-border-button: solid;
 	--type-border-position: inset;
+	--theme-name-base: 'home';
 	--home-font-family-default: Helvetica, Arial, sans-serif;
 	--home-font-weight-normal: 400;
 	--home-font-weight-bold: 700;
@@ -423,7 +428,7 @@
 }
 %font-title3--regular {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 	font-weight: 500;
 }

package/themes/home/index.scss

@@ -48,6 +48,10 @@ $size-badge-s--regular: 16px;
 $size-badge-m--regular: 24px;
 $size-badge-l--regular: 44px;
 $size-badge-x-l--regular: 56px;
+$size-cardgrid-padding--regular: 12px;
+$size-card-border-radius--regular: 16px;
+$size-cardgrid-padding-vertical--regular: 8px;
+$size-base-padding-horizontal--regular: 16px;
 $elevation1: 0px 4px 12px rgba(18, 25, 43, 0.12);
 $elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 $elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
@@ -141,6 +145,7 @@ $tone-value-active: 0.08;
 $tone-value-focus: 0.08;
 $type-border-button: solid;
 $type-border-position: inset;
+$theme-name-base: 'home';
 $home-font-family-default: Helvetica, Arial, sans-serif;
 $home-font-weight-normal: 400;
 $home-font-weight-bold: 700;
@@ -434,13 +439,13 @@ $font-title2--regular--map: (
 );
 @mixin font-title3--regular() {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 	font-weight: 500;
 }
 $font-title3--regular--map: (
 	'fontSize': 17px,
-	'lineHeight': 24px,
+	'lineHeight': 22px,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 	'fontWeight': 500,
 );

package/themes/home/index.styl

@@ -48,6 +48,10 @@ $size-badge-s--regular = 16px;
 $size-badge-m--regular = 24px;
 $size-badge-l--regular = 44px;
 $size-badge-x-l--regular = 56px;
+$size-cardgrid-padding--regular = 12px;
+$size-card-border-radius--regular = 16px;
+$size-cardgrid-padding-vertical--regular = 8px;
+$size-base-padding-horizontal--regular = 16px;
 $elevation1 = 0px 4px 12px rgba(18, 25, 43, 0.12);
 $elevation2 = 0px 4px 20px rgba(18, 25, 43, 0.2);
 $elevation3 = 0px 16px 48px rgba(18, 25, 43, 0.28);
@@ -141,6 +145,7 @@ $tone-value-active = 0.08;
 $tone-value-focus = 0.08;
 $type-border-button = solid;
 $type-border-position = inset;
+$theme-name-base = 'home';
 $home-font-family-default = Helvetica, Arial, sans-serif;
 $home-font-weight-normal = 400;
 $home-font-weight-bold = 700;
@@ -422,7 +427,7 @@ font-title2--regular() {
 }
 font-title3--regular() {
 	font-size: 17px;
-	line-height: 24px;
+	line-height: 22px;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 	font-weight: 500;
 }

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

@@ -17,7 +17,7 @@
 	--vkui--font_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_title2--font_weight--regular: 500;
 	--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, Helvetica, Arial, sans-serif;
 	--vkui--font_title3--font_weight--regular: 500;
 	--vkui--font_headline--font_size--regular: 15px;
@@ -113,6 +113,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: 0px 4px 12px rgba(18, 25, 43, 0.12);
 	--vkui--elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 	--vkui--elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
@@ -526,8 +530,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, Helvetica, Arial, sans-serif;
 	font-family: var(--vkui--font_title3--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
@@ -828,7 +832,7 @@
 	--vkui--font_title2--font_family: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_title2--font_weight: 500;
 	--vkui--font_title3--font_size: 17px;
-	--vkui--font_title3--line_height: 24px;
+	--vkui--font_title3--line_height: 22px;
 	--vkui--font_title3--font_family: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_title3--font_weight: 500;
 	--vkui--font_headline--font_size: 15px;
@@ -916,6 +920,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);