Refine dark theme color palette and shadowsUnverified
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) | ||
| 30 | 30 | |
| 31 | 31 | | Token | Value | Use | |
| 32 | 32 | | ------------------ | ------------------------ | ----------------------------- | |
| 33 | -| `--spot-bg` | `#0f1f1a` | Page background, sidebar | | |
| 33 | +| `--spot-bg` | `#0a1814` | Page background, sidebar | | |
| 34 | 34 | | `--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 | | |
| 41 | 41 | | `--spot-outline` | `rgba(255,255,255,0.20)` | Button borders, input borders | |
| 42 | 42 | |
| 43 | 43 | ### 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 Theme | 43 | ### Light Theme |
modified
static/input.css +13 -13 | @@ -4,22 +4,22 @@ | ||
| 4 | 4 | |
| 5 | 5 | @layer base { |
| 6 | 6 | :root { |
| 7 | - --spot-bg: #0f1f1a; | |
| 7 | + --spot-bg: #0a1814; | |
| 8 | 8 | --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); | |
| 19 | 19 | --spot-active-bg: #ffffff; |
| 20 | 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); | |
| 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); | |
| 23 | 23 | } |
| 24 | 24 | |
| 25 | 25 | [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"] { |