npm - @vkontakte/vkui-tokens - Versions diffs - 4.5.2 → 4.6.0 - Mend

@vkontakte/vkui-tokens 4.5.2 → 4.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (667) hide show

package/themes/mycom/index.less CHANGED Viewed

@@ -228,6 +228,9 @@
 @color-background-negative-tint: #FAEBEB;
 @color-background-negative-tint--hover: #F0E2E4;
 @color-background-negative-tint--active: #E6D9DD;
+@color-field-background: #ffffff;
+@color-field-background--hover: #F5F5F7;
+@color-field-background--active: #EBECEF;
 @color-text-accent: #00abf2;
 @color-text-accent--hover: #00A5EB;
 @color-text-accent--active: #009FE4;
@@ -507,71 +510,71 @@
 	font-size: 24px;
 	line-height: 28px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .font-title1--compact {
 	font-size: 24px;
 	line-height: 28px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .font-title2--regular {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .font-title2--compact {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .font-title3--regular {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .font-title3--compact {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 .font-headline1--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 .font-headline1--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 .font-headline2--regular {
-	font-size: 15px;
+	font-size: 14px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 .font-headline2--compact {
-	font-size: 14px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 .font-text--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
 .font-text--compact {
-	font-size: 15px;
-	line-height: 20px;
+	font-size: 16px;
+	line-height: 24px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
@@ -582,16 +585,16 @@
 	font-weight: 400;
 }
 .font-subhead--regular {
-	font-size: 14px;
+	font-size: 13px;
 	line-height: 18px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 400;
 }
 .font-subhead--compact {
-	font-size: 13px;
+	font-size: 14px;
 	line-height: 18px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 400;
 }
 .font-footnote--regular {
 	font-size: 13px;
@@ -599,6 +602,12 @@
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+.font-footnote--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 .font-footnote-caps--regular {
 	font-size: 13px;
 	line-height: 18px;
@@ -607,12 +616,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.3px;
 }
+.font-footnote-caps--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.3px;
+}
 .font-caption1--regular {
 	font-size: 12px;
 	line-height: 16px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+.font-caption1--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 .font-caption1-caps--regular {
 	font-size: 12px;
 	line-height: 16px;
@@ -621,12 +644,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.26px;
 }
+.font-caption1-caps--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.26px;
+}
 .font-caption2--regular {
 	font-size: 11px;
 	line-height: 14px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+.font-caption2--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 .font-caption2-caps--regular {
 	font-size: 11px;
 	line-height: 14px;
@@ -635,12 +672,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.22px;
 }
+.font-caption2-caps--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.22px;
+}
 .font-caption3--regular {
 	font-size: 9px;
 	line-height: 12px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+.font-caption3--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 .font-caption3-caps--regular {
 	font-size: 9px;
 	line-height: 12px;
@@ -649,6 +700,14 @@
 	text-transform: uppercase;
 	letter-spacing: 0.16px;
 }
+.font-caption3-caps--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.16px;
+}
 .font-h0--regular {
 	font-size: 28px;
 	line-height: 32px;
@@ -685,6 +744,81 @@
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 500;
 }
+.media-font-media-header--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 36px;
+	line-height: 44px;
+	letter-spacing: -0.5%;
+}
+.media-font-media-header--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 40px;
+	line-height: 48px;
+	letter-spacing: -0.5%;
+}
+.media-font-media-title1--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+.media-font-media-title1--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+.media-font-media-title2--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+.media-font-media-title2--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+.media-font-media-title3--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+.media-font-media-title3--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+.media-font-media-lead--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 19px;
+	line-height: 28px;
+}
+.media-font-media-lead--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 22px;
+	line-height: 32px;
+	letter-spacing: -0.3%;
+}
+.media-font-media-paragraph--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	font-size: 18px;
+	line-height: 28px;
+}
+.media-font-media-paragraph--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	font-size: 19px;
+	line-height: 32px;
+}
 .font-h3--regular {
 	font-size: 20px;
 	line-height: 26px;
@@ -729,16 +863,16 @@
 	font-weight: 500;
 }
 .font-headline--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 .font-headline--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 .media-width-touch(@content) {
 	@media (max-width: 767px) { @content; }

package/themes/mycom/index.pcss CHANGED Viewed

@@ -229,6 +229,9 @@
 	--color-background-negative-tint: #FAEBEB;
 	--color-background-negative-tint--hover: #F0E2E4;
 	--color-background-negative-tint--active: #E6D9DD;
+	--color-field-background: #ffffff;
+	--color-field-background--hover: #F5F5F7;
+	--color-field-background--active: #EBECEF;
 	--color-text-accent: #00abf2;
 	--color-text-accent--hover: #00A5EB;
 	--color-text-accent--active: #009FE4;
@@ -508,71 +511,71 @@
 	font-size: 24px;
 	line-height: 28px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %font-title1--compact {
 	font-size: 24px;
 	line-height: 28px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %font-title2--regular {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %font-title2--compact {
 	font-size: 20px;
 	line-height: 26px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %font-title3--regular {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %font-title3--compact {
 	font-size: 17px;
 	line-height: 22px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 500;
 }
 %font-headline1--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 %font-headline1--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 %font-headline2--regular {
-	font-size: 15px;
+	font-size: 14px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 %font-headline2--compact {
-	font-size: 14px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 %font-text--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
 %font-text--compact {
-	font-size: 15px;
-	line-height: 20px;
+	font-size: 16px;
+	line-height: 24px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
@@ -583,16 +586,16 @@
 	font-weight: 400;
 }
 %font-subhead--regular {
-	font-size: 14px;
+	font-size: 13px;
 	line-height: 18px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 400;
 }
 %font-subhead--compact {
-	font-size: 13px;
+	font-size: 14px;
 	line-height: 18px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 600;
+	font-weight: 400;
 }
 %font-footnote--regular {
 	font-size: 13px;
@@ -600,6 +603,12 @@
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+%font-footnote--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 %font-footnote-caps--regular {
 	font-size: 13px;
 	line-height: 18px;
@@ -608,12 +617,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.3px;
 }
+%font-footnote-caps--compact {
+	font-size: 13px;
+	line-height: 18px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.3px;
+}
 %font-caption1--regular {
 	font-size: 12px;
 	line-height: 16px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+%font-caption1--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 %font-caption1-caps--regular {
 	font-size: 12px;
 	line-height: 16px;
@@ -622,12 +645,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.26px;
 }
+%font-caption1-caps--compact {
+	font-size: 12px;
+	line-height: 16px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.26px;
+}
 %font-caption2--regular {
 	font-size: 11px;
 	line-height: 14px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+%font-caption2--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 %font-caption2-caps--regular {
 	font-size: 11px;
 	line-height: 14px;
@@ -636,12 +673,26 @@
 	text-transform: uppercase;
 	letter-spacing: 0.22px;
 }
+%font-caption2-caps--compact {
+	font-size: 11px;
+	line-height: 14px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.22px;
+}
 %font-caption3--regular {
 	font-size: 9px;
 	line-height: 12px;
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 400;
 }
+%font-caption3--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+}
 %font-caption3-caps--regular {
 	font-size: 9px;
 	line-height: 12px;
@@ -650,6 +701,14 @@
 	text-transform: uppercase;
 	letter-spacing: 0.16px;
 }
+%font-caption3-caps--compact {
+	font-size: 9px;
+	line-height: 12px;
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: 0.16px;
+}
 %font-h0--regular {
 	font-size: 28px;
 	line-height: 32px;
@@ -686,6 +745,81 @@
 	font-family: Proxima Nova, Arial, sans-serif;
 	font-weight: 500;
 }
+%media-font-media-header--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 36px;
+	line-height: 44px;
+	letter-spacing: -0.5%;
+}
+%media-font-media-header--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 40px;
+	line-height: 48px;
+	letter-spacing: -0.5%;
+}
+%media-font-media-title1--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+%media-font-media-title1--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 28px;
+	line-height: 36px;
+}
+%media-font-media-title2--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+%media-font-media-title2--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 24px;
+	line-height: 32px;
+}
+%media-font-media-title3--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+%media-font-media-title3--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 20px;
+	line-height: 28px;
+}
+%media-font-media-lead--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 19px;
+	line-height: 28px;
+}
+%media-font-media-lead--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 500;
+	font-size: 22px;
+	line-height: 32px;
+	letter-spacing: -0.3%;
+}
+%media-font-media-paragraph--regular {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	font-size: 18px;
+	line-height: 28px;
+}
+%media-font-media-paragraph--compact {
+	font-family: Proxima Nova, Arial, sans-serif;
+	font-weight: 400;
+	font-size: 19px;
+	line-height: 32px;
+}
 %font-h3--regular {
 	font-size: 20px;
 	line-height: 26px;
@@ -730,16 +864,16 @@
 	font-weight: 500;
 }
 %font-headline--regular {
-	font-size: 16px;
+	font-size: 15px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 %font-headline--compact {
-	font-size: 15px;
+	font-size: 16px;
 	line-height: 20px;
 	font-family: Proxima Nova, Arial, sans-serif;
-	font-weight: 400;
+	font-weight: 500;
 }
 @custom-media --width-touch (max-width: 767px);
 @custom-media --width-to-touch (max-width: 767px);