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

package/themes/calendarDark/index.pcss

@@ -14,7 +14,7 @@
 	--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;
@@ -34,8 +34,8 @@
 	--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;
@@ -55,10 +55,13 @@
 	--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;
@@ -296,9 +299,9 @@
 	--color-image-border-alpha: rgba(255, 255, 255, 0.08);
 	--color-image-border-alpha--hover: rgba(255, 255, 255, 0.12);
 	--color-image-border-alpha--active: rgba(255, 255, 255, 0.16);
-	--color-field-border-alpha: rgba(255, 255, 255, 0.16);
-	--color-field-border-alpha--hover: rgba(255, 255, 255, 0.2);
-	--color-field-border-alpha--active: rgba(255, 255, 255, 0.24);
+	--color-field-border-alpha: transparent;
+	--color-field-border-alpha--hover: transparent;
+	--color-field-border-alpha--active: transparent;
 	--color-separator-primary-alpha: rgba(0, 0, 0, 0.4);
 	--color-separator-primary-alpha--hover: rgba(0, 0, 0, 0.44);
 	--color-separator-primary-alpha--active: rgba(0, 0, 0, 0.48);
@@ -395,54 +398,27 @@
 	--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: #3E3E3F;
-	--calendar-color-background-accent-tint-themed--hover: #2C2C2D;
-	--calendar-color-background-accent-tint-themed--active: #3E3E3F;
 }
 
 %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;
@@ -460,221 +436,173 @@
 	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;