Update colors from open colors (#406)

* Update to open colors

* Update more

* More colors

* Dahh

* More

* Border none

* More

* Update

src/components/ColorPicker.css

@@ -65,12 +65,12 @@
 }
 
 .color-picker-hash {
-  background: rgb(240, 240, 240);
+  background: #dee2e6;
   height: 30px;
   width: 30px;
   border-radius: 4px 0px 0px 4px;
   float: left;
-  color: rgb(152, 161, 164);
+  color: #868e96;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -79,11 +79,11 @@
 .color-picker-input {
   width: 100px;
   font-size: 14px;
-  color: rgb(102, 102, 102);
+  color: #868e96;
   border: 0px;
   outline: none;
   height: 28px;
-  box-shadow: rgb(240, 240, 240) 0px 0px 0px 1px inset;
+  box-shadow: #dee2e6 0px 0px 0px 1px inset;
   box-sizing: content-box;
   border-radius: 0px 4px 4px 0px;
   float: left;
@@ -103,5 +103,5 @@
   width: 100px;
   border-radius: 2px;
   padding: 2px 4px;
-  border: 1px solid #ddd;
+  border: 1px solid #dee2e6;
 }

src/components/ToolIcon.scss

@@ -4,7 +4,7 @@
 }
 
 .ToolIcon__icon {
-  background-color: #ddd;
+  background-color: #e9ecef;
 
   width: 41px;
   height: 41px;
@@ -27,13 +27,13 @@
   font-size: inherit;
 
   &:hover .ToolIcon__icon {
-    background-color: #e7e5e5;
+    background-color: #e9ecef;
   }
   &:active .ToolIcon__icon {
-    background-color: #bdbebc;
+    background-color: #ced4da;
   }
   &:focus .ToolIcon__icon {
-    box-shadow: 0 0 0 2px steelblue;
+    box-shadow: 0 0 0 2px #a5d8ff;
   }
 }
 
@@ -42,12 +42,12 @@
   opacity: 0;
 
   &:hover + .ToolIcon__icon {
-    background-color: #e7e5e5;
+    background-color: #e9ecef;
   }
   &:checked + .ToolIcon__icon {
-    background-color: #bdbebc;
+    background-color: #ced4da;
   }
   &:focus + .ToolIcon__icon {
-    box-shadow: 0 0 0 2px steelblue;
+    box-shadow: 0 0 0 2px #a5d8ff;
   }
 }

src/styles.scss

@@ -30,7 +30,7 @@ body {
     margin-top: 4px;
     margin-bottom: 4px;
     font-size: 12px;
-    color: #333;
+    color: var(--text-color-primary);
   }
 
   h5:first-child {
@@ -48,35 +48,33 @@ body {
 
 .divider {
   width: 1px;
-  background-color: #ddd;
+  background-color: #e9ecef;
   margin: 1px;
 }
 
 input:focus {
   outline: transparent;
-  box-shadow: 0 0 0 2px #4682b4;
+  box-shadow: 0 0 0 2px #a5d8ff;
 }
 
 button {
-  background-color: #ddd;
-  border: 1px solid #ccc;
+  background-color: #e9ecef;
+  border: 0;
   border-radius: 4px;
   margin: 2px 0;
   padding: 5px;
   outline: transparent;
 
   &:focus {
-    box-shadow: 0 0 0 2px #4682b4;
+    box-shadow: 0 0 0 2px #a5d8ff;
   }
 
   &:hover {
-    background-color: #e7e5e5;
-    border-color: #d6d4d4;
+    background-color: #ced4da;
   }
 
   &:active {
-    background-color: #bdbebc;
-    border-color: #bdbebc;
+    background-color: #ced4da;
   }
 
   &:disabled {
@@ -85,9 +83,9 @@ button {
 }
 
 .active {
-  background-color: #bdbebc;
+  background-color: #ced4da;
   &:hover {
-    background-color: #bdbebc;
+    background-color: #ced4da;
   }
 }
 

src/theme.css

@@ -1,5 +1,5 @@
 :root {
-  --text-color-primary: #333;
+  --text-color-primary: #343a40;
   --bg-color-main: #fff;
   --shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
   --border-radius-m: 4px;