Use alpha in the theme function

[u3u]

Now there seems to be no way to specify alpha when getting the color through the theme function

import { theme } from 'twin.macro'

theme`colors.red.500` // #ef4444

Can you consider the following usage?

theme`colors.red.500/50` // rgba(239, 68, 68, 0.5)

[ben-rogerson]

that looks like a good improvement to me.

Some notes/questions:

• The theme value is due for a 'resync' with tailwind - investigation required
• I'm guessing the alpha value looks at the opacities from your theme - like the slash opacity in tw classes
• Does theme have an arbitrary opacity value? eg: theme`colors.red.500/[.045]`
• Value should support spaces around the slash opacity, eg: theme`colors.red.500 / 50`
• Here's where these feature(s) will be patched in

[u3u]

Does theme have an arbitrary opacity value? eg: theme`colors.red.500/[.045]`

It would be nice if it could support arbitrary values!

Value should support spaces around the slash opacity, eg: theme`colors.red.500 / 50`

Yes, the only usage found in the official documentation is something like theme(colors.blue.500 / 75%)

The usage that comes to mind is this:

theme`colors.red.500/50` // rgba(239, 68, 68, 0.5)
theme`colors.red.500/[.045]` // rgba(239, 68, 68, 0.045)

// Or add spaces, I don't know which is better, or support both?
theme`colors.red.500 / 50` // rgba(239, 68, 68, 0.5)
theme`colors.red.500 / [.045]` // rgba(239, 68, 68, 0.045)

// Official Usage
theme`colors.red.500 / 50%` // rgb(239 68 68 / 50%)

[ben-rogerson]

Spec looks good to me 👍
Not sure when I'll be able to get around to it - perhaps after the v3 release.

[lightyen]

I think percent value or floating value is good enough, the key 50 is ambiguous.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      red: 'hsl(0 100% 50% / <alpha-value>)',
    },
  },
}

theme`colors.primary/50%` // rgb(var(--color-primary) / 50%)
theme`colors.primary/[.05]` // rgb(var(--color-primary) / 0.05)
theme`colors.red / 50%` // hsl(0 100% 50% / 50%)
theme`colors.red / [ .05 ]` // hsl(0 100% 50% / 0.05)
theme`colors.red` //  hsl(0 100% 50% / 1)

// But I prefer the form without brackets:
theme`colors.primary/50.7%` // rgb(var(--color-primary) / 50.7%), why not?

[ben-rogerson]

Great stuff here and I agree the slash opacity number is ambiguous 👍

In the case of colour classes, when an incorrect slash opacity is added, twin displays an error message like this:

The slash opacity “25s” isn’t a valid opacity for “bg-black/253”
Fix: Try one of these opacity values:

- 0 > 0
- 5 > 0.05
- 10 > 0.1
// ...

I'd really like to keep the slash opacity syntax as synced as possible for the theme value.
So we could align the features by matching opacity values from their tailwind config.

Custom values (including percentages) could be added within an arbitrary opacity, eg:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      red: 'hsl(0 100% 50%)',
    },
  },
}

// ---

theme`colors.red/[50%]`
// ↓ ↓ ↓ ↓ ↓ ↓
"hsl(0 100% 50% / 50%)"

[lightyen]

AFAIK, tailwind doesn't support colors.red.500/[0.82] in theme function. https://play.tailwindcss.com/M832DP91GW