@vkontakte/vkui-tokens 4.5.2 → 4.8.0

package/themes/mycom/index.styl

@@ -51,7 +51,9 @@ $size-base-padding-horizontal--regular = 16px;
 $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-positive--active = #0CB465;
 $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-title1--regular() {
 	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-paragraph--regular() {
 	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-footnote--regular() {
 	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 @@ font-footnote-caps--regular() {
 	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 @@ font-caption1-caps--regular() {
 	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 @@ font-caption2-caps--regular() {
 	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 @@ font-caption3-caps--regular() {
 	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-h2--compact() {
 	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-specific-button--regular() {
 	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/octavius/cssVars/declarations/index.css

@@ -136,7 +136,9 @@
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
+	--vkui--size_option_hierarchy--regular: 32px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
@@ -323,6 +325,9 @@
 	--vkui--color_background_negative_tint: #FAEBEB;
 	--vkui--color_background_negative_tint--hover: #F0E2E4;
 	--vkui--color_background_negative_tint--active: #E6D9DD;
+	--vkui--color_field_background: #ffffff;
+	--vkui--color_field_background--hover: #F5F5F7;
+	--vkui--color_field_background--active: #EBECEF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;
@@ -1421,6 +1426,7 @@
 	--vkui--size_button_group_gap_space: 1px;
 	--vkui--size_button_group_gap_small: 8px;
 	--vkui--size_button_group_gap_medium: 12px;
+	--vkui--size_option_hierarchy: 32px;
 	--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);

package/themes/octavius/cssVars/declarations/noColors.css

@@ -136,7 +136,9 @@
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
+	--vkui--size_option_hierarchy--regular: 32px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);

package/themes/octavius/cssVars/declarations/noSizes.css

@@ -1,6 +1,7 @@
 :root {
 	--vkui--theme_name: 'octavius';
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
@@ -77,6 +78,9 @@
 	--vkui--color_background_negative_tint: #FAEBEB;
 	--vkui--color_background_negative_tint--hover: #F0E2E4;
 	--vkui--color_background_negative_tint--active: #E6D9DD;
+	--vkui--color_field_background: #ffffff;
+	--vkui--color_field_background--hover: #F5F5F7;
+	--vkui--color_field_background--active: #EBECEF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;

package/themes/octavius/cssVars/declarations/onlyColors.css

@@ -44,6 +44,9 @@
 	--vkui--color_background_negative_tint: #FAEBEB;
 	--vkui--color_background_negative_tint--hover: #F0E2E4;
 	--vkui--color_background_negative_tint--active: #E6D9DD;
+	--vkui--color_field_background: #ffffff;
+	--vkui--color_field_background--hover: #F5F5F7;
+	--vkui--color_field_background--active: #EBECEF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;