🛠️
LNUI-706Migrate color tokens to OKLCH with fallbacks
286 / 291

Migrate color tokens to OKLCH with fallbacks

Goals

  • Move every color token from HSL to OKLCH for perceptual uniformity
  • Keep HSL fallbacks for browsers without oklch() support
  • No visual regression above a deltaE of 1.5 on existing themes

Token mapping

:root {
   /* before */
   --primary: hsl(243 75% 59%);

   /* after — fallback first, then OKLCH override */
   --primary: hsl(243 75% 59%);
}

@supports (color: oklch(0% 0 0)) {
   :root {
      --primary: oklch(58.5% 0.233 277.1);
   }
}

Migration steps

Script converting the HSL palette to OKLCH (round-trip checked)
Regenerate globals.css tokens for light + dark
Visual diff on the 12 template pages
Update theming docs and the theme generator

Activity

aiden.thompson created the issue· 8d ago
aiden.thompson moved from Backlog to In Progress· 7d ago
aabigail.moore2d ago

The converted dark palette looks noticeably smoother on gradients. Two tokens (--warning, --chart-3) drifted above deltaE 1.5, adjusting chroma manually.

🎨 2