components/sass/init/_color.scss

//  General
//  ───────────────────────────────────

$lbry-white: #fff;
$lbry-silver: #f1f3f5;
$lbry-black: #212529;

$base-gray: #ced4da;
$base-teal: #38d9a9;
$base-cyan: #3bc9db;
$base-blue: #339af0;
$base-indigo: #748ffc;
$base-violet: #9775fa;
$base-grape: #da77f2;
$base-pink: #f783ac;
$base-red: #e03131;
$base-orange: #ff922b;
$base-yellow: #ffe066;
$base-lime: #a9e34b;
$base-green: #51cf66;



//  Gray
//  ───────────────────────────────────

$lbry-gray-list: (
  "1": mix($lbry-white, $base-gray, 40%),
  "2": mix($lbry-white, $base-gray, 20%),
  "3": $base-gray,
  "4": mix($lbry-black, $base-gray, 20%),
  "5": mix($lbry-black, $base-gray, 40%)
);

$lbry-gray-1: map-get($lbry-gray-list, "1");
$lbry-gray-2: map-get($lbry-gray-list, "2");
$lbry-gray-3: map-get($lbry-gray-list, "3");
$lbry-gray-4: map-get($lbry-gray-list, "4");
$lbry-gray-5: map-get($lbry-gray-list, "5");



//  Teal
//  ───────────────────────────────────

$lbry-teal-list: (
  "1": mix($lbry-white, $base-teal, 40%),
  "2": mix($lbry-white, $base-teal, 20%),
  "3": $base-teal,
  "4": mix($lbry-black, $base-teal, 20%),
  "5": mix($lbry-black, $base-teal, 40%)
);

$lbry-teal-1: map-get($lbry-teal-list, "1");
$lbry-teal-2: map-get($lbry-teal-list, "2");
$lbry-teal-3: map-get($lbry-teal-list, "3");
$lbry-teal-4: map-get($lbry-teal-list, "4");
$lbry-teal-5: map-get($lbry-teal-list, "5");



//  Cyan
//  ───────────────────────────────────

$lbry-cyan-list: (
  "1": mix($lbry-white, $base-cyan, 40%),
  "2": mix($lbry-white, $base-cyan, 20%),
  "3": $base-cyan,
  "4": mix($lbry-black, $base-cyan, 20%),
  "5": mix($lbry-black, $base-cyan, 40%)
);

$lbry-cyan-1: map-get($lbry-cyan-list, "1");
$lbry-cyan-2: map-get($lbry-cyan-list, "2");
$lbry-cyan-3: map-get($lbry-cyan-list, "3");
$lbry-cyan-4: map-get($lbry-cyan-list, "4");
$lbry-cyan-5: map-get($lbry-cyan-list, "5");



//  Blue
//  ───────────────────────────────────

$lbry-blue-list: (
  "1": mix($lbry-white, $base-blue, 40%),
  "2": mix($lbry-white, $base-blue, 20%),
  "3": $base-blue,
  "4": mix($lbry-black, $base-blue, 20%),
  "5": mix($lbry-black, $base-blue, 40%)
);

$lbry-blue-1: map-get($lbry-blue-list, "1");
$lbry-blue-2: map-get($lbry-blue-list, "2");
$lbry-blue-3: map-get($lbry-blue-list, "3");
$lbry-blue-4: map-get($lbry-blue-list, "4");
$lbry-blue-5: map-get($lbry-blue-list, "5");



//  Indigo
//  ───────────────────────────────────

$lbry-indigo-list: (
  "1": mix($lbry-white, $base-indigo, 40%),
  "2": mix($lbry-white, $base-indigo, 20%),
  "3": $base-indigo,
  "4": mix($lbry-black, $base-indigo, 20%),
  "5": mix($lbry-black, $base-indigo, 40%)
);

$lbry-indigo-1: map-get($lbry-indigo-list, "1");
$lbry-indigo-2: map-get($lbry-indigo-list, "2");
$lbry-indigo-3: map-get($lbry-indigo-list, "3");
$lbry-indigo-4: map-get($lbry-indigo-list, "4");
$lbry-indigo-5: map-get($lbry-indigo-list, "5");



//  Violet
//  ───────────────────────────────────

$lbry-violet-list: (
  "1": mix($lbry-white, $base-violet, 40%),
  "2": mix($lbry-white, $base-violet, 20%),
  "3": $base-violet,
  "4": mix($lbry-black, $base-violet, 20%),
  "5": mix($lbry-black, $base-violet, 40%)
);

$lbry-violet-1: map-get($lbry-violet-list, "1");
$lbry-violet-2: map-get($lbry-violet-list, "2");
$lbry-violet-3: map-get($lbry-violet-list, "3");
$lbry-violet-4: map-get($lbry-violet-list, "4");
$lbry-violet-5: map-get($lbry-violet-list, "5");



//  Grape
//  ───────────────────────────────────

$lbry-grape-list: (
  "1": mix($lbry-white, $base-grape, 40%),
  "2": mix($lbry-white, $base-grape, 20%),
  "3": $base-grape,
  "4": mix($lbry-black, $base-grape, 20%),
  "5": mix($lbry-black, $base-grape, 40%)
);

$lbry-grape-1: map-get($lbry-grape-list, "1");
$lbry-grape-2: map-get($lbry-grape-list, "2");
$lbry-grape-3: map-get($lbry-grape-list, "3");
$lbry-grape-4: map-get($lbry-grape-list, "4");
$lbry-grape-5: map-get($lbry-grape-list, "5");



//  Pink
//  ───────────────────────────────────

$lbry-pink-list: (
  "1": mix($lbry-white, $base-pink, 40%),
  "2": mix($lbry-white, $base-pink, 20%),
  "3": $base-pink,
  "4": mix($lbry-black, $base-pink, 20%),
  "5": mix($lbry-black, $base-pink, 40%)
);

$lbry-pink-1: map-get($lbry-pink-list, "1");
$lbry-pink-2: map-get($lbry-pink-list, "2");
$lbry-pink-3: map-get($lbry-pink-list, "3");
$lbry-pink-4: map-get($lbry-pink-list, "4");
$lbry-pink-5: map-get($lbry-pink-list, "5");



//  Red
//  ───────────────────────────────────

$lbry-red-list: (
  "1": mix($lbry-white, $base-red, 40%),
  "2": mix($lbry-white, $base-red, 20%),
  "3": $base-red,
  "4": mix($lbry-black, $base-red, 20%),
  "5": mix($lbry-black, $base-red, 40%)
);

$lbry-red-1: map-get($lbry-red-list, "1");
$lbry-red-2: map-get($lbry-red-list, "2");
$lbry-red-3: map-get($lbry-red-list, "3");
$lbry-red-4: map-get($lbry-red-list, "4");
$lbry-red-5: map-get($lbry-red-list, "5");



//  Orange
//  ───────────────────────────────────

$lbry-orange-list: (
  "1": mix($lbry-white, $base-orange, 40%),
  "2": mix($lbry-white, $base-orange, 20%),
  "3": $base-orange,
  "4": mix($lbry-black, $base-orange, 20%),
  "5": mix($lbry-black, $base-orange, 40%)
);

$lbry-orange-1: map-get($lbry-orange-list, "1");
$lbry-orange-2: map-get($lbry-orange-list, "2");
$lbry-orange-3: map-get($lbry-orange-list, "3");
$lbry-orange-4: map-get($lbry-orange-list, "4");
$lbry-orange-5: map-get($lbry-orange-list, "5");



//  Yellow
//  ───────────────────────────────────

$lbry-yellow-list: (
  "1": mix($lbry-white, $base-yellow, 40%),
  "2": mix($lbry-white, $base-yellow, 20%),
  "3": $base-yellow,
  "4": mix($lbry-black, $base-yellow, 20%),
  "5": mix($lbry-black, $base-yellow, 40%)
);

$lbry-yellow-1: map-get($lbry-yellow-list, "1");
$lbry-yellow-2: map-get($lbry-yellow-list, "2");
$lbry-yellow-3: map-get($lbry-yellow-list, "3");
$lbry-yellow-4: map-get($lbry-yellow-list, "4");
$lbry-yellow-5: map-get($lbry-yellow-list, "5");



//  Lime
//  ───────────────────────────────────

$lbry-lime-list: (
  "1": mix($lbry-white, $base-lime, 40%),
  "2": mix($lbry-white, $base-lime, 20%),
  "3": $base-lime,
  "4": mix($lbry-black, $base-lime, 20%),
  "5": mix($lbry-black, $base-lime, 40%)
);

$lbry-lime-1: map-get($lbry-lime-list, "1");
$lbry-lime-2: map-get($lbry-lime-list, "2");
$lbry-lime-3: map-get($lbry-lime-list, "3");
$lbry-lime-4: map-get($lbry-lime-list, "4");
$lbry-lime-5: map-get($lbry-lime-list, "5");



//  Green
//  ───────────────────────────────────

$lbry-green-list: (
  "1": mix($lbry-white, $base-green, 40%),
  "2": mix($lbry-white, $base-green, 20%),
  "3": $base-green,
  "4": mix($lbry-black, $base-green, 20%),
  "5": mix($lbry-black, $base-green, 40%)
);

$lbry-green-1: map-get($lbry-green-list, "1");
$lbry-green-2: map-get($lbry-green-list, "2");
$lbry-green-3: map-get($lbry-green-list, "3");
$lbry-green-4: map-get($lbry-green-list, "4");
$lbry-green-5: map-get($lbry-green-list, "5");



//  Color list
//  ───────────────────────────────────

$lbry-color-spectrum: 9;

$lbry-color-list: (
  $lbry-gray-list: "gray",
  $lbry-teal-list: "teal",
  $lbry-cyan-list: "cyan",
  $lbry-blue-list: "blue",
  $lbry-indigo-list: "indigo",
  $lbry-violet-list: "violet",
  $lbry-grape-list: "grape",
  $lbry-pink-list: "pink",
  $lbry-red-list: "red",
  $lbry-orange-list: "orange",
  $lbry-yellow-list: "yellow",
  $lbry-lime-list: "lime",
  $lbry-green-list: "green"
);