Removed @lbry/color and brought it in-house
This commit is contained in:
ポール ウェッブ
parent
17f9c27196
commit
bbc6365dc3
4 changed files with 293 additions and 3 deletions
2
dist/index.css.map
vendored
2
dist/index.css.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -9,7 +9,6 @@
|
|||
"description": "Styling for shared components across LBRY properties",
|
||||
"devDependencies": {
|
||||
"@inc/sasslint-config": "^1.1.3",
|
||||
"@lbry/color": "^1.1.0",
|
||||
"husky": "^1.3.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"sass": "^1.17.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "@lbry/color/lbry-color";
|
||||
@import "init/color";
|
||||
@import "init/mixins";
|
||||
@import "init/variables";
|
||||
@import "init/reset";
|
||||
|
|
|
|||
291
sass/init/_color.scss
Normal file
291
sass/init/_color.scss
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
|
||||
// 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"
|
||||
);
|
||||
Loading…
Reference in a new issue