fix: aura rendering performance improvements (#10248)

jouni · web-flow · commit dfd6ad01e2d6 · 2025-09-29T10:40:52.000+03:00
diff --git a/dev/aura.html b/dev/aura.html
@@ -239,6 +239,11 @@
         --icon-rotate-ccw: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>');
       }
 
+      html, body, vaadin-app-layout {
+        margin: 0;
+        height: 100%;
+      }
+
       /* TODO re-evaluate MDL API, how to achieve this */
       .dashboard-section::part(master) {
         flex-basis: 15em;
diff --git a/packages/aura/src/color.css b/packages/aura/src/color.css
@@ -36,8 +36,10 @@
     color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 5% * var(--aura-contrast)), transparent)
   );
 
-  --aura-background-light: oklch(from var(--aura-accent-light) min(1, l + (1 - l) * 0.9) calc(c * 0.05) h);
-  --aura-background-dark: oklch(from var(--aura-accent-dark) max(0, l/2 - (1 - l) * 0.2) calc(c * 0.05) h);
+  /* Using static values (vs relative colors) for these backgrounds improves first paint rendering performance quite much (~200ms) */
+  --aura-background-light: oklch(95% 0.005 260);
+  --aura-background-dark: oklch(20% 0.01 260);
+
   --aura-background: light-dark(var(--aura-background-light), var(--aura-background-dark));
 
   --_bg-alt: oklch(
@@ -46,13 +48,14 @@
   --_bg-accent: radial-gradient(
     circle at 0% 0%,
     light-dark(
-      oklch(from var(--aura-background-light) min(1, l + c * 3) min(c, c * 3 - l/20) h),
+      oklch(from var(--aura-background-light) min(1, l + c * 3) min(c, c * 3) h),
       oklch(from var(--aura-background-dark) min(1, l + c) clamp(0, c * 1.5, 0.4) h)
     ),
     transparent 30%
   );
   --aura-app-background:
-    var(--_bg-accent), radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt));
+    var(--_bg-accent),
+    radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt)) var(--aura-background);
 
   --aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
   --vaadin-focus-ring-color: var(--aura-accent-color);
diff --git a/packages/aura/src/components/app-layout.css b/packages/aura/src/components/app-layout.css
@@ -16,16 +16,6 @@
   }
 }
 
-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);
