Merge branch 'worktree-agent-a9537eabbf38e0608'

# Conflicts: # resources/views/components/scheme-picker.blade.php # resources/views/components/theme-script.blade.php # resources/views/showcase/sections/colour.blade.php # tests/Feature/Components/ThemeScriptTest.php
2026-09-14 05:43:37 +02:00
parent 216a15307a 4ba28b8579
commit 18023166bb
23 changed files with 4086 additions and 408 deletions
@@ -8,6 +8,11 @@
 * `value` is an accessor, so binding a control with `x-model="$store.theme.value"` goes
 * through the same write as `set()` and `toggle()`: the attributes, then localStorage.
 *
+ * M3's contrast level is the same pair: `contrast` is the choice (standard, medium, high or
+ * system) and `resolvedContrast` the level on screen, which is `standard` wherever <html>
+ * carries no data-contrast — the stylesheet's plain blocks are that level. `setContrast()`
+ * writes both, through the same attribute the head script wrote before the first paint.
+ *
 * `scheme` is the colour profile on screen (<html data-scheme>, which the server chose), and
 * `previewScheme(name)` shows another one on this page without storing anything — the
 * application saves a choice itself, and the next full load draws what it saved.
@@ -15,13 +20,18 @@
 document.addEventListener('alpine:init', () => {
    const root = document.documentElement
    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const contrastMedia = window.matchMedia('(prefers-contrast: more)')
    const choices = ['light', 'dark', 'system']
+    const levels = ['standard', 'medium', 'high', 'system']

    const resolve = (choice) => (choice === 'system' ? (media.matches ? 'dark' : 'light') : choice)
+    const resolveContrast = (choice) => (choice === 'system' ? (contrastMedia.matches ? 'high' : 'standard') : choice)

    window.Alpine.store('theme', {
        choice: choices.includes(root.dataset.themeChoice) ? root.dataset.themeChoice : 'system',
        resolved: root.dataset.theme === 'dark' ? 'dark' : 'light',
+        contrast: levels.includes(root.dataset.contrastChoice) ? root.dataset.contrastChoice : 'system',
+        resolvedContrast: root.dataset.contrast === 'medium' || root.dataset.contrast === 'high' ? root.dataset.contrast : 'standard',
        scheme: root.dataset.scheme || null,

        get value() {
@@ -54,6 +64,29 @@ document.addEventListener('alpine:init', () => {
            this.set(this.resolved === 'dark' ? 'light' : 'dark')
        },

+        setContrast(choice) {
+            if (!levels.includes(choice)) {
+                return
+            }
+
+            this.contrast = choice
+            this.resolvedContrast = resolveContrast(choice)
+
+            root.dataset.contrastChoice = choice
+
+            if (this.resolvedContrast === 'standard') {
+                delete root.dataset.contrast
+            } else {
+                root.dataset.contrast = this.resolvedContrast
+            }
+
+            try {
+                localStorage.setItem(root.dataset.contrastKey || 'material-contrast', choice)
+            } catch {
+                // Blocked storage: the page still switches, it just will not remember.
+            }
+        },
+
        previewScheme(name) {
            if (typeof name !== 'string' || !/^[a-z0-9-]+$/.test(name)) {
                return
@@ -73,4 +106,12 @@ document.addEventListener('alpine:init', () => {
            theme.resolved = resolve('system')
        }
    })
+
+    contrastMedia.addEventListener('change', () => {
+        const theme = window.Alpine.store('theme')
+
+        if (theme.contrast === 'system') {
+            theme.resolvedContrast = resolveContrast('system')
+        }
+    })
 })