[AAE-38482] added mixin for theming mat-datetimepicker

lib/core/src/lib/styles/_index.scss

@@ -2,3 +2,4 @@
 @forward './flex';
 @forward './mixins';
 @forward './mat-selectors';
+@forward './mat-datetimepicker';

lib/core/src/lib/styles/_mat-datetimepicker.scss

@@ -0,0 +1,90 @@
+@use 'mat-selectors' as ms;
+
+@mixin override-mat-date-timepicker(
+    $primary-color,
+    $on-primary-color,
+    $sys-background,
+    $on-surface,
+    $surface-container-highest,
+    $on-surface-variant
+) {
+    #{ms.$mat-datetimepicker-calendar-header} {
+        background-color: $primary-color;
+        color: $on-primary-color;
+    }
+
+    #{ms.$mat-datetimepicker-calendar} {
+        #{ms.$mat-datetimepicker-calendar-content} {
+            background-color: $sys-background;
+            color: $on-surface;
+            #{ms.$mat-datetimepicker-clock} {
+                background-color: $surface-container-highest;
+                #{ms.$mat-datetimepicker-clock-cell} {
+                    color: $on-surface;
+                }
+            }
+        }
+    }
+
+    #{ms.$mat-datetimepicker-calendar-body-cell} {
+        color: $on-surface;
+        #{ms.$mat-datetimepicker-calendar-body-cell-content} {
+            color: $on-surface;
+        }
+    }
+
+    #{ms.$mat-datetimepicker-calendar-body-cell-content} {
+        &#{ms.$mat-datetimepicker-calendar-body-selected} {
+            background-color: $primary-color;
+            color: $on-surface;
+            color: $on-primary-color;
+        }
+
+        &#{ms.$mat-datetimepicker-calendar-body-disabled} > #{ms.$mat-datetimepicker-calendar-body-selected} {
+            background-color: $primary-color;
+            opacity: 0.4;
+            color: $on-primary-color;
+        }
+
+        &#{ms.$mat-datetimepicker-calendar-body-today} {
+            &:not(#{ms.$mat-datetimepicker-calendar-body-selected}) {
+                border-color: $primary-color;
+            }
+
+            &#{ms.$mat-datetimepicker-calendar-body-selected} {
+                box-shadow: inset 0 0 0 1px $on-primary-color;
+            }
+        }
+    }
+
+    #{ms.$mat-datetimepicker-clock-center} {
+        background-color: $primary-color;
+    }
+
+    #{ms.$mat-datetimepicker-clock-hand} {
+        background-color: $primary-color;
+
+        &::before {
+            background-color: $primary-color;
+        }
+    }
+
+    #{ms.$mat-datetimepicker-clock} {
+        #{ms.$mat-datetimepicker-clock-cell} {
+            &#{ms.$mat-datetimepicker-clock-cell-selected} {
+                color: $on-primary-color;
+                background-color: color-mix(in srgb, $primary-color 95%, white);
+            }
+        }
+    }
+
+    #{ms.$mat-datetimepicker-calendar-body-disabled}
+        > #{ms.$mat-datetimepicker-calendar-body-cell-content}:not(#{ms.$mat-datetimepicker-calendar-body-selected}) {
+        opacity: 0.4;
+        color: $on-surface;
+    }
+
+    #{ms.$mat-datetimepicker-calendar-table-header} {
+        color: $on-surface-variant;
+    }
+}

lib/core/src/lib/styles/_mat-selectors.scss

@@ -77,3 +77,12 @@ $mat-datetimepicker-calendar-header-time: '.mat-datetimepicker-calendar-header-t
 $mat-datetimepicker-calendar-content: '.mat-datetimepicker-calendar-content';
 $mat-datetimepicker-calendar-body-disabled: '.mat-datetimepicker-calendar-body-disabled';
 $mat-datetimepicker-toggle: '.mat-datetimepicker-toggle';
+$mat-datetimepicker-clock: '.mat-datetimepicker-clock';
+$mat-datetimepicker-clock-cell: '.mat-datetimepicker-clock-cell';
+$mat-datetimepicker-calendar-body-cell-content: '.mat-datetimepicker-calendar-body-cell-content';
+$mat-datetimepicker-calendar-body-selected: '.mat-datetimepicker-calendar-body-selected';
+$mat-datetimepicker-calendar-body-today: '.mat-datetimepicker-calendar-body-today';
+$mat-datetimepicker-clock-center: '.mat-datetimepicker-clock-center';
+$mat-datetimepicker-clock-hand: '.mat-datetimepicker-clock-hand';
+$mat-datetimepicker-clock-cell-selected: '.mat-datetimepicker-clock-cell-selected';
+$mat-datetimepicker-calendar-body-cell: '.mat-datetimepicker-calendar-body-cell';