refactor(dashboard): use ls.css design tokens
Replaced 42 hardcoded brand colors with var() tokens:
CSS rules:
- linear-gradient(135deg,#9B5DE5,#06D6E0) → var(--grad-1) in dh-avatar, lb-avatar, gam-level
- #0F172A → var(--text) in 28 CSS rules (text colors for all major widget labels,
titles, buttons: dh-greeting, ac-title, qa-btn, grade-subj, act-tab.active,
hm-footer strong, hm-tip bg, hdp-date/subj, assign-search, sc-month,
qs-subj-btn, qs-select/input, adm-act, adm-sess-name, cs-name, assign-chip.active,
ae-btn, ar-title, ar-btn, hist-subj, subj-chart-name, weak-name,
ms-title, empty-cta-title, btn-join, stats-bar tooltip bg, stats-chip-val,
tc-title, lb-title, lb-name, lb-class-sel, ch-title, gam-rank, gam-chip-val)
- #3D4F6B → var(--text-2) in hist-score, ae-submit-note
- #9B5DE5 → var(--violet) in lb-xp, ar-sub-chip.s-none, lb-tab.active,
ch-pct, ch-xp, dash-cfg-title, dash-cfg-fab, dash-cfg-checkbox accent-color
- #06D6E0 / #F15BB5 → var(--cyan) / var(--pink) in stat rings and progress fills
JS-generated HTML/SVG:
- var(--violet)/var(--cyan) in SVG statRingSvg calls, goal ring SVG, barColor
- weak-fill gradient partial replacement (--pink)
Kept: 90deg progress bar gradients, domain palette colors (#E0335E/#059652/#7c3aed
/#05aab3/etc.), Chart.js hex configs (CSS vars unsupported there), canvas fillStyle,
action banner dark gradients, heatmap cell alphas, adm-act-icon domain navcolors.
Before: ~65 hardcodes | After: ~20 hardcodes (Chart.js, canvas, domain/dark theme)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Maxim Dolgolyov
58cff2285e
