Generated by SassMeister.com.

input.scss

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


////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
$all-appearances: (
	filled: 'filled',
	outlined: 'outlined',
	soft: 'soft',
	text: 'text',
	ghost: 'ghost',
);


$states-mapping: (
    idle: (
        filled: (
          text: lightblue,
          fill: lightgreen,
          outline: lightred,
        ),
        outlined: (
          text: lightblue,
          fill: lightgreen,
          outline: lightred,
        ),
        ghost: (
          text: lightblue,
          fill: lightgreen,
          outline: lightred,
        )
    ),
  disabled: (
    filled: (
      text: lightblue,
      fill: lightgreen,
      outline: lightred,
    ),
    outlined: (
      text: lightblue,
      fill: lightgreen,
      outline: lightred,
    ),
    ghost: (
      text: lightblue,
      fill: lightgreen,
      outline: lightred,
    )
  ),
  hover: (
    filled: (
      text: lightblue,
      fill: lightgreen,
      outline: lightred,
    ),
    outlined: (
      text: lightblue,
      fill: lightgreen,
      outline: lightred,
    ),
    ghost: (
      text: lightblue,
      fill: lightgreen,
      outline: lightred,
    )
  )
);

$appearance-set: filled;
$states: idle disabled hover;

@mixin appearance {
    background-color: var(--appearance-color-fill);
	box-shadow: inset 0 0 0 1px var(--appearance-color-outline);
	color: var(--appearance-color-text);

  @each $state in $states {
    &.#{$state} {

      $state-mapping: map.get($states-mapping, $state);

      @each $appearance in $appearance-set {
        &.appearance-#{$appearance} {
        $appearance-mapping: map.get($state-mapping, $appearance);
        @each $type in $appearance-mapping {
        --appearance-color-#{$type}: blue;
        }
      }
    }
  }
}
}


.control {
    @include appearance;
}

output.css

.control {
  background-color: var(--appearance-color-fill);
  box-shadow: inset 0 0 0 1px var(--appearance-color-outline);
  color: var(--appearance-color-text);
}
.control.idle.appearance-filled {
  --appearance-color-text lightblue: blue;
  --appearance-color-fill lightgreen: blue;
  --appearance-color-outline lightred: blue;
}
.control.disabled.appearance-filled {
  --appearance-color-text lightblue: blue;
  --appearance-color-fill lightgreen: blue;
  --appearance-color-outline lightred: blue;
}
.control.hover.appearance-filled {
  --appearance-color-text lightblue: blue;
  --appearance-color-fill lightgreen: blue;
  --appearance-color-outline lightred: blue;
}

settings.json

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