Andreas Reinhold / reiniandClaude Opus 5
b48e879254
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
Colour, shape, type, elevation and motion as tokens and Tailwind utilities; `php artisan material:scheme`, which generates an app's colour roles with Google's material-color-utilities (spec 2025); the theme head script with light, dark and system and its Alpine store; Google Sans Flex; every Material Symbol (4,135, outlined and filled) drawn by <x-icon> without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as <x-shape>; the x-figure directive; the Toasts concern; DesignGuard for applications' tests; and a showcase with every token, both themes side by side and an icon search. Colour utilities are `@theme inline`, so a section with its own data-theme repaints; without it they resolve once on :root. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
151 lines
6.2 KiB
CSS
151 lines
6.2 KiB
CSS
/*
|
|
* Material 3 colour roles, generated by Google's material-color-utilities (spec 2025).
|
|
*
|
|
* php artisan material:scheme "#6750a4" --variant=tonal-spot
|
|
*
|
|
* Regenerate rather than editing a value: every pair here (a role and its on-role) carries
|
|
* M3's contrast guarantee only as generated. The head script sets data-theme before the
|
|
* first paint; the light block also stands without it.
|
|
*/
|
|
|
|
:root,
|
|
[data-theme='light'] {
|
|
color-scheme: light;
|
|
|
|
--md-sys-color-background: #fdf7fe;
|
|
--md-sys-color-on-background: #34313a;
|
|
--md-sys-color-surface: #fdf7fe;
|
|
--md-sys-color-surface-dim: #ded8e4;
|
|
--md-sys-color-surface-bright: #fdf7fe;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #f8f1fa;
|
|
--md-sys-color-surface-container: #f2ecf5;
|
|
--md-sys-color-surface-container-high: #ece6f0;
|
|
--md-sys-color-surface-container-highest: #e7e0ec;
|
|
--md-sys-color-on-surface: #34313a;
|
|
--md-sys-color-on-surface-variant: #615d68;
|
|
--md-sys-color-outline: #7d7983;
|
|
--md-sys-color-outline-variant: #b5b0bb;
|
|
--md-sys-color-inverse-surface: #0f0d12;
|
|
--md-sys-color-inverse-on-surface: #a09ba1;
|
|
--md-sys-color-primary: #655789;
|
|
--md-sys-color-primary-dim: #594b7c;
|
|
--md-sys-color-on-primary: #fdf7ff;
|
|
--md-sys-color-primary-container: #d4c3fd;
|
|
--md-sys-color-on-primary-container: #493c6c;
|
|
--md-sys-color-primary-fixed: #d4c3fd;
|
|
--md-sys-color-primary-fixed-dim: #c6b6ee;
|
|
--md-sys-color-on-primary-fixed: #352857;
|
|
--md-sys-color-on-primary-fixed-variant: #524576;
|
|
--md-sys-color-inverse-primary: #d4c3fd;
|
|
--md-sys-color-secondary: #625c71;
|
|
--md-sys-color-secondary-dim: #565065;
|
|
--md-sys-color-on-secondary: #fdf7ff;
|
|
--md-sys-color-secondary-container: #e8def8;
|
|
--md-sys-color-on-secondary-container: #554f63;
|
|
--md-sys-color-secondary-fixed: #e8def8;
|
|
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
|
--md-sys-color-on-secondary-fixed: #423c50;
|
|
--md-sys-color-on-secondary-fixed-variant: #5f586e;
|
|
--md-sys-color-tertiary: #7b5270;
|
|
--md-sys-color-tertiary-dim: #6e4664;
|
|
--md-sys-color-on-tertiary: #fff7f9;
|
|
--md-sys-color-tertiary-container: #f4bfe3;
|
|
--md-sys-color-on-tertiary-container: #5f3956;
|
|
--md-sys-color-tertiary-fixed: #f4bfe3;
|
|
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
|
--md-sys-color-on-tertiary-fixed: #4a2642;
|
|
--md-sys-color-on-tertiary-fixed-variant: #694260;
|
|
--md-sys-color-error: #a8364b;
|
|
--md-sys-color-error-dim: #6b0221;
|
|
--md-sys-color-on-error: #fff7f7;
|
|
--md-sys-color-error-container: #f97386;
|
|
--md-sys-color-on-error-container: #6e0523;
|
|
--md-sys-color-success: #006c45;
|
|
--md-sys-color-on-success: #ffffff;
|
|
--md-sys-color-success-container: #86f9bc;
|
|
--md-sys-color-on-success-container: #002112;
|
|
--md-sys-color-warning: #7c5800;
|
|
--md-sys-color-on-warning: #ffffff;
|
|
--md-sys-color-warning-container: #ffdea6;
|
|
--md-sys-color-on-warning-container: #271900;
|
|
--md-sys-color-info: #005ac4;
|
|
--md-sys-color-on-info: #ffffff;
|
|
--md-sys-color-info-container: #d8e2ff;
|
|
--md-sys-color-on-info-container: #001a42;
|
|
--md-sys-color-inverse-error: #f97386;
|
|
--md-sys-color-inverse-success: #69dca1;
|
|
--md-sys-color-inverse-warning: #fdbb28;
|
|
--md-sys-color-inverse-info: #aec6ff;
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
color-scheme: dark;
|
|
|
|
--md-sys-color-background: #0f0d12;
|
|
--md-sys-color-on-background: #eae3ef;
|
|
--md-sys-color-surface: #0f0d12;
|
|
--md-sys-color-surface-dim: #0f0d12;
|
|
--md-sys-color-surface-bright: #2e2b34;
|
|
--md-sys-color-surface-container-lowest: #000000;
|
|
--md-sys-color-surface-container-low: #141218;
|
|
--md-sys-color-surface-container: #1b181f;
|
|
--md-sys-color-surface-container-high: #211e26;
|
|
--md-sys-color-surface-container-highest: #27242d;
|
|
--md-sys-color-on-surface: #eae3ef;
|
|
--md-sys-color-on-surface-variant: #aea9b4;
|
|
--md-sys-color-outline: #78737e;
|
|
--md-sys-color-outline-variant: #4a4650;
|
|
--md-sys-color-inverse-surface: #fdf7fe;
|
|
--md-sys-color-inverse-on-surface: #575459;
|
|
--md-sys-color-primary: #cdc0ec;
|
|
--md-sys-color-primary-dim: #bfb2de;
|
|
--md-sys-color-on-primary: #443a5f;
|
|
--md-sys-color-primary-container: #574d72;
|
|
--md-sys-color-on-primary-container: #e9deff;
|
|
--md-sys-color-primary-fixed: #ded0fe;
|
|
--md-sys-color-primary-fixed-dim: #d0c3ef;
|
|
--md-sys-color-on-primary-fixed: #3c3256;
|
|
--md-sys-color-on-primary-fixed-variant: #594e74;
|
|
--md-sys-color-inverse-primary: #645980;
|
|
--md-sys-color-secondary: #cbc2db;
|
|
--md-sys-color-secondary-dim: #beb5cd;
|
|
--md-sys-color-on-secondary: #433d51;
|
|
--md-sys-color-secondary-container: #3e384c;
|
|
--md-sys-color-on-secondary-container: #c4bbd4;
|
|
--md-sys-color-secondary-fixed: #e8def8;
|
|
--md-sys-color-secondary-fixed-dim: #dad0ea;
|
|
--md-sys-color-on-secondary-fixed: #423c50;
|
|
--md-sys-color-on-secondary-fixed-variant: #5f586e;
|
|
--md-sys-color-tertiary: #ffcfef;
|
|
--md-sys-color-tertiary-dim: #f4bfe3;
|
|
--md-sys-color-on-tertiary: #69415f;
|
|
--md-sys-color-tertiary-container: #f4bfe3;
|
|
--md-sys-color-on-tertiary-container: #5f3956;
|
|
--md-sys-color-tertiary-fixed: #f4bfe3;
|
|
--md-sys-color-tertiary-fixed-dim: #e5b2d5;
|
|
--md-sys-color-on-tertiary-fixed: #4a2642;
|
|
--md-sys-color-on-tertiary-fixed-variant: #694260;
|
|
--md-sys-color-error: #f97386;
|
|
--md-sys-color-error-dim: #c44b5f;
|
|
--md-sys-color-on-error: #490013;
|
|
--md-sys-color-error-container: #871c34;
|
|
--md-sys-color-on-error-container: #ff97a3;
|
|
--md-sys-color-success: #69dca1;
|
|
--md-sys-color-on-success: #003822;
|
|
--md-sys-color-success-container: #005233;
|
|
--md-sys-color-on-success-container: #86f9bc;
|
|
--md-sys-color-warning: #fdbb28;
|
|
--md-sys-color-on-warning: #412d00;
|
|
--md-sys-color-warning-container: #5e4200;
|
|
--md-sys-color-on-warning-container: #ffdea6;
|
|
--md-sys-color-info: #aec6ff;
|
|
--md-sys-color-on-info: #002e6a;
|
|
--md-sys-color-info-container: #004396;
|
|
--md-sys-color-on-info-container: #d8e2ff;
|
|
--md-sys-color-inverse-error: #a8364b;
|
|
--md-sys-color-inverse-success: #006c45;
|
|
--md-sys-color-inverse-warning: #7c5800;
|
|
--md-sys-color-inverse-info: #005ac4;
|
|
}
|