Generated by SassMeister.com.

input.scss

@use "sass:color";
@use "sass:meta";

/* base colors */
$white: white;
$gray: hsl(0, 0%, 75%);
$black: black;
$focus: hsl(205, 100%, 50%);
$danger: hsl(7, 80%, 50%);

/* semantic shortcuts */
$foreground: $black;
$background: $white;

/* adjustment parameters */
$-transparent: 0.5;
$-lighter: 1.25;
$-darker: 0.26;
$-text-darker: $-darker - 0.15;
$-text-lighter: $-lighter + 0.75;
$-text-cutoff: 51%;

@function hslaReplace($color, $hue: false, $saturation: false, $lightness: false, $alpha: false) {
    @if $hue == false {
        $hue: color.hue(($color));
    }
    @if $saturation == false {
        $saturation: color.saturation($color);
    }
    @if $lightness == false {
        $lightness: color.lightness($color);
    }
    @if $alpha == false {
        $alpha: color.alpha($color);
    }
    @return hsla($hue, $saturation, $lightness, $alpha);
}

@function textOn($c, $adjustment: $-darker) {
    $adj: $adjustment;
    @if $adj == $-lighter {
        $adj: $-text-lighter;
    } @else if $adj == $-darker {
        $adj: $-text-darker
    } @else {
        @if (color.lightness($c) <= $-text-cutoff) {
            $adj: $-text-lighter;
        }
    }
    @return hslaReplace($c, $hue: color.hue($c) + 180, $lightness: $adj * color.lightness($c))
}

@function identity($c) {
    @return $c;
}

@function lighter($c) {
    @return hslaReplace($c, $lightness: $-lighter * color.lightness($c));
}

@function darker($c) {
    @return hslaReplace($c, $lightness: $-darker * color.lightness($c));
}

@function transparent($c) {
    @return hslaReplace($c, $alpha: $-transparent);
}

@mixin background($c) {
    background: $c;
    $adj: $-darker;
    @if color.lightness($c) < $-text-cutoff {
        $adj: $-lighter;
    }
    color: textOn($c, $adj);
}

@mixin fill($c) {
    fill: $c;
    background: unset;
}

$-ignore: "IGNORE";
@each $name, $color in (white: $white, gray: $gray, black: $black, focus: $focus, danger: $danger) {
    @each $transparency, $transparencyTransform in (#{$-ignore}: meta.get-function("identity"), transparent: meta.get-function("transparent")) {
        $transparencySelector: if($transparency == $-ignore, ".#{$name}", ".#{$name}.#{$transparency}");

        @each $lightness, $lightnessTransform in (#{$-ignore}: meta.get-function("identity"), light: meta.get-function("lighter"), dark: meta.get-function("darker")) {
            $lightnessAndTransparencySelector: if($lightness == $-ignore, $transparencySelector, "#{$transparencySelector}.#{$lightness}");

            #{$lightnessAndTransparencySelector} {
                @include background(meta.call($lightnessTransform, meta.call($transparencyTransform, $color)));
            }

            #{$lightnessAndTransparencySelector} svg {
                @include fill(textOn(meta.call($lightnessTransform, meta.call($transparencyTransform, $color))));
            }

            svg#{$lightnessAndTransparencySelector} {
                @include fill(meta.call($lightnessTransform, meta.call($transparencyTransform, $color)));
            }
        }
    }

}

output.css

/* base colors */
/* semantic shortcuts */
/* adjustment parameters */
.white {
  background: white;
  color: #1c1c1c;
}

.white svg {
  fill: #1c1c1c;
  background: unset;
}

svg.white {
  fill: white;
  background: unset;
}

.white.light {
  background: white;
  color: #1c1c1c;
}

.white.light svg {
  fill: #1c1c1c;
  background: unset;
}

svg.white.light {
  fill: white;
  background: unset;
}

.white.dark {
  background: #424242;
  color: #858585;
}

.white.dark svg {
  fill: #070707;
  background: unset;
}

svg.white.dark {
  fill: #424242;
  background: unset;
}

.white.transparent {
  background: rgba(255, 255, 255, 0.5);
  color: rgba(28, 28, 28, 0.5);
}

.white.transparent svg {
  fill: rgba(28, 28, 28, 0.5);
  background: unset;
}

svg.white.transparent {
  fill: rgba(255, 255, 255, 0.5);
  background: unset;
}

.white.transparent.light {
  background: rgba(255, 255, 255, 0.5);
  color: rgba(28, 28, 28, 0.5);
}

.white.transparent.light svg {
  fill: rgba(28, 28, 28, 0.5);
  background: unset;
}

svg.white.transparent.light {
  fill: rgba(255, 255, 255, 0.5);
  background: unset;
}

.white.transparent.dark {
  background: rgba(66, 66, 66, 0.5);
  color: rgba(133, 133, 133, 0.5);
}

.white.transparent.dark svg {
  fill: rgba(7, 7, 7, 0.5);
  background: unset;
}

svg.white.transparent.dark {
  fill: rgba(66, 66, 66, 0.5);
  background: unset;
}

.gray {
  background: #bfbfbf;
  color: #151515;
}

.gray svg {
  fill: #151515;
  background: unset;
}

svg.gray {
  fill: #bfbfbf;
  background: unset;
}

.gray.light {
  background: #efefef;
  color: #1a1a1a;
}

.gray.light svg {
  fill: #1a1a1a;
  background: unset;
}

svg.gray.light {
  fill: #efefef;
  background: unset;
}

.gray.dark {
  background: #323232;
  color: #636363;
}

.gray.dark svg {
  fill: #050505;
  background: unset;
}

svg.gray.dark {
  fill: #323232;
  background: unset;
}

.gray.transparent {
  background: rgba(191, 191, 191, 0.5);
  color: rgba(21, 21, 21, 0.5);
}

.gray.transparent svg {
  fill: rgba(21, 21, 21, 0.5);
  background: unset;
}

svg.gray.transparent {
  fill: rgba(191, 191, 191, 0.5);
  background: unset;
}

.gray.transparent.light {
  background: rgba(239, 239, 239, 0.5);
  color: rgba(26, 26, 26, 0.5);
}

.gray.transparent.light svg {
  fill: rgba(26, 26, 26, 0.5);
  background: unset;
}

svg.gray.transparent.light {
  fill: rgba(239, 239, 239, 0.5);
  background: unset;
}

.gray.transparent.dark {
  background: rgba(50, 50, 50, 0.5);
  color: rgba(99, 99, 99, 0.5);
}

.gray.transparent.dark svg {
  fill: rgba(5, 5, 5, 0.5);
  background: unset;
}

svg.gray.transparent.dark {
  fill: rgba(50, 50, 50, 0.5);
  background: unset;
}

.black {
  background: black;
  color: black;
}

.black svg {
  fill: black;
  background: unset;
}

svg.black {
  fill: black;
  background: unset;
}

.black.light {
  background: black;
  color: black;
}

.black.light svg {
  fill: black;
  background: unset;
}

svg.black.light {
  fill: black;
  background: unset;
}

.black.dark {
  background: black;
  color: black;
}

.black.dark svg {
  fill: black;
  background: unset;
}

svg.black.dark {
  fill: black;
  background: unset;
}

.black.transparent {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
}

.black.transparent svg {
  fill: rgba(0, 0, 0, 0.5);
  background: unset;
}

svg.black.transparent {
  fill: rgba(0, 0, 0, 0.5);
  background: unset;
}

.black.transparent.light {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
}

.black.transparent.light svg {
  fill: rgba(0, 0, 0, 0.5);
  background: unset;
}

svg.black.transparent.light {
  fill: rgba(0, 0, 0, 0.5);
  background: unset;
}

.black.transparent.dark {
  background: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
}

.black.transparent.dark svg {
  fill: rgba(0, 0, 0, 0.5);
  background: unset;
}

svg.black.transparent.dark {
  fill: rgba(0, 0, 0, 0.5);
  background: unset;
}

.focus {
  background: #0095ff;
  color: white;
}

.focus svg {
  fill: #1c0c00;
  background: unset;
}

svg.focus {
  fill: #0095ff;
  background: unset;
}

.focus.light {
  background: #40afff;
  color: #230f00;
}

.focus.light svg {
  fill: #230f00;
  background: unset;
}

svg.focus.light {
  fill: #40afff;
  background: unset;
}

.focus.dark {
  background: #002742;
  color: #853700;
}

.focus.dark svg {
  fill: #070300;
  background: unset;
}

svg.focus.dark {
  fill: #002742;
  background: unset;
}

.focus.transparent {
  background: rgba(0, 149, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
}

.focus.transparent svg {
  fill: rgba(28, 12, 0, 0.5);
  background: unset;
}

svg.focus.transparent {
  fill: rgba(0, 149, 255, 0.5);
  background: unset;
}

.focus.transparent.light {
  background: rgba(64, 175, 255, 0.5);
  color: rgba(35, 15, 0, 0.5);
}

.focus.transparent.light svg {
  fill: rgba(35, 15, 0, 0.5);
  background: unset;
}

svg.focus.transparent.light {
  fill: rgba(64, 175, 255, 0.5);
  background: unset;
}

.focus.transparent.dark {
  background: rgba(0, 39, 66, 0.5);
  color: rgba(133, 55, 0, 0.5);
}

.focus.transparent.dark svg {
  fill: rgba(7, 3, 0, 0.5);
  background: unset;
}

svg.focus.transparent.dark {
  fill: rgba(0, 39, 66, 0.5);
  background: unset;
}

.danger {
  background: #e6311a;
  color: white;
}

.danger svg {
  fill: #031719;
  background: unset;
}

svg.danger {
  fill: #e6311a;
  background: unset;
}

.danger.light {
  background: #ec6553;
  color: #041c20;
}

.danger.light svg {
  fill: #041c20;
  background: unset;
}

svg.danger.light {
  fill: #ec6553;
  background: unset;
}

.danger.dark {
  background: #3c0d07;
  color: #0d6b77;
}

.danger.dark svg {
  fill: #010607;
  background: unset;
}

svg.danger.dark {
  fill: #3c0d07;
  background: unset;
}

.danger.transparent {
  background: rgba(230, 49, 26, 0.5);
  color: rgba(255, 255, 255, 0.5);
}

.danger.transparent svg {
  fill: rgba(3, 23, 25, 0.5);
  background: unset;
}

svg.danger.transparent {
  fill: rgba(230, 49, 26, 0.5);
  background: unset;
}

.danger.transparent.light {
  background: rgba(236, 101, 83, 0.5);
  color: rgba(4, 28, 32, 0.5);
}

.danger.transparent.light svg {
  fill: rgba(4, 28, 32, 0.5);
  background: unset;
}

svg.danger.transparent.light {
  fill: rgba(236, 101, 83, 0.5);
  background: unset;
}

.danger.transparent.dark {
  background: rgba(60, 13, 7, 0.5);
  color: rgba(13, 107, 119, 0.5);
}

.danger.transparent.dark svg {
  fill: rgba(1, 6, 7, 0.5);
  background: unset;
}

svg.danger.transparent.dark {
  fill: rgba(60, 13, 7, 0.5);
  background: unset;
}

settings.json

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