<button data-btn>default</button>
<button data-btn="warn">warn</button>
<button data-btn disabled>disabled</button>
<button data-btn="warn" disabled>warn disabled</button>
<div class="context">
  <p>context...</p>
  <button data-btn>context default</button>
  <button data-btn disabled>context disabled</button>
</div>

@function vars($stack...)  {  
  $output: null;
  $close: '';
  $length: length($stack);
  @each $var in $stack {    
    @if (str-index('#{$var}', '--') == 1) {
      $var: 'var(#{$var}';
      $close: '#{$close})';
    }
    
    $output: if($output, '#{$output}, #{$var}' , $var);
  }
  
  @return unquote($output + $close);
}

[data-btn] {
  background: vars(--bg-state, --bg-context, --bg-theme, --bg, blue);
  color: vars(--fg-state, --fg-context, --fg-theme, --fg, white);
  padding: 0.5em 2em;
  border: 1px solid gray;
}

[data-btn='warn'] {
  --bg-theme: maroon;
}

[disabled] {
  --bg-state: #aaa;
  --fg-state: white;
}

.context {
  background: black;
  padding: 1.5em 2em 2em;
  margin: 0 -2em;
  color: white;
  --bg: lightblue;
  --fg: black;
}


body {
  min-height: 100vh;
}

body,
.context {
  display: grid;
  gap: 0.5em;
  place-content: center;
}

p {
  margin: 0;
}