JonKazama-Hellion/Hellion-NewTab
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

refactor(css): inherit formula accent tokens from base, keep per-theme alpha as --*-pct

Browse Source
This commit is contained in:
Jon Kazama
2026-06-13 19:38:55 +02:00
parent df8a187af2
commit ab07c94141
1 changed files with 32 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.css
+26 -55
View File
@@ -108,9 +108,9 @@
============================================ */ ============================================ */
[data-theme="nebula"] { [data-theme="nebula"] {
--accent: #b359ff; --accent: #b359ff;
--accent-dim: rgba(179, 89, 255, 0.12); --accent-glow-pct: 5%;
--accent-glow: rgba(179, 89, 255, 0.05); --board-hover-border-pct: 18%;
--border-accent: rgba(179, 92, 255, 0.25); --logo-shadow-pct: 35%;
--bg-primary: #050308; --bg-primary: #050308;
--bg-board: rgba(10, 6, 14, 0.55); --bg-board: rgba(10, 6, 14, 0.55);
--border: rgba(255, 255, 255, 0.055); --border: rgba(255, 255, 255, 0.055);
@@ -121,9 +121,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at center, rgba(10,6,14,0.3) 0%, rgba(5,3,8,0.85) 100%); --overlay-bg: radial-gradient(circle at center, rgba(10,6,14,0.3) 0%, rgba(5,3,8,0.85) 100%);
--header-bg: rgba(10,6,14,0.92); --header-bg: rgba(10,6,14,0.92);
--board-hover-border: rgba(179,89,255,0.18);
--toggle-on-bg: rgba(214,92,255,0.22); --toggle-on-bg: rgba(214,92,255,0.22);
--logo-shadow: rgba(179,89,255,0.35);
--bg-solid-fallback: #0a060e; --bg-solid-fallback: #0a060e;
} }
@@ -132,9 +130,9 @@
============================================ */ ============================================ */
[data-theme="crescent"] { [data-theme="crescent"] {
--accent: #d4bd8a; --accent: #d4bd8a;
--accent-dim: rgba(212, 189, 138, 0.12); --accent-glow-pct: 5%;
--accent-glow: rgba(212, 189, 138, 0.05); --board-hover-border-pct: 20%;
--border-accent: rgba(212, 189, 138, 0.25); --logo-shadow-pct: 40%;
--bg-primary: #06080f; --bg-primary: #06080f;
--bg-board: rgba(8, 12, 22, 0.45); --bg-board: rgba(8, 12, 22, 0.45);
--border: rgba(212, 189, 138, 0.10); --border: rgba(212, 189, 138, 0.10);
@@ -145,9 +143,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at center, rgba(6,8,15,0.2) 0%, rgba(6,8,15,0.9) 100%); --overlay-bg: radial-gradient(circle at center, rgba(6,8,15,0.2) 0%, rgba(6,8,15,0.9) 100%);
--header-bg: rgba(6,8,15,0.95); --header-bg: rgba(6,8,15,0.95);
--board-hover-border: rgba(212, 189, 138, 0.20);
--toggle-on-bg: rgba(200,168,74,0.22); --toggle-on-bg: rgba(200,168,74,0.22);
--logo-shadow: rgba(212, 189, 138, 0.40);
--bg-solid-fallback: #080c16; --bg-solid-fallback: #080c16;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
@@ -157,9 +153,7 @@
============================================ */ ============================================ */
[data-theme="event-horizon"] { [data-theme="event-horizon"] {
--accent: #9d5cff; --accent: #9d5cff;
--accent-dim: rgba(157, 92, 255, 0.12); --border-accent-pct: 28%;
--accent-glow: rgba(157, 92, 255, 0.08);
--border-accent: rgba(157, 92, 255, 0.28);
--bg-primary: #040308; --bg-primary: #040308;
--bg-board: rgba(8, 5, 15, 0.45); --bg-board: rgba(8, 5, 15, 0.45);
--border: rgba(157, 92, 255, 0.12); --border: rgba(157, 92, 255, 0.12);
@@ -170,9 +164,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at center, rgba(4,3,8,0.2) 0%, rgba(4,3,8,0.95) 100%); --overlay-bg: radial-gradient(circle at center, rgba(4,3,8,0.2) 0%, rgba(4,3,8,0.95) 100%);
--header-bg: rgba(4,3,8,0.96); --header-bg: rgba(4,3,8,0.96);
--board-hover-border: rgba(157, 92, 255, 0.22);
--toggle-on-bg: rgba(224,128,48,0.22); --toggle-on-bg: rgba(224,128,48,0.22);
--logo-shadow: rgba(157, 92, 255, 0.45);
--bg-solid-fallback: #08050f; --bg-solid-fallback: #08050f;
} }
@@ -181,9 +173,8 @@
============================================ */ ============================================ */
[data-theme="merchantman"] { [data-theme="merchantman"] {
--accent: #2eb8b8; --accent: #2eb8b8;
--accent-dim: rgba(46, 184, 184, 0.12); --accent-glow-pct: 6%;
--accent-glow: rgba(46, 184, 184, 0.06); --board-hover-border-pct: 20%;
--border-accent: rgba(46, 184, 184, 0.25);
--bg-primary: #040808; --bg-primary: #040808;
--bg-board: rgba(6, 10, 10, 0.58); --bg-board: rgba(6, 10, 10, 0.58);
--border: rgba(46, 184, 184, 0.10); --border: rgba(46, 184, 184, 0.10);
@@ -194,9 +185,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at 30% 40%, rgba(4,8,8,0.2) 0%, rgba(4,8,8,0.92) 100%); --overlay-bg: radial-gradient(circle at 30% 40%, rgba(4,8,8,0.2) 0%, rgba(4,8,8,0.92) 100%);
--header-bg: rgba(4,8,8,0.95); --header-bg: rgba(4,8,8,0.95);
--board-hover-border: rgba(46, 184, 184, 0.20);
--toggle-on-bg: rgba(78,207,207,0.22); --toggle-on-bg: rgba(78,207,207,0.22);
--logo-shadow: rgba(46, 184, 184, 0.45);
--bg-solid-fallback: #060a0a; --bg-solid-fallback: #060a0a;
} }
@@ -205,9 +194,8 @@
============================================ */ ============================================ */
[data-theme="julia-jin"] { [data-theme="julia-jin"] {
--accent: #7db3ff; --accent: #7db3ff;
--accent-dim: rgba(125, 179, 255, 0.12); --border-accent-pct: 30%;
--accent-glow: rgba(125, 179, 255, 0.08); --logo-shadow-pct: 50%;
--border-accent: rgba(125, 179, 255, 0.30);
--bg-primary: #03050a; --bg-primary: #03050a;
--bg-board: rgba(7, 10, 20, 0.60); --bg-board: rgba(7, 10, 20, 0.60);
--border: rgba(125, 179, 255, 0.12); --border: rgba(125, 179, 255, 0.12);
@@ -218,9 +206,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: linear-gradient(180deg, rgba(3,5,10,0.85) 0%, rgba(3,5,10,0.25) 50%, rgba(3,5,10,0.92) 100%); --overlay-bg: linear-gradient(180deg, rgba(3,5,10,0.85) 0%, rgba(3,5,10,0.25) 50%, rgba(3,5,10,0.92) 100%);
--header-bg: rgba(3,5,10,0.94); --header-bg: rgba(3,5,10,0.94);
--board-hover-border: rgba(125, 179, 255, 0.22);
--toggle-on-bg: rgba(91,159,255,0.22); --toggle-on-bg: rgba(91,159,255,0.22);
--logo-shadow: rgba(125, 179, 255, 0.50);
--bg-solid-fallback: #070a14; --bg-solid-fallback: #070a14;
} }
@@ -229,9 +215,7 @@
============================================ */ ============================================ */
[data-theme="sc-sunset"] { [data-theme="sc-sunset"] {
--accent: #ff8c3d; --accent: #ff8c3d;
--accent-dim: rgba(255, 140, 61, 0.12); --border-accent-pct: 28%;
--accent-glow: rgba(255, 140, 61, 0.08);
--border-accent: rgba(255, 140, 61, 0.28);
--bg-primary: #080503; --bg-primary: #080503;
--bg-board: rgba(15, 10, 8, 0.55); --bg-board: rgba(15, 10, 8, 0.55);
--border: rgba(255, 140, 61, 0.10); --border: rgba(255, 140, 61, 0.10);
@@ -242,9 +226,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at 50% 60%, rgba(8,5,3,0.1) 0%, rgba(8,5,3,0.92) 100%); --overlay-bg: radial-gradient(circle at 50% 60%, rgba(8,5,3,0.1) 0%, rgba(8,5,3,0.92) 100%);
--header-bg: rgba(8,5,3,0.94); --header-bg: rgba(8,5,3,0.94);
--board-hover-border: rgba(255, 140, 61, 0.22);
--toggle-on-bg: rgba(240,124,48,0.22); --toggle-on-bg: rgba(240,124,48,0.22);
--logo-shadow: rgba(255, 140, 61, 0.45);
--bg-solid-fallback: #0f0a08; --bg-solid-fallback: #0f0a08;
} }
@@ -253,9 +235,10 @@
============================================ */ ============================================ */
[data-theme="hellion-hud"] { [data-theme="hellion-hud"] {
--accent: #32ff6a; --accent: #32ff6a;
--accent-dim: rgba(50, 255, 106, 0.10); --accent-dim-pct: 10%;
--accent-glow: rgba(50, 255, 106, 0.05); --accent-glow-pct: 5%;
--border-accent: rgba(50, 255, 106, 0.25); --board-hover-border-pct: 20%;
--logo-shadow-pct: 40%;
--bg-primary: #030503; --bg-primary: #030503;
--bg-board: rgba(5, 8, 5, 0.65); --bg-board: rgba(5, 8, 5, 0.65);
--border: rgba(50, 255, 106, 0.12); --border: rgba(50, 255, 106, 0.12);
@@ -266,9 +249,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at center, rgba(3,5,3,0.15) 0%, rgba(3,5,3,0.95) 100%); --overlay-bg: radial-gradient(circle at center, rgba(3,5,3,0.15) 0%, rgba(3,5,3,0.95) 100%);
--header-bg: rgba(3,5,3,0.96); --header-bg: rgba(3,5,3,0.96);
--board-hover-border: rgba(50, 255, 106, 0.20);
--toggle-on-bg: rgba(34,204,68,0.20); --toggle-on-bg: rgba(34,204,68,0.20);
--logo-shadow: rgba(50, 255, 106, 0.40);
--bg-solid-fallback: #050805; --bg-solid-fallback: #050805;
--danger: #ff4d4d; --danger: #ff4d4d;
} }
@@ -278,9 +259,9 @@
============================================ */ ============================================ */
[data-theme="hellion-energy"] { [data-theme="hellion-energy"] {
--accent: #1eff8e; --accent: #1eff8e;
--accent-dim: rgba(30, 255, 142, 0.12); --border-accent-pct: 30%;
--accent-glow: rgba(30, 255, 142, 0.08); --board-hover-border-pct: 25%;
--border-accent: rgba(30, 255, 142, 0.30); --logo-shadow-pct: 60%;
--bg-primary: #020503; --bg-primary: #020503;
--bg-board: rgba(4, 7, 5, 0.60); --bg-board: rgba(4, 7, 5, 0.60);
--border: rgba(30, 255, 142, 0.12); --border: rgba(30, 255, 142, 0.12);
@@ -291,9 +272,7 @@
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
--overlay-bg: radial-gradient(circle at center, rgba(2,5,3,0.1) 0%, rgba(2,5,3,0.95) 100%); --overlay-bg: radial-gradient(circle at center, rgba(2,5,3,0.1) 0%, rgba(2,5,3,0.95) 100%);
--header-bg: rgba(2,5,3,0.96); --header-bg: rgba(2,5,3,0.96);
--board-hover-border: rgba(30, 255, 142, 0.25);
--toggle-on-bg: rgba(0,232,122,0.18); --toggle-on-bg: rgba(0,232,122,0.18);
--logo-shadow: rgba(30, 255, 142, 0.60);
--bg-solid-fallback: #040705; --bg-solid-fallback: #040705;
} }
@@ -302,9 +281,9 @@
============================================ */ ============================================ */
[data-theme="satisfactory"] { [data-theme="satisfactory"] {
--accent: #00b4d8; --accent: #00b4d8;
--accent-dim: rgba(0, 180, 216, 0.12); --border-accent-pct: 35%;
--accent-glow: rgba(0, 180, 216, 0.08); --board-hover-border-pct: 25%;
--border-accent: rgba(0, 180, 216, 0.35); --logo-shadow-pct: 40%;
--bg-primary: #1a0f08; --bg-primary: #1a0f08;
--bg-board: rgba(26, 15, 8, 0.65); --bg-board: rgba(26, 15, 8, 0.65);
--border: rgba(0, 180, 216, 0.15); --border: rgba(0, 180, 216, 0.15);
@@ -318,9 +297,7 @@
rgba(26,15,8,0.15) 50%, rgba(26,15,8,0.15) 50%,
rgba(26,15,8,0.90) 100%); rgba(26,15,8,0.90) 100%);
--header-bg: rgba(26,15,8,0.95); --header-bg: rgba(26,15,8,0.95);
--board-hover-border: rgba(0, 180, 216, 0.25);
--toggle-on-bg: rgba(0, 180, 216, 0.20); --toggle-on-bg: rgba(0, 180, 216, 0.20);
--logo-shadow: rgba(0, 180, 216, 0.40);
--bg-solid-fallback: #1a0f08; --bg-solid-fallback: #1a0f08;
} }
@@ -329,9 +306,8 @@
============================================ */ ============================================ */
[data-theme="avorion"] { [data-theme="avorion"] {
--accent: #2ec4a0; --accent: #2ec4a0;
--accent-dim: rgba(46, 196, 160, 0.12); --border-accent-pct: 30%;
--accent-glow: rgba(46, 196, 160, 0.08); --logo-shadow-pct: 50%;
--border-accent: rgba(46, 196, 160, 0.30);
--bg-primary: #020d0c; --bg-primary: #020d0c;
--bg-board: rgba(2, 13, 12, 0.60); --bg-board: rgba(2, 13, 12, 0.60);
--border: rgba(46, 196, 160, 0.12); --border: rgba(46, 196, 160, 0.12);
@@ -344,9 +320,7 @@
transparent 0%, transparent 0%,
rgba(2, 13, 12, 0.95) 100%); rgba(2, 13, 12, 0.95) 100%);
--header-bg: rgba(2, 13, 12, 0.94); --header-bg: rgba(2, 13, 12, 0.94);
--board-hover-border: rgba(46, 196, 160, 0.22);
--toggle-on-bg: rgba(46, 196, 160, 0.18); --toggle-on-bg: rgba(46, 196, 160, 0.18);
--logo-shadow: rgba(46, 196, 160, 0.50);
--bg-solid-fallback: #020d0c; --bg-solid-fallback: #020d0c;
} }
@@ -355,9 +329,8 @@
============================================ */ ============================================ */
[data-theme="hellion-stealth"] { [data-theme="hellion-stealth"] {
--accent: #5ec2ff; --accent: #5ec2ff;
--accent-dim: rgba(94, 194, 255, 0.12); --border-accent-pct: 35%;
--accent-glow: rgba(94, 194, 255, 0.08); --board-hover-border-pct: 25%;
--border-accent: rgba(94, 194, 255, 0.35);
--bg-primary: #0d0f12; --bg-primary: #0d0f12;
--bg-board: rgba(13, 15, 18, 0.70); --bg-board: rgba(13, 15, 18, 0.70);
--border: rgba(94, 194, 255, 0.15); --border: rgba(94, 194, 255, 0.15);
@@ -370,9 +343,7 @@
transparent 0%, transparent 0%,
rgba(13, 15, 18, 0.90) 100%); rgba(13, 15, 18, 0.90) 100%);
--header-bg: rgba(13, 15, 18, 0.96); --header-bg: rgba(13, 15, 18, 0.96);
--board-hover-border: rgba(94, 194, 255, 0.25);
--toggle-on-bg: rgba(94, 194, 255, 0.20); --toggle-on-bg: rgba(94, 194, 255, 0.20);
--logo-shadow: rgba(94, 194, 255, 0.45);
--bg-solid-fallback: #0d0f12; --bg-solid-fallback: #0d0f12;
} }
} }