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
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[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 */
.nm-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-swatches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.nm-swatch {
flex-shrink: 0;
inline-size: 28px;
@@ -548,6 +548,12 @@ html .table-generator td.selected-cell, html .table-generator td:hover { backgro
background: var(--nm-swatch);
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); }
html .flyout-menu .nm-appearance { padding-inline: 16px; }
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.
* 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;
* 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; }
@@ -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[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; } }
: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) */
: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; }
@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; } }
/* teal (seed #006A6A) */
: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; }
: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; }
@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="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; }
: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; }
@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="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; }
: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) */
: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; }
@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) */
: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; }
@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; } }