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

package/themes/calendar/index.scss

@@ -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,126 +397,51 @@ $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;
 
 
 @mixin font-title1--regular() {
-	font-size: 24px;
-	line-height: 32px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-title1--regular--map: (
-	'fontSize': 24px,
-	'lineHeight': 32px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-title1--compact() {
-	font-size: 24px;
-	line-height: 28px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-title1--regular--map: (
-	'fontSize': 24px,
-	'lineHeight': 32px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-title1--compact--map: (
-	'fontSize': 24px,
-	'lineHeight': 28px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-title2--regular() {
-	font-size: 20px;
-	line-height: 24px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-title2--regular--map: (
-	'fontSize': 20px,
-	'lineHeight': 24px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-title2--compact() {
-	font-size: 20px;
-	line-height: 24px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-title2--regular--map: (
-	'fontSize': 20px,
-	'lineHeight': 24px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-title2--compact--map: (
-	'fontSize': 20px,
-	'lineHeight': 24px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-title3--regular() {
 	font-size: 17px;
 	line-height: 24px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$font-title3--regular--map: (
+$font-title1--regular--map: (
 	'fontSize': 17px,
 	'lineHeight': 24px,
 	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-title3--compact() {
-	font-size: 17px;
-	line-height: 24px;
+@mixin font-title2--regular() {
+	font-size: 15px;
+	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$font-title3--regular--map: (
-	'fontSize': 17px,
-	'lineHeight': 24px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-title3--compact--map: (
-	'fontSize': 17px,
-	'lineHeight': 24px,
+$font-title2--regular--map: (
+	'fontSize': 15px,
+	'lineHeight': 20px,
 	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-headline1--regular() {
-	font-size: 16px;
+@mixin font-title3--regular() {
+	font-size: 15px;
 	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$font-headline1--regular--map: (
-	'fontSize': 16px,
+$font-title3--regular--map: (
+	'fontSize': 15px,
 	'lineHeight': 20px,
 	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-headline1--compact() {
+@mixin font-headline1--regular() {
 	font-size: 15px;
 	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 $font-headline1--regular--map: (
-	'fontSize': 16px,
-	'lineHeight': 20px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-headline1--compact--map: (
 	'fontSize': 15px,
 	'lineHeight': 20px,
 	'fontWeight': 500,
@@ -549,551 +477,382 @@ $font-headline2--compact--map: (
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 	'fontWeight': 500,
 );
-@mixin font-text--regular() {
-	font-size: 16px;
-	line-height: 20px;
+@mixin font-text--compact() {
+	font-size: 17px;
+	line-height: 24px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$font-text--regular--map: (
-	'fontSize': 16px,
-	'lineHeight': 20px,
+$font-text--compact--map: (
+	'fontSize': 17px,
+	'lineHeight': 24px,
 	'fontWeight': 400,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-text--compact() {
+@mixin font-text--regular() {
 	font-size: 15px;
 	line-height: 20px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$font-text--regular--map: (
-	'fontSize': 16px,
-	'lineHeight': 20px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
 $font-text--compact--map: (
-	'fontSize': 15px,
-	'lineHeight': 20px,
+	'fontSize': 17px,
+	'lineHeight': 24px,
 	'fontWeight': 400,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-paragraph--regular() {
-	font-size: 15px;
-	line-height: 20px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-paragraph--regular--map: (
+$font-text--regular--map: (
 	'fontSize': 15px,
 	'lineHeight': 20px,
 	'fontWeight': 400,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-paragraph--compact() {
+@mixin 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-paragraph--regular--map: (
 	'fontSize': 15px,
 	'lineHeight': 20px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-paragraph--compact--map: (
-	'fontSize': 15px,
-	'lineHeight': 20px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
 @mixin 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--regular--map: (
 	'fontSize': 14px,
 	'lineHeight': 18px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
 @mixin font-subhead--compact() {
 	font-size: 13px;
 	line-height: 18px;
-	font-weight: 500;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: Helvetica, Arial, sans-serif;
+	font-weight: 400;
 }
 $font-subhead--regular--map: (
 	'fontSize': 14px,
 	'lineHeight': 18px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
 $font-subhead--compact--map: (
 	'fontSize': 13px,
 	'lineHeight': 18px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-footnote--regular() {
-	font-size: 13px;
-	line-height: 18px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-footnote--regular--map: (
-	'fontSize': 13px,
-	'lineHeight': 18px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-footnote--compact() {
+@mixin font-footnote--regular() {
 	font-size: 13px;
-	line-height: 18px;
+	line-height: 20px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 $font-footnote--regular--map: (
 	'fontSize': 13px,
-	'lineHeight': 18px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-footnote--compact--map: (
-	'fontSize': 13px,
-	'lineHeight': 18px,
+	'lineHeight': 20px,
 	'fontWeight': 400,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
 @mixin 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--regular--map: (
-	'fontSize': 13px,
-	'lineHeight': 18px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.3px,
-	'textTransform': uppercase,
-);
-@mixin 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-footnote-caps--regular--map: (
 	'fontSize': 13px,
 	'lineHeight': 18px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.3px,
 	'textTransform': uppercase,
-);
-$font-footnote-caps--compact--map: (
-	'fontSize': 13px,
-	'lineHeight': 18px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 	'letterSpacing': 0.3px,
-	'textTransform': uppercase,
 );
 @mixin 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--regular--map: (
 	'fontSize': 12px,
 	'lineHeight': 16px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-caption1--compact() {
-	font-size: 12px;
-	line-height: 14px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-caption1--regular--map: (
-	'fontSize': 12px,
-	'lineHeight': 16px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-caption1--compact--map: (
-	'fontSize': 12px,
-	'lineHeight': 14px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
 @mixin 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--regular--map: (
-	'fontSize': 12px,
-	'lineHeight': 16px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.26px,
-	'textTransform': uppercase,
-);
-@mixin 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-caption1-caps--regular--map: (
 	'fontSize': 12px,
 	'lineHeight': 16px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.26px,
 	'textTransform': uppercase,
-);
-$font-caption1-caps--compact--map: (
-	'fontSize': 12px,
-	'lineHeight': 14px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 	'letterSpacing': 0.26px,
-	'textTransform': uppercase,
 );
 @mixin font-caption2--regular() {
 	font-size: 11px;
-	line-height: 14px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-}
-$font-caption2--regular--map: (
-	'fontSize': 11px,
-	'lineHeight': 14px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-caption2--compact() {
-	font-size: 11px;
-	line-height: 14px;
+	line-height: 12px;
 	font-weight: 400;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 $font-caption2--regular--map: (
 	'fontSize': 11px,
-	'lineHeight': 14px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-caption2--compact--map: (
-	'fontSize': 11px,
-	'lineHeight': 14px,
+	'lineHeight': 12px,
 	'fontWeight': 400,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
 @mixin 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--regular--map: (
-	'fontSize': 11px,
-	'lineHeight': 14px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.22px,
-	'textTransform': uppercase,
-);
-@mixin 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-caption2-caps--regular--map: (
 	'fontSize': 11px,
 	'lineHeight': 14px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.22px,
 	'textTransform': uppercase,
-);
-$font-caption2-caps--compact--map: (
-	'fontSize': 11px,
-	'lineHeight': 14px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 	'letterSpacing': 0.22px,
-	'textTransform': uppercase,
 );
 @mixin 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--regular--map: (
-	'fontSize': 9px,
-	'lineHeight': 12px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-@mixin font-caption3--compact() {
-	font-size: 9px;
-	line-height: 12px;
-	font-weight: 400;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 $font-caption3--regular--map: (
 	'fontSize': 9px,
 	'lineHeight': 12px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-caption3--compact--map: (
-	'fontSize': 9px,
-	'lineHeight': 12px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
 @mixin 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--regular--map: (
-	'fontSize': 9px,
-	'lineHeight': 12px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.16px,
-	'textTransform': uppercase,
-);
-@mixin 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-caption3-caps--regular--map: (
 	'fontSize': 9px,
 	'lineHeight': 12px,
+	'fontFamily': "Helvetica, Arial, sans-serif",
 	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'letterSpacing': 0.16px,
 	'textTransform': uppercase,
-);
-$font-caption3-caps--compact--map: (
-	'fontSize': 9px,
-	'lineHeight': 12px,
-	'fontWeight': 400,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 	'letterSpacing': 0.16px,
-	'textTransform': uppercase,
 );
 @mixin 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--regular--map: (
-	'fontSize': 28px,
-	'lineHeight': 32px,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'fontWeight': 500,
-);
-@mixin font-h0--compact() {
-	font-size: 44px;
-	line-height: 52px;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-weight: 500;
 }
 $font-h0--regular--map: (
-	'fontSize': 28px,
-	'lineHeight': 32px,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'fontSize': 32px,
+	'lineHeight': 40px,
 	'fontWeight': 500,
-);
-$font-h0--compact--map: (
-	'fontSize': 44px,
-	'lineHeight': 52px,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-	'fontWeight': 500,
 );
-@mixin font-h1--regular() {
+@mixin 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--regular--map: (
+$font-h1--compact--map: (
 	'fontSize': 24px,
-	'lineHeight': 28px,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'lineHeight': 32px,
 	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'marginBottom': 16px,
 );
-@mixin font-h1--compact() {
+@mixin font-h1--regular() {
 	font-size: 32px;
-	line-height: 36px;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
+	line-height: 40px;
 	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	margin-bottom: 16px;
 }
-$font-h1--regular--map: (
+$font-h1--compact--map: (
 	'fontSize': 24px,
-	'lineHeight': 28px,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'lineHeight': 32px,
 	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'marginBottom': 16px,
 );
-$font-h1--compact--map: (
+$font-h1--regular--map: (
 	'fontSize': 32px,
-	'lineHeight': 36px,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'lineHeight': 40px,
 	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'marginBottom': 16px,
 );
-@mixin font-h2--regular() {
+@mixin font-h2--compact() {
 	font-size: 20px;
-	line-height: 26px;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
+	line-height: 24px;
 	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$font-h2--regular--map: (
+$font-h2--compact--map: (
 	'fontSize': 20px,
-	'lineHeight': 26px,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'lineHeight': 24px,
 	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-h2--compact() {
-	font-size: 28px;
-	line-height: 32px;
-	font-family: MailSans, Helvetica, Arial, sans-serif;
+@mixin font-h2--regular() {
+	font-size: 24px;
+	line-height: 28px;
 	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$font-h2--regular--map: (
+$font-h2--compact--map: (
 	'fontSize': 20px,
-	'lineHeight': 26px,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+	'lineHeight': 24px,
 	'fontWeight': 500,
-);
-$font-h2--compact--map: (
-	'fontSize': 28px,
-	'lineHeight': 32px,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+);
+$font-h2--regular--map: (
+	'fontSize': 24px,
+	'lineHeight': 28px,
 	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin calendar-font-text-event--regular() {
+@mixin 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--regular--map: (
+$font-event-m--compact--map: (
 	'fontSize': 17px,
 	'lineHeight': 24px,
-	'fontWeight': 400,
+	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin calendar-font-text-event--compact() {
-	font-size: 13px;
-	line-height: 18px;
+@mixin font-event-m--regular() {
+	font-size: 15px;
+	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
-$calendar-font-text-event--regular--map: (
+$font-event-m--compact--map: (
 	'fontSize': 17px,
 	'lineHeight': 24px,
-	'fontWeight': 400,
+	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-$calendar-font-text-event--compact--map: (
-	'fontSize': 13px,
-	'lineHeight': 18px,
+$font-event-m--regular--map: (
+	'fontSize': 15px,
+	'lineHeight': 20px,
 	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin calendar-font-text-event-small--regular() {
+@mixin 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;
 }
-$calendar-font-text-event-small--regular--map: (
+$font-event-s--compact--map: (
 	'fontSize': 15px,
-	'lineHeight': 20px,
-	'fontWeight': 400,
+	'lineHeight': 18px,
+	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin calendar-font-text-event-small--compact() {
-	font-size: 12px;
-	line-height: 12px;
-	font-weight: 400;
+@mixin 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--regular--map: (
+$font-event-s--compact--map: (
 	'fontSize': 15px,
-	'lineHeight': 20px,
-	'fontWeight': 400,
+	'lineHeight': 18px,
+	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-$calendar-font-text-event-small--compact--map: (
+$font-event-s--regular--map: (
+	'fontSize': 13px,
+	'lineHeight': 18px,
+	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+);
+@mixin font-event-x-s--regular() {
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+}
+$font-event-x-s--regular--map: (
 	'fontSize': 12px,
-	'lineHeight': 12px,
-	'fontWeight': 400,
+	'lineHeight': 16px,
+	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-headline--regular() {
+@mixin font-time--regular() {
+	font-size: 13px;
+	line-height: 18px;
+	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+}
+$font-time--regular--map: (
+	'fontSize': 13px,
+	'lineHeight': 18px,
+	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+);
+@mixin font-body-i-o-s--regular() {
+	font-size: 17px;
+	line-height: 24px;
+	font-weight: 500;
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+}
+$font-body-i-o-s--regular--map: (
+	'fontSize': 17px,
+	'lineHeight': 24px,
+	'fontWeight': 500,
+	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
+);
+@mixin 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--regular--map: (
+$font-body-android--regular--map: (
 	'fontSize': 16px,
-	'lineHeight': 20px,
+	'lineHeight': 24px,
 	'fontWeight': 500,
 	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
 );
-@mixin font-headline--compact() {
+@mixin font-headline--regular() {
 	font-size: 15px;
 	line-height: 20px;
 	font-weight: 500;
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 }
 $font-headline--regular--map: (
-	'fontSize': 16px,
-	'lineHeight': 20px,
-	'fontWeight': 500,
-	'fontFamily': "MailSans, Helvetica, Arial, sans-serif",
-);
-$font-headline--compact--map: (
 	'fontSize': 15px,
 	'lineHeight': 20px,
 	'fontWeight': 500,