feat: Aura surface and app layout styles (#10146)

jouni · web-flow · commit c188e4124974 · 2025-09-12T15:16:45.000+03:00
diff --git a/dev/aura.html b/dev/aura.html
@@ -9,13 +9,35 @@
   <link rel="stylesheet" href="../packages/aura/aura.css" />
   <script type="module">
     import '@vaadin/app-layout';
+    import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
+    import '@vaadin/vertical-layout';
   </script>
 </head>
 <body>
 
   <vaadin-app-layout>
-    <main>
-      <h1>Aura</h1>
+    <div slot="navbar">
+      <vaadin-drawer-toggle></vaadin-drawer-toggle>
+    </div>
+    <div slot="drawer">
+      Navigation
+    </div>
+    <main theme="surface">
+      <vaadin-vertical-layout theme="padding spacing">
+        <h1>Aura</h1>
+        <div theme="surface" style="padding: 2em; --aura-surface-level: 1;">
+          Level 1
+        </div>
+        <div theme="surface" style="padding: 2em; --aura-surface-level: 2;">
+          Level 2
+        </div>
+        <div theme="surface" style="padding: 2em; --aura-surface-level: 3;">
+          Level 3
+        </div>
+        <div theme="surface" style="padding: 2em; --aura-surface-level: 4;">
+          Level 4
+        </div>
+      </vaadin-vertical-layout>
     </main>
   </vaadin-app-layout>
 
diff --git a/packages/aura/aura.css b/packages/aura/aura.css
@@ -1,9 +1,14 @@
 @import './src/color.css';
 @import './src/color-scheme.css';
 @import './src/palette.css';
+@import './src/shadow.css';
 @import './src/size.css';
+@import './src/surface.css';
 @import './src/typography.css';
 
+@import './src/components/app-layout.css';
+@import './src/components/overlay.css';
+
 :where(html) {
   cursor: default;
 }
diff --git a/packages/aura/src/components/app-layout.css b/packages/aura/src/components/app-layout.css
@@ -0,0 +1,133 @@
+:where(html) {
+  --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;
+}
+
+/* Aligned with App Layout overlay breakpoint */
+@media (width <= 800px), (height <= 600px) {
+  html {
+    --aura-app-layout-inset: 0px !important;
+    --_aura-mdl-border: 0px;
+  }
+}
+
+html:has(vaadin-app-layout) {
+  &,
+  body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    box-sizing: border-box;
+  }
+}
+
+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-inline-end: var(--aura-app-layout-inset);
+  padding-top: calc(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:is([overlay], :not([drawer-opened])) {
+  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;
+}
+
+vaadin-app-layout:not([overlay])::part(drawer) {
+  padding-block: var(--aura-app-layout-inset);
+  padding-inline: max(0px, var(--aura-app-layout-inset) - var(--vaadin-padding-s));
+}
+
+vaadin-app-layout > vaadin-scroller[slot='drawer'] {
+  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);
+}
+
+vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot='drawer']) {
+  padding-bottom: 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-color);
+  background: linear-gradient(var(--aura-surface), var(--aura-surface)), 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-subtle);
+  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));
+}
+
+vaadin-app-layout > vaadin-master-detail-layout {
+  & > vaadin-master-detail-layout,
+  &:not([drawer])::part(detail) {
+    border-start-end-radius: var(--_app-layout-radius);
+    border-end-end-radius: var(--_app-layout-radius);
+  }
+
+  &::part(backdrop) {
+    border-radius: calc(var(--_app-layout-radius) - var(--_aura-mdl-border));
+  }
+
+  &:is([drawer][has-detail]) {
+    border-color: var(--vaadin-border-color);
+  }
+}
+
+vaadin-app-layout:has([slot='navbar']):has([slot='drawer']) {
+  padding-top: var(--_vaadin-app-layout-navbar-offset-size);
+
+  &::part(drawer) {
+    padding-top: 0;
+  }
+}
+
+vaadin-app-layout:has([slot='navbar']):has([slot='drawer']):not([overlay]):not([drawer-opened])
+  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  border-inline-start-width: min(var(--aura-app-layout-inset), 1px);
+}
+
+vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])[drawer-opened]:not([overlay])
+  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  border-start-start-radius: var(--aura-app-layout-radius);
+}
+
+vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])
+  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+  border-top-width: 1px;
+}
+
+vaadin-app-layout:has([slot='navbar']) > :is(:not([slot]), [slot='drawer']) vaadin-drawer-toggle,
+vaadin-app-layout:not([slot='navbar']) > [slot='drawer'] vaadin-drawer-toggle {
+  display: none;
+}
diff --git a/packages/aura/src/components/overlay.css b/packages/aura/src/components/overlay.css
@@ -0,0 +1,35 @@
+:where(html) {
+  --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),
+    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)))
+  );
+  --aura-overlay-inner-outline-color: hsla(0deg, 0%, 100%, max(3%, 2% + 4% * var(--aura-contrast)));
+  --aura-overlay-shadow:
+    inset 0 0 0 1px var(--aura-overlay-inner-outline-color), 0 0 0 1px var(--aura-overlay-outline-color),
+    var(--aura-shadow-m);
+  --aura-overlay-backdrop-filter: blur(12px) brightness(1.2) saturate(1.2);
+  --aura-overlay-surface-opacity: 0.85;
+
+  @media (prefers-reduced-transparency: reduce) {
+    --aura-overlay-surface-opacity: 1 !important;
+  }
+}
+
+::part(overlay) {
+  --vaadin-overlay-background: var(--aura-surface);
+  --aura-surface-level: 4;
+  --aura-surface-opacity: var(--aura-overlay-surface-opacity);
+  box-shadow: var(--aura-overlay-shadow);
+  -webkit-backdrop-filter: var(--aura-overlay-backdrop-filter);
+  backdrop-filter: var(--aura-overlay-backdrop-filter);
+  font-family: var(--aura-font-family);
+  font-size: var(--aura-font-size-m);
+  font-weight: var(--aura-font-weight);
+  line-height: var(--aura-line-height-m);
+  color: var(--vaadin-color);
+}
diff --git a/packages/aura/src/shadow.css b/packages/aura/src/shadow.css
@@ -0,0 +1,7 @@
+:where(html) {
+  --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)
+  );
+  --aura-shadow-m: 0 8px 16px -3px var(--aura-shadow-color);
+}
diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css
@@ -0,0 +1,45 @@
+:where(html) {
+  --aura-surface-level: 1;
+}
+
+/* List all elements that are surfaces */
+html,
+[theme~='surface'],
+[theme~='surface-solid'],
+vaadin-app-layout::part(navbar),
+vaadin-app-layout::part(drawer),
+::part(overlay) {
+  --aura-surface-opacity: 0.5;
+
+  --aura-surface-solid: light-dark(
+    oklch(
+      from var(--aura-background-light)
+        min(
+          1,
+          l + (0.98 - l) * 4 + var(--aura-surface-level) * (0.07 - 0.01 * var(--aura-contrast)) -
+            var(--aura-surface-opacity) / 15
+        )
+        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.03 - 0.008 * var(--aura-contrast)) -
+            var(--aura-surface-opacity) / 40
+        )
+        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);
+}
+
+[theme~='surface'] {
+  background: var(--aura-surface) padding-box;
+}
+
+[theme~='surface-solid'] {
+  --aura-surface-opacity: 1;
+  background: var(--aura-surface-solid) padding-box;
+}
