Use open-color directly (#1371)

package.json

@@ -24,6 +24,7 @@
     "browser-nativefs": "0.6.0",
     "i18next-browser-languagedetector": "4.0.2",
     "nanoid": "2.1.11",
+    "open-color": "1.7.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-scripts": "3.4.1",

src/_variables.scss

@@ -1 +1,3 @@
+@import "open-color/open-color.scss";
+
 $media-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";

src/appState.ts

@@ -1,3 +1,4 @@
+import oc from "open-color";
 import { AppState, FlooredNumber } from "./types";
 import { getDateTime } from "./utils";
 import { t } from "./i18n";
@@ -16,7 +17,7 @@ export function getDefaultAppState(): AppState {
     elementType: "selection",
     elementLocked: false,
     exportBackground: true,
-    currentItemStrokeColor: "#000000",
+    currentItemStrokeColor: oc.black,
     currentItemBackgroundColor: "transparent",
     currentItemFillStyle: "hachure",
     currentItemStrokeWidth: 1,
@@ -24,7 +25,7 @@ export function getDefaultAppState(): AppState {
     currentItemOpacity: 100,
     currentItemFont: DEFAULT_FONT,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
-    viewBackgroundColor: "#ffffff",
+    viewBackgroundColor: oc.white,
     scrollX: 0 as FlooredNumber,
     scrollY: 0 as FlooredNumber,
     cursorX: 0,

src/colors.ts

@@ -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)],
 };

src/components/ColorPicker.scss

@@ -1,7 +1,9 @@
+@import "open-color/open-color.scss";
+
 .color-picker {
-  background: rgb(255, 255, 255);
-  border: 0px solid rgba(0, 0, 0, 0.25);
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
+  background: $oc-white;
+  border: 0px solid transparentize($oc-white, 0.75);
+  box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
   border-radius: 4px;
   position: absolute;
   :root[dir="ltr"] & {
@@ -23,7 +25,7 @@
   height: 0px;
   border-style: solid;
   border-width: 0px 9px 10px;
-  border-color: transparent transparent rgb(255, 255, 255);
+  border-color: transparent transparent $oc-white;
   position: absolute;
   top: -10px;
   :root[dir="ltr"] & {
@@ -35,7 +37,7 @@
 }
 
 .color-picker-triangle-shadow {
-  border-color: transparent transparent rgba(0, 0, 0, 0.1);
+  border-color: transparent transparent transparentize($oc-black, 0.9);
   top: -11px;
 }
 
@@ -59,17 +61,18 @@
   margin: 0;
   box-sizing: border-box;
   border: 1px solid #ddd;
+  background-color: currentColor !important;
 }
 
 .color-picker-swatch:focus {
-  /* Note: in the original react-color it uses the color of the element,
-     but it's too annoying to set from JavaScript without a css lib... */
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+  /* TODO: only show the border when the color is too light to see as a shadow */
+  box-shadow: 0 0 4px 1px currentColor;
+  border-color: $oc-blue-5;
 }
 
 .color-picker-transparent {
   border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
+  box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
   position: absolute;
   top: 0px;
   right: 0px;
@@ -83,7 +86,7 @@
 }
 
 .color-picker-hash {
-  background: #dee2e6;
+  background: $oc-gray-3;
   height: 1.875rem;
   width: 1.875rem;
   :root[dir="ltr"] & {
@@ -92,7 +95,7 @@
   :root[dir="rtl"] & {
     border-radius: 0px 4px 4px 0px;
   }
-  color: #495057;
+  color: $oc-gray-7;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -100,7 +103,7 @@
   position: relative;
 }
 .color-input-container:focus-within .color-picker-hash {
-  box-shadow: 0 0 0 2px #a5d8ff;
+  box-shadow: 0 0 0 2px $oc-blue-2;
 }
 .color-input-container:focus-within .color-picker-hash::before,
 .color-input-container:focus-within .color-picker-hash::after {
@@ -111,7 +114,7 @@
   top: 0;
 }
 .color-input-container:focus-within .color-picker-hash::before {
-  background: #dee2e6;
+  background: $oc-gray-3;
   :root[dir="ltr"] & {
     right: -1px;
   }
@@ -137,11 +140,11 @@
   width: 12ch; /* length of `transparent` + 1 */
   margin: 0;
   font-size: 1rem;
-  color: #343a40;
+  color: $oc-gray-8;
   border: 0px;
   outline: none;
   height: 1.75em;
-  box-shadow: #dee2e6 0px 0px 0px 1px inset;
+  box-shadow: $oc-gray-3 0px 0px 0px 1px inset;
   :root[dir="ltr"] & {
     border-radius: 0px 4px 4px 0px;
   }
@@ -158,7 +161,7 @@
   height: 1.875rem;
   width: 1.875rem;
   margin-inline-end: 0.25rem;
-  border: 1px solid #dee2e6;
+  border: 1px solid $oc-gray-3;
   position: relative;
   overflow: hidden;
   background-color: transparent !important;

src/components/ColorPicker.tsx

@@ -124,13 +124,14 @@ const Picker = function ({
         {colors.map((_color, i) => (
           <button
             className="color-picker-swatch"
-            onClick={() => {
+            onClick={(event) => {
+              (event.currentTarget as HTMLButtonElement).focus();
               onChange(_color);
             }}
             title={`${_color} — ${keyBindings[i].toUpperCase()}`}
             aria-label={_color}
             aria-keyshortcuts={keyBindings[i]}
-            style={{ backgroundColor: _color }}
+            style={{ color: _color }}
             key={_color}
             ref={(el) => {
               if (el && i === 0) {
@@ -250,7 +251,11 @@ export function ColorPicker({
       </div>
       <React.Suspense fallback="">
         {isActive ? (
-          <Popover onCloseRequest={() => setActive(false)}>
+          <Popover
+            onCloseRequest={(event) =>
+              event.target !== pickerButton.current && setActive(false)
+            }
+          >
             <Picker
               colors={colors[type]}
               color={color || null}

src/components/ContextMenu.css → src/components/ContextMenu.scss

@@ -1,14 +1,16 @@
+@import "open-color/open-color.scss";
+
 .context-menu {
   position: relative;
   border-radius: 4px;
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 3px 10px transparentize($oc-black, 0.8);
   padding: 0;
   list-style: none;
   user-select: none;
   margin: -0.25rem 0 0 0.125rem;
   padding: 0.25rem 0;
-  background-color: #f2f2f2;
-  border: 1px solid #bcbcbc;
+  background-color: $oc-gray-1;
+  border: 1px solid $oc-gray-5;
 }
 
 .context-menu-option {
@@ -19,14 +21,14 @@
   padding: 0.25rem 1rem 0.25rem 1.25rem;
   text-align: start;
   border-radius: 0;
-  background-color: #f2f2f2;
+  background-color: transparent;
   border: none;
   white-space: nowrap;
 }
 
 .context-menu-option:hover {
-  color: #fff;
-  background-color: #4e95f5;
+  color: $oc-white;
+  background-color: $oc-blue-5;
 }
 
 .context-menu-option:focus {

src/components/ContextMenu.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Popover } from "./Popover";
 import { render, unmountComponentAtNode } from "react-dom";
 
-import "./ContextMenu.css";
+import "./ContextMenu.scss";
 
 type ContextMenuOption = {
   label: string;

src/components/Dialog.scss

@@ -38,7 +38,7 @@
     font-size: 1.25em;
 
     box-sizing: border-box;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $oc-gray-4;
     z-index: 1;
   }
   .Dialog__titleContent {

src/components/GitHubCorner.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import oc from "open-color";
 
 // https://github.com/tholman/github-corners
 export const GitHubCorner = React.memo(() => (
@@ -15,17 +16,17 @@ export const GitHubCorner = React.memo(() => (
       rel="noopener noreferrer"
       aria-label="GitHub repository"
     >
-      <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
+      <path d="M0 0l115 115h15l12 27 108 108V0z" fill={oc.gray[6]} />
       <path
         className="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={{ transformOrigin: "130px 106px" }}
-        fill="#fff"
+        fill={oc.white}
       />
       <path
         className="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="#fff"
+        fill={oc.white}
       />
     </a>
   </svg>

src/components/HintViewer.scss

@@ -1,7 +1,7 @@
 @import "../_variables";
 
 .HintViewer {
-  color: #868e96; /* OC: GRAY 6*/
+  color: $oc-gray-6;
   font-size: 0.8rem;
   left: 50%;
   pointer-events: none;
@@ -16,7 +16,7 @@
   }
 
   > span {
-    background-color: rgba(255, 255, 255, 0.88);
+    background-color: transparentize($oc-white, 0.12);
     padding: 0.2rem 0.4rem;
     border-radius: 3px;
   }

src/components/Modal.scss

@@ -20,7 +20,7 @@
   right: 0;
   bottom: 0;
   z-index: 1;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: transparentize($oc-black, 0.7);
   backdrop-filter: blur(2px);
 }
 

src/components/Popover.tsx

@@ -6,7 +6,7 @@ type Props = {
   top?: number;
   left?: number;
   children?: React.ReactNode;
-  onCloseRequest?(): void;
+  onCloseRequest?(event: PointerEvent): void;
   fitInViewport?: boolean;
 };
 
@@ -38,9 +38,9 @@ export function Popover({
 
   useEffect(() => {
     if (onCloseRequest) {
-      const handler = (e: Event) => {
-        if (!popoverRef.current?.contains(e.target as Node)) {
-          unstable_batchedUpdates(() => onCloseRequest());
+      const handler = (event: PointerEvent) => {
+        if (!popoverRef.current?.contains(event.target as Node)) {
+          unstable_batchedUpdates(() => onCloseRequest(event));
         }
       };
       document.addEventListener("pointerdown", handler, false);

src/components/ProjectName.css

@@ -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;
-}

src/components/ProjectName.tsx

@@ -1,4 +1,4 @@
-import "./ProjectName.css";
+import "./TextInput.scss";
 
 import React, { Component } from "react";
 import { selectNode, removeSelection } from "../utils";
@@ -48,7 +48,7 @@ export class ProjectName extends Component<Props> {
         suppressContentEditableWarning
         ref={this.makeEditable}
         data-type="wysiwyg"
-        className="ProjectName"
+        className="TextInput"
         role="textbox"
         aria-label={this.props.label}
         onBlur={this.handleBlur}

src/components/RoomDialog.scss

@@ -1,6 +1,8 @@
+@import "../_variables";
+
 .RoomDialog-modalButton.is-collaborating {
-  background-color: #ebfbee; // OC GREEN-0
-  color: #2b8a3e; // OC GREEN-9
+  background-color: $oc-green-0;
+  color: $oc-green-9;
 }
 
 .RoomDialog-modalButton-collaborators {
@@ -10,8 +12,8 @@
   right: -5px;
   padding: 3px;
   border-radius: 50%;
-  background-color: #40c057; // OC GREEN-6
-  color: #fff;
+  background-color: $oc-green-6;
+  color: $oc-white;
   font-size: 0.7em;
   font-family: var(--ui-font);
 }
@@ -33,7 +35,7 @@
   padding: 0 0.5rem;
   white-space: nowrap;
   border-radius: var(--space-factor);
-  background-color: #eee;
+  background-color: var(--button-gray-1);
 }
 
 .RoomDialog-usernameContainer {
@@ -44,32 +46,15 @@
   justify-content: center;
 }
 
-.RoomDialog-usernameLabel {
-}
-
 .RoomDialog-username {
+  appearance: none;
   min-width: 0;
   flex: 1 1 auto;
   margin-left: 1em;
-  display: inline-block;
-  cursor: pointer;
-  border: none;
   height: 2.5rem;
-  line-height: 2.5rem;
+  font-size: 1em;
+  line-height: 1.5;
   padding: 0 0.5rem;
-  white-space: nowrap;
-  border-radius: var(--space-factor);
-  background-color: #fff;
-  border: 1px solid #eee;
-}
-
-.RoomDialog-link:hover {
-  background-color: #eee;
-}
-
-.RoomDialog-link:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px steelblue;
 }
 
 .RoomDialog-sessionStartButtonContainer {
@@ -78,6 +63,6 @@
 }
 
 .RoomDialog-stopSession {
-  background-color: #ffe3e3; // OC RED-1
-  color: #c92a2a; // OC RED-9
+  background-color: $oc-red-1;
+  color: $oc-red-9;
 }

src/components/RoomDialog.tsx

@@ -83,7 +83,7 @@ function RoomModal({
             <input
               id="username"
               value={username || ""}
-              className="RoomDialog-username"
+              className="RoomDialog-username TextInput"
               onChange={(event) => onUsernameChange(event.target.value)}
             />
           </div>

src/components/ShortcutsDialog.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import oc from "open-color";
 import { t } from "../i18n";
 import { isDarwin } from "../keys";
 import { Dialog } from "./Dialog";
@@ -33,7 +34,7 @@ const ShortcutIsland = (props: {
 }) => (
   <div
     style={{
-      border: "1px solid #ced4da",
+      border: `1px solid ${oc.gray[4]}`,
       marginBottom: "16px",
     }}
   >
@@ -41,7 +42,7 @@ const ShortcutIsland = (props: {
       style={{
         margin: "0",
         padding: "4px",
-        backgroundColor: "#e9ecef",
+        backgroundColor: oc.gray[2],
         textAlign: "center",
       }}
     >
@@ -58,7 +59,7 @@ const Shortcut = (props: {
 }) => (
   <div
     style={{
-      borderTop: "1px solid #ced4da",
+      borderTop: `1px solid ${oc.gray[4]}`,
     }}
   >
     <div
@@ -108,10 +109,10 @@ const ShortcutKey = (props: { children: React.ReactNode }) => (
   <span
     style={{
       wordBreak: "keep-all",
-      border: "1px solid #ced4da",
+      border: `1px solid ${oc.gray[4]}`,
       padding: "2px 8px",
       margin: "0 4px",
-      backgroundColor: "#e9ecef",
+      backgroundColor: oc.gray[2],
       borderRadius: "2px",
       fontSize: "0.8em",
     }}
@@ -125,7 +126,7 @@ const Footer = () => (
       display: "flex",
       flexDirection: "row",
       justifyContent: "space-evenly",
-      borderTop: "1px solid #ced4da",
+      borderTop: `1px solid ${oc.gray[4]}`,
       marginTop: 8,
       paddingTop: 16,
     }}

src/components/TextInput.scss

@@ -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;
+  }
+}

src/components/ToolIcon.scss

@@ -1,8 +1,10 @@
+@import "open-color/open-color.scss";
+
 :root {
-  --button-gray-1: #e9ecef;
-  --button-gray-2: #ced4da;
-  --button-gray-3: #adb5bd;
-  --button-blue: #a5d8ff;
+  --button-gray-1: #{$oc-gray-2};
+  --button-gray-2: #{$oc-gray-4};
+  --button-gray-3: #{$oc-gray-5};
+  --button-blue: #{$oc-blue-2};
 }
 
 .ToolIcon {
@@ -116,7 +118,7 @@
   bottom: 2px;
   right: 3px;
   font-size: 0.5em;
-  color: var(--button-gray-3); // OC GRAY 5
+  color: var(--button-gray-3);
   font-family: var(--ui-font);
   user-select: none;
 }

src/components/icons.tsx

@@ -5,7 +5,9 @@
 
 import React from "react";
 
-const ACTIVE_ELEMENT_COLOR = "#ffa94d"; // OC ORANGE 4
+import oc from "open-color";
+
+const ACTIVE_ELEMENT_COLOR = oc.orange[4];
 type Opts = { width?: number; height?: number; mirror?: true } & React.SVGProps<
   SVGSVGElement
 >;
@@ -106,7 +108,7 @@ export const bringForward = createIcon(
   <>
     <path
       d="M22 9.556C22 8.696 21.303 8 20.444 8H16v8H8v4.444C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
-      stroke="#000"
+      stroke={oc.black}
       strokeWidth="2"
     />
     <path
@@ -129,7 +131,7 @@ export const sendBackward = createIcon(
     />
     <path
       d="M22 9.556C22 8.696 21.303 8 20.444 8H9.556C8.696 8 8 8.697 8 9.556v10.888C8 21.304 8.697 22 9.556 22h10.888c.86 0 1.556-.697 1.556-1.556V9.556z"
-      stroke="#000"
+      stroke={oc.black}
       strokeWidth="2"
     />
   </>,
@@ -140,7 +142,7 @@ export const bringToFront = createIcon(
   <>
     <path
       d="M13 21a1 1 0 001 1h7a1 1 0 001-1v-7a1 1 0 00-1-1h-3v5h-5v3zM11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h3V6h5V3z"
-      stroke="#000"
+      stroke={oc.black}
       strokeWidth="2"
     />
     <path
@@ -164,7 +166,7 @@ export const sendToBack = createIcon(
     />
     <path
       d="M11 3a1 1 0 00-1-1H3a1 1 0 00-1 1v7a1 1 0 001 1h8V3zM22 14a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h8v-8z"
-      stroke="#000"
+      stroke={oc.black}
       strokeLinejoin="round"
       strokeWidth="2"
     />

src/renderer/renderScene.ts

@@ -1,5 +1,6 @@
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { RoughSVG } from "roughjs/bin/svg";
+import oc from "open-color";
 
 import { FlooredNumber, AppState } from "../types";
 import {
@@ -166,7 +167,7 @@ export function renderScene(
       const selectionColors = [];
       // local user
       if (appState.selectedElementIds[element.id]) {
-        selectionColors.push("#000000");
+        selectionColors.push(oc.black);
       }
       // remote users
       if (sceneState.remoteSelectedElementIds[element.id]) {
@@ -236,7 +237,7 @@ export function renderScene(
     // Paint resize handlers
     if (locallySelectedElements.length === 1) {
       context.translate(sceneState.scrollX, sceneState.scrollY);
-      context.fillStyle = "#fff";
+      context.fillStyle = oc.white;
       const handlers = handlerRectangles(
         locallySelectedElements[0],
         sceneState.zoom,
@@ -275,7 +276,7 @@ export function renderScene(
       if (canResizeMutlipleElements(locallySelectedElements)) {
         const dashedLinePadding = 4 / sceneState.zoom;
         context.translate(sceneState.scrollX, sceneState.scrollY);
-        context.fillStyle = "#fff";
+        context.fillStyle = oc.white;
         const [x1, y1, x2, y2] = getCommonBounds(locallySelectedElements);
         const initialLineDash = context.getLineDash();
         context.setLineDash([2 / sceneState.zoom]);
@@ -412,7 +413,7 @@ export function renderScene(
         measure.width + 2 * paddingHorizontal,
         measureHeight + 2 * paddingVertical,
       );
-      context.fillStyle = "#ffffff";
+      context.fillStyle = oc.white;
       context.fillText(
         username,
         offsetX + paddingHorizontal,

src/shapes.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import oc from "open-color";
 
 // We inline font-awesome icons in order to save on js size rather than including the font awesome react library
 export const SHAPES =
@@ -57,7 +58,7 @@ export const SHAPES =
             y1="3"
             x2="6"
             y2="3"
-            stroke="#000"
+            stroke={oc.black}
             strokeLinecap="round"
           />
         </svg>

src/styles.scss

@@ -1,4 +1,3 @@
-@import "./theme.css";
 @import "./_variables";
 
 :root {
@@ -6,6 +5,11 @@
   --sab: env(safe-area-inset-bottom);
   --sal: env(safe-area-inset-left);
   --sar: env(safe-area-inset-right);
+  --text-color-primary: #{$oc-gray-8};
+  --bg-color-main: #{$oc-white};
+  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
+  --border-radius-m: 4px;
+  --space-factor: 0.25rem;
 }
 
 body {
@@ -25,7 +29,7 @@ body {
 a {
   font-weight: 500;
   text-decoration: none;
-  color: #1c7ed6; /* OC Blue 7 */
+  color: $oc-blue-7; /* OC Blue 7 */
 
   &:hover {
     text-decoration: underline;
@@ -123,20 +127,20 @@ canvas {
 
 .divider {
   width: 1px;
-  background-color: #e9ecef;
+  background-color: $oc-gray-2;
   margin: 1px;
 }
 
 .buttonList label:focus-within,
 input:focus {
   outline: transparent;
-  box-shadow: 0 0 0 2px #a5d8ff;
+  box-shadow: 0 0 0 2px $oc-blue-2;
 }
 
 button,
 .buttonList label {
   user-select: none;
-  background-color: #e9ecef;
+  background-color: $oc-gray-2;
   border: 0;
   border-radius: 4px;
   margin: 0.125rem 0;
@@ -147,15 +151,15 @@ button,
 
   &:focus {
     outline: transparent;
-    box-shadow: 0 0 0 2px #a5d8ff;
+    box-shadow: 0 0 0 2px $oc-blue-2;
   }
 
   &:hover {
-    background-color: #ced4da;
+    background-color: $oc-gray-4;
   }
 
   &:active {
-    background-color: #adb5bd;
+    background-color: $oc-gray-5;
   }
 
   &:disabled {
@@ -165,12 +169,12 @@ button,
 
 .active,
 .buttonList label.active {
-  background-color: #ced4da;
+  background-color: $oc-gray-4;
   &:hover {
-    background-color: #ced4da;
+    background-color: $oc-gray-4;
   }
   &:active {
-    background-color: #adb5bd;
+    background-color: $oc-gray-5;
   }
 }
 
@@ -297,8 +301,8 @@ button,
     justify-content: center;
 
     padding: 40px;
-    background-color: #fff5f5;
-    border: 3px solid #c92a2a;
+    background-color: $oc-red-1;
+    border: 3px solid $oc-red-9;
   }
 
   .ErrorSplash-paragraph {
@@ -338,9 +342,9 @@ button,
   padding: 0;
   padding-inline-start: 0.5rem;
   padding-inline-end: 1.5rem;
-  background-color: #e9ecef;
+  background-color: $oc-gray-2;
   border-radius: var(--space-factor);
-  border: 1px solid #ced4da;
+  border: 1px solid $oc-gray-4;
   font-size: 0.8rem;
   outline: none;
   appearance: none;
@@ -353,15 +357,15 @@ button,
   background-size: 0.65em auto, 100%;
 
   &:focus {
-    box-shadow: 0 0 0 2px #a5d8ff;
+    box-shadow: 0 0 0 2px $oc-blue-2;
   }
 
   &:hover {
-    background-color: #ced4da;
+    background-color: $oc-gray-4;
   }
 
   &:active {
-    background-color: #ced4da;
+    background-color: $oc-gray-4;
   }
   &.dropdown-select--floating {
     position: absolute;
@@ -403,7 +407,7 @@ button,
 .help-icon {
   position: fixed;
   cursor: pointer;
-  fill: #868e96;
+  fill: $oc-gray-6;
   bottom: 14px;
   :root[dir="ltr"] & {
     right: 14px;

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -376,8 +376,8 @@ Object {
   "strokeColor": "#5f3dc4",
   "strokeWidth": 1,
   "type": "rectangle",
-  "version": 6,
-  "versionNonce": 238820263,
+  "version": 8,
+  "versionNonce": 1604849351,
   "width": 10,
   "x": 10,
   "y": 10,
@@ -498,8 +498,8 @@ Object {
           "strokeColor": "#000000",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 5,
-          "versionNonce": 2019559783,
+          "version": 6,
+          "versionNonce": 1150084233,
           "width": 10,
           "x": 10,
           "y": 10,
@@ -537,8 +537,8 @@ Object {
           "strokeColor": "#000000",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 6,
-          "versionNonce": 1116226695,
+          "version": 7,
+          "versionNonce": 1014066025,
           "width": 10,
           "x": 10,
           "y": 10,
@@ -576,8 +576,8 @@ Object {
           "strokeColor": "#5f3dc4",
           "strokeWidth": 1,
           "type": "rectangle",
-          "version": 7,
-          "versionNonce": 238820263,
+          "version": 9,
+          "versionNonce": 1604849351,
           "width": 10,
           "x": 10,
           "y": 10,

src/theme.css

@@ -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;
-}