Theming: Can't customize design tokens whose value is a css variable

[KevinHetzelGFL]

Describe the bug

It is not possible to customize design tokens whose value is a css variable. The new css variable is created and set in :root, but the previous variable is still there and overwrites the variable created from the design token. It affects all components.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-mr4q7kaa?file=src%2Fapp%2Fapp.config.ts

Environment

windows 11

Angular version

19.0.0

PrimeNG version

v19

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

1. define a preset and add toast.success.background: "red" at the components area.
2. Open a success Toast, the background is not set
3. check the generated CSS in the screenshot:

Expected behavior

the css variables should not overwrite each other.

[imaksp]

Hi, as a workaround you can pass it in dt prop of p-toast.

[KevinHetzelGFL]

@imaksp thank you, but I overwrote the variables directly in the css.

[imaksp]

Hi, overriding css var in app style css will also work, but with design token you will also get type safety in future. (currently it uses any type but should be improved)

[KevinHetzelGFL]

thats true. But for Toast Component it is easy, i have one in my application. But i also need to overwrite --p-select-clear-icon-color. i don't know how much select components are in my application, but there are a lot. I prefere to overwrite this just once. When the issue is fixed, i will remove it.

[ivan-price-acted]

hi there, i think we're hitting this too, we're obliged to use !important in our preset definition, because the value being overridden is a css var: (var(--p-datatable-header-cell-padding))

const MyPresetTheme = definePreset(Aura, {
  semantic: {
    datatable: {
      header: {
        cell: {
          padding: '0.45rem !important',
        },
      },
    },
  },
})

if we remove the !important, the change is not visible.

can anyone confirm that we shouldn't need to use !important, and that this is the best approach at this time ?
Alternatively, if I had a way to override the original css var --p-datatable-header-cell-padding i'd do that, but i'm not aware of how to do that, or if it's possible.

[golcor]

Same here, we are trying to style progressspinner via design tokens using primeng 19.0.5:

const myPreset = definePreset(Lara, {
    components: {
        progressspinner: {
            'color.1': '#000000 !important',
            'color.2': '#000000 !important',
            'color.3': '#000000 !important',
            'color.4': '#000000 !important',
        }
    }
});

If we remove the !important the default colors are still in place.

[mertsincan]

Could you please wrap it with colorScheme keyword and set the behaviour in the dark and light mode?

components: {
    toast: {
      colorScheme: {
        light: {
          success: {
            background: 'red',
            color: '#224a23',
            detail: {
              color: '#224a23',
            },
          },
        },
        dark: {
          success: {
            background: 'red',
            color: '#224a23',
            detail: {
              color: '#224a23',
            },
          },
        },
      },
    },

[ivan-price-acted]

thanks @mertsincan this solved it for my case, i thought i had tested that but in retrying indeed for my case i can make the changes without !important.

what's a bit strange is that the padding changes made in the light colorScheme also affect when dark is activated (which i don't define to avoid defining the same thing twice). i guess this is a good thing but it wasn't immediately obvious that it'd be the case.