color-mixins.scss

$color-nums: 5, 20, 40, 60, 80, 95;
$color-dark-shade-names: bg, bg-accent, mid-accent, mid, fg-accent, fg;
$color-light-shade-names: fg, fg-accent, mid, mid-accent, bg-accent, bg;

/**
* @param {string} $color-name - The name of the color - ex: gold/violet/fire/sea
* @param {string} $type - The type of shade - ex: accent/neutral/error/warning/success
* @param {string} $num - The number of the color - ex: 100/300/500/700/900
* @param {string} $shade-name - The name of the shade - ex: bg/bg-accent/mid/fg-accent/fg
*/
@mixin color($color-name, $name, $num, $shade-name) {
  --pg-#{$name}-#{$shade-name}: var(--#{$color-name}-#{$num});
}

@mixin current-colors($name) {
  --pg-fg: var(--pg-#{$name}-fg);
  --pg-fg-accent: var(--pg-#{$name}-fg-accent);
  --pg-fg-mid: var(--pg-#{$name}-mid);
  --pg-bg-mid: var(--pg-#{$name}-mid-accent);
  --pg-bg-accent: var(--pg-#{$name}-bg-accent);
  --pg-bg: var(--pg-#{$name}-bg);
  --pg-cursor: var(--pg-fg-mid);
}

@mixin color-class($name) {
  .#{$name} {
    @include current-colors($name);
  }
}

@mixin colors($color-name, $name, $shade-names) {
  @for $i from 1 through length($color-nums) {
    $num: nth($color-nums, $i);
    $shade-name: nth($shade-names, $i);
    @include color($color-name, $name, $num, $shade-name);
  }
}