@vaadin/aura 25.0.0-alpha19 → 25.0.0-alpha21

package/src/components/side-nav.css

@@ -0,0 +1,65 @@
+:where(:root, :host) {
+  --vaadin-side-nav-label-line-height: var(--aura-line-height-xs);
+  --vaadin-side-nav-label-font-weight: var(--aura-font-weight-medium);
+  --vaadin-side-nav-item-font-weight: var(--aura-font-weight-medium);
+  --vaadin-side-nav-item-border-width: 1px;
+  --vaadin-side-nav-items-gap: var(--vaadin-gap-xs);
+}
+
+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;
+}
+
+vaadin-side-nav-item:not([disabled])::part(content):hover {
+  --vaadin-side-nav-item-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-color: var(--aura-accent-text);
+  --vaadin-side-nav-item-border-color: var(--_accent-border);
+}
+
+/* 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-color: var(--aura-accent-contrast);
+  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-color);
+  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-color);
+  --aura-accent-color: var(--vaadin-side-nav-item-color);
+  --aura-accent-text: var(--vaadin-side-nav-item-color);
+  --aura-red: var(--vaadin-side-nav-item-color);
+  --aura-red-text: var(--vaadin-side-nav-item-color);
+  --aura-orange: var(--vaadin-side-nav-item-color);
+  --aura-orange-text: var(--vaadin-side-nav-item-color);
+  --aura-yellow: var(--vaadin-side-nav-item-color);
+  --aura-yellow-text: var(--vaadin-side-nav-item-color);
+  --aura-green: var(--vaadin-side-nav-item-color);
+  --aura-green-text: var(--vaadin-side-nav-item-color);
+  --aura-blue: var(--vaadin-side-nav-item-color);
+  --aura-blue-text: var(--vaadin-side-nav-item-color);
+  --aura-purple: var(--vaadin-side-nav-item-color);
+  --aura-purple-text: var(--vaadin-side-nav-item-color);
+}

package/src/components/upload.css

@@ -0,0 +1,153 @@
+:where(:root, :host) {
+  --vaadin-upload-background: var(--aura-surface) 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);
+  --vaadin-upload-file-list-divider-width: 1px;
+  --vaadin-upload-file-error-color: var(--vaadin-text-color-secondary);
+  --vaadin-upload-file-warning-color: var(--aura-red);
+  --vaadin-upload-file-done-color: var(--aura-green);
+  --vaadin-upload-file-name-font-weight: var(--aura-font-weight-medium);
+  --vaadin-upload-file-padding: var(--vaadin-padding-s);
+  --vaadin-upload-file-gap: 0 var(--vaadin-gap-s);
+  --vaadin-upload-file-button-padding: var(--vaadin-upload-file-padding);
+  --vaadin-upload-file-button-border-width: 0;
+  --vaadin-upload-file-status-font-size: var(--aura-font-size-s);
+  --vaadin-upload-file-status-line-height: var(--aura-line-height-s);
+  --vaadin-upload-file-error-font-size: var(--aura-font-size-s);
+  --vaadin-upload-file-error-line-height: var(--aura-line-height-s);
+  --vaadin-upload-drop-label-color: var(--vaadin-text-color-secondary);
+  --vaadin-upload-drop-label-font-weight: var(--aura-font-weight-medium);
+}
+
+vaadin-upload {
+  --_divider-offset-start: calc(var(--vaadin-padding-s) + var(--vaadin-icon-size, 1lh) + var(--vaadin-gap-s));
+  --_divider-offset-end: var(--vaadin-padding-s);
+}
+
+vaadin-upload::part(primary-buttons) {
+  flex-wrap: wrap;
+  gap: var(--vaadin-gap-s) var(--vaadin-gap-m);
+}
+
+vaadin-upload:not([nodrop]) vaadin-button[slot='add-button'] {
+  flex: 1;
+}
+
+vaadin-upload::part(drop-label) {
+  flex: 100;
+  padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
+  min-width: fit-content;
+  margin-inline-start: calc(var(--vaadin-upload-padding) * -1);
+}
+
+vaadin-upload[dragover-valid] {
+  outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+  outline-offset: -1px;
+}
+
+vaadin-upload-file-list li {
+  margin-inline: var(--_divider-offset-start) var(--_divider-offset-end);
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+vaadin-upload:not([theme~='no-border']) vaadin-upload-file-list:has(li) {
+  border-top: 1px solid var(--vaadin-border-color-secondary);
+  margin: calc(var(--vaadin-upload-padding) * -1);
+  margin-top: var(--vaadin-upload-padding);
+}
+
+vaadin-upload-file {
+  --vaadin-icon-visual-size: 0.75lh;
+  border-radius: var(--vaadin-radius-m);
+  padding-block: var(--vaadin-padding-m);
+  margin-inline: calc(var(--_divider-offset-start, 0) * -1) calc(var(--_divider-offset-end, 0) * -1);
+
+  &::part(done-icon),
+  &::part(warning-icon),
+  &::part(commands) {
+    align-self: baseline;
+  }
+
+  &:not([complete], [error])::part(done-icon) {
+    display: block;
+  }
+
+  &:not([complete], [error])::part(done-icon)::before {
+    background: var(--vaadin-border-color-secondary);
+  }
+
+  &::part(commands) {
+    margin-block: calc(var(--vaadin-upload-file-button-padding) * -1);
+    margin-inline-end: calc(var(--vaadin-upload-file-button-padding) * -1);
+  }
+
+  &::part(remove-button),
+  &::part(retry-button) {
+    --vaadin-upload-file-button-text-color: var(--vaadin-text-color-secondary);
+    outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
+  }
+
+  vaadin-progress-bar {
+    display: block;
+    height: var(--vaadin-gap-xs);
+    margin-top: var(--vaadin-gap-xs);
+  }
+
+  &:not([error])::part(status) {
+    max-height: 2lh;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  &[complete]::part(status) {
+    height: 1lh; /* ensure some height to transition from */
+    visibility: hidden;
+    transition: 200ms max-height;
+    max-height: 0;
+  }
+
+  &[complete] vaadin-progress-bar {
+    visibility: hidden;
+    transition: 200ms height;
+    height: 0;
+    margin-top: 0;
+  }
+}
+
+vaadin-upload[theme~='no-border'] {
+  --vaadin-upload-padding: 0;
+  --vaadin-upload-background: transparent;
+  --vaadin-upload-border: none;
+  --vaadin-upload-file-list-divider-width: 0;
+  --_divider-offset-start: 0px;
+  --_divider-offset-end: 0px;
+  outline-offset: 2px;
+
+  vaadin-upload-file-list::part(list) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vaadin-gap-s);
+  }
+
+  vaadin-upload-file-list li:first-child {
+    margin-top: var(--vaadin-gap-s);
+  }
+
+  vaadin-upload-file {
+    background: var(--aura-surface) padding-box;
+    border: 1px solid var(--vaadin-border-color-secondary);
+  }
+}
+
+@media (any-hover: hover) {
+  vaadin-upload-file::part(remove-button):hover,
+  vaadin-upload-file::part(retry-button):hover {
+    --vaadin-upload-file-button-text-color: var(--vaadin-text-color);
+  }
+}

package/src/palette.css

@@ -1,45 +1,35 @@
-:where(html) {
-  --aura-red: light-dark(
-    oklch(from var(--aura-accent-light) 0.55 c calc(clamp(380 - rem(h, 6), h + 20, 420 - rem(h, 6)) + 20)),
-    oklch(from var(--aura-accent-dark) 0.7 c calc(clamp(380 - rem(h, 6), h + 20, 420 - rem(h, 6)) + 20))
-  );
-  --aura-orange: light-dark(
-    oklch(from var(--aura-accent-light) 0.8 min(c + 0.1, 0.4) clamp(80 - rem(h, 6), h, 90 + rem(h, 6))),
-    oklch(from var(--aura-accent-dark) 0.75 min(c + 0.1, 0.4) clamp(80 - rem(h, 6), h, 90 + rem(h, 6)))
-  );
-  --aura-yellow: light-dark(
-    oklch(from var(--aura-accent-light) 0.9 min(c + 0.1, 0.4) clamp(100 - rem(h, 6), h, 105 - rem(h, 6))),
-    oklch(from var(--aura-accent-dark) 0.85 min(c + 0.1, 0.4) clamp(100 - rem(h, 6), h, 105 - rem(h, 6)))
-  );
-  --aura-green: light-dark(
-    oklch(from var(--aura-accent-light) 0.5 min(c + 0.05, 0.4) clamp(130 - rem(h, 6), h, 160 - rem(h, 6))),
-    oklch(from var(--aura-accent-dark) 0.7 min(c + 0.05, 0.4) clamp(130 - rem(h, 6), h, 160 - rem(h, 6)))
-  );
-  --aura-blue: light-dark(
-    oklch(from var(--aura-accent-light) 0.55 min(c + 0.05, 0.4) clamp(220 - rem(h, 6), h, 260 - rem(h, 6))),
-    oklch(from var(--aura-accent-dark) 0.7 min(c + 0.05, 0.4) clamp(220 - rem(h, 6), h, 260 - rem(h, 6)))
-  );
-  --aura-purple: light-dark(
-    oklch(from var(--aura-accent-light) 0.55 min(c + 0.05, 0.4) clamp(280 - rem(h, 6), h, 350 - rem(h, 6))),
-    oklch(from var(--aura-accent-dark) 0.7 min(c + 0.05, 0.4) clamp(280 - rem(h, 6), h, 350 - rem(h, 6)))
-  );
+:where(:root, :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-text: color-mix(in srgb, var(--aura-red) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
+  --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(60% - 15% * var(--aura-contrast)),
-    var(--vaadin-color)
+    var(--aura-orange) calc(70% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
   );
   --aura-yellow-text: color-mix(
     in srgb,
-    var(--aura-yellow) calc(55% - 15% * var(--aura-contrast)),
-    var(--vaadin-color)
+    var(--aura-yellow) calc(65% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
+  );
+  --aura-green-text: color-mix(
+    in srgb,
+    var(--aura-green) calc(70% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
+  );
+  --aura-blue-text: color-mix(
+    in srgb,
+    var(--aura-blue) calc(70% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
   );
-  --aura-green-text: color-mix(in srgb, var(--aura-green) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
-  --aura-blue-text: color-mix(in srgb, var(--aura-blue) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-color));
   --aura-purple-text: color-mix(
     in srgb,
     var(--aura-purple) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-color)
+    var(--vaadin-text-color)
   );
 }

package/src/shadow.css

@@ -1,4 +1,4 @@
-:where(html) {
+:where(:root, :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)

package/src/size.css

@@ -1,13 +1,14 @@
-:where(html) {
+:where(:root, :host) {
   --aura-base-size: 16;
   --_size-ref: 16;
   --aura-base-radius: 3;
   --vaadin-radius-s: min(0.25lh, round(var(--aura-base-radius) * 1px + 2px, 1px));
   --vaadin-radius-m: round(var(--aura-base-radius) * 2px + 3px, 1px);
   --vaadin-radius-l: round(var(--aura-base-radius) * 1.5px + 10px, 1px);
+  --vaadin-icon-stroke-width: 1.75;
 }
 
-:where(html, [theme]) {
+:where(:root, :host, [theme]) {
   --vaadin-padding-xs: round(
     var(--aura-base-size) * 0.25 * pow(var(--aura-base-size) / var(--_size-ref), 0.5) * 1px,
     1px
@@ -38,7 +39,7 @@
 }
 
 @media (pointer: coarse) {
-  :where(html) {
+  :where(:root, :host) {
     --aura-base-size: 19;
   }
 }

package/src/surface.css

@@ -1,14 +1,32 @@
-:where(html) {
+:where(:root, :host) {
   --aura-surface-level: 1;
 }
 
 /* List all elements that are surfaces */
-html,
-[theme~='surface'],
-[theme~='surface-solid'],
+:is(:root, :host),
+.aura-surface,
+.aura-surface-solid,
+vaadin-accordion-panel[theme~='filled'],
 vaadin-app-layout::part(navbar),
 vaadin-app-layout::part(drawer),
-::part(overlay) {
+vaadin-button,
+vaadin-card,
+vaadin-checkbox::part(checkbox),
+vaadin-details[theme~='filled'],
+vaadin-master-detail-layout::part(detail),
+vaadin-menu-bar-button,
+vaadin-message-input,
+vaadin-radio-button::part(radio),
+vaadin-rich-text-editor,
+vaadin-side-nav-item::part(content),
+vaadin-upload,
+vaadin-upload-file,
+::part(input-field),
+::part(overlay),
+vaadin-confirm-dialog::part(overlay),
+vaadin-dialog::part(overlay),
+vaadin-login-overlay::part(overlay),
+vaadin-crud-dialog::part(overlay) {
   --aura-surface-opacity: 0.5;
 
   --aura-surface-solid: light-dark(
@@ -17,7 +35,7 @@ vaadin-app-layout::part(drawer),
         min(
           1,
           l + (0.98 - l) * 4 + var(--aura-surface-level) * (0.07 - 0.01 * var(--aura-contrast)) -
-            var(--aura-surface-opacity) / 15
+            var(--aura-surface-opacity) / 20
         )
         clamp(0, c - l / 10 * var(--aura-surface-level) + var(--aura-surface-opacity) / 40, c) h
     ),
@@ -35,11 +53,11 @@ vaadin-app-layout::part(drawer),
   --vaadin-background-color: var(--aura-surface-solid);
 }
 
-[theme~='surface'] {
+.aura-surface {
   background: var(--aura-surface) padding-box;
 }
 
-[theme~='surface-solid'] {
+.aura-surface-solid {
   --aura-surface-opacity: 1;
   background: var(--aura-surface-solid) padding-box;
 }

package/src/typography.css

@@ -1,6 +1,6 @@
 @import './fonts/InstrumentSans/InstrumentSans.css';
 
-:where(html) {
+:where(:root, :host) {
   --aura-font-family-system: system-ui, ui-sans-serif, sans-serif;
   --aura-font-family-instrument-sans: 'Instrument Sans', var(--aura-font-family-system);
 
@@ -16,7 +16,7 @@
 }
 
 @media (pointer: fine) {
-  :where(html) {
+  :where(:root, :host) {
     --aura-base-font-size: 14;
   }
 }
@@ -29,17 +29,16 @@
 
 @supports (-webkit-touch-callout: none) {
   @media (pointer: coarse) {
-    :where(html) {
+    :where(:root, :host) {
       /* iOS/iPadOS optimizations */
 
       /* Support iOS dynamic text size */
       font: -apple-system-body;
-      --aura-base-font-size: 14;
     }
   }
 }
 
-:where(html, [theme]) {
+:where(:root, :host, [theme]) {
   --aura-font-size-xs: round(var(--aura-font-size-s) / var(--aura-font-size-scale), 0.0625rem);
   --aura-font-size-s: round(var(--aura-font-size-m) / var(--aura-font-size-scale), 0.0625rem);
   --aura-font-size-m: round(var(--aura-base-font-size) / 16 * 1rem, 0.0625rem);
@@ -69,7 +68,7 @@
   text-size-adjust: none;
 }
 
-:where(body, :host, [theme]) {
+:where(body, :host, [theme]:not(html)) {
   font-size: var(--aura-font-size-m);
   line-height: var(--aura-line-height-m);
 }