/* ========================================================================== dela Akademie - Farbsysteme, zehn Paletten, hell und dunkel Jede Palette erfuellt WCAG AA (4.5:1 Text, 3:1 grosse Flaechen) in beiden Modi. Erzeugt aus assets/palettes.json durch werkzeuge/farbwelten-bauen.py. Nicht von Hand aendern, sonst laufen JSON und CSS auseinander. Umschaltung: Modus: oder ohne Attribut = Systemwahl ========================================================================== */ /* --- Kupfer und Stein --------------------------------------------- */ :root, :root[data-palette="kupfer"] { --bg: #F5F2EF; --bg-alt: #E8E2DB; --surface: #FFFFFF; --border: #D3CAC1; --text: #1C1815; --text-muted: #574E45; --inverse: #201B17; --on-inverse: #F2EDE8; --on-inverse-muted: #A8998B; --accent: #9A5426; --accent-hover: #7B411C; --on-accent: #FFFFFF; --accent-soft: #F4E2D4; --accent-text: #7B411C; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"])[data-palette="kupfer"] { --bg: #14100D; --bg-alt: #1C1713; --surface: #241E19; --border: #3C332B; --text: #F0EAE3; --text-muted: #ABA095; --inverse: #F0EAE3; --on-inverse: #14100D; --on-inverse-muted: #584B40; --accent: #E08A4E; --accent-hover: #EDA872; --on-accent: #1A0D04; --accent-soft: #3A2416; --accent-text: #EDA872; color-scheme: dark; } } :root[data-theme="dark"], :root[data-theme="dark"][data-palette="kupfer"] { --bg: #14100D; --bg-alt: #1C1713; --surface: #241E19; --border: #3C332B; --text: #F0EAE3; --text-muted: #ABA095; --inverse: #F0EAE3; --on-inverse: #14100D; --on-inverse-muted: #584B40; --accent: #E08A4E; --accent-hover: #EDA872; --on-accent: #1A0D04; --accent-soft: #3A2416; --accent-text: #EDA872; color-scheme: dark; } /* --- Hochvolt ----------------------------------------------------- */ :root[data-palette="hochvolt"] { --bg: #FAF7F2; --bg-alt: #F0EAE0; --surface: #FFFFFF; --border: #DCD3C6; --text: #1A1512; --text-muted: #5A5148; --inverse: #1A1512; --on-inverse: #FAF7F2; --on-inverse-muted: #A79C8F; --accent: #C93F04; --accent-hover: #A23303; --on-accent: #FFFFFF; --accent-soft: #FBE3D6; --accent-text: #A23303; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="hochvolt"] { --bg: #131010; --bg-alt: #1B1614; --surface: #221B18; --border: #3A2F29; --text: #F2EBE4; --text-muted: #AFA298; --inverse: #F2EBE4; --on-inverse: #131010; --on-inverse-muted: #5A4F47; --accent: #FF7A3D; --accent-hover: #FF9A67; --on-accent: #1A0C04; --accent-soft: #3A1F12; --accent-text: #FF9A67; color-scheme: dark; } } :root[data-theme="dark"][data-palette="hochvolt"] { --bg: #131010; --bg-alt: #1B1614; --surface: #221B18; --border: #3A2F29; --text: #F2EBE4; --text-muted: #AFA298; --inverse: #F2EBE4; --on-inverse: #131010; --on-inverse-muted: #5A4F47; --accent: #FF7A3D; --accent-hover: #FF9A67; --on-accent: #1A0C04; --accent-soft: #3A1F12; --accent-text: #FF9A67; color-scheme: dark; } /* --- Messing und Graphit ------------------------------------------ */ :root[data-palette="messing"] { --bg: #F6F4EE; --bg-alt: #E9E5D9; --surface: #FFFFFF; --border: #D2CCBC; --text: #1A1913; --text-muted: #535043; --inverse: #26241C; --on-inverse: #F4F1E8; --on-inverse-muted: #A9A491; --accent: #7A5C0E; --accent-hover: #5E4709; --on-accent: #FFFFFF; --accent-soft: #F1E7C7; --accent-text: #5E4709; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="messing"] { --bg: #121210; --bg-alt: #1A1915; --surface: #21201A; --border: #38352C; --text: #EFEDE4; --text-muted: #A7A394; --inverse: #EFEDE4; --on-inverse: #121210; --on-inverse-muted: #535044; --accent: #D9B455; --accent-hover: #E8CA80; --on-accent: #1A1403; --accent-soft: #332B12; --accent-text: #E8CA80; color-scheme: dark; } } :root[data-theme="dark"][data-palette="messing"] { --bg: #121210; --bg-alt: #1A1915; --surface: #21201A; --border: #38352C; --text: #EFEDE4; --text-muted: #A7A394; --inverse: #EFEDE4; --on-inverse: #121210; --on-inverse-muted: #535044; --accent: #D9B455; --accent-hover: #E8CA80; --on-accent: #1A1403; --accent-soft: #332B12; --accent-text: #E8CA80; color-scheme: dark; } /* --- Terracotta --------------------------------------------------- */ :root[data-palette="terracotta"] { --bg: #F6F3F0; --bg-alt: #EAE4DE; --surface: #FFFFFF; --border: #D8CFC7; --text: #1E2226; --text-muted: #575F66; --inverse: #232A2F; --on-inverse: #F4F0EC; --on-inverse-muted: #A2ADB5; --accent: #B34418; --accent-hover: #8E3512; --on-accent: #FFFFFF; --accent-soft: #F7DECF; --accent-text: #8E3512; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="terracotta"] { --bg: #111417; --bg-alt: #171C20; --surface: #1C2227; --border: #2E373D; --text: #EBEEF0; --text-muted: #A0AAB2; --inverse: #EBEEF0; --on-inverse: #111417; --on-inverse-muted: #454F57; --accent: #F2814F; --accent-hover: #F79E76; --on-accent: #1C0A03; --accent-soft: #33190F; --accent-text: #F79E76; color-scheme: dark; } } :root[data-theme="dark"][data-palette="terracotta"] { --bg: #111417; --bg-alt: #171C20; --surface: #1C2227; --border: #2E373D; --text: #EBEEF0; --text-muted: #A0AAB2; --inverse: #EBEEF0; --on-inverse: #111417; --on-inverse-muted: #454F57; --accent: #F2814F; --accent-hover: #F79E76; --on-accent: #1C0A03; --accent-soft: #33190F; --accent-text: #F79E76; color-scheme: dark; } /* --- Sepia und Elfenbein ------------------------------------------ */ :root[data-palette="sepia"] { --bg: #FBF8F2; --bg-alt: #F0E9DC; --surface: #FFFFFF; --border: #DBD1C0; --text: #211B14; --text-muted: #595043; --inverse: #2B2116; --on-inverse: #F7F1E6; --on-inverse-muted: #AC9D87; --accent: #6B4A2F; --accent-hover: #523723; --on-accent: #FFFFFF; --accent-soft: #EEE1CF; --accent-text: #523723; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="sepia"] { --bg: #141109; --bg-alt: #1C1811; --surface: #231E15; --border: #3B3328; --text: #F1EBDF; --text-muted: #ACA08B; --inverse: #F1EBDF; --on-inverse: #141109; --on-inverse-muted: #584D3C; --accent: #C99A78; --accent-hover: #DCB79C; --on-accent: #1C1006; --accent-soft: #33281A; --accent-text: #DCB79C; color-scheme: dark; } } :root[data-theme="dark"][data-palette="sepia"] { --bg: #141109; --bg-alt: #1C1811; --surface: #231E15; --border: #3B3328; --text: #F1EBDF; --text-muted: #ACA08B; --inverse: #F1EBDF; --on-inverse: #141109; --on-inverse-muted: #584D3C; --accent: #C99A78; --accent-hover: #DCB79C; --on-accent: #1C1006; --accent-soft: #33281A; --accent-text: #DCB79C; color-scheme: dark; } /* --- dela Original ------------------------------------------------ */ :root[data-palette="dela"] { --bg: #FFFDFA; --bg-alt: #F3EFE9; --surface: #FFFFFF; --border: #D6CEE6; --text: #252019; --text-muted: #5A5245; --inverse: #28086B; --on-inverse: #F2EEF9; --on-inverse-muted: #B3A3D1; --accent: #330B86; --accent-hover: #28086B; --on-accent: #FFFFFF; --accent-soft: #E9E3F5; --accent-text: #28086B; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="dela"] { --bg: #0F0A18; --bg-alt: #171029; --surface: #1D1633; --border: #332A4D; --text: #EDE9F5; --text-muted: #A79BC2; --inverse: #EDE9F5; --on-inverse: #0F0A18; --on-inverse-muted: #4A3F63; --accent: #B49BFF; --accent-hover: #CDBBFF; --on-accent: #150A2E; --accent-soft: #251A42; --accent-text: #CDBBFF; color-scheme: dark; } } :root[data-theme="dark"][data-palette="dela"] { --bg: #0F0A18; --bg-alt: #171029; --surface: #1D1633; --border: #332A4D; --text: #EDE9F5; --text-muted: #A79BC2; --inverse: #EDE9F5; --on-inverse: #0F0A18; --on-inverse-muted: #4A3F63; --accent: #B49BFF; --accent-hover: #CDBBFF; --on-accent: #150A2E; --accent-soft: #251A42; --accent-text: #CDBBFF; color-scheme: dark; } /* --- Nachtblau ---------------------------------------------------- */ :root[data-palette="nachtblau"] { --bg: #F7F8FA; --bg-alt: #EAEDF2; --surface: #FFFFFF; --border: #CBD2DC; --text: #101722; --text-muted: #4A5566; --inverse: #0F1E33; --on-inverse: #EAF0F8; --on-inverse-muted: #8FA3BF; --accent: #9A5B00; --accent-hover: #7A4700; --on-accent: #FFFFFF; --accent-soft: #FBEBD2; --accent-text: #7A4700; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="nachtblau"] { --bg: #0A1017; --bg-alt: #101822; --surface: #141F2B; --border: #263444; --text: #E6ECF3; --text-muted: #98A8BA; --inverse: #E6ECF3; --on-inverse: #0A1017; --on-inverse-muted: #3D4C5D; --accent: #F2B24C; --accent-hover: #F8CA80; --on-accent: #1A1000; --accent-soft: #33260F; --accent-text: #F8CA80; color-scheme: dark; } } :root[data-theme="dark"][data-palette="nachtblau"] { --bg: #0A1017; --bg-alt: #101822; --surface: #141F2B; --border: #263444; --text: #E6ECF3; --text-muted: #98A8BA; --inverse: #E6ECF3; --on-inverse: #0A1017; --on-inverse-muted: #3D4C5D; --accent: #F2B24C; --accent-hover: #F8CA80; --on-accent: #1A1000; --accent-soft: #33260F; --accent-text: #F8CA80; color-scheme: dark; } /* --- Ziegel und Sand ---------------------------------------------- */ :root[data-palette="ziegel"] { --bg: #F8F4EE; --bg-alt: #EEE6D9; --surface: #FFFFFF; --border: #DCD1C0; --text: #1F1A15; --text-muted: #5A5046; --inverse: #2A211A; --on-inverse: #F6F1E9; --on-inverse-muted: #AD9E8C; --accent: #AE3323; --accent-hover: #8C2619; --on-accent: #FFFFFF; --accent-soft: #F9DDD4; --accent-text: #8C2619; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="ziegel"] { --bg: #16110F; --bg-alt: #1E1815; --surface: #251D1A; --border: #3E332C; --text: #F2EAE4; --text-muted: #AE9E96; --inverse: #F2EAE4; --on-inverse: #16110F; --on-inverse-muted: #5A4A42; --accent: #F07A66; --accent-hover: #F79C8C; --on-accent: #260A05; --accent-soft: #3C1B15; --accent-text: #F79C8C; color-scheme: dark; } } :root[data-theme="dark"][data-palette="ziegel"] { --bg: #16110F; --bg-alt: #1E1815; --surface: #251D1A; --border: #3E332C; --text: #F2EAE4; --text-muted: #AE9E96; --inverse: #F2EAE4; --on-inverse: #16110F; --on-inverse-muted: #5A4A42; --accent: #F07A66; --accent-hover: #F79C8C; --on-accent: #260A05; --accent-soft: #3C1B15; --accent-text: #F79C8C; color-scheme: dark; } /* --- Zinn und Tuerkis --------------------------------------------- */ :root[data-palette="zinn"] { --bg: #F6F7F7; --bg-alt: #E9ECEC; --surface: #FFFFFF; --border: #CBD1D1; --text: #151A1A; --text-muted: #4E5757; --inverse: #1B2626; --on-inverse: #EDF2F2; --on-inverse-muted: #9AABAB; --accent: #00695E; --accent-hover: #004F47; --on-accent: #FFFFFF; --accent-soft: #D2E9E6; --accent-text: #004F47; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="zinn"] { --bg: #0B0F0F; --bg-alt: #111717; --surface: #161E1E; --border: #293434; --text: #E8EEEE; --text-muted: #9AA9A9; --inverse: #E8EEEE; --on-inverse: #0B0F0F; --on-inverse-muted: #3E4C4C; --accent: #4FD5C2; --accent-hover: #84E4D6; --on-accent: #00201C; --accent-soft: #12332F; --accent-text: #84E4D6; color-scheme: dark; } } :root[data-theme="dark"][data-palette="zinn"] { --bg: #0B0F0F; --bg-alt: #111717; --surface: #161E1E; --border: #293434; --text: #E8EEEE; --text-muted: #9AA9A9; --inverse: #E8EEEE; --on-inverse: #0B0F0F; --on-inverse-muted: #3E4C4C; --accent: #4FD5C2; --accent-hover: #84E4D6; --on-accent: #00201C; --accent-soft: #12332F; --accent-text: #84E4D6; color-scheme: dark; } /* --- Olive -------------------------------------------------------- */ :root[data-palette="olive"] { --bg: #F8F8F3; --bg-alt: #ECEDE2; --surface: #FFFFFF; --border: #D2D4C2; --text: #1B1D14; --text-muted: #525641; --inverse: #242815; --on-inverse: #F0F2E6; --on-inverse-muted: #A6AC8C; --accent: #A03A16; --accent-hover: #7E2D11; --on-accent: #FFFFFF; --accent-soft: #F7DFD3; --accent-text: #7E2D11; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-palette="olive"] { --bg: #0E100A; --bg-alt: #151810; --surface: #1B1F14; --border: #2E3423; --text: #EBEEE2; --text-muted: #A3AB90; --inverse: #EBEEE2; --on-inverse: #0E100A; --on-inverse-muted: #48513A; --accent: #F0824F; --accent-hover: #F6A47C; --on-accent: #1E0A02; --accent-soft: #331A0F; --accent-text: #F6A47C; color-scheme: dark; } } :root[data-theme="dark"][data-palette="olive"] { --bg: #0E100A; --bg-alt: #151810; --surface: #1B1F14; --border: #2E3423; --text: #EBEEE2; --text-muted: #A3AB90; --inverse: #EBEEE2; --on-inverse: #0E100A; --on-inverse-muted: #48513A; --accent: #F0824F; --accent-hover: #F6A47C; --on-accent: #1E0A02; --accent-soft: #331A0F; --accent-text: #F6A47C; color-scheme: dark; } /* --- Farbtupfer fuer die Auswahl ---------------------------------- */ .tupfer[data-welt="kupfer"] { --tupfer-1: #E8E2DB; --tupfer-2: #9A5426; --tupfer-3: #201B17; } .tupfer[data-welt="hochvolt"] { --tupfer-1: #F0EAE0; --tupfer-2: #C93F04; --tupfer-3: #1A1512; } .tupfer[data-welt="messing"] { --tupfer-1: #E9E5D9; --tupfer-2: #7A5C0E; --tupfer-3: #26241C; } .tupfer[data-welt="terracotta"] { --tupfer-1: #EAE4DE; --tupfer-2: #B34418; --tupfer-3: #232A2F; } .tupfer[data-welt="sepia"] { --tupfer-1: #F0E9DC; --tupfer-2: #6B4A2F; --tupfer-3: #2B2116; } .tupfer[data-welt="dela"] { --tupfer-1: #F3EFE9; --tupfer-2: #330B86; --tupfer-3: #28086B; } .tupfer[data-welt="nachtblau"] { --tupfer-1: #EAEDF2; --tupfer-2: #9A5B00; --tupfer-3: #0F1E33; } .tupfer[data-welt="ziegel"] { --tupfer-1: #EEE6D9; --tupfer-2: #AE3323; --tupfer-3: #2A211A; } .tupfer[data-welt="zinn"] { --tupfer-1: #E9ECEC; --tupfer-2: #00695E; --tupfer-3: #1B2626; } .tupfer[data-welt="olive"] { --tupfer-1: #ECEDE2; --tupfer-2: #A03A16; --tupfer-3: #242815; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tupfer[data-welt="kupfer"] { --tupfer-1: #1C1713; --tupfer-2: #E08A4E; --tupfer-3: #F0EAE3; } :root:not([data-theme="light"]) .tupfer[data-welt="hochvolt"] { --tupfer-1: #1B1614; --tupfer-2: #FF7A3D; --tupfer-3: #F2EBE4; } :root:not([data-theme="light"]) .tupfer[data-welt="messing"] { --tupfer-1: #1A1915; --tupfer-2: #D9B455; --tupfer-3: #EFEDE4; } :root:not([data-theme="light"]) .tupfer[data-welt="terracotta"] { --tupfer-1: #171C20; --tupfer-2: #F2814F; --tupfer-3: #EBEEF0; } :root:not([data-theme="light"]) .tupfer[data-welt="sepia"] { --tupfer-1: #1C1811; --tupfer-2: #C99A78; --tupfer-3: #F1EBDF; } :root:not([data-theme="light"]) .tupfer[data-welt="dela"] { --tupfer-1: #171029; --tupfer-2: #B49BFF; --tupfer-3: #EDE9F5; } :root:not([data-theme="light"]) .tupfer[data-welt="nachtblau"] { --tupfer-1: #101822; --tupfer-2: #F2B24C; --tupfer-3: #E6ECF3; } :root:not([data-theme="light"]) .tupfer[data-welt="ziegel"] { --tupfer-1: #1E1815; --tupfer-2: #F07A66; --tupfer-3: #F2EAE4; } :root:not([data-theme="light"]) .tupfer[data-welt="zinn"] { --tupfer-1: #111717; --tupfer-2: #4FD5C2; --tupfer-3: #E8EEEE; } :root:not([data-theme="light"]) .tupfer[data-welt="olive"] { --tupfer-1: #151810; --tupfer-2: #F0824F; --tupfer-3: #EBEEE2; } } :root[data-theme="dark"] .tupfer[data-welt="kupfer"] { --tupfer-1: #1C1713; --tupfer-2: #E08A4E; --tupfer-3: #F0EAE3; } :root[data-theme="dark"] .tupfer[data-welt="hochvolt"] { --tupfer-1: #1B1614; --tupfer-2: #FF7A3D; --tupfer-3: #F2EBE4; } :root[data-theme="dark"] .tupfer[data-welt="messing"] { --tupfer-1: #1A1915; --tupfer-2: #D9B455; --tupfer-3: #EFEDE4; } :root[data-theme="dark"] .tupfer[data-welt="terracotta"] { --tupfer-1: #171C20; --tupfer-2: #F2814F; --tupfer-3: #EBEEF0; } :root[data-theme="dark"] .tupfer[data-welt="sepia"] { --tupfer-1: #1C1811; --tupfer-2: #C99A78; --tupfer-3: #F1EBDF; } :root[data-theme="dark"] .tupfer[data-welt="dela"] { --tupfer-1: #171029; --tupfer-2: #B49BFF; --tupfer-3: #EDE9F5; } :root[data-theme="dark"] .tupfer[data-welt="nachtblau"] { --tupfer-1: #101822; --tupfer-2: #F2B24C; --tupfer-3: #E6ECF3; } :root[data-theme="dark"] .tupfer[data-welt="ziegel"] { --tupfer-1: #1E1815; --tupfer-2: #F07A66; --tupfer-3: #F2EAE4; } :root[data-theme="dark"] .tupfer[data-welt="zinn"] { --tupfer-1: #111717; --tupfer-2: #4FD5C2; --tupfer-3: #E8EEEE; } :root[data-theme="dark"] .tupfer[data-welt="olive"] { --tupfer-1: #151810; --tupfer-2: #F0824F; --tupfer-3: #EBEEE2; }