nandi/gleanpublic⑂ Fork 0
⑂ 44614ce
Commits
⬇ Clone ▾
git clone https://git.rickub.com/nandi/glean.git
git clone ssh://git@rickub.com/nandi/glean.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

Refine dark theme color palette and shadowsUnverified

Julien Robert committed 2026-04-22T10:36:03+02:00 Browse files
44614ce parent: 561b114
modified docs/design.md +7 -7
@@ -30,14 +30,14 @@ Logo is a stylized bee: body with horizontal stripes (like text lines on a page)
3030
3131 | Token | Value | Use |
3232 | ------------------ | ------------------------ | ----------------------------- |
33-| `--spot-bg` | `#0f1f1a` | Page background, sidebar |
33+| `--spot-bg` | `#0a1814` | Page background, sidebar |
3434 | `--spot-surface` | `#152b24` | Card background |
35-| `--spot-hover` | `#1a362e` | Hover state, input background |
36-| `--spot-text` | `#ffffff` | Primary text |
37-| `--spot-secondary` | `rgba(255,255,255,0.70)` | Secondary/metadata text |
38-| `--spot-body` | `rgba(255,255,255,0.87)` | Body copy, article content |
39-| `--spot-muted` | `rgba(255,255,255,0.25)` | Disabled/tertiary text |
40-| `--spot-divider` | `rgba(255,255,255,0.08)` | Borders, dividers |
35+| `--spot-hover` | `#1e3c33` | Hover state, input background |
36+| `--spot-text` | `#f2f2f2` | Primary text |
37+| `--spot-secondary` | `rgba(255,255,255,0.78)` | Secondary/metadata text |
38+| `--spot-body` | `rgba(255,255,255,0.92)` | Body copy, article content |
39+| `--spot-muted` | `rgba(255,255,255,0.42)` | Disabled/tertiary text |
40+| `--spot-divider` | `rgba(255,255,255,0.12)` | Borders, dividers |
4141 | `--spot-outline` | `rgba(255,255,255,0.20)` | Button borders, input borders |
4242
4343 ### Light Theme
@@ -30,14 +30,14 @@ Logo is a stylized bee: body with horizontal stripes (like text lines on a page)
30 30
31 | Token | Value | Use |31 | Token | Value | Use |
32 | ------------------ | ------------------------ | ----------------------------- |32 | ------------------ | ------------------------ | ----------------------------- |
33-| `--spot-bg` | `#0f1f1a` | Page background, sidebar |33+| `--spot-bg` | `#0a1814` | Page background, sidebar |
34 | `--spot-surface` | `#152b24` | Card background |34 | `--spot-surface` | `#152b24` | Card background |
35-| `--spot-hover` | `#1a362e` | Hover state, input background |35+| `--spot-hover` | `#1e3c33` | Hover state, input background |
36-| `--spot-text` | `#ffffff` | Primary text |36+| `--spot-text` | `#f2f2f2` | Primary text |
37-| `--spot-secondary` | `rgba(255,255,255,0.70)` | Secondary/metadata text |37+| `--spot-secondary` | `rgba(255,255,255,0.78)` | Secondary/metadata text |
38-| `--spot-body` | `rgba(255,255,255,0.87)` | Body copy, article content |38+| `--spot-body` | `rgba(255,255,255,0.92)` | Body copy, article content |
39-| `--spot-muted` | `rgba(255,255,255,0.25)` | Disabled/tertiary text |39+| `--spot-muted` | `rgba(255,255,255,0.42)` | Disabled/tertiary text |
40-| `--spot-divider` | `rgba(255,255,255,0.08)` | Borders, dividers |40+| `--spot-divider` | `rgba(255,255,255,0.12)` | Borders, dividers |
41 | `--spot-outline` | `rgba(255,255,255,0.20)` | Button borders, input borders |41 | `--spot-outline` | `rgba(255,255,255,0.20)` | Button borders, input borders |
42 42
43 ### Light Theme43 ### Light Theme
modified static/input.css +13 -13
@@ -4,22 +4,22 @@
44
55 @layer base {
66 :root {
7- --spot-bg: #0f1f1a;
7+ --spot-bg: #0a1814;
88 --spot-surface: #152b24;
9- --spot-hover: #1a362e;
10- --spot-hover-50: rgba(26,54,46,0.5);
11- --spot-text: #ffffff;
12- --spot-secondary: rgba(255,255,255,0.70);
13- --spot-body: rgba(255,255,255,0.87);
14- --spot-muted: rgba(255,255,255,0.25);
15- --spot-divider: rgba(255,255,255,0.08);
16- --spot-divider-30: rgba(255,255,255,0.12);
17- --spot-outline: rgba(255,255,255,0.20);
18- --spot-placeholder: rgba(255,255,255,0.30);
9+ --spot-hover: #1e3c33;
10+ --spot-hover-50: rgba(30,60,51,0.5);
11+ --spot-text: #f2f2f2;
12+ --spot-secondary: rgba(255,255,255,0.78);
13+ --spot-body: rgba(255,255,255,0.92);
14+ --spot-muted: rgba(255,255,255,0.42);
15+ --spot-divider: rgba(255,255,255,0.12);
16+ --spot-divider-30: rgba(255,255,255,0.16);
17+ --spot-outline: rgba(255,255,255,0.30);
18+ --spot-placeholder: rgba(255,255,255,0.45);
1919 --spot-active-bg: #ffffff;
2020 --spot-active-text: #1E3932;
21- --spot-shadow: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24);
22- --spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14);
21+ --spot-shadow: 0 0 0.5px rgba(0,0,0,0.20), 0 1px 1px rgba(0,0,0,0.30);
22+ --spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.30), 0 8px 12px rgba(0,0,0,0.20);
2323 }
2424
2525 [data-theme="light"] {
@@ -4,22 +4,22 @@
4 4
5 @layer base {5 @layer base {
6 :root {6 :root {
7- --spot-bg: #0f1f1a;7+ --spot-bg: #0a1814;
8 --spot-surface: #152b24;8 --spot-surface: #152b24;
9- --spot-hover: #1a362e;9+ --spot-hover: #1e3c33;
10- --spot-hover-50: rgba(26,54,46,0.5);10+ --spot-hover-50: rgba(30,60,51,0.5);
11- --spot-text: #ffffff;11+ --spot-text: #f2f2f2;
12- --spot-secondary: rgba(255,255,255,0.70);12+ --spot-secondary: rgba(255,255,255,0.78);
13- --spot-body: rgba(255,255,255,0.87);13+ --spot-body: rgba(255,255,255,0.92);
14- --spot-muted: rgba(255,255,255,0.25);14+ --spot-muted: rgba(255,255,255,0.42);
15- --spot-divider: rgba(255,255,255,0.08);15+ --spot-divider: rgba(255,255,255,0.12);
16- --spot-divider-30: rgba(255,255,255,0.12);16+ --spot-divider-30: rgba(255,255,255,0.16);
17- --spot-outline: rgba(255,255,255,0.20);17+ --spot-outline: rgba(255,255,255,0.30);
18- --spot-placeholder: rgba(255,255,255,0.30);18+ --spot-placeholder: rgba(255,255,255,0.45);
19 --spot-active-bg: #ffffff;19 --spot-active-bg: #ffffff;
20 --spot-active-text: #1E3932;20 --spot-active-text: #1E3932;
21- --spot-shadow: 0 0 0.5px rgba(0,0,0,0.14), 0 1px 1px rgba(0,0,0,0.24);21+ --spot-shadow: 0 0 0.5px rgba(0,0,0,0.20), 0 1px 1px rgba(0,0,0,0.30);
22- --spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.24), 0 8px 12px rgba(0,0,0,0.14);22+ --spot-shadow-heavy: 0 0 6px rgba(0,0,0,0.30), 0 8px 12px rgba(0,0,0,0.20);
23 }23 }
24 24
25 [data-theme="light"] {25 [data-theme="light"] {