@trackunit/css-tailwind 1.3.170 → 1.3.172

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/css-tailwind",
3
- "version": "1.3.170",
3
+ "version": "1.3.172",
4
4
  "main": "./index.cjs.js",
5
5
  "repository": "https://github.com/Trackunit/manager",
6
6
  "license": "SEE LICENSE IN LICENSE.txt",
@@ -9,10 +9,10 @@
9
9
  },
10
10
  "dependencies": {
11
11
  "tailwindcss": "3.4.3",
12
- "@trackunit/css-component-tokens": "1.3.164",
13
- "@trackunit/css-tailwind-custom-properties-plugin": "1.3.164",
14
- "@trackunit/ui-design-tokens": "1.3.162",
15
- "@trackunit/css-core": "1.3.163",
12
+ "@trackunit/css-component-tokens": "1.3.166",
13
+ "@trackunit/css-tailwind-custom-properties-plugin": "1.3.166",
14
+ "@trackunit/ui-design-tokens": "1.3.164",
15
+ "@trackunit/css-core": "1.3.165",
16
16
  "@tailwindcss/typography": "^0.5.10"
17
17
  },
18
18
  "type": "commonjs",
@@ -448,257 +448,132 @@
448
448
  }
449
449
  }
450
450
 
451
- /* libs/css/core/src/lib/vendor-css/react-day-picker.css */
452
- .rdp-root {
453
- --rdp-accent-color: rgb(var(--color-primary-600) / var(--tw-bg-opacity));
454
- --rdp-accent-background-color: rgb(var(--color-primary-200) / var(--tw-bg-opacity));
455
- --rdp-day-height: 44px;
456
- --rdp-day-width: 44px;
457
- --rdp-day_button-border-radius: 100%;
458
- --rdp-day_button-border: 2px solid transparent;
459
- --rdp-day_button-height: 42px;
460
- --rdp-day_button-width: 42px;
461
- --rdp-selected-border: 2px solid var(--rdp-accent-color);
462
- --rdp-disabled-opacity: 0.5;
463
- --rdp-outside-opacity: 0.75;
464
- --rdp-today-color: var(--rdp-accent-color);
465
- --rdp-dropdown-gap: 0.5rem;
466
- --rdp-months-gap: 2rem;
467
- --rdp-nav_button-disabled-opacity: 0.5;
468
- --rdp-nav_button-height: 2.25rem;
469
- --rdp-nav_button-width: 2.25rem;
470
- --rdp-nav-height: 2.75rem;
471
- --rdp-range_middle-background-color: var(--rdp-accent-background-color);
472
- --rdp-range_middle-color: inherit;
473
- --rdp-range_start-color: white;
474
- --rdp-range_start-background: linear-gradient(
475
- var(--rdp-gradient-direction),
476
- transparent 50%,
477
- var(--rdp-range_middle-background-color) 50%
478
- );
479
- --rdp-range_start-date-background-color: var(--rdp-accent-color);
480
- --rdp-range_end-background: linear-gradient(
481
- var(--rdp-gradient-direction),
482
- var(--rdp-range_middle-background-color) 50%,
483
- transparent 50%
484
- );
485
- --rdp-range_end-color: white;
486
- --rdp-range_end-date-background-color: var(--rdp-accent-color);
487
- --rdp-week_number-border-radius: 100%;
488
- --rdp-week_number-border: 2px solid transparent;
489
- --rdp-week_number-height: var(--rdp-day-height);
490
- --rdp-week_number-opacity: 0.75;
491
- --rdp-week_number-width: var(--rdp-day-width);
492
- --rdp-weeknumber-text-align: center;
493
- --rdp-weekday-opacity: 0.75;
494
- --rdp-weekday-padding: 0.5rem 0rem;
495
- --rdp-weekday-text-align: center;
496
- --rdp-gradient-direction: 90deg;
497
- }
498
- .rdp-root[dir="rtl"] {
499
- --rdp-gradient-direction: -90deg;
500
- }
501
- .rdp-root[data-broadcast-calendar="true"] {
502
- --rdp-outside-opacity: unset;
503
- }
504
- .rdp-root {
505
- position: relative;
506
- box-sizing: border-box;
451
+ /* libs/css/core/src/lib/react-calendar.css */
452
+ .react-calendar {
453
+ width: 350px;
454
+ max-width: 100%;
455
+ background: white;
456
+ line-height: 1.125em;
507
457
  }
508
- .rdp-root * {
509
- box-sizing: border-box;
510
- }
511
- .rdp-day {
512
- width: var(--rdp-day-width);
513
- height: var(--rdp-day-height);
514
- text-align: center;
458
+ .react-calendar--doubleView {
459
+ width: 700px;
515
460
  }
516
- .rdp-day_button {
517
- background: none;
518
- padding: 0;
519
- margin: 0;
520
- cursor: pointer;
521
- font: inherit;
522
- color: inherit;
523
- justify-content: center;
524
- align-items: center;
461
+ .react-calendar--doubleView .react-calendar__viewContainer {
525
462
  display: flex;
526
- width: var(--rdp-day_button-width);
527
- height: var(--rdp-day_button-height);
528
- border: var(--rdp-day_button-border);
529
- border-radius: var(--rdp-day_button-border-radius);
530
- }
531
- .rdp-day_button:disabled {
532
- cursor: revert;
463
+ margin: -0.5em;
464
+ }
465
+ .react-calendar--doubleView .react-calendar__viewContainer > * {
466
+ width: 50%;
467
+ margin: 0.5em;
468
+ }
469
+ .react-calendar,
470
+ .react-calendar *,
471
+ .react-calendar *:before,
472
+ .react-calendar *:after {
473
+ -moz-box-sizing: border-box;
474
+ -webkit-box-sizing: border-box;
475
+ box-sizing: border-box;
533
476
  }
534
- .rdp-caption_label {
535
- z-index: 1;
536
- position: relative;
537
- display: inline-flex;
538
- align-items: center;
539
- white-space: nowrap;
477
+ .react-calendar button {
478
+ margin: 0;
540
479
  border: 0;
480
+ outline: none;
541
481
  }
542
- .rdp-dropdown:focus-visible ~ .rdp-caption_label {
543
- outline: 5px auto Highlight;
544
- outline: 5px auto -webkit-focus-ring-color;
545
- }
546
- .rdp-button_next,
547
- .rdp-button_previous {
548
- border: none;
549
- background: none;
550
- padding: 0;
551
- margin: 0;
482
+ .react-calendar button:enabled:hover {
552
483
  cursor: pointer;
553
- font: inherit;
554
- color: inherit;
555
- -moz-appearance: none;
556
- -webkit-appearance: none;
557
- display: inline-flex;
558
- align-items: center;
559
- justify-content: center;
560
- position: relative;
561
- appearance: none;
562
- width: var(--rdp-nav_button-width);
563
- height: var(--rdp-nav_button-height);
564
- }
565
- .rdp-button_next:disabled,
566
- .rdp-button_previous:disabled {
567
- cursor: revert;
568
- opacity: var(--rdp-nav_button-disabled-opacity);
569
- }
570
- .rdp-chevron {
571
- display: inline-block;
572
- fill: var(--rdp-accent-color);
573
484
  }
574
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
575
- transform: rotate(180deg);
576
- }
577
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
578
- transform: rotate(180deg);
579
- transform-origin: 50%;
580
- }
581
- .rdp-dropdowns {
582
- position: relative;
583
- display: inline-flex;
584
- align-items: center;
585
- gap: var(--rdp-dropdown-gap);
485
+ .react-calendar__navigation {
486
+ display: flex;
487
+ height: 44px;
488
+ margin-bottom: 1em;
586
489
  }
587
- .rdp-dropdown {
588
- z-index: 2;
589
- opacity: 0;
590
- appearance: none;
591
- position: absolute;
592
- inset-block-start: 0;
593
- inset-block-end: 0;
594
- inset-inline-start: 0;
595
- width: 100%;
596
- margin: 0;
597
- padding: 0;
598
- cursor: inherit;
599
- border: none;
600
- line-height: inherit;
490
+ .react-calendar__navigation button {
491
+ min-width: 44px;
492
+ background: none;
601
493
  }
602
- .rdp-dropdown_root {
603
- position: relative;
604
- display: inline-flex;
605
- align-items: center;
494
+ .react-calendar__navigation button:disabled {
495
+ background-color: #f0f0f0;
606
496
  }
607
- .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
608
- opacity: var(--rdp-disabled-opacity);
497
+ .react-calendar__navigation button:enabled:hover,
498
+ .react-calendar__navigation button:enabled:focus {
499
+ background-color: #e6e6e6;
609
500
  }
610
- .rdp-month_caption {
611
- display: flex;
612
- align-content: center;
613
- height: var(--rdp-nav-height);
501
+ .react-calendar__month-view__weekdays {
502
+ text-align: center;
503
+ text-transform: uppercase;
504
+ font: inherit;
505
+ font-size: 0.75em;
614
506
  font-weight: bold;
615
- font-size: large;
616
507
  }
617
- .rdp-months {
618
- position: relative;
619
- display: flex;
620
- flex-wrap: wrap;
621
- gap: var(--rdp-months-gap);
622
- max-width: fit-content;
508
+ .react-calendar__month-view__weekdays__weekday {
509
+ padding: 0.5em;
623
510
  }
624
- .rdp-month_grid {
625
- border-collapse: collapse;
626
- }
627
- .rdp-nav {
628
- position: absolute;
629
- inset-block-start: 0;
630
- inset-inline-end: 0;
511
+ .react-calendar__month-view__weekNumbers .react-calendar__tile {
631
512
  display: flex;
632
513
  align-items: center;
633
- height: var(--rdp-nav-height);
634
- }
635
- .rdp-weekday {
636
- opacity: var(--rdp-weekday-opacity);
637
- padding: var(--rdp-weekday-padding);
638
- font-weight: 500;
639
- font-size: smaller;
640
- text-align: var(--rdp-weekday-text-align);
641
- text-transform: var(--rdp-weekday-text-transform);
642
- }
643
- .rdp-week_number {
644
- opacity: var(--rdp-week_number-opacity);
645
- font-weight: 400;
646
- font-size: small;
647
- height: var(--rdp-week_number-height);
648
- width: var(--rdp-week_number-width);
649
- border: var(--rdp-week_number-border);
650
- border-radius: var(--rdp-week_number-border-radius);
651
- text-align: var(--rdp-weeknumber-text-align);
514
+ justify-content: center;
515
+ font: inherit;
516
+ font-size: 0.75em;
517
+ font-weight: bold;
652
518
  }
653
- .rdp-today:not(.rdp-outside) {
654
- color: var(--rdp-today-color);
519
+ .react-calendar__month-view__days__day--weekend {
520
+ color: #d10000;
655
521
  }
656
- .rdp-selected {
657
- font-weight: bold;
658
- font-size: large;
522
+ .react-calendar__month-view__days__day--neighboringMonth,
523
+ .react-calendar__decade-view__years__year--neighboringDecade,
524
+ .react-calendar__century-view__decades__decade--neighboringCentury {
525
+ color: #757575;
659
526
  }
660
- .rdp-selected .rdp-day_button {
661
- border: var(--rdp-selected-border);
527
+ .react-calendar__year-view .react-calendar__tile,
528
+ .react-calendar__decade-view .react-calendar__tile,
529
+ .react-calendar__century-view .react-calendar__tile {
530
+ padding: 2em 0.5em;
662
531
  }
663
- .rdp-outside {
664
- opacity: var(--rdp-outside-opacity);
532
+ .react-calendar__tile {
533
+ max-width: 100%;
534
+ padding: 10px 6.6667px;
535
+ background: none;
536
+ text-align: center;
537
+ font: inherit;
538
+ font-size: 0.833em;
665
539
  }
666
- .rdp-disabled {
667
- opacity: var(--rdp-disabled-opacity);
540
+ .react-calendar__tile:disabled {
541
+ background-color: #f0f0f0;
542
+ color: #ababab;
668
543
  }
669
- .rdp-hidden {
670
- visibility: hidden;
671
- color: var(--rdp-range_start-color);
544
+ .react-calendar__month-view__days__day--neighboringMonth:disabled,
545
+ .react-calendar__decade-view__years__year--neighboringDecade:disabled,
546
+ .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
547
+ color: #cdcdcd;
672
548
  }
673
- .rdp-range_start {
674
- background: var(--rdp-range_start-background);
549
+ .react-calendar__tile:enabled:hover,
550
+ .react-calendar__tile:enabled:focus {
551
+ background-color: #e6e6e6;
675
552
  }
676
- .rdp-range_start .rdp-day_button {
677
- background-color: var(--rdp-range_start-date-background-color);
678
- color: var(--rdp-range_start-color);
553
+ .react-calendar__tile--now {
554
+ background: #ffff76;
679
555
  }
680
- .rdp-range_middle {
681
- background-color: var(--rdp-range_middle-background-color);
556
+ .react-calendar__tile--now:enabled:hover,
557
+ .react-calendar__tile--now:enabled:focus {
558
+ background: #ffffa9;
682
559
  }
683
- .rdp-range_middle .rdp-day_button {
684
- border-color: transparent;
685
- border: unset;
686
- border-radius: unset;
687
- color: var(--rdp-range_middle-color);
560
+ .react-calendar__tile--hasActive {
561
+ background: #76baff;
688
562
  }
689
- .rdp-range_end {
690
- background: var(--rdp-range_end-background);
691
- color: var(--rdp-range_end-color);
563
+ .react-calendar__tile--hasActive:enabled:hover,
564
+ .react-calendar__tile--hasActive:enabled:focus {
565
+ background: #a9d4ff;
692
566
  }
693
- .rdp-range_end .rdp-day_button {
694
- color: var(--rdp-range_start-color);
695
- background-color: var(--rdp-range_end-date-background-color);
567
+ .react-calendar__tile--active {
568
+ background: #006edc;
569
+ color: white;
696
570
  }
697
- .rdp-range_start.rdp-range_end {
698
- background: revert;
571
+ .react-calendar__tile--active:enabled:hover,
572
+ .react-calendar__tile--active:enabled:focus {
573
+ background: #1087ff;
699
574
  }
700
- .rdp-focusable {
701
- cursor: pointer;
575
+ .react-calendar--selectRange .react-calendar__tile--hover {
576
+ background-color: #e6e6e6;
702
577
  }
703
578
 
704
579
  /* libs/css/core/src/lib/fonts.css */