Custom design token values not being reflected in component

[Scott-McMullan-ABB]

I have a simple layout that implements a Card.

<script setup>
import Card from "primevue/card";

const customCard = {
    border: {
        radius: 0
    }
}
</script>

<template>
    <Card :dt="customCard">
        <template #content>
            <slot/>
        </template>
    </Card>
</template>

You can see from the component that I want the card to have no border radius, however this is not working.

I've tried adding root but this doesn't work either.

const customCard = {
    root: {
        border: {
            radius: 0
        }
    }
}

I can acheive the result I want if I update these tokens and save it as a theme preset.

const MyPreset = definePreset(Aura, {
    semantic: {
        ...
    },
    components: {
        ...
        card: {
            border: {
                radius: 0,
            }
        }
    }
})
...
.use(PrimeVue, {
    theme: {
        preset: MyPreset,
        options: {
            // darkModeSelector: 'dark-mode',
        }
    },
    ripple: true
})

What am I doing wrong? I don't want every card in my application to have 0 border radius, just the one in this particular component. I cannot seem to get :dt to work.

Thanks.

[j0rgedev]

Hello @Scott-McMullan-ABB. It seems like there is an open issue for scoped tokens: primefaces/primevue#6502.
I've just reproduced your issue, and it works with vue 3.5.5, but not with 3.5.6

[Scott-McMullan-ABB]

That's good to hear, thanks.