@vaadin/aura 25.0.0-beta4 → 25.0.0-beta5

package/src/components/side-nav.css

@@ -7,50 +7,57 @@
   --vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
 }
 
+/* Restore accent color for child elements like badges */
+:where(vaadin-side-nav-item) > * {
+  --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));
+}
+
 vaadin-side-nav + vaadin-side-nav {
   margin-top: var(--vaadin-gap-l);
 }
 
 vaadin-side-nav-item::part(content) {
-  transition:
-    color 120ms,
-    border-color 120ms,
-    background-color 120ms;
-  --aura-surface-level: 3;
+  --aura-surface-level: 4;
+  --aura-surface-opacity: 0.6;
+}
+
+vaadin-side-nav-item:not([disabled], [current])::part(content):active {
+  --vaadin-side-nav-item-background: var(--vaadin-background-container);
 }
 
-vaadin-side-nav-item:not([disabled])::part(content):hover {
-  --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
+@media (any-hover: hover) {
+  vaadin-side-nav-item:not([disabled], [current])::part(content):hover {
+    transition: color 120ms;
+    --vaadin-side-nav-item-text-color: var(--vaadin-text-color);
+  }
 }
 
 vaadin-side-nav-item[current]::part(content) {
-  --_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.05 + c / 2) + 0.1 * var(--aura-contrast))),
-    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
-  );
-  --vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
-  --vaadin-side-nav-item-text-color: var(--aura-accent-text);
-  --vaadin-side-nav-item-border-color: var(--_accent-border);
+  transition: none;
+  --_accent-border: color-mix(in srgb, var(--aura-accent-color) 10%, var(--vaadin-border-color-secondary) 50%);
+  --vaadin-side-nav-item-background: var(--aura-accent-surface) padding-box;
+  --vaadin-side-nav-item-text-color: var(--aura-accent-text-color);
+  --vaadin-side-nav-item-border-color: var(--aura-accent-border-color);
 }
 
 /* Filled variant */
 
 vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
   --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
-  --vaadin-side-nav-item-text-color: var(--aura-accent-contrast);
+  --vaadin-side-nav-item-text-color: var(--aura-accent-contrast-color);
+  --vaadin-text-color: var(--vaadin-side-nav-item-text-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);
   outline-offset: 2px;
 }
 
 /* Badges and other content that uses the palette inside a filled nav item */
 vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']) {
-  --vaadin-text-color: var(--vaadin-side-nav-item-text-color);
-  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-text-color);
   --aura-accent-color: var(--vaadin-side-nav-item-text-color);
-  --aura-accent-text: var(--vaadin-side-nav-item-text-color);
+  --aura-accent-text-color: var(--vaadin-side-nav-item-text-color);
   --aura-red: var(--vaadin-side-nav-item-text-color);
   --aura-red-text: var(--vaadin-side-nav-item-text-color);
   --aura-orange: var(--vaadin-side-nav-item-text-color);

package/src/components/tabs.css

@@ -1,19 +1,17 @@
 :where(:root),
 :where(:host) {
+  --vaadin-tab-border-radius: var(--vaadin-radius-m);
   --vaadin-tab-font-weight: var(--aura-font-weight-medium);
   --vaadin-tabs-gap: 2px;
+  --vaadin-tabs-border-radius: calc(var(--vaadin-tab-border-radius) + 3px);
+  --vaadin-tabs-padding: 3px;
 }
 
 vaadin-tabs {
-  background: var(--vaadin-background-container);
-  border-radius: calc(var(--vaadin-radius-m) + 3px);
-  padding: 3px;
   contain: paint;
-}
-
-vaadin-tabs:not([theme~='accent']) {
-  --aura-accent-light: var(--aura-text-light);
-  --aura-accent-dark: var(--aura-text-dark);
+  --aura-surface-level: -1.5;
+  --aura-surface-opacity: 0.3;
+  background: var(--vaadin-tabs-background, var(--aura-surface-color) padding-box);
 }
 
 vaadin-tabs::part(tabs) {
@@ -50,7 +48,7 @@ vaadin-tabs[overflow~='end'] {
 
 vaadin-tabs::part(back-button),
 vaadin-tabs::part(forward-button) {
-  background: var(--aura-surface-solid) padding-box;
+  background: var(--aura-surface-color-solid) padding-box;
   border: 1px solid var(--vaadin-border-color);
   border-radius: var(--vaadin-radius-m);
   padding: var(--vaadin-padding-xs);
@@ -73,9 +71,7 @@ vaadin-tab {
     color 120ms,
     border-color 120ms,
     background-color 120ms;
-  --aura-surface-level: 8;
-  --aura-surface-opacity: 0.7;
-  border: 1px solid transparent;
+  border: var(--vaadin-tab-border-width, 1px) solid var(--vaadin-tab-border-color, transparent);
 }
 
 vaadin-tab:not([disabled], [selected]):hover {
@@ -83,34 +79,37 @@ vaadin-tab:not([disabled], [selected]):hover {
 }
 
 vaadin-tab[selected] {
-  --_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.05 + c / 2) + 0.1 * var(--aura-contrast))),
-    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
-  );
-  --vaadin-tab-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
-  --vaadin-tab-text-color: var(--aura-accent-text);
-  border-color: var(--_accent-border);
+  --aura-surface-level: 6;
+  --aura-surface-opacity: 0.7;
+  --vaadin-tab-background: var(--aura-accent-surface) padding-box;
+  --vaadin-tab-text-color: var(--aura-accent-text-color);
+  --vaadin-tab-border-color: var(--aura-accent-border-color);
   box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
 }
 
+/* Restore accent color for child elements like badges */
+:where(vaadin-tab) > * {
+  --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));
+}
+
 /* Filled variant */
 
 vaadin-tabs[theme~='filled'] vaadin-tab[selected] {
   --vaadin-tab-background: var(--aura-accent-color) border-box;
-  --vaadin-tab-text-color: var(--aura-accent-contrast);
+  --vaadin-tab-text-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);
   outline-offset: 1px;
 }
 
 /* Badges and other content that uses the palette inside a filled nav item */
 vaadin-tabs[theme~='filled'] vaadin-tab[selected] > :not([slot='tooltip']) {
-  --vaadin-text-color: var(--vaadin-tab-text-color);
-  --vaadin-text-color-secondary: var(--vaadin-tab-text-color);
   --aura-accent-color: var(--vaadin-tab-text-color);
-  --aura-accent-text: var(--vaadin-tab-text-color);
+  --aura-accent-text-color: var(--vaadin-tab-text-color);
   --aura-red: var(--vaadin-tab-text-color);
   --aura-red-text: var(--vaadin-tab-text-color);
   --aura-orange: var(--vaadin-tab-text-color);

package/src/components/upload.css

@@ -1,6 +1,6 @@
 :where(:root),
 :where(:host) {
-  --vaadin-upload-background: var(--aura-surface) padding-box;
+  --vaadin-upload-background: var(--aura-surface-color) padding-box;
   --vaadin-upload-border: 1px solid var(--vaadin-border-color-secondary);
   --vaadin-upload-padding: var(--vaadin-padding-s);
   --vaadin-upload-file-list-divider-color: var(--vaadin-border-color-secondary);
@@ -141,7 +141,7 @@ vaadin-upload[theme~='no-border'] {
   }
 
   vaadin-upload-file {
-    background: var(--aura-surface) padding-box;
+    background: var(--aura-surface-color) padding-box;
     border: 1px solid var(--vaadin-border-color-secondary);
   }
 }

package/src/palette.css

@@ -1,36 +1,34 @@
 :where(:root),
 :where(:host) {
-  --aura-red: oklch(0.6 0.22 25);
-  --aura-orange: oklch(0.61 0.4 93);
-  --aura-yellow: oklch(0.9 0.36 105);
-  --aura-green: oklch(0.6 0.28 160);
-  --aura-blue: oklch(0.6 0.3 240);
-  --aura-purple: oklch(0.6 0.3 280);
+  --aura-red: oklch(0.59 0.2 25);
+  --aura-orange: oklch(0.61 0.4 90);
+  --aura-yellow: oklch(0.9 0.45 105);
+  --aura-green: oklch(0.6 0.2 150);
+  --aura-blue: oklch(0.61 0.2 260);
+  --aura-purple: oklch(0.58 0.22 290);
 
-  --aura-red-text: color-mix(in srgb, var(--aura-red) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
-  --aura-orange-text: color-mix(
-    in srgb,
-    var(--aura-orange) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-red-text: light-dark(
+    oklch(from var(--aura-red) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-red) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-yellow-text: color-mix(
-    in srgb,
-    var(--aura-yellow) calc(65% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-orange-text: light-dark(
+    oklch(from var(--aura-orange) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-orange) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-green-text: color-mix(
-    in srgb,
-    var(--aura-green) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-yellow-text: light-dark(
+    oklch(from var(--aura-yellow) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-yellow) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-blue-text: color-mix(
-    in srgb,
-    var(--aura-blue) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-green-text: light-dark(
+    oklch(from var(--aura-green) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-green) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-purple-text: color-mix(
-    in srgb,
-    var(--aura-purple) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-blue-text: light-dark(
+    oklch(from var(--aura-blue) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-blue) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
+  );
+  --aura-purple-text: light-dark(
+    oklch(from var(--aura-purple) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-purple) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
 }

package/src/shadow.css

@@ -1,8 +1,8 @@
 :where(:root),
 :where(:host) {
   --aura-shadow-color: light-dark(
-    oklch(from var(--aura-background-light) calc(l - l * 0.8) calc(c / 10) h / 0.2),
-    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.2),
+    oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
   );
   --aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color);
 }

package/src/size.css

@@ -31,14 +31,18 @@
     1px
   );
 
-  --vaadin-padding-container: round(var(--vaadin-padding-s) / 1.4, 1px)
-    max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
+  --vaadin-padding-block-container: round(var(--vaadin-padding-s) / 1.4, 1px);
+  --vaadin-padding-inline-container: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
 
   --vaadin-gap-xs: var(--vaadin-padding-xs);
   --vaadin-gap-s: var(--vaadin-padding-s);
   --vaadin-gap-m: var(--vaadin-padding-m);
   --vaadin-gap-l: var(--vaadin-padding-l);
   --vaadin-gap-xl: var(--vaadin-padding-xl);
+
+  --vaadin-field-baseline-input-height: calc(
+    1lh + round(var(--vaadin-padding-s) / 1.4, 1px) * 2 + var(--vaadin-input-field-border-width, 1px) * 2
+  );
 }
 
 @media (pointer: coarse) {

package/src/surface.css

@@ -23,6 +23,7 @@ vaadin-radio-button::part(radio),
 vaadin-rich-text-editor,
 vaadin-side-nav-item::part(content),
 vaadin-tab,
+vaadin-tabs,
 vaadin-upload,
 vaadin-upload-file,
 ::part(input-field),
@@ -33,28 +34,35 @@ vaadin-login-overlay::part(overlay),
 vaadin-crud-dialog::part(overlay) {
   --aura-surface-opacity: 0.5;
 
-  --aura-surface-solid: light-dark(
+  --aura-surface-color-solid: light-dark(
     oklch(
-      from var(--aura-background-light)
-        min(1, l + (0.98 - l) * 4 + var(--aura-surface-level) * 0.06 - var(--aura-surface-opacity) / 20)
+      from var(--aura-background-color-light)
+        min(1, l + ((1 - l) / 4 + 0.06 - var(--aura-surface-opacity) / 20) * var(--aura-surface-level))
         clamp(0, c - l / 10 * var(--aura-surface-level) + var(--aura-surface-opacity) / 40, c) h
     ),
     oklch(
-      from var(--aura-background-dark)
-        calc(max(l + 0.03, 0.25) + var(--aura-surface-level) * 0.022 - var(--aura-surface-opacity) / 40)
+      from var(--aura-background-color-dark)
+        calc(
+          max(0.03, l) + 0.03 * var(--aura-surface-level) + max(0, 0.2 - max(0.03, l)) *
+            (1.1 - 0.06 * var(--aura-surface-level))
+        )
         clamp(0, c * (1 + l), 0.2) h
     )
   );
 
-  --aura-surface: color-mix(in oklab, var(--aura-surface-solid) calc(100% * var(--aura-surface-opacity)), transparent);
-  --vaadin-background-color: var(--aura-surface-solid);
+  --aura-surface-color: color-mix(
+    in oklab,
+    var(--aura-surface-color-solid) calc(100% * var(--aura-surface-opacity)),
+    transparent
+  );
+  --vaadin-background-color: var(--aura-surface-color-solid);
 }
 
 .aura-surface {
-  background: var(--aura-surface) padding-box;
+  background: var(--aura-surface-color) padding-box;
 }
 
 .aura-surface-solid {
   --aura-surface-opacity: 1;
-  background: var(--aura-surface-solid) padding-box;
+  background: var(--aura-surface-color-solid) padding-box;
 }