colors

$green-color: #2da42c;

$blue-color: #3477ff;

$purple-color: #802efb;

$red-color: #ef3360;

$yellow-color: #ffc800;

$black-color: #071417;

$white-color: #fff;

$variants-color-alpha: (
  "100": 14,
  "200": 28,
  "300": 42
);

$variants-bw-alpha: (
  "50":  7,
  "100": 14,
  "150": 21,
  "200": 28,
  "250": 35,
  "300": 42
);

$brand-color: $green-color;

$action-color: $blue-color;

$primary-color: $black-color;

$secondary-color: mix($black-color, #fff, map-get($variants-bw-alpha, "300"));

$background-color: mix($black-color, #fff, map-get($variants-bw-alpha, "50"));

$color-palette: (
  "green":      $green-color,
  "blue":       $blue-color,
  "purple":     $purple-color,
  "red":        $red-color,
  "yellow":     $yellow-color,
  "black":      $black-color,
  "white":      $white-color,

  "brand":      $brand-color,
  "action":     $action-color,
  "primary":    $primary-color,
  "secondary":  $secondary-color,
  "background": $background-color
);

@function get-alpha-variant($variants, $variant) { ... }

@function get-alpha($color, $variant) { ... }

@function get-color($color: null) { ... }

@function palette($name: null, $variant: null, $opacity: false) { ... }

@mixin background-color($name: null, $variant: null) { ... }

@mixin color($name: null, $variant: null) { ... }