/* =========================================================================== Palettes. Generated -- edit the spec in scripts/gen_palettes.py, not here. Three directions over one identical component layer. Switching is a single attribute on , which is the whole point of keeping colour in tokens: no component rule knows or cares which palette is active. =========================================================================== */ /* --- studio --------------------------------------------------------- */ :root[data-palette="studio"] { --wall: #F1F3F6; --wall-raised: #FFFFFF; --wall-recess: #E5E8ED; --wall-line: #D5DAE2; --ink: #14161A; --ink-soft: #565D68; --ink-faint: #8A929E; --day-high: #FFE08A; --day-mid: #FFC53D; --day-low: #F0A81E; --day-spill: #FFC53D26; --slat: #69717D; --slat-edge: #4E5561; --slat-shadow: #0000001F; --accent: #3355FF; --accent-hover: #4A67FF; --accent-ink: #FFFFFF; --accent-faint: #3355FF14; --ok: #12855C; --warn: #B26A00; --alert: #D33A2C; --offline: #8A929E; --recess: inset 0 1px 2px #0000001A, inset 0 -1px 0 #FFFFFF66; --lift: 0 1px 2px #0000000F, 0 6px 16px -6px #00000014; } @media (prefers-color-scheme: dark) { :root[data-palette="studio"]:not([data-theme="light"]) { --wall: #0E1014; --wall-raised: #191C22; --wall-recess: #0A0C0F; --wall-line: #272B33; --ink: #EDEFF3; --ink-soft: #98A0AC; --ink-faint: #68707D; --day-high: #9A8138; --day-mid: #C4A03E; --day-low: #8A6E28; --day-spill: #C4A03E24; --slat: #3E454F; --slat-edge: #2E343C; --slat-shadow: #00000059; --accent: #6B85FF; --accent-hover: #849AFF; --accent-ink: #0B0E16; --accent-faint: #6B85FF1F; --ok: #4CB68A; --warn: #D9A441; --alert: #E8705F; --offline: #68707D; --recess: inset 0 1px 3px #00000073, inset 0 -1px 0 #FFFFFF0A; --lift: 0 1px 2px #0000004D, 0 8px 20px -8px #00000073; } } :root[data-palette="studio"][data-theme="dark"] { --wall: #0E1014; --wall-raised: #191C22; --wall-recess: #0A0C0F; --wall-line: #272B33; --ink: #EDEFF3; --ink-soft: #98A0AC; --ink-faint: #68707D; --day-high: #9A8138; --day-mid: #C4A03E; --day-low: #8A6E28; --day-spill: #C4A03E24; --slat: #3E454F; --slat-edge: #2E343C; --slat-shadow: #00000059; --accent: #6B85FF; --accent-hover: #849AFF; --accent-ink: #0B0E16; --accent-faint: #6B85FF1F; --ok: #4CB68A; --warn: #D9A441; --alert: #E8705F; --offline: #68707D; --recess: inset 0 1px 3px #00000073, inset 0 -1px 0 #FFFFFF0A; --lift: 0 1px 2px #0000004D, 0 8px 20px -8px #00000073; } :root[data-palette="studio"][data-theme="light"] { --wall: #F1F3F6; --wall-raised: #FFFFFF; --wall-recess: #E5E8ED; --wall-line: #D5DAE2; --ink: #14161A; --ink-soft: #565D68; --ink-faint: #8A929E; --day-high: #FFE08A; --day-mid: #FFC53D; --day-low: #F0A81E; --day-spill: #FFC53D26; --slat: #69717D; --slat-edge: #4E5561; --slat-shadow: #0000001F; --accent: #3355FF; --accent-hover: #4A67FF; --accent-ink: #FFFFFF; --accent-faint: #3355FF14; --ok: #12855C; --warn: #B26A00; --alert: #D33A2C; --offline: #8A929E; --recess: inset 0 1px 2px #0000001A, inset 0 -1px 0 #FFFFFF66; --lift: 0 1px 2px #0000000F, 0 6px 16px -6px #00000014; } /* --- nordic --------------------------------------------------------- */ :root[data-palette="nordic"] { --wall: #EDF1F0; --wall-raised: #FFFFFF; --wall-recess: #E0E7E5; --wall-line: #CFD9D6; --ink: #16211F; --ink-soft: #4F5D5A; --ink-faint: #84918E; --day-high: #FFE3A0; --day-mid: #FFCC66; --day-low: #F2B23C; --day-spill: #FFCC6626; --slat: #6B7876; --slat-edge: #505C5A; --slat-shadow: #0000001A; --accent: #007A67; --accent-hover: #00937C; --accent-ink: #FFFFFF; --accent-faint: #007A6714; --ok: #2E7D5B; --warn: #A9761B; --alert: #C4483A; --offline: #84918E; --recess: inset 0 1px 2px #0000001A, inset 0 -1px 0 #FFFFFF66; --lift: 0 1px 2px #0000000F, 0 6px 16px -6px #00000014; } @media (prefers-color-scheme: dark) { :root[data-palette="nordic"]:not([data-theme="light"]) { --wall: #0F1614; --wall-raised: #19221F; --wall-recess: #0A100E; --wall-line: #28332F; --ink: #E8EFEC; --ink-soft: #93A29E; --ink-faint: #66746F; --day-high: #8C7740; --day-mid: #B29548; --day-low: #7C662F; --day-spill: #B2954824; --slat: #3C4643; --slat-edge: #2D3634; --slat-shadow: #00000059; --accent: #2FD4B6; --accent-hover: #4FE6CB; --accent-ink: #08201B; --accent-faint: #2FD4B61F; --ok: #5FC08F; --warn: #D2A34F; --alert: #E07A68; --offline: #66746F; --recess: inset 0 1px 3px #00000073, inset 0 -1px 0 #FFFFFF0A; --lift: 0 1px 2px #0000004D, 0 8px 20px -8px #00000073; } } :root[data-palette="nordic"][data-theme="dark"] { --wall: #0F1614; --wall-raised: #19221F; --wall-recess: #0A100E; --wall-line: #28332F; --ink: #E8EFEC; --ink-soft: #93A29E; --ink-faint: #66746F; --day-high: #8C7740; --day-mid: #B29548; --day-low: #7C662F; --day-spill: #B2954824; --slat: #3C4643; --slat-edge: #2D3634; --slat-shadow: #00000059; --accent: #2FD4B6; --accent-hover: #4FE6CB; --accent-ink: #08201B; --accent-faint: #2FD4B61F; --ok: #5FC08F; --warn: #D2A34F; --alert: #E07A68; --offline: #66746F; --recess: inset 0 1px 3px #00000073, inset 0 -1px 0 #FFFFFF0A; --lift: 0 1px 2px #0000004D, 0 8px 20px -8px #00000073; } :root[data-palette="nordic"][data-theme="light"] { --wall: #EDF1F0; --wall-raised: #FFFFFF; --wall-recess: #E0E7E5; --wall-line: #CFD9D6; --ink: #16211F; --ink-soft: #4F5D5A; --ink-faint: #84918E; --day-high: #FFE3A0; --day-mid: #FFCC66; --day-low: #F2B23C; --day-spill: #FFCC6626; --slat: #6B7876; --slat-edge: #505C5A; --slat-shadow: #0000001A; --accent: #007A67; --accent-hover: #00937C; --accent-ink: #FFFFFF; --accent-faint: #007A6714; --ok: #2E7D5B; --warn: #A9761B; --alert: #C4483A; --offline: #84918E; --recess: inset 0 1px 2px #0000001A, inset 0 -1px 0 #FFFFFF66; --lift: 0 1px 2px #0000000F, 0 6px 16px -6px #00000014; } /* --- contrast --------------------------------------------------------- */ :root[data-palette="contrast"] { --wall: #EFEFEF; --wall-raised: #FFFFFF; --wall-recess: #E3E3E3; --wall-line: #D2D2D2; --ink: #101010; --ink-soft: #525252; --ink-faint: #8A8A8A; --day-high: #FFDE7A; --day-mid: #FFC42E; --day-low: #E9A611; --day-spill: #FFC42E26; --slat: #6D6D6D; --slat-edge: #535353; --slat-shadow: #00000021; --accent: #5B21D6; --accent-hover: #6D33EA; --accent-ink: #FFFFFF; --accent-faint: #5B21D614; --ok: #137A4E; --warn: #9C6100; --alert: #CC2E22; --offline: #8A8A8A; --recess: inset 0 1px 2px #0000001A, inset 0 -1px 0 #FFFFFF66; --lift: 0 1px 2px #0000000F, 0 6px 16px -6px #00000014; } @media (prefers-color-scheme: dark) { :root[data-palette="contrast"]:not([data-theme="light"]) { --wall: #08090A; --wall-raised: #131518; --wall-recess: #000000; --wall-line: #23262A; --ink: #F4F6F8; --ink-soft: #9AA1A9; --ink-faint: #6A717A; --day-high: #9A7F30; --day-mid: #C09A33; --day-low: #836822; --day-spill: #C09A3326; --slat: #454B52; --slat-edge: #33383E; --slat-shadow: #00000066; --accent: #B9F24E; --accent-hover: #CBFF6E; --accent-ink: #12170A; --accent-faint: #B9F24E1F; --ok: #5BC98C; --warn: #E0AC4A; --alert: #F0715C; --offline: #6A717A; --recess: inset 0 1px 3px #00000073, inset 0 -1px 0 #FFFFFF0A; --lift: 0 1px 2px #0000004D, 0 8px 20px -8px #00000073; } } :root[data-palette="contrast"][data-theme="dark"] { --wall: #08090A; --wall-raised: #131518; --wall-recess: #000000; --wall-line: #23262A; --ink: #F4F6F8; --ink-soft: #9AA1A9; --ink-faint: #6A717A; --day-high: #9A7F30; --day-mid: #C09A33; --day-low: #836822; --day-spill: #C09A3326; --slat: #454B52; --slat-edge: #33383E; --slat-shadow: #00000066; --accent: #B9F24E; --accent-hover: #CBFF6E; --accent-ink: #12170A; --accent-faint: #B9F24E1F; --ok: #5BC98C; --warn: #E0AC4A; --alert: #F0715C; --offline: #6A717A; --recess: inset 0 1px 3px #00000073, inset 0 -1px 0 #FFFFFF0A; --lift: 0 1px 2px #0000004D, 0 8px 20px -8px #00000073; } :root[data-palette="contrast"][data-theme="light"] { --wall: #EFEFEF; --wall-raised: #FFFFFF; --wall-recess: #E3E3E3; --wall-line: #D2D2D2; --ink: #101010; --ink-soft: #525252; --ink-faint: #8A8A8A; --day-high: #FFDE7A; --day-mid: #FFC42E; --day-low: #E9A611; --day-spill: #FFC42E26; --slat: #6D6D6D; --slat-edge: #535353; --slat-shadow: #00000021; --accent: #5B21D6; --accent-hover: #6D33EA; --accent-ink: #FFFFFF; --accent-faint: #5B21D614; --ok: #137A4E; --warn: #9C6100; --alert: #CC2E22; --offline: #8A8A8A; --recess: inset 0 1px 2px #0000001A, inset 0 -1px 0 #FFFFFF66; --lift: 0 1px 2px #0000000F, 0 6px 16px -6px #00000014; }