@vaadin/aura 25.0.0-beta4 → 25.0.0-beta6

package/src/components/app-layout.css

@@ -2,49 +2,44 @@
 :where(:host) {
   --aura-app-layout-inset: 1.5vmin;
   --aura-app-layout-radius: var(--vaadin-radius-l);
-  --_aura-mdl-border: 1px;
-  --vaadin-app-layout-navbar-padding-top: 0;
-  --vaadin-app-layout-navbar-padding-bottom: 0;
-  --vaadin-app-layout-navbar-padding-inline-start: 0;
-  --vaadin-app-layout-navbar-padding-inline-end: 0;
+  --aura-app-layout-border-width: 1px;
+  --vaadin-app-layout-navbar-padding-top: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
+  --vaadin-app-layout-navbar-padding-inline-start: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
+  --vaadin-app-layout-navbar-padding-inline-end: max(var(--aura-app-layout-inset), var(--vaadin-padding-s));
 }
 
 /* Aligned with App Layout overlay breakpoint */
 @media (width <= 800px), (height <= 600px) {
-  html {
+  :where(:root),
+  :where(:host) {
     --aura-app-layout-inset: 0px !important;
-    --_aura-mdl-border: 0px;
+    --aura-app-layout-border-width: 0px;
   }
 }
 
 vaadin-app-layout {
   --_app-layout-radius: clamp(0px, var(--aura-app-layout-radius), var(--aura-app-layout-inset) * 100);
-  padding-block: var(--aura-app-layout-inset);
+  padding-bottom: var(--aura-app-layout-inset);
   padding-inline-end: var(--aura-app-layout-inset);
-  padding-top: calc(var(--aura-app-layout-inset) + var(--_vaadin-app-layout-navbar-offset-size));
+  padding-top: max(var(--aura-app-layout-inset), var(--_vaadin-app-layout-navbar-offset-size));
 }
 
-vaadin-app-layout[overlay] {
-  &::part(navbar),
-  &::part(drawer) {
-    --vaadin-app-layout-navbar-background: var(--aura-surface);
-    --vaadin-app-layout-drawer-background: var(--aura-surface);
-    --aura-surface-opacity: var(--aura-overlay-surface-opacity);
-    -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
-    backdrop-filter: var(--aura-overlay-backdrop-filter);
-  }
+vaadin-app-layout[overlay]::part(drawer) {
+  --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);
 }
 
-vaadin-app-layout:is([overlay], :not([drawer-opened])) {
+vaadin-app-layout:is([overlay], :not([drawer-opened])),
+vaadin-app-layout:not(:has([slot='drawer'])) {
   padding-inline-start: var(--aura-app-layout-inset);
 }
 
 vaadin-app-layout::part(navbar) {
-  justify-content: space-between;
-}
-
-vaadin-app-layout:not([overlay])::part(navbar) {
   --vaadin-app-layout-navbar-background: transparent;
+  -webkit-backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
 }
 
 vaadin-app-layout:not([overlay])::part(drawer) {
@@ -52,34 +47,66 @@ vaadin-app-layout:not([overlay])::part(drawer) {
   padding-inline: max(0px, var(--aura-app-layout-inset) - var(--vaadin-padding-s));
 }
 
+vaadin-app-layout[has-navbar]::part(drawer) {
+  padding-top: var(--safe-area-inset-top);
+}
+
 vaadin-app-layout > vaadin-scroller[slot='drawer'] {
-  padding-inline: var(--vaadin-padding-m);
+  --vaadin-scroller-padding-inline: var(--vaadin-padding-m);
   scrollbar-width: thin;
 }
 
 vaadin-app-layout > vaadin-scroller:nth-child(1 of [slot='drawer']) {
-  padding-top: var(--vaadin-padding-s);
+  /* TODO would need a dedicated padding-top property */
+  --vaadin-scroller-padding-block: var(--vaadin-padding-s);
 }
 
 vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot='drawer']) {
-  padding-bottom: var(--vaadin-padding-s);
+  /* TODO would need a dedicated padding-bottom property */
+  --vaadin-scroller-padding-block: var(--vaadin-padding-s);
 }
 
 vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   color-scheme: var(--aura-content-color-scheme);
   color: var(--vaadin-text-color);
-  background: linear-gradient(var(--aura-surface), var(--aura-surface)), var(--aura-app-background);
+  background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)), var(--aura-app-background);
   background-clip: padding-box;
   background-origin: border-box;
   min-height: 100%;
   box-sizing: border-box;
   border-radius: var(--_app-layout-radius);
-  border: var(--_aura-mdl-border) solid var(--vaadin-border-color-secondary);
-  border-block-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
-  border-inline-end-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
+  border: var(--aura-app-layout-border-width) solid var(--vaadin-border-color-secondary);
+  border-block-width: min(var(--aura-app-layout-inset), var(--aura-app-layout-border-width));
+  border-inline-width: min(var(--aura-app-layout-inset), var(--aura-app-layout-border-width));
 }
 
 vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  margin-inline: calc(var(--safe-area-inset-left) * -1) calc(var(--safe-area-inset-right) * -1);
+  padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+  max-width: calc(100% + var(--safe-area-inset-left) + var(--safe-area-inset-right));
+  margin-block: calc(var(--safe-area-inset-top) * -1) calc(var(--safe-area-inset-bottom) * -1);
+  padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
+  height: calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));
+  max-height: calc(100% + var(--safe-area-inset-top) + var(--safe-area-inset-bottom));
+
+  &::part(detail) {
+    padding-top: var(--safe-area-inset-top);
+    padding-bottom: var(--safe-area-inset-bottom);
+  }
+
+  &:dir(ltr)::part(detail) {
+    padding-right: var(--safe-area-inset-right);
+  }
+
+  &:dir(rtl)::part(detail) {
+    padding-left: var(--safe-area-inset-left);
+  }
+
+  &[stack]::part(detail) {
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
+  }
+
   & > vaadin-master-detail-layout,
   &:not([drawer])::part(detail) {
     border-start-end-radius: var(--_app-layout-radius);
@@ -87,7 +114,7 @@ vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth
   }
 
   &::part(backdrop) {
-    border-radius: calc(var(--_app-layout-radius) - var(--_aura-mdl-border));
+    border-radius: calc(var(--_app-layout-radius) - var(--aura-app-layout-border-width));
   }
 
   &:is([drawer][has-detail]) {
@@ -95,17 +122,9 @@ vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth
   }
 }
 
-vaadin-app-layout[has-navbar][has-drawer] {
-  padding-top: var(--_vaadin-app-layout-navbar-offset-size);
-
-  &::part(drawer) {
-    padding-top: 0;
-  }
-}
-
-vaadin-app-layout[has-drawer]:not([overlay]):not([drawer-opened])
+vaadin-app-layout[has-drawer][drawer-opened]:not([overlay])
   > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
-  border-inline-start-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
+  border-inline-start-width: var(--aura-app-layout-border-width);
 }
 
 vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])
@@ -113,6 +132,6 @@ vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])
   border-start-start-radius: var(--aura-app-layout-radius);
 }
 
-vaadin-app-layout[has-navbar][has-drawer] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
-  border-top-width: var(--_aura-mdl-border);
+vaadin-app-layout[has-navbar] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  border-top-width: var(--aura-app-layout-border-width);
 }

package/src/components/avatar.css

@@ -1,16 +1,38 @@
 :where(:root),
 :where(:host) {
-  --vaadin-avatar-border-color: var(--vaadin-border-color-secondary);
-  --vaadin-avatar-background: var(--vaadin-background-container);
+  --vaadin-avatar-border-color: var(--aura-accent-border-color);
   --vaadin-avatar-font-weight: var(--aura-font-weight-medium);
   --vaadin-avatar-font-size: var(--aura-font-size-m);
 }
 
-vaadin-avatar:not([img]) {
+vaadin-avatar {
+  color: var(--vaadin-avatar-text-color, var(--aura-accent-text-color));
   --_shade: color-mix(in srgb, var(--vaadin-border-color) 20%, transparent);
-  background-image: linear-gradient(
-    light-dark(transparent, var(--_shade)),
-    transparent 50%,
-    light-dark(var(--_shade), transparent)
+  background: var(
+    --vaadin-avatar-background,
+    linear-gradient(light-dark(transparent, var(--_shade)), transparent 50%, light-dark(var(--_shade), transparent)),
+    var(--aura-accent-surface)
   );
+  background-clip: content-box;
+}
+
+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;
+}
+
+vaadin-avatar[img][has-color-index] {
+  --vaadin-avatar-border-color: var(--aura-accent-color);
+  --vaadin-avatar-border-width: 2px;
+}
+
+vaadin-avatar[theme~='filled'] {
+  background: var(--aura-accent-color) content-box;
+  color: var(--aura-accent-contrast-color);
 }

package/src/components/button.css

@@ -6,15 +6,8 @@
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
   transition: scale 180ms;
   position: relative;
-  --_accent: light-dark(
-    oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
-    oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
-  );
-  --_accent-border: light-dark(
-    oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast))),
-    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast)))
-  );
-  --_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
+  --_background: var(--aura-accent-surface) padding-box;
+  --vaadin-button-text-color: var(--aura-accent-text-color);
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='tertiary'])) {
@@ -26,12 +19,11 @@
 /* prettier-ignore */
 :is(vaadin-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(--_accent-border);
+  --vaadin-button-border-color: var(--aura-accent-border-color);
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='primary'])) {
   outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
-  --vaadin-button-text-color: var(--aura-accent-text);
 }
 
 /*
@@ -60,7 +52,7 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where([theme~='primary']) {
   outline-offset: 2px;
   --vaadin-button-font-weight: var(--aura-font-weight-semibold);
-  --vaadin-button-text-color: var(--aura-accent-contrast);
+  --vaadin-button-text-color: var(--aura-accent-contrast-color);
   --vaadin-button-background: var(--aura-accent-color);
   --vaadin-button-border-color: var(--vaadin-border-color-secondary);
   --vaadin-button-shadow: 0 2px 3px -1px hsla(0, 0%, 0%, 0.24);
@@ -130,16 +122,3 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
     border-inline-start-color: transparent;
   }
 }
-
-/* Color variants */
-
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):where(:not([theme~='accent'])) {
-  --aura-accent-light: var(--aura-text-light);
-  --aura-accent-dark: var(--aura-text-dark);
-}
-
-/* prettier-ignore */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit):is([theme~='danger'], [theme~='error']) {
-  --aura-accent-light: var(--aura-red);
-  --aura-accent-dark: var(--aura-red);
-}

package/src/components/card.css

@@ -4,11 +4,11 @@
   --vaadin-card-padding: var(--vaadin-padding-l);
   --vaadin-card-gap: var(--vaadin-gap-m) var(--vaadin-gap-l);
   --vaadin-card-border-color: var(--vaadin-border-color-secondary);
-  --vaadin-card-background: var(--aura-surface) padding-box;
+  --vaadin-card-background: var(--aura-surface-color) padding-box;
 }
 
 vaadin-card {
-  --vaadin-card-background: var(--aura-surface) padding-box;
+  --vaadin-card-background: var(--aura-surface-color) padding-box;
   --aura-surface-level: 2;
 }
 
@@ -32,8 +32,8 @@ vaadin-card[theme~='elevated'] {
   --aura-surface-opacity: 0.7;
   --aura-surface-level: 3;
   --_shadow-color: light-dark(
-    oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h / 0.1),
-    oklch(from var(--aura-background-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
+    oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.1),
+    oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
   );
   --vaadin-card-shadow: 0 1px 6px -1px var(--_shadow-color);
   background-clip: padding-box;

package/src/components/checkbox-radio.css

@@ -7,8 +7,8 @@
 
 vaadin-checkbox::part(checkbox),
 vaadin-radio-button::part(radio) {
-  --vaadin-checkbox-background: var(--aura-surface);
-  --vaadin-radio-button-background: var(--aura-surface);
+  --vaadin-checkbox-background: var(--aura-surface-color);
+  --vaadin-radio-button-background: var(--aura-surface-color);
   transition: background-color 100ms;
 }
 
@@ -32,13 +32,13 @@ vaadin-radio-button:not([checked])::part(radio) {
 
 vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
   --vaadin-checkbox-background: var(--aura-accent-color);
-  --vaadin-checkbox-marker-color: var(--aura-accent-contrast);
+  --vaadin-checkbox-marker-color: var(--aura-accent-contrast-color);
   --vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
 }
 
 vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
   --vaadin-radio-button-background: var(--aura-accent-color);
-  --vaadin-radio-button-marker-color: var(--aura-accent-contrast);
+  --vaadin-radio-button-marker-color: var(--aura-accent-contrast-color);
   --vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
 }
 

package/src/components/crud.css

@@ -1,6 +1,6 @@
 :where(:root),
 :where(:host) {
-  --vaadin-crud-background: var(--aura-surface) padding-box;
+  --vaadin-crud-background: var(--aura-surface-color) padding-box;
 }
 
 vaadin-crud-edit {
@@ -9,7 +9,7 @@ vaadin-crud-edit {
 }
 
 vaadin-crud::part(editor) {
-  background: var(--aura-surface);
+  background: var(--aura-surface-color);
 }
 
 vaadin-crud vaadin-confirm-dialog {

package/src/components/dashboard.css

@@ -4,7 +4,7 @@
   --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m);
   --vaadin-dashboard-header-gap: var(--vaadin-gap-xs);
   --vaadin-dashboard-widget-border-color: var(--vaadin-border-color-secondary);
-  --vaadin-dashboard-widget-background: var(--aura-surface) padding-box;
+  --vaadin-dashboard-widget-background: var(--aura-surface-color) padding-box;
   --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m);
 }
 
@@ -50,7 +50,7 @@ vaadin-dashboard-section {
   &::part(resize-grow-height-button),
   &::part(resize-shrink-width-button),
   &::part(resize-grow-width-button) {
-    background: var(--aura-surface) padding-box;
+    background: var(--aura-surface-color) padding-box;
     color: var(--vaadin-text-color-secondary);
     border: 1px solid var(--vaadin-border-color);
     transition: 120ms color;
@@ -78,8 +78,8 @@ vaadin-dashboard-section {
   &::part(move-apply-button),
   &::part(resize-apply-button) {
     background: var(--aura-accent-color);
-    color: var(--aura-accent-contrast);
-    box-shadow: 0 0 0 3px var(--aura-surface);
+    color: var(--aura-accent-contrast-color);
+    box-shadow: 0 0 0 3px var(--aura-surface-color);
     outline-offset: 2px;
   }
 

package/src/components/date-picker.css

@@ -4,7 +4,7 @@
   --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);
+  --vaadin-date-picker-date-selected-color: var(--aura-accent-contrast-color);
 }
 
 :where(:root),
@@ -16,13 +16,13 @@
 
 vaadin-date-picker-month-scroller,
 vaadin-date-picker-overlay-content::part(toolbar) {
-  background: var(--aura-surface);
+  background: var(--aura-surface-color);
 }
 
 vaadin-date-picker-year-scroller::before {
   width: 12px;
   height: 12px;
-  background: var(--aura-surface-solid) padding-box;
+  background: var(--aura-surface-color-solid) padding-box;
 }
 
 vaadin-date-picker-year::part(year-number) {
@@ -39,7 +39,7 @@ vaadin-date-picker-year[selected] {
 }
 
 vaadin-date-picker-year[selected]::part(year-number) {
-  color: var(--aura-accent-text);
+  color: var(--aura-accent-text-color);
 }
 
 vaadin-date-picker-year[selected]::after {

package/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);
+  --vaadin-dialog-background: var(--aura-surface-color);
   --aura-surface-level: 4;
 
   /* TODO probably should be in base styles */

package/src/components/grid.css

@@ -1,7 +1,8 @@
 :where(:root),
 :where(:host) {
   --vaadin-grid-row-selected-background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
-  --vaadin-grid-background: linear-gradient(var(--aura-surface), var(--aura-surface)) var(--aura-background) padding-box;
+  --vaadin-grid-background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color))
+    var(--aura-background-color) padding-box;
 }
 
 :is(vaadin-grid, vaadin-crud-grid)::part(empty-state) {

package/src/components/input-container.css

@@ -1,14 +1,14 @@
 :where(:root),
 :where(:host),
 :where([theme]) {
-  --vaadin-input-field-background: var(--aura-surface);
+  --vaadin-input-field-background: var(--aura-surface-color);
   --vaadin-input-field-error-color: var(--aura-red-text);
 }
 
 ::part(input-field),
 vaadin-message-input,
 vaadin-input-container {
-  --vaadin-input-field-background: var(--aura-surface);
+  --vaadin-input-field-background: var(--aura-surface-color);
   --aura-surface-level: 4;
   --aura-surface-opacity: 0.7;
   background-clip: padding-box;
@@ -29,6 +29,11 @@ vaadin-message-input:not([readonly], [disabled]) {
 
 ::part(field-button) {
   transition: color 100ms;
+  --vaadin-icon-visual-size: 90%;
+}
+
+::part(clear-button) {
+  --vaadin-icon-visual-size: 75%;
 }
 
 :not([readonly], [disabled])::part(field-button):active {

package/src/components/item-overlay.css

@@ -1,8 +1,9 @@
 :where(:root),
 :where(:host) {
   --vaadin-item-overlay-padding: var(--vaadin-gap-xs);
-  --vaadin-item-border-radius: calc(var(--vaadin-radius-m) - var(--vaadin-item-overlay-padding));
-  --vaadin-item-checkmark-color: var(--aura-accent-text);
+  --vaadin-item-border-radius: max(var(--vaadin-radius-s), var(--vaadin-radius-m) - var(--vaadin-item-overlay-padding));
+  --vaadin-item-checkmark-color: var(--aura-accent-text-color);
+  --vaadin-item-gap: var(--vaadin-gap-s);
 }
 
 :is(
@@ -16,62 +17,69 @@
   vaadin-select-item[role]
 ) {
   font-weight: var(--aura-font-weight-medium);
-  --vaadin-item-checkmark-color: var(--aura-accent-text);
+  --vaadin-item-checkmark-color: var(--aura-accent-text-color);
+  -webkit-user-select: none;
+  user-select: none;
+  --_highlight-color: light-dark(
+    oklch(from var(--aura-accent-color-light) min(0.9, l) c h / max(0.05, l / 4)),
+    oklch(from var(--aura-accent-color-dark) max(0.6, l) c h / max(0.2, l / 4))
+  );
+  gap: 0;
 
   &::part(checkmark) {
     --vaadin-icon-visual-size: 75%;
+    margin-inline-start: calc(var(--vaadin-gap-xs) * -1);
+  }
+
+  &[aria-haspopup='true']::after {
+    --vaadin-icon-visual-size: 90%;
+    margin-inline-end: calc(var(--vaadin-gap-xs) * -1);
   }
 
   &::part(content) {
     display: flex;
+    padding-inline: var(--vaadin-gap-xs);
+    gap: var(--vaadin-item-gap);
   }
 
   @media (any-hover: hover) {
     &:not([disabled], [aria-disabled='true']):hover {
-      background: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+      background: var(--_highlight-color);
 
       &[theme~='filled'] {
         background: var(--aura-accent-color);
-        color: var(--aura-accent-contrast);
-        --vaadin-text-color: var(--aura-accent-contrast);
-        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast) 70%, transparent);
-        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast) 50%, transparent);
-        --vaadin-item-checkmark-color: var(--aura-accent-contrast);
-
-        > * {
-          --aura-red: var(--aura-accent-contrast);
-          --aura-red-text: var(--aura-accent-contrast);
-          --aura-orange: var(--aura-accent-contrast);
-          --aura-orange-text: var(--aura-accent-contrast);
-          --aura-yellow: var(--aura-accent-contrast);
-          --aura-yellow-text: var(--aura-accent-contrast);
-          --aura-green: var(--aura-accent-contrast);
-          --aura-green-text: var(--aura-accent-contrast);
-          --aura-blue: var(--aura-accent-contrast);
-          --aura-blue-text: var(--aura-accent-contrast);
-          --aura-purple: var(--aura-accent-contrast);
-          --aura-purple-text: var(--aura-accent-contrast);
-        }
+        color: var(--aura-accent-contrast-color);
+        --vaadin-text-color: var(--aura-accent-contrast-color);
+        --vaadin-text-color-secondary: color-mix(in srgb, var(--aura-accent-contrast-color) 70%, transparent);
+        --vaadin-text-color-disabled: color-mix(in srgb, var(--aura-accent-contrast-color) 50%, transparent);
+        --vaadin-icon-color: var(--aura-accent-contrast-color);
+        --vaadin-item-checkmark-color: var(--aura-accent-contrast-color);
       }
     }
   }
 
+  &:active {
+    background: var(--_highlight-color);
+  }
+
   &[aria-expanded='true']:not(:hover) {
     background: var(--vaadin-background-container-strong);
   }
 
-  &[theme~='danger'] {
-    --aura-accent-light: var(--aura-red);
-    --aura-accent-dark: var(--aura-red);
+  &:where([theme~='danger']) {
     color: var(--aura-red-text);
+
+    > * {
+      --aura-accent-color-light: var(--aura-accent-color-light-initial);
+      --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
+      --aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial));
+    }
   }
 }
 
 /* TODO is there a better selector? */
 [role='menu'] [role='separator'] {
   margin-block: var(--vaadin-gap-xs);
-  margin-inline-start: calc(
-    var(--vaadin-icon-size, 1lh) + var(--vaadin-item-gap, var(--vaadin-gap-s)) + var(--vaadin-gap-xs) * 2
-  );
+  margin-inline: calc(var(--vaadin-gap-xs) + var(--vaadin-padding-inline-container));
   border-color: var(--vaadin-border-color);
 }

package/src/components/master-detail-layout.css

@@ -1,11 +1,11 @@
 vaadin-master-detail-layout::part(detail) {
   --aura-surface-level: 2;
-  background: var(--aura-surface) padding-box;
+  background: var(--aura-surface-color) padding-box;
 }
 
 vaadin-master-detail-layout[drawer]::part(detail) {
   --aura-surface-opacity: var(--aura-overlay-surface-opacity);
-  background: var(--aura-surface) padding-box;
+  background: var(--aura-surface-color) padding-box;
   -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
   backdrop-filter: var(--aura-overlay-backdrop-filter);
   box-shadow:

package/src/components/menu-bar.css

@@ -15,3 +15,7 @@ vaadin-menu-bar-button[slot='overflow'] {
   font-family: system-ui, sans-serif;
   font-weight: 600;
 }
+
+vaadin-menu-bar-button[aria-haspopup='true']::part(suffix)::after {
+  --vaadin-icon-visual-size: 90%;
+}

package/src/components/notification.css

@@ -10,7 +10,7 @@ vaadin-notification-container {
 
 vaadin-notification-card::part(overlay) {
   --aura-surface-level: 4;
-  --vaadin-notification-background: var(--aura-surface);
+  --vaadin-notification-background: var(--aura-surface-color);
 
   /* TODO probably should be in base styles */
   /* Keeps notifications on top of MDL view transitions */
@@ -39,5 +39,4 @@ vaadin-notification-card vaadin-card {
 
 vaadin-notification-card vaadin-button {
   --aura-surface-level: 8;
-  --aura-surface-opacity: 0.3;
 }

package/src/components/overlay.css

@@ -2,12 +2,12 @@
 :where(:host) {
   --vaadin-overlay-border-width: 0px;
   --vaadin-overlay-backdrop-background: light-dark(
-    oklch(from var(--aura-background-light) calc(l * 0.1) c h / 0.15),
+    oklch(from var(--aura-background-color-light) calc(l * 0.1) c h / 0.15),
     hsla(0deg, 0%, 0%, 0.3)
   );
   --aura-overlay-outline-color: light-dark(
-    oklch(from var(--aura-background-light) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast))),
-    oklch(from var(--aura-background-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast)))
+    oklch(from var(--aura-background-color-light) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast))),
+    oklch(from var(--aura-background-color-dark) 0.1 c h / max(0.04, 0.03 + 0.04 * var(--aura-contrast)))
   );
   --aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast)));
   --aura-overlay-shadow:
@@ -19,10 +19,11 @@
   @media (prefers-reduced-transparency: reduce) {
     --aura-overlay-surface-opacity: 1 !important;
   }
+  --vaadin-popover-border-radius: var(--vaadin-radius-l);
 }
 
 ::part(overlay) {
-  --vaadin-overlay-background: var(--aura-surface);
+  --vaadin-overlay-background: var(--aura-surface-color);
   --aura-surface-level: 4;
   --aura-surface-opacity: var(--aura-overlay-surface-opacity);
   box-shadow: var(--aura-overlay-shadow);

package/src/components/progress-bar.css

@@ -4,7 +4,7 @@
   --vaadin-progress-bar-value-background: linear-gradient(
     90deg,
     var(--aura-accent-color),
-    color-mix(in hsl, var(--aura-accent-color) 60%, hsl(45, 31%, 95%))
+    color-mix(in hsl, var(--aura-accent-color) 60%, hsl(45, 0%, 95%))
   );
 }
 

package/src/components/rich-text-editor.css

@@ -11,7 +11,7 @@
 
 vaadin-rich-text-editor {
   --vaadin-icon-visual-size: 90%;
-  --vaadin-rich-text-editor-background: var(--aura-surface) padding-box;
+  --vaadin-rich-text-editor-background: var(--aura-surface-color) padding-box;
   --aura-surface-level: 4;
   --aura-surface-opacity: 0.7 !important;
   box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);