@haiilo/catalyst 6.2.3 → 6.3.1

package/dist/catalyst/scss/vendor/_flatpickr.scss

@@ -11,7 +11,7 @@
   background: cat-token('color.ui.background.surface');
   padding: 1rem;
 
-  &.animate {
+  &:not(.inline).animate {
     transform: translateY(-1rem);
     opacity: 0;
     transition: transform cat-token('time.transition.s') cubic-bezier(0.3, 0, 0.8, 0.15),
@@ -23,9 +23,21 @@
     display: none;
   }
 
+  &.inline,
   &.open {
-    z-index: cat-z-index('dropdown');
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
     width: auto !important;
+  }
+
+  &.inline {
+    border: unset;
+    padding: 0;
+  }
+
+  &.open {
+    z-index: cat-z-index('dropdown');
     margin-top: 0.75rem;
     margin-left: -0.75rem;
 
@@ -97,6 +109,10 @@
 
 .flatpickr-weekdays {
   height: 2rem;
+  .flatpickr-weekday {
+    color: cat-token('color.ui.font.muted');
+    @include cat-body(xs, $weight: 700);
+  }
 }
 
 .flatpickr-weekwrapper {
@@ -107,14 +123,17 @@
   .flatpickr-weeks {
     box-shadow: none;
     width: 2rem;
-    padding: 0 0.5rem 0 0;
+    padding: 0;
+    margin-right: 0.5rem;
+    background: cat-token('color.ui.background.muted');
+    border-radius: cat-token('size.border.radius.m');
   }
 
   span.flatpickr-day,
   span.flatpickr-day:hover {
     @include cat-body(xs, $weight: 700);
     color: cat-token('color.ui.font.muted');
-    text-align: right;
+    text-align: center;
     line-height: 2.25rem;
   }
 }
@@ -133,7 +152,6 @@
   color: cat-token('color.ui.font.body');
   height: 2.25rem;
   line-height: 2.25rem;
-  // max-width: unset;
   border: 0;
   border-radius: cat-border-radius('m');
 
@@ -142,6 +160,11 @@
     font-weight: 700;
   }
 
+  &.flatpickr-disabled,
+  &.flatpickr-disabled:hover {
+    color: cat-token('color.ui.font.muted');
+  }
+
   &.today {
     color: cat-token('color.theme.primary.text');
     box-shadow: inset 0 0 0 2px cat-token('color.theme.primary.text');
@@ -153,6 +176,16 @@
     }
   }
 
+  &.flatpickr-disabled,
+  &.flatpickr-disabled:hover,
+  &.prevMonthDay,
+  &.nextMonthDay,
+  &.notAllowed,
+  &.notAllowed.prevMonthDay,
+  &.notAllowed.nextMonthDay {
+    color: cat-token('color.ui.font.muted', 0.5);
+  }
+
   &.selected,
   &.startRange,
   &.endRange {
@@ -241,22 +274,33 @@
   }
 }
 
-.flatpickr-time .numInputWrapper {
-  height: 2.25rem;
-}
-
 .flatpickr-calendar.hasTime .flatpickr-time {
-  height: 2.25rem;
-  line-height: 2.25rem;
-  max-height: 2.25rem;
-  border-top: none;
+  border: 1px solid cat-token('color.ui.border.default');
+  border-radius: cat-token('size.border.radius.m');
   min-width: 12rem;
+  height: auto;
+
+  .numInputWrapper {
+    height: 2rem;
+    padding: 0;
+    margin: 0.25rem;
+    display: flex;
+  }
+}
+
+.flatpickr-calendar.hasTime.noCalendar {
+  padding: 0;
+
+  .flatpickr-time {
+    border: none;
+  }
 }
 
 .flatpickr-time .flatpickr-time-separator,
 .flatpickr-time .flatpickr-am-pm {
   margin: 0 0.25rem;
   @include cat-head(4, 400);
+  color: cat-token('color.ui.font.body');
   line-height: 2.25rem;
 }
 
@@ -272,10 +316,14 @@
 }
 
 .flatpickr-time {
+  max-height: unset;
+
   input {
     background: transparent !important;
-    @include cat-head(4, 400);
+    color: cat-token('color.ui.font.body');
+    font-size: cat-token('size.font.body.m');
     line-height: 2.25rem;
+    font-family: inherit;
 
     &.flatpickr-hour {
       font-weight: inherit;