Generated by SassMeister.com.

input.scss

@use 'sass:list';
@use 'sass:map';

$themes: (
  light: (
    background: #ffffff,
  ),
  dark: (
    background: #000000,
  ),
);
$component-tokens: ();

@mixin add-component-tokens($tokens) {
    $component-tokens: list.append($component-tokens, $tokens) !global;
}

$theme: map-get($themes, light);

@function matches($theme, $source) {
    @each $key, $value in $source {
        @if map-has-key($theme, $key) == false {
            @return false;
        }
        @if map-get($theme, $key) != $value {
            @return false;
        }
    }
    @return true;
}

$button-tokens: (
  button-flex-direction: justify-between,
  light: (
    button-background: #000000,
    button-text-color: #ffffff,
  ),
  dark: (
    button-background: #343434,
    button-text-color: #ffffff,
  ),
);

@include add-component-tokens($button-tokens);

@mixin declarations($maps...) {
    @each $map in $maps {
        @each $key, $value in $map {
            --#{$key}: #{$value};
        }    
    }
}

@mixin theme($theme, $local-component-tokens...) {
    $tokens-to-emit: ();
    
    @each $tokens in list.join($component-tokens, $local-component-tokens) {
        @each $key, $value in $tokens {
            @if type-of($value) == map {
                @if matches($theme, map-get($themes, $key)) {
                    $tokens-to-emit: map-merge($tokens-to-emit, $value);
                }
            } @else {
                $tokens-to-emit: map.set($tokens-to-emit, $key, $value);
            }
        }
    }
    
    @include declarations($theme, $tokens-to-emit);
}

:root {
    @include theme($theme);
    // @include theme($theme, $button-tokens)
    // @include declarations($theme, map-get($button-themes, light));
}

.dark-mode {
    // @include theme(map-get($themes, dark), $button-tokens);
    @include theme(map-get($themes, dark));
}

// $button-background: #000000;
// $button-text-color: #ffffff;


// flat, these tokens are always these tokens
// theme-based, these tokens derive from a theme
// configure a token

output.css

:root {
  --background: #ffffff;
  --button-flex-direction: justify-between;
  --button-background: #000000;
  --button-text-color: #ffffff;
}

.dark-mode {
  --background: #000000;
  --button-flex-direction: justify-between;
  --button-background: #343434;
  --button-text-color: #ffffff;
}

settings.json

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