From bdbe7b6914dfcff60e97b90a117fa21bd5441fe8 Mon Sep 17 00:00:00 2001 From: Andre Padez Date: Wed, 15 Oct 2025 19:35:43 +0100 Subject: [PATCH] css now theme aware --- src/maze.css | 74 +++++++++++++++++++++++++++------------------------- 1 file changed, 38 insertions(+), 36 deletions(-) diff --git a/src/maze.css b/src/maze.css index ef8c9d6..110ccf3 100644 --- a/src/maze.css +++ b/src/maze.css @@ -17,16 +17,16 @@ #maze { position: relative; - background-color: #1e2030; /* Tokyo Night card background */ + background-color: var(--card, #1e2030); background-image: - radial-gradient(circle at 0% 0%, transparent 50%, rgba(130, 170, 255, 0.03) 50%), - radial-gradient(circle at center, rgba(130, 170, 255, 0.03) 50%, transparent 50%), - radial-gradient(circle at 100% 100%, transparent 50%, rgba(130, 170, 255, 0.03) 50%), - radial-gradient(circle at 0% 100%, transparent 50%, rgba(130, 170, 255, 0.03) 50%), - radial-gradient(circle at 100% 0%, transparent 50%, rgba(130, 170, 255, 0.03) 50%); + radial-gradient(circle at 0% 0%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%), + radial-gradient(circle at center, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%, transparent 50%), + radial-gradient(circle at 100% 100%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%), + radial-gradient(circle at 0% 100%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%), + radial-gradient(circle at 100% 0%, transparent 50%, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 50%); background-size: 8em 8em; border-radius: 0.5rem; - box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px rgba(130, 170, 255, 0.05); + box-shadow: 0 0 10px rgba(27, 29, 43, 0.6), inset 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 5%, transparent); } /* ========================================================= @@ -49,7 +49,7 @@ /* Number cells (rows/cols) */ #maze .number { - color: #828bb8; /* Tokyo Night muted foreground */ + color: var(--muted-foreground, #828bb8); font-weight: 600; font-family: "Fira Code", monospace; font-size: var(--number-font-size); @@ -64,10 +64,10 @@ /* Relative highlight (your tweak) */ #maze.is-relative .number.is-active { - background: #ffc777; /* Tokyo Night warning/yellow */ + background: var(--accent, #ffc777); border-radius: 2px; font-size: 1.5rem; - color: #1b1d2b; /* Tokyo Night black */ + color: var(--accent-foreground, #1b1d2b); } /* ========================================================= @@ -81,13 +81,13 @@ /* 🟢 Corridors (non-wall/door/sentinel) */ #maze .maze-row > div[data-r][data-c]:not(.wall):not(.door):not(.sentinel) { - background-color: #2f334d; /* Tokyo Night muted */ + background-color: var(--muted, #2f334d); background-image: - linear-gradient(135deg, rgba(130,170,255,0.08) 25%, transparent 25%), - linear-gradient(225deg, rgba(130,170,255,0.06) 25%, transparent 25%), - linear-gradient(45deg, rgba(130,170,255,0.04) 25%, transparent 25%), - linear-gradient(315deg, rgba(130,170,255,0.03) 25%, transparent 25%); - background-size: var(--cell-size) var(--cell-size); /* scale with cell size */ + linear-gradient(135deg, color-mix(in srgb, var(--primary, #82aaff) 8%, transparent) 25%, transparent 25%), + linear-gradient(225deg, color-mix(in srgb, var(--primary, #82aaff) 6%, transparent) 25%, transparent 25%), + linear-gradient(45deg, color-mix(in srgb, var(--primary, #82aaff) 4%, transparent) 25%, transparent 25%), + linear-gradient(315deg, color-mix(in srgb, var(--primary, #82aaff) 3%, transparent) 25%, transparent 25%); + background-size: var(--cell-size) var(--cell-size); box-shadow: inset 0 0 3px rgba(27,29,43,0.4); } @@ -95,7 +95,7 @@ #maze .maze-row > div[data-r][data-c].wall, #maze .maze-row > div[data-r][data-c].nubbin.wall, #maze .maze-row > div[data-r][data-c].door.exit { - background-color: #222436; /* Tokyo Night background */ + background-color: var(--background, #222436); background-image: linear-gradient(45deg, rgba(27,29,43,0.5) 45%, transparent 55%), linear-gradient(to bottom, rgba(27,29,43,0.4) 45%, transparent 55%); @@ -105,18 +105,18 @@ /* 🔒 Door (exit) — FIXED BACKGROUND */ #maze .maze-row > div[data-r][data-c].door.exit { - background: radial-gradient(circle at center, #4fd6be 10%, #1e2030 90%) !important; + background: radial-gradient(circle at center, var(--chart-4, #4fd6be) 10%, var(--card, #1e2030) 90%) !important; box-shadow: - 0 0 6px rgba(79, 214, 190, 0.5), - inset 0 0 4px rgba(79, 214, 190, 0.3); + 0 0 6px color-mix(in srgb, var(--chart-4, #4fd6be) 50%, transparent), + inset 0 0 4px color-mix(in srgb, var(--chart-4, #4fd6be) 30%, transparent); border-radius: 3px; z-index: 2; } #maze .maze-row > div[data-r][data-c].door.exit::after { content: "\1F6AA"; - color: #4fd6be; /* Tokyo Night teal */ - text-shadow: 0 0 6px rgba(79, 214, 190, 0.6); + color: var(--chart-4, #4fd6be); + text-shadow: 0 0 6px color-mix(in srgb, var(--chart-4, #4fd6be) 60%, transparent); position: absolute; top: -4px; left: -2px; @@ -142,9 +142,9 @@ /* 🧍 Hero */ #maze .maze-row > div[data-r][data-c].hero { - background-color: #82aaff; /* Tokyo Night primary blue */ + background-color: var(--primary, #82aaff); border-radius: 50%; - box-shadow: 0 0 8px rgba(130, 170, 255, 0.7); + box-shadow: 0 0 8px color-mix(in srgb, var(--primary, #82aaff) 70%, transparent); } #maze.face-right .maze-row > div[data-r][data-c].hero::after { transform: scale(-1, 1); } #maze .maze-row > div[data-r][data-c].hero::after { content: "\1F6B6" !important; } @@ -153,15 +153,15 @@ #maze .maze-row > div[data-r][data-c].sentinel.wall { background: transparent; } #maze .maze-row > div[data-r][data-c].sentinel.wall::after { content: "\1F40A"; - color: #828bb8; /* Tokyo Night muted foreground */ + color: var(--muted-foreground, #828bb8); } #maze .maze-row > div[data-r][data-c].sentinel.wall:nth-of-type(3n)::after { content: "\1F40D"; } /* 🗝️ Key */ #maze .maze-row > div[data-r][data-c].key::after { content: "\1F511"; - color: #ffc777; /* Tokyo Night warning/yellow */ - text-shadow: 0 0 6px rgba(255, 199, 119, 0.8); + color: var(--accent, #ffc777); + text-shadow: 0 0 6px color-mix(in srgb, var(--accent, #ffc777) 80%, transparent); } /* ========================================================= @@ -176,7 +176,7 @@ font-family: "Fira Code", monospace; font-weight: 600; font-size: 1em; - color: #c8d3f5; /* Tokyo Night foreground */ + color: var(--foreground, #c8d3f5); } #maze_score { flex: 1; @@ -184,11 +184,11 @@ } #maze_score::before { content: "Score: "; - color: #828bb8; /* Tokyo Night muted foreground */ + color: var(--muted-foreground, #828bb8); } #maze_score.has-key::after { content: "\00a0\1F511"; - color: #ffc777; /* Tokyo Night warning/yellow for key */ + color: var(--accent, #ffc777); } #maze_message { flex: 3; @@ -197,7 +197,9 @@ /* Subtle step trail effect for counted moves */ #maze .maze-row > div[data-r][data-c].trail { - box-shadow: inset 0 0 6px rgba(130, 170, 255, 0.6), 0 0 6px rgba(130, 170, 255, 0.35); + box-shadow: + inset 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 60%, transparent), + 0 0 6px color-mix(in srgb, var(--primary, #82aaff) 35%, transparent); animation: maze-trail-fade 16ms ease-out; } @@ -205,16 +207,16 @@ #maze .maze-row > div[data-r][data-c].invalid-move { animation: maze-invalid-pulse 180ms ease-out; box-shadow: - 0 0 12px rgba(255, 117, 127, 0.85), - 0 0 24px rgba(255, 117, 127, 0.45); + 0 0 12px color-mix(in srgb, var(--destructive, #c53b53) 85%, transparent), + 0 0 24px color-mix(in srgb, var(--destructive, #c53b53) 45%, transparent); } @keyframes maze-invalid-pulse { 0% { transform: scale(1.02); box-shadow: - 0 0 16px rgba(255, 117, 127, 0.95), - 0 0 28px rgba(255, 117, 127, 0.55); + 0 0 16px color-mix(in srgb, var(--destructive, #c53b53) 95%, transparent), + 0 0 28px color-mix(in srgb, var(--destructive, #c53b53) 55%, transparent); } 100% { transform: none; @@ -224,7 +226,7 @@ @keyframes maze-trail-fade { - from { background-color: rgba(130, 170, 255, 0.25); } + from { background-color: color-mix(in srgb, var(--primary, #82aaff) 25%, transparent); } to { background-color: transparent; } }