Paradaux

PAR-214

0

tesks-ui: Teal (Irish) palette rebrand + mobile/responsive usability pass

Pending ReleaseUnassignedTesksImprovement

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; ::selection already keys off --accent so it follows automatically.
  • 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 now flex-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