@recursyve/nice-ui-kit.v2 15.0.0-beta.122 → 15.0.0-beta.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursyve/nice-ui-kit.v2",
-  "version": "15.0.0-beta.122",
+  "version": "15.0.0-beta.123",
   "exports": {
     ".": {
       "sass": "./_index.scss",

package/src/lib/components/date-range-picker/date-range-picker.theme.scss

@@ -5,9 +5,9 @@
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
 
-    mat-calendar {
+    mat-calendar.nice-date-range-picker {
         .mat-calendar-body-in-range::before {
-            background: mat.get-color-from-palette($accent, 0.2) !important;
+            @apply bg-accent/20;
         }
     }
 

package/styles/overrides/angular-material.scss

@@ -1433,6 +1433,9 @@ table {
 
 // FIX FOR VAR
 
+// -----------------------------------------------------------------------------------------------------
+// Progress bar
+// -----------------------------------------------------------------------------------------------------
 .mat-mdc-progress-bar {
     &.mat-accent {
         .mdc-linear-progress__buffer-bar {
@@ -1453,26 +1456,44 @@ table {
     }
 }
 
+// -----------------------------------------------------------------------------------------------------
+// Checkbox
+// -----------------------------------------------------------------------------------------------------
 .mat-mdc-checkbox {
     &.mat-accent {
         .mdc-checkbox__checkmark {
             @apply text-on-accent #{!important};
         }
+
+        .mdc-checkbox__mixedmark {
+            --mdc-checkbox-selected-checkmark-color: var(--nice-on-accent) #{!important};;
+        }
     }
 
     &.mat-primary {
         .mdc-checkbox__checkmark {
             @apply text-on-primary #{!important};
         }
+
+        .mdc-checkbox__mixedmark {
+            --mdc-checkbox-selected-checkmark-color: var(--nice-on-primary) #{!important};;
+        }
     }
 
     &.mat-warn {
         .mdc-checkbox__checkmark {
             @apply text-on-warn #{!important};
         }
+
+        .mdc-checkbox__mixedmark {
+            --mdc-checkbox-selected-checkmark-color: var(--nice-on-warn) #{!important};;
+        }
     }
 }
 
+// -----------------------------------------------------------------------------------------------------
+// List
+// -----------------------------------------------------------------------------------------------------
 .mdc-list-item__accent-text {
     @apply text-accent #{!important};
 }
@@ -1484,3 +1505,55 @@ table {
 .mdc-list-item__warn-text {
     @apply text-warn #{!important};
 }
+
+// -----------------------------------------------------------------------------------------------------
+// Date Picker + Calendar
+// -----------------------------------------------------------------------------------------------------
+
+@mixin _calendar_body_in_range {
+    .mat-calendar-body-in-range::before {
+        @content;
+    }
+}
+
+@mixin _calendar_body_hover {
+    @media (hover: hover) {
+        .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {
+            & > .mat-calendar-body-cell-content {
+                &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+                    @content;
+                }
+            }
+        }
+    }
+}
+
+@include _calendar_body_hover {
+    @apply bg-primary/30 #{!important};
+}
+
+@include _calendar_body_in_range {
+    @apply bg-primary/20 #{!important};
+}
+
+.mat-datepicker-content {
+    &.mat-accent {
+        @include _calendar_body_hover {
+            @apply bg-accent/30 #{!important};
+        }
+
+        @include _calendar_body_in_range {
+            @apply bg-accent/20 #{!important};
+        }
+    }
+
+    &.mat-warn {
+        @include _calendar_body_hover {
+            @apply bg-warn/30 #{!important};
+        }
+
+        @include _calendar_body_in_range {
+            @apply bg-warn/20 #{!important};
+        }
+    }
+}