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

Add colour profiles

Browse Source 
An application lists named schemes in livewire-material.profiles, and
material:scheme without a seed generates them all into one stylesheet:
the default profile as the plain blocks, every profile under
<html data-scheme>, with descendant selectors so a nested data-theme
panel keeps the page's profile. The JSON keeps the 1.0 top level.

Scheme::resolveProfileUsing() lets the application name the active
profile; it is asked on every use and falls back to the default for an
unknown name or a resolver that throws. The head script writes it before
the first paint and keeps it through wire:navigate, and the mail theme
and the error pages' fallback draw it. <x-scheme-picker> chooses one and
previews it through $store.theme.previewScheme(); the showcase previews
the Workbench's profiles.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 14:35:49 +02:00
co-authored by Claude Opus 5
parent 7798352cfc
commit fb42f004b1
22 changed files with 2006 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workbench/resources/css/material-scheme.css
+586
View File
@@ -0,0 +1,586 @@
/*
* Material 3 colour profiles, generated by Google's material-color-utilities (spec 2025).
*
* php artisan material:scheme
*
* From livewire-material.profiles. "baseline" is the default, and also stands without a
* data-scheme attribute:
*
* baseline #6750a4, tonal-spot
* teal #00897b, vibrant
* rose #c2185b, vibrant
*
* 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 and data-scheme
* before the first paint.
*/
: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;
}
[data-scheme='baseline'],
[data-scheme='baseline'][data-theme='light'],
[data-scheme='baseline'] [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-scheme='baseline'][data-theme='dark'],
[data-scheme='baseline'] [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;
}
[data-scheme='teal'],
[data-scheme='teal'][data-theme='light'],
[data-scheme='teal'] [data-theme='light'] {
color-scheme: light;
--md-sys-color-background: #d3fffd;
--md-sys-color-on-background: #003534;
--md-sys-color-surface: #d3fffd;
--md-sys-color-surface-dim: #87e4e1;
--md-sys-color-surface-bright: #d3fffd;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #bafdfa;
--md-sys-color-surface-container: #adf5f2;
--md-sys-color-surface-container-high: #a2f0ed;
--md-sys-color-surface-container-highest: #96ece8;
--md-sys-color-on-surface: #003534;
--md-sys-color-on-surface-variant: #296463;
--md-sys-color-outline: #46807e;
--md-sys-color-outline-variant: #7db7b5;
--md-sys-color-inverse-surface: #001111;
--md-sys-color-inverse-on-surface: #6da7a5;
--md-sys-color-primary: #00675c;
--md-sys-color-primary-dim: #005a50;
--md-sys-color-on-primary: #c0fff3;
--md-sys-color-primary-container: #00f7df;
--md-sys-color-on-primary-container: #00594f;
--md-sys-color-primary-fixed: #00f7df;
--md-sys-color-primary-fixed-dim: #00e8d1;
--md-sys-color-on-primary-fixed: #00443c;
--md-sys-color-on-primary-fixed-variant: #006359;
--md-sys-color-inverse-primary: #00fee5;
--md-sys-color-secondary: #006765;
--md-sys-color-secondary-dim: #005958;
--md-sys-color-on-secondary: #bcfffc;
--md-sys-color-secondary-container: #38fbf7;
--md-sys-color-on-secondary-container: #005c5a;
--md-sys-color-secondary-fixed: #38fbf7;
--md-sys-color-secondary-fixed-dim: #10ece8;
--md-sys-color-on-secondary-fixed: #004746;
--md-sys-color-on-secondary-fixed-variant: #006765;
--md-sys-color-tertiary: #006386;
--md-sys-color-tertiary-dim: #005675;
--md-sys-color-on-tertiary: #e7f5ff;
--md-sys-color-tertiary-container: #20c0ff;
--md-sys-color-on-tertiary-container: #00374d;
--md-sys-color-tertiary-fixed: #20c0ff;
--md-sys-color-tertiary-fixed-dim: #00b2ee;
--md-sys-color-on-tertiary-fixed: #001e2b;
--md-sys-color-on-tertiary-fixed-variant: #004059;
--md-sys-color-error: #b31b25;
--md-sys-color-error-dim: #9f0519;
--md-sys-color-on-error: #ffefee;
--md-sys-color-error-container: #fb5151;
--md-sys-color-on-error-container: #570008;
--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: #ff716c;
--md-sys-color-inverse-success: #69dca1;
--md-sys-color-inverse-warning: #fdbb28;
--md-sys-color-inverse-info: #aec6ff;
}
[data-scheme='teal'][data-theme='dark'],
[data-scheme='teal'] [data-theme='dark'] {
color-scheme: dark;
--md-sys-color-background: #001111;
--md-sys-color-on-background: #b8f3f1;
--md-sys-color-surface: #001111;
--md-sys-color-surface-dim: #001111;
--md-sys-color-surface-bright: #003231;
--md-sys-color-surface-container-lowest: #000000;
--md-sys-color-surface-container-low: #001716;
--md-sys-color-surface-container: #001e1d;
--md-sys-color-surface-container-high: #002424;
--md-sys-color-surface-container-highest: #002b2a;
--md-sys-color-on-surface: #b8f3f1;
--md-sys-color-on-surface-variant: #7bb5b3;
--md-sys-color-outline: #457f7d;
--md-sys-color-outline-variant: #0e504f;
--md-sys-color-inverse-surface: #e3fffd;
--md-sys-color-inverse-on-surface: #215e5c;
--md-sys-color-primary: #b4fff1;
--md-sys-color-primary-dim: #00fee5;
--md-sys-color-on-primary: #00665b;
--md-sys-color-primary-container: #00fee5;
--md-sys-color-on-primary-container: #005c53;
--md-sys-color-primary-fixed: #00f7df;
--md-sys-color-primary-fixed-dim: #00e8d1;
--md-sys-color-on-primary-fixed: #00443c;
--md-sys-color-on-primary-fixed-variant: #006359;
--md-sys-color-inverse-primary: #006b60;
--md-sys-color-secondary: #38fbf7;
--md-sys-color-secondary-dim: #10ece8;
--md-sys-color-on-secondary: #005c5a;
--md-sys-color-secondary-container: #006a68;
--md-sys-color-on-secondary-container: #dafffd;
--md-sys-color-secondary-fixed: #38fbf7;
--md-sys-color-secondary-fixed-dim: #10ece8;
--md-sys-color-on-secondary-fixed: #004746;
--md-sys-color-on-secondary-fixed-variant: #006765;
--md-sys-color-tertiary: #68ccff;
--md-sys-color-tertiary-dim: #20c0ff;
--md-sys-color-on-tertiary: #00415a;
--md-sys-color-tertiary-container: #20c0ff;
--md-sys-color-on-tertiary-container: #00374d;
--md-sys-color-tertiary-fixed: #20c0ff;
--md-sys-color-tertiary-fixed-dim: #00b2ee;
--md-sys-color-on-tertiary-fixed: #001e2b;
--md-sys-color-on-tertiary-fixed-variant: #004059;
--md-sys-color-error: #ff716c;
--md-sys-color-error-dim: #d7383b;
--md-sys-color-on-error: #490006;
--md-sys-color-error-container: #9f0519;
--md-sys-color-on-error-container: #ffa8a3;
--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: #b31b25;
--md-sys-color-inverse-success: #006c45;
--md-sys-color-inverse-warning: #7c5800;
--md-sys-color-inverse-info: #005ac4;
}
[data-scheme='rose'],
[data-scheme='rose'][data-theme='light'],
[data-scheme='rose'] [data-theme='light'] {
color-scheme: light;
--md-sys-color-background: #fff4f6;
--md-sys-color-on-background: #492136;
--md-sys-color-surface: #fff4f6;
--md-sys-color-surface-dim: #ffc4de;
--md-sys-color-surface-bright: #fff4f6;
--md-sys-color-surface-container-lowest: #ffffff;
--md-sys-color-surface-container-low: #ffecf2;
--md-sys-color-surface-container: #ffe0ec;
--md-sys-color-surface-container-high: #ffd8e8;
--md-sys-color-surface-container-highest: #ffd0e4;
--md-sys-color-on-surface: #492136;
--md-sys-color-on-surface-variant: #7c4d64;
--md-sys-color-outline: #9b6880;
--md-sys-color-outline-variant: #d69db7;
--md-sys-color-inverse-surface: #220215;
--md-sys-color-inverse-on-surface: #c58da6;
--md-sys-color-primary: #ae1d53;
--md-sys-color-primary-dim: #9e0b47;
--md-sys-color-on-primary: #ffeff0;
--md-sys-color-primary-container: #ff7198;
--md-sys-color-on-primary-container: #4d001e;
--md-sys-color-primary-fixed: #ff7198;
--md-sys-color-primary-fixed-dim: #f95a8a;
--md-sys-color-on-primary-fixed: #000000;
--md-sys-color-on-primary-fixed-variant: #5e0027;
--md-sys-color-inverse-primary: #f65787;
--md-sys-color-secondary: #99366e;
--md-sys-color-secondary-dim: #8a2a62;
--md-sys-color-on-secondary: #ffeff3;
--md-sys-color-secondary-container: #ffc0dc;
--md-sys-color-on-secondary-container: #7f2159;
--md-sys-color-secondary-fixed: #ffc0dc;
--md-sys-color-secondary-fixed-dim: #ffabd2;
--md-sys-color-on-secondary-fixed: #670845;
--md-sys-color-on-secondary-fixed-variant: #8b2b63;
--md-sys-color-tertiary: #5c4bb4;
--md-sys-color-tertiary-dim: #503ea7;
--md-sys-color-on-tertiary: #f6f0ff;
--md-sys-color-tertiary-container: #b3a5ff;
--md-sys-color-on-tertiary-container: #301887;
--md-sys-color-tertiary-fixed: #b3a5ff;
--md-sys-color-tertiary-fixed-dim: #a595ff;
--md-sys-color-on-tertiary-fixed: #170059;
--md-sys-color-on-tertiary-fixed-variant: #39248f;
--md-sys-color-error: #b31b25;
--md-sys-color-error-dim: #9f0519;
--md-sys-color-on-error: #ffefee;
--md-sys-color-error-container: #fb5151;
--md-sys-color-on-error-container: #570008;
--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: #ff716c;
--md-sys-color-inverse-success: #69dca1;
--md-sys-color-inverse-warning: #fdbb28;
--md-sys-color-inverse-info: #aec6ff;
}
[data-scheme='rose'][data-theme='dark'],
[data-scheme='rose'] [data-theme='dark'] {
color-scheme: dark;
--md-sys-color-background: #220215;
--md-sys-color-on-background: #ffdcea;
--md-sys-color-surface: #220215;
--md-sys-color-surface-dim: #220215;
--md-sys-color-surface-bright: #4e1737;
--md-sys-color-surface-container-lowest: #000000;
--md-sys-color-surface-container-low: #2a041b;
--md-sys-color-surface-container: #330822;
--md-sys-color-surface-container-high: #3c0d28;
--md-sys-color-surface-container-highest: #45122f;
--md-sys-color-on-surface: #ffdcea;
--md-sys-color-on-surface-variant: #d49bb4;
--md-sys-color-outline: #99667e;
--md-sys-color-outline-variant: #663a50;
--md-sys-color-inverse-surface: #fff8f8;
--md-sys-color-inverse-on-surface: #75475d;
--md-sys-color-primary: #ff8aa7;
--md-sys-color-primary-dim: #ff6b95;
--md-sys-color-on-primary: #620029;
--md-sys-color-primary-container: #ff7198;
--md-sys-color-on-primary-container: #4d001e;
--md-sys-color-primary-fixed: #ff7198;
--md-sys-color-primary-fixed-dim: #f95a8a;
--md-sys-color-on-primary-fixed: #000000;
--md-sys-color-on-primary-fixed-variant: #5e0027;
--md-sys-color-inverse-primary: #b32257;
--md-sys-color-secondary: #ff8ac6;
--md-sys-color-secondary-dim: #ef7db9;
--md-sys-color-on-secondary: #620241;
--md-sys-color-secondary-container: #7f2058;
--md-sys-color-on-secondary-container: #ffbedb;
--md-sys-color-secondary-fixed: #ffc0dc;
--md-sys-color-secondary-fixed-dim: #ffabd2;
--md-sys-color-on-secondary-fixed: #670845;
--md-sys-color-on-secondary-fixed-variant: #8b2b63;
--md-sys-color-tertiary: #aa9bff;
--md-sys-color-tertiary-dim: #9f8ffc;
--md-sys-color-on-tertiary: #290c80;
--md-sys-color-tertiary-container: #9d8cfa;
--md-sys-color-on-tertiary-container: #1c0068;
--md-sys-color-tertiary-fixed: #b3a5ff;
--md-sys-color-tertiary-fixed-dim: #a595ff;
--md-sys-color-on-tertiary-fixed: #170059;
--md-sys-color-on-tertiary-fixed-variant: #39248f;
--md-sys-color-error: #ff716c;
--md-sys-color-error-dim: #d7383b;
--md-sys-color-on-error: #490006;
--md-sys-color-error-container: #9f0519;
--md-sys-color-on-error-container: #ffa8a3;
--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: #b31b25;
--md-sys-color-inverse-success: #006c45;
--md-sys-color-inverse-warning: #7c5800;
--md-sys-color-inverse-info: #005ac4;
}