scope css under name space excalidraw (#1983)

public/index.html

@@ -81,7 +81,6 @@
       href="manifest.json"
       style="--pwacompat-splash-font: 24px Virgil"
     />
-
     <% if (process.env.REACT_APP_INCLUDE_GTAG === 'true') { %>
     <script
       async
@@ -99,6 +98,17 @@
 
     <!-- FIXME: remove this when we update CRA (fix SW caching) -->
     <style>
+      body {
+        margin: 0;
+        --ui-font: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+          Roboto, Helvetica, Arial, sans-serif;
+        font-family: var(--ui-font);
+        -webkit-text-size-adjust: 100%;
+        user-select: none;
+        width: 100vw;
+        height: 100vh;
+      }
+
       /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
       @font-face {
         font-family: "Virgil";

src/components/App.tsx

@@ -757,10 +757,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       });
     }
 
-    document.documentElement.classList.toggle(
-      "Appearance_dark",
-      this.state.appearance === "dark",
-    );
+    document
+      .querySelector(".excalidraw")
+      ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
 
     if (this.state.isCollaborating && !this.portal.socket) {
       this.initializeSocketClient({ showLoadingState: true });

src/components/Avatar.scss

@@ -1,14 +1,16 @@
 @import "../css/_variables";
 
-.Avatar {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 1.25rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: $oc-white;
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-weight: 500;
+.excalidraw {
+  .Avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 1.25rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $oc-white;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
 }

src/components/ColorPicker.scss

@@ -1,213 +1,241 @@
 @import "open-color/open-color.scss";
 
-.color-picker {
-  background: var(--popup-background-color);
-  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"] & {
-    left: -5.5px;
-  }
-  :root[dir="rtl"] & {
-    right: -5.5px;
+.excalidraw {
+  .color-picker {
+    background: var(--popup-background-color);
+    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"] & {
+      left: -5.5px;
+    }
+
+    :root[dir="rtl"] & {
+      right: -5.5px;
+    }
   }
-}
 
-.color-picker-control-container {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-}
+  .color-picker-control-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+  }
 
-.color-picker-triangle {
-  width: 0px;
-  height: 0px;
-  border-style: solid;
-  border-width: 0px 9px 10px;
-  border-color: transparent transparent var(--popup-background-color);
-  position: absolute;
-  top: -10px;
-  :root[dir="ltr"] & {
-    left: 12px;
+  .color-picker-triangle {
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 0px 9px 10px;
+    border-color: transparent transparent var(--popup-background-color);
+    position: absolute;
+    top: -10px;
+
+    :root[dir="ltr"] & {
+      left: 12px;
+    }
+
+    :root[dir="rtl"] & {
+      right: 12px;
+    }
   }
-  :root[dir="rtl"] & {
-    right: 12px;
+
+  .color-picker-triangle-shadow {
+    border-color: transparent transparent transparentize($oc-black, 0.9);
+    top: -11px;
   }
-}
 
-.color-picker-triangle-shadow {
-  border-color: transparent transparent transparentize($oc-black, 0.9);
-  top: -11px;
-}
+  .color-picker-content {
+    padding: 0.5rem;
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    grid-gap: 0.5rem;
+  }
 
-.color-picker-content {
-  padding: 0.5rem;
-  display: grid;
-  grid-template-columns: repeat(5, auto);
-  grid-gap: 0.5rem;
-}
+  .color-picker-content .color-input-container {
+    grid-column: 1 / span 5;
+  }
 
-.color-picker-content .color-input-container {
-  grid-column: 1 / span 5;
-}
+  .color-picker-swatch {
+    position: relative;
+    height: 1.875rem;
+    width: 1.875rem;
+    cursor: pointer;
+    border-radius: 4px;
+    margin: 0;
+    box-sizing: border-box;
+    border: 1px solid #ddd;
+    background-color: currentColor !important;
+    filter: var(--appearance-filter);
 
-.color-picker-swatch {
-  position: relative;
-  height: 1.875rem;
-  width: 1.875rem;
-  cursor: pointer;
-  border-radius: 4px;
-  margin: 0;
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  background-color: currentColor !important;
-  filter: var(--appearance-filter);
-}
+    &:focus {
+      /* 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: var(--select-highlight-color);
+    }
+  }
 
-.color-picker-swatch:focus {
-  /* 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: var(--select-highlight-color);
-}
+  .color-picker-transparent {
+    border-radius: 4px;
+    box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+  }
 
-.color-picker-transparent {
-  border-radius: 4px;
-  box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-.color-picker-transparent,
-.color-picker-label-swatch {
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
-    left center;
-}
+  .color-picker-transparent,
+  .color-picker-label-swatch {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
+      left center;
+  }
 
-.color-picker-hash {
-  background: var(--input-border-color);
-  height: 1.875rem;
-  width: 1.875rem;
-  :root[dir="ltr"] & {
-    border-radius: 4px 0px 0px 4px;
-  }
-  :root[dir="rtl"] & {
-    border-radius: 0px 4px 4px 0px;
-  }
-  color: var(--input-label-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-.color-input-container:focus-within .color-picker-hash {
-  box-shadow: 0 0 0 2px var(--focus-highlight-color);
-}
-.color-input-container:focus-within .color-picker-hash::before,
-.color-input-container:focus-within .color-picker-hash::after {
-  content: "";
-  width: 1px;
-  height: 100%;
-  position: absolute;
-  top: 0;
-}
-.color-input-container:focus-within .color-picker-hash::before {
-  background: var(--input-border-color);
-  :root[dir="ltr"] & {
-    right: -1px;
+  .color-picker-hash {
+    background: var(--input-border-color);
+    height: 1.875rem;
+    width: 1.875rem;
+
+    :root[dir="ltr"] & {
+      border-radius: 4px 0px 0px 4px;
+    }
+
+    :root[dir="rtl"] & {
+      border-radius: 0px 4px 4px 0px;
+    }
+
+    color: var(--input-label-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
   }
-  :root[dir="rtl"] & {
-    left: -1px;
+
+  .color-input-container:focus-within .color-picker-hash {
+    box-shadow: 0 0 0 2px var(--focus-highlight-color);
   }
-}
-.color-input-container:focus-within .color-picker-hash::after {
-  background: var(--input-background-color);
-  :root[dir="ltr"] & {
-    right: -2px;
+
+  .color-input-container:focus-within .color-picker-hash::before,
+  .color-input-container:focus-within .color-picker-hash::after {
+    content: "";
+    width: 1px;
+    height: 100%;
+    position: absolute;
+    top: 0;
   }
-  :root[dir="rtl"] & {
-    left: -2px;
+
+  .color-input-container:focus-within .color-picker-hash::before {
+    background: var(--input-border-color);
+
+    :root[dir="ltr"] & {
+      right: -1px;
+    }
+
+    :root[dir="rtl"] & {
+      left: -1px;
+    }
   }
-}
 
-.color-input-container {
-  display: flex;
-}
+  .color-input-container:focus-within .color-picker-hash::after {
+    background: var(--input-background-color);
 
-.color-picker-input {
-  width: 12ch; /* length of `transparent` + 1 */
-  margin: 0;
-  font-size: 1rem;
-  background-color: var(--input-background-color);
-  color: var(--text-color-primary);
-  border: 0px;
-  outline: none;
-  height: 1.75em;
-  box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;
-  :root[dir="ltr"] & {
-    border-radius: 0px 4px 4px 0px;
-  }
-  :root[dir="rtl"] & {
-    border-radius: 4px 0px 0px 4px;
-  }
-  float: left;
-  padding: 1px;
-  padding-inline-start: 0.5em;
-  appearance: none;
-}
+    :root[dir="ltr"] & {
+      right: -2px;
+    }
 
-.color-picker-label-swatch {
-  height: 1.875rem;
-  width: 1.875rem;
-  margin-inline-end: 0.25rem;
-  border: 1px solid $oc-gray-3;
-  position: relative;
-  overflow: hidden;
-  background-color: transparent !important;
-  filter: var(--appearance-filter);
-}
+    :root[dir="rtl"] & {
+      left: -2px;
+    }
+  }
 
-.color-picker-label-swatch::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--swatch-color);
-}
+  .color-input-container {
+    display: flex;
+  }
+
+  .color-picker-input {
+    width: 12ch; /* length of `transparent` + 1 */
+    margin: 0;
+    font-size: 1rem;
+    background-color: var(--input-background-color);
+    color: var(--text-color-primary);
+    border: 0px;
+    outline: none;
+    height: 1.75em;
+    box-shadow: var(--input-border-color) 0px 0px 0px 1px inset;
+
+    :root[dir="ltr"] & {
+      border-radius: 0px 4px 4px 0px;
+    }
+
+    :root[dir="rtl"] & {
+      border-radius: 4px 0px 0px 4px;
+    }
+
+    float: left;
+    padding: 1px;
+    padding-inline-start: 0.5em;
+    appearance: none;
+  }
 
-.color-picker-keybinding {
-  position: absolute;
-  bottom: 2px;
-  :root[dir="ltr"] & {
-    right: 2px;
+  .color-picker-label-swatch {
+    height: 1.875rem;
+    width: 1.875rem;
+    margin-inline-end: 0.25rem;
+    border: 1px solid $oc-gray-3;
+    position: relative;
+    overflow: hidden;
+    background-color: transparent !important;
+    filter: var(--appearance-filter);
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--swatch-color);
+    }
   }
-  :root[dir="rtl"] & {
-    left: 2px;
+
+  .color-picker-keybinding {
+    position: absolute;
+    bottom: 2px;
+
+    :root[dir="ltr"] & {
+      right: 2px;
+    }
+
+    :root[dir="rtl"] & {
+      left: 2px;
+    }
+
+    font-size: 0.7em;
   }
-  font-size: 0.7em;
-}
 
-.color-picker-type-canvasBackground .color-picker-keybinding {
-  color: #aaa;
-}
+  .color-picker-type-canvasBackground .color-picker-keybinding {
+    color: #aaa;
+  }
 
-.color-picker-type-elementBackground .color-picker-keybinding {
-  color: #fff;
-  .Appearance_dark & {
-    color: #000;
+  .color-picker-type-elementBackground .color-picker-keybinding {
+    color: #fff;
   }
-}
-.color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
-  color: #aaa;
-  .Appearance_dark & {
-    color: #000;
+
+  .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
+    color: #aaa;
   }
-}
 
-.color-picker-type-elementStroke .color-picker-keybinding {
-  color: #d4d4d4;
+  .color-picker-type-elementStroke .color-picker-keybinding {
+    color: #d4d4d4;
+  }
+
+  &.Appearance_dark {
+    .color-picker-type-elementBackground .color-picker-keybinding {
+      color: #000;
+    }
+    .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
+      color: #000;
+    }
+  }
 }

src/components/ContextMenu.scss

@@ -1,40 +1,42 @@
 @import "open-color/open-color.scss";
 
-.context-menu {
-  position: relative;
-  border-radius: 4px;
-  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: var(--popup-secondary-background-color);
-  border: 1px solid var(--button-gray-3);
-}
+.excalidraw {
+  .context-menu {
+    position: relative;
+    border-radius: 4px;
+    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: var(--popup-secondary-background-color);
+    border: 1px solid var(--button-gray-3);
+  }
 
-.context-menu button {
-  color: var(--popup-text-color);
-}
+  .context-menu button {
+    color: var(--popup-text-color);
+  }
 
-.context-menu-option {
-  position: relative;
-  width: 100%;
-  min-width: 9.5rem;
-  margin: 0;
-  padding: 0.25rem 1rem 0.25rem 1.25rem;
-  text-align: start;
-  border-radius: 0;
-  background-color: transparent;
-  border: none;
-  white-space: nowrap;
-}
+  .context-menu-option {
+    position: relative;
+    width: 100%;
+    min-width: 9.5rem;
+    margin: 0;
+    padding: 0.25rem 1rem 0.25rem 1.25rem;
+    text-align: start;
+    border-radius: 0;
+    background-color: transparent;
+    border: none;
+    white-space: nowrap;
+  }
 
-.context-menu-option:hover {
-  color: var(--popup-background-color);
-  background-color: var(--select-highlight-color);
-}
+  .context-menu-option:hover {
+    color: var(--popup-background-color);
+    background-color: var(--select-highlight-color);
+  }
 
-.context-menu-option:focus {
-  z-index: 1;
+  .context-menu-option:focus {
+    z-index: 1;
+  }
 }

src/components/ContextMenu.tsx

@@ -16,25 +16,35 @@ type Props = {
   left: number;
 };
 
-const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => (
-  <Popover
-    onCloseRequest={onCloseRequest}
-    top={top}
-    left={left}
-    fitInViewport={true}
-  >
-    <ul
-      className="context-menu"
-      onContextMenu={(event) => event.preventDefault()}
-    >
-      {options.map((option, idx) => (
-        <li key={idx} onClick={onCloseRequest}>
-          <ContextMenuOption {...option} />
-        </li>
-      ))}
-    </ul>
-  </Popover>
-);
+const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
+  const isDarkTheme = !!document
+    .querySelector(".excalidraw")
+    ?.classList.contains("Appearance_dark");
+  const wrapperClasses = `excalidraw ${
+    isDarkTheme ? "Appearance_dark Appearance_dark-background-none" : ""
+  }`;
+  return (
+    <div className={wrapperClasses}>
+      <Popover
+        onCloseRequest={onCloseRequest}
+        top={top}
+        left={left}
+        fitInViewport={true}
+      >
+        <ul
+          className="context-menu"
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          {options.map((option, idx) => (
+            <li key={idx} onClick={onCloseRequest}>
+              <ContextMenuOption {...option} />
+            </li>
+          ))}
+        </ul>
+      </Popover>
+    </div>
+  );
+};
 
 const ContextMenuOption = ({ label, action }: ContextMenuOption) => (
   <button className="context-menu-option" onClick={action}>

src/components/Dialog.scss

@@ -1,61 +1,66 @@
 @import "../css/_variables";
 
-.Dialog__title {
-  display: grid;
-  align-items: center;
-  margin-top: 0;
-  grid-template-columns: 1fr calc(var(--space-factor) * 7);
-  grid-gap: var(--metric);
-}
-
-.Dialog__titleContent {
-  flex: 1;
-}
-
-.Dialog .Modal__close {
-  color: var(--icon-fill-color);
-  margin: 0;
-}
-
-@media #{$media-query} {
-  .Dialog {
-    --metric: calc(var(--space-factor) * 4);
-    --inset-left: #{"max(var(--metric), var(--sal))"};
-    --inset-right: #{"max(var(--metric), var(--sar))"};
-  }
+.excalidraw {
   .Dialog__title {
-    grid-template-columns: calc(var(--space-factor) * 7) 1fr calc(
-        var(--space-factor) * 7
-      );
-    position: sticky;
-    top: calc(-1 * var(--metric));
-    margin: calc(-1 * var(--inset-right));
-    margin-top: calc(-1 * var(--metric));
-    margin-bottom: var(--metric);
-    padding: calc(var(--space-factor) * 2);
-    padding-left: var(--inset-left);
-    padding-right: var(--inset-right);
-    background: var(--bg-color-island);
-    font-size: 1.25em;
-
-    box-sizing: border-box;
-    border-bottom: 1px solid var(--button-gray-2);
-    z-index: 1;
+    display: grid;
+    align-items: center;
+    margin-top: 0;
+    grid-template-columns: 1fr calc(var(--space-factor) * 7);
+    grid-gap: var(--metric);
   }
+
   .Dialog__titleContent {
-    text-align: center;
-  }
-  .Dialog .Island {
-    width: 100vw;
-    height: 100%;
-    box-sizing: border-box;
-    overflow-y: auto;
-    padding-left: #{"max(calc(var(--padding) * var(--space-factor)), var(--sal))"};
-    padding-right: #{"max(calc(var(--padding) * var(--space-factor)), var(--sar))"};
-    padding-bottom: #{"max(calc(var(--padding) * var(--space-factor)), var(--sab))"};
+    flex: 1;
   }
 
   .Dialog .Modal__close {
-    order: -1;
+    color: var(--icon-fill-color);
+    margin: 0;
+  }
+
+  @media #{$media-query} {
+    .Dialog {
+      --metric: calc(var(--space-factor) * 4);
+      --inset-left: #{"max(var(--metric), var(--sal))"};
+      --inset-right: #{"max(var(--metric), var(--sar))"};
+    }
+
+    .Dialog__title {
+      grid-template-columns: calc(var(--space-factor) * 7) 1fr calc(
+          var(--space-factor) * 7
+        );
+      position: sticky;
+      top: calc(-1 * var(--metric));
+      margin: calc(-1 * var(--inset-right));
+      margin-top: calc(-1 * var(--metric));
+      margin-bottom: var(--metric);
+      padding: calc(var(--space-factor) * 2);
+      padding-left: var(--inset-left);
+      padding-right: var(--inset-right);
+      background: var(--bg-color-island);
+      font-size: 1.25em;
+
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--button-gray-2);
+      z-index: 1;
+    }
+
+    .Dialog__titleContent {
+      text-align: center;
+    }
+
+    .Dialog .Island {
+      width: 100vw;
+      height: 100%;
+      box-sizing: border-box;
+      overflow-y: auto;
+      padding-left: #{"max(calc(var(--padding) * var(--space-factor)), var(--sal))"};
+      padding-right: #{"max(calc(var(--padding) * var(--space-factor)), var(--sar))"};
+      padding-bottom: #{"max(calc(var(--padding) * var(--space-factor)), var(--sab))"};
+    }
+
+    .Dialog .Modal__close {
+      order: -1;
+    }
   }
 }

src/components/ExportDialog.scss

@@ -1,65 +1,71 @@
 @import "../css/_variables";
 
-.ExportDialog__preview {
-  --preview-padding: calc(var(--space-factor) * 4);
+.excalidraw {
+  .ExportDialog__preview {
+    --preview-padding: calc(var(--space-factor) * 4);
 
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
-    left center;
-  text-align: center;
-  padding: var(--preview-padding);
-  margin-bottom: calc(var(--space-factor) * 3);
-}
-
-.ExportDialog__preview canvas {
-  max-width: calc(100% - var(--preview-padding) * 2);
-  max-height: 25rem;
-}
-
-.Appearance_dark .ExportDialog__preview canvas {
-  filter: none;
-}
-
-.ExportDialog__actions {
-  width: 100%;
-  display: flex;
-  grid-gap: calc(var(--space-factor) * 2);
-  align-items: top;
-  justify-content: space-between;
-}
-
-.ExportDialog__name {
-  grid-column: project-name;
-  margin: auto;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
+      left center;
+    text-align: center;
+    padding: var(--preview-padding);
+    margin-bottom: calc(var(--space-factor) * 3);
+  }
 
-  .TextInput {
-    height: calc(1rem - 3px);
+  .ExportDialog__preview canvas {
+    max-width: calc(100% - var(--preview-padding) * 2);
+    max-height: 25rem;
   }
-}
 
-@media (max-width: 550px) {
-  .ExportDialog {
-    display: flex;
-    flex-direction: column;
+  &.Appearance_dark .ExportDialog__preview canvas {
+    filter: none;
   }
+
   .ExportDialog__actions {
-    flex-direction: column;
-    align-items: center;
-  }
-  .ExportDialog__actions > * {
-    margin-bottom: calc(var(--space-factor) * 3);
+    width: 100%;
+    display: flex;
+    grid-gap: calc(var(--space-factor) * 2);
+    align-items: top;
+    justify-content: space-between;
   }
-}
 
-@media #{$media-query} {
-  .ExportDialog__preview canvas {
-    max-height: 30vh;
+  .ExportDialog__name {
+    grid-column: project-name;
+    margin: auto;
+
+    .TextInput {
+      height: calc(1rem - 3px);
+    }
   }
-  .ExportDialog__dialog,
-  .ExportDialog__dialog .Island {
-    height: 100%;
-    box-sizing: border-box;
+
+  @media (max-width: 550px) {
+    .ExportDialog {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ExportDialog__actions {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .ExportDialog__actions > * {
+      margin-bottom: calc(var(--space-factor) * 3);
+    }
   }
-  .ExportDialog__dialog .Island {
-    overflow-y: auto;
+
+  @media #{$media-query} {
+    .ExportDialog__preview canvas {
+      max-height: 30vh;
+    }
+
+    .ExportDialog__dialog,
+    .ExportDialog__dialog .Island {
+      height: 100%;
+      box-sizing: border-box;
+    }
+
+    .ExportDialog__dialog .Island {
+      overflow-y: auto;
+    }
   }
 }

src/components/FixedSideContainer.css

@@ -1,36 +0,0 @@
-.FixedSideContainer {
-  --margin: 0.25rem;
-  position: absolute;
-  pointer-events: none;
-}
-
-.FixedSideContainer > * {
-  pointer-events: all;
-}
-
-.FixedSideContainer_side_top {
-  left: var(--margin);
-  top: var(--margin);
-  right: var(--margin);
-  z-index: 2;
-}
-
-.FixedSideContainer_side_top.zen-mode {
-  right: 42px;
-}
-
-/* TODO: if these are used, make sure to implement RTL support
-.FixedSideContainer_side_left {
-  left: var(--margin);
-  top: var(--margin);
-  bottom: var(--margin);
-  z-index: 1;
-}
-
-.FixedSideContainer_side_right {
-  right: var(--margin);
-  top: var(--margin);
-  bottom: var(--margin);
-  z-index: 3;
-}
-*/

src/components/FixedSideContainer.scss

@@ -0,0 +1,38 @@
+.excalidraw {
+  .FixedSideContainer {
+    --margin: 0.25rem;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .FixedSideContainer > * {
+    pointer-events: all;
+  }
+
+  .FixedSideContainer_side_top {
+    left: var(--margin);
+    top: var(--margin);
+    right: var(--margin);
+    z-index: 2;
+  }
+
+  .FixedSideContainer_side_top.zen-mode {
+    right: 42px;
+  }
+}
+
+/* TODO: if these are used, make sure to implement RTL support
+.FixedSideContainer_side_left {
+  left: var(--margin);
+  top: var(--margin);
+  bottom: var(--margin);
+  z-index: 1;
+}
+
+.FixedSideContainer_side_right {
+  right: var(--margin);
+  top: var(--margin);
+  bottom: var(--margin);
+  z-index: 3;
+}
+*/

src/components/FixedSideContainer.tsx

@@ -1,4 +1,4 @@
-import "./FixedSideContainer.css";
+import "./FixedSideContainer.scss";
 
 import React from "react";
 

src/components/HintViewer.scss

@@ -1,31 +1,33 @@
 @import "../css/_variables";
 
-.HintViewer {
-  pointer-events: none;
-  box-sizing: border-box;
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  left: 0;
-  top: 100%;
-  max-width: 100%;
-  width: 100%;
-  margin-top: 6px;
-  text-align: center;
-  color: $oc-gray-6;
-  font-size: 0.8rem;
+.excalidraw {
+  .HintViewer {
+    pointer-events: none;
+    box-sizing: border-box;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    left: 0;
+    top: 100%;
+    max-width: 100%;
+    width: 100%;
+    margin-top: 6px;
+    text-align: center;
+    color: $oc-gray-6;
+    font-size: 0.8rem;
 
-  @media (min-width: 1200px) {
-    white-space: pre;
-  }
+    @media (min-width: 1200px) {
+      white-space: pre;
+    }
 
-  @media #{$media-query} {
-    position: static;
-  }
+    @media #{$media-query} {
+      position: static;
+    }
 
-  > span {
-    padding: 0.2rem 0.4rem;
-    background-color: var(--overlay-background-color);
-    border-radius: 4px;
+    > span {
+      padding: 0.2rem 0.4rem;
+      background-color: var(--overlay-background-color);
+      border-radius: 4px;
+    }
   }
 }

src/components/Island.scss

@@ -1,14 +1,16 @@
-.Island {
-  --padding: 0;
-  background-color: var(--bg-color-island);
-  backdrop-filter: saturate(100%) blur(10px);
-  box-shadow: var(--shadow-island);
-  border-radius: var(--border-radius-m);
-  padding: calc(var(--padding) * var(--space-factor));
-  position: relative;
-  transition: box-shadow 0.5s ease-in-out;
+.excalidraw {
+  .Island {
+    --padding: 0;
+    background-color: var(--bg-color-island);
+    backdrop-filter: saturate(100%) blur(10px);
+    box-shadow: var(--shadow-island);
+    border-radius: var(--border-radius-m);
+    padding: calc(var(--padding) * var(--space-factor));
+    position: relative;
+    transition: box-shadow 0.5s ease-in-out;
 
-  &.zen-mode {
-    box-shadow: none;
+    &.zen-mode {
+      box-shadow: none;
+    }
   }
 }

src/components/LayerUI.scss

@@ -1,151 +1,170 @@
 @import "open-color/open-color";
 
-.layer-ui__library {
-  margin: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.layer-ui__library-message {
-  padding: 10px 20px;
-  max-width: 200px;
-}
-
-.layer-ui__library-items {
-  max-height: 50vh;
-  overflow: auto;
-}
-
-.layer-ui__wrapper {
-  .encrypted-icon {
-    position: relative;
-    margin-inline-start: 15px;
+.excalidraw {
+  .layer-ui__library {
+    margin: auto;
     display: flex;
-    justify-content: center;
     align-items: center;
-    border-radius: var(--space-factor);
-    color: $oc-green-9;
+    justify-content: center;
+  }
 
-    svg {
-      width: 1.2rem;
-      height: 1.2rem;
-    }
+  .layer-ui__library-message {
+    padding: 10px 20px;
+    max-width: 200px;
+  }
 
-    &.tooltip .tooltip-text {
-      visibility: hidden;
-      width: 20rem;
-      bottom: calc(50% + 0.8rem + 6px);
-      :root[dir="ltr"] & {
-        left: -5px;
-      }
-      :root[dir="rtl"] & {
-        right: -5px;
+  .layer-ui__library-items {
+    max-height: 50vh;
+    overflow: auto;
+  }
+
+  .layer-ui__wrapper {
+    .encrypted-icon {
+      position: relative;
+      margin-inline-start: 15px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: var(--space-factor);
+      color: $oc-green-9;
+
+      svg {
+        width: 1.2rem;
+        height: 1.2rem;
       }
-      background-color: $oc-black;
-      color: $oc-white;
-      text-align: center;
-      border-radius: 6px;
-      padding: 5px;
-      position: absolute;
-      z-index: 10;
-      font-size: 13px;
-      line-height: 1.5;
-      white-space: pre-wrap;
-
-      &::after {
-        --size: 6px;
-        content: "";
-        border: var(--size) solid transparent;
-        border-top-color: $oc-black;
-        position: absolute;
-        bottom: calc(-2 * var(--size));
+
+      &.tooltip .tooltip-text {
+        visibility: hidden;
+        width: 20rem;
+        bottom: calc(50% + 0.8rem + 6px);
+
         :root[dir="ltr"] & {
-          left: calc(5px + var(--size) / 2);
+          left: -5px;
         }
+
         :root[dir="rtl"] & {
-          right: calc(5px + var(--size) / 2);
+          right: -5px;
+        }
+
+        background-color: $oc-black;
+        color: $oc-white;
+        text-align: center;
+        border-radius: 6px;
+        padding: 5px;
+        position: absolute;
+        z-index: 10;
+        font-size: 13px;
+        line-height: 1.5;
+        white-space: pre-wrap;
+
+        &::after {
+          --size: 6px;
+          content: "";
+          border: var(--size) solid transparent;
+          border-top-color: $oc-black;
+          position: absolute;
+          bottom: calc(-2 * var(--size));
+
+          :root[dir="ltr"] & {
+            left: calc(5px + var(--size) / 2);
+          }
+
+          :root[dir="rtl"] & {
+            right: calc(5px + var(--size) / 2);
+          }
         }
       }
-    }
 
-    // the following 3 rules ensure that the tooltip doesn't show (nor affect
-    // the cursor) when you drag over when you draw on canvas, but at the same
-    // time it still works when clicking on the link/shield
+      // the following 3 rules ensure that the tooltip doesn't show (nor affect
+      // the cursor) when you drag over when you draw on canvas, but at the same
+      // time it still works when clicking on the link/shield
 
-    body:active &.tooltip:not(:hover) {
-      pointer-events: none;
-    }
-    body:not(:active) &.tooltip:hover .tooltip-text {
-      visibility: visible;
-    }
-    .tooltip-text:hover {
-      visibility: visible;
-    }
-  }
+      body:active &.tooltip:not(:hover) {
+        pointer-events: none;
+      }
 
-  &__github-corner {
-    top: 0;
-    :root[dir="ltr"] & {
-      right: 0;
-    }
-    :root[dir="rtl"] & {
-      left: 0;
-    }
-    position: absolute;
-    width: 40px;
-  }
+      body:not(:active) &.tooltip:hover .tooltip-text {
+        visibility: visible;
+      }
 
-  &__footer {
-    position: absolute;
-    z-index: 100;
-    bottom: 0px;
-    :root[dir="ltr"] & {
-      right: 0;
-    }
-    :root[dir="rtl"] & {
-      left: 0;
+      .tooltip-text:hover {
+        visibility: visible;
+      }
     }
-    width: 190px;
-  }
 
-  .zen-mode-transition {
-    transition: transform 0.5s ease-in-out;
-    :root[dir="ltr"] &.transition-left {
-      transform: translate(-999px, 0);
-    }
-    :root[dir="ltr"] &.transition-right {
-      transform: translate(999px, 0px);
-    }
-    :root[dir="rtl"] &.transition-left {
-      transform: translate(999px, 0);
+    &__github-corner {
+      top: 0;
+
+      :root[dir="ltr"] & {
+        right: 0;
+      }
+
+      :root[dir="rtl"] & {
+        left: 0;
+      }
+
+      position: absolute;
+      width: 40px;
     }
-    :root[dir="rtl"] &.transition-right {
-      transform: translate(-999px, 0);
+
+    &__footer {
+      position: absolute;
+      z-index: 100;
+      bottom: 0px;
+
+      :root[dir="ltr"] & {
+        right: 0;
+      }
+
+      :root[dir="rtl"] & {
+        left: 0;
+      }
+
+      width: 190px;
     }
 
-    &.App-menu_bottom--transition-left {
-      transform: translate(-92px, 0);
+    .zen-mode-transition {
+      transition: transform 0.5s ease-in-out;
+
+      :root[dir="ltr"] &.transition-left {
+        transform: translate(-999px, 0);
+      }
+
+      :root[dir="ltr"] &.transition-right {
+        transform: translate(999px, 0px);
+      }
+
+      :root[dir="rtl"] &.transition-left {
+        transform: translate(999px, 0);
+      }
+
+      :root[dir="rtl"] &.transition-right {
+        transform: translate(-999px, 0);
+      }
+
+      &.App-menu_bottom--transition-left {
+        transform: translate(-92px, 0);
+      }
     }
-  }
 
-  .disable-zen-mode {
-    height: 30px;
-    position: absolute;
-    bottom: 10px;
-    right: 15px;
-    font-size: 10px;
-    padding: 10px;
-    font-weight: 500;
-    opacity: 0;
-    visibility: hidden;
-    transition: visibility 0s linear 0s, opacity 0.5s;
-
-    &--visible {
-      opacity: 1;
-      visibility: visible;
-      transition: visibility 0s linear 300ms, opacity 0.5s;
-      transition-delay: 0.8s;
+    .disable-zen-mode {
+      height: 30px;
+      position: absolute;
+      bottom: 10px;
+      right: 15px;
+      font-size: 10px;
+      padding: 10px;
+      font-weight: 500;
+      opacity: 0;
+      visibility: hidden;
+      transition: visibility 0s linear 0s, opacity 0.5s;
+
+      &--visible {
+        opacity: 1;
+        visibility: visible;
+        transition: visibility 0s linear 300ms, opacity 0.5s;
+        transition-delay: 0.8s;
+      }
     }
   }
 }

src/components/LibraryUnit.scss

@@ -1,77 +1,79 @@
-.library-unit {
-  align-items: center;
-  border: 1px solid var(--button-gray-2);
-  display: flex;
-  justify-content: center;
-  position: relative;
-  width: 63px;
-  height: 63px; // match width
-}
-
-.library-unit__dragger {
-  display: flex;
-  height: 100%;
-  width: 100%;
-}
-
-.library-unit__dragger > svg {
-  filter: var(--appearance-filter);
-  flex-grow: 1;
-  max-height: 100%;
-  max-width: 100%;
-}
+.excalidraw {
+  .library-unit {
+    align-items: center;
+    border: 1px solid var(--button-gray-2);
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 63px;
+    height: 63px; // match width
+  }
 
-.library-unit__removeFromLibrary,
-.library-unit__removeFromLibrary:hover,
-.library-unit__removeFromLibrary:active {
-  align-items: center;
-  background: none;
-  border: none;
-  color: var(--icon-fill-color);
-  display: flex;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  right: 5px;
-  top: 5px;
-}
+  .library-unit__dragger {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
 
-.library-unit__removeFromLibrary > svg {
-  height: 16px;
-  width: 16px;
-}
+  .library-unit__dragger > svg {
+    filter: var(--appearance-filter);
+    flex-grow: 1;
+    max-height: 100%;
+    max-width: 100%;
+  }
 
-.library-unit__pulse {
-  transform: scale(1);
-  animation: library-unit__pulse-animation 1s ease-in infinite;
-}
+  .library-unit__removeFromLibrary,
+  .library-unit__removeFromLibrary:hover,
+  .library-unit__removeFromLibrary:active {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--icon-fill-color);
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+  }
 
-.library-unit__adder {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 20px;
-  height: 20px;
-  margin-left: -10px;
-  margin-top: -10px;
-  pointer-events: none;
-}
+  .library-unit__removeFromLibrary > svg {
+    height: 16px;
+    width: 16px;
+  }
 
-.library-unit__active {
-  cursor: pointer;
-}
+  .library-unit__pulse {
+    transform: scale(1);
+    animation: library-unit__pulse-animation 1s ease-in infinite;
+  }
 
-@keyframes library-unit__pulse-animation {
-  0% {
-    transform: scale(0.95);
+  .library-unit__adder {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    pointer-events: none;
   }
 
-  50% {
-    transform: scale(1);
+  .library-unit__active {
+    cursor: pointer;
   }
 
-  100% {
-    transform: scale(0.95);
+  @keyframes library-unit__pulse-animation {
+    0% {
+      transform: scale(0.95);
+    }
+
+    50% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0.95);
+    }
   }
 }

src/components/Modal.scss

@@ -1,84 +1,90 @@
 @import "../css/_variables";
 
-.Modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: auto;
-  padding: calc(var(--space-factor) * 10);
-}
+.excalidraw {
+  .Modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    padding: calc(var(--space-factor) * 10);
+  }
 
-.Modal__background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-  background-color: transparentize($oc-black, 0.7);
-  backdrop-filter: blur(2px);
-}
+  .Modal__background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: transparentize($oc-black, 0.7);
+    backdrop-filter: blur(2px);
+  }
 
-.Modal__content {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  max-width: var(--max-width);
+  .Modal__content {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    max-width: var(--max-width);
 
-  opacity: 0;
-  transform: translateY(10px);
-  animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
-  position: relative;
+    opacity: 0;
+    transform: translateY(10px);
+    animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
+    position: relative;
 
-  // for modals, reset blurry bg
-  background: var(--bg-color-island);
-  backdrop-filter: none;
+    // for modals, reset blurry bg
+    background: var(--bg-color-island);
+    backdrop-filter: none;
 
-  @media #{$media-query} {
-    max-width: 100%;
+    @media #{$media-query} {
+      max-width: 100%;
+    }
   }
-}
 
-@keyframes Modal__content_fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
+  @keyframes Modal__content_fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.Modal__close {
-  width: calc(var(--space-factor) * 7);
-  height: calc(var(--space-factor) * 7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  svg {
-    height: calc(var(--space-factor) * 5);
+
+  .Modal__close {
+    width: calc(var(--space-factor) * 7);
+    height: calc(var(--space-factor) * 7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      height: calc(var(--space-factor) * 5);
+    }
   }
-}
-.Modal__close--floating {
-  position: absolute;
-  right: calc(var(--space-factor) * 5);
-  top: calc(var(--space-factor) * 5);
-}
 
-@media #{$media-query} {
-  .Modal {
-    padding: 0;
+  .Modal__close--floating {
+    position: absolute;
+    right: calc(var(--space-factor) * 5);
+    top: calc(var(--space-factor) * 5);
   }
-  .Modal__content {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+
+  @media #{$media-query} {
+    .Modal {
+      padding: 0;
+    }
+
+    .Modal__content {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 }

src/components/Modal.tsx

@@ -47,7 +47,17 @@ export const Modal = (props: {
 
 const useBodyRoot = () => {
   const createDiv = () => {
+    const isDarkTheme = !!document
+      .querySelector(".excalidraw")
+      ?.classList.contains("Appearance_dark");
     const div = document.createElement("div");
+
+    div.classList.add("excalidraw");
+
+    if (isDarkTheme) {
+      div.classList.add("Appearance_dark");
+      div.classList.add("Appearance_dark-background-none");
+    }
     document.body.appendChild(div);
     return div;
   };

src/components/Popover.css

@@ -1,12 +0,0 @@
-.popover {
-  position: absolute;
-  z-index: 10;
-}
-
-.popover .cover {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}

src/components/Popover.scss

@@ -0,0 +1,14 @@
+.excalidraw {
+  .popover {
+    position: absolute;
+    z-index: 10;
+  }
+
+  .popover .cover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

src/components/Popover.tsx

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useEffect } from "react";
-import "./Popover.css";
+import "./Popover.scss";
 import { unstable_batchedUpdates } from "react-dom";
 
 type Props = {

src/components/RoomDialog.scss

@@ -1,82 +1,84 @@
 @import "../css/_variables";
 
-.RoomDialog-modalButton.is-collaborating {
-  background-color: var(--button-special-active-background-color);
+.excalidraw {
+  .RoomDialog-modalButton.is-collaborating {
+    background-color: var(--button-special-active-background-color);
 
-  .ToolIcon__icon svg {
-    color: var(--icon-green-fill-color);
+    .ToolIcon__icon svg {
+      color: var(--icon-green-fill-color);
+    }
   }
-}
 
-.RoomDialog-modalButton-collaborators {
-  min-width: 1em;
-  position: absolute;
-  bottom: -5px;
-  right: -5px;
-  padding: 3px;
-  border-radius: 50%;
-  background-color: $oc-green-6;
-  color: $oc-white;
-  font-size: 0.7em;
-  font-family: var(--ui-font);
-}
+  .RoomDialog-modalButton-collaborators {
+    min-width: 1em;
+    position: absolute;
+    bottom: -5px;
+    right: -5px;
+    padding: 3px;
+    border-radius: 50%;
+    background-color: $oc-green-6;
+    color: $oc-white;
+    font-size: 0.7em;
+    font-family: var(--ui-font);
+  }
 
-.RoomDialog-linkContainer {
-  display: flex;
-  margin: 1.5em 0;
-}
+  .RoomDialog-linkContainer {
+    display: flex;
+    margin: 1.5em 0;
+  }
 
-.RoomDialog-link {
-  color: var(--text-color-primary);
-  min-width: 0;
-  flex: 1 1 auto;
-  margin-left: 1em;
-  display: inline-block;
-  cursor: pointer;
-  border: none;
-  height: 2.5rem;
-  line-height: 2.5rem;
-  padding: 0 0.5rem;
-  white-space: nowrap;
-  border-radius: var(--space-factor);
-  background-color: var(--button-gray-1);
-}
+  .RoomDialog-link {
+    color: var(--text-color-primary);
+    min-width: 0;
+    flex: 1 1 auto;
+    margin-left: 1em;
+    display: inline-block;
+    cursor: pointer;
+    border: none;
+    height: 2.5rem;
+    line-height: 2.5rem;
+    padding: 0 0.5rem;
+    white-space: nowrap;
+    border-radius: var(--space-factor);
+    background-color: var(--button-gray-1);
+  }
 
-.RoomDialog-emoji {
-  font-family: sans-serif;
-}
+  .RoomDialog-emoji {
+    font-family: sans-serif;
+  }
 
-.RoomDialog-usernameContainer {
-  display: flex;
-  margin: 1.5em 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .RoomDialog-usernameContainer {
+    display: flex;
+    margin: 1.5em 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.RoomDialog-username {
-  background-color: var(--input-background-color);
-  border-color: var(--input-border-color);
-  appearance: none;
-  min-width: 0;
-  flex: 1 1 auto;
-  margin-left: 1em;
-  height: 2.5rem;
-  font-size: 1em;
-  line-height: 1.5;
-  padding: 0 0.5rem;
-}
+  .RoomDialog-username {
+    background-color: var(--input-background-color);
+    border-color: var(--input-border-color);
+    appearance: none;
+    min-width: 0;
+    flex: 1 1 auto;
+    margin-left: 1em;
+    height: 2.5rem;
+    font-size: 1em;
+    line-height: 1.5;
+    padding: 0 0.5rem;
+  }
 
-.RoomDialog-sessionStartButtonContainer {
-  display: flex;
-  justify-content: center;
-}
+  .RoomDialog-sessionStartButtonContainer {
+    display: flex;
+    justify-content: center;
+  }
 
-.RoomDialog-stopSession {
-  background-color: var(--button-destructive-background-color);
+  .Modal .RoomDialog-stopSession {
+    background-color: var(--button-destructive-background-color);
 
-  .ToolIcon__label,
-  .ToolIcon__icon svg {
-    color: var(--button-destructive-color);
+    .ToolIcon__label,
+    .ToolIcon__icon svg {
+      color: var(--button-destructive-color);
+    }
   }
 }

src/components/ShortcutsDialog.scss

@@ -1,40 +1,42 @@
 @import "../css/_variables";
 
-.ShortcutsDialog-island {
-  border: 1px solid var(--button-gray-2);
-  margin-bottom: 16px;
-}
+.excalidraw {
+  .ShortcutsDialog-island {
+    border: 1px solid var(--button-gray-2);
+    margin-bottom: 16px;
+  }
 
-.ShortcutsDialog-island-title {
-  margin: 0;
-  padding: 4px;
-  background-color: var(--button-gray-1);
-  text-align: center;
-}
+  .ShortcutsDialog-island-title {
+    margin: 0;
+    padding: 4px;
+    background-color: var(--button-gray-1);
+    text-align: center;
+  }
 
-.ShorcutsDialog-shortcut {
-  border-top: 1px solid var(--button-gray-2);
-}
+  .ShorcutsDialog-shortcut {
+    border-top: 1px solid var(--button-gray-2);
+  }
 
-.ShorcutsDialog-key {
-  word-break: keep-all;
-  border: 1px solid var(--button-gray-2);
-  padding: 2px 8px;
-  margin: auto 4px;
-  background-color: var(--button-gray-1);
-  border-radius: 2px;
-  font-size: 0.8em;
-  min-height: 26px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-}
+  .ShorcutsDialog-key {
+    word-break: keep-all;
+    border: 1px solid var(--button-gray-2);
+    padding: 2px 8px;
+    margin: auto 4px;
+    background-color: var(--button-gray-1);
+    border-radius: 2px;
+    font-size: 0.8em;
+    min-height: 26px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
 
-.ShortcutsDialog-footer {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  border-top: 1px solid var(--button-gray-2);
-  margin-top: 8px;
-  padding-top: 16px;
+  .ShortcutsDialog-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    border-top: 1px solid var(--button-gray-2);
+    margin-top: 8px;
+    padding-top: 16px;
+  }
 }

src/components/Stack.css

@@ -1,17 +0,0 @@
-.Stack {
-  --gap: 0;
-  display: grid;
-  gap: calc(var(--space-factor) * var(--gap));
-}
-
-.Stack_vertical {
-  grid-template-columns: auto;
-  grid-auto-flow: row;
-  grid-auto-rows: min-content;
-}
-
-.Stack_horizontal {
-  grid-template-rows: auto;
-  grid-auto-flow: column;
-  grid-auto-columns: min-content;
-}

src/components/Stack.scss

@@ -0,0 +1,19 @@
+.excalidraw {
+  .Stack {
+    --gap: 0;
+    display: grid;
+    gap: calc(var(--space-factor) * var(--gap));
+  }
+
+  .Stack_vertical {
+    grid-template-columns: auto;
+    grid-auto-flow: row;
+    grid-auto-rows: min-content;
+  }
+
+  .Stack_horizontal {
+    grid-template-rows: auto;
+    grid-auto-flow: column;
+    grid-auto-columns: min-content;
+  }
+}

src/components/Stack.tsx

@@ -1,4 +1,4 @@
-import "./Stack.css";
+import "./Stack.scss";
 
 import React from "react";
 

src/components/TextInput.scss

@@ -1,21 +1,25 @@
 @import "../css/_variables.scss";
 
-.TextInput {
-  color: var(--text-color-primary);
-  display: inline-block;
-  border: 1.5px solid var(--button-gray-1);
-  line-height: 1;
-  padding: 0.75rem;
-  white-space: nowrap;
-  border-radius: var(--space-factor);
-  background-color: var(--input-background-color);
-  &:not(:focus) {
-    &:hover {
-      background-color: var(--input-hover-background-color);
+.excalidraw {
+  .TextInput {
+    color: var(--text-color-primary);
+    display: inline-block;
+    border: 1.5px solid var(--button-gray-1);
+    line-height: 1;
+    padding: 0.75rem;
+    white-space: nowrap;
+    border-radius: var(--space-factor);
+    background-color: var(--input-background-color);
+
+    &:not(:focus) {
+      &:hover {
+        background-color: var(--input-hover-background-color);
+      }
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
-  }
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--focus-highlight-color);
   }
 }

src/components/ToolIcon.scss

@@ -1,175 +1,193 @@
 @import "open-color/open-color.scss";
+.excalidraw {
+  .ToolIcon {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    font-family: Cascadia;
+    cursor: pointer;
+    background-color: var(--button-gray-1);
+    -webkit-tap-highlight-color: transparent;
+    border-radius: var(--space-factor);
+  }
 
-.ToolIcon {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  font-family: Cascadia;
-  cursor: pointer;
-  background-color: var(--button-gray-1);
-  -webkit-tap-highlight-color: transparent;
-  border-radius: var(--space-factor);
-}
+  .ToolIcon__icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: var(--icon-fill-color);
 
-.ToolIcon__icon {
-  width: 2.5rem;
-  height: 2.5rem;
-  color: var(--icon-fill-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
+    border-radius: var(--space-factor);
 
-  border-radius: var(--space-factor);
+    svg {
+      position: relative;
+      height: 1em;
+      fill: var(--icon-fill-color);
+      color: var(--icon-fill-color);
+    }
 
-  svg {
-    position: relative;
-    height: 1em;
-    fill: var(--icon-fill-color);
-    color: var(--icon-fill-color);
+    & + .ToolIcon__label {
+      margin-inline-start: 0;
+    }
   }
 
-  & + .ToolIcon__label {
-    margin-inline-start: 0;
+  .ToolIcon__label {
+    color: var(--icon-fill-color);
+    font-family: var(--ui-font);
+    margin: 0 0.8em;
+    text-overflow: ellipsis;
   }
-}
 
-.ToolIcon__label {
-  color: var(--icon-fill-color);
-  font-family: var(--ui-font);
-  margin: 0 0.8em;
-  text-overflow: ellipsis;
-}
+  .ToolIcon_size_s .ToolIcon__icon {
+    width: 1.4rem;
+    height: 1.4rem;
+    font-size: 0.8em;
+  }
 
-.ToolIcon_size_s .ToolIcon__icon {
-  width: 1.4rem;
-  height: 1.4rem;
-  font-size: 0.8em;
-}
+  .excalidraw .ToolIcon_type_button,
+  .Modal .ToolIcon_type_button,
+  .ToolIcon_type_button {
+    padding: 0;
+    border: none;
+    margin: 0;
+    font-size: inherit;
 
-.ToolIcon_type_button {
-  padding: 0;
-  border: none;
-  margin: 0;
-  font-size: inherit;
+    &:hover {
+      background-color: var(--button-gray-1);
+    }
 
-  &:hover {
-    background-color: var(--button-gray-1);
-  }
-  &:active {
-    background-color: var(--button-gray-2);
-  }
-  &:focus {
-    box-shadow: 0 0 0 2px var(--focus-highlight-color);
-  }
-  &.ToolIcon--selected {
-    background-color: var(--button-gray-2);
     &:active {
-      background-color: var(--button-gray-3);
+      background-color: var(--button-gray-2);
     }
-  }
 
-  &--show {
-    visibility: visible;
-  }
-  &--hide {
-    visibility: hidden;
-  }
-}
+    &:focus {
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
 
-.ToolIcon_type_radio,
-.ToolIcon_type_checkbox {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
+    &.ToolIcon--selected {
+      background-color: var(--button-gray-2);
 
-  &:not(.ToolIcon_toggle_opaque):checked + .ToolIcon__icon {
-    background-color: var(--button-gray-2);
-  }
-  &:focus + .ToolIcon__icon {
-    box-shadow: 0 0 0 2px var(--focus-highlight-color);
-  }
-  &:active + .ToolIcon__icon {
-    background-color: var(--button-gray-3);
-  }
-}
+      &:active {
+        background-color: var(--button-gray-3);
+      }
+    }
 
-.ToolIcon_type_floating {
-  background-color: transparent;
-  &:hover {
-    background-color: transparent;
-  }
-  &:active {
-    background-color: transparent;
-  }
-  &:focus {
-    box-shadow: none;
-  }
-  .ToolIcon__icon {
-    width: 2rem;
-    height: 2em;
-  }
-}
+    &--show {
+      visibility: visible;
+    }
 
-.ToolIcon.ToolIcon__lock {
-  &.ToolIcon_type_floating {
-    margin-left: 0.1rem;
+    &--hide {
+      visibility: hidden;
+    }
   }
-}
 
-.ToolIcon__keybinding {
-  position: absolute;
-  bottom: 2px;
-  right: 3px;
-  font-size: 0.5em;
-  color: var(--keybinding-color);
-  font-family: var(--ui-font);
-  user-select: none;
-}
+  .ToolIcon_type_radio,
+  .ToolIcon_type_checkbox {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
 
-@media (max-width: 425px) {
-  .Shape .ToolIcon__icon {
-    width: 2rem;
-    height: 2rem;
+    &:not(.ToolIcon_toggle_opaque):checked + .ToolIcon__icon {
+      background-color: var(--button-gray-2);
+    }
 
-    svg {
-      height: 0.8em;
+    &:focus + .ToolIcon__icon {
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
     }
-  }
-}
 
-@media (max-width: 360px) {
-  .ToolIcon.ToolIcon__lock {
-    display: inline-block;
-    position: absolute;
-    top: 60px;
-    right: -8px;
+    &:active + .ToolIcon__icon {
+      background-color: var(--button-gray-3);
+    }
+  }
 
-    margin-left: 0;
-    border-radius: 20px 0 0 20px;
+  .ToolIcon_type_floating {
+    background-color: transparent;
 
-    background-color: var(--button-gray-1);
     &:hover {
-      background-color: var(--button-gray-1);
+      background-color: transparent;
     }
+
     &:active {
-      background-color: var(--button-gray-2);
+      background-color: transparent;
+    }
+
+    &:focus {
+      box-shadow: none;
     }
 
     .ToolIcon__icon {
-      border-radius: inherit;
+      width: 2rem;
+      height: 2em;
     }
-    svg {
-      position: static;
+  }
+
+  .ToolIcon.ToolIcon__lock {
+    &.ToolIcon_type_floating {
+      margin-left: 0.1rem;
     }
   }
-}
 
-.unlocked-icon {
-  :root[dir="ltr"] & {
-    left: 2px;
+  .ToolIcon__keybinding {
+    position: absolute;
+    bottom: 2px;
+    right: 3px;
+    font-size: 0.5em;
+    color: var(--keybinding-color);
+    font-family: var(--ui-font);
+    user-select: none;
+  }
+
+  @media (max-width: 425px) {
+    .Shape .ToolIcon__icon {
+      width: 2rem;
+      height: 2rem;
+
+      svg {
+        height: 0.8em;
+      }
+    }
   }
-  :root[dir="rtl"] & {
-    right: 2px;
+
+  @media (max-width: 360px) {
+    .ToolIcon.ToolIcon__lock {
+      display: inline-block;
+      position: absolute;
+      top: 60px;
+      right: -8px;
+
+      margin-left: 0;
+      border-radius: 20px 0 0 20px;
+
+      background-color: var(--button-gray-1);
+
+      &:hover {
+        background-color: var(--button-gray-1);
+      }
+
+      &:active {
+        background-color: var(--button-gray-2);
+      }
+
+      .ToolIcon__icon {
+        border-radius: inherit;
+      }
+
+      svg {
+        position: static;
+      }
+    }
+  }
+
+  .unlocked-icon {
+    :root[dir="ltr"] & {
+      left: 2px;
+    }
+
+    :root[dir="rtl"] & {
+      right: 2px;
+    }
   }
 }

src/components/Tooltip.scss

@@ -1,48 +1,49 @@
 @import "../css/_variables";
+.excalidraw {
+  .Tooltip {
+    position: relative;
+  }
 
-.Tooltip {
-  position: relative;
-}
-
-.Tooltip__label {
-  --arrow-size: 4px;
-  visibility: hidden;
-  width: 10ch;
-  background: $oc-black;
-  color: $oc-white;
-  text-align: center;
-  border-radius: 4px;
-  padding: 4px;
-  position: absolute;
-  z-index: 10;
-  font-size: 0.7rem;
-  line-height: 1.5;
-  top: calc(100% + var(--arrow-size) + 3px);
-  // extra pixel offset for unknown reasons
-  left: calc(-50% + var(--arrow-size) / 2 - 1px);
-  word-wrap: break-word;
-
-  &::after {
-    content: "";
-    border: var(--arrow-size) solid transparent;
-    border-bottom-color: $oc-black;
+  .Tooltip__label {
+    --arrow-size: 4px;
+    visibility: hidden;
+    width: 10ch;
+    background: $oc-black;
+    color: $oc-white;
+    text-align: center;
+    border-radius: 4px;
+    padding: 4px;
     position: absolute;
-    bottom: 100%;
-    left: calc(50% - var(--arrow-size));
+    z-index: 10;
+    font-size: 0.7rem;
+    line-height: 1.5;
+    top: calc(100% + var(--arrow-size) + 3px);
+    // extra pixel offset for unknown reasons
+    left: calc(-50% + var(--arrow-size) / 2 - 1px);
+    word-wrap: break-word;
+
+    &::after {
+      content: "";
+      border: var(--arrow-size) solid transparent;
+      border-bottom-color: $oc-black;
+      position: absolute;
+      bottom: 100%;
+      left: calc(50% - var(--arrow-size));
+    }
   }
-}
 
-// the following 3 rules ensure that the tooltip doesn't show (nor affect
-// the cursor) when you drag over when you draw on canvas, but at the same
-// time it still works when clicking on the link/shield
-body:active .Tooltip:not(:hover) {
-  pointer-events: none;
-}
+  // the following 3 rules ensure that the tooltip doesn't show (nor affect
+  // the cursor) when you drag over when you draw on canvas, but at the same
+  // time it still works when clicking on the link/shield
+  body:active .Tooltip:not(:hover) {
+    pointer-events: none;
+  }
 
-body:not(:active) .Tooltip:hover .Tooltip__label {
-  visibility: visible;
-}
+  body:not(:active) .Tooltip:hover .Tooltip__label {
+    visibility: visible;
+  }
 
-.Tooltip__label:hover {
-  visibility: visible;
+  .Tooltip__label:hover {
+    visibility: visible;
+  }
 }

src/components/UserList.css

@@ -1,22 +0,0 @@
-.UserList {
-  pointer-events: none;
-  /*github corner*/
-  padding: var(--space-factor) 40px var(--space-factor) var(--space-factor);
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.UserList > * {
-  pointer-events: all;
-  margin: 0 0 var(--space-factor) var(--space-factor);
-}
-
-.UserList_mobile {
-  padding: 0;
-  justify-content: normal;
-}
-
-.UserList_mobile > * {
-  margin: 0 var(--space-factor) var(--space-factor) 0;
-}

src/components/UserList.scss

@@ -0,0 +1,24 @@
+.excalidraw {
+  .UserList {
+    pointer-events: none;
+    /*github corner*/
+    padding: var(--space-factor) 40px var(--space-factor) var(--space-factor);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  .UserList > * {
+    pointer-events: all;
+    margin: 0 0 var(--space-factor) var(--space-factor);
+  }
+
+  .UserList_mobile {
+    padding: 0;
+    justify-content: normal;
+  }
+
+  .UserList_mobile > * {
+    margin: 0 var(--space-factor) var(--space-factor) 0;
+  }
+}

src/components/UserList.tsx

@@ -1,4 +1,4 @@
-import "./UserList.css";
+import "./UserList.scss";
 
 import React from "react";
 

src/css/styles.scss

@@ -1,501 +1,504 @@
 @import "./_variables";
 @import "./theme";
 
-body {
-  margin: 0;
-  --ui-font: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto,
-    Helvetica, Arial, sans-serif;
-  font-family: var(--ui-font);
-  color: var(--text-color-primary);
-  -webkit-text-size-adjust: 100%;
-  user-select: none;
-  width: 100vw;
-  height: 100vh;
-}
-[contenteditable] {
-  user-select: auto;
-  cursor: text;
-}
-
-a {
-  font-weight: 500;
-  text-decoration: none;
-  color: $oc-blue-7; /* OC Blue 7 */
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-canvas {
-  touch-action: none;
-  user-select: none;
-
-  // following props improve blurriness at certain devicePixelRatios.
-  // AFAIK it doesn't affect export (in fact, export seems sharp either way).
-
-  image-rendering: pixelated; // chromium
-  // NOTE: must be declared *after* the above
-  image-rendering: -moz-crisp-edges; // FF
-
-  .Appearance_dark & {
-    // The percentage is inspired by
-    // https://material.io/design/color/dark-theme.html#properties, which
-    // recommends surface color of #121212, 93% yields #111111 for #FFF
-    filter: var(--appearance-filter);
-  }
-}
-
 .excalidraw {
+  color: var(--text-color-primary);
   display: flex;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-}
 
-.FixedSideContainer {
-  padding-top: var(--sat, 0px);
-  padding-right: var(--sar, 0px);
-  padding-bottom: var(--sab, 0px);
-  padding-left: var(--sal, 0px);
-}
+  a {
+    font-weight: 500;
+    text-decoration: none;
+    color: $oc-blue-7; /* OC Blue 7 */
 
-.panelRow {
-  display: flex;
-  justify-content: space-between;
-}
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 
-.panelColumn {
-  display: flex;
-  flex-direction: column;
+  canvas {
+    touch-action: none;
+    user-select: none;
+
+    // following props improve blurriness at certain devicePixelRatios.
+    // AFAIK it doesn't affect export (in fact, export seems sharp either way).
 
-  h3,
-  legend,
-  .control-label {
-    margin-top: 0.333rem;
-    margin-bottom: 0.333rem;
-    font-size: 0.75rem;
-    color: var(--text-color-primary);
-    font-weight: bold;
-    display: block;
+    image-rendering: pixelated; // chromium
+    // NOTE: must be declared *after* the above
+    image-rendering: -moz-crisp-edges; // FF
   }
 
-  .control-label input {
-    display: block;
-    width: 100%;
+  &.Appearance_dark {
+    // The percentage is inspired by
+    // https://material.io/design/color/dark-theme.html#properties, which
+    // recommends surface color of #121212, 93% yields #111111 for #FFF
+
+    canvas {
+      filter: var(--appearance-filter);
+    }
   }
 
-  h3:first-child,
-  legend:first-child,
-  .control-label:first-child {
-    margin-top: 0;
+  .FixedSideContainer {
+    padding-top: var(--sat, 0px);
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
   }
 
-  legend {
-    padding: 0;
+  .panelRow {
+    display: flex;
+    justify-content: space-between;
   }
 
-  .buttonList {
-    flex-wrap: wrap;
+  .panelColumn {
+    display: flex;
+    flex-direction: column;
 
-    label {
-      margin-right: 0.25rem;
+    h3,
+    legend,
+    .control-label {
+      margin-top: 0.333rem;
+      margin-bottom: 0.333rem;
       font-size: 0.75rem;
-      display: inline-block;
+      color: var(--text-color-primary);
+      font-weight: bold;
+      display: block;
     }
 
-    input[type="radio"] {
-      opacity: 0;
-      position: absolute;
-      pointer-events: none;
+    .control-label input {
+      display: block;
+      width: 100%;
     }
 
-    .ToolIcon {
-      margin: 0 5px;
+    h3:first-child,
+    legend:first-child,
+    .control-label:first-child {
+      margin-top: 0;
     }
 
-    .ToolIcon__icon {
-      width: 28px;
-      height: 28px;
+    legend {
+      padding: 0;
+    }
+
+    .buttonList {
+      flex-wrap: wrap;
+
+      label {
+        margin-right: 0.25rem;
+        font-size: 0.75rem;
+        display: inline-block;
+      }
+
+      input[type="radio"] {
+        opacity: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+
+      .ToolIcon {
+        margin: 0 5px;
+      }
+
+      .ToolIcon__icon {
+        width: 28px;
+        height: 28px;
+      }
+    }
+
+    fieldset {
+      margin: 0;
+      margin-top: 0.333rem;
+      padding: 0;
+      border: none;
     }
   }
 
-  fieldset {
-    margin: 0;
-    margin-top: 0.333rem;
-    padding: 0;
-    border: none;
+  .divider {
+    width: 1px;
+    background-color: $oc-gray-2;
+    margin: 1px;
   }
-}
 
-.divider {
-  width: 1px;
-  background-color: $oc-gray-2;
-  margin: 1px;
-}
+  .buttonList label:focus-within,
+  input:focus {
+    outline: transparent;
+    box-shadow: 0 0 0 2px var(--focus-highlight-color);
+  }
 
-.buttonList label:focus-within,
-input:focus {
-  outline: transparent;
-  box-shadow: 0 0 0 2px var(--focus-highlight-color);
-}
+  button,
+  .buttonList label {
+    user-select: none;
+    background-color: var(--button-gray-1);
+    border: 0;
+    border-radius: 4px;
+    margin: 0.125rem 0;
+    padding: 0.25rem;
+    white-space: nowrap;
 
-button,
-.buttonList label {
-  user-select: none;
-  background-color: var(--button-gray-1);
-  border: 0;
-  border-radius: 4px;
-  margin: 0.125rem 0;
-  padding: 0.25rem;
-  white-space: nowrap;
+    cursor: pointer;
 
-  cursor: pointer;
+    &:focus {
+      outline: transparent;
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
 
-  &:focus {
-    outline: transparent;
-    box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    &:hover {
+      background-color: var(--button-gray-2);
+    }
+
+    &:active {
+      background-color: var(--button-gray-3);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
-  &:hover {
+  .active,
+  .buttonList label.active {
     background-color: var(--button-gray-2);
-  }
 
-  &:active {
-    background-color: var(--button-gray-3);
-  }
+    &:hover {
+      background-color: var(--button-gray-2);
+    }
 
-  &:disabled {
-    cursor: not-allowed;
+    &:active {
+      background-color: var(--button-gray-3);
+    }
   }
-}
 
-.active,
-.buttonList label.active {
-  background-color: var(--button-gray-2);
-  &:hover {
-    background-color: var(--button-gray-2);
+  .App-bottom-bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    --bar-padding: calc(4 * var(--space-factor));
+    padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
+    padding-right: var(--sar, 0px);
+    padding-bottom: var(--sab, 0px);
+    padding-left: var(--sal, 0px);
+    z-index: 4;
+    display: flex;
+    align-items: flex-end;
+    pointer-events: none;
+
+    > .Island {
+      width: 100%;
+      max-width: 100%;
+      min-width: 100%;
+      box-sizing: border-box;
+      max-height: 100%;
+      display: flex;
+      flex-direction: column;
+      pointer-events: initial;
+    }
   }
-  &:active {
-    background-color: var(--button-gray-3);
+
+  .App-toolbar {
+    width: 100%;
+
+    box-sizing: border-box;
   }
-}
 
-.App-bottom-bar {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  --bar-padding: calc(4 * var(--space-factor));
-  padding-top: #{"max(var(--bar-padding), var(--sat, 0px))"};
-  padding-right: var(--sar, 0px);
-  padding-bottom: var(--sab, 0px);
-  padding-left: var(--sal, 0px);
-  z-index: 4;
-  display: flex;
-  align-items: flex-end;
-  pointer-events: none;
+  .App-toolbar-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 
-  > .Island {
+  .App-mobile-menu {
     width: 100%;
-    max-width: 100%;
-    min-width: 100%;
+    overflow-x: visible;
+    overflow-y: auto;
     box-sizing: border-box;
-    max-height: 100%;
-    display: flex;
-    flex-direction: column;
-    pointer-events: initial;
+    margin-bottom: var(--bar-padding);
   }
-}
 
-.App-toolbar {
-  width: 100%;
+  .App-menu {
+    display: grid;
+    color: var(--icon-fill-color);
+  }
 
-  box-sizing: border-box;
-}
-.App-toolbar-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.App-mobile-menu {
-  width: 100%;
-  overflow-x: visible;
-  overflow-y: auto;
-  box-sizing: border-box;
-  margin-bottom: var(--bar-padding);
-}
+  .App-menu_top {
+    grid-template-columns: 1fr auto 1fr;
+    grid-gap: 4px;
+    align-items: flex-start;
+    cursor: default;
+    pointer-events: none !important;
+  }
 
-.App-menu {
-  display: grid;
-  color: var(--icon-fill-color);
-}
+  .App-menu_top > * {
+    pointer-events: all;
+  }
 
-.App-menu_top {
-  grid-template-columns: 1fr auto 1fr;
-  grid-gap: 4px;
-  align-items: flex-start;
-  cursor: default;
-  pointer-events: none !important;
-}
+  .App-menu_top > *:first-child {
+    justify-self: flex-start;
+  }
 
-.App-menu_top > * {
-  pointer-events: all;
-}
+  .App-menu_top > *:last-child {
+    justify-self: flex-end;
+  }
 
-.App-menu_top > *:first-child {
-  justify-self: flex-start;
-}
+  .App-menu_bottom {
+    position: absolute;
+    bottom: 0;
+    grid-template-columns: 1fr auto 1fr;
+    grid-gap: 4px;
+    align-items: flex-start;
+    cursor: default;
+    pointer-events: none !important;
+    z-index: 100;
 
-.App-menu_top > *:last-child {
-  justify-self: flex-end;
-}
+    :root[dir="ltr"] & {
+      left: 0.25rem;
+    }
 
-.App-menu_bottom {
-  position: absolute;
-  bottom: 0;
-  grid-template-columns: 1fr auto 1fr;
-  grid-gap: 4px;
-  align-items: flex-start;
-  cursor: default;
-  pointer-events: none !important;
-  z-index: 100;
+    :root[dir="rtl"] & {
+      right: 0.25rem;
+    }
 
-  :root[dir="ltr"] & {
-    left: 0.25rem;
-  }
-  :root[dir="rtl"] & {
-    right: 0.25rem;
-  }
+    &--transition-left {
+      section {
+        width: 185px;
+      }
+    }
 
-  &--transition-left {
     section {
-      width: 185px;
+      display: flex;
     }
   }
 
-  section {
-    display: flex;
+  .App-menu_bottom > * {
+    pointer-events: all;
   }
-}
-
-.App-menu_bottom > * {
-  pointer-events: all;
-}
 
-.App-menu_bottom > *:first-child {
-  justify-self: flex-start;
-}
-
-.App-menu_bottom > *:last-child {
-  justify-self: flex-end;
-}
+  .App-menu_bottom > *:first-child {
+    justify-self: flex-start;
+  }
 
-.App-menu_left {
-  grid-template-rows: 1fr auto 1fr;
-  height: 100%;
-}
+  .App-menu_bottom > *:last-child {
+    justify-self: flex-end;
+  }
 
-.App-menu_right {
-  grid-template-rows: 1fr;
-  height: 100%;
-}
+  .App-menu_left {
+    grid-template-rows: 1fr auto 1fr;
+    height: 100%;
+  }
 
-.App-menu__left {
-  overflow-y: auto;
-  max-height: calc(100vh - 236px);
-}
+  .App-menu_right {
+    grid-template-rows: 1fr;
+    height: 100%;
+  }
 
-.ErrorSplash {
-  min-height: 100vh;
-  padding: 20px 0;
-  overflow: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: text;
+  .App-menu__left {
+    overflow-y: auto;
+    max-height: calc(100vh - 236px);
+  }
 
-  .ErrorSplash-messageContainer {
+  .ErrorSplash {
+    min-height: 100vh;
+    padding: 20px 0;
+    overflow: auto;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
+    user-select: text;
 
-    padding: 40px;
-    background-color: $oc-red-1;
-    border: 3px solid $oc-red-9;
-  }
+    .ErrorSplash-messageContainer {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      padding: 40px;
+      background-color: $oc-red-1;
+      border: 3px solid $oc-red-9;
+    }
 
-  .ErrorSplash-paragraph {
-    margin: 15px 0;
-    max-width: 600px;
+    .ErrorSplash-paragraph {
+      margin: 15px 0;
+      max-width: 600px;
 
-    &.align-center {
-      text-align: center;
+      &.align-center {
+        text-align: center;
+      }
     }
-  }
 
-  .bigger,
-  .bigger button {
-    font-size: 1.1em;
-  }
-  .smaller,
-  .smaller button {
-    font-size: 0.9em;
-  }
+    .bigger,
+    .bigger button {
+      font-size: 1.1em;
+    }
 
-  .ErrorSplash-details {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    .smaller,
+    .smaller button {
+      font-size: 0.9em;
+    }
 
-    textarea {
-      width: 100%;
-      margin: 10px 0;
-      font-family: "Cascadia";
-      font-size: 0.8em;
+    .ErrorSplash-details {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      textarea {
+        width: 100%;
+        margin: 10px 0;
+        font-family: "Cascadia";
+        font-size: 0.8em;
+      }
     }
   }
-}
 
-.dropdown-select {
-  height: 1.5rem;
-  padding: 0;
-  padding-inline-start: 0.5rem;
-  padding-inline-end: 1.5rem;
-  color: var(--icon-fill-color);
-  background-color: var(--button-gray-1);
-  border-radius: var(--space-factor);
-  border: 1px solid var(--button-gray-2);
-  font-size: 0.8rem;
-  outline: none;
-  appearance: none;
-  background-image: var(--dropdown-icon);
-  background-repeat: no-repeat;
-  background-position: right 0.7rem top 50%, 0 0;
-  :root[dir="rtl"] & {
-    background-position: left 0.7rem top 50%, 0 0;
-  }
-  background-size: 0.65em auto, 100%;
-
-  &:focus {
-    box-shadow: 0 0 0 2px var(--focus-highlight-color);
-  }
+  .dropdown-select {
+    height: 1.5rem;
+    padding: 0;
+    padding-inline-start: 0.5rem;
+    padding-inline-end: 1.5rem;
+    color: var(--icon-fill-color);
+    background-color: var(--button-gray-1);
+    border-radius: var(--space-factor);
+    border: 1px solid var(--button-gray-2);
+    font-size: 0.8rem;
+    outline: none;
+    appearance: none;
+    background-image: var(--dropdown-icon);
+    background-repeat: no-repeat;
+    background-position: right 0.7rem top 50%, 0 0;
+
+    :root[dir="rtl"] & {
+      background-position: left 0.7rem top 50%, 0 0;
+    }
 
-  &:hover {
-    background-color: var(--button-gray-2);
-  }
+    background-size: 0.65em auto, 100%;
 
-  &:active {
-    background-color: var(--button-gray-2);
-  }
-  &.dropdown-select--floating {
-    position: absolute;
-    margin: 0.5em;
-  }
-}
+    &:focus {
+      box-shadow: 0 0 0 2px var(--focus-highlight-color);
+    }
 
-.dropdown-select__language.dropdown-select--floating {
-  position: absolute;
-  bottom: 10px;
-  :root[dir="ltr"] & {
-    right: 44px;
-  }
-  :root[dir="rtl"] & {
-    left: 44px;
-  }
-}
+    &:hover {
+      background-color: var(--button-gray-2);
+    }
 
-.zIndexButton {
-  margin: 0 5px;
-  padding: 5px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+    &:active {
+      background-color: var(--button-gray-2);
+    }
 
-  svg {
-    width: 18px;
-    height: 18px;
+    &.dropdown-select--floating {
+      position: absolute;
+      margin: 0.5em;
+    }
   }
-}
 
-.scroll-back-to-content {
-  color: var(--popup-text-color);
-  position: fixed;
-  left: 50%;
-  bottom: 30px;
-  transform: translateX(-50%);
-  padding: 10px 20px;
-}
+  .dropdown-select__language.dropdown-select--floating {
+    position: absolute;
+    bottom: 10px;
 
-.help-icon {
-  position: absolute;
-  cursor: pointer;
-  fill: $oc-gray-6;
-  bottom: 14px;
-  :root[dir="ltr"] & {
-    right: 14px;
-  }
-  :root[dir="rtl"] & {
-    left: 14px;
+    :root[dir="ltr"] & {
+      right: 44px;
+    }
+
+    :root[dir="rtl"] & {
+      left: 44px;
+    }
   }
-}
 
-@media #{$media-query} {
-  aside {
-    display: none;
+  .zIndexButton {
+    margin: 0 5px;
+    padding: 5px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
   }
+
   .scroll-back-to-content {
-    bottom: calc(80px + var(--sab, 0px));
-    z-index: -1;
+    color: var(--popup-text-color);
+    position: fixed;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    padding: 10px 20px;
   }
-}
 
-.rtl-mirror {
-  :root[dir="rtl"] & {
-    transform: scaleX(-1);
+  .help-icon {
+    position: absolute;
+    cursor: pointer;
+    fill: $oc-gray-6;
+    bottom: 14px;
+
+    :root[dir="ltr"] & {
+      right: 14px;
+    }
+
+    :root[dir="rtl"] & {
+      left: 14px;
+    }
   }
-}
 
-.github-corner {
-  position: absolute;
-  top: 0;
-  z-index: 2;
-  :root[dir="ltr"] & {
-    right: 0;
+  @media #{$media-query} {
+    aside {
+      display: none;
+    }
+    .scroll-back-to-content {
+      bottom: calc(80px + var(--sab, 0px));
+      z-index: -1;
+    }
   }
-  :root[dir="rtl"] & {
-    left: 0;
+
+  .rtl-mirror {
+    :root[dir="rtl"] & {
+      transform: scaleX(-1);
+    }
   }
-}
 
-.zen-mode-visibility {
-  visibility: visible;
-  opacity: 1;
-  height: auto;
-  width: auto;
-  transition: opacity 0.5s;
-
-  &.zen-mode-visibility--hidden {
-    visibility: hidden;
-    opacity: 0;
-    height: 0;
-    width: 0;
+  .github-corner {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+
+    :root[dir="ltr"] & {
+      right: 0;
+    }
+
+    :root[dir="rtl"] & {
+      left: 0;
+    }
+  }
+
+  .zen-mode-visibility {
+    visibility: visible;
+    opacity: 1;
+    height: auto;
+    width: auto;
     transition: opacity 0.5s;
+
+    &.zen-mode-visibility--hidden {
+      visibility: hidden;
+      opacity: 0;
+      height: 0;
+      width: 0;
+      transition: opacity 0.5s;
+    }
   }
-}
 
-.disable-pointerEvents {
-  pointer-events: none !important;
-}
+  .disable-pointerEvents {
+    pointer-events: none !important;
+  }
 
-@media print {
-  .App-bottom-bar,
-  .FixedSideContainer,
-  .layer-ui__wrapper {
-    display: none;
+  @media print {
+    .App-bottom-bar,
+    .FixedSideContainer,
+    .layer-ui__wrapper {
+      display: none;
+    }
   }
 }

src/css/theme.scss

@@ -37,36 +37,42 @@
   --popup-text-inverted-color: #{$oc-white};
 }
 
-:root.Appearance_dark {
-  background-color: #000;
-}
+.excalidraw {
+  &.Appearance_dark {
+    background: #000;
+
+    &.Appearance_dark-background-none {
+      background: none;
+    }
+  }
 
-.Appearance_dark {
-  --text-color-primary: #{$oc-gray-4};
-  --bg-color-island: #1e1e1e;
-  --popup-background-color: #2c2c2c;
-  --button-gray-1: #363636;
-  --button-gray-2: #272727;
-  --button-gray-3: #222;
-  --input-border-color: #2e2e2e;
-  --input-background-color: #121212;
-  --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};
-  --color-overlay-text-color: #bbb;
-  --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
-  --overlay-background-color: rgba(30, 30, 30, 0.88);
-  // #{$oc-gray-4}; inlined
-  --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};
-  --appearance-filter: invert(93%) hue-rotate(180deg);
-  --button-special-active-background-color: #204624;
-  --button-destructive-color: #{$oc-red-3};
-  --button-destructive-background-color: #5a0000;
-  --popup-secondary-background-color: #222;
-  --popup-text-color: #{$oc-gray-4};
-  --popup-text-inverted-color: #2c2c2c;
+  &.Appearance_dark {
+    --text-color-primary: #{$oc-gray-4};
+    --bg-color-island: #1e1e1e;
+    --popup-background-color: #2c2c2c;
+    --button-gray-1: #363636;
+    --button-gray-2: #272727;
+    --button-gray-3: #222;
+    --input-border-color: #2e2e2e;
+    --input-background-color: #121212;
+    --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};
+    --color-overlay-text-color: #bbb;
+    --shadow-island: 0 1px 5px #{transparentize($oc-black, 0.7)};
+    --overlay-background-color: rgba(30, 30, 30, 0.88);
+    // #{$oc-gray-4}; inlined
+    --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};
+    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --button-special-active-background-color: #204624;
+    --button-destructive-color: #{$oc-red-3};
+    --button-destructive-background-color: #5a0000;
+    --popup-secondary-background-color: #222;
+    --popup-text-color: #{$oc-gray-4};
+    --popup-text-inverted-color: #2c2c2c;
+  }
 }