Color palette generator mix-in for Sass

color-palette-generator.scss

@use "sass:map";
@use "sass:meta";

@function generate-color-scale($base) {
  $scale: (
    "05": color-mix(in oklab, $base, var(--palette-white) 90%),
    "10": color-mix(in oklab, $base, var(--palette-white) 80%),
    "20": color-mix(in oklab, $base, var(--palette-white) 60%),
    "30": color-mix(in oklab, $base, var(--palette-white) 40%),
    "40": color-mix(in oklab, $base, var(--palette-white) 20%),
    "50": $base,
    "60": color-mix(in oklab, $base, var(--palette-black) 20%),
    "70": color-mix(in oklab, $base, var(--palette-black) 40%),
    "80": color-mix(in oklab, $base, var(--palette-black) 60%),
    "90": color-mix(in oklab, $base, var(--palette-black) 80%),
    "95": color-mix(in oklab, $base, var(--palette-black) 90%)
  );

  @return $scale;
}

@mixin generate-palette($color-name, $base) {
  $scale: generate-color-scale($base);

  @each $grade, $value in $scale {
    --palette-#{$color-name}-#{$grade}: #{$value};
  }
}

// Usage example
  @include generate-palette("cyan", oklch(49.13% 0.084 222.18));
  @include generate-palette("yellow", oklch(68.4% 0.146 67.27));
  @include generate-palette("magenta", oklch(45.73% 0.158 4.61));
  @include generate-palette("green", oklch(48.52% 0.1297 137.78));
  @include generate-palette("purple", oklch(41.1% 0.117 290.38));
  @include generate-palette("orange", oklch(54.9% 0.152 35.8));