@use "sass:math";

@function tetrad($color) {
  $hue: hue($color);
  $saturation: saturation($color);
  $lightness: lightness($color);
  $tetrad: hsl($hue, $saturation, $lightness),
    hsl($hue + 90 % 360, $saturation, $lightness),
    hsl($hue + 180 % 360, $saturation, $lightness),
    hsl($hue + 270 % 360, $saturation, $lightness);
  @return $tetrad;
}

@function multiply($fore, $back) {
  $red: math.div(red($back) * red($fore), 255);
  $green: math.div(green($back) * green($fore), 255);
  $blue: math.div(blue($back) * blue($fore), 255);
  @return rgb($red, $green, $blue);
}

@function makeColorPalette($color) {
  $light: #fff;
  $dark: multiply($color, $color);
  $tetrad: tetrad($color);
  $palette: (
    50: mix($light, $color, 5%),
    100: mix($light, $color, 10%),
    200: mix($light, $color, 30%),
    300: mix($light, $color, 50%),
    400: mix($light, $color, 70%),
    500: mix($light, $color, 0%),
    600: mix($dark, $color, 10%),
    700: mix($dark, $color, 30%),
    800: mix($dark, $color, 50%),
    900: mix($dark, $color, 70%),
  );
  @return $palette;
}