noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give success, warning and info the 2025 spec and three contrast levels

Browse Source 
The three state colours are DynamicColors on their own tonal palette now, built
exactly as Google builds error/on-error/error-container/on-error-container in both
specs, so the scheme's contrast level, dark tones, spec version and platform reach
them as they reach every other role; --harmonize (and a profile's harmonize) pulls
each source towards the seed, off by default. material:scheme also writes M3's
medium (0.5) and high (1.0) levels for both themes and every profile, keyed on
data-contrast and never on a media query, and --contrast now moves the standard
block alone. Scheme::load() takes the level; the mail theme stays on standard.
Plan: docs/plans/material-3-alignment.md, steps 6 and 7 (core C1, C2, C15).

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:30:48 +02:00
co-authored by Claude Fable 5.1
parent b1fc0c9cfa
commit 4263982369
11 changed files with 3697 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/tokens/scheme.json
+305 -30
View File
@@ -2,7 +2,282 @@
"seed": "#6750a4",
"variant": "tonal-spot",
"spec": "2025",
"contrast": 0,
"harmonize": false,
"contrast": {
"standard": 0,
"medium": {
"light": {
"background": "#fdf7fe",
"on-background": "#25232b",
"surface": "#fdf7fe",
"surface-dim": "#ded8e4",
"surface-bright": "#fdf7fe",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f8f1fa",
"surface-container": "#f2ecf5",
"surface-container-high": "#ece6f0",
"surface-container-highest": "#e7e0ec",
"on-surface": "#25232b",
"on-surface-variant": "#45414b",
"outline": "#615d68",
"outline-variant": "#7d7983",
"inverse-surface": "#0f0d12",
"inverse-on-surface": "#c8c3c9",
"primary": "#483b6b",
"primary-dim": "#3c305f",
"on-primary": "#e1d3ff",
"primary-container": "#7b6da0",
"on-primary-container": "#ffffff",
"primary-fixed": "#7b6da0",
"primary-fixed-dim": "#6e6093",
"on-primary-fixed": "#ffffff",
"on-primary-fixed-variant": "#ffffff",
"inverse-primary": "#d4c3fd",
"secondary": "#464054",
"secondary-dim": "#3a3548",
"on-secondary": "#dfd5ef",
"secondary-container": "#787187",
"on-secondary-container": "#ffffff",
"secondary-fixed": "#787187",
"secondary-fixed-dim": "#6c657b",
"on-secondary-fixed": "#ffffff",
"on-secondary-fixed-variant": "#ffffff",
"tertiary": "#5c3653",
"tertiary-dim": "#502b47",
"on-tertiary": "#ffcaee",
"tertiary-container": "#936787",
"on-tertiary-container": "#ffffff",
"tertiary-fixed": "#936787",
"tertiary-fixed-dim": "#855b7a",
"on-tertiary-fixed": "#ffffff",
"on-tertiary-fixed-variant": "#ffffff",
"error": "#821830",
"error-dim": "#6b0221",
"on-error": "#ffcdd1",
"error-container": "#c44b5f",
"on-error-container": "#ffffff",
"success": "#004d30",
"on-success": "#7df0b3",
"success-container": "#008656",
"on-success-container": "#ffffff",
"warning": "#593e00",
"on-warning": "#ffd385",
"warning-container": "#986d00",
"on-warning-container": "#ffffff",
"info": "#003f8e",
"on-info": "#cbd9ff",
"info-container": "#006fef",
"on-info-container": "#ffffff",
"inverse-error": "#ff9da8",
"inverse-success": "#5ace94",
"inverse-warning": "#f3b31e",
"inverse-info": "#98b8ff"
},
"dark": {
"background": "#0f0d12",
"on-background": "#ffffff",
"surface": "#0f0d12",
"surface-dim": "#0f0d12",
"surface-bright": "#2e2b34",
"surface-container-lowest": "#000000",
"surface-container-low": "#141218",
"surface-container": "#1b181f",
"surface-container-high": "#211e26",
"surface-container-highest": "#27242d",
"on-surface": "#ffffff",
"on-surface-variant": "#bcb6c2",
"outline": "#96919c",
"outline-variant": "#78737e",
"inverse-surface": "#fdf7fe",
"inverse-on-surface": "#39373c",
"primary": "#cdc0ec",
"primary-dim": "#bfb2de",
"on-primary": "#3a3054",
"primary-container": "#7a6f96",
"on-primary-container": "#ffffff",
"primary-fixed": "#ded0fe",
"primary-fixed-dim": "#d0c3ef",
"on-primary-fixed": "#180e30",
"on-primary-fixed-variant": "#3c3256",
"inverse-primary": "#5a4f75",
"secondary": "#cbc2db",
"secondary-dim": "#beb5cd",
"on-secondary": "#393347",
"secondary-container": "#787187",
"on-secondary-container": "#ffffff",
"secondary-fixed": "#e8def8",
"secondary-fixed-dim": "#dad0ea",
"on-secondary-fixed": "#221d2f",
"on-secondary-fixed-variant": "#423c50",
"tertiary": "#ffcfef",
"tertiary-dim": "#f4bfe3",
"on-tertiary": "#5e3855",
"tertiary-container": "#f4bfe3",
"on-tertiary-container": "#542f4c",
"tertiary-fixed": "#f4bfe3",
"tertiary-fixed-dim": "#e5b2d5",
"on-tertiary-fixed": "#180015",
"on-tertiary-fixed-variant": "#4a2642",
"error": "#ff9da8",
"error-dim": "#ff8695",
"on-error": "#5f001c",
"error-container": "#c44b5f",
"on-error-container": "#ffffff",
"success": "#5ace94",
"on-success": "#00341e",
"success-container": "#008656",
"on-success-container": "#ffffff",
"warning": "#f3b31e",
"on-warning": "#412d00",
"warning-container": "#e4a604",
"on-warning-container": "#332200",
"info": "#98b8ff",
"on-info": "#002a62",
"info-container": "#006fef",
"on-info-container": "#ffffff",
"inverse-error": "#821830",
"inverse-success": "#004d30",
"inverse-warning": "#593e00",
"inverse-info": "#003f8e"
}
},
"high": {
"light": {
"background": "#fdf7fe",
"on-background": "#000000",
"surface": "#fdf7fe",
"surface-dim": "#ded8e4",
"surface-bright": "#fdf7fe",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#f8f1fa",
"surface-container": "#f2ecf5",
"surface-container-high": "#ece6f0",
"surface-container-highest": "#e7e0ec",
"on-surface": "#000000",
"on-surface-variant": "#25232b",
"outline": "#45414b",
"outline-variant": "#54505a",
"inverse-surface": "#0f0d12",
"inverse-on-surface": "#ffffff",
"primary": "#281b49",
"primary-dim": "#1e103f",
"on-primary": "#e1d3ff",
"primary-container": "#584a7b",
"on-primary-container": "#ffffff",
"primary-fixed": "#584a7b",
"primary-fixed-dim": "#4c3f6f",
"on-primary-fixed": "#ffffff",
"on-primary-fixed-variant": "#ffffff",
"inverse-primary": "#d4c3fd",
"secondary": "#262134",
"secondary-dim": "#1c1729",
"on-secondary": "#dfd6ef",
"secondary-container": "#554f64",
"on-secondary-container": "#ffffff",
"secondary-fixed": "#554f64",
"secondary-fixed-dim": "#494358",
"on-secondary-fixed": "#ffffff",
"on-secondary-fixed-variant": "#ffffff",
"tertiary": "#391733",
"tertiary-dim": "#2e0d28",
"on-tertiary": "#ffcbee",
"tertiary-container": "#6d4563",
"on-tertiary-container": "#ffffff",
"tertiary-fixed": "#6d4563",
"tertiary-fixed-dim": "#603a57",
"on-tertiary-fixed": "#ffffff",
"on-tertiary-fixed-variant": "#ffffff",
"error": "#500016",
"error-dim": "#3d000f",
"on-error": "#ffced2",
"error-container": "#97283e",
"on-error-container": "#ffffff",
"success": "#002a18",
"on-success": "#7df0b4",
"success-container": "#005f3c",
"on-success-container": "#ffffff",
"warning": "#312100",
"on-warning": "#ffd486",
"warning-container": "#6c4d00",
"on-warning-container": "#ffffff",
"info": "#002252",
"on-info": "#ccdaff",
"info-container": "#004eac",
"on-info-container": "#ffffff",
"inverse-error": "#ffdddf",
"inverse-success": "#89fcbf",
"inverse-warning": "#ffe2b1",
"inverse-info": "#dde5ff"
},
"dark": {
"background": "#0f0d12",
"on-background": "#ffffff",
"surface": "#0f0d12",
"surface-dim": "#0f0d12",
"surface-bright": "#2e2b34",
"surface-container-lowest": "#000000",
"surface-container-low": "#141218",
"surface-container": "#1b181f",
"surface-container-high": "#211e26",
"surface-container-highest": "#27242d",
"on-surface": "#ffffff",
"on-surface-variant": "#eae3ef",
"outline": "#bcb6c2",
"outline-variant": "#a7a1ad",
"inverse-surface": "#fdf7fe",
"inverse-on-surface": "#000000",
"primary": "#ebe1ff",
"primary-dim": "#ded0fe",
"on-primary": "#302649",
"primary-container": "#aa9dc8",
"on-primary-container": "#000000",
"primary-fixed": "#ded0fe",
"primary-fixed-dim": "#d0c3ef",
"on-primary-fixed": "#000000",
"on-primary-fixed-variant": "#180e30",
"inverse-primary": "#3c3256",
"secondary": "#ebe1fb",
"secondary-dim": "#ddd3ed",
"on-secondary": "#2e293c",
"secondary-container": "#a8a0b8",
"on-secondary-container": "#000000",
"secondary-fixed": "#e8def8",
"secondary-fixed-dim": "#dad0ea",
"on-secondary-fixed": "#000000",
"on-secondary-fixed-variant": "#221d2f",
"tertiary": "#ffdbf2",
"tertiary-dim": "#fac5e9",
"on-tertiary": "#43203b",
"tertiary-container": "#f4bfe3",
"on-tertiary-container": "#2e0e29",
"tertiary-fixed": "#f4bfe3",
"tertiary-fixed-dim": "#e5b2d5",
"on-tertiary-fixed": "#000000",
"on-tertiary-fixed-variant": "#180015",
"error": "#ffdddf",
"error-dim": "#ffc7cb",
"on-error": "#5f001c",
"error-container": "#ff798c",
"on-error-container": "#000000",
"success": "#89fcbf",
"on-success": "#00341e",
"success-container": "#42b880",
"on-success-container": "#000000",
"warning": "#ffe2b1",
"on-warning": "#3c2900",
"warning-container": "#e4a604",
"on-warning-container": "#000000",
"info": "#dde5ff",
"on-info": "#002a62",
"info-container": "#74a2ff",
"on-info-container": "#000000",
"inverse-error": "#500016",
"inverse-success": "#002a18",
"inverse-warning": "#312100",
"inverse-info": "#002252"
}
}
},
"light": {
"background": "#fdf7fe",
"on-background": "#34313a",
@@ -53,22 +328,22 @@
"on-error": "#fff7f7",
"error-container": "#f97386",
"on-error-container": "#6e0523",
"success": "#006c45",
"on-success": "#ffffff",
"success": "#006d46",
"on-success": "#e7ffed",
"success-container": "#86f9bc",
"on-success-container": "#002112",
"warning": "#7c5800",
"on-warning": "#ffffff",
"warning-container": "#ffdea6",
"on-warning-container": "#271900",
"info": "#005ac4",
"on-info": "#ffffff",
"info-container": "#d8e2ff",
"on-info-container": "#001a42",
"on-success-container": "#00734a",
"warning": "#7c5900",
"on-warning": "#fff8f1",
"warning-container": "#fab925",
"on-warning-container": "#6a4b00",
"info": "#005bc5",
"on-info": "#f9f8ff",
"info-container": "#1c7afc",
"on-info-container": "#001435",
"inverse-error": "#f97386",
"inverse-success": "#69dca1",
"inverse-warning": "#fdbb28",
"inverse-info": "#aec6ff"
"inverse-success": "#3bb27b",
"inverse-warning": "#f3b31e",
"inverse-info": "#699cff"
},
"dark": {
"background": "#0f0d12",
@@ -120,21 +395,21 @@
"on-error": "#490013",
"error-container": "#871c34",
"on-error-container": "#ff97a3",
"success": "#69dca1",
"on-success": "#003822",
"success-container": "#005233",
"on-success-container": "#86f9bc",
"warning": "#fdbb28",
"on-warning": "#412d00",
"warning-container": "#5e4200",
"on-warning-container": "#ffdea6",
"info": "#aec6ff",
"on-info": "#002e6a",
"info-container": "#004396",
"on-info-container": "#d8e2ff",
"success": "#3bb27b",
"on-success": "#002615",
"success-container": "#059460",
"on-success-container": "#001e10",
"warning": "#f3b31e",
"on-warning": "#4e3600",
"warning-container": "#e4a604",
"on-warning-container": "#593f00",
"info": "#699cff",
"on-info": "#001e4b",
"info-container": "#0c74f6",
"on-info-container": "#000a23",
"inverse-error": "#a8364b",
"inverse-success": "#006c45",
"inverse-warning": "#7c5800",
"inverse-info": "#005ac4"
"inverse-success": "#006d46",
"inverse-warning": "#7c5900",
"inverse-info": "#005bc5"
}
}