292 lines
8.2 KiB
SCSS
292 lines
8.2 KiB
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"
|
|
);
|