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

@vkontakte/vkui-tokens 4.5.2 → 4.8.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 (709) hide show

package/themes/mycom/index.less CHANGED Viewed

@@ -51,7 +51,9 @@
 @size-button-group-gap-space--regular: 1px;
 @size-button-group-gap-small--regular: 8px;
 @size-button-group-gap-medium--regular: 12px;
+@size-option-hierarchy--regular: 32px;
 @elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+@elevation1-invert-y: 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);
@@ -228,6 +230,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 +512,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 +587,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 +604,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 +618,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 +646,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 +674,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 +702,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 +746,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 +865,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

@@ -52,7 +52,9 @@
 	--size-button-group-gap-space--regular: 1px;
 	--size-button-group-gap-small--regular: 8px;
 	--size-button-group-gap-medium--regular: 12px;
+	--size-option-hierarchy--regular: 32px;
 	--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--elevation1-invert-y: 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);
@@ -229,6 +231,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 +513,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 +588,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 +605,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 +619,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 +647,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 +675,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 +703,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 +747,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 +866,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);