Sharing SASS variables from NPM package with another app (@use / @forward syntax)

Here's my problem.

First, there's a design system repo, with SASS files. Those files contain variables (declared with !default syntax), functions, mixins, and class-related styling. Here's the simplified repo architecture :

/src
  /components
    /component1
      /_component1.scss
    /component2
      /_component2.scss
  /scss
    /general
      /tokens
        /colors
          /_colors.scss
        /fonts
          /_fonts.scss
    /styles.scss

All partials are forwarded (using @forward at-rule) in src/scss/styles.scss. Repo has been published as a NPM package.

Then, there's another app, which aims to use this design system package. Simplified repo architecture looks like this :

/scss
  /general
    /tokens
      /colors
        /_app-colors.scss
        /_colors.scss
      /fonts
        /_app-fonts.scss
        /_fonts.scss
  /styles.scss

I'd like to declare app-related tokens (in my scss/general/tokens/* files), which would override design system tokens if declared with the same identifier. I used to do that with @import at-rules, but I can't make it work with @use and @forward at-rules anymore...

I thought I could achieve it by using that kind of syntax in my tokens files :

@use "./app-color" as app;

@use "@design-system-package/src/scss/styles.scss" as ds with {
  $design-system-variable-1: blue; // hardcoded value
  $design-system-variable-2: app.$app-variable // app variable as value
  $design-system-variable-3: ds.$design-system-other-variable // design system variable as value
}

but it seems ds namespace is not recognized, and ds.$design-system-other-variable is undefined.

Could anyone help me to fix that ? Thank you :

Silvère MAZIERE