Component Contrast Sass

[JP DeVries]

.component {
  color: var(--color, blue);
  background: var(--background, white);
}

@mixin darker-contrast() {
  .component {
    --color: var(--darker-contrast, darkblue);
  }
}

@mixin white-on-black() {
  --color: (var--black-on-white-background-color, white);
  --background-color: var(--black-on-white-color, rgb(8, 8, 8));
}

@mixin black-on-white() {
  --color: var(--black-on-white-color, rgb(8, 8, 8));
  --background-color: (var--black-on-white-background-color, white);
}

@media screen and (-ms-high-contrast: active) {
  @include darker-contrast;
}

@media screen and (-ms-high-contrast: black-on-white) {
  .component {
    @include black-on-white;
  }
}

@media screen and (-ms-high-contrast: white-on-black) {
  .component {
    @include white-on-black;
  }
}

[data-contrast="active"] {
  .component {
    @include darker-contrast;
  }
}

[data-contrast="black-on-white"] {
  .component {
    @include black-on-white;
  }
}

[data-contrast="white-on-black"] {
  .component {
    @include white-on-black;
  }
}