Use open-color directly (#1371)
parent
6d30351164
commit
f7e3ee2064
File diff suppressed because it is too large
Load Diff
@ -1 +1,3 @@
|
||||
@import "open-color/open-color.scss";
|
||||
|
||||
$media-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
|
||||
|
@ -1,57 +1,22 @@
|
||||
// https://yeun.github.io/open-color/
|
||||
import oc from "open-color";
|
||||
|
||||
const shades = (i: number) => [
|
||||
oc.red[i],
|
||||
oc.pink[i],
|
||||
oc.grape[i],
|
||||
oc.violet[i],
|
||||
oc.indigo[i],
|
||||
oc.blue[i],
|
||||
oc.cyan[i],
|
||||
oc.teal[i],
|
||||
oc.green[i],
|
||||
oc.lime[i],
|
||||
oc.yellow[i],
|
||||
oc.orange[i],
|
||||
];
|
||||
|
||||
export default {
|
||||
// Shade 0
|
||||
canvasBackground: [
|
||||
"#ffffff",
|
||||
"#f8f9fa",
|
||||
"#f1f3f5",
|
||||
"#fff5f5",
|
||||
"#fff0f6",
|
||||
"#f8f0fc",
|
||||
"#f3f0ff",
|
||||
"#edf2ff",
|
||||
"#e7f5ff",
|
||||
"#e3fafc",
|
||||
"#e6fcf5",
|
||||
"#ebfbee",
|
||||
"#f4fce3",
|
||||
"#fff9db",
|
||||
"#fff4e6",
|
||||
],
|
||||
// Shade 6
|
||||
elementBackground: [
|
||||
"transparent",
|
||||
"#ced4da",
|
||||
"#868e96",
|
||||
"#fa5252",
|
||||
"#e64980",
|
||||
"#be4bdb",
|
||||
"#7950f2",
|
||||
"#4c6ef5",
|
||||
"#228be6",
|
||||
"#15aabf",
|
||||
"#12b886",
|
||||
"#40c057",
|
||||
"#82c91e",
|
||||
"#fab005",
|
||||
"#fd7e14",
|
||||
],
|
||||
// Shade 9
|
||||
elementStroke: [
|
||||
"#000000",
|
||||
"#343a40",
|
||||
"#495057",
|
||||
"#c92a2a",
|
||||
"#a61e4d",
|
||||
"#862e9c",
|
||||
"#5f3dc4",
|
||||
"#364fc7",
|
||||
"#1864ab",
|
||||
"#0b7285",
|
||||
"#087f5b",
|
||||
"#2b8a3e",
|
||||
"#5c940d",
|
||||
"#e67700",
|
||||
"#d9480f",
|
||||
],
|
||||
canvasBackground: [oc.white, oc.gray[0], oc.gray[1], ...shades(0)],
|
||||
elementBackground: ["transparent", oc.gray[4], oc.gray[6], ...shades(6)],
|
||||
elementStroke: [oc.black, oc.gray[8], oc.gray[7], ...shades(9)],
|
||||
};
|
||||
|
@ -1,18 +0,0 @@
|
||||
.ProjectName {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid #eee;
|
||||
line-height: 1;
|
||||
padding: 0.75rem;
|
||||
white-space: nowrap;
|
||||
border-radius: var(--space-factor);
|
||||
}
|
||||
|
||||
.ProjectName:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.ProjectName:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px steelblue;
|
||||
}
|
@ -0,0 +1,20 @@
|
||||
@import "../_variables.scss";
|
||||
|
||||
.TextInput {
|
||||
display: inline-block;
|
||||
border: 1.5px solid $oc-gray-2;
|
||||
line-height: 1;
|
||||
padding: 0.75rem;
|
||||
white-space: nowrap;
|
||||
border-radius: var(--space-factor);
|
||||
background-color: $oc-white;
|
||||
&:not(:focus) {
|
||||
&:hover {
|
||||
background-color: $oc-gray-1;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px $oc-blue-5;
|
||||
}
|
||||
}
|
@ -1,7 +0,0 @@
|
||||
:root {
|
||||
--text-color-primary: #343a40;
|
||||
--bg-color-main: #fff;
|
||||
--shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
|
||||
--border-radius-m: 4px;
|
||||
--space-factor: 0.25rem;
|
||||
}
|
Loading…
Reference in New Issue