How can I overwrite sass variables defined in a svelte package?

I've published an npm package built with sveltekit & sass. In my main sass file I've defined some variables for components colours. After importing the package in a demo project, I've tried to change those variables hoping imported component styles changed. However it seems like those variables are isolated and the components are built using orignal ones no matter if they're redefined on parent component.

In my sveltekit package:

styles.scss

$primary: #14cabf !default;

Button.svelte

<style type="text/scss">
    button {
        background-color: $primary;
    }
</style>

svelte.config.js

const config = {

    preprocess: preprocess({
        scss: {
            prependData: `@import './src/lib/style/style.scss';`
        } 
    }),

    kit: {
        adapter: adapter(),
        vite: {
            resolve: {
                alias: {
                    $components: path.resolve('./src/components')
                }
            }
        }
    }
};
export default config;

In a demo project importing my package

style.scss

$primary: green; //this variable works and can be used but won't change button's background colour

Is there a way to export/process/redefine $primary and change that way button's colour?

Thanks for your time!