lighten/darken color modifiers using CSS relative colors

[phaux]

It would be cool to have a modifier like the opacity modifier, but instead changing the opacity, it would change lightness by using a CSS relative color to modify the original color.

• text-accent becomes var(--color-accent)
• text-accent/50 becomes color-mix(in oklab, var(--color-accent) 50%, transparent)
• NEW: text-accent/l10 becomes oklch(from var(--color-accent) calc(l + 10%) c h)

It would be nice to have a theme namespace for lightness values too, so we can define the whole color palette with just the base semantic colors and a few lightness values which can be used with each.

@theme {
  --color-*: initial;
  --color-ink: black;
  --color-canvas: white;
  --color-accent: rebeccapurple;
  --color-danger: tomato;
  --lightness-darker: -10%;
  --lightness-dark: -5%;
  --lightness-light: 5%;
  --lightness-lighter: 10%;
}

<button class="bg-accent hover:bg-accent/light active:bg-accent/dark">Click</button>

This is similar to #17616

[KubaJastrz]

+1. I noticed it's impossible to easily define darker colors based on existing ones. I find it especially useful for active states on buttons.

Right now I'm doing something like this for selected colors, but it's impossible to scale for every color :/

@theme {
	--color-discord: #5865f2;
	--color-discord-dark: oklch(from var(--color-discord) calc(l - 0.05) c h);
}

<button class="bg-discord hover:bg-discord/95 active:bg-discord-dark">

---

I don't think it's possible to use the legacy plugin API unfortunately.

I found this function in code, maybe there's a way to create a similar for lightening/darkening colors and submit a PR.

tailwindcss/packages/tailwindcss/src/utilities.ts

Line 165 in 0d975f5

export function withAlpha(value: string, alpha: string): string {

[wongjn]

You could define your colors like:

@theme inline {
  --color-discord: oklch(from #5865f2 calc(l + var(--l, 0)) c h);
}

Then you could do:

<div class="bg-discord hover:bg-discord/95 active:[--l:-0.05]">

You could abstract the --l bit to a utility even:

@utility color-l-* {
  --l: calc(--value(integer) * 0.01);
}

@utility -color-l-* {
  --l: calc(--value(integer) * -0.01);
}

<div class="bg-discord hover:bg-discord/95 active:-color-l-5">

https://play.tailwindcss.com/NUCTqWKtrt?file=css

Though do note this would affect all colors set on a single element this way, so this solution is only a stop-gap.

[KubaJastrz]

Thanks, I didn't know about the @utility directive. I adjusted it so it fits my needs:

@utility lighter-bg-* {
  background-color: oklch(from --value(--color- *) calc(l + 0.05) c h);
}

@utility darker-bg-* {
  background-color: oklch(from --value(--color- *) calc(l - 0.05) c h);
}

<div class="bg-discord hover:lighter-bg-discord active:darker-bg-discord">

https://play.tailwindcss.com/lEcRqAJwxG?file=css

It's not adjustable by --l but I don't need it in this particular case.