// Preset colors CSS vars

& {
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
    --#{$color}-yiq: #{color-yiq($value)};
    --#{$color}-rgb: #{red($value)}, #{green($value)}, #{blue($value)};
  }

  @each $color in "primary", "secondary" {
    $value: map-get($theme-colors, $color);
    @each $shift-weight, $label in $color-shift-weights {
      @if $label != "" {
        $shift-var: #{$color}-#{$label};
        $shift-value: darken-color($value, $shift-weight);
        
        --#{$shift-var}: #{$shift-value};
        @if str-index($label, "light") or str-index($label, "dark") {
          --#{$shift-var}-rgb: #{red($shift-value)}, #{green($shift-value)}, #{blue($shift-value)};
          --#{$shift-var}-yiq: #{color-yiq($shift-value)};
        }
      }
    }
  }
}