Generated by SassMeister.com.

input.scss

$theme: (
  ui-01: black,
);

$light: (
  ui-01: white,
);

@mixin theme($theme-to-apply) {
    $saved-theme: $theme;
    $theme: $theme-to-apply;
    
    $ui-01: map-get($theme-to-apply, ui-01) !global;
    
    @content;
    
    $theme: $saved-theme;
}

$ui-01: map-get($theme, ui-01) !default;

@mixin my-component-v1 {
  .my-component-v1 {
      background: $ui-01;
  }
}

@mixin my-component-v2 {
  .my-component-v1 {
      background: $new-ui-token;
  }
}

// Current version

@include my-component-v1;

.light {
    @include theme($light) {
        @include my-component-v1;
    }
}

// Changed to use "new version"

@include my-component-v2;

.light {
    @include theme($light) {
        @include my-component-v2;
    }
}

output.css

.my-component-v1 {
  background: black;
}

.light .my-component-v1 {
  background: white;
}

.my-component-v1 {
  background: white;
}

.light .my-component-v1 {
  background: white;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}