_vars-colors.scss

// UI Colors
//
// loops over the color map and writes it as CSS vars


:root {

  // 1. assign the actual value
  @each $name, $color in $colors {
    @each $index, $value in $color {
      --#{$name}-#{$index}: #{$value};
    }
  }
  @each $name, $shade in $shades {
    @each $index, $value in $shade {
      --#{$name}-#{$index}: #{$value};
    }
  }

  // 2. assign the color var (for inverted style)
  @each $name, $color in $colors {
    @each $index, $value in $color {
      --color-#{$name}-#{$index}: var(--#{$name}-#{$index});
    }
  }
  @each $name, $shade in $shades {
    @each $index, $value in $shade {
      --color-#{$name}-#{$index}: var(--#{$name}-#{$index});
    }
  }
}