@vkontakte/vkui-tokens 4.5.2 → 4.6.0

package/themes/mediaDark/index.less

@@ -229,6 +229,9 @@
 @vkui-color-background-negative-tint: #522e2e;
 @vkui-color-background-negative-tint--hover: #593636;
 @vkui-color-background-negative-tint--active: #603F3F;
+@vkui-color-field-background: #232324;
+@vkui-color-field-background--hover: #2C2C2D;
+@vkui-color-field-background--active: #353536;
 @vkui-color-text-accent: #3C82FD;
 @vkui-color-text-accent--hover: #4487FD;
 @vkui-color-text-accent--active: #4C8CFD;
@@ -505,71 +508,71 @@
 	font-size: 24px;
 	line-height: 28px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .vkui-font-title1--compact {
 	font-size: 24px;
 	line-height: 28px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .vkui-font-title2--regular {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .vkui-font-title2--compact {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .vkui-font-title3--regular {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .vkui-font-title3--compact {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .vkui-font-headline1--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 .vkui-font-headline1--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 .vkui-font-headline2--regular {
-	font-size: 15px;
+	font-size: 14px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 .vkui-font-headline2--compact {
-	font-size: 14px;
+	font-size: 15px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 .vkui-font-text--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
 .vkui-font-text--compact {
-	font-size: 15px;
-	line-height: 20px;
+	font-size: 16px;
+	line-height: 24px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
@@ -580,16 +583,16 @@
 	font-weight: 400;
 }
 .vkui-font-subhead--regular {
-	font-size: 14px;
+	font-size: 13px;
 	line-height: 18px;
-	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
 }
 .vkui-font-subhead--compact {
-	font-size: 13px;
+	font-size: 14px;
 	line-height: 18px;
-	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
 }
 .vkui-font-footnote--regular {
 	font-size: 13px;
@@ -597,6 +600,12 @@
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+.vkui-font-footnote--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 .vkui-font-footnote-caps--regular {
 	font-size: 13px;
 	line-height: 18px;
@@ -605,12 +614,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.3px;
 }
+.vkui-font-footnote-caps--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.3px;
+}
 .vkui-font-caption1--regular {
 	font-size: 12px;
 	line-height: 16px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+.vkui-font-caption1--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 .vkui-font-caption1-caps--regular {
 	font-size: 12px;
 	line-height: 16px;
@@ -619,12 +642,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.26px;
 }
+.vkui-font-caption1-caps--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.26px;
+}
 .vkui-font-caption2--regular {
 	font-size: 11px;
 	line-height: 14px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+.vkui-font-caption2--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 .vkui-font-caption2-caps--regular {
 	font-size: 11px;
 	line-height: 14px;
@@ -633,12 +670,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.22px;
 }
+.vkui-font-caption2-caps--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.22px;
+}
 .vkui-font-caption3--regular {
 	font-size: 9px;
 	line-height: 12px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+.vkui-font-caption3--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 .vkui-font-caption3-caps--regular {
 	font-size: 9px;
 	line-height: 12px;
@@ -647,6 +698,14 @@
 	text-transform: uppercase;
 	letter-spacing: 0.16px;
 }
+.vkui-font-caption3-caps--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.16px;
+}
 .vkui-font-h0--regular {
 	font-size: 28px;
 	line-height: 32px;
@@ -683,6 +742,81 @@
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 500;
 }
+.vkui-media-font-media-header--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 36px;
+	line-height: 44px;
+	letter-spacing: -0.5%;
+}
+.vkui-media-font-media-header--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 40px;
+	line-height: 48px;
+	letter-spacing: -0.5%;
+}
+.vkui-media-font-media-title1--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+.vkui-media-font-media-title1--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+.vkui-media-font-media-title2--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+.vkui-media-font-media-title2--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+.vkui-media-font-media-title3--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+.vkui-media-font-media-title3--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+.vkui-media-font-media-lead--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 19px;
+	line-height: 28px;
+}
+.vkui-media-font-media-lead--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 22px;
+	line-height: 32px;
+	letter-spacing: -0.3%;
+}
+.vkui-media-font-media-paragraph--regular {
+	font-family: Georgia, serif;
+	font-weight: 400;
+	font-size: 18px;
+	line-height: 28px;
+}
+.vkui-media-font-media-paragraph--compact {
+	font-family: Georgia, serif;
+	font-weight: 400;
+	font-size: 19px;
+	line-height: 32px;
+}
 .vkui-font-h3--regular {
 	font-size: 20px;
 	line-height: 26px;
@@ -727,16 +861,16 @@
 	font-weight: 500;
 }
 .vkui-font-headline--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 .vkui-font-headline--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 .media-width-touch(@content) {
 	@media (max-width: 767px) { @content; }

package/themes/mediaDark/index.pcss

@@ -230,6 +230,9 @@
 	--vkui--color-background-negative-tint: #522e2e;
 	--vkui--color-background-negative-tint--hover: #593636;
 	--vkui--color-background-negative-tint--active: #603F3F;
+	--vkui--color-field-background: #232324;
+	--vkui--color-field-background--hover: #2C2C2D;
+	--vkui--color-field-background--active: #353536;
 	--vkui--color-text-accent: #3C82FD;
 	--vkui--color-text-accent--hover: #4487FD;
 	--vkui--color-text-accent--active: #4C8CFD;
@@ -506,71 +509,71 @@
 	font-size: 24px;
 	line-height: 28px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %vkui--font-title1--compact {
 	font-size: 24px;
 	line-height: 28px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %vkui--font-title2--regular {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %vkui--font-title2--compact {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %vkui--font-title3--regular {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %vkui--font-title3--compact {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %vkui--font-headline1--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 %vkui--font-headline1--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 %vkui--font-headline2--regular {
-	font-size: 15px;
+	font-size: 14px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 %vkui--font-headline2--compact {
-	font-size: 14px;
+	font-size: 15px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 %vkui--font-text--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
 %vkui--font-text--compact {
-	font-size: 15px;
-	line-height: 20px;
+	font-size: 16px;
+	line-height: 24px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
@@ -581,16 +584,16 @@
 	font-weight: 400;
 }
 %vkui--font-subhead--regular {
-	font-size: 14px;
+	font-size: 13px;
 	line-height: 18px;
-	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
 }
 %vkui--font-subhead--compact {
-	font-size: 13px;
+	font-size: 14px;
 	line-height: 18px;
-	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
-	font-weight: 600;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
 }
 %vkui--font-footnote--regular {
 	font-size: 13px;
@@ -598,6 +601,12 @@
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+%vkui--font-footnote--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 %vkui--font-footnote-caps--regular {
 	font-size: 13px;
 	line-height: 18px;
@@ -606,12 +615,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.3px;
 }
+%vkui--font-footnote-caps--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.3px;
+}
 %vkui--font-caption1--regular {
 	font-size: 12px;
 	line-height: 16px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+%vkui--font-caption1--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 %vkui--font-caption1-caps--regular {
 	font-size: 12px;
 	line-height: 16px;
@@ -620,12 +643,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.26px;
 }
+%vkui--font-caption1-caps--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.26px;
+}
 %vkui--font-caption2--regular {
 	font-size: 11px;
 	line-height: 14px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+%vkui--font-caption2--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 %vkui--font-caption2-caps--regular {
 	font-size: 11px;
 	line-height: 14px;
@@ -634,12 +671,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.22px;
 }
+%vkui--font-caption2-caps--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.22px;
+}
 %vkui--font-caption3--regular {
 	font-size: 9px;
 	line-height: 12px;
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	font-weight: 400;
 }
+%vkui--font-caption3--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+}
 %vkui--font-caption3-caps--regular {
 	font-size: 9px;
 	line-height: 12px;
@@ -648,6 +699,14 @@
 	text-transform: uppercase;
 	letter-spacing: 0.16px;
 }
+%vkui--font-caption3-caps--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Inter, Helvetica, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.16px;
+}
 %vkui--font-h0--regular {
 	font-size: 28px;
 	line-height: 32px;
@@ -684,6 +743,81 @@
 	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
 	font-weight: 500;
 }
+%vkui--media-font-media-header--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 36px;
+	line-height: 44px;
+	letter-spacing: -0.5%;
+}
+%vkui--media-font-media-header--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 40px;
+	line-height: 48px;
+	letter-spacing: -0.5%;
+}
+%vkui--media-font-media-title1--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+%vkui--media-font-media-title1--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+%vkui--media-font-media-title2--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+%vkui--media-font-media-title2--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+%vkui--media-font-media-title3--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+%vkui--media-font-media-title3--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+%vkui--media-font-media-lead--regular {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 19px;
+	line-height: 28px;
+}
+%vkui--media-font-media-lead--compact {
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 22px;
+	line-height: 32px;
+	letter-spacing: -0.3%;
+}
+%vkui--media-font-media-paragraph--regular {
+	font-family: Georgia, serif;
+	font-weight: 400;
+	font-size: 18px;
+	line-height: 28px;
+}
+%vkui--media-font-media-paragraph--compact {
+	font-family: Georgia, serif;
+	font-weight: 400;
+	font-size: 19px;
+	line-height: 32px;
+}
 %vkui--font-h3--regular {
 	font-size: 20px;
 	line-height: 26px;
@@ -728,16 +862,16 @@
 	font-weight: 500;
 }
 %vkui--font-headline--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 %vkui--font-headline--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
-	font-family: Inter, Helvetica, Arial, sans-serif;
-	font-weight: 400;
+	font-family: MailSans, Inter, Helvetica, Arial, sans-serif;
+	font-weight: 500;
 }
 @custom-media --width-touch (max-width: 767px);
 @custom-media --width-to-touch (max-width: 767px);