feature(Datepicker) modal styling #557

Author: gselderslaghs

components/datepicker/_datepicker.scss

@@ -1,18 +1,11 @@
-/* Modal */
-// @removed since v2.2.1
-/*.datepicker-modal {
-  max-width: 325px;
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  min-width: 300px;
-  max-height: none;
-}*/
+@use './mixins.module.scss' as *;
 
 .datepicker-container {
   display: flex;
   flex-direction: column;
   max-width: 325px;
   padding: 0;
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--md-sys-color-inverse-on-surface);
 }
 
 .datepicker-controls {
@@ -34,8 +27,8 @@
       text-align: center;
 
       &:focus {
-        border-bottom: none;
-        background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-primary);
+        background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
       }
 
       &::selection {
@@ -70,6 +63,12 @@
   .month-next {
     display: inline-flex;
     align-items: center;
+
+    @include btn($height: 49px);
+
+    &:focus {
+      background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    }
   }
 
   .month-prev > svg,
@@ -261,3 +260,9 @@
   color: var(--md-sys-color-error);
 }
 
+/* Display modes */
+.datepicker-modal {
+  max-width: calc(325px + var(--modal-padding)*2);
+  max-height: none;
+  background-color: var(--md-sys-color-inverse-on-surface);
+}

sass/_global.scss

@@ -478,6 +478,10 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
   visibility: hidden;
 }
 
+.confirmation-btns {
+  margin-left: auto;
+}
+
 /* This is needed for some mobile phones to display the Google Icon font properly */
 .material-icons, .material-symbols-outlined,
 .material-symbols-rounded, .material-symbols-sharp {