[v4] Custom @utility with color/alpha

[jamiebuilds-signal]

Background

I'm working on custom scrollbar-* utility using the new CSS @utility syntax:

@utility scrollbar-* {
  scrollbar-color: --value(--color-*) transparent;
}

<div class="scrollbar-slate-300">...</div>
<style>
  .scrollbar-slate-300 {
    scrollbar-color: var(--color-slate-300) /* oklch(0.869 0.022 252.894) = #cad5e2 */;
  }
</style>

I want it to work the same way as built-in color utils like text-* or bg-* and support alpha values like text-black/50:

<div class="scrollbar-black/50">...</div>
<style>
  .scrollbar-black\/50 {
    scrollbar-color: color-mix(in oklab, var(--color-black) /* #000 = #000000 */ 50%, transparent) transparent;
  }
</style>

Problem

Right now this is the closest thing I can actually get working:

@utility scrollbar-* {
  scrollbar-color: --value(--color-*) transparent;
  scrollbar-color: --alpha(--value(--color-*) / --modifier(integer)%) transparent;
}

Which generates the following:

<div class="scrollbar-black/50">...</div>
<style>
  .scrollbar-black\/50 {
    scrollbar-color: var(--color-black) /* #000 = #000000 */ transparent;
    scrollbar-color: color-mix(in oklab, var(--color-black) /* #000 = #000000 */ 50%, transparent) transparent;
  }
</style>

But I don't like that this produces multiple declarations, I'd like to find a way to only produce the one.

Also, this doesn't work particularly well with the vscode plugin with intellisense, I think because the new theme --custom-properties don't have an opacity scale, there's nothing to reference here.

Ideally I would like a simpler way to be able to create colors utils that work just like the built-in ones, with support for other named values like scrollbar-transparent.

[wongjn]

I haven't found a technique to reduce the number of properties, but at least reduced to one scrollbar-color property:

@utility scrollbar-* {
  --alpha: calc(--modifier(integer) * 1%);
  scrollbar-color: --alpha(--value(--color-*, [color]) / var(--alpha, 100%)) transparent;
}

https://play.tailwindcss.com/0cRGljDV0c?file=css

[royduin]

A related discussion: #15775