How to use primary/secondary Vuetify colors in a SCSS gradient?

I wanted to create a linear gradient from primary color to fully transparent color to accent an element. I'm using SCSS in Vue 3 single-file components.

I tried, as guides suggest:

background: linear-gradient(
    to top,
    rgba(var(--v-primary-base), .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

but that doesn't work, there seems to be no variable --v-primary-base available, no color is applied.

And vuetify-settings.scss doesn't seem to export primary/secondary color-related stuff:

I can make it work with specific colors with something like:

background: linear-gradient(
    to top,
    rgba(red, .3) 0%,
    rgba(255, 255, 255, 0) 100%
);

but I need it to be DRY and support theming.

My vite css config:

resolve: {
    alias: {
        '@': path.resolve(__dirname, './resources'),
        '@components': path.resolve(__dirname, './resources/ts/Components'),
    },
},
css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@use '@/css/vuetify-settings';@import "@/css/variables.scss";@import "@/css/app.scss";`
        }
    }
}

My @/css/vuetify-settings.scss:

@forward 'vuetify/settings';

Correct variable name is --v-theme-primary:

background-color: rgba(var(--v-theme-primary), .4);

Not --v-primary-base