Theme namespace for named opacity values

[phaux]

I usually just use the default Tailwind theme, but recently I had to encode a design system as a custom theme.

The theme has only a few semantic colors for foreground, background, accent, etc. Different shades are actually different opacities of foreground or accent color.

I would like to have namespace for named opacity values for consistency.

Example:

@theme {
  --color-*: initial;
  --color-ink: black;
  --color-canvas: white;
  --color-accent: rebeccapurple;
  --color-danger: tomato;

  --opacity-faded: 0.9;
  --opacity-subtle: 0.6;
  --opacity-faint: 0.1;
}

and then:

<button class="bg-accent/faded hover:bg-accent">Click me</button>
<p class="text-ink/subtle">Helper text</p>
<p role="alert" class="bg-danger/faint text-danger">Error</p>

[wongjn]

If you convert them to percentage equivalents, they work: https://play.tailwindcss.com/MRTjwl1tho.

[phaux]

Amazing!

Looks like another case of missing docs like in the case of border-width