1058 lines
49 KiB
CSS
1058 lines
49 KiB
CSS
/* Generated from design/hope-palette.v1.json v1.0.0; SHA256 bb76134be477916d776cda4259f45096fc2dcfcf873918b8703a0b716391a350.
|
|
* DO NOT EDIT. python3 scripts/generate_hope_themes.py
|
|
* Set data-palette and data-appearance on <html>; missing/unknown values fall back to Opal/system.
|
|
*/
|
|
|
|
:root {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(255 253 253);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(255 247 250);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(255 242 247);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(48 43 64);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(112 96 116);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(166 66 112);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(166 66 112);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(112 96 116);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(226.01999999999998 218.44 223.95999999999998);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(246.1 228.9 236.2);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(248.37000000000003 231.4832 235.7528);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="opal"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(255 253 253);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(255 247 250);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(255 242 247);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(48 43 64);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(112 96 116);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(166 66 112);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(166 66 112);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(112 96 116);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(226.01999999999998 218.44 223.95999999999998);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(246.1 228.9 236.2);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(248.37000000000003 231.4832 235.7528);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="graphite"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(253 253 254);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(243 244 246);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(237 238 242);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(39 42 51);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(94 98 110);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(80 89 105);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(80 89 105);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(94 98 110);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(214.44 215.72000000000003 218.70000000000002);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(226.70000000000002 228.5 231.9);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(237.32999999999998 228.72320000000002 232.0728);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="ocean"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(252 254 255);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(240 247 251);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(231 242 249);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(35 52 66);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(83 104 120);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(39 101 140);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(39 101 140);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(83 104 120);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(211.29999999999995 219.7 225.1);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(219.89999999999998 232.4 239.9);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(234.57000000000002 231.4832 236.67280000000002);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="sage"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(252 254 252);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(240 246 241);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(231 240 233);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(41 56 45);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(89 107 93);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(60 112 77);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(60 112 77);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(89 107 93);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(212.14 219.39999999999998 213.56);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(222 232.60000000000002 224.6);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(234.57000000000002 230.5632 227.4728);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="lavender"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(254 253 255);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(246 242 252);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(238 232 248);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(52 45 67);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(104 94 123);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(112 82 156);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(112 82 156);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(104 94 123);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(218.84 214.42 226.10000000000002);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(232.60000000000002 226 242.40000000000003);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(240.09 226.8832 237.5928);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-appearance="light"]):not([data-appearance="dark"]) {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(32 24 32);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(48 35 48);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(59 40 54);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(255 242 247);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(203 182 199);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(240 168 200);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(32 24 32);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(240 168 200);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(203 182 199);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(32 24 32);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(76.98 63.98 75.86000000000001);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(67.2 48.30000000000001 63.199999999999996);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(64.56 44.5216 57.93000000000001);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
:root[data-palette="opal"]:not([data-appearance="light"]):not([data-appearance="dark"]) {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(32 24 32);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(48 35 48);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(59 40 54);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(255 242 247);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(203 182 199);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(240 168 200);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(32 24 32);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(240 168 200);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(203 182 199);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(32 24 32);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(76.98 63.98 75.86000000000001);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(67.2 48.30000000000001 63.199999999999996);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(64.56 44.5216 57.93000000000001);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
:root[data-palette="graphite"]:not([data-appearance="light"]):not([data-appearance="dark"]) {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(25 27 32);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(37 40 47);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(48 52 61);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(243 244 247);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(188 193 205);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(191 201 220);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(25 27 32);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(191 201 220);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(188 193 205);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(25 27 32);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(65.84000000000002 68.56 75);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(52.400000000000006 56.1 64.30000000000001);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(54.440000000000005 49.1216 57.01000000000001);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
:root[data-palette="ocean"]:not([data-appearance="light"]):not([data-appearance="dark"]) {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(21 33 43);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(32 49 63);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(40 61 77);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(237 247 255);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(179 203 222);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(151 206 238);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(21 33 43);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(151 206 238);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(179 203 222);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(21 33 43);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(60.7 76.72 89.88000000000001);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(43.900000000000006 64.7 80.50000000000001);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(49.839999999999996 57.40160000000001 71.73);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
:root[data-palette="sage"]:not([data-appearance="light"]):not([data-appearance="dark"]) {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(25 35 28);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(38 52 42);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(48 66 54);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(240 248 241);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(185 207 190);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(165 212 175);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(25 35 28);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(165 212 175);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(185 207 190);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(25 35 28);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(66.28 79.44 69.86);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(50.70000000000001 68 55.3);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(55.36 60.1616 52.410000000000004);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
:root[data-palette="lavender"]:not([data-appearance="light"]):not([data-appearance="dark"]) {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(32 27 41);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(46 39 60);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(59 50 77);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(247 241 255);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(200 186 223);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(207 180 244);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(32 27 41);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(207 180 244);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(200 186 223);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(32 27 41);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(74.14 67.28000000000002 87.3);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(62.1 53.1 78.4);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(62.72 48.2016 68.97);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
}
|
|
|
|
:root[data-appearance="light"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(255 253 253);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(255 247 250);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(255 242 247);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(48 43 64);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(112 96 116);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(166 66 112);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(166 66 112);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(112 96 116);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(226.01999999999998 218.44 223.95999999999998);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(246.1 228.9 236.2);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(248.37000000000003 231.4832 235.7528);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="opal"][data-appearance="light"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(255 253 253);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(255 247 250);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(255 242 247);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(48 43 64);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(112 96 116);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(166 66 112);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(166 66 112);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(112 96 116);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(226.01999999999998 218.44 223.95999999999998);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(246.1 228.9 236.2);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(248.37000000000003 231.4832 235.7528);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="graphite"][data-appearance="light"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(253 253 254);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(243 244 246);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(237 238 242);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(39 42 51);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(94 98 110);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(80 89 105);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(80 89 105);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(94 98 110);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(214.44 215.72000000000003 218.70000000000002);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(226.70000000000002 228.5 231.9);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(237.32999999999998 228.72320000000002 232.0728);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="ocean"][data-appearance="light"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(252 254 255);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(240 247 251);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(231 242 249);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(35 52 66);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(83 104 120);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(39 101 140);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(39 101 140);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(83 104 120);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(211.29999999999995 219.7 225.1);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(219.89999999999998 232.4 239.9);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(234.57000000000002 231.4832 236.67280000000002);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="sage"][data-appearance="light"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(252 254 252);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(240 246 241);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(231 240 233);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(41 56 45);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(89 107 93);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(60 112 77);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(60 112 77);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(89 107 93);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(212.14 219.39999999999998 213.56);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(222 232.60000000000002 224.6);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(234.57000000000002 230.5632 227.4728);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="lavender"][data-appearance="light"] {
|
|
color-scheme: light;
|
|
--hope-primitive-ground: rgb(254 253 255);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(246 242 252);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(238 232 248);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(52 45 67);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(104 94 123);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(112 82 156);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(255 255 255);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(112 82 156);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(104 94 123);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(172.125 53.04 71.91);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(255 255 255);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(218.84 214.42 226.10000000000002);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(232.60000000000002 226 242.40000000000003);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(240.09 226.8832 237.5928);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-appearance="dark"] {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(32 24 32);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(48 35 48);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(59 40 54);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(255 242 247);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(203 182 199);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(240 168 200);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(32 24 32);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(240 168 200);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(203 182 199);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(32 24 32);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(76.98 63.98 75.86000000000001);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(67.2 48.30000000000001 63.199999999999996);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(64.56 44.5216 57.93000000000001);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="opal"][data-appearance="dark"] {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(32 24 32);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(48 35 48);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(59 40 54);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(255 242 247);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(203 182 199);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(240 168 200);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(32 24 32);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(240 168 200);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(203 182 199);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(32 24 32);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(76.98 63.98 75.86000000000001);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(67.2 48.30000000000001 63.199999999999996);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(64.56 44.5216 57.93000000000001);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="graphite"][data-appearance="dark"] {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(25 27 32);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(37 40 47);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(48 52 61);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(243 244 247);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(188 193 205);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(191 201 220);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(25 27 32);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(191 201 220);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(188 193 205);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(25 27 32);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(65.84000000000002 68.56 75);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(52.400000000000006 56.1 64.30000000000001);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(54.440000000000005 49.1216 57.01000000000001);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="ocean"][data-appearance="dark"] {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(21 33 43);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(32 49 63);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(40 61 77);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(237 247 255);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(179 203 222);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(151 206 238);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(21 33 43);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(151 206 238);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(179 203 222);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(21 33 43);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(60.7 76.72 89.88000000000001);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(43.900000000000006 64.7 80.50000000000001);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(49.839999999999996 57.40160000000001 71.73);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="sage"][data-appearance="dark"] {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(25 35 28);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(38 52 42);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(48 66 54);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(240 248 241);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(185 207 190);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(165 212 175);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(25 35 28);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(165 212 175);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(185 207 190);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(25 35 28);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(66.28 79.44 69.86);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(50.70000000000001 68 55.3);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(55.36 60.1616 52.410000000000004);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|
|
|
|
:root[data-palette="lavender"][data-appearance="dark"] {
|
|
color-scheme: dark;
|
|
--hope-primitive-ground: rgb(32 27 41);
|
|
--hope-ground: var(--hope-primitive-ground);
|
|
--hope-primitive-surface: rgb(46 39 60);
|
|
--hope-surface: var(--hope-primitive-surface);
|
|
--hope-primitive-persona-surface: rgb(59 50 77);
|
|
--hope-persona-surface: var(--hope-primitive-persona-surface);
|
|
--hope-primitive-ink: rgb(247 241 255);
|
|
--hope-ink: var(--hope-primitive-ink);
|
|
--hope-primitive-quiet: rgb(200 186 223);
|
|
--hope-quiet: var(--hope-primitive-quiet);
|
|
--hope-primitive-accent: rgb(207 180 244);
|
|
--hope-accent: var(--hope-primitive-accent);
|
|
--hope-primitive-on-accent: rgb(32 27 41);
|
|
--hope-on-accent: var(--hope-primitive-on-accent);
|
|
--hope-primitive-focus: rgb(207 180 244);
|
|
--hope-focus: var(--hope-primitive-focus);
|
|
--hope-primitive-control-border: rgb(200 186 223);
|
|
--hope-control-border: var(--hope-primitive-control-border);
|
|
--hope-primitive-alert: rgb(255 154.01999999999998 172.125);
|
|
--hope-alert: var(--hope-primitive-alert);
|
|
--hope-primitive-on-alert: rgb(32 27 41);
|
|
--hope-on-alert: var(--hope-primitive-on-alert);
|
|
--hope-primitive-separator: rgb(74.14 67.28000000000002 87.3);
|
|
--hope-separator: var(--hope-primitive-separator);
|
|
--hope-primitive-selected-wash: rgb(62.1 53.1 78.4);
|
|
--hope-selected-wash: var(--hope-primitive-selected-wash);
|
|
--hope-primitive-error-wash: rgb(62.72 48.2016 68.97);
|
|
--hope-error-wash: var(--hope-primitive-error-wash);
|
|
--hope-rosewood: var(--hope-accent);
|
|
--hope-on-rosewood: var(--hope-on-accent);
|
|
--hope-action-background: var(--hope-accent);
|
|
--hope-action-foreground: var(--hope-on-accent);
|
|
--hope-input-background: var(--hope-surface);
|
|
--hope-input-foreground: var(--hope-ink);
|
|
--hope-input-placeholder: var(--hope-quiet);
|
|
--hope-input-border: var(--hope-control-border);
|
|
--hope-input-focus: var(--hope-focus);
|
|
--hope-persona-background: var(--hope-persona-surface);
|
|
--hope-error-background: var(--hope-error-wash);
|
|
--hope-error-foreground: var(--hope-alert);
|
|
}
|