feat: Aura color scheme (#10143)

jouni · web-flow · commit 9720a00ea092 · 2025-09-12T14:09:44.000+03:00
diff --git a/dev/aura.html b/dev/aura.html
@@ -7,15 +7,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Aura</title>
   <link rel="stylesheet" href="../packages/aura/aura.css" />
+  <script type="module">
+    import '@vaadin/app-layout';
+  </script>
 </head>
 <body>
 
-  <h1>Aura</h1>
-  <h2>Aura</h2>
-  <h3>Aura</h3>
-  <h4>Aura</h4>
-  <h5>Aura</h5>
-  <h6>Aura</h6>
+  <vaadin-app-layout>
+    <main>
+      <h1>Aura</h1>
+    </main>
+  </vaadin-app-layout>
 
 </body>
 </html>
diff --git a/packages/aura/aura.css b/packages/aura/aura.css
@@ -1,4 +1,5 @@
 @import './src/color.css';
+@import './src/color-scheme.css';
 @import './src/palette.css';
 @import './src/size.css';
 @import './src/typography.css';
diff --git a/packages/aura/src/color-scheme.css b/packages/aura/src/color-scheme.css
@@ -0,0 +1,9 @@
+:where(html) {
+  --aura-color-scheme: light;
+  --aura-content-color-scheme: var(--aura-color-scheme);
+  --aura-notification-color-scheme: var(--aura-color-scheme);
+}
+
+html {
+  color-scheme: var(--aura-color-scheme);
+}
