palette.scss

@use 'sass:color';
@use 'sass:math';


@function get-r($color) {
  @return color.red($color);
}

@function get-g($color) {
  @return color.green($color);
}

@function get-b($color) {
  @return color.blue($color);
}

@function multiply($color-a: white, $color-b: black) {
  $r: math.floor(math.div((get-r($color-a) * get-r($color-b)), 255));
  $g: math.floor(math.div((get-g($color-a) * get-g($color-b)), 255));
  $b: math.floor(math.div((get-b($color-a) * get-b($color-b)), 255));

  @return rgb($r, $g, $b);
}

@function base-light($color: white) {
  @return color.mix(multiply($color, $color), white, 6.5%);
}

@function base-dark($color) {
  @return color.mix(multiply($color, $color), black, 61%);
}

@function color-100($color) {
  @return color.mix($color, base-light($color), 30%);
}

@function color-200($color) {
  @return color.mix($color, base-light($color), 50%);
}

@function color-300($color) {
  @return color.mix($color, base-light($color), 70%);
}

@function color-400($color) {
  @return color.mix($color, base-light($color), 85%);
}

@function color-500($color) {
  @return color.mix($color, base-light($color), 100%);
}

@function color-600($color) {
  @return color.mix($color, base-dark($color), 87%);
}

@function color-700($color) {
  @return color.mix($color, base-dark($color), 70%);
}

@function color-800($color) {
  @return color.mix($color, base-dark($color), 54%);
}

@function color-900($color) {
  @return color.mix($color, base-dark($color), 25%);
}