File size: 3,464 Bytes
012d0ac | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | # Bayan Theme System — Implementation Reference
**Status**: Implemented
**Source of truth**: `src/css/tokens.css`
**Consumers**: `src/css/base.css`, `src/css/components.css`
All editor UI consumes CSS variables. Do not hardcode hex/rgba in components.
---
## Theme Switching
- Attribute: `data-theme="dark"` | `data-theme="light"` on `<html>`
- Persistence: `localStorage` key `bayan-theme`
- Script: `src/js/theme.js`
---
## Token Map
| Category | Variable | Dark | Light |
|----------|----------|------|-------|
| Background | `--color-bg` | `#0B1120` | `#F8FAFC` |
| Surface | `--color-surface` | `#151D2E` | `#FFFFFF` |
| Elevated | `--color-surface-elevated` | `#1E293B` | `#F1F5F9` |
| Editor | `--color-editor` | `#1A2332` | `#FFFFFF` |
| Primary | `--color-primary` | `#3B82F6` | `#2563EB` |
| Secondary | `--color-secondary` | `#8B5CF6` | `#7C3AED` |
| Accent | `--color-accent` | `#06B6D4` | `#0891B2` |
| Success | `--color-success` | `#22C55E` | `#16A34A` |
| Warning | `--color-warning` | `#F59E0B` | `#D97706` |
| Error | `--color-error` | `#EF4444` | `#DC2626` |
| Text | `--color-text-primary` | `#F1F5F9` | `#0F172A` |
| Text secondary | `--color-text-secondary` | `#94A3B8` | `#475569` |
| Text muted | `--color-text-muted` | `#64748B` | `#64748B` |
| Border | `--color-border` | `rgba(255,255,255,0.08)` | `rgba(15,23,42,0.08)` |
| Border strong | `--color-border-strong` | `rgba(255,255,255,0.16)` | `rgba(15,23,42,0.16)` |
| Focus ring | `--focus-ring` | `rgba(59,130,246,0.45)` | `rgba(37,99,235,0.35)` |
---
## Highlights
| Type | Dark bg | Dark border | Light bg | Light border |
|------|---------|-------------|----------|--------------|
| Spelling | `rgba(239,68,68,0.18)` | `#EF4444` | `#FEF2F2` | `#DC2626` |
| Grammar | `rgba(245,158,11,0.18)` | `#F59E0B` | `#FFFBEB` | `#D97706` |
| Punctuation | `rgba(34,197,94,0.18)` | `#22C55E` | `#F0FDF4` | `#16A34A` |
Tokens: `--highlight-{type}-bg`, `--highlight-{type}-border`
---
## Typography
Font stack: `Cairo` → `Tajawal` → `Noto Sans Arabic`
| Role | Token | Value |
|------|-------|-------|
| Display | `--font-size-display` | 48px / 700 |
| H1 | `--font-size-h1` | 36px / 700 |
| H2 | `--font-size-h2` | 30px / 600 |
| H3 | `--font-size-h3` | 20px / 600 |
| Body | `--font-size-body` | 16px / 400 |
| Editor | `--font-size-editor` | 18px / 400 |
| Caption | `--font-size-caption` | 14px / 500 |
| Label | `--font-size-label` | 12px / 600 |
| Editor line-height | `--line-height-editor` | 1.9 |
Utility classes: `.text-display`, `.text-h1`, `.text-body`, `.text-secondary`, `.text-muted`, etc.
---
## Component Guidelines (enforced in CSS)
- **Cards**: `--radius-card` (16px), `--shadow-card`, `--color-border`
- **Editor**: `--color-editor`, `--shadow-editor`, no pure black/white text
- **Buttons**: min-height 44px, `--color-text-inverse` on primary
- **Popovers**: `--shadow-popover`, opacity transition
- **Loading**: `--color-accent` spinner
- **Overlays**: `--color-overlay`
---
## Legacy Aliases
For Element SDK and marketing pages:
`--primary-color`, `--text-color`, `--background-color`, `--surface-color` → map to canonical tokens.
---
## Remaining Hardcoded Colors
Marketing pages in `index.html` (Home, Features, Pricing) still use inline `style=""` with hex values. Editor and shell are fully tokenized. Migrate marketing sections to `.marketing-card`, `.feature-icon--*`, `.demo-callout--*` utilities when simplifying those pages.
|