Give the website the app's Material 3 look

The site's tokens now carry the app's --md-sys-* names, with shape, elevation, motion, state, type and spacing values copied from Livewire Material 2.1 and the colours from the indigo profile, including its high-contrast light and dark values for prefers-contrast: more. Cards are outlined, the gallery uses a connected button group instead of segmented buttons, buttons use M3 Expressive sizes, state layers and pressed shapes, and layouts follow the M3 window classes with logical properties. A Light/Dark/System toggle in the nav sets data-theme before the first paint, and no text is dimmed with opacity. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-16 22:58:24 +02:00
parent 1bcb868897
commit 7ffc1c1ead
5 changed files with 1185 additions and 658 deletions
@@ -4,6 +4,10 @@
 * Pro viewport). The screen keeps the capture's aspect ratio, so the frame holds its shape while an
 * image loads. The screenshots come from `composer screenshots` (tests/Screenshots/).
 *
+ * The bezels and the deck are hardware, drawn in fixed tints of their own; what shows through the
+ * screen before an image paints and the shadow under a device are colour roles from theme.css, which
+ * must be loaded first. Dark follows <html data-theme>, and the system setting without JavaScript.
+ *
 *   <div class="device device--laptop">
 *       <div class="device__screen"><picture>…<img …></picture></div>
 *   </div>
@@ -14,13 +18,21 @@
    --bezel-edge: #3a3355;
    --deck: #c9c2dd;
    --deck-shadow: #8f88a8;
+    --device-shadow: color-mix(in srgb, var(--md-sys-color-shadow) 40%, transparent);

    position: relative;
    width: 100%;
 }

+:root[data-theme="dark"] .device {
+    --bezel: #05020f;
+    --bezel-edge: #2a2244;
+    --deck: #4b426a;
+    --deck-shadow: #231649;
+}
+
@media (prefers-color-scheme: dark) {
-    .device {
+    :root:not([data-theme]) .device {
        --bezel: #05020f;
        --bezel-edge: #2a2244;
        --deck: #4b426a;
@@ -31,7 +43,7 @@
 .device__screen {
    position: relative;
    overflow: hidden;
-    background: var(--surface-container-high, #e8deff);
+    background-color: var(--md-sys-color-surface-container-high);
 }

 .device__screen img {
@@ -54,7 +66,7 @@
    padding: 2.4% 2.4% 3%;
    border-radius: 3.2% 3.2% 0 0 / 4.8% 4.8% 0 0;
    background: var(--bezel);
-    box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 24px 48px -24px rgb(16 6 45 / 0.45);
+    box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 24px 48px -24px var(--device-shadow);
 }

 .device--laptop .device__screen {
@@ -79,8 +91,7 @@
 .device--laptop::after {
    content: '';
    position: absolute;
-    left: -4%;
-    right: -4%;
+    inset-inline: -4%;
    bottom: 0;
    height: 3.2%;
    border-radius: 0 0 40% 40% / 0 0 100% 100%;
@@ -95,7 +106,7 @@
    z-index: 1;
    width: 14%;
    height: 1.4%;
-    border-radius: 0 0 12px 12px;
+    border-radius: 0 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md);
    background: var(--deck-shadow);
    translate: -50% 0;
 }
@@ -106,7 +117,7 @@
    padding: 3.4%;
    border-radius: 15% / 7%;
    background: var(--bezel);
-    box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px rgb(16 6 45 / 0.5);
+    box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px var(--device-shadow);
 }

 .device--phone .device__screen {