'Sass color scheme with contrast mixins

I've created this colour funcion that works fine by getting the $theme-colors.

I was tring aslo to create a mixin that could create contrasts of those colours.

I have to mixins one is for scheme specific colours and the other isfor contrast.

Now, please could anyone help me to understand why this mixing below doesn't work? I don't get a proper error but i guess is todo with the line 42, $property, I'm not sure is should be written that way

I have a demo too.

$theme-colors: (
      white: #ffffff,
    black: #000,
    orange: #FF9600,
    green: #188049,
    red: #ea0000,
    red-dark: #bc0031, //brand
    yellow: #ffcc00,
    grey-dark: #2e3137,
    grey-light: #CCC,
    grey: #676973,
    blue-light: #3771d0, //buttons primary
    blue-dark: #274d8b, // buttons secondary
    blue: #0D45A0, //links
    teal: #30737B, //Teal
    slate: #d5e5ff,
    brand: #bc0031
);
@function color($theme-color) {
  @return map-get($theme-colors, $theme-color);
}
 

@mixin scheme($property, $key, $self: false) {
  // Removes modifiers from the key
  $key-clean: nth(str-split($key, "--"), 1);
  $key-modifier: if(
    str-index($key, "--") != null,
    #{"--" + nth(str-split($key, "--"), 2)},
    ""
  );
  // Loop through all color schemes building classes and properties
  @each $scheme, $data in $theme-colors {
    @if map-has-key($data, $key-clean) and ($self == "both" or $self == false) {
      .scheme--#{$scheme} & {
        @include $property, map-get($data, $key-clean) + $key-modifier;
      }
    }
  }
  @each $scheme, $data in $theme-colors {
    @if map-has-key($data, $key-clean) and ($self == "both" or $self == true) {
      &.scheme--#{$scheme} {
        @include $property, map-get($data, $key-clean) + $key-modifier;
      }
    }
  }
}

@mixin scheme-contrast($property, $key, $self: false) {
  // Removes modifiers from the key
  $key-clean: nth(str-split($key, "--"), 1);
  $key-modifier: if(
    str-index($key, "--") != null,
    #{"--" + nth(str-split($key, "--"), 2)},
    ""
  );
  // Loop through all color schemes building classes and properties
  @each $scheme, $data in $theme-colors {
    @if map-has-key($data, $key-clean) and ($self == "both" or $self == false) {
      .scheme--#{$scheme} & {
        $background-color: color map-get($data, $key-clean) + $key-modifier,
          true;
        #{$property}: contrasting-color($background-color);
      }
    }
  }
  @each $scheme, $data in $theme-colors {
    @if map-has-key($data, $key-clean) and ($self == "both" or $self == true) {
      &.scheme--#{$scheme} {
        $background-color: color map-get($data, $key-clean) + $key-modifier,
          true;
        #{$property}: contrasting-color($background-color);
      }
    }
  }
}

h1 {
  @include scheme(background-color, red-dark);
  @include scheme-contrast(color, black);
  border-width: 1px;
  border-style: solid;
  @include scheme-contrast(border-color, red-dark);
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source