PAR-214
tesks-ui: Teal (Irish) palette rebrand + mobile/responsive usability pass
The previous palette read as generic/clunky and the dark and light themes were nearly indistinguishable; mobile compatibility was poor. Rebrand the whole design system around a greeny dark teal for an Irish identity, and fix responsive clunkiness.
Changes
styles/_theme.scss— full palette rebrand on the runtime design tokens.- Dark: deep teal-black surfaces (
--bg #07120f…--bg-elev #16271f), teal-green borders, bright teal accent (--accent #19c79a), teal-tinted shadow. - Light: airy teal-tinted off-white (
--bg #f1f7f3, cards#fff), deep teal-green accent (--accent #0b8f72), green-tinted shadow — now clearly distinct from dark. - Status colours (
--good/--warn/--bad) retuned to sit on the teal base;::selectionalready keys off--accentso it follows automatically.
- Dark: deep teal-black surfaces (
components/WorkspaceSwitcher/WorkspaceSwitcher.module.scss— re-tinted the workspace emblem gradient from purple→teal (linear-gradient(140deg, var(--accent), #0d7a8c), dark-on-teal text) so the one hard-coded brand swatch matches.components/PageHeader/PageHeader.module.scss— header nowflex-wraps; on mobile the subtitle (N issues in …) drops to its own row below the title + view toggle instead of crowding/truncating.
All accent-driven components (NavLink active state, Avatar, Badge, Button primary, vote control, form focus rings) inherit the new teal automatically via the var(--accent*) tokens — no per-component recolor needed.
Verification
Playwright over the embedded-PG visual harness, dark + light + mobile (390px) + mobile drawer + issue detail + analytics: cohesive Irish teal identity, dark (deep teal-black) and light (airy teal-white) now clearly distinct, mobile header/rows/filters wrap cleanly.
Commit to develop, ref this issue.
Comments
No comments yet.
Activity
- tesks changed status to Status → Pending Release
- tesks created the issue