Refactor Olivero color variables to use CSS relative color

Created on 9 May 2025, 2 months ago

Problem/Motivation

We're currently doing some complicated math in Olivero to take user-specified colors as hex codes and breaking it into H, S, and L values. We then do some more complicated math on those values to get derivative bright/dark variations.

CSS now has relative color support, including in HSL. We should reduce the complexity of the code in core by leveraging these new capabilities.

Proposed resolution

  1. Remove Olivero's hex-to-hsl conversion function
  2. Replace the use of that function and the placement of the unitless HSL values with the addition of the raw hex code
  3. Refactor Olivero's complicated HSL calculations using unitless variables in the variables stylesheet
  4. Remove the unit test that covers our hex-to-hsl conversion

The refactoring of the CSS should go something like this:

Currently:

/**
   * Primary colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--primary-hue: 202;
  --color--primary-saturation: 79%;
  --color--primary-lightness: 50;
--color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness)))));

This should update to:

/**
   * Primary colors.
   *
   * Color number roughly corresponds to its luminosity.
   */
  --color--primary: #1b9ae4;
  --color--primary-30: hsl(from var(--color--primary) h s calc(l - (0.36 * l)));

Remaining tasks

User interface changes

None - the end result should be the same.

📌 Task
Status

Active

Version

11.1 🔥

Component

Olivero theme

Created by

🇺🇸United States andy-blum Ohio, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024