No named colors and lowercase hex (#395)

* No named colors and lowercase hex

* consistent

public/index.html

@@ -53,12 +53,12 @@
           class="octo-arm"
           d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
           style="transform-origin: 130px 106px"
-          fill="white"
+          fill="#fff"
         />
         <path
           class="octo-body"
           d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
-          fill="white"
+          fill="#fff"
         />
       </a>
     </svg>

src/components/ColorPicker.tsx

@@ -108,56 +108,56 @@ export function ColorPicker({
 const colors = {
   // Shade 0
   canvasBackground: [
-    "#FFFFFF",
-    "#F8F9FA",
-    "#F1F3F5",
-    "#FFF5F5",
-    "#FFF0F6",
-    "#F8F0FC",
-    "#F3F0FF",
-    "#EDF2FF",
-    "#E7F5FF",
-    "#E3FAFC",
-    "#E6FCF5",
-    "#EBFBEE",
-    "#F4FCE3",
-    "#FFF9DB",
-    "#FFF4E6"
+    "#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"
+    "#ced4da",
+    "#868e96",
+    "#fa5252",
+    "#e64980",
+    "#be4bdb",
+    "#7950f2",
+    "#4c6ef5",
+    "#228be6",
+    "#15aabf",
+    "#12b886",
+    "#40c057",
+    "#82c91e",
+    "#fab005",
+    "#fd7e14"
   ],
   // Shade 9
   elementStroke: [
     "#000000",
-    "#343A40",
+    "#343a40",
     "#495057",
-    "#C92A2A",
-    "#A61E4D",
-    "#862E9C",
-    "#5F3DC4",
-    "#364FC7",
-    "#1864AB",
-    "#0B7285",
-    "#087F5B",
-    "#2B8A3E",
-    "#5C940D",
-    "#E67700",
-    "#D9480F"
+    "#c92a2a",
+    "#a61e4d",
+    "#862e9c",
+    "#5f3dc4",
+    "#364fc7",
+    "#1864ab",
+    "#0b7285",
+    "#087f5b",
+    "#2b8a3e",
+    "#5c940d",
+    "#e67700",
+    "#d9480f"
   ]
 };

src/components/ContextMenu.css

@@ -27,7 +27,7 @@
 }
 
 .context-menu-option:hover {
-  color: white;
+  color: #fff;
   background-color: #4e95f5;
 }
 

src/index.tsx

@@ -440,7 +440,9 @@ export class App extends React.Component<{}, AppState> {
             icon={icon}
             checked={this.state.elementType === value}
             name="editor-current-shape"
-            title={`${capitalizeString(value)} — ${capitalizeString(value)[0]}, ${index + 1}`}
+            title={`${capitalizeString(value)} — ${
+              capitalizeString(value)[0]
+            }, ${index + 1}`}
             onChange={() => {
               this.setState({ elementType: value });
               elements = clearSelection(elements);

src/shapes.tsx

@@ -60,14 +60,7 @@ export const SHAPES = [
     icon: (
       // custom
       <svg viewBox="0 0 6 6">
-        <line
-          x1="0"
-          y1="3"
-          x2="6"
-          y2="3"
-          stroke="black"
-          strokeLinecap="round"
-        />
+        <line x1="0" y1="3" x2="6" y2="3" stroke="#000" strokeLinecap="round" />
       </svg>
     ),
     value: "line"
@@ -75,13 +68,15 @@ export const SHAPES = [
 ];
 
 export const shapesShortcutKeys = SHAPES.map((shape, index) => [
-    shape.value[0], (index + 1).toString()]
-).flat(1);
+  shape.value[0],
+  (index + 1).toString()
+]).flat(1);
 
 export function findShapeByKey(key: string) {
   const defaultElement = "selection";
   return SHAPES.reduce((element, shape, index) => {
-    if (shape.value[0] !== key && key !== (index + 1).toString()) return element;
+    if (shape.value[0] !== key && key !== (index + 1).toString())
+      return element;
 
     return shape.value;
   }, defaultElement);

src/styles.scss

@@ -54,7 +54,7 @@ body {
 
 input:focus {
   outline: transparent;
-  box-shadow: 0 0 0 2px steelblue;
+  box-shadow: 0 0 0 2px #4682b4;
 }
 
 button {
@@ -66,7 +66,7 @@ button {
   outline: transparent;
 
   &:focus {
-    box-shadow: 0 0 0 2px steelblue;
+    box-shadow: 0 0 0 2px #4682b4;
   }
 
   &:hover {

src/theme.css

@@ -1,11 +1,7 @@
 :root {
   --text-color-primary: #333;
-
-  --bg-color-main: white;
-
+  --bg-color-main: #fff;
   --shadow-island: 0 1px 5px rgba(0, 0, 0, 0.15);
-
   --border-radius-m: 4px;
-
   --space-factor: 4px;
 }