feat: aura login form & login overlay themes (#10265)

jouni · web-flow · commit 58ff794a09d7 · 2025-09-30T15:30:17.000+03:00
diff --git a/packages/aura/aura.css b/packages/aura/aura.css
@@ -16,6 +16,7 @@
 @import './src/components/dialog.css';
 @import './src/components/grid.css';
 @import './src/components/input-container.css';
+@import './src/components/login.css';
 @import './src/components/master-detail-layout.css';
 @import './src/components/message-input.css';
 @import './src/components/multi-select-combo-box.css';
diff --git a/packages/aura/src/components/login.css b/packages/aura/src/components/login.css
@@ -0,0 +1,42 @@
+:where(:root, :host) {
+  --vaadin-login-form-error-color: var(--aura-red-text);
+  --vaadin-login-form-padding: var(--vaadin-padding-xl);
+  --vaadin-login-overlay-brand-padding: var(--vaadin-padding-xl);
+  --vaadin-login-overlay-brand-background: transparent;
+  --vaadin-login-overlay-title-font-size: 1.5em;
+  --vaadin-login-overlay-title-line-height: 1.2;
+  --vaadin-login-overlay-title-font-weight: var(--aura-font-weight-semibold);
+  --vaadin-login-overlay-title-color: var(--vaadin-text-color);
+  --vaadin-login-overlay-description-color: var(--vaadin-text-color-secondary);
+}
+
+vaadin-login-form::part(error-message) {
+  border-radius: var(--vaadin-radius-m);
+  padding: var(--vaadin-padding-m);
+  background: color-mix(in srgb, var(--aura-red) 10%, transparent);
+}
+
+vaadin-login-form::part(error-message-title) {
+  font-weight: var(--aura-font-weight-semibold);
+}
+
+vaadin-login-overlay {
+  --vaadin-overlay-backdrop-background: var(--aura-app-background);
+
+  &::part(overlay) {
+    --aura-surface-level: 2;
+  }
+
+  &::part(brand) {
+    text-align: center;
+    padding-bottom: 0;
+  }
+
+  &::part(form-title) {
+    display: none;
+  }
+
+  [slot='title'] {
+    letter-spacing: -0.03em;
+  }
+}
diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css
@@ -21,7 +21,10 @@ vaadin-side-nav-item::part(content),
 vaadin-upload,
 vaadin-upload-file,
 ::part(input-field),
-::part(overlay) {
+::part(overlay),
+vaadin-confirm-dialog::part(overlay),
+vaadin-dialog::part(overlay),
+vaadin-login-overlay::part(overlay) {
   --aura-surface-opacity: 0.5;
 
   --aura-surface-solid: light-dark(
