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:
localStoragekeybayan-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-inverseon primary - Popovers:
--shadow-popover, opacity transition - Loading:
--color-accentspinner - 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.