/* Copied from the eagraiclainne app: web/src/theme/themes.css — the real theme engine, verbatim, with EXACTLY ONE deviation: the app scopes Hearth onto :root as the default; here Hearth applies only via [data-theme="hearth"], so app themes never leak onto site chrome. Powers the landing theme strip and the demo frame through custom-property inheritance. */ /* Theme layer: every colour in the app resolves through these tokens. A theme is a family with a light and a dark variant: [data-theme="x"] — light tokens [data-theme="x"][data-mode="dark"] — dark tokens The mode comes from the user's Light/Dark/System choice (theme.tsx). A custom theme is a JSON object of token overrides applied as inline properties on , layered over the active family + mode. */ /* ---------- eagraiclainne originals ---------- */ [data-theme="hearth"] { --surface: #fbf7f0; --card: #ffffff; --ink: #2b2118; --ink-soft: #6b5d4f; --accent: #1e6e5c; --on-accent: #ffffff; --celebrate: #e8a33d; --danger: #a63a2b; --line: #e7dfd2; --radius: 12px; --base: 18px; } [data-theme="hearth"][data-mode="dark"] { --surface: #211a14; --card: #2d251d; --ink: #f2e9dd; --ink-soft: #b3a493; --accent: #58b598; --on-accent: #211a14; --celebrate: #e8a33d; --danger: #e06a56; --line: #3e342a; } [data-theme="meadow"] { --surface: #f0f8e8; --card: #ffffff; --ink: #22331f; --ink-soft: #5d7355; --accent:#397E2A; --on-accent: #ffffff; --celebrate: #f2a93b; --danger: #c0392b; --line: #d8e8cb; --radius: 22px; --base: 18px; } [data-theme="meadow"][data-mode="dark"] { --surface: #1a2417; --card: #253321; --ink: #e8f1e1; --ink-soft: #a3b899; --accent: #7cc368; --on-accent: #1a2417; --celebrate: #f2a93b; --danger:#E77466; --line: #36452f; } [data-theme="clear"] { --surface: #ffffff; --card: #ffffff; --ink: #000000; --ink-soft: #3d3d3d; --accent: #003ea8; --on-accent: #ffffff; --celebrate: #7a4f00; --danger: #b10000; --line: #767676; --radius: 6px; --base: 20px; } [data-theme="clear"][data-mode="dark"] { --surface: #000000; --card: #0a0a0a; --ink: #ffffff; --ink-soft: #d0d0d0; --accent: #7ab8ff; --on-accent: #000000; --celebrate: #ffd75e; --danger: #ff6b6b; --line: #8a8a8a; } /* ---------- Ported schemes: light + dark upstream variants ---------- */ /* Catppuccin: Latte / Mocha */ [data-theme="catppuccin"] { --surface: #eff1f5; --card: #ffffff; --ink: #4c4f69; --ink-soft:#6A6D82; --accent: #8839ef; --on-accent: #ffffff; --celebrate: #df8e1d; --danger: #d20f39; --line: #ccd0da; --radius: 12px; --base: 18px; } [data-theme="catppuccin"][data-mode="dark"] { --surface: #1e1e2e; --card: #313244; --ink: #cdd6f4; --ink-soft: #a6adc8; --accent: #cba6f7; --on-accent: #1e1e2e; --celebrate: #f9e2af; --danger: #f38ba8; --line: #45475a; } /* Tokyo Night: Day / Night */ [data-theme="tokyonight"] { --surface: #e1e2e7; --card: #f2f3f7; --ink: #3760bf; --ink-soft:#516297; --accent:#2163B3; --on-accent: #ffffff; --celebrate: #8c6c3e; --danger:#C11E4D; --line: #c4c8da; --radius: 12px; --base: 18px; } [data-theme="tokyonight"][data-mode="dark"] { --surface: #1a1b26; --card: #24283b; --ink: #c0caf5; --ink-soft:#888DB4; --accent: #7aa2f7; --on-accent: #1a1b26; --celebrate: #e0af68; --danger: #f7768e; --line: #3b4261; } /* Rosé Pine: Dawn / Rosé Pine */ [data-theme="rose-pine"] { --surface: #faf4ed; --card: #fffaf3; --ink: #575279; --ink-soft:#716D87; --accent:#77688E; --on-accent: #fffaf3; --celebrate: #ea9d34; --danger:#A35970; --line: #dfdad9; --radius: 12px; --base: 18px; } [data-theme="rose-pine"][data-mode="dark"] { --surface: #191724; --card: #1f1d2e; --ink: #e0def4; --ink-soft: #908caa; --accent: #c4a7e7; --on-accent: #191724; --celebrate: #f6c177; --danger: #eb6f92; --line: #26233a; } /* Gruvbox: Light / Dark */ [data-theme="gruvbox"] { --surface: #fbf1c7; --card: #f2e5bc; --ink: #3c3836; --ink-soft: #665c54; --accent: #af3a03; --on-accent: #fbf1c7; --celebrate: #b57614; --danger: #9d0006; --line: #d5c4a1; --radius: 12px; --base: 18px; } [data-theme="gruvbox"][data-mode="dark"] { --surface: #282828; --card: #3c3836; --ink: #ebdbb2; --ink-soft:#B0A18C; --accent: #fe8019; --on-accent: #282828; --celebrate: #fabd2f; --danger:#FB7B6C; --line: #504945; } /* Solarized: Light / Dark */ [data-theme="solarized"] { --surface: #fdf6e3; --card: #eee8d5; --ink:#566C73; --ink-soft:#596B6D; --accent:#196CA2; --on-accent: #fdf6e3; --celebrate: #b58900; --danger:#C42C29; --line: #ddd6c1; --radius: 12px; --base: 18px; } [data-theme="solarized"][data-mode="dark"] { --surface: #002b36; --card: #073642; --ink: #93a1a1; --ink-soft:#879CA1; --accent:#4E9FDC; --on-accent:#000000; --celebrate: #b58900; --danger:#E77977; --line: #0e4250; } /* Kanagawa: Lotus / Wave */ [data-theme="kanagawa"] { --surface: #f2ecbc; --card: #e7dba0; --ink: #545464; --ink-soft:#636053; --accent:#475F8C; --on-accent: #f2ecbc; --celebrate: #cc6d00; --danger:#A63746; --line: #d5cea3; --radius: 12px; --base: 18px; } [data-theme="kanagawa"][data-mode="dark"] { --surface: #1f1f28; --card: #2a2a37; --ink: #dcd7ba; --ink-soft: #9e9b8d; --accent: #7e9cd8; --on-accent: #1f1f28; --celebrate: #e6c384; --danger: #ff5d62; --line: #363646; } /* Nightfox: Dayfox / Nightfox */ [data-theme="nightfox"] { --surface: #f6f2ee; --card: #f2e9e1; --ink: #3d2b5a; --ink-soft: #6b5f78; --accent: #2848a9; --on-accent: #f6f2ee; --celebrate: #ac5402; --danger: #a5222f; --line: #e4dcd4; --radius: 12px; --base: 18px; } [data-theme="nightfox"][data-mode="dark"] { --surface: #192330; --card: #212e3f; --ink: #cdcecf; --ink-soft: #8c97a8; --accent: #719cd6; --on-accent: #131a24; --celebrate: #dbc074; --danger:#D6778F; --line: #29394f; } /* One: One Light / One Dark */ [data-theme="onedark"] { --surface: #fafafa; --card: #ffffff; --ink: #383a42; --ink-soft: #696c77; --accent:#3B6EDA; --on-accent: #ffffff; --celebrate: #c18401; --danger:#C74942; --line: #dbdbdc; --radius: 12px; --base: 18px; } [data-theme="onedark"][data-mode="dark"] { --surface: #282c34; --card: #31353f; --ink: #abb2bf; --ink-soft:#989FAC; --accent: #61afef; --on-accent: #282c34; --celebrate: #e5c07b; --danger:#E78188; --line: #3e4451; } /* Everforest: Light / Dark */ [data-theme="everforest"] { --surface: #fffbef; --card: #f4f0d9; --ink: #5c6a72; --ink-soft:#646E63; --accent:#657301; --on-accent: #fffbef; --celebrate: #dfa000; --danger:#BB4240; --line: #e6e2cc; --radius: 12px; --base: 18px; } [data-theme="everforest"][data-mode="dark"] { --surface: #2d353b; --card: #343f44; --ink: #d3c6aa; --ink-soft:#9FACA3; --accent: #a7c080; --on-accent: #2d353b; --celebrate: #dbbc7f; --danger:#E79091; --line: #475258; } /* Nord: Snow Storm / Polar Night */ [data-theme="nord"] { --surface: #eceff4; --card: #ffffff; --ink: #2e3440; --ink-soft: #4c566a; --accent:#4E6F94; --on-accent: #eceff4; --celebrate: #a5741c; --danger:#A6535C; --line: #d8dee9; --radius: 12px; --base: 18px; } [data-theme="nord"][data-mode="dark"] { --surface: #2e3440; --card: #3b4252; --ink: #eceff4; --ink-soft: #a8b2c6; --accent: #88c0d0; --on-accent: #2e3440; --celebrate: #ebcb8b; --danger:#D89FA5; --line: #434c5e; } /* Dracula: Alucard / Dracula */ [data-theme="dracula"] { --surface: #f8f8f2; --card: #ffffff; --ink: #282a36; --ink-soft: #55596b; --accent: #644ac9; --on-accent: #f8f8f2; --celebrate: #a34d14; --danger: #cb3a2a; --line: #e0e0dc; --radius: 12px; --base: 18px; } [data-theme="dracula"][data-mode="dark"] { --surface: #282a36; --card: #343746; --ink: #f8f8f2; --ink-soft: #a9b1d6; --accent: #bd93f9; --on-accent: #282a36; --celebrate: #ffb86c; --danger:#FF7676; --line: #44475a; } /* Material: Light / Ocean */ [data-theme="material"] { --surface: #fafafa; --card: #ffffff; --ink: #37474f; --ink-soft:#5A7782; --accent:#008075; --on-accent: #ffffff; --celebrate: #b26a00; --danger:#D43531; --line: #e0e0e0; --radius: 12px; --base: 18px; } [data-theme="material"][data-mode="dark"] { --surface: #263238; --card: #314549; --ink: #eeffff; --ink-soft: #b0bec5; --accent: #80cbc4; --on-accent: #263238; --celebrate: #ffcb6b; --danger:#F0959A; --line: #37474f; } /* Oxocarbon: Carbon light / Oxocarbon */ [data-theme="oxocarbon"] { --surface: #f2f4f8; --card: #ffffff; --ink: #161616; --ink-soft: #525252; --accent: #0f62fe; --on-accent: #ffffff; --celebrate: #8e6a00; --danger: #da1e28; --line: #dde1e6; --radius: 12px; --base: 18px; } [data-theme="oxocarbon"][data-mode="dark"] { --surface: #161616; --card: #262626; --ink: #f2f4f8; --ink-soft: #9a9ea4; --accent: #33b1ff; --on-accent: #161616; --celebrate: #ff7eb6; --danger: #ee5396; --line: #393939; } /* ---------- Colour-vision themes ---------- */ /* Blue/orange axis — safe for deuteranopia & protanopia (red-green) */ [data-theme="cvd-blue"] { --surface: #f5f8fb; --card: #ffffff; --ink: #1b3a55; --ink-soft: #4e6a80; --accent: #0072b2; --on-accent: #ffffff; --celebrate: #e69f00; --danger:#BD5200; --line: #cfdce6; --radius: 12px; --base: 18px; } [data-theme="cvd-blue"][data-mode="dark"] { --surface: #0e1b26; --card: #182b3a; --ink: #e6eef5; --ink-soft: #9db2c4; --accent: #56b4e9; --on-accent: #0e1b26; --celebrate: #e69f00; --danger: #ff8a50; --line: #2a4257; } /* Red/teal axis — safe for tritanopia (blue-yellow) */ [data-theme="cvd-red-teal"] { --surface: #fbf6f4; --card: #ffffff; --ink: #2a2226; --ink-soft: #6a5a60; --accent: #c43d4b; --on-accent: #ffffff; --celebrate: #0f8b8d; --danger: #92132b; --line: #e6d9d6; --radius: 12px; --base: 18px; } [data-theme="cvd-red-teal"][data-mode="dark"] { --surface: #1c1719; --card: #2b2326; --ink: #f0e8ea; --ink-soft: #a8999d; --accent: #e36b77; --on-accent: #1c1719; --celebrate: #3fb8ba; --danger: #ff5c6c; --line: #3e3336; } /* Luminance only — achromatopsia, or anyone who wants hue out of the picture */ [data-theme="mono"] { --surface: #fafafa; --card: #ffffff; --ink: #111111; --ink-soft: #4a4a4a; --accent: #1a1a1a; --on-accent: #ffffff; --celebrate: #3d3d3d; --danger: #2b2b2b; --line: #c9c9c9; --radius: 12px; --base: 18px; } [data-theme="mono"][data-mode="dark"] { --surface: #121212; --card: #1e1e1e; --ink: #f5f5f5; --ink-soft: #b3b3b3; --accent: #e6e6e6; --on-accent: #121212; --celebrate: #cfcfcf; --danger: #e0e0e0; --line: #494949; } /* Member-mark colours: fixed across ALL themes and both modes — identity, not decoration. The Okabe-Ito palette, proven distinguishable across all common colour-vision deficiencies (black swapped for grey to survive dark surfaces). Themes may not repaint these. */ :root { --mark-red: #d55e00; --mark-orange: #e69f00; --mark-yellow: #f0e442; --mark-green: #009e73; --mark-blue: #0072b2; --mark-sky: #56b4e9; --mark-pink: #cc79a7; --mark-grey: #595959; }