The Alpha channel cannot be change between different themes

[hihahihahoho]

Describe the bug

When i set a token like this, at Light Theme:
backgroundHover: 'rgba(0,0,0,0.9)',
and switch change it in Dark Theme:
backgroundHover: 'rgba(255,255,255,0.5)',
The color does change, but the alpha channel stuck at 0.9 between themes

Your minimal, reproducible example

none

Steps to reproduce

None

Expected behavior

The alpha change actually change base on theme

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

window

tailwindcss-themer version

4.0.0

Additional context

No response

[Ryan Clements]

Hiya! Thanks for opening the issue. Let me look into it.

[Ryan Clements]

This is a legitimate issue and here is a reproduction example https://codesandbox.io/p/devbox/117-repro-7yqchp

My wife says I've been working too much today, so I'll start looking into potential solutions later, but for your amusement, here was my "maintainers' 5 stages of grief" in response to seeing this issue.

1. 😏 Denial: This should work just fine; I have a e2e test written that covers this, but let's just be sure
2. 🤬 Anger: Crap. I was able to reproduce it https://codesandbox.io/p/devbox/117-repro-7yqchp and the snapshot output of that test is messed up
3. 😅 Bargaining: Oh well, this is probably an easy fix
4. 😰 Depression: Oh darn, this isn't straightforward
5. 😌 Acceptance: Oh well, I'll look into it soon

[Ryan Clements]

This hasn't left my mind!

The fix for this will be tricky and I'm currently evaluating options.

[Ryan Clements]

I have a proof of concept made using an approach that parameterizes the alpha value using css vars. This won't support the old opacity approach (e.g. classes like bg-opacity-50), but those are deprecated anyway.

For example a class like bg-primary that outputs the following css before the change...

:root {
  --colors-primary: ...
}

.darkTheme {
  --colors-primary: ...
}

.bg-primary {
    background-color: rgb(var(--colors-primary) / 0.5); /* 0.5 hardcoded because of this bug */
}

...would now output a class like...

:root {
  --colors-primary: ...
  --colors-primary-alpha: ...
}

.darkTheme {
  --colors-primary: ...
  --colors-primary-alpha: ...
}

.bg-primary {
    background-color: rgb(var(--colors-primary) / var(--colors-primary-alpha));
}

Reference discussion for background on alpha support: #95

[Ryan Clements]

I haven't forgotten about this. I plan on working on it soon.