refactor: update date-picker overlay content to use base styles (#10087)

Author: web-padawan

packages/date-picker/src/vaadin-date-picker-overlay-content.js

@@ -33,6 +33,12 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
     return overlayContentStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`

packages/date-picker/test/visual/lumo/screenshots/date-picker/baseline/rtl-dropdown.png

@@ -5,15 +5,6 @@
  */
 @media lumo_components_date-picker-overlay-content {
   :host {
-    display: grid;
-    grid-template-areas:
-      'header header'
-      'months years'
-      'toolbar years';
-    grid-template-columns: minmax(0, 1fr) 0;
-    height: 100%;
-    outline: none;
-    position: relative;
     /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
     background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
     background-size: 57px 100%;
@@ -26,18 +17,6 @@
     background-position: top left;
   }
 
-  :host([desktop]) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  :host([fullscreen][years-visible]) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
   ::slotted([slot='months']) {
     /* Month calendar height:
           header height + margin-bottom
@@ -55,17 +34,15 @@
       );
     --vaadin-infinite-scroller-buffer-offset: 10%;
     mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
-    position: relative;
   }
 
   ::slotted([slot='years']) {
     /* TODO get rid of fixed magic number */
     --vaadin-infinite-scroller-buffer-width: 57px;
     width: 57px;
-    height: auto;
-    top: 0;
-    bottom: 0;
     font-size: var(--lumo-font-size-s);
+    border: none;
+    background: transparent;
     box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
     mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
     cursor: var(--lumo-clickable-cursor);
@@ -79,43 +56,34 @@
     --_lumo-date-picker-year-opacity: 1;
   }
 
-  :host([desktop]) ::slotted([slot='years']),
-  :host([years-visible]) ::slotted([slot='years']) {
-    visibility: visible;
-  }
-
   /* Year scroller position indicator */
   ::slotted([slot='years'])::before {
     border: none;
     width: 1em;
     height: 1em;
     background-color: var(--lumo-base-color);
     background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-    transform: translate(-75%, -50%) rotate(45deg);
     border-top-right-radius: var(--lumo-border-radius-s);
     box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
-    z-index: 1;
+    translate: -75% -50%;
   }
 
   :host([dir='rtl']) ::slotted([slot='years'])::before {
-    right: 0;
-    transform: translate(75%, -50%) rotate(45deg);
+    border-bottom-left-radius: var(--lumo-border-radius-s);
+    translate: 75% -50%;
   }
 
   [part='toolbar'] {
-    display: flex;
-    grid-area: toolbar;
-    justify-content: space-between;
     padding: var(--lumo-space-s);
     border-bottom-left-radius: var(--lumo-border-radius-l);
   }
 
   /* Narrow viewport mode (fullscreen) */
 
   :host([fullscreen]) [part='toolbar'] {
-    grid-area: header;
     margin-inline-end: 57px;
     background-color: var(--lumo-base-color);
+    border: none;
   }
 
   [part='toolbar'] ::slotted(vaadin-button) {
@@ -125,8 +93,6 @@
   /* Very narrow screen (year scroller initially hidden) */
 
   [part='years-toggle-button'] {
-    display: flex;
-    align-items: center;
     height: var(--lumo-size-m);
     padding: 0 0.5em;
     border-radius: var(--lumo-border-radius-m);