enum

* 'cleanipp' of github.com:excalidraw/excalidraw:

.editorconfig

@@ -1,12 +0,0 @@
-# http://EditorConfig.org
-
-# top-level EditorConfig file
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true

package-lock.json

@@ -11090,9 +11090,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
+      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "inquirer": {
       "version": "7.0.4",

package.json

@@ -1,5 +1,10 @@
 {
   "browserslist": {
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ],
     "production": [
       ">0.2%",
       "not dead",
@@ -11,11 +16,6 @@
       "not chrome < 70",
       "not and_uc < 13",
       "not samsung < 10"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
     ]
   },
   "dependencies": {
@@ -71,34 +71,34 @@
     }
   },
   "jest": {
+    "resetMocks": false,
     "transformIgnorePatterns": [
       "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
-    ],
+    ]
-    "resetMocks": false
   },
   "name": "excalidraw",
   "private": true,
   "scripts": {
-    "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
-    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
-    "build:version": "node ./scripts/build-version.js",
     "build": "npm run build:app && npm run build:version",
+    "build-node": "node ./scripts/build-node.js",
+    "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
+    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
+    "build:version": "node ./scripts/build-version.js",
     "eject": "react-scripts eject",
+    "fix": "npm run fix:other && npm run fix:code",
     "fix:code": "npm run test:code -- --fix",
     "fix:other": "npm run prettier -- --write",
-    "fix": "npm run fix:other && npm run fix:code",
     "locales-coverage": "node scripts/build-locales-coverage.js",
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
+    "test": "npm run test:app",
     "test:all": "npm run test:typecheck && npm run test:code && npm run test:other && npm run test:app -- --watchAll=false",
     "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --ignore-path .gitignore --ext .js,.ts,.tsx .",
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "test:other": "npm run prettier -- --list-different",
     "test:typecheck": "tsc",
-    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
+    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false"
-    "test": "npm run test:app"
   }
 }

src/components/ButtonIconCycle.tsx

@@ -14,11 +14,11 @@ export const ButtonIconCycle = <T extends any>({
 }) => {
   const current = options.find((op) => op.value === value);
 
-  function cycle() {
+  const cycle = () => {
     const index = options.indexOf(current!);
     const next = (index + 1) % options.length;
     onChange(options[next].value);
-  }
+  };
 
   return (
     <label key={group} className={clsx({ active: current!.value !== null })}>

src/components/CollabButton.scss

@@ -2,7 +2,7 @@
 
 .excalidraw {
   .CollabButton.is-collaborating {
-    background-color: var(--button-special-active-background-color);
+    background-color: var(--button-special-active-bg-color);
 
     .ToolIcon__icon svg {
       color: var(--icon-green-fill-color);

src/components/ColorPicker.scss

@@ -2,9 +2,9 @@
 
 .excalidraw {
   .color-picker {
-    background: var(--popup-background-color);
+    background: var(--popup-bg-color);
-    border: 0px solid transparentize($oc-white, 0.75);
+    border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
+    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
     border-radius: 4px;
     position: absolute;
 
@@ -24,11 +24,11 @@
   }
 
   .color-picker-triangle {
-    width: 0px;
+    width: 0;
-    height: 0px;
+    height: 0;
     border-style: solid;
-    border-width: 0px 9px 10px;
+    border-width: 0 9px 10px;
-    border-color: transparent transparent var(--popup-background-color);
+    border-color: transparent transparent var(--popup-bg-color);
     position: absolute;
     top: -10px;
 
@@ -84,12 +84,12 @@
 
   .color-picker-transparent {
     border-radius: 4px;
-    box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
+    box-shadow: transparentize($oc-black, 0.9) 0 0 0 1px inset;
     position: absolute;
-    top: 0px;
+    top: 0;
-    right: 0px;
+    right: 0;
-    bottom: 0px;
+    bottom: 0;
-    left: 0px;
+    left: 0;
   }
 
   .color-picker-transparent,
@@ -104,11 +104,11 @@
     width: 1.875rem;
 
     :root[dir="ltr"] & {
-      border-radius: 4px 0px 0px 4px;
+      border-radius: 4px 0 0 4px;
     }
 
     :root[dir="rtl"] & {
-      border-radius: 0px 4px 4px 0px;
+      border-radius: 0 4px 4px 0;
     }
 
     color: var(--input-label-color);
@@ -144,7 +144,7 @@
   }
 
   .color-input-container:focus-within .color-picker-hash::after {
-    background: var(--input-background-color);
+    background: var(--input-bg-color);
 
     :root[dir="ltr"] & {
       right: -2px;
@@ -163,19 +163,19 @@
     width: 12ch; /* length of `transparent` + 1 */
     margin: 0;
     font-size: 1rem;
-    background-color: var(--input-background-color);
+    background-color: var(--input-bg-color);
     color: var(--text-color-primary);
-    border: 0px;
+    border: 0;
     outline: none;
     height: 1.75em;
-    box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;
+    box-shadow: var(--input-border-color) 0 0 0 1px inset;
 
     :root[dir="ltr"] & {
-      border-radius: 0px 4px 4px 0px;
+      border-radius: 0 4px 4px 0;
     }
 
     :root[dir="rtl"] & {
-      border-radius: 4px 0px 0px 4px;
+      border-radius: 4px 0 0 4px;
     }
 
     float: left;

src/components/ContextMenu.scss

@@ -4,13 +4,13 @@
   .context-menu {
     position: relative;
     border-radius: 4px;
-    box-shadow: 0px 3px 10px transparentize($oc-black, 0.8);
+    box-shadow: 0 3px 10px transparentize($oc-black, 0.8);
     padding: 0;
     list-style: none;
     user-select: none;
     margin: -0.25rem 0 0 0.125rem;
     padding: 0.5rem 0;
-    background-color: var(--popup-secondary-background-color);
+    background-color: var(--popup-secondary-bg-color);
     border: 1px solid var(--button-gray-3);
     cursor: default;
   }
@@ -61,12 +61,12 @@
   }
 
   .context-menu-option:hover {
-    color: var(--popup-background-color);
+    color: var(--popup-bg-color);
     background-color: var(--select-highlight-color);
 
     &.dangerous {
       .context-menu-option__label {
-        color: var(--popup-background-color);
+        color: var(--popup-bg-color);
       }
       background-color: $oc-red-6;
     }

src/components/Dialog.scss

@@ -45,7 +45,7 @@
       position: sticky;
       top: 0;
       padding: calc(var(--space-factor) * 2);
-      background: var(--bg-color-island);
+      background: var(--island-bg-color);
       font-size: 1.25em;
 
       box-sizing: border-box;

src/components/HintViewer.scss

@@ -26,7 +26,7 @@ $wide-viewport-width: 1000px;
 
     > span {
       padding: 0.2rem 0.4rem;
-      background-color: var(--overlay-background-color);
+      background-color: var(--overlay-bg-color);
       border-radius: 4px;
     }
   }

src/components/IconPicker.scss

@@ -8,9 +8,9 @@
   }
 
   .picker {
-    background: var(--popup-background-color);
+    background: var(--popup-bg-color);
-    border: 0px solid transparentize($oc-white, 0.75);
+    border: 0 solid transparentize($oc-white, 0.75);
-    box-shadow: transparentize($oc-black, 0.75) 0px 1px 4px;
+    box-shadow: transparentize($oc-black, 0.75) 0 1px 4px;
     border-radius: 4px;
     position: absolute;
   }
@@ -56,8 +56,8 @@
   }
 
   .picker-triangle {
-    width: 0px;
+    width: 0;
-    height: 0px;
+    height: 0;
     position: relative;
     top: -10px;
     :root[dir="ltr"] & {
@@ -73,7 +73,7 @@
       content: "";
       position: absolute;
       border-style: solid;
-      border-width: 0px 9px 10px;
+      border-width: 0 9px 10px;
       border-color: transparent transparent transparentize($oc-black, 0.9);
       top: -1px;
     }
@@ -82,8 +82,8 @@
       content: "";
       position: absolute;
       border-style: solid;
-      border-width: 0px 9px 10px;
+      border-width: 0 9px 10px;
-      border-color: transparent transparent var(--popup-background-color);
+      border-color: transparent transparent var(--popup-bg-color);
     }
   }
 

src/components/Island.scss

@@ -1,7 +1,7 @@
 .excalidraw {
   .Island {
     --padding: 0;
-    background-color: var(--bg-color-island);
+    background-color: var(--island-bg-color);
     backdrop-filter: saturate(100%) blur(10px);
     box-shadow: var(--shadow-island);
     border-radius: 4px;

src/components/LayerUI.scss

@@ -71,7 +71,7 @@
     &__footer {
       position: absolute;
       z-index: 100;
-      bottom: 0px;
+      bottom: 0;
 
       :root[dir="ltr"] & {
         right: 0;
@@ -92,7 +92,7 @@
       }
 
       :root[dir="ltr"] &.transition-right {
-        transform: translate(999px, 0px);
+        transform: translate(999px, 0);
       }
 
       :root[dir="rtl"] &.transition-left {

src/components/Modal.scss

@@ -39,7 +39,7 @@
     overflow-y: auto;
 
     // for modals, reset blurry bg
-    background: var(--bg-color-island);
+    background: var(--island-bg-color);
     backdrop-filter: none;
 
     border: 1px solid var(--dialog-border);

src/components/Stats.scss

@@ -1,51 +1,53 @@
 @import "../css/variables.module";
 
-.Stats {
+.excalidraw {
-  position: fixed;
+  .Stats {
-  top: 64px;
+    position: fixed;
-  right: 12px;
+    top: 64px;
-  font-size: 12px;
+    right: 12px;
-  z-index: 999;
+    font-size: 12px;
+    z-index: 999;
 
-  h3 {
+    h3 {
-    margin: 0 24px 8px 0;
+      margin: 0 24px 8px 0;
-    white-space: nowrap;
+      white-space: nowrap;
-  }
+    }
 
-  .close {
+    .close {
-    float: right;
+      float: right;
-    height: 16px;
+      height: 16px;
-    width: 16px;
+      width: 16px;
-    cursor: pointer;
+      cursor: pointer;
-    svg {
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    table {
       width: 100%;
-      height: 100%;
+      th {
+        border-bottom: 1px solid var(--input-border-color);
+        padding: 4px;
+      }
+      tr {
+        td:nth-child(2) {
+          min-width: 24px;
+          text-align: right;
+        }
+      }
     }
-  }
 
-  table {
+    :root[dir="rtl"] & {
-    width: 100%;
+      left: 12px;
-    th {
+      right: initial;
-      border-bottom: 1px solid var(--input-border-color);
+
-      padding: 4px;
+      h3 {
-    }
+        margin: 0 0 8px 24px;
-    tr {
+      }
-      td:nth-child(2) {
+      .close {
-        min-width: 24px;
+        float: left;
-        text-align: right;
       }
     }
   }
-
-  :root[dir="rtl"] & {
-    left: 12px;
-    right: initial;
-
-    h3 {
-      margin: 0 0 8px 24px;
-    }
-    .close {
-      float: left;
-    }
-  }
 }

src/components/TextInput.scss

@@ -9,11 +9,11 @@
     padding: 0.75rem;
     white-space: nowrap;
     border-radius: var(--space-factor);
-    background-color: var(--input-background-color);
+    background-color: var(--input-bg-color);
 
     &:not(:focus) {
       &:hover {
-        background-color: var(--input-hover-background-color);
+        background-color: var(--input-hover-bg-color);
       }
     }
 

src/constants.ts

@@ -2,50 +2,50 @@ import { FontFamily } from "./element/types";
 
 export const APP_NAME = "Excalidraw";
 
-export const DRAGGING_THRESHOLD = 10; // 10px
+export const DRAGGING_THRESHOLD = 10;
-export const LINE_CONFIRM_THRESHOLD = 10; // 10px
+export const LINE_CONFIRM_THRESHOLD = 10;
 export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
 export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
 export const CURSOR_TYPE = {
-  TEXT: "text",
+  AUTO: "",
   CROSSHAIR: "crosshair",
   GRABBING: "grabbing",
-  POINTER: "pointer",
   MOVE: "move",
-  AUTO: "",
+  POINTER: "pointer",
+  TEXT: "text",
 };
 export const POINTER_BUTTON = {
   MAIN: 0,
-  WHEEL: 1,
   SECONDARY: 2,
   TOUCH: -1,
+  WHEEL: 1,
 };
 
 export enum EVENT {
+  BEFORE_UNLOAD = "beforeunload",
+  BLUR = "blur",
   COPY = "copy",
-  PASTE = "paste",
   CUT = "cut",
+  DRAG_OVER = "dragover",
+  DROP = "drop",
+  GESTURE_CHANGE = "gesturechange",
+  GESTURE_END = "gestureend",
+  GESTURE_START = "gesturestart",
+  HASHCHANGE = "hashchange",
   KEYDOWN = "keydown",
   KEYUP = "keyup",
   MOUSE_MOVE = "mousemove",
-  RESIZE = "resize",
+  PASTE = "paste",
-  UNLOAD = "unload",
-  BLUR = "blur",
-  DRAG_OVER = "dragover",
-  DROP = "drop",
-  GESTURE_END = "gestureend",
-  BEFORE_UNLOAD = "beforeunload",
-  GESTURE_START = "gesturestart",
-  GESTURE_CHANGE = "gesturechange",
   POINTER_MOVE = "pointermove",
   POINTER_UP = "pointerup",
+  RESIZE = "resize",
   STATE_CHANGE = "statechange",
-  WHEEL = "wheel",
-  TOUCH_START = "touchstart",
   TOUCH_END = "touchend",
-  HASHCHANGE = "hashchange",
+  TOUCH_START = "touchstart",
+  UNLOAD = "unload",
+  WHEEL = "wheel",
 }
 
 export const ENV = {
@@ -66,11 +66,11 @@ export const FONT_FAMILY = {
 
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
-export const DEFAULT_FONT_SIZE = 20;
 export const DEFAULT_FONT_FAMILY: FontFamily = 1;
+export const DEFAULT_FONT_SIZE = 20;
 export const DEFAULT_TEXT_ALIGN = "left";
-export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
+export const DEFAULT_VERTICAL_ALIGN = "top";
 
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
 
@@ -85,11 +85,11 @@ export const STORAGE_KEYS = {
   LOCAL_STORAGE_LIBRARY: "excalidraw-library",
 };
 
-// time in milliseconds
+// Time in milliseconds
 export const TAP_TWICE_TIMEOUT = 300;
-export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
-export const VERSION_TIMEOUT = 30000;
+export const TOUCH_CTX_MENU_TIMEOUT = 500;
+export const VERSION_TIMEOUT = 15000;
 
 export const ZOOM_STEP = 0.1;

src/css/styles.scss

@@ -43,10 +43,10 @@
   }
 
   .FixedSideContainer {
-    padding-top: var(--sat, 0px);
+    padding-top: var(--sat, 0);
-    padding-right: var(--sar, 0px);
+    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0px);
+    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0px);
+    padding-left: var(--sal, 0);
   }
 
   .panelRow {
@@ -223,10 +223,10 @@
     left: 0;
     right: 0;
     --bar-padding: calc(4 * var(--space-factor));
-    padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
+    padding-top: #{"max(var(--bar-padding), var(--sat, 0))"};
-    padding-right: var(--sar, 0px);
+    padding-right: var(--sar, 0);
-    padding-bottom: var(--sab, 0px);
+    padding-bottom: var(--sab, 0);
-    padding-left: var(--sal, 0px);
+    padding-left: var(--sal, 0);
     z-index: 4;
     display: flex;
     align-items: flex-end;
@@ -243,7 +243,7 @@
       pointer-events: initial;
 
       .panelColumn {
-        padding: 8px 8px 0px 8px;
+        padding: 8px 8px 0 8px;
       }
     }
   }
@@ -447,7 +447,7 @@
       display: none;
     }
     .scroll-back-to-content {
-      bottom: calc(80px + var(--sab, 0px));
+      bottom: calc(80px + var(--sab, 0));
       z-index: -1;
     }
   }

src/css/theme.scss

@@ -1,43 +1,43 @@
 @import "open-color/open-color.scss";
 
 :root {
-  --bg-color-island: rgba(255, 255, 255, 0.9);
+  --appearance-filter: none;
-  --popup-background-color: #{$oc-white};
+  --button-destructive-bg-color: #{$oc-red-1};
-  --space-factor: 0.25rem;
+  --button-destructive-color: #{$oc-red-9};
   --button-gray-1: #{$oc-gray-2};
   --button-gray-2: #{$oc-gray-4};
   --button-gray-3: #{$oc-gray-5};
-  --input-border-color: #{$oc-gray-3};
+  --button-special-active-bg-color: #{$oc-green-0};
-  --input-background-color: #{$oc-white};
+  --dialog-border: #{$oc-gray-6};
-  --input-hover-background-color: #{$oc-gray-1};
+  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-  --input-label-color: #{$oc-gray-7};
+  --focus-highlight-color: #{$oc-blue-2};
   --icon-fill-color: #{$oc-black};
   --icon-green-fill-color: #{$oc-green-9};
+  --input-bg-color: #{$oc-white};
+  --input-border-color: #{$oc-gray-3};
+  --input-hover-bg-color: #{$oc-gray-1};
+  --input-label-color: #{$oc-gray-7};
+  --island-bg-color: #{transparentize($oc-white, 0.12)};
   --keybinding-color: #{$oc-gray-5};
-  --sat: env(safe-area-inset-top);
+  --link-color: #{$oc-blue-7};
+  --overlay-bg-color: #{transparentize($oc-white, 0.12)};
+  --popup-bg-color: #{$oc-white};
+  --popup-secondary-bg-color: #{$oc-gray-1};
+  --popup-text-color: #{$oc-black};
+  --popup-text-inverted-color: #{$oc-white};
   --sab: env(safe-area-inset-bottom);
   --sal: env(safe-area-inset-left);
   --sar: env(safe-area-inset-right);
-  --text-color-primary: #{$oc-gray-8};
+  --sat: env(safe-area-inset-top);
-  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
-  --overlay-background-color: #{transparentize($oc-white, 0.12)};
-  --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
-  --focus-highlight-color: #{$oc-blue-2};
   --select-highlight-color: #{$oc-blue-5};
-  --appearance-filter: none;
+  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.85)};
-  --button-special-active-background-color: #{$oc-green-0};
+  --space-factor: 0.25rem;
-  --button-destructive-color: #{$oc-red-9};
+  --text-color-primary: #{$oc-gray-8};
-  --button-destructive-background-color: #{$oc-red-1};
-  --popup-secondary-background-color: #{$oc-gray-1};
-  --popup-text-color: #{$oc-black};
-  --popup-text-inverted-color: #{$oc-white};
-  --dialog-border: #{$oc-gray-6};
-  --link-color: #{$oc-blue-7};
 }
 
 .excalidraw {
   &.Appearance_dark {
-    background: #000;
+    background: $oc-black;
 
     &.Appearance_dark-background-none {
       background: none;
@@ -45,31 +45,29 @@
   }
 
   &.Appearance_dark {
-    --text-color-primary: #{$oc-gray-4};
+    --appearance-filter: invert(93%) hue-rotate(180deg);
-    --bg-color-island: #1e1e1e;
+    --button-destructive-bg-color: #5a0000;
-    --popup-background-color: #2c2c2c;
+    --button-destructive-color: #{$oc-red-3};
     --button-gray-1: #363636;
     --button-gray-2: #272727;
     --button-gray-3: #222;
-    --input-border-color: #2e2e2e;
+    --button-special-active-bg-color: #204624;
-    --input-background-color: #121212;
+    --dialog-border: #{$oc-gray-9};
-    --input-hover-background-color: #181818;
-    --input-label-color: #{$oc-gray-2};
-    --icon-fill-color: #{$oc-gray-4};
-    --icon-green-fill-color: #{$oc-green-4};
-    --keybinding-color: #{$oc-gray-6};
-    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
-    --overlay-background-color: rgba(30, 30, 30, 0.88);
     --dropdown-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292 292"><path fill="%23ced4da" d="M287 197L159 69c-4-3-8-5-13-5s-9 2-13 5L5 197c-3 4-5 8-5 13s2 9 5 13c4 4 8 5 13 5h256c5 0 9-1 13-5s5-8 5-13-1-9-5-13z"/></svg>');
     --focus-highlight-color: #{$oc-blue-6};
-    --select-highlight-color: #{$oc-blue-4};
+    --icon-fill-color: #{$oc-gray-4};
-    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --icon-green-fill-color: #{$oc-green-4};
-    --button-special-active-background-color: #204624;
+    --input-bg-color: #121212;
-    --button-destructive-color: #{$oc-red-3};
+    --input-border-color: #2e2e2e;
-    --button-destructive-background-color: #5a0000;
+    --input-hover-bg-color: #181818;
-    --popup-secondary-background-color: #222;
+    --input-label-color: #{$oc-gray-2};
+    --island-bg-color: #1e1e1e;
+    --keybinding-color: #{$oc-gray-6};
+    --overlay-bg-color: rgba(30, 30, 30, 0.88);
+    --popup-secondary-bg-color: #222;
     --popup-text-color: #{$oc-gray-4};
     --popup-text-inverted-color: #2c2c2c;
-    --dialog-border: #{$oc-gray-9};
+    --select-highlight-color: #{$oc-blue-4};
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
   }
 }

src/css/variables.module.scss

@@ -1,6 +1,6 @@
 @import "open-color/open-color.scss";
 
-// keep up to date with is-mobile.tsx
+// Keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
 
 :export {

src/excalidraw-app/collab/RoomDialog.scss

@@ -35,7 +35,7 @@
   }
 
   .RoomDialog-username {
-    background-color: var(--input-background-color);
+    background-color: var(--input-bg-color);
     border-color: var(--input-border-color);
     appearance: none;
     min-width: 0;
@@ -53,7 +53,7 @@
   }
 
   .Modal .RoomDialog-stopSession {
-    background-color: var(--button-destructive-background-color);
+    background-color: var(--button-destructive-bg-color);
 
     .ToolIcon__label,
     .ToolIcon__icon svg {

src/excalidraw-app/index.tsx

@@ -188,7 +188,7 @@ const initializeScene = async (opts: {
   return null;
 };
 
-function ExcalidrawWrapper() {
+const ExcalidrawWrapper = () => {
   // dimensions
   // ---------------------------------------------------------------------------
 
@@ -367,7 +367,7 @@ function ExcalidrawWrapper() {
       )}
     </>
   );
-}
+};
 
 export default function ExcalidrawApp() {
   return (

src/renderer/renderElement.ts

@@ -349,12 +349,12 @@ const generateElementShape = (
         if (element.type === "arrow") {
           const { startArrowhead = null, endArrowhead = "arrow" } = element;
 
-          function getArrowheadShapes(
+          const getArrowheadShapes = (
             element: ExcalidrawLinearElement,
             shape: Drawable[],
             position: "start" | "end",
             arrowhead: Arrowhead,
-          ) {
+          ) => {
             const arrowheadPoints = getArrowheadPoints(
               element,
               shape,
@@ -392,7 +392,7 @@ const generateElementShape = (
               generator.line(x3, y3, x2, y2, options),
               generator.line(x4, y4, x2, y2, options),
             ];
-          }
+          };
 
           if (startArrowhead !== null) {
             const shapes = getArrowheadShapes(

src/tests/resize.test.tsx

@@ -122,12 +122,12 @@ describe("resize rectangle ellipses and diamond elements", () => {
   );
 });
 
-function resize(
+const resize = (
   element: ExcalidrawElement,
   handleDir: TransformHandleDirection,
   mouseMove: [number, number],
   keyboardModifiers: KeyboardModifiers = {},
-) {
+) => {
   mouse.select(element);
   const handle = getTransformHandles(element, h.state.zoom, "mouse")[
     handleDir
@@ -140,4 +140,4 @@ function resize(
     mouse.move(mouseMove[0], mouseMove[1]);
     mouse.up();
   });
-}
+};