@vkontakte/vkui-tokens 4.3.2-dev-db778e.0 → 4.4.0

package/themes/calendar/index.styl

@@ -13,7 +13,7 @@ $size-popup-base-padding--regular = 20px;
 $size-popup-base-padding--compact = 32px;
 $size-popup-header-padding--regular = 16px;
 $size-popup-header-padding--compact = 24px;
-$size-border-radius--compact = 8px;
+$size-border-radius--compact = 12px;
 $size-border-radius--regular = 8px;
 $size-check-border-radius--regular = 4px;
 $size-border-radius-paper--regular = 12px;
@@ -33,8 +33,8 @@ $size-popup-small--regular = 420px;
 $size-popup-medium--regular = 680px;
 $size-popup-large--regular = 880px;
 $size-field-horizontal-padding--regular = 8px;
-$size-button-padding-horizontal--compact = 16px;
-$size-button-padding-horizontal--regular = 20px;
+$size-button-padding-horizontal--compact = 12px;
+$size-button-padding-horizontal--regular = 16px;
 $size-label-horizontal-margin--regular = 16px;
 $size-arrow-padding--regular = 12px;
 $size-tooltip-margin--regular = 8px;
@@ -54,10 +54,13 @@ $size-cardgrid-padding--regular = 12px;
 $size-card-border-radius--regular = 16px;
 $size-cardgrid-padding-vertical--regular = 8px;
 $size-base-padding-horizontal--regular = 16px;
-$elevation1 = 0 2px 0 0 rgba(0, 16, 61, 0.04);
-$elevation2 = 0 4px 32px 0 rgba(0, 16, 61, 0.32);
-$elevation3 = 0 16px 48px 0 rgba(0, 0, 0, 0.48);
-$elevation4 = 0 16px 48px 0 rgba(0, 0, 0, 0.48);
+$size-button-group-gap-space--regular = 1px;
+$size-button-group-gap-small--regular = 8px;
+$size-button-group-gap-medium--regular = 12px;
+$elevation1 = none;
+$elevation2 = none;
+$elevation3 = 0px 4px 32px rgba(0, 16, 61, 0.32);
+$elevation4 = 0px 16px 48px rgba(0, 16, 61, 0.48);
 $animation-duration-l = 0.4s;
 $animation-duration-m = 0.2s;
 $animation-duration-s = 0.1s;
@@ -295,9 +298,9 @@ $color-stroke-negative--active = #DA0A35;
 $color-image-border-alpha = rgba(0, 16, 61, 0.08);
 $color-image-border-alpha--hover = rgba(0, 16, 61, 0.12);
 $color-image-border-alpha--active = rgba(0, 16, 61, 0.16);
-$color-field-border-alpha = rgba(0, 16, 61, 0.12);
-$color-field-border-alpha--hover = rgba(0, 16, 61, 0.16);
-$color-field-border-alpha--active = rgba(0, 16, 61, 0.2);
+$color-field-border-alpha = transparent;
+$color-field-border-alpha--hover = transparent;
+$color-field-border-alpha--active = transparent;
 $color-separator-primary-alpha = rgba(0, 16, 61, 0.12);
 $color-separator-primary-alpha--hover = rgba(0, 16, 61, 0.16);
 $color-separator-primary-alpha--active = rgba(0, 16, 61, 0.2);
@@ -394,54 +397,27 @@ $color-button-contrast--active = #FFFFFF;
 $color-thumb-error-background-alpha = rgba(237, 10, 52, 0.12);
 $color-thumb-error-background-alpha--hover = rgba(237, 10, 52, 0.16);
 $color-thumb-error-background-alpha--active = rgba(237, 10, 52, 0.2);
-$calendar-color-background-accent-tint-themed = #E3F0FD;
-$calendar-color-background-accent-tint-themed--hover = #DAE4F3;
-$calendar-color-background-accent-tint-themed--active = #E3F0FD;
 
 
 font-title1--regular() {
-	font-size: 24px;
-	line-height: 32px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-title1--compact() {
-	font-size: 24px;
-	line-height: 28px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-title2--regular() {
-	font-size: 20px;
-	line-height: 24px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-title2--compact() {
-	font-size: 20px;
-	line-height: 24px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-title3--regular() {
 	font-size: 17px;
 	line-height: 24px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-title3--compact() {
-	font-size: 17px;
-	line-height: 24px;
+font-title2--regular() {
+	font-size: 15px;
+	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-headline1--regular() {
-	font-size: 16px;
+font-title3--regular() {
+	font-size: 15px;
 	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-headline1--compact() {
+font-headline1--regular() {
 	font-size: 15px;
 	line-height: 20px;
 	font-weight: 500;
@@ -459,221 +435,173 @@ font-headline2--compact() {
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 	font-weight: 500;
 }
-font-text--regular() {
-	font-size: 16px;
-	line-height: 20px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
 font-text--compact() {
-	font-size: 15px;
-	line-height: 20px;
+	font-size: 17px;
+	line-height: 24px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-paragraph--regular() {
+font-text--regular() {
 	font-size: 15px;
 	line-height: 20px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-paragraph--compact() {
+font-paragraph--regular() {
 	font-size: 15px;
 	line-height: 20px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 font-subhead--regular() {
 	font-size: 14px;
 	line-height: 18px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 font-subhead--compact() {
 	font-size: 13px;
 	line-height: 18px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-footnote--regular() {
-	font-size: 13px;
-	line-height: 18px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-footnote--compact() {
+font-footnote--regular() {
 	font-size: 13px;
-	line-height: 18px;
+	line-height: 20px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 font-footnote-caps--regular() {
 	font-size: 13px;
 	line-height: 18px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	letter-spacing: 0.3px;
 	text-transform: uppercase;
-}
-font-footnote-caps--compact() {
-	font-size: 13px;
-	line-height: 18px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 	letter-spacing: 0.3px;
-	text-transform: uppercase;
 }
 font-caption1--regular() {
 	font-size: 12px;
 	line-height: 16px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-caption1--compact() {
-	font-size: 12px;
-	line-height: 14px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 font-caption1-caps--regular() {
 	font-size: 12px;
 	line-height: 16px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	letter-spacing: 0.26px;
 	text-transform: uppercase;
-}
-font-caption1-caps--compact() {
-	font-size: 12px;
-	line-height: 14px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 	letter-spacing: 0.26px;
-	text-transform: uppercase;
 }
 font-caption2--regular() {
 	font-size: 11px;
-	line-height: 14px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-caption2--compact() {
-	font-size: 11px;
-	line-height: 14px;
+	line-height: 12px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 font-caption2-caps--regular() {
 	font-size: 11px;
 	line-height: 14px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	letter-spacing: 0.22px;
 	text-transform: uppercase;
-}
-font-caption2-caps--compact() {
-	font-size: 11px;
-	line-height: 14px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 	letter-spacing: 0.22px;
-	text-transform: uppercase;
 }
 font-caption3--regular() {
 	font-size: 9px;
 	line-height: 12px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-font-caption3--compact() {
-	font-size: 9px;
-	line-height: 12px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 font-caption3-caps--regular() {
 	font-size: 9px;
 	line-height: 12px;
+	font-family: Helvetica, Arial, sans-serif;
 	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	letter-spacing: 0.16px;
 	text-transform: uppercase;
-}
-font-caption3-caps--compact() {
-	font-size: 9px;
-	line-height: 12px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 	letter-spacing: 0.16px;
-	text-transform: uppercase;
 }
 font-h0--regular() {
-	font-size: 28px;
-	line-height: 32px;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-size: 32px;
+	line-height: 40px;
 	font-weight: 500;
-}
-font-h0--compact() {
-	font-size: 44px;
-	line-height: 52px;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-weight: 500;
 }
-font-h1--regular() {
+font-h1--compact() {
 	font-size: 24px;
-	line-height: 28px;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
+	line-height: 32px;
 	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	margin-bottom: 16px;
 }
-font-h1--compact() {
+font-h1--regular() {
 	font-size: 32px;
-	line-height: 36px;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
+	line-height: 40px;
 	font-weight: 500;
-}
-font-h2--regular() {
-	font-size: 20px;
-	line-height: 26px;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-weight: 500;
+	margin-bottom: 16px;
 }
 font-h2--compact() {
-	font-size: 28px;
-	line-height: 32px;
+	font-size: 20px;
+	line-height: 24px;
+	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
+}
+font-h2--regular() {
+	font-size: 24px;
+	line-height: 28px;
 	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-calendar-font-text-event--regular() {
+font-event-m--compact() {
 	font-size: 17px;
 	line-height: 24px;
-	font-weight: 400;
+	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-calendar-font-text-event--compact() {
-	font-size: 13px;
-	line-height: 18px;
+font-event-m--regular() {
+	font-size: 15px;
+	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-calendar-font-text-event-small--regular() {
+font-event-s--compact() {
 	font-size: 15px;
-	line-height: 20px;
-	font-weight: 400;
+	line-height: 18px;
+	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+}
+font-event-s--regular() {
+	font-size: 13px;
+	line-height: 18px;
+	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-calendar-font-text-event-small--compact() {
+font-event-x-s--regular() {
 	font-size: 12px;
-	line-height: 12px;
-	font-weight: 400;
+	line-height: 16px;
+	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-headline--regular() {
+font-time--regular() {
+	font-size: 13px;
+	line-height: 18px;
+	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+}
+font-body-i-o-s--regular() {
+	font-size: 17px;
+	line-height: 24px;
+	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+}
+font-body-android--regular() {
 	font-size: 16px;
-	line-height: 20px;
+	line-height: 24px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-font-headline--compact() {
+font-headline--regular() {
 	font-size: 15px;
 	line-height: 20px;
 	font-weight: 500;