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