@vkontakte/vkui-tokens 4.3.1 → 4.3.2-dev-db778e.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 (50) hide show
  1. package/interfaces/themes/calendar/index.d.ts +4 -7
  2. package/package.json +1 -1
  3. package/themes/calendar/cssVars/declarations/index.css +835 -454
  4. package/themes/calendar/cssVars/declarations/noColors.css +409 -241
  5. package/themes/calendar/cssVars/declarations/noSizes.css +10 -7
  6. package/themes/calendar/cssVars/declarations/onlyAdaptiveGroups.css +26 -51
  7. package/themes/calendar/cssVars/declarations/onlyColors.css +6 -3
  8. package/themes/calendar/cssVars/declarations/onlyColors.js +2 -2
  9. package/themes/calendar/cssVars/declarations/onlyMedia.css +387 -152
  10. package/themes/calendar/cssVars/declarations/onlyVariables.css +137 -88
  11. package/themes/calendar/cssVars/declarations/onlyVariables.js +2 -2
  12. package/themes/calendar/cssVars/declarations/onlyVariablesLocal.css +137 -88
  13. package/themes/calendar/cssVars/theme/fallbacks/index.css +434 -263
  14. package/themes/calendar/cssVars/theme/fallbacks/index.less +183 -108
  15. package/themes/calendar/cssVars/theme/fallbacks/index.pcss +183 -108
  16. package/themes/calendar/cssVars/theme/fallbacks/index.scss +478 -234
  17. package/themes/calendar/cssVars/theme/fallbacks/index.styl +183 -108
  18. package/themes/calendar/cssVars/theme/index.js +529 -393
  19. package/themes/calendar/cssVars/theme/index.json +529 -393
  20. package/themes/calendar/index.css +415 -244
  21. package/themes/calendar/index.js +180 -115
  22. package/themes/calendar/index.json +180 -115
  23. package/themes/calendar/index.less +156 -81
  24. package/themes/calendar/index.pcss +156 -81
  25. package/themes/calendar/index.scss +412 -168
  26. package/themes/calendar/index.styl +156 -81
  27. package/themes/calendarDark/cssVars/declarations/index.css +835 -454
  28. package/themes/calendarDark/cssVars/declarations/noColors.css +409 -241
  29. package/themes/calendarDark/cssVars/declarations/noSizes.css +10 -7
  30. package/themes/calendarDark/cssVars/declarations/onlyAdaptiveGroups.css +26 -51
  31. package/themes/calendarDark/cssVars/declarations/onlyColors.css +6 -3
  32. package/themes/calendarDark/cssVars/declarations/onlyColors.js +2 -2
  33. package/themes/calendarDark/cssVars/declarations/onlyMedia.css +387 -152
  34. package/themes/calendarDark/cssVars/declarations/onlyVariables.css +137 -88
  35. package/themes/calendarDark/cssVars/declarations/onlyVariables.js +2 -2
  36. package/themes/calendarDark/cssVars/declarations/onlyVariablesLocal.css +137 -88
  37. package/themes/calendarDark/cssVars/theme/fallbacks/index.css +434 -263
  38. package/themes/calendarDark/cssVars/theme/fallbacks/index.less +183 -108
  39. package/themes/calendarDark/cssVars/theme/fallbacks/index.pcss +183 -108
  40. package/themes/calendarDark/cssVars/theme/fallbacks/index.scss +478 -234
  41. package/themes/calendarDark/cssVars/theme/fallbacks/index.styl +183 -108
  42. package/themes/calendarDark/cssVars/theme/index.js +529 -393
  43. package/themes/calendarDark/cssVars/theme/index.json +529 -393
  44. package/themes/calendarDark/index.css +415 -244
  45. package/themes/calendarDark/index.js +180 -115
  46. package/themes/calendarDark/index.json +180 -115
  47. package/themes/calendarDark/index.less +156 -81
  48. package/themes/calendarDark/index.pcss +156 -81
  49. package/themes/calendarDark/index.scss +412 -168
  50. package/themes/calendarDark/index.styl +156 -81
package/themes/calendarDark/index.styl CHANGED
@@ -13,7 +13,7 @@ $size-popup-base-padding--regular = 20px;
13
13
  $size-popup-base-padding--compact = 32px;
14
14
  $size-popup-header-padding--regular = 16px;
15
15
  $size-popup-header-padding--compact = 24px;
16
- $size-border-radius--compact = 12px;
16
+ $size-border-radius--compact = 8px;
17
17
  $size-border-radius--regular = 8px;
18
18
  $size-check-border-radius--regular = 4px;
19
19
  $size-border-radius-paper--regular = 12px;
@@ -33,8 +33,8 @@ $size-popup-small--regular = 420px;
33
33
  $size-popup-medium--regular = 680px;
34
34
  $size-popup-large--regular = 880px;
35
35
  $size-field-horizontal-padding--regular = 8px;
36
- $size-button-padding-horizontal--compact = 12px;
37
- $size-button-padding-horizontal--regular = 16px;
36
+ $size-button-padding-horizontal--compact = 16px;
37
+ $size-button-padding-horizontal--regular = 20px;
38
38
  $size-label-horizontal-margin--regular = 16px;
39
39
  $size-arrow-padding--regular = 12px;
40
40
  $size-tooltip-margin--regular = 8px;
@@ -54,10 +54,10 @@ $size-cardgrid-padding--regular = 12px;
54
54
  $size-card-border-radius--regular = 16px;
55
55
  $size-cardgrid-padding-vertical--regular = 8px;
56
56
  $size-base-padding-horizontal--regular = 16px;
57
- $elevation1 = none;
58
- $elevation2 = none;
59
- $elevation3 = 0px 4px 32px rgba(0, 16, 61, 0.32);
60
- $elevation4 = 0px 16px 48px rgba(0, 16, 61, 0.48);
57
+ $elevation1 = 0 2px 0 0 rgba(0, 16, 61, 0.04);
58
+ $elevation2 = 0 4px 32px 0 rgba(0, 16, 61, 0.32);
59
+ $elevation3 = 0 16px 48px 0 rgba(0, 0, 0, 0.48);
60
+ $elevation4 = 0 16px 48px 0 rgba(0, 0, 0, 0.48);
61
61
  $animation-duration-l = 0.4s;
62
62
  $animation-duration-m = 0.2s;
63
63
  $animation-duration-s = 0.1s;
@@ -295,9 +295,9 @@ $color-stroke-negative--active = #EE1E44;
295
295
  $color-image-border-alpha = rgba(255, 255, 255, 0.08);
296
296
  $color-image-border-alpha--hover = rgba(255, 255, 255, 0.12);
297
297
  $color-image-border-alpha--active = rgba(255, 255, 255, 0.16);
298
- $color-field-border-alpha = transparent;
299
- $color-field-border-alpha--hover = transparent;
300
- $color-field-border-alpha--active = transparent;
298
+ $color-field-border-alpha = rgba(255, 255, 255, 0.16);
299
+ $color-field-border-alpha--hover = rgba(255, 255, 255, 0.2);
300
+ $color-field-border-alpha--active = rgba(255, 255, 255, 0.24);
301
301
  $color-separator-primary-alpha = rgba(0, 0, 0, 0.4);
302
302
  $color-separator-primary-alpha--hover = rgba(0, 0, 0, 0.44);
303
303
  $color-separator-primary-alpha--active = rgba(0, 0, 0, 0.48);
@@ -394,27 +394,54 @@ $color-button-contrast--active = #2C2C2D;
394
394
  $color-thumb-error-background-alpha = rgba(237, 10, 52, 0.12);
395
395
  $color-thumb-error-background-alpha--hover = rgba(237, 10, 52, 0.16);
396
396
  $color-thumb-error-background-alpha--active = rgba(237, 10, 52, 0.2);
397
+ $calendar-color-background-accent-tint-themed = #3E3E3F;
398
+ $calendar-color-background-accent-tint-themed--hover = #2C2C2D;
399
+ $calendar-color-background-accent-tint-themed--active = #3E3E3F;
397
400
 
398
401
 
399
402
  font-title1--regular() {
400
- font-size: 17px;
401
- line-height: 24px;
403
+ font-size: 24px;
404
+ line-height: 32px;
405
+ font-weight: 500;
406
+ font-family: MailSans, Helvetica, Arial, sans-serif;
407
+ }
408
+ font-title1--compact() {
409
+ font-size: 24px;
410
+ line-height: 28px;
402
411
  font-weight: 500;
403
412
  font-family: MailSans, Helvetica, Arial, sans-serif;
404
413
  }
405
414
  font-title2--regular() {
406
- font-size: 15px;
407
- line-height: 20px;
415
+ font-size: 20px;
416
+ line-height: 24px;
417
+ font-weight: 500;
418
+ font-family: MailSans, Helvetica, Arial, sans-serif;
419
+ }
420
+ font-title2--compact() {
421
+ font-size: 20px;
422
+ line-height: 24px;
408
423
  font-weight: 500;
409
424
  font-family: MailSans, Helvetica, Arial, sans-serif;
410
425
  }
411
426
  font-title3--regular() {
412
- font-size: 15px;
413
- line-height: 20px;
427
+ font-size: 17px;
428
+ line-height: 24px;
429
+ font-weight: 500;
430
+ font-family: MailSans, Helvetica, Arial, sans-serif;
431
+ }
432
+ font-title3--compact() {
433
+ font-size: 17px;
434
+ line-height: 24px;
414
435
  font-weight: 500;
415
436
  font-family: MailSans, Helvetica, Arial, sans-serif;
416
437
  }
417
438
  font-headline1--regular() {
439
+ font-size: 16px;
440
+ line-height: 20px;
441
+ font-weight: 500;
442
+ font-family: MailSans, Helvetica, Arial, sans-serif;
443
+ }
444
+ font-headline1--compact() {
418
445
  font-size: 15px;
419
446
  line-height: 20px;
420
447
  font-weight: 500;
@@ -432,13 +459,13 @@ font-headline2--compact() {
432
459
  font-family: MailSans, Helvetica, Arial, sans-serif;
433
460
  font-weight: 500;
434
461
  }
435
- font-text--compact() {
436
- font-size: 17px;
437
- line-height: 24px;
462
+ font-text--regular() {
463
+ font-size: 16px;
464
+ line-height: 20px;
438
465
  font-weight: 400;
439
466
  font-family: MailSans, Helvetica, Arial, sans-serif;
440
467
  }
441
- font-text--regular() {
468
+ font-text--compact() {
442
469
  font-size: 15px;
443
470
  line-height: 20px;
444
471
  font-weight: 400;
@@ -447,158 +474,206 @@ font-text--regular() {
447
474
  font-paragraph--regular() {
448
475
  font-size: 15px;
449
476
  line-height: 20px;
450
- font-family: Helvetica, Arial, sans-serif;
451
477
  font-weight: 400;
478
+ font-family: MailSans, Helvetica, Arial, sans-serif;
479
+ }
480
+ font-paragraph--compact() {
481
+ font-size: 15px;
482
+ line-height: 20px;
483
+ font-weight: 400;
484
+ font-family: MailSans, Helvetica, Arial, sans-serif;
452
485
  }
453
486
  font-subhead--regular() {
454
487
  font-size: 14px;
455
488
  line-height: 18px;
456
- font-family: Helvetica, Arial, sans-serif;
457
489
  font-weight: 400;
490
+ font-family: MailSans, Helvetica, Arial, sans-serif;
458
491
  }
459
492
  font-subhead--compact() {
460
493
  font-size: 13px;
461
494
  line-height: 18px;
462
- font-family: Helvetica, Arial, sans-serif;
463
- font-weight: 400;
495
+ font-weight: 500;
496
+ font-family: MailSans, Helvetica, Arial, sans-serif;
464
497
  }
465
498
  font-footnote--regular() {
466
499
  font-size: 13px;
467
- line-height: 20px;
500
+ line-height: 18px;
501
+ font-weight: 400;
502
+ font-family: MailSans, Helvetica, Arial, sans-serif;
503
+ }
504
+ font-footnote--compact() {
505
+ font-size: 13px;
506
+ line-height: 18px;
468
507
  font-weight: 400;
469
508
  font-family: MailSans, Helvetica, Arial, sans-serif;
470
509
  }
471
510
  font-footnote-caps--regular() {
472
511
  font-size: 13px;
473
512
  line-height: 18px;
474
- font-family: Helvetica, Arial, sans-serif;
475
513
  font-weight: 400;
514
+ font-family: MailSans, Helvetica, Arial, sans-serif;
515
+ letter-spacing: 0.3px;
476
516
  text-transform: uppercase;
517
+ }
518
+ font-footnote-caps--compact() {
519
+ font-size: 13px;
520
+ line-height: 18px;
521
+ font-weight: 400;
522
+ font-family: MailSans, Helvetica, Arial, sans-serif;
477
523
  letter-spacing: 0.3px;
524
+ text-transform: uppercase;
478
525
  }
479
526
  font-caption1--regular() {
480
527
  font-size: 12px;
481
528
  line-height: 16px;
482
- font-family: Helvetica, Arial, sans-serif;
483
529
  font-weight: 400;
530
+ font-family: MailSans, Helvetica, Arial, sans-serif;
531
+ }
532
+ font-caption1--compact() {
533
+ font-size: 12px;
534
+ line-height: 14px;
535
+ font-weight: 400;
536
+ font-family: MailSans, Helvetica, Arial, sans-serif;
484
537
  }
485
538
  font-caption1-caps--regular() {
486
539
  font-size: 12px;
487
540
  line-height: 16px;
488
- font-family: Helvetica, Arial, sans-serif;
489
541
  font-weight: 400;
542
+ font-family: MailSans, Helvetica, Arial, sans-serif;
543
+ letter-spacing: 0.26px;
490
544
  text-transform: uppercase;
545
+ }
546
+ font-caption1-caps--compact() {
547
+ font-size: 12px;
548
+ line-height: 14px;
549
+ font-weight: 500;
550
+ font-family: MailSans, Helvetica, Arial, sans-serif;
491
551
  letter-spacing: 0.26px;
552
+ text-transform: uppercase;
492
553
  }
493
554
  font-caption2--regular() {
494
555
  font-size: 11px;
495
- line-height: 12px;
556
+ line-height: 14px;
557
+ font-weight: 400;
558
+ font-family: MailSans, Helvetica, Arial, sans-serif;
559
+ }
560
+ font-caption2--compact() {
561
+ font-size: 11px;
562
+ line-height: 14px;
496
563
  font-weight: 400;
497
564
  font-family: MailSans, Helvetica, Arial, sans-serif;
498
565
  }
499
566
  font-caption2-caps--regular() {
500
567
  font-size: 11px;
501
568
  line-height: 14px;
502
- font-family: Helvetica, Arial, sans-serif;
503
569
  font-weight: 400;
570
+ font-family: MailSans, Helvetica, Arial, sans-serif;
571
+ letter-spacing: 0.22px;
504
572
  text-transform: uppercase;
573
+ }
574
+ font-caption2-caps--compact() {
575
+ font-size: 11px;
576
+ line-height: 14px;
577
+ font-weight: 400;
578
+ font-family: MailSans, Helvetica, Arial, sans-serif;
505
579
  letter-spacing: 0.22px;
580
+ text-transform: uppercase;
506
581
  }
507
582
  font-caption3--regular() {
508
583
  font-size: 9px;
509
584
  line-height: 12px;
510
- font-family: Helvetica, Arial, sans-serif;
511
585
  font-weight: 400;
586
+ font-family: MailSans, Helvetica, Arial, sans-serif;
587
+ }
588
+ font-caption3--compact() {
589
+ font-size: 9px;
590
+ line-height: 12px;
591
+ font-weight: 400;
592
+ font-family: MailSans, Helvetica, Arial, sans-serif;
512
593
  }
513
594
  font-caption3-caps--regular() {
514
595
  font-size: 9px;
515
596
  line-height: 12px;
516
- font-family: Helvetica, Arial, sans-serif;
517
597
  font-weight: 400;
598
+ font-family: MailSans, Helvetica, Arial, sans-serif;
599
+ letter-spacing: 0.16px;
518
600
  text-transform: uppercase;
601
+ }
602
+ font-caption3-caps--compact() {
603
+ font-size: 9px;
604
+ line-height: 12px;
605
+ font-weight: 400;
606
+ font-family: MailSans, Helvetica, Arial, sans-serif;
519
607
  letter-spacing: 0.16px;
608
+ text-transform: uppercase;
520
609
  }
521
610
  font-h0--regular() {
522
- font-size: 32px;
523
- line-height: 40px;
611
+ font-size: 28px;
612
+ line-height: 32px;
613
+ font-family: MailSans, Helvetica, Arial, sans-serif;
524
614
  font-weight: 500;
615
+ }
616
+ font-h0--compact() {
617
+ font-size: 44px;
618
+ line-height: 52px;
525
619
  font-family: MailSans, Helvetica, Arial, sans-serif;
620
+ font-weight: 500;
526
621
  }
527
- font-h1--compact() {
622
+ font-h1--regular() {
528
623
  font-size: 24px;
529
- line-height: 32px;
530
- font-weight: 500;
624
+ line-height: 28px;
531
625
  font-family: MailSans, Helvetica, Arial, sans-serif;
532
- margin-bottom: 16px;
626
+ font-weight: 500;
533
627
  }
534
- font-h1--regular() {
628
+ font-h1--compact() {
535
629
  font-size: 32px;
536
- line-height: 40px;
537
- font-weight: 500;
630
+ line-height: 36px;
538
631
  font-family: MailSans, Helvetica, Arial, sans-serif;
539
- margin-bottom: 16px;
540
- }
541
- font-h2--compact() {
542
- font-size: 20px;
543
- line-height: 24px;
544
632
  font-weight: 500;
545
- font-family: MailSans, Helvetica, Arial, sans-serif;
546
633
  }
547
634
  font-h2--regular() {
548
- font-size: 24px;
549
- line-height: 28px;
550
- font-weight: 500;
635
+ font-size: 20px;
636
+ line-height: 26px;
551
637
  font-family: MailSans, Helvetica, Arial, sans-serif;
552
- }
553
- font-event-m--compact() {
554
- font-size: 17px;
555
- line-height: 24px;
556
638
  font-weight: 500;
557
- font-family: MailSans, Helvetica, Arial, sans-serif;
558
639
  }
559
- font-event-m--regular() {
560
- font-size: 15px;
561
- line-height: 20px;
562
- font-weight: 500;
640
+ font-h2--compact() {
641
+ font-size: 28px;
642
+ line-height: 32px;
563
643
  font-family: MailSans, Helvetica, Arial, sans-serif;
564
- }
565
- font-event-s--compact() {
566
- font-size: 15px;
567
- line-height: 18px;
568
644
  font-weight: 500;
645
+ }
646
+ calendar-font-text-event--regular() {
647
+ font-size: 17px;
648
+ line-height: 24px;
649
+ font-weight: 400;
569
650
  font-family: MailSans, Helvetica, Arial, sans-serif;
570
651
  }
571
- font-event-s--regular() {
652
+ calendar-font-text-event--compact() {
572
653
  font-size: 13px;
573
654
  line-height: 18px;
574
655
  font-weight: 500;
575
656
  font-family: MailSans, Helvetica, Arial, sans-serif;
576
657
  }
577
- font-event-x-s--regular() {
578
- font-size: 12px;
579
- line-height: 16px;
580
- font-weight: 500;
581
- font-family: MailSans, Helvetica, Arial, sans-serif;
582
- }
583
- font-time--regular() {
584
- font-size: 13px;
585
- line-height: 18px;
586
- font-weight: 500;
658
+ calendar-font-text-event-small--regular() {
659
+ font-size: 15px;
660
+ line-height: 20px;
661
+ font-weight: 400;
587
662
  font-family: MailSans, Helvetica, Arial, sans-serif;
588
663
  }
589
- font-body-i-o-s--regular() {
590
- font-size: 17px;
591
- line-height: 24px;
592
- font-weight: 500;
664
+ calendar-font-text-event-small--compact() {
665
+ font-size: 12px;
666
+ line-height: 12px;
667
+ font-weight: 400;
593
668
  font-family: MailSans, Helvetica, Arial, sans-serif;
594
669
  }
595
- font-body-android--regular() {
670
+ font-headline--regular() {
596
671
  font-size: 16px;
597
- line-height: 24px;
672
+ line-height: 20px;
598
673
  font-weight: 500;
599
674
  font-family: MailSans, Helvetica, Arial, sans-serif;
600
675
  }
601
- font-headline--regular() {
676
+ font-headline--compact() {
602
677
  font-size: 15px;
603
678
  line-height: 20px;
604
679
  font-weight: 500;