refactor: enable base style custom property overrides (#11123)

* refactor: enable base style custom property overrides

* test: update dashboard baseline screenshots for aura

* test: update dashboard baseline screenshots for aura dark

---------

Co-authored-by: Diego Cardoso <diego@vaadin.com>

Author: jouni

packages/aura/src/components/app-layout.css

@@ -25,7 +25,7 @@ vaadin-app-layout {
 }
 
 vaadin-app-layout[overlay]::part(drawer) {
-  --vaadin-app-layout-drawer-background: var(--aura-surface-color);
+  background: var(--vaadin-app-layout-drawer-background, var(--aura-surface-color));
   --aura-surface-opacity: var(--aura-overlay-surface-opacity);
   -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
   backdrop-filter: var(--aura-overlay-backdrop-filter);
@@ -37,7 +37,7 @@ vaadin-app-layout:not([has-drawer]) {
 }
 
 vaadin-app-layout::part(navbar) {
-  --vaadin-app-layout-navbar-background: transparent;
+  background: var(--vaadin-app-layout-navbar-background, transparent);
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
 }
@@ -52,7 +52,6 @@ vaadin-app-layout[has-navbar]::part(drawer) {
 }
 
 vaadin-app-layout > vaadin-scroller[slot='drawer'] {
-  /* TODO would need a dedicated padding-top property */
   --vaadin-scroller-padding-inline: var(--vaadin-padding-m);
   --vaadin-scroller-padding-block: var(--vaadin-padding-s);
   scrollbar-width: thin;

packages/aura/src/components/avatar.css

@@ -20,9 +20,6 @@ vaadin-avatar:where([has-color-index]) {
   --aura-accent-color-light: var(--vaadin-avatar-user-color);
   --aura-accent-color-dark: var(--vaadin-avatar-user-color);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
-  color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
-  --vaadin-avatar-background: var(--vaadin-accent-surface);
-  --vaadin-avatar-text-color: var(--aura-accent-text-color);
   --vaadin-avatar-border-color: var(--aura-accent-border-color);
   --vaadin-avatar-border-width: 1px;
 }

packages/aura/src/components/button.css

@@ -7,7 +7,7 @@
   transition: scale 180ms;
   position: relative;
   --_background: var(--aura-accent-surface) padding-box;
-  --vaadin-button-text-color: var(--aura-accent-text-color);
+  color: var(--vaadin-button-text-color, var(--aura-accent-text-color));
 }
 
 vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
@@ -25,7 +25,7 @@ vaadin-drawer-toggle[theme~='tertiary']::part(icon) {
 /* prettier-ignore */
 :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):not([theme~='primary'], [theme~='tertiary']) {
   background: var(--vaadin-button-background, var(--_background));
-  --vaadin-button-border-color: var(--aura-accent-border-color);
+  border-color: var(--vaadin-button-border-color, var(--aura-accent-border-color));
 }
 
 :is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(

packages/aura/src/components/dashboard.css

@@ -40,7 +40,7 @@ vaadin-dashboard-widget {
   }
 
   &[editable] {
-    --vaadin-dashboard-widget-shadow: var(--aura-shadow-s);
+    box-shadow: var(--vaadin-dashboard-widget-shadow, var(--aura-shadow-s));
   }
 }
 

packages/aura/src/components/date-picker.css

@@ -2,7 +2,6 @@
 :where(:host) {
   --vaadin-date-picker-year-scroller-background: light-dark(var(--vaadin-background-container), transparent);
   --vaadin-date-picker-month-header-font-weight: var(--aura-font-weight-semibold);
-  /* TODO add/use selection color */
   --vaadin-date-picker-date-selected-background: var(--aura-accent-color);
   --vaadin-date-picker-date-selected-color: var(--aura-accent-contrast-color);
 }

packages/aura/src/components/dialog.css

@@ -11,7 +11,7 @@ vaadin-confirm-dialog {
 
 vaadin-dialog::part(overlay),
 vaadin-confirm-dialog::part(overlay) {
-  --vaadin-dialog-background: var(--aura-surface-color);
+  background: var(--vaadin-dialog-background, var(--vaadin-overlay-background, var(--aura-surface-color)));
   --aura-surface-level: 4;
 
   /* TODO probably should be in base styles */

packages/aura/src/components/grid.css

@@ -11,11 +11,6 @@
   justify-content: center;
 }
 
-/* TODO custom part name: how should we indicate an active row? Should we have a built-in part name? */
-vaadin-grid::part(active-nav-item) {
-  --vaadin-grid-row-highlight-background-color: var(--vaadin-background-container);
-}
-
 vaadin-grid-sorter::part(indicators) {
   transition: color 120ms;
 }

packages/aura/src/components/item-overlay.css

@@ -8,7 +8,6 @@
     var(--aura-item-overlay-padding-inline) * 100,
     var(--vaadin-radius-m) - min(var(--aura-item-overlay-padding-inline), var(--aura-item-overlay-padding-block))
   );
-  --vaadin-item-checkmark-color: var(--aura-accent-text-color);
   --vaadin-item-gap: var(--vaadin-gap-s);
 }
 
@@ -21,7 +20,6 @@ vaadin-menu-bar-item,
 vaadin-multi-select-combo-box-item,
 vaadin-select-item:where([role]) {
   font-weight: var(--aura-font-weight-medium);
-  --vaadin-item-checkmark-color: var(--aura-accent-text-color);
   -webkit-user-select: none;
   user-select: none;
   --_highlight-color: light-dark(
@@ -32,6 +30,7 @@ vaadin-select-item:where([role]) {
   gap: 0;
 
   &::part(checkmark) {
+    color: var(--vaadin-item-checkmark-color, var(--aura-accent-text-color));
     --vaadin-icon-visual-size: 75%;
   }
 

packages/aura/src/components/multi-select-combo-box.css

@@ -2,12 +2,11 @@
 :where(:host) {
   --vaadin-chip-padding: 0.4em;
   --vaadin-chip-background: var(--vaadin-background-container-strong);
+  --vaadin-chip-height: 1lh;
+  --vaadin-chip-border-radius: var(--vaadin-radius-s);
+  --vaadin-chip-border-width: 0px;
 }
 
 vaadin-multi-select-combo-box-chip {
-  --vaadin-chip-height: 1lh;
   --vaadin-icon-size: 1.25em;
-  --vaadin-chip-padding: 0.4em;
-  --vaadin-chip-border-radius: var(--vaadin-radius-s);
-  --vaadin-chip-border-width: 0px;
 }

packages/aura/src/components/overlay.css

@@ -26,7 +26,7 @@
 }
 
 ::part(overlay) {
-  --vaadin-overlay-background: var(--aura-surface-color);
+  background: var(--vaadin-overlay-background, var(--aura-surface-color));
   --aura-surface-level: 4;
   --aura-surface-opacity: var(--aura-overlay-surface-opacity);
   box-shadow: var(--aura-overlay-outline-shadow), var(--vaadin-overlay-shadow, var(--aura-overlay-shadow));