noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: contrast levels and custom color picker in appearance menu

Browse Source 
Generate medium/high contrast schemes, add a custom swatch that builds a scheme
in the browser via lazy-loaded scheme.js, allow Theme Builder exports as palettes.
Drop the teal palette and spread the swatches across the menu width.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-05 12:40:34 +02:00
co-authored by Claude Opus 5.5
parent b4eba7ae63
commit 6c271ffffe
8 changed files with 289 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+14 -5
View File
@@ -48,9 +48,11 @@ the map, so run it after every Redmine update.
### Colors ### Colors
Each user picks a mode (Auto / Light / Dark) and a color (Purple, Blue, Teal, Green, Orange) in the Each user picks a mode (Auto / Light / Dark), a contrast level (Standard / Medium / High) and a color (Purple, Blue, Green, Orange) in the
**Appearance** section of the profile menu (top right; in the mobile menu at the bottom). The choice is **Appearance** section of the profile menu (top right; in the mobile menu at the bottom). The choice is
stored per browser (`localStorage`); Auto follows the operating system. stored per browser (`localStorage`); Auto follows the operating system. The last (rainbow) swatch
lets users pick any color: `javascripts/scheme.js` is loaded on demand, generates the scheme in the
browser, and the generated CSS is stored with the choice, so later page loads don't need it.
The color roles are generated from one seed color per palette with `@material/material-color-utilities` The color roles are generated from one seed color per palette with `@material/material-color-utilities`
(scheme TonalSpot) into `tonalmine/stylesheets/palettes.css`: (scheme TonalSpot) into `tonalmine/stylesheets/palettes.css`:
@@ -58,12 +60,19 @@ The color roles are generated from one seed color per palette with `@material/ma
```sh ```sh
cd tools/palettes cd tools/palettes
npm install # once npm install # once
npm run build # writes palettes.css npm run build # writes palettes.css and javascripts/scheme.js
``` ```
To add or change a palette, edit `PALETTES` in `tools/palettes/build_palettes.mjs` and in To add or change a palette, edit `PALETTES` in `tools/palettes/build_palettes.mjs` and in
`tonalmine/javascripts/theme.js` (the build fails if they differ), then rebuild. The only other `tonalmine/javascripts/theme.js` (the build fails if they differ), then rebuild.
hard-coded colors are the select chevrons `images/arrow-drop-down*.svg` (one per mode).
To use a scheme from [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/)
as-is: export it as Web (CSS), copy its `light.css` and `dark.css` into `tools/palettes/themes/<name>/`,
and also its `light-mc.css`, `light-hc.css`, `dark-mc.css` and `dark-hc.css` contrast files. Then add
`['<name>', '<seed>', 'themes/<name>']` to `PALETTES`. The roles are copied from the export; the seed
only tints the success/warning colors.
The only other hard-coded colors are the select chevrons `images/arrow-drop-down*.svg` (one per mode).
## License ## License
tonalmine/javascripts/scheme.js
+115
View File
File diff suppressed because one or more lines are too long
tonalmine/javascripts/theme.js
+61 -3
View File
@@ -10,12 +10,13 @@
var PALETTES = [ var PALETTES = [
['purple', 'Purple', '#6750A4'], ['purple', 'Purple', '#6750A4'],
['blue', 'Blue', '#0061A4'], ['blue', 'Blue', '#0061A4'],
['teal', 'Teal', '#006A6A'],
['green', 'Green', '#386A20'], ['green', 'Green', '#386A20'],
['orange', 'Orange', '#8B5000'] ['orange', 'Orange', '#8B5000']
]; ];
var MODES = [['auto', 'Auto'], ['light', 'Light'], ['dark', 'Dark']]; var MODES = [['auto', 'Auto'], ['light', 'Light'], ['dark', 'Dark']];
var CONTRASTS = [['standard', 'Standard'], ['medium', 'Medium'], ['high', 'High']];
var KEY = 'tonalmine'; var KEY = 'tonalmine';
var CUSTOM_SEL = ':root[data-palette="custom"]';
var root = document.documentElement; var root = document.documentElement;
function load() { function load() {
@@ -31,6 +32,33 @@
else root.removeAttribute('data-palette'); else root.removeAttribute('data-palette');
if (prefs.mode === 'light' || prefs.mode === 'dark') root.setAttribute('data-mode', prefs.mode); if (prefs.mode === 'light' || prefs.mode === 'dark') root.setAttribute('data-mode', prefs.mode);
else root.removeAttribute('data-mode'); else root.removeAttribute('data-mode');
if (prefs.contrast === 'medium' || prefs.contrast === 'high') root.setAttribute('data-contrast', prefs.contrast);
else root.removeAttribute('data-contrast');
// The custom palette's rules are generated once (see withScheme) and kept with the prefs.
if (prefs.palette === 'custom' && prefs.css) {
var style = document.getElementById('nm-custom-palette');
if (!style) {
style = document.createElement('style');
style.id = 'nm-custom-palette';
document.head.appendChild(style);
}
style.textContent = prefs.css;
}
}
// The scheme generator (scheme.js, ~90 KB) is only loaded when someone picks a custom color.
// Redmine serves theme assets under digested names only, so its URL comes from the CSS
// variable --nm-scheme-js (Redmine rewrites url() in CSS to the digested path).
var schemeScript;
function withScheme(done) {
if (window.tonalmineScheme) return done(window.tonalmineScheme);
if (!schemeScript) {
var url = getComputedStyle(root).getPropertyValue('--nm-scheme-js').match(/url\(["']?([^"')]+)/)[1];
schemeScript = document.createElement('script');
schemeScript.src = url;
document.head.appendChild(schemeScript);
}
schemeScript.addEventListener('load', function () { done(window.tonalmineScheme); });
} }
var prefs = load(); var prefs = load();
@@ -42,17 +70,25 @@
function pickerHtml() { function pickerHtml() {
var mode = prefs.mode || 'auto'; var mode = prefs.mode || 'auto';
var contrast = prefs.contrast || 'standard';
var palette = prefs.palette || PALETTES[0][0]; var palette = prefs.palette || PALETTES[0][0];
return '<div class="nm-appearance">' + return '<div class="nm-appearance">' +
'<div class="nm-appearance__title">Appearance</div>' + '<div class="nm-appearance__title">Appearance</div>' +
'<div class="nm-segmented" role="group" aria-label="Mode">' + '<div class="nm-segmented" role="group" aria-label="Mode">' +
MODES.map(function (m) { return button('data-nm-mode', m[0], m[1], m[0] === mode); }).join('') + MODES.map(function (m) { return button('data-nm-mode', m[0], m[1], m[0] === mode); }).join('') +
'</div>' + '</div>' +
'<div class="nm-appearance__title">Contrast</div>' +
'<div class="nm-segmented" role="group" aria-label="Contrast">' +
CONTRASTS.map(function (c) { return button('data-nm-contrast', c[0], c[1], c[0] === contrast); }).join('') +
'</div>' +
'<div class="nm-swatches" role="group" aria-label="Color">' + '<div class="nm-swatches" role="group" aria-label="Color">' +
PALETTES.map(function (p) { PALETTES.map(function (p) {
return button('data-nm-palette', p[0], '', p[0] === palette, return button('data-nm-palette', p[0], '', p[0] === palette,
' class="nm-swatch" title="' + p[1] + '" aria-label="' + p[1] + '" style="--nm-swatch: ' + p[2] + '"'); ' class="nm-swatch" title="' + p[1] + '" aria-label="' + p[1] + '" style="--nm-swatch: ' + p[2] + '"');
}).join('') + }).join('') +
'<label class="nm-swatch nm-swatch--custom" data-nm-palette="custom" aria-pressed="' + (palette === 'custom') + '"' +
(prefs.seed ? ' style="--nm-swatch: ' + prefs.seed + '"' : '') + ' title="Custom color">' +
'<input type="color" data-nm-custom value="' + (prefs.seed || PALETTES[0][2].toLowerCase()) + '" aria-label="Custom color"></label>' +
'</div></div>'; '</div></div>';
} }
@@ -60,21 +96,43 @@
document.querySelectorAll('[data-nm-mode]').forEach(function (b) { document.querySelectorAll('[data-nm-mode]').forEach(function (b) {
b.setAttribute('aria-pressed', String(b.getAttribute('data-nm-mode') === (prefs.mode || 'auto'))); b.setAttribute('aria-pressed', String(b.getAttribute('data-nm-mode') === (prefs.mode || 'auto')));
}); });
document.querySelectorAll('[data-nm-contrast]').forEach(function (b) {
b.setAttribute('aria-pressed', String(b.getAttribute('data-nm-contrast') === (prefs.contrast || 'standard')));
});
document.querySelectorAll('[data-nm-palette]').forEach(function (b) { document.querySelectorAll('[data-nm-palette]').forEach(function (b) {
b.setAttribute('aria-pressed', String(b.getAttribute('data-nm-palette') === (prefs.palette || PALETTES[0][0]))); b.setAttribute('aria-pressed', String(b.getAttribute('data-nm-palette') === (prefs.palette || PALETTES[0][0])));
}); });
} }
document.addEventListener('click', function (event) { document.addEventListener('click', function (event) {
var target = event.target.closest('[data-nm-mode], [data-nm-palette]'); var target = event.target.closest('[data-nm-mode], [data-nm-contrast], [data-nm-palette]');
if (!target) return; if (!target) return;
if (target.hasAttribute('data-nm-mode')) prefs.mode = target.getAttribute('data-nm-mode'); if (target.hasAttribute('data-nm-mode')) prefs.mode = target.getAttribute('data-nm-mode');
else prefs.palette = target.getAttribute('data-nm-palette'); else if (target.hasAttribute('data-nm-contrast')) prefs.contrast = target.getAttribute('data-nm-contrast');
// The custom swatch opens the color dialog; it only selects the palette once a color was picked.
else if (target.getAttribute('data-nm-palette') !== 'custom' || prefs.css) prefs.palette = target.getAttribute('data-nm-palette');
save(prefs); save(prefs);
apply(prefs); apply(prefs);
sync(); sync();
}); });
document.addEventListener('input', function (event) {
if (!event.target.matches('[data-nm-custom]')) return;
var seed = event.target.value;
withScheme(function (scheme) {
prefs.palette = 'custom';
prefs.seed = seed;
prefs.css = scheme.paletteCss(CUSTOM_SEL, seed);
save(prefs);
apply(prefs);
sync();
document.querySelectorAll('[data-nm-custom]').forEach(function (input) {
input.value = seed;
input.parentNode.style.setProperty('--nm-swatch', seed);
});
});
});
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var menu = document.querySelector('#account .dropdown-content .dropdown-divider'); var menu = document.querySelector('#account .dropdown-content .dropdown-divider');
if (menu) menu.insertAdjacentHTML('afterend', pickerHtml() + '<div class="dropdown-divider"></div>'); if (menu) menu.insertAdjacentHTML('afterend', pickerHtml() + '<div class="dropdown-divider"></div>');
tonalmine/stylesheets/components.css
+7 -1
View File
@@ -537,7 +537,7 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
.nm-segmented button:hover { background-image: var(--nm-state-hover); } .nm-segmented button:hover { background-image: var(--nm-state-hover); }
.nm-segmented button[aria-pressed="true"] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .nm-segmented button[aria-pressed="true"] { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
/* Color swatches: the selected one gets a ring */ /* Color swatches: the selected one gets a ring */
.nm-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .nm-swatches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.nm-swatch { .nm-swatch {
flex-shrink: 0; flex-shrink: 0;
inline-size: 28px; inline-size: 28px;
@@ -548,6 +548,12 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
background: var(--nm-swatch); background: var(--nm-swatch);
cursor: pointer; cursor: pointer;
} }
/* Custom color: a native color input stretched invisibly over a rainbow (or the picked color) swatch */
.nm-swatch--custom { position: relative; background: var(--nm-swatch, conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935)); }
.nm-swatch--custom input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.nm-swatch--custom:focus-within { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
/* theme.js lazy-loads the scheme generator from here; Redmine rewrites url() to the digested path */
:root { --nm-scheme-js: url(./scheme.js); }
.nm-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--md-sys-color-surface-container), 0 0 0 4px var(--md-sys-color-on-surface); } .nm-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--md-sys-color-surface-container), 0 0 0 4px var(--md-sys-color-on-surface); }
html .flyout-menu .nm-appearance { padding-inline: 16px; } html .flyout-menu .nm-appearance { padding-inline: 16px; }
html .flyout-menu .nm-appearance__title { color: var(--md-sys-color-on-surface-variant); } html .flyout-menu .nm-appearance__title { color: var(--md-sys-color-on-surface-variant); }
tonalmine/stylesheets/palettes.css
+26 -6
View File
@@ -1,8 +1,9 @@
/* /*
* Generated by tools/palettes/build_palettes.mjs; do not edit by hand. * Generated by tools/palettes/build_palettes.mjs; do not edit by hand.
* M3 color roles (TonalSpot, contrast 0) per palette, light and dark. * M3 color roles (TonalSpot) per palette, light and dark, at contrast 0, 0.5 and 1.
* <html data-palette="..."> picks the palette, <html data-mode="light|dark"> forces a mode; * <html data-palette="..."> picks the palette, <html data-mode="light|dark"> forces a mode;
* without data-mode the OS setting (prefers-color-scheme) decides. * without data-mode the OS setting (prefers-color-scheme) decides.
* <html data-contrast="medium|high"> picks the contrast level; without it, standard.
*/ */
:root { color-scheme: light; } :root { color-scheme: light; }
@@ -13,23 +14,42 @@
:root { --md-sys-color-primary: #65558f; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e9ddff; --md-sys-color-on-primary-container: #4d3d75; --md-sys-color-inverse-primary: #cfbdfe; --md-sys-color-secondary: #625b71; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #e8def8; --md-sys-color-on-secondary-container: #4a4458; --md-sys-color-tertiary: #7e5260; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #ffd9e3; --md-sys-color-on-tertiary-container: #633b48; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #fdf7ff; --md-sys-color-on-background: #1d1b20; --md-sys-color-surface: #fdf7ff; --md-sys-color-surface-dim: #ded8e0; --md-sys-color-surface-bright: #fdf7ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f8f2fa; --md-sys-color-surface-container: #f2ecf4; --md-sys-color-surface-container-high: #ece6ee; --md-sys-color-surface-container-highest: #e6e0e9; --md-sys-color-on-surface: #1d1b20; --md-sys-color-surface-variant: #e7e0eb; --md-sys-color-on-surface-variant: #49454e; --md-sys-color-inverse-surface: #322f35; --md-sys-color-inverse-on-surface: #f5eff7; --md-sys-color-outline: #7a757f; --md-sys-color-outline-variant: #cac4cf; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #65558f; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #885200; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddbb; --md-sys-color-on-warning-container: #2b1700; } :root { --md-sys-color-primary: #65558f; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e9ddff; --md-sys-color-on-primary-container: #4d3d75; --md-sys-color-inverse-primary: #cfbdfe; --md-sys-color-secondary: #625b71; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #e8def8; --md-sys-color-on-secondary-container: #4a4458; --md-sys-color-tertiary: #7e5260; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #ffd9e3; --md-sys-color-on-tertiary-container: #633b48; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #fdf7ff; --md-sys-color-on-background: #1d1b20; --md-sys-color-surface: #fdf7ff; --md-sys-color-surface-dim: #ded8e0; --md-sys-color-surface-bright: #fdf7ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f8f2fa; --md-sys-color-surface-container: #f2ecf4; --md-sys-color-surface-container-high: #ece6ee; --md-sys-color-surface-container-highest: #e6e0e9; --md-sys-color-on-surface: #1d1b20; --md-sys-color-surface-variant: #e7e0eb; --md-sys-color-on-surface-variant: #49454e; --md-sys-color-inverse-surface: #322f35; --md-sys-color-inverse-on-surface: #f5eff7; --md-sys-color-outline: #7a757f; --md-sys-color-outline-variant: #cac4cf; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #65558f; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #885200; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddbb; --md-sys-color-on-warning-container: #2b1700; }
:root[data-mode="dark"] { --md-sys-color-primary: #cfbdfe; --md-sys-color-on-primary: #36275d; --md-sys-color-primary-container: #4d3d75; --md-sys-color-on-primary-container: #e9ddff; --md-sys-color-inverse-primary: #65558f; --md-sys-color-secondary: #cbc2db; --md-sys-color-on-secondary: #332d41; --md-sys-color-secondary-container: #4a4458; --md-sys-color-on-secondary-container: #e8def8; --md-sys-color-tertiary: #efb8c8; --md-sys-color-on-tertiary: #4a2532; --md-sys-color-tertiary-container: #633b48; --md-sys-color-on-tertiary-container: #ffd9e3; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #3b383e; --md-sys-color-surface-container-lowest: #0f0d13; --md-sys-color-surface-container-low: #1d1b20; --md-sys-color-surface-container: #211f24; --md-sys-color-surface-container-high: #2b292f; --md-sys-color-surface-container-highest: #36343a; --md-sys-color-on-surface: #e6e0e9; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #cac4cf; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #322f35; --md-sys-color-outline: #948f99; --md-sys-color-outline-variant: #49454e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; } :root[data-mode="dark"] { --md-sys-color-primary: #cfbdfe; --md-sys-color-on-primary: #36275d; --md-sys-color-primary-container: #4d3d75; --md-sys-color-on-primary-container: #e9ddff; --md-sys-color-inverse-primary: #65558f; --md-sys-color-secondary: #cbc2db; --md-sys-color-on-secondary: #332d41; --md-sys-color-secondary-container: #4a4458; --md-sys-color-on-secondary-container: #e8def8; --md-sys-color-tertiary: #efb8c8; --md-sys-color-on-tertiary: #4a2532; --md-sys-color-tertiary-container: #633b48; --md-sys-color-on-tertiary-container: #ffd9e3; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #3b383e; --md-sys-color-surface-container-lowest: #0f0d13; --md-sys-color-surface-container-low: #1d1b20; --md-sys-color-surface-container: #211f24; --md-sys-color-surface-container-high: #2b292f; --md-sys-color-surface-container-highest: #36343a; --md-sys-color-on-surface: #e6e0e9; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #cac4cf; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #322f35; --md-sys-color-outline: #948f99; --md-sys-color-outline-variant: #49454e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --md-sys-color-primary: #cfbdfe; --md-sys-color-on-primary: #36275d; --md-sys-color-primary-container: #4d3d75; --md-sys-color-on-primary-container: #e9ddff; --md-sys-color-inverse-primary: #65558f; --md-sys-color-secondary: #cbc2db; --md-sys-color-on-secondary: #332d41; --md-sys-color-secondary-container: #4a4458; --md-sys-color-on-secondary-container: #e8def8; --md-sys-color-tertiary: #efb8c8; --md-sys-color-on-tertiary: #4a2532; --md-sys-color-tertiary-container: #633b48; --md-sys-color-on-tertiary-container: #ffd9e3; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #3b383e; --md-sys-color-surface-container-lowest: #0f0d13; --md-sys-color-surface-container-low: #1d1b20; --md-sys-color-surface-container: #211f24; --md-sys-color-surface-container-high: #2b292f; --md-sys-color-surface-container-highest: #36343a; --md-sys-color-on-surface: #e6e0e9; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #cac4cf; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #322f35; --md-sys-color-outline: #948f99; --md-sys-color-outline-variant: #49454e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; } } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --md-sys-color-primary: #cfbdfe; --md-sys-color-on-primary: #36275d; --md-sys-color-primary-container: #4d3d75; --md-sys-color-on-primary-container: #e9ddff; --md-sys-color-inverse-primary: #65558f; --md-sys-color-secondary: #cbc2db; --md-sys-color-on-secondary: #332d41; --md-sys-color-secondary-container: #4a4458; --md-sys-color-on-secondary-container: #e8def8; --md-sys-color-tertiary: #efb8c8; --md-sys-color-on-tertiary: #4a2532; --md-sys-color-tertiary-container: #633b48; --md-sys-color-on-tertiary-container: #ffd9e3; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #3b383e; --md-sys-color-surface-container-lowest: #0f0d13; --md-sys-color-surface-container-low: #1d1b20; --md-sys-color-surface-container: #211f24; --md-sys-color-surface-container-high: #2b292f; --md-sys-color-surface-container-highest: #36343a; --md-sys-color-on-surface: #e6e0e9; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #cac4cf; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #322f35; --md-sys-color-outline: #948f99; --md-sys-color-outline-variant: #49454e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; } }
:root[data-contrast="medium"] { --md-sys-color-primary: #3c2d63; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #74649f; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #cfbdfe; --md-sys-color-secondary: #393347; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #716a80; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #502b38; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #8e606f; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #740006; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #cf2c27; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #fdf7ff; --md-sys-color-on-background: #1d1b20; --md-sys-color-surface: #fdf7ff; --md-sys-color-surface-dim: #cac5cc; --md-sys-color-surface-bright: #fdf7ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f8f2fa; --md-sys-color-surface-container: #ece6ee; --md-sys-color-surface-container-high: #e1dbe3; --md-sys-color-surface-container-highest: #d5d0d8; --md-sys-color-on-surface: #121016; --md-sys-color-surface-variant: #e7e0eb; --md-sys-color-on-surface-variant: #38353d; --md-sys-color-inverse-surface: #322f35; --md-sys-color-inverse-on-surface: #f5eff7; --md-sys-color-outline: #54515a; --md-sys-color-outline-variant: #6f6b75; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #65558f; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #885200; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddbb; --md-sys-color-on-warning-container: #2b1700; }
:root[data-contrast="medium"][data-mode="dark"] { --md-sys-color-primary: #e3d6ff; --md-sys-color-on-primary: #2b1b52; --md-sys-color-primary-container: #9887c5; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #4e3f77; --md-sys-color-secondary: #e2d8f2; --md-sys-color-on-secondary: #282336; --md-sys-color-secondary-container: #958da4; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #ffd0dd; --md-sys-color-on-tertiary: #3d1a27; --md-sys-color-tertiary-container: #b58392; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #46434a; --md-sys-color-surface-container-lowest: #08070b; --md-sys-color-surface-container-low: #1f1d22; --md-sys-color-surface-container: #29272d; --md-sys-color-surface-container-high: #343138; --md-sys-color-surface-container-highest: #3f3c43; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #e0dae5; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #2b292f; --md-sys-color-outline: #b5b0bb; --md-sys-color-outline-variant: #938e99; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; }
@media (prefers-color-scheme: dark) { :root[data-contrast="medium"]:not([data-mode="light"]) { --md-sys-color-primary: #e3d6ff; --md-sys-color-on-primary: #2b1b52; --md-sys-color-primary-container: #9887c5; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #4e3f77; --md-sys-color-secondary: #e2d8f2; --md-sys-color-on-secondary: #282336; --md-sys-color-secondary-container: #958da4; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #ffd0dd; --md-sys-color-on-tertiary: #3d1a27; --md-sys-color-tertiary-container: #b58392; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #46434a; --md-sys-color-surface-container-lowest: #08070b; --md-sys-color-surface-container-low: #1f1d22; --md-sys-color-surface-container: #29272d; --md-sys-color-surface-container-high: #343138; --md-sys-color-surface-container-highest: #3f3c43; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #e0dae5; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #2b292f; --md-sys-color-outline: #b5b0bb; --md-sys-color-outline-variant: #938e99; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; } }
:root[data-contrast="high"] { --md-sys-color-primary: #312259; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #4f4078; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #cfbdfe; --md-sys-color-secondary: #2f293c; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #4c465b; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #45212e; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #663d4b; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #600004; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #98000a; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #fdf7ff; --md-sys-color-on-background: #1d1b20; --md-sys-color-surface: #fdf7ff; --md-sys-color-surface-dim: #bcb7bf; --md-sys-color-surface-bright: #fdf7ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f5eff7; --md-sys-color-surface-container: #e6e0e9; --md-sys-color-surface-container-high: #d8d2da; --md-sys-color-surface-container-highest: #cac5cc; --md-sys-color-on-surface: #000000; --md-sys-color-surface-variant: #e7e0eb; --md-sys-color-on-surface-variant: #000000; --md-sys-color-inverse-surface: #322f35; --md-sys-color-inverse-on-surface: #ffffff; --md-sys-color-outline: #2e2b33; --md-sys-color-outline-variant: #4b4851; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #65558f; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #885200; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddbb; --md-sys-color-on-warning-container: #2b1700; }
:root[data-contrast="high"][data-mode="dark"] { --md-sys-color-primary: #f5edff; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #cbb9fa; --md-sys-color-on-primary-container: #0f0033; --md-sys-color-inverse-primary: #4e3f77; --md-sys-color-secondary: #f5edff; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #c8bfd8; --md-sys-color-on-secondary-container: #0d081a; --md-sys-color-tertiary: #ffebef; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #ebb4c4; --md-sys-color-on-tertiary-container: #1d020d; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #524f55; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #211f24; --md-sys-color-surface-container: #322f35; --md-sys-color-surface-container-high: #3d3a41; --md-sys-color-surface-container-highest: #48464c; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #f4eef9; --md-sys-color-outline-variant: #c6c0cb; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; }
@media (prefers-color-scheme: dark) { :root[data-contrast="high"]:not([data-mode="light"]) { --md-sys-color-primary: #f5edff; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #cbb9fa; --md-sys-color-on-primary-container: #0f0033; --md-sys-color-inverse-primary: #4e3f77; --md-sys-color-secondary: #f5edff; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #c8bfd8; --md-sys-color-on-secondary-container: #0d081a; --md-sys-color-tertiary: #ffebef; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #ebb4c4; --md-sys-color-on-tertiary-container: #1d020d; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #141218; --md-sys-color-on-background: #e6e0e9; --md-sys-color-surface: #141218; --md-sys-color-surface-dim: #141218; --md-sys-color-surface-bright: #524f55; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #211f24; --md-sys-color-surface-container: #322f35; --md-sys-color-surface-container-high: #3d3a41; --md-sys-color-surface-container-highest: #48464c; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #49454e; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #e6e0e9; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #f4eef9; --md-sys-color-outline-variant: #c6c0cb; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #cfbdfe; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #ffb869; --md-sys-color-on-warning: #482900; --md-sys-color-warning-container: #673d00; --md-sys-color-on-warning-container: #ffddbb; } }
/* blue (seed #0061A4) */ /* blue (seed #0061A4) */
:root[data-palette="blue"] { --md-sys-color-primary: #36618e; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #d1e4ff; --md-sys-color-on-primary-container: #1a4975; --md-sys-color-inverse-primary: #a0cafd; --md-sys-color-secondary: #535f70; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d7e3f8; --md-sys-color-on-secondary-container: #3b4858; --md-sys-color-tertiary: #6b5778; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f3daff; --md-sys-color-on-tertiary-container: #523f5f; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #f8f9ff; --md-sys-color-on-background: #191c20; --md-sys-color-surface: #f8f9ff; --md-sys-color-surface-dim: #d8dae0; --md-sys-color-surface-bright: #f8f9ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f2f3fa; --md-sys-color-surface-container: #eceef4; --md-sys-color-surface-container-high: #e6e8ee; --md-sys-color-surface-container-highest: #e1e2e8; --md-sys-color-on-surface: #191c20; --md-sys-color-surface-variant: #dfe2eb; --md-sys-color-on-surface-variant: #43474e; --md-sys-color-inverse-surface: #2e3135; --md-sys-color-inverse-on-surface: #eff0f7; --md-sys-color-outline: #73777f; --md-sys-color-outline-variant: #c3c6cf; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #36618e; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; } :root[data-palette="blue"] { --md-sys-color-primary: #36618e; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #d1e4ff; --md-sys-color-on-primary-container: #1a4975; --md-sys-color-inverse-primary: #a0cafd; --md-sys-color-secondary: #535f70; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d7e3f8; --md-sys-color-on-secondary-container: #3b4858; --md-sys-color-tertiary: #6b5778; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f3daff; --md-sys-color-on-tertiary-container: #523f5f; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #f8f9ff; --md-sys-color-on-background: #191c20; --md-sys-color-surface: #f8f9ff; --md-sys-color-surface-dim: #d8dae0; --md-sys-color-surface-bright: #f8f9ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f2f3fa; --md-sys-color-surface-container: #eceef4; --md-sys-color-surface-container-high: #e6e8ee; --md-sys-color-surface-container-highest: #e1e2e8; --md-sys-color-on-surface: #191c20; --md-sys-color-surface-variant: #dfe2eb; --md-sys-color-on-surface-variant: #43474e; --md-sys-color-inverse-surface: #2e3135; --md-sys-color-inverse-on-surface: #eff0f7; --md-sys-color-outline: #73777f; --md-sys-color-outline-variant: #c3c6cf; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #36618e; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; }
:root[data-palette="blue"][data-mode="dark"] { --md-sys-color-primary: #a0cafd; --md-sys-color-on-primary: #003258; --md-sys-color-primary-container: #1a4975; --md-sys-color-on-primary-container: #d1e4ff; --md-sys-color-inverse-primary: #36618e; --md-sys-color-secondary: #bbc7db; --md-sys-color-on-secondary: #253140; --md-sys-color-secondary-container: #3b4858; --md-sys-color-on-secondary-container: #d7e3f8; --md-sys-color-tertiary: #d7bee4; --md-sys-color-on-tertiary: #3b2948; --md-sys-color-tertiary-container: #523f5f; --md-sys-color-on-tertiary-container: #f3daff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #36393e; --md-sys-color-surface-container-lowest: #0b0e13; --md-sys-color-surface-container-low: #191c20; --md-sys-color-surface-container: #1d2024; --md-sys-color-surface-container-high: #272a2f; --md-sys-color-surface-container-highest: #32353a; --md-sys-color-on-surface: #e1e2e8; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #2e3135; --md-sys-color-outline: #8d9199; --md-sys-color-outline-variant: #43474e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } :root[data-palette="blue"][data-mode="dark"] { --md-sys-color-primary: #a0cafd; --md-sys-color-on-primary: #003258; --md-sys-color-primary-container: #1a4975; --md-sys-color-on-primary-container: #d1e4ff; --md-sys-color-inverse-primary: #36618e; --md-sys-color-secondary: #bbc7db; --md-sys-color-on-secondary: #253140; --md-sys-color-secondary-container: #3b4858; --md-sys-color-on-secondary-container: #d7e3f8; --md-sys-color-tertiary: #d7bee4; --md-sys-color-on-tertiary: #3b2948; --md-sys-color-tertiary-container: #523f5f; --md-sys-color-on-tertiary-container: #f3daff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #36393e; --md-sys-color-surface-container-lowest: #0b0e13; --md-sys-color-surface-container-low: #191c20; --md-sys-color-surface-container: #1d2024; --md-sys-color-surface-container-high: #272a2f; --md-sys-color-surface-container-highest: #32353a; --md-sys-color-on-surface: #e1e2e8; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #2e3135; --md-sys-color-outline: #8d9199; --md-sys-color-outline-variant: #43474e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; }
@media (prefers-color-scheme: dark) { :root[data-palette="blue"]:not([data-mode="light"]) { --md-sys-color-primary: #a0cafd; --md-sys-color-on-primary: #003258; --md-sys-color-primary-container: #1a4975; --md-sys-color-on-primary-container: #d1e4ff; --md-sys-color-inverse-primary: #36618e; --md-sys-color-secondary: #bbc7db; --md-sys-color-on-secondary: #253140; --md-sys-color-secondary-container: #3b4858; --md-sys-color-on-secondary-container: #d7e3f8; --md-sys-color-tertiary: #d7bee4; --md-sys-color-on-tertiary: #3b2948; --md-sys-color-tertiary-container: #523f5f; --md-sys-color-on-tertiary-container: #f3daff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #36393e; --md-sys-color-surface-container-lowest: #0b0e13; --md-sys-color-surface-container-low: #191c20; --md-sys-color-surface-container: #1d2024; --md-sys-color-surface-container-high: #272a2f; --md-sys-color-surface-container-highest: #32353a; --md-sys-color-on-surface: #e1e2e8; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #2e3135; --md-sys-color-outline: #8d9199; --md-sys-color-outline-variant: #43474e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } } @media (prefers-color-scheme: dark) { :root[data-palette="blue"]:not([data-mode="light"]) { --md-sys-color-primary: #a0cafd; --md-sys-color-on-primary: #003258; --md-sys-color-primary-container: #1a4975; --md-sys-color-on-primary-container: #d1e4ff; --md-sys-color-inverse-primary: #36618e; --md-sys-color-secondary: #bbc7db; --md-sys-color-on-secondary: #253140; --md-sys-color-secondary-container: #3b4858; --md-sys-color-on-secondary-container: #d7e3f8; --md-sys-color-tertiary: #d7bee4; --md-sys-color-on-tertiary: #3b2948; --md-sys-color-tertiary-container: #523f5f; --md-sys-color-on-tertiary-container: #f3daff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #36393e; --md-sys-color-surface-container-lowest: #0b0e13; --md-sys-color-surface-container-low: #191c20; --md-sys-color-surface-container: #1d2024; --md-sys-color-surface-container-high: #272a2f; --md-sys-color-surface-container-highest: #32353a; --md-sys-color-on-surface: #e1e2e8; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #c3c6cf; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #2e3135; --md-sys-color-outline: #8d9199; --md-sys-color-outline-variant: #43474e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } }
:root[data-palette="blue"][data-contrast="medium"] { --md-sys-color-primary: #003862; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #46709e; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #a0cafd; --md-sys-color-secondary: #2b3746; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #626e7f; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #412f4e; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #7a6587; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #740006; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #cf2c27; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #f8f9ff; --md-sys-color-on-background: #191c20; --md-sys-color-surface: #f8f9ff; --md-sys-color-surface-dim: #c4c6cc; --md-sys-color-surface-bright: #f8f9ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f2f3fa; --md-sys-color-surface-container: #e6e8ee; --md-sys-color-surface-container-high: #dbdde3; --md-sys-color-surface-container-highest: #d0d1d7; --md-sys-color-on-surface: #0e1116; --md-sys-color-surface-variant: #dfe2eb; --md-sys-color-on-surface-variant: #32363d; --md-sys-color-inverse-surface: #2e3135; --md-sys-color-inverse-on-surface: #eff0f7; --md-sys-color-outline: #4e535a; --md-sys-color-outline-variant: #696d75; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #36618e; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; }
/* teal (seed #006A6A) */ :root[data-palette="blue"][data-contrast="medium"][data-mode="dark"] { --md-sys-color-primary: #c7deff; --md-sys-color-on-primary: #002747; --md-sys-color-primary-container: #6b94c4; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #1b4a76; --md-sys-color-secondary: #d0ddf1; --md-sys-color-on-secondary: #1a2635; --md-sys-color-secondary-container: #8592a4; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #edd3fb; --md-sys-color-on-tertiary: #301e3c; --md-sys-color-tertiary-container: #9f88ad; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #42454a; --md-sys-color-surface-container-lowest: #05080b; --md-sys-color-surface-container-low: #1b1e22; --md-sys-color-surface-container: #25282d; --md-sys-color-surface-container-high: #303337; --md-sys-color-surface-container-highest: #3b3e43; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #d9dce5; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #272a2f; --md-sys-color-outline: #aeb2ba; --md-sys-color-outline-variant: #8c9098; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; }
:root[data-palette="teal"] { --md-sys-color-primary: #006a6a; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #9cf1f0; --md-sys-color-on-primary-container: #004f4f; --md-sys-color-inverse-primary: #80d5d4; --md-sys-color-secondary: #4a6363; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #cce8e7; --md-sys-color-on-secondary-container: #324b4b; --md-sys-color-tertiary: #4b607c; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #d3e4ff; --md-sys-color-on-tertiary-container: #334863; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #f4fbfa; --md-sys-color-on-background: #161d1d; --md-sys-color-surface: #f4fbfa; --md-sys-color-surface-dim: #d5dbda; --md-sys-color-surface-bright: #f4fbfa; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #eff5f4; --md-sys-color-surface-container: #e9efee; --md-sys-color-surface-container-high: #e3e9e9; --md-sys-color-surface-container-highest: #dde4e3; --md-sys-color-on-surface: #161d1d; --md-sys-color-surface-variant: #dae5e4; --md-sys-color-on-surface-variant: #3f4948; --md-sys-color-inverse-surface: #2b3231; --md-sys-color-inverse-on-surface: #ecf2f1; --md-sys-color-outline: #6f7979; --md-sys-color-outline-variant: #bec9c8; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #006a6a; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; } @media (prefers-color-scheme: dark) { :root[data-palette="blue"][data-contrast="medium"]:not([data-mode="light"]) { --md-sys-color-primary: #c7deff; --md-sys-color-on-primary: #002747; --md-sys-color-primary-container: #6b94c4; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #1b4a76; --md-sys-color-secondary: #d0ddf1; --md-sys-color-on-secondary: #1a2635; --md-sys-color-secondary-container: #8592a4; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #edd3fb; --md-sys-color-on-tertiary: #301e3c; --md-sys-color-tertiary-container: #9f88ad; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #42454a; --md-sys-color-surface-container-lowest: #05080b; --md-sys-color-surface-container-low: #1b1e22; --md-sys-color-surface-container: #25282d; --md-sys-color-surface-container-high: #303337; --md-sys-color-surface-container-highest: #3b3e43; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #d9dce5; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #272a2f; --md-sys-color-outline: #aeb2ba; --md-sys-color-outline-variant: #8c9098; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } }
:root[data-palette="teal"][data-mode="dark"] { --md-sys-color-primary: #80d5d4; --md-sys-color-on-primary: #003737; --md-sys-color-primary-container: #004f4f; --md-sys-color-on-primary-container: #9cf1f0; --md-sys-color-inverse-primary: #006a6a; --md-sys-color-secondary: #b0cccb; --md-sys-color-on-secondary: #1b3534; --md-sys-color-secondary-container: #324b4b; --md-sys-color-on-secondary-container: #cce8e7; --md-sys-color-tertiary: #b3c8e8; --md-sys-color-on-tertiary: #1c314b; --md-sys-color-tertiary-container: #334863; --md-sys-color-on-tertiary-container: #d3e4ff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #0e1514; --md-sys-color-on-background: #dde4e3; --md-sys-color-surface: #0e1514; --md-sys-color-surface-dim: #0e1514; --md-sys-color-surface-bright: #343a3a; --md-sys-color-surface-container-lowest: #090f0f; --md-sys-color-surface-container-low: #161d1d; --md-sys-color-surface-container: #1a2121; --md-sys-color-surface-container-high: #252b2b; --md-sys-color-surface-container-highest: #2f3636; --md-sys-color-on-surface: #dde4e3; --md-sys-color-surface-variant: #3f4948; --md-sys-color-on-surface-variant: #bec9c8; --md-sys-color-inverse-surface: #dde4e3; --md-sys-color-inverse-on-surface: #2b3231; --md-sys-color-outline: #889392; --md-sys-color-outline-variant: #3f4948; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #80d5d4; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } :root[data-palette="blue"][data-contrast="high"] { --md-sys-color-primary: #002e51; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #1d4b77; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #a0cafd; --md-sys-color-secondary: #212d3c; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #3e4a5a; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #362543; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #554262; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #600004; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #98000a; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #f8f9ff; --md-sys-color-on-background: #191c20; --md-sys-color-surface: #f8f9ff; --md-sys-color-surface-dim: #b7b9be; --md-sys-color-surface-bright: #f8f9ff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #eff0f7; --md-sys-color-surface-container: #e1e2e8; --md-sys-color-surface-container-high: #d3d4da; --md-sys-color-surface-container-highest: #c4c6cc; --md-sys-color-on-surface: #000000; --md-sys-color-surface-variant: #dfe2eb; --md-sys-color-on-surface-variant: #000000; --md-sys-color-inverse-surface: #2e3135; --md-sys-color-inverse-on-surface: #ffffff; --md-sys-color-outline: #282c33; --md-sys-color-outline-variant: #454950; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #36618e; --md-sys-color-success: #0a6d36; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9ef6b0; --md-sys-color-on-success-container: #00210b; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; }
@media (prefers-color-scheme: dark) { :root[data-palette="teal"]:not([data-mode="light"]) { --md-sys-color-primary: #80d5d4; --md-sys-color-on-primary: #003737; --md-sys-color-primary-container: #004f4f; --md-sys-color-on-primary-container: #9cf1f0; --md-sys-color-inverse-primary: #006a6a; --md-sys-color-secondary: #b0cccb; --md-sys-color-on-secondary: #1b3534; --md-sys-color-secondary-container: #324b4b; --md-sys-color-on-secondary-container: #cce8e7; --md-sys-color-tertiary: #b3c8e8; --md-sys-color-on-tertiary: #1c314b; --md-sys-color-tertiary-container: #334863; --md-sys-color-on-tertiary-container: #d3e4ff; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #0e1514; --md-sys-color-on-background: #dde4e3; --md-sys-color-surface: #0e1514; --md-sys-color-surface-dim: #0e1514; --md-sys-color-surface-bright: #343a3a; --md-sys-color-surface-container-lowest: #090f0f; --md-sys-color-surface-container-low: #161d1d; --md-sys-color-surface-container: #1a2121; --md-sys-color-surface-container-high: #252b2b; --md-sys-color-surface-container-highest: #2f3636; --md-sys-color-on-surface: #dde4e3; --md-sys-color-surface-variant: #3f4948; --md-sys-color-on-surface-variant: #bec9c8; --md-sys-color-inverse-surface: #dde4e3; --md-sys-color-inverse-on-surface: #2b3231; --md-sys-color-outline: #889392; --md-sys-color-outline-variant: #3f4948; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #80d5d4; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } } :root[data-palette="blue"][data-contrast="high"][data-mode="dark"] { --md-sys-color-primary: #e8f0ff; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #9dc6f9; --md-sys-color-on-primary-container: #000c1b; --md-sys-color-inverse-primary: #1b4a76; --md-sys-color-secondary: #e8f0ff; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #b7c4d7; --md-sys-color-on-secondary-container: #010c1a; --md-sys-color-tertiary: #fbebff; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #d3bae0; --md-sys-color-on-tertiary-container: #140420; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #4d5055; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #1d2024; --md-sys-color-surface-container: #2e3135; --md-sys-color-surface-container-high: #393c40; --md-sys-color-surface-container-highest: #44474c; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #ecf0f9; --md-sys-color-outline-variant: #bfc3cb; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; }
@media (prefers-color-scheme: dark) { :root[data-palette="blue"][data-contrast="high"]:not([data-mode="light"]) { --md-sys-color-primary: #e8f0ff; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #9dc6f9; --md-sys-color-on-primary-container: #000c1b; --md-sys-color-inverse-primary: #1b4a76; --md-sys-color-secondary: #e8f0ff; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #b7c4d7; --md-sys-color-on-secondary-container: #010c1a; --md-sys-color-tertiary: #fbebff; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #d3bae0; --md-sys-color-on-tertiary-container: #140420; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #111418; --md-sys-color-on-background: #e1e2e8; --md-sys-color-surface: #111418; --md-sys-color-surface-dim: #111418; --md-sys-color-surface-bright: #4d5055; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #1d2024; --md-sys-color-surface-container: #2e3135; --md-sys-color-surface-container-high: #393c40; --md-sys-color-surface-container-highest: #44474c; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43474e; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #e1e2e8; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #ecf0f9; --md-sys-color-outline-variant: #bfc3cb; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a0cafd; --md-sys-color-success: #82d996; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #005226; --md-sys-color-on-success-container: #9ef6b0; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } }
/* green (seed #386A20) */ /* green (seed #386A20) */
:root[data-palette="green"] { --md-sys-color-primary: #446732; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #c5efab; --md-sys-color-on-primary-container: #2d4f1c; --md-sys-color-inverse-primary: #a9d291; --md-sys-color-secondary: #55624c; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d8e7cb; --md-sys-color-on-secondary-container: #3e4a35; --md-sys-color-tertiary: #386666; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #bbebec; --md-sys-color-on-tertiary-container: #1e4e4f; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #f8faf0; --md-sys-color-on-background: #191d16; --md-sys-color-surface: #f8faf0; --md-sys-color-surface-dim: #d9dbd1; --md-sys-color-surface-bright: #f8faf0; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f2f5ea; --md-sys-color-surface-container: #edefe5; --md-sys-color-surface-container-high: #e7e9df; --md-sys-color-surface-container-highest: #e1e4d9; --md-sys-color-on-surface: #191d16; --md-sys-color-surface-variant: #dfe4d7; --md-sys-color-on-surface-variant: #43483e; --md-sys-color-inverse-surface: #2e312b; --md-sys-color-inverse-on-surface: #f0f2e7; --md-sys-color-outline: #74796d; --md-sys-color-outline-variant: #c3c8bb; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #446732; --md-sys-color-success: #386a1f; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #b8f397; --md-sys-color-on-success-container: #072100; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; } :root[data-palette="green"] { --md-sys-color-primary: #446732; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #c5efab; --md-sys-color-on-primary-container: #2d4f1c; --md-sys-color-inverse-primary: #a9d291; --md-sys-color-secondary: #55624c; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #d8e7cb; --md-sys-color-on-secondary-container: #3e4a35; --md-sys-color-tertiary: #386666; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #bbebec; --md-sys-color-on-tertiary-container: #1e4e4f; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #f8faf0; --md-sys-color-on-background: #191d16; --md-sys-color-surface: #f8faf0; --md-sys-color-surface-dim: #d9dbd1; --md-sys-color-surface-bright: #f8faf0; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f2f5ea; --md-sys-color-surface-container: #edefe5; --md-sys-color-surface-container-high: #e7e9df; --md-sys-color-surface-container-highest: #e1e4d9; --md-sys-color-on-surface: #191d16; --md-sys-color-surface-variant: #dfe4d7; --md-sys-color-on-surface-variant: #43483e; --md-sys-color-inverse-surface: #2e312b; --md-sys-color-inverse-on-surface: #f0f2e7; --md-sys-color-outline: #74796d; --md-sys-color-outline-variant: #c3c8bb; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #446732; --md-sys-color-success: #386a1f; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #b8f397; --md-sys-color-on-success-container: #072100; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; }
:root[data-palette="green"][data-mode="dark"] { --md-sys-color-primary: #a9d291; --md-sys-color-on-primary: #173807; --md-sys-color-primary-container: #2d4f1c; --md-sys-color-on-primary-container: #c5efab; --md-sys-color-inverse-primary: #446732; --md-sys-color-secondary: #bdcbb0; --md-sys-color-on-secondary: #283420; --md-sys-color-secondary-container: #3e4a35; --md-sys-color-on-secondary-container: #d8e7cb; --md-sys-color-tertiary: #a0cfd0; --md-sys-color-on-tertiary: #003738; --md-sys-color-tertiary-container: #1e4e4f; --md-sys-color-on-tertiary-container: #bbebec; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #373a33; --md-sys-color-surface-container-lowest: #0c0f0a; --md-sys-color-surface-container-low: #191d16; --md-sys-color-surface-container: #1d211a; --md-sys-color-surface-container-high: #282b24; --md-sys-color-surface-container-highest: #32362f; --md-sys-color-on-surface: #e1e4d9; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #c3c8bb; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #2e312b; --md-sys-color-outline: #8d9286; --md-sys-color-outline-variant: #43483e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } :root[data-palette="green"][data-mode="dark"] { --md-sys-color-primary: #a9d291; --md-sys-color-on-primary: #173807; --md-sys-color-primary-container: #2d4f1c; --md-sys-color-on-primary-container: #c5efab; --md-sys-color-inverse-primary: #446732; --md-sys-color-secondary: #bdcbb0; --md-sys-color-on-secondary: #283420; --md-sys-color-secondary-container: #3e4a35; --md-sys-color-on-secondary-container: #d8e7cb; --md-sys-color-tertiary: #a0cfd0; --md-sys-color-on-tertiary: #003738; --md-sys-color-tertiary-container: #1e4e4f; --md-sys-color-on-tertiary-container: #bbebec; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #373a33; --md-sys-color-surface-container-lowest: #0c0f0a; --md-sys-color-surface-container-low: #191d16; --md-sys-color-surface-container: #1d211a; --md-sys-color-surface-container-high: #282b24; --md-sys-color-surface-container-highest: #32362f; --md-sys-color-on-surface: #e1e4d9; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #c3c8bb; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #2e312b; --md-sys-color-outline: #8d9286; --md-sys-color-outline-variant: #43483e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; }
@media (prefers-color-scheme: dark) { :root[data-palette="green"]:not([data-mode="light"]) { --md-sys-color-primary: #a9d291; --md-sys-color-on-primary: #173807; --md-sys-color-primary-container: #2d4f1c; --md-sys-color-on-primary-container: #c5efab; --md-sys-color-inverse-primary: #446732; --md-sys-color-secondary: #bdcbb0; --md-sys-color-on-secondary: #283420; --md-sys-color-secondary-container: #3e4a35; --md-sys-color-on-secondary-container: #d8e7cb; --md-sys-color-tertiary: #a0cfd0; --md-sys-color-on-tertiary: #003738; --md-sys-color-tertiary-container: #1e4e4f; --md-sys-color-on-tertiary-container: #bbebec; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #373a33; --md-sys-color-surface-container-lowest: #0c0f0a; --md-sys-color-surface-container-low: #191d16; --md-sys-color-surface-container: #1d211a; --md-sys-color-surface-container-high: #282b24; --md-sys-color-surface-container-highest: #32362f; --md-sys-color-on-surface: #e1e4d9; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #c3c8bb; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #2e312b; --md-sys-color-outline: #8d9286; --md-sys-color-outline-variant: #43483e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } } @media (prefers-color-scheme: dark) { :root[data-palette="green"]:not([data-mode="light"]) { --md-sys-color-primary: #a9d291; --md-sys-color-on-primary: #173807; --md-sys-color-primary-container: #2d4f1c; --md-sys-color-on-primary-container: #c5efab; --md-sys-color-inverse-primary: #446732; --md-sys-color-secondary: #bdcbb0; --md-sys-color-on-secondary: #283420; --md-sys-color-secondary-container: #3e4a35; --md-sys-color-on-secondary-container: #d8e7cb; --md-sys-color-tertiary: #a0cfd0; --md-sys-color-on-tertiary: #003738; --md-sys-color-tertiary-container: #1e4e4f; --md-sys-color-on-tertiary-container: #bbebec; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #373a33; --md-sys-color-surface-container-lowest: #0c0f0a; --md-sys-color-surface-container-low: #191d16; --md-sys-color-surface-container: #1d211a; --md-sys-color-surface-container-high: #282b24; --md-sys-color-surface-container-highest: #32362f; --md-sys-color-on-surface: #e1e4d9; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #c3c8bb; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #2e312b; --md-sys-color-outline: #8d9286; --md-sys-color-outline-variant: #43483e; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } }
:root[data-palette="green"][data-contrast="medium"] { --md-sys-color-primary: #1d3e0d; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #52773f; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #a9d291; --md-sys-color-secondary: #2d3a26; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #64715a; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #073d3e; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #477575; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #740006; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #cf2c27; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #f8faf0; --md-sys-color-on-background: #191d16; --md-sys-color-surface: #f8faf0; --md-sys-color-surface-dim: #c5c8be; --md-sys-color-surface-bright: #f8faf0; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f2f5ea; --md-sys-color-surface-container: #e7e9df; --md-sys-color-surface-container-high: #dbded4; --md-sys-color-surface-container-highest: #d0d3c9; --md-sys-color-on-surface: #0f120c; --md-sys-color-surface-variant: #dfe4d7; --md-sys-color-on-surface-variant: #33382e; --md-sys-color-inverse-surface: #2e312b; --md-sys-color-inverse-on-surface: #f0f2e7; --md-sys-color-outline: #4f544a; --md-sys-color-outline-variant: #6a6f64; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #446732; --md-sys-color-success: #386a1f; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #b8f397; --md-sys-color-on-success-container: #072100; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; }
:root[data-palette="green"][data-contrast="medium"][data-mode="dark"] { --md-sys-color-primary: #bfe8a5; --md-sys-color-on-primary: #0b2c00; --md-sys-color-primary-container: #759b60; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #2e501e; --md-sys-color-secondary: #d2e1c5; --md-sys-color-on-secondary: #1d2916; --md-sys-color-secondary-container: #87957c; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #b5e5e6; --md-sys-color-on-tertiary: #002b2c; --md-sys-color-tertiary-container: #6b9999; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #42463e; --md-sys-color-surface-container-lowest: #060804; --md-sys-color-surface-container-low: #1b1f18; --md-sys-color-surface-container: #252922; --md-sys-color-surface-container-high: #30342d; --md-sys-color-surface-container-highest: #3b3f38; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #d9ded1; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #282b24; --md-sys-color-outline: #afb4a7; --md-sys-color-outline-variant: #8d9286; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; }
@media (prefers-color-scheme: dark) { :root[data-palette="green"][data-contrast="medium"]:not([data-mode="light"]) { --md-sys-color-primary: #bfe8a5; --md-sys-color-on-primary: #0b2c00; --md-sys-color-primary-container: #759b60; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #2e501e; --md-sys-color-secondary: #d2e1c5; --md-sys-color-on-secondary: #1d2916; --md-sys-color-secondary-container: #87957c; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #b5e5e6; --md-sys-color-on-tertiary: #002b2c; --md-sys-color-tertiary-container: #6b9999; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #42463e; --md-sys-color-surface-container-lowest: #060804; --md-sys-color-surface-container-low: #1b1f18; --md-sys-color-surface-container: #252922; --md-sys-color-surface-container-high: #30342d; --md-sys-color-surface-container-highest: #3b3f38; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #d9ded1; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #282b24; --md-sys-color-outline: #afb4a7; --md-sys-color-outline-variant: #8d9286; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } }
:root[data-palette="green"][data-contrast="high"] { --md-sys-color-primary: #123304; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #2f511f; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #a9d291; --md-sys-color-secondary: #232f1c; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #404d38; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #003233; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #215051; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #600004; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #98000a; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #f8faf0; --md-sys-color-on-background: #191d16; --md-sys-color-surface: #f8faf0; --md-sys-color-surface-dim: #b7bab0; --md-sys-color-surface-bright: #f8faf0; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f0f2e7; --md-sys-color-surface-container: #e1e4d9; --md-sys-color-surface-container-high: #d3d5cb; --md-sys-color-surface-container-highest: #c5c8be; --md-sys-color-on-surface: #000000; --md-sys-color-surface-variant: #dfe4d7; --md-sys-color-on-surface-variant: #000000; --md-sys-color-inverse-surface: #2e312b; --md-sys-color-inverse-on-surface: #ffffff; --md-sys-color-outline: #292e25; --md-sys-color-outline-variant: #464b41; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #446732; --md-sys-color-success: #386a1f; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #b8f397; --md-sys-color-on-success-container: #072100; --md-sys-color-warning: #6f5d00; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffe16a; --md-sys-color-on-warning-container: #221b00; }
:root[data-palette="green"][data-contrast="high"][data-mode="dark"] { --md-sys-color-primary: #d2fcb8; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #a6ce8e; --md-sys-color-on-primary-container: #020e00; --md-sys-color-inverse-primary: #2e501e; --md-sys-color-secondary: #e6f5d8; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #b9c7ac; --md-sys-color-on-secondary-container: #040e02; --md-sys-color-tertiary: #c9f9f9; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #9ccbcc; --md-sys-color-on-tertiary-container: #000e0e; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #4e514a; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #1d211a; --md-sys-color-surface-container: #2e312b; --md-sys-color-surface-container-high: #393c35; --md-sys-color-surface-container-highest: #444840; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #edf2e4; --md-sys-color-outline-variant: #bfc4b7; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; }
@media (prefers-color-scheme: dark) { :root[data-palette="green"][data-contrast="high"]:not([data-mode="light"]) { --md-sys-color-primary: #d2fcb8; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #a6ce8e; --md-sys-color-on-primary-container: #020e00; --md-sys-color-inverse-primary: #2e501e; --md-sys-color-secondary: #e6f5d8; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #b9c7ac; --md-sys-color-on-secondary-container: #040e02; --md-sys-color-tertiary: #c9f9f9; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #9ccbcc; --md-sys-color-on-tertiary-container: #000e0e; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #11140f; --md-sys-color-on-background: #e1e4d9; --md-sys-color-surface: #11140f; --md-sys-color-surface-dim: #11140f; --md-sys-color-surface-bright: #4e514a; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #1d211a; --md-sys-color-surface-container: #2e312b; --md-sys-color-surface-container-high: #393c35; --md-sys-color-surface-container-highest: #444840; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #43483e; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #e1e4d9; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #edf2e4; --md-sys-color-outline-variant: #bfc4b7; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #a9d291; --md-sys-color-success: #9cd67e; --md-sys-color-on-success: #113800; --md-sys-color-success-container: #205107; --md-sys-color-on-success-container: #b8f397; --md-sys-color-warning: #e2c54a; --md-sys-color-on-warning: #3a3000; --md-sys-color-warning-container: #544600; --md-sys-color-on-warning-container: #ffe16a; } }
/* orange (seed #8B5000) */ /* orange (seed #8B5000) */
:root[data-palette="orange"] { --md-sys-color-primary: #865319; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #ffdcbe; --md-sys-color-on-primary-container: #6a3c01; --md-sys-color-inverse-primary: #fdb975; --md-sys-color-secondary: #735a42; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #ffdcbe; --md-sys-color-on-secondary-container: #59422d; --md-sys-color-tertiary: #586339; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #dce8b4; --md-sys-color-on-tertiary-container: #414b24; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #fff8f5; --md-sys-color-on-background: #211a14; --md-sys-color-surface: #fff8f5; --md-sys-color-surface-dim: #e6d7cd; --md-sys-color-surface-bright: #fff8f5; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #fff1e7; --md-sys-color-surface-container: #faebe0; --md-sys-color-surface-container-high: #f4e5db; --md-sys-color-surface-container-highest: #efe0d5; --md-sys-color-on-surface: #211a14; --md-sys-color-surface-variant: #f2dfd1; --md-sys-color-on-surface-variant: #51453a; --md-sys-color-inverse-surface: #372f28; --md-sys-color-inverse-on-surface: #fdeee3; --md-sys-color-outline: #837468; --md-sys-color-outline-variant: #d5c3b5; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #865319; --md-sys-color-success: #516600; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #d3ee80; --md-sys-color-on-success-container: #161e00; --md-sys-color-warning: #835500; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddb4; --md-sys-color-on-warning-container: #291800; } :root[data-palette="orange"] { --md-sys-color-primary: #865319; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #ffdcbe; --md-sys-color-on-primary-container: #6a3c01; --md-sys-color-inverse-primary: #fdb975; --md-sys-color-secondary: #735a42; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #ffdcbe; --md-sys-color-on-secondary-container: #59422d; --md-sys-color-tertiary: #586339; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #dce8b4; --md-sys-color-on-tertiary-container: #414b24; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #fff8f5; --md-sys-color-on-background: #211a14; --md-sys-color-surface: #fff8f5; --md-sys-color-surface-dim: #e6d7cd; --md-sys-color-surface-bright: #fff8f5; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #fff1e7; --md-sys-color-surface-container: #faebe0; --md-sys-color-surface-container-high: #f4e5db; --md-sys-color-surface-container-highest: #efe0d5; --md-sys-color-on-surface: #211a14; --md-sys-color-surface-variant: #f2dfd1; --md-sys-color-on-surface-variant: #51453a; --md-sys-color-inverse-surface: #372f28; --md-sys-color-inverse-on-surface: #fdeee3; --md-sys-color-outline: #837468; --md-sys-color-outline-variant: #d5c3b5; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #865319; --md-sys-color-success: #516600; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #d3ee80; --md-sys-color-on-success-container: #161e00; --md-sys-color-warning: #835500; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddb4; --md-sys-color-on-warning-container: #291800; }
:root[data-palette="orange"][data-mode="dark"] { --md-sys-color-primary: #fdb975; --md-sys-color-on-primary: #4a2800; --md-sys-color-primary-container: #6a3c01; --md-sys-color-on-primary-container: #ffdcbe; --md-sys-color-inverse-primary: #865319; --md-sys-color-secondary: #e1c1a4; --md-sys-color-on-secondary: #402c18; --md-sys-color-secondary-container: #59422d; --md-sys-color-on-secondary-container: #ffdcbe; --md-sys-color-tertiary: #c0cc9a; --md-sys-color-on-tertiary: #2b3410; --md-sys-color-tertiary-container: #414b24; --md-sys-color-on-tertiary-container: #dce8b4; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #403830; --md-sys-color-surface-container-lowest: #130d07; --md-sys-color-surface-container-low: #211a14; --md-sys-color-surface-container: #261e18; --md-sys-color-surface-container-high: #302822; --md-sys-color-surface-container-highest: #3c332c; --md-sys-color-on-surface: #efe0d5; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #d5c3b5; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #372f28; --md-sys-color-outline: #9e8e81; --md-sys-color-outline-variant: #51453a; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; } :root[data-palette="orange"][data-mode="dark"] { --md-sys-color-primary: #fdb975; --md-sys-color-on-primary: #4a2800; --md-sys-color-primary-container: #6a3c01; --md-sys-color-on-primary-container: #ffdcbe; --md-sys-color-inverse-primary: #865319; --md-sys-color-secondary: #e1c1a4; --md-sys-color-on-secondary: #402c18; --md-sys-color-secondary-container: #59422d; --md-sys-color-on-secondary-container: #ffdcbe; --md-sys-color-tertiary: #c0cc9a; --md-sys-color-on-tertiary: #2b3410; --md-sys-color-tertiary-container: #414b24; --md-sys-color-on-tertiary-container: #dce8b4; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #403830; --md-sys-color-surface-container-lowest: #130d07; --md-sys-color-surface-container-low: #211a14; --md-sys-color-surface-container: #261e18; --md-sys-color-surface-container-high: #302822; --md-sys-color-surface-container-highest: #3c332c; --md-sys-color-on-surface: #efe0d5; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #d5c3b5; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #372f28; --md-sys-color-outline: #9e8e81; --md-sys-color-outline-variant: #51453a; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; }
@media (prefers-color-scheme: dark) { :root[data-palette="orange"]:not([data-mode="light"]) { --md-sys-color-primary: #fdb975; --md-sys-color-on-primary: #4a2800; --md-sys-color-primary-container: #6a3c01; --md-sys-color-on-primary-container: #ffdcbe; --md-sys-color-inverse-primary: #865319; --md-sys-color-secondary: #e1c1a4; --md-sys-color-on-secondary: #402c18; --md-sys-color-secondary-container: #59422d; --md-sys-color-on-secondary-container: #ffdcbe; --md-sys-color-tertiary: #c0cc9a; --md-sys-color-on-tertiary: #2b3410; --md-sys-color-tertiary-container: #414b24; --md-sys-color-on-tertiary-container: #dce8b4; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #403830; --md-sys-color-surface-container-lowest: #130d07; --md-sys-color-surface-container-low: #211a14; --md-sys-color-surface-container: #261e18; --md-sys-color-surface-container-high: #302822; --md-sys-color-surface-container-highest: #3c332c; --md-sys-color-on-surface: #efe0d5; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #d5c3b5; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #372f28; --md-sys-color-outline: #9e8e81; --md-sys-color-outline-variant: #51453a; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; } } @media (prefers-color-scheme: dark) { :root[data-palette="orange"]:not([data-mode="light"]) { --md-sys-color-primary: #fdb975; --md-sys-color-on-primary: #4a2800; --md-sys-color-primary-container: #6a3c01; --md-sys-color-on-primary-container: #ffdcbe; --md-sys-color-inverse-primary: #865319; --md-sys-color-secondary: #e1c1a4; --md-sys-color-on-secondary: #402c18; --md-sys-color-secondary-container: #59422d; --md-sys-color-on-secondary-container: #ffdcbe; --md-sys-color-tertiary: #c0cc9a; --md-sys-color-on-tertiary: #2b3410; --md-sys-color-tertiary-container: #414b24; --md-sys-color-on-tertiary-container: #dce8b4; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #403830; --md-sys-color-surface-container-lowest: #130d07; --md-sys-color-surface-container-low: #211a14; --md-sys-color-surface-container: #261e18; --md-sys-color-surface-container-high: #302822; --md-sys-color-surface-container-highest: #3c332c; --md-sys-color-on-surface: #efe0d5; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #d5c3b5; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #372f28; --md-sys-color-outline: #9e8e81; --md-sys-color-outline-variant: #51453a; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; } }
:root[data-palette="orange"][data-contrast="medium"] { --md-sys-color-primary: #522d00; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #976126; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #fdb975; --md-sys-color-secondary: #47321d; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #826850; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #313a15; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #677247; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #740006; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #cf2c27; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #fff8f5; --md-sys-color-on-background: #211a14; --md-sys-color-surface: #fff8f5; --md-sys-color-surface-dim: #d2c4ba; --md-sys-color-surface-bright: #fff8f5; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #fff1e7; --md-sys-color-surface-container: #f4e5db; --md-sys-color-surface-container-high: #e9dad0; --md-sys-color-surface-container-highest: #ddcfc5; --md-sys-color-on-surface: #16100a; --md-sys-color-surface-variant: #f2dfd1; --md-sys-color-on-surface-variant: #3f342a; --md-sys-color-inverse-surface: #372f28; --md-sys-color-inverse-on-surface: #fdeee3; --md-sys-color-outline: #5d5045; --md-sys-color-outline-variant: #796a5f; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #865319; --md-sys-color-success: #516600; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #d3ee80; --md-sys-color-on-success-container: #161e00; --md-sys-color-warning: #835500; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddb4; --md-sys-color-on-warning-container: #291800; }
:root[data-palette="orange"][data-contrast="medium"][data-mode="dark"] { --md-sys-color-primary: #ffd5af; --md-sys-color-on-primary: #3b1f00; --md-sys-color-primary-container: #c08446; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #6b3d02; --md-sys-color-secondary: #f8d6b9; --md-sys-color-on-secondary: #34220e; --md-sys-color-secondary-container: #a88b71; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #d6e2ae; --md-sys-color-on-tertiary: #202906; --md-sys-color-tertiary-container: #8b9668; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #4c433b; --md-sys-color-surface-container-lowest: #0c0603; --md-sys-color-surface-container-low: #241c16; --md-sys-color-surface-container: #2e2620; --md-sys-color-surface-container-high: #39312a; --md-sys-color-surface-container-highest: #453c34; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #ecd9cb; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #312922; --md-sys-color-outline: #c0afa1; --md-sys-color-outline-variant: #9d8d81; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; }
@media (prefers-color-scheme: dark) { :root[data-palette="orange"][data-contrast="medium"]:not([data-mode="light"]) { --md-sys-color-primary: #ffd5af; --md-sys-color-on-primary: #3b1f00; --md-sys-color-primary-container: #c08446; --md-sys-color-on-primary-container: #000000; --md-sys-color-inverse-primary: #6b3d02; --md-sys-color-secondary: #f8d6b9; --md-sys-color-on-secondary: #34220e; --md-sys-color-secondary-container: #a88b71; --md-sys-color-on-secondary-container: #000000; --md-sys-color-tertiary: #d6e2ae; --md-sys-color-on-tertiary: #202906; --md-sys-color-tertiary-container: #8b9668; --md-sys-color-on-tertiary-container: #000000; --md-sys-color-error: #ffd2cc; --md-sys-color-on-error: #540003; --md-sys-color-error-container: #ff5449; --md-sys-color-on-error-container: #000000; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #4c433b; --md-sys-color-surface-container-lowest: #0c0603; --md-sys-color-surface-container-low: #241c16; --md-sys-color-surface-container: #2e2620; --md-sys-color-surface-container-high: #39312a; --md-sys-color-surface-container-highest: #453c34; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #ecd9cb; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #312922; --md-sys-color-outline: #c0afa1; --md-sys-color-outline-variant: #9d8d81; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; } }
:root[data-palette="orange"][data-contrast="high"] { --md-sys-color-primary: #442400; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #6c3e03; --md-sys-color-on-primary-container: #ffffff; --md-sys-color-inverse-primary: #fdb975; --md-sys-color-secondary: #3c2814; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #5c452f; --md-sys-color-on-secondary-container: #ffffff; --md-sys-color-tertiary: #272f0c; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #434d26; --md-sys-color-on-tertiary-container: #ffffff; --md-sys-color-error: #600004; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #98000a; --md-sys-color-on-error-container: #ffffff; --md-sys-color-background: #fff8f5; --md-sys-color-on-background: #211a14; --md-sys-color-surface: #fff8f5; --md-sys-color-surface-dim: #c4b6ac; --md-sys-color-surface-bright: #fff8f5; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #fdeee3; --md-sys-color-surface-container: #efe0d5; --md-sys-color-surface-container-high: #e0d2c7; --md-sys-color-surface-container-highest: #d2c4ba; --md-sys-color-on-surface: #000000; --md-sys-color-surface-variant: #f2dfd1; --md-sys-color-on-surface-variant: #000000; --md-sys-color-inverse-surface: #372f28; --md-sys-color-inverse-on-surface: #ffffff; --md-sys-color-outline: #352a21; --md-sys-color-outline-variant: #53473c; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #865319; --md-sys-color-success: #516600; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #d3ee80; --md-sys-color-on-success-container: #161e00; --md-sys-color-warning: #835500; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #ffddb4; --md-sys-color-on-warning-container: #291800; }
:root[data-palette="orange"][data-contrast="high"][data-mode="dark"] { --md-sys-color-primary: #ffeddf; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #f9b572; --md-sys-color-on-primary-container: #160800; --md-sys-color-inverse-primary: #6b3d02; --md-sys-color-secondary: #ffeddf; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #ddbda0; --md-sys-color-on-secondary-container: #160800; --md-sys-color-tertiary: #eaf6c0; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #bcc896; --md-sys-color-on-tertiary-container: #080d00; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #584e46; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #261e18; --md-sys-color-surface-container: #372f28; --md-sys-color-surface-container-high: #433a32; --md-sys-color-surface-container-highest: #4e453d; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #ffeddf; --md-sys-color-outline-variant: #d1bfb2; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; }
@media (prefers-color-scheme: dark) { :root[data-palette="orange"][data-contrast="high"]:not([data-mode="light"]) { --md-sys-color-primary: #ffeddf; --md-sys-color-on-primary: #000000; --md-sys-color-primary-container: #f9b572; --md-sys-color-on-primary-container: #160800; --md-sys-color-inverse-primary: #6b3d02; --md-sys-color-secondary: #ffeddf; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #ddbda0; --md-sys-color-on-secondary-container: #160800; --md-sys-color-tertiary: #eaf6c0; --md-sys-color-on-tertiary: #000000; --md-sys-color-tertiary-container: #bcc896; --md-sys-color-on-tertiary-container: #080d00; --md-sys-color-error: #ffece9; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #ffaea4; --md-sys-color-on-error-container: #220001; --md-sys-color-background: #19120c; --md-sys-color-on-background: #efe0d5; --md-sys-color-surface: #19120c; --md-sys-color-surface-dim: #19120c; --md-sys-color-surface-bright: #584e46; --md-sys-color-surface-container-lowest: #000000; --md-sys-color-surface-container-low: #261e18; --md-sys-color-surface-container: #372f28; --md-sys-color-surface-container-high: #433a32; --md-sys-color-surface-container-highest: #4e453d; --md-sys-color-on-surface: #ffffff; --md-sys-color-surface-variant: #51453a; --md-sys-color-on-surface-variant: #ffffff; --md-sys-color-inverse-surface: #efe0d5; --md-sys-color-inverse-on-surface: #000000; --md-sys-color-outline: #ffeddf; --md-sys-color-outline-variant: #d1bfb2; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; --md-sys-color-surface-tint: #fdb975; --md-sys-color-success: #b7d167; --md-sys-color-on-success: #293500; --md-sys-color-success-container: #3c4d00; --md-sys-color-on-success-container: #d3ee80; --md-sys-color-warning: #ffb955; --md-sys-color-on-warning: #452b00; --md-sys-color-warning-container: #633f00; --md-sys-color-on-warning-container: #ffddb4; } }
tools/palettes/build_palettes.mjs
+18 -31
View File
@@ -1,64 +1,51 @@
// Generates tonalmine/stylesheets/palettes.css: one M3 color scheme per seed color, // Generates tonalmine/stylesheets/palettes.css: one M3 color scheme per seed color,
// in light and dark. Run: cd tools/palettes && npm install && npm run build // in light and dark. Run: cd tools/palettes && npm install && npm run build
// The same build bundles scheme.mjs into tonalmine/javascripts/scheme.js for the custom color picker
// (bundled with esbuild because material-color-utilities 0.4.0 has extensionless ESM imports). // (bundled with esbuild because material-color-utilities 0.4.0 has extensionless ESM imports).
import { writeFileSync, readFileSync } from 'node:fs'; import { writeFileSync, readFileSync } from 'node:fs';
import { resolve } from 'node:path'; import { resolve } from 'node:path';
import { Hct, SchemeTonalSpot, MaterialDynamicColors as C, hexFromArgb, argbFromHex, customColor } from '@material/material-color-utilities'; import { ROLES, kebab, paletteCss } from './scheme.mjs';
// The first palette is the default. Ids must match PALETTES in tonalmine/javascripts/theme.js. // The first palette is the default. Ids must match PALETTES in tonalmine/javascripts/theme.js.
// An optional third entry is a Material Theme Builder export folder (light.css, dark.css and the
// -mc/-hc contrast variants):
// its roles are copied as-is instead of generated, and the seed only drives success/warning.
const PALETTES = [ const PALETTES = [
['purple', '#6750A4'], ['purple', '#6750A4'],
['blue', '#0061A4'], ['blue', '#0061A4'],
['teal', '#006A6A'],
['green', '#386A20'], ['green', '#386A20'],
['orange', '#8B5000'], ['orange', '#8B5000'],
]; ];
const CUSTOM = [['success', '#386A20'], ['warning', '#7C5800']];
const ROLES = ['primary', 'onPrimary', 'primaryContainer', 'onPrimaryContainer', 'inversePrimary',
'secondary', 'onSecondary', 'secondaryContainer', 'onSecondaryContainer',
'tertiary', 'onTertiary', 'tertiaryContainer', 'onTertiaryContainer',
'error', 'onError', 'errorContainer', 'onErrorContainer',
'background', 'onBackground', 'surface', 'surfaceDim', 'surfaceBright',
'surfaceContainerLowest', 'surfaceContainerLow', 'surfaceContainer', 'surfaceContainerHigh', 'surfaceContainerHighest',
'onSurface', 'surfaceVariant', 'onSurfaceVariant', 'inverseSurface', 'inverseOnSurface',
'outline', 'outlineVariant', 'shadow', 'scrim', 'surfaceTint'];
const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()); // Reads the roles from a Theme Builder export; fails if one is missing.
const hex = (argb) => hexFromArgb(argb); function exported(dir, dark, contrast) {
const file = `${dir}/${dark ? 'dark' : 'light'}${{ medium: '-mc', high: '-hc' }[contrast] || ''}.css`;
function roles(seedHex, dark) { const vars = Object.fromEntries([...readFileSync(file, 'utf8').matchAll(/--md-sys-color-([a-z-]+):\s*([^;]+);/g)].map((m) => [m[1], m[2].trim()]));
const seed = argbFromHex(seedHex); return ROLES.map((r) => {
const scheme = new SchemeTonalSpot(Hct.fromInt(seed), dark, 0); if (!vars[kebab(r)]) { console.error(`${file} is missing --md-sys-color-${kebab(r)}`); process.exit(1); }
const lines = ROLES.map((r) => `--md-sys-color-${kebab(r)}: ${hex(C[r].getArgb(scheme))};`); return `--md-sys-color-${kebab(r)}: ${vars[kebab(r)]};`;
for (const [name, value] of CUSTOM) { });
const c = customColor(seed, { name, value: argbFromHex(value), blend: true })[dark ? 'dark' : 'light'];
lines.push(`--md-sys-color-${name}: ${hex(c.color)};`, `--md-sys-color-on-${name}: ${hex(c.onColor)};`,
`--md-sys-color-${name}-container: ${hex(c.colorContainer)};`, `--md-sys-color-on-${name}-container: ${hex(c.onColorContainer)};`);
}
return lines.join(' ');
} }
// Specificity: the default palette uses bare :root, the others add [data-palette], and every dark // Specificity: the default palette uses bare :root, the others add [data-palette], and every dark
// rule adds one more attribute, so "palette + mode" always beats "palette" and the default. // rule adds one more attribute, so "palette + mode" always beats "palette" and the default.
let css = `/* let css = `/*
* Generated by tools/palettes/build_palettes.mjs; do not edit by hand. * Generated by tools/palettes/build_palettes.mjs; do not edit by hand.
* M3 color roles (TonalSpot, contrast 0) per palette, light and dark. * M3 color roles (TonalSpot) per palette, light and dark, at contrast 0, 0.5 and 1.
* <html data-palette="..."> picks the palette, <html data-mode="light|dark"> forces a mode; * <html data-palette="..."> picks the palette, <html data-mode="light|dark"> forces a mode;
* without data-mode the OS setting (prefers-color-scheme) decides. * without data-mode the OS setting (prefers-color-scheme) decides.
* <html data-contrast="medium|high"> picks the contrast level; without it, standard.
*/ */
:root { color-scheme: light; } :root { color-scheme: light; }
:root[data-mode="dark"] { color-scheme: dark; } :root[data-mode="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { color-scheme: dark; } } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { color-scheme: dark; } }
`; `;
PALETTES.forEach(([id, seed], i) => { PALETTES.forEach(([id, seed, dir], i) => {
const sel = i === 0 ? ':root' : `:root[data-palette="${id}"]`; const sel = i === 0 ? ':root' : `:root[data-palette="${id}"]`;
css += ` css += `
/* ${id} (seed ${seed}) */ /* ${id} (${dir ? `export ${dir}, ` : ''}seed ${seed}) */
${sel} { ${roles(seed, false)} } ` + paletteCss(sel, seed, dir && ((dark, contrast) => exported(dir, dark, contrast)));
${sel}[data-mode="dark"] { ${roles(seed, true)} }
@media (prefers-color-scheme: dark) { ${sel}:not([data-mode="light"]) { ${roles(seed, true)} } }
`;
}); });
// Paths are relative to tools/palettes (npm runs scripts there); the bundle itself lives in .build/. // Paths are relative to tools/palettes (npm runs scripts there); the bundle itself lives in .build/.
tools/palettes/package.json
+1 -1
View File
@@ -3,7 +3,7 @@
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
"build": "esbuild build_palettes.mjs --bundle --platform=node --format=esm --outfile=.build/palettes.mjs --log-level=warning && node .build/palettes.mjs" "build": "esbuild scheme.mjs --bundle --minify --format=iife --global-name=tonalmineScheme --outfile=../../tonalmine/javascripts/scheme.js --log-level=warning && esbuild build_palettes.mjs --bundle --platform=node --format=esm --outfile=.build/palettes.mjs --log-level=warning && node .build/palettes.mjs"
}, },
"devDependencies": { "devDependencies": {
"@material/material-color-utilities": "0.4.0", "@material/material-color-utilities": "0.4.0",
tools/palettes/scheme.mjs
+47
View File
@@ -0,0 +1,47 @@
// M3 color roles for one palette, shared by build_palettes.mjs (palettes.css) and the browser
// (bundled as tonalmine/javascripts/scheme.js, global tonalmineScheme, for the custom color picker).
import { Hct, SchemeTonalSpot, MaterialDynamicColors as C, hexFromArgb, argbFromHex, customColor } from '@material/material-color-utilities';
const CUSTOM = [['success', '#386A20'], ['warning', '#7C5800']];
export const ROLES = ['primary', 'onPrimary', 'primaryContainer', 'onPrimaryContainer', 'inversePrimary',
'secondary', 'onSecondary', 'secondaryContainer', 'onSecondaryContainer',
'tertiary', 'onTertiary', 'tertiaryContainer', 'onTertiaryContainer',
'error', 'onError', 'errorContainer', 'onErrorContainer',
'background', 'onBackground', 'surface', 'surfaceDim', 'surfaceBright',
'surfaceContainerLowest', 'surfaceContainerLow', 'surfaceContainer', 'surfaceContainerHigh', 'surfaceContainerHighest',
'onSurface', 'surfaceVariant', 'onSurfaceVariant', 'inverseSurface', 'inverseOnSurface',
'outline', 'outlineVariant', 'shadow', 'scrim', 'surfaceTint'];
export const kebab = (s) => s.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
const hex = (argb) => hexFromArgb(argb);
// Contrast levels as Material Theme Builder has them; '' is standard (no data-contrast attribute).
export const CONTRASTS = [['', 0], ['medium', 0.5], ['high', 1]];
// TonalSpot roles plus success/warning; `own` replaces the generated ROLES lines.
// ponytail: success/warning use customColor, which has no contrast level (same tones at every level).
function roles(seedHex, dark, level, own) {
const seed = argbFromHex(seedHex);
const scheme = new SchemeTonalSpot(Hct.fromInt(seed), dark, level);
const lines = own || ROLES.map((r) => `--md-sys-color-${kebab(r)}: ${hex(C[r].getArgb(scheme))};`);
for (const [name, value] of CUSTOM) {
const c = customColor(seed, { name, value: argbFromHex(value), blend: true })[dark ? 'dark' : 'light'];
lines.push(`--md-sys-color-${name}: ${hex(c.color)};`, `--md-sys-color-on-${name}: ${hex(c.onColor)};`,
`--md-sys-color-${name}-container: ${hex(c.colorContainer)};`, `--md-sys-color-on-${name}-container: ${hex(c.onColorContainer)};`);
}
return lines.join(' ');
}
// Light, forced dark and OS dark rules for one palette selector, per contrast level.
// `own(dark, contrast)` may return role lines to use instead of generated ones.
// Each contrast rule adds an attribute, so it beats the same palette's standard rules.
export function paletteCss(sel, seedHex, own) {
return CONTRASTS.map(([id, level]) => {
const s = id ? `${sel}[data-contrast="${id}"]` : sel;
const r = (dark) => roles(seedHex, dark, level, own && own(dark, id));
return `${s} { ${r(false)} }
${s}[data-mode="dark"] { ${r(true)} }
@media (prefers-color-scheme: dark) { ${s}:not([data-mode="light"]) { ${r(true)} } }
`;
}).join('');
}