Theme Colors Props Shades Mixin Generator

theme-colors-props-shades.mixin.scss

$separator: '\\:' !default;

@mixin theme-colors-props-shades($name, $prop, $colors, $shades) {
  @each $color in $colors {
    @each $shade in $shades {
      .#{$name}-#{$color}-#{$shade} {
        #{$prop}: var(--#{$color}-#{$shade});
      }
    }

    .focus#{$separator} {
      &#{$name}-#{$color} {
        @each $shade in $shades {
          &-#{$shade}:focus {
            #{$prop}: var(--#{$color}-#{$shade}) !important;
          }
        }
      }
    }

    .hover#{$separator} {
      &#{$name}-#{$color} {
        @each $shade in $shades {
          &-#{$shade}:hover {
            #{$prop}: var(--#{$color}-#{$shade}) !important;
          }
        }
      }
    }

    .active#{$separator} {
      &#{$name}-#{$color} {
        @each $shade in $shades {
          &-#{$shade}:active {
            #{$prop}: var(--#{$color}-#{$shade}) !important;
          }
        }
      }
    }
  }
}


// * Usage example *
// $themeColors: 'primary', 'secondary';
// $colorShades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
// @include theme-colors-props-shades('text', 'color', $themeColors, $colorShades);