@vkontakte/vkui-tokens 4.5.2 → 4.8.0

package/themes/media/index.js

@@ -15,11 +15,11 @@ var theme = {
             "fontSize": 24,
             "lineHeight": 28,
             "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontWeight": 500
         },
         "compact": {
             "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontWeight": 500
         }
     },
     "fontTitle2": {
@@ -27,11 +27,11 @@ var theme = {
             "fontSize": 20,
             "lineHeight": 26,
             "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontWeight": 500
         },
         "compact": {
             "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontWeight": 500
         }
     },
     "fontTitle3": {
@@ -39,47 +39,51 @@ var theme = {
             "fontSize": 17,
             "lineHeight": 22,
             "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontWeight": 500
         },
         "compact": {
             "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontWeight": 500
         }
     },
     "fontHeadline1": {
         "regular": {
-            "fontSize": 16,
+            "fontSize": 15,
             "lineHeight": 20,
-            "fontFamily": "Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 400
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500
         },
         "compact": {
-            "fontSize": 15,
-            "lineHeight": 20
+            "fontSize": 16,
+            "lineHeight": 20,
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500
         }
     },
     "fontHeadline2": {
         "regular": {
-            "fontSize": 15,
+            "fontSize": 14,
             "lineHeight": 20,
-            "fontFamily": "Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 400
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500
         },
         "compact": {
-            "fontSize": 14,
-            "lineHeight": 20
+            "fontSize": 15,
+            "lineHeight": 20,
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500
         }
     },
     "fontText": {
         "regular": {
-            "fontSize": 16,
+            "fontSize": 15,
             "lineHeight": 20,
             "fontFamily": "Inter, Helvetica, Arial, sans-serif",
             "fontWeight": 400
         },
         "compact": {
-            "fontSize": 15,
-            "lineHeight": 20
+            "fontSize": 16,
+            "lineHeight": 24
         }
     },
     "fontParagraph": {
@@ -92,16 +96,15 @@ var theme = {
     },
     "fontSubhead": {
         "regular": {
-            "fontSize": 14,
+            "fontSize": 13,
             "lineHeight": 18,
-            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontFamily": "Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 400
         },
         "compact": {
-            "fontSize": 13,
+            "fontSize": 14,
             "lineHeight": 18,
-            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 600
+            "fontWeight": 400
         }
     },
     "fontFootnote": {
@@ -110,7 +113,8 @@ var theme = {
             "lineHeight": 18,
             "fontFamily": "Inter, Helvetica, Arial, sans-serif",
             "fontWeight": 400
-        }
+        },
+        "compact": {}
     },
     "fontFootnoteCaps": {
         "regular": {
@@ -120,7 +124,8 @@ var theme = {
             "fontWeight": 400,
             "textTransform": "uppercase",
             "letterSpacing": "0.3px"
-        }
+        },
+        "compact": {}
     },
     "fontCaption1": {
         "regular": {
@@ -128,7 +133,8 @@ var theme = {
             "lineHeight": 16,
             "fontFamily": "Inter, Helvetica, Arial, sans-serif",
             "fontWeight": 400
-        }
+        },
+        "compact": {}
     },
     "fontCaption1Caps": {
         "regular": {
@@ -138,7 +144,8 @@ var theme = {
             "fontWeight": 400,
             "textTransform": "uppercase",
             "letterSpacing": "0.26px"
-        }
+        },
+        "compact": {}
     },
     "fontCaption2": {
         "regular": {
@@ -146,7 +153,8 @@ var theme = {
             "lineHeight": 14,
             "fontFamily": "Inter, Helvetica, Arial, sans-serif",
             "fontWeight": 400
-        }
+        },
+        "compact": {}
     },
     "fontCaption2Caps": {
         "regular": {
@@ -156,7 +164,8 @@ var theme = {
             "fontWeight": 400,
             "textTransform": "uppercase",
             "letterSpacing": "0.22px"
-        }
+        },
+        "compact": {}
     },
     "fontCaption3": {
         "regular": {
@@ -164,7 +173,8 @@ var theme = {
             "lineHeight": 12,
             "fontFamily": "Inter, Helvetica, Arial, sans-serif",
             "fontWeight": 400
-        }
+        },
+        "compact": {}
     },
     "fontCaption3Caps": {
         "regular": {
@@ -174,7 +184,8 @@ var theme = {
             "fontWeight": 400,
             "textTransform": "uppercase",
             "letterSpacing": "0.16px"
-        }
+        },
+        "compact": {}
     },
     "sizeSelectIconPadding": {
         "compactX": 7,
@@ -302,7 +313,11 @@ var theme = {
     "sizeButtonGroupGapMedium": {
         "regular": 12
     },
+    "sizeOptionHierarchy": {
+        "regular": 32
+    },
     "elevation1": "0 2px 0 0 rgba(0, 16, 61, 0.04)",
+    "elevation1InvertY": "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)",
     "elevation4": "0 16px 48px 0 rgba(0, 0, 0, 0.48)",
@@ -569,6 +584,93 @@ var theme = {
     "fontFamilyArticle": "Georgia, serif",
     "fontWeightArticle1": 400,
     "fontWeightArticle2": 700,
+    "mediaFontMediaHeader": {
+        "regular": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 36,
+            "lineHeight": 44,
+            "letterSpacing": "-0.5%"
+        },
+        "compact": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 40,
+            "lineHeight": 48,
+            "letterSpacing": "-0.5%"
+        }
+    },
+    "mediaFontMediaTitle1": {
+        "regular": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 28,
+            "lineHeight": 36
+        },
+        "compact": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 28,
+            "lineHeight": 36
+        }
+    },
+    "mediaFontMediaTitle2": {
+        "regular": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 24,
+            "lineHeight": 32
+        },
+        "compact": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 24,
+            "lineHeight": 32
+        }
+    },
+    "mediaFontMediaTitle3": {
+        "regular": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 20,
+            "lineHeight": 28
+        },
+        "compact": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 20,
+            "lineHeight": 28
+        }
+    },
+    "mediaFontMediaLead": {
+        "regular": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 19,
+            "lineHeight": 28
+        },
+        "compact": {
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500,
+            "fontSize": 22,
+            "lineHeight": 32,
+            "letterSpacing": "-0.3%"
+        }
+    },
+    "mediaFontMediaParagraph": {
+        "regular": {
+            "fontFamily": "Georgia, serif",
+            "fontWeight": 400,
+            "fontSize": 18,
+            "lineHeight": 28
+        },
+        "compact": {
+            "fontFamily": "Georgia, serif",
+            "fontWeight": 400,
+            "fontSize": 19,
+            "lineHeight": 32
+        }
+    },
     "fontH3": {
         "regular": {
             "fontSize": 20,
@@ -670,14 +772,16 @@ var theme = {
     },
     "fontHeadline": {
         "regular": {
-            "fontSize": 16,
+            "fontSize": 15,
             "lineHeight": 20,
-            "fontFamily": "Inter, Helvetica, Arial, sans-serif",
-            "fontWeight": 400
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500
         },
         "compact": {
-            "fontSize": 15,
-            "lineHeight": 20
+            "fontSize": 16,
+            "lineHeight": 20,
+            "fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+            "fontWeight": 500
         }
     },
     "colorsScheme": "light",
@@ -756,6 +860,11 @@ var theme = {
         "hover": "#F0E2E4",
         "active": "#E6D9DD"
     },
+    "colorFieldBackground": {
+        "normal": "#ffffff",
+        "hover": "#F5F5F7",
+        "active": "#EBECEF"
+    },
     "colorTextAccent": {
         "normal": "#005FF9",
         "hover": "#005CF1",

package/themes/media/index.json

@@ -13,11 +13,11 @@
 			"fontSize": 24,
 			"lineHeight": 28,
 			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontWeight": 500
 		},
 		"compact": {
 			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontWeight": 500
 		}
 	},
 	"fontTitle2": {
@@ -25,11 +25,11 @@
 			"fontSize": 20,
 			"lineHeight": 26,
 			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontWeight": 500
 		},
 		"compact": {
 			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontWeight": 500
 		}
 	},
 	"fontTitle3": {
@@ -37,47 +37,51 @@
 			"fontSize": 17,
 			"lineHeight": 22,
 			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontWeight": 500
 		},
 		"compact": {
 			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontWeight": 500
 		}
 	},
 	"fontHeadline1": {
 		"regular": {
-			"fontSize": 16,
+			"fontSize": 15,
 			"lineHeight": 20,
-			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 400
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500
 		},
 		"compact": {
-			"fontSize": 15,
-			"lineHeight": 20
+			"fontSize": 16,
+			"lineHeight": 20,
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500
 		}
 	},
 	"fontHeadline2": {
 		"regular": {
-			"fontSize": 15,
+			"fontSize": 14,
 			"lineHeight": 20,
-			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 400
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500
 		},
 		"compact": {
-			"fontSize": 14,
-			"lineHeight": 20
+			"fontSize": 15,
+			"lineHeight": 20,
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500
 		}
 	},
 	"fontText": {
 		"regular": {
-			"fontSize": 16,
+			"fontSize": 15,
 			"lineHeight": 20,
 			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
 			"fontWeight": 400
 		},
 		"compact": {
-			"fontSize": 15,
-			"lineHeight": 20
+			"fontSize": 16,
+			"lineHeight": 24
 		}
 	},
 	"fontParagraph": {
@@ -90,16 +94,15 @@
 	},
 	"fontSubhead": {
 		"regular": {
-			"fontSize": 14,
+			"fontSize": 13,
 			"lineHeight": 18,
-			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 400
 		},
 		"compact": {
-			"fontSize": 13,
+			"fontSize": 14,
 			"lineHeight": 18,
-			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 600
+			"fontWeight": 400
 		}
 	},
 	"fontFootnote": {
@@ -108,7 +111,8 @@
 			"lineHeight": 18,
 			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
 			"fontWeight": 400
-		}
+		},
+		"compact": {}
 	},
 	"fontFootnoteCaps": {
 		"regular": {
@@ -118,7 +122,8 @@
 			"fontWeight": 400,
 			"textTransform": "uppercase",
 			"letterSpacing": "0.3px"
-		}
+		},
+		"compact": {}
 	},
 	"fontCaption1": {
 		"regular": {
@@ -126,7 +131,8 @@
 			"lineHeight": 16,
 			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
 			"fontWeight": 400
-		}
+		},
+		"compact": {}
 	},
 	"fontCaption1Caps": {
 		"regular": {
@@ -136,7 +142,8 @@
 			"fontWeight": 400,
 			"textTransform": "uppercase",
 			"letterSpacing": "0.26px"
-		}
+		},
+		"compact": {}
 	},
 	"fontCaption2": {
 		"regular": {
@@ -144,7 +151,8 @@
 			"lineHeight": 14,
 			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
 			"fontWeight": 400
-		}
+		},
+		"compact": {}
 	},
 	"fontCaption2Caps": {
 		"regular": {
@@ -154,7 +162,8 @@
 			"fontWeight": 400,
 			"textTransform": "uppercase",
 			"letterSpacing": "0.22px"
-		}
+		},
+		"compact": {}
 	},
 	"fontCaption3": {
 		"regular": {
@@ -162,7 +171,8 @@
 			"lineHeight": 12,
 			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
 			"fontWeight": 400
-		}
+		},
+		"compact": {}
 	},
 	"fontCaption3Caps": {
 		"regular": {
@@ -172,7 +182,8 @@
 			"fontWeight": 400,
 			"textTransform": "uppercase",
 			"letterSpacing": "0.16px"
-		}
+		},
+		"compact": {}
 	},
 	"sizeSelectIconPadding": {
 		"compactX": 7,
@@ -300,7 +311,11 @@
 	"sizeButtonGroupGapMedium": {
 		"regular": 12
 	},
+	"sizeOptionHierarchy": {
+		"regular": 32
+	},
 	"elevation1": "0 2px 0 0 rgba(0, 16, 61, 0.04)",
+	"elevation1InvertY": "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)",
 	"elevation4": "0 16px 48px 0 rgba(0, 0, 0, 0.48)",
@@ -567,6 +582,93 @@
 	"fontFamilyArticle": "Georgia, serif",
 	"fontWeightArticle1": 400,
 	"fontWeightArticle2": 700,
+	"mediaFontMediaHeader": {
+		"regular": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 36,
+			"lineHeight": 44,
+			"letterSpacing": "-0.5%"
+		},
+		"compact": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 40,
+			"lineHeight": 48,
+			"letterSpacing": "-0.5%"
+		}
+	},
+	"mediaFontMediaTitle1": {
+		"regular": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 28,
+			"lineHeight": 36
+		},
+		"compact": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 28,
+			"lineHeight": 36
+		}
+	},
+	"mediaFontMediaTitle2": {
+		"regular": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 24,
+			"lineHeight": 32
+		},
+		"compact": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 24,
+			"lineHeight": 32
+		}
+	},
+	"mediaFontMediaTitle3": {
+		"regular": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 20,
+			"lineHeight": 28
+		},
+		"compact": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 20,
+			"lineHeight": 28
+		}
+	},
+	"mediaFontMediaLead": {
+		"regular": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 19,
+			"lineHeight": 28
+		},
+		"compact": {
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500,
+			"fontSize": 22,
+			"lineHeight": 32,
+			"letterSpacing": "-0.3%"
+		}
+	},
+	"mediaFontMediaParagraph": {
+		"regular": {
+			"fontFamily": "Georgia, serif",
+			"fontWeight": 400,
+			"fontSize": 18,
+			"lineHeight": 28
+		},
+		"compact": {
+			"fontFamily": "Georgia, serif",
+			"fontWeight": 400,
+			"fontSize": 19,
+			"lineHeight": 32
+		}
+	},
 	"fontH3": {
 		"regular": {
 			"fontSize": 20,
@@ -668,14 +770,16 @@
 	},
 	"fontHeadline": {
 		"regular": {
-			"fontSize": 16,
+			"fontSize": 15,
 			"lineHeight": 20,
-			"fontFamily": "Inter, Helvetica, Arial, sans-serif",
-			"fontWeight": 400
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500
 		},
 		"compact": {
-			"fontSize": 15,
-			"lineHeight": 20
+			"fontSize": 16,
+			"lineHeight": 20,
+			"fontFamily": "MailSans, Inter, Helvetica, Arial, sans-serif",
+			"fontWeight": 500
 		}
 	},
 	"colorsScheme": "light",
@@ -754,6 +858,11 @@
 		"hover": "#F0E2E4",
 		"active": "#E6D9DD"
 	},
+	"colorFieldBackground": {
+		"normal": "#ffffff",
+		"hover": "#F5F5F7",
+		"active": "#EBECEF"
+	},
 	"colorTextAccent": {
 		"normal": "#005FF9",
 		"hover": "#005CF1",