it there way to make utilities bg-* with custom theme property like --surface-* without generating --bg-* classes with --color-* theme.(v4)

[YoonDongGeun]

Problem

I want to make bg-* classes with only --surface tokens. but it make bg-* classes with --color tokens too.
It's autocomplete list made with --surface-* tokens and works well.
But it overwrite existing class(ex. bg-primary-light) and define class twice(by --color-primary-light and --surface-primary-light).
And i can use not auto-completable bg-color by "--color-* themes.

I want to define bg- classes only once with --surface- themes.!!**
After i change --surface-* color list and not change code, it is hard to recognize something changed but looks fine.

reference you can see

• [v4] Custom utilities result in duplicate CSS output #14923

@theme {
  --color-*: initial;
  /* token-1st brand-color */
  --color-primary-main: var(--color-blue-300);
  --color-primary-dark: var(--color-blue-500);
  --color-primary-light: var(--color-blue-50);
  --color-secondary-main: var(--color-orange-500);
  --color-secondary-dark: var(--color-orange-600);
  --color-secondary-light: var(--color-orange-300);
  --color-neutral-white: var(--color-grey-50);
  --color-neutral-black: var(--color-grey-400);
  --color-neutral-grey: var(--color-grey-100);
  --color-status-accent: var(--color-yellow-100);
  --color-status-alert: var(--color-red-100);
  --color-status-disabled: var(--color-grey-200);
  /* token-2nd Surface-color */
  --surface-primary: var(--color-primary-main);
  --surface-primary-light: var(--color-primary-light);
  /* token-2nd Text-color */
  /* token-2nd Border-color */
}

@utility bg-* {
  background-color: --value(--surface- *);
}

picture of autocomplete working well.

it's not autocompleted, but I can use it by "--color-*"

picture of .bg-primary-light genereated twice by "--color-" and "--surface-"

[wongjn]

You can do:

@theme {
  …
  /* token-2nd Surface-color */
  --background-color-primary: var(--color-primary-main);
  --background-color-primary-light: var(--color-primary-light);

And then:

<div class="bg-primary-light">

[YoonDongGeun]

Thank you for answer!!
when I do like your answer.
I should erase or move 1st tokens to :root area(not @theme) and just remain "--background-color-*". Because "--color-" tokens make -bg- class automatically.
Although it is not i think, it looks better Idea for me because it looks more clear. it doesn't automatically create other classes.
Thank you.