@trackunit/css-tailwind 1.9.9 → 1.9.12

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.9.9",
3
+ "version": "1.9.12",
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.9.9",
13
- "@trackunit/css-tailwind-custom-properties-plugin": "1.9.9",
14
- "@trackunit/ui-design-tokens": "1.9.9",
15
- "@trackunit/css-core": "1.9.9",
12
+ "@trackunit/css-component-tokens": "1.9.12",
13
+ "@trackunit/css-tailwind-custom-properties-plugin": "1.9.12",
14
+ "@trackunit/ui-design-tokens": "1.9.12",
15
+ "@trackunit/css-core": "1.9.12",
16
16
  "@tailwindcss/typography": "^0.5.10"
17
17
  },
18
18
  "type": "commonjs",
@@ -450,10 +450,10 @@
450
450
 
451
451
  /* libs/css/core/src/lib/react-calendar.css */
452
452
  .react-calendar {
453
- width: 350px;
454
- max-width: 100%;
453
+ width: 330px;
455
454
  background: white;
456
455
  line-height: 1.125em;
456
+ padding: var(--spacing-4) var(--spacing-3);
457
457
  }
458
458
  .react-calendar--doubleView {
459
459
  width: 700px;
@@ -490,19 +490,23 @@
490
490
  .react-calendar__navigation button {
491
491
  min-width: 44px;
492
492
  background: none;
493
+ border-radius: 8px;
494
+ }
495
+ .react-calendar__navigation__arrow {
496
+ color: rgb(var(--color-neutral-400) / var(--tw-bg-opacity));
493
497
  }
494
498
  .react-calendar__navigation button:disabled {
495
- background-color: #f0f0f0;
499
+ background-color: rgb(var(--color-neutral-50) / var(--tw-bg-opacity));
496
500
  }
497
501
  .react-calendar__navigation button:enabled:hover,
498
502
  .react-calendar__navigation button:enabled:focus {
499
- background-color: #e6e6e6;
503
+ background-color: rgb(var(--color-neutral-200) / var(--tw-bg-opacity));
500
504
  }
501
505
  .react-calendar__month-view__weekdays {
502
506
  text-align: center;
503
507
  font: inherit;
504
508
  font-size: 0.75em;
505
- color: #94a3b8;
509
+ color: rgb(var(--color-neutral-400) / var(--tw-bg-opacity));
506
510
  font-weight: bold;
507
511
  }
508
512
  .react-calendar__viewContainer abbr:where([title]) {
@@ -522,12 +526,13 @@
522
526
  .react-calendar__month-view__days {
523
527
  row-gap: 8px;
524
528
  }
525
- .react-calendar__month-view__days__day--weekend {
529
+ .react-calendar__month-view__days__day--neighboringMonth.react-calendar__tile--active {
530
+ background: rgb(var(--color-primary-50) / 0.5);
526
531
  }
527
532
  .react-calendar__month-view__days__day--neighboringMonth,
528
533
  .react-calendar__decade-view__years__year--neighboringDecade,
529
534
  .react-calendar__century-view__decades__decade--neighboringCentury {
530
- color: #757575;
535
+ color: rgb(var(--color-neutral-500) / var(--tw-bg-opacity));
531
536
  }
532
537
  .react-calendar__year-view .react-calendar__tile,
533
538
  .react-calendar__decade-view .react-calendar__tile,
@@ -535,6 +540,7 @@
535
540
  padding: 2em 0.5em;
536
541
  }
537
542
  .react-calendar__tile {
543
+ position: relative;
538
544
  max-width: 100%;
539
545
  padding: 10px 6.6667px;
540
546
  background: none;
@@ -542,56 +548,60 @@
542
548
  font: inherit;
543
549
  font-size: 0.833em;
544
550
  }
551
+ .react-calendar__tile:focus:before {
552
+ content: " ";
553
+ position: absolute;
554
+ background: transparent;
555
+ left: 0;
556
+ top: 0;
557
+ width: 100%;
558
+ height: 100%;
559
+ border: 2px solid rgb(var(--color-primary-600) / var(--tw-bg-opacity));
560
+ border-radius: 8px;
561
+ }
545
562
  .react-calendar__tile:disabled {
546
- background-color: #f0f0f0;
547
- color: #ababab;
563
+ background-color: rgb(var(--color-neutral-50) / var(--tw-bg-opacity));
564
+ color: rgb(var(--color-neutral-100) / var(--tw-bg-opacity));
548
565
  }
549
566
  .react-calendar__month-view__days__day--neighboringMonth:disabled,
550
567
  .react-calendar__decade-view__years__year--neighboringDecade:disabled,
551
568
  .react-calendar__century-view__decades__decade--neighboringCentury:disabled {
552
- color: #cdcdcd;
569
+ color: rgb(var(--color-neutral-100) / var(--tw-bg-opacity));
553
570
  }
554
- .react-calendar__tile:enabled:hover,
555
- .react-calendar__tile:enabled:focus {
556
- background-color: #e6e6e6;
571
+ .react-calendar__tile:enabled:hover {
572
+ background-color: rgb(var(--color-neutral-200) / var(--tw-bg-opacity));
557
573
  }
558
574
  .react-calendar__tile--now:not(.react-calendar__tile--active) {
559
- color: #2563eb;
560
- }
561
- .react-calendar__tile--now:enabled:hover,
562
- .react-calendar__tile--now:enabled:focus {
563
- background: #1d50bc;
575
+ color: rgb(var(--color-primary-600) / var(--tw-bg-opacity));
564
576
  }
565
577
  .react-calendar__tile--hasActive {
566
- background: #76baff;
578
+ background: rgb(var(--color-primary-200) / var(--tw-bg-opacity));
567
579
  }
568
- .react-calendar__tile--hasActive:enabled:hover,
569
- .react-calendar__tile--hasActive:enabled:focus {
570
- background: #a9d4ff;
580
+ .react-calendar__tile--hasActive:enabled:hover {
581
+ background: rgb(var(--color-primary-100) / var(--tw-bg-opacity));
571
582
  }
572
583
  .react-calendar__tile--active {
573
- background: #eff6ff;
584
+ background: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
574
585
  }
575
586
  .react-calendar__tile:not(.react-calendar__tile--active):enabled:hover {
576
587
  border-radius: 8px 8px 8px 8px;
577
588
  }
578
- .react-calendar__tile--active:enabled:hover,
579
- .react-calendar__tile--active:enabled:focus {
580
- background: #eff6ff;
589
+ .react-calendar__tile--active:enabled:hover {
590
+ background: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
581
591
  border-radius: none !important;
582
592
  }
583
593
  .react-calendar--selectRange .react-calendar__tile--hover {
584
- background-color: #eff6ff;
594
+ background: rgb(var(--color-primary-50) / var(--tw-bg-opacity));
585
595
  border-radius: none !important;
586
596
  }
587
597
  .react-calendar__tile--rangeStart {
588
- background: #006edc !important;
589
- border-radius: 8px 8px 8px 8px;
598
+ background: rgb(var(--color-primary-600) / var(--tw-bg-opacity)) !important;
599
+ border-radius: 8px;
590
600
  color: white;
591
601
  }
592
602
  .react-calendar__tile--rangeEnd {
593
- background: #006edc !important;
594
- border-radius: 8px 8px 8px 8px;
603
+ background: rgb(var(--color-primary-600) / var(--tw-bg-opacity)) !important;
604
+ border-radius: 8px;
595
605
  color: white;
596
606
  }
597
607