[v4] How to extend or replace colors in certain utilities?

[IvanKalinin]

The namespace --color-* globally extends colors for all color utilities, including but not limited to bg-* text-, or fill-...
In v3 tailwind.config.js it is allowed to extend color for certain utilities.
e.g. the snippet below will only create color utility for border: border-active, and will not apply it to bg-, text-, etc.

{
 ...
  theme: {
    ...
    borderColor: {
      active: '#111111',
    }
  }
}
Is it possible to achieve the same result with the new `@theme` config 

[wongjn]

Yep:

@theme {
  --border-color-active: #111111;
}

[jannisbecker]

Is this documented somewhere? I was looking for it everywhere but couldn't find it.
I've also seen a stack overflow post about the same issue, the only answer discouraging the person from doing so.

And I understand why. When using explicit color names, it's better to have bg-blue-500 be the same color as text-blue-500. But for semantic color names, and by extension, existing design systems that define them, it can often be different.

As an example, untitledui defines various semantic color variables, like text-primary, fg-primary, bg-primary etc. They are different colors though. And I'd like to not have to write bg-bg-primary all the time.
(Though in this example fg-primary is still assigned through background most of the time so I can't have everything I guess..)

Tldr I'd like to see it documented.

[gael-boyenval]

yep, it would be nice for it to be documented