@utility - Functional Utility: How can I use theme colors as the argument value

[isaacgarc-dev]

I would like to make a functional utility that uses the theme colors as the argument value so I can style a container such:

@utility scroll-bg-* {
  &::-webkit-scrollbar-thumb {
    background: --value(--scroll-bg-*, [percentage]);
  }
}

and use it like:

<div class="scroll-bg-sky-500">
    My Container
 </div>

So i can style the scrollbar dynamically depending the user theme and the behavior expected with accent colors where is important to note it and subtle colors when is obvious they can scroll it.

[wongjn]

You could consider using @custom-variant instead:

@custom-variant scroll-thumb (&::-webkit-scrollbar-thumb);

Which then allows you to use the existing colors that exist:

<div class="scroll-thumb:bg-sky-500/50">