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(
+    document
-      "Appearance_dark",
+      .querySelector(".excalidraw")
-      this.state.appearance === "dark",
+      ?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
-    );
 
     if (this.state.isCollaborating && !this.portal.socket) {
       this.initializeSocketClient({ showLoadingState: true });

src/components/Avatar.scss

@@ -1,6 +1,7 @@
 @import "../css/_variables";
 
-.Avatar {
+.excalidraw {
+  .Avatar {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 1.25rem;
@@ -11,4 +12,5 @@
     cursor: pointer;
     font-size: 0.8rem;
     font-weight: 500;
+  }
 }

src/components/ColorPicker.scss

@@ -1,26 +1,29 @@
 @import "open-color/open-color.scss";
 
-.color-picker {
+.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 {
+  .color-picker-control-container {
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: center;
-}
+  }
 
-.color-picker-triangle {
+  .color-picker-triangle {
     width: 0px;
     height: 0px;
     border-style: solid;
@@ -28,31 +31,33 @@
     border-color: transparent transparent var(--popup-background-color);
     position: absolute;
     top: -10px;
+
     :root[dir="ltr"] & {
       left: 12px;
     }
+
     :root[dir="rtl"] & {
       right: 12px;
     }
-}
+  }
 
-.color-picker-triangle-shadow {
+  .color-picker-triangle-shadow {
     border-color: transparent transparent transparentize($oc-black, 0.9);
     top: -11px;
-}
+  }
 
-.color-picker-content {
+  .color-picker-content {
     padding: 0.5rem;
     display: grid;
     grid-template-columns: repeat(5, auto);
     grid-gap: 0.5rem;
-}
+  }
 
-.color-picker-content .color-input-container {
+  .color-picker-content .color-input-container {
     grid-column: 1 / span 5;
-}
+  }
 
-.color-picker-swatch {
+  .color-picker-swatch {
     position: relative;
     height: 1.875rem;
     width: 1.875rem;
@@ -63,15 +68,15 @@
     border: 1px solid #ddd;
     background-color: currentColor !important;
     filter: var(--appearance-filter);
-}
 
-.color-picker-swatch:focus {
+    &: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 {
+  .color-picker-transparent {
     border-radius: 4px;
     box-shadow: transparentize($oc-black, 0.9) 0px 0px 0px 1px inset;
     position: absolute;
@@ -79,64 +84,76 @@
     right: 0px;
     bottom: 0px;
     left: 0px;
-}
+  }
-.color-picker-transparent,
+
-.color-picker-label-swatch {
+  .color-picker-transparent,
+  .color-picker-label-swatch {
     background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
       left center;
-}
+  }
 
-.color-picker-hash {
+  .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 {
+
+  .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 {
+  .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 {
+
+  .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:focus-within .color-picker-hash::after {
+
+  .color-input-container:focus-within .color-picker-hash::after {
     background: var(--input-background-color);
+
     :root[dir="ltr"] & {
       right: -2px;
     }
+
     :root[dir="rtl"] & {
       left: -2px;
     }
-}
+  }
 
-.color-input-container {
+  .color-input-container {
     display: flex;
-}
+  }
 
-.color-picker-input {
+  .color-picker-input {
     width: 12ch; /* length of `transparent` + 1 */
     margin: 0;
     font-size: 1rem;
@@ -146,19 +163,22 @@
     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-label-swatch {
+  .color-picker-label-swatch {
     height: 1.875rem;
     width: 1.875rem;
     margin-inline-end: 0.25rem;
@@ -167,9 +187,8 @@
     overflow: hidden;
     background-color: transparent !important;
     filter: var(--appearance-filter);
-}
 
-.color-picker-label-swatch::after {
+    &:after {
       content: "";
       position: absolute;
       top: 0;
@@ -177,37 +196,46 @@
       width: 100%;
       height: 100%;
       background: var(--swatch-color);
-}
+    }
+  }
 
-.color-picker-keybinding {
+  .color-picker-keybinding {
     position: absolute;
     bottom: 2px;
+
     :root[dir="ltr"] & {
       right: 2px;
     }
+
     :root[dir="rtl"] & {
       left: 2px;
     }
+
     font-size: 0.7em;
-}
+  }
 
-.color-picker-type-canvasBackground .color-picker-keybinding {
+  .color-picker-type-canvasBackground .color-picker-keybinding {
     color: #aaa;
-}
+  }
 
-.color-picker-type-elementBackground .color-picker-keybinding {
+  .color-picker-type-elementBackground .color-picker-keybinding {
     color: #fff;
-  .Appearance_dark & {
-    color: #000;
   }
-}
-.color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
-  color: #aaa;
-  .Appearance_dark & {
-    color: #000;
-  }
-}
 
-.color-picker-type-elementStroke .color-picker-keybinding {
+  .color-picker-swatch[aria-label="transparent"] .color-picker-keybinding {
+    color: #aaa;
+  }
+
+  .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,6 +1,7 @@
 @import "open-color/open-color.scss";
 
-.context-menu {
+.excalidraw {
+  .context-menu {
     position: relative;
     border-radius: 4px;
     box-shadow: 0px 3px 10px transparentize($oc-black, 0.8);
@@ -11,13 +12,13 @@
     padding: 0.25rem 0;
     background-color: var(--popup-secondary-background-color);
     border: 1px solid var(--button-gray-3);
-}
+  }
 
-.context-menu button {
+  .context-menu button {
     color: var(--popup-text-color);
-}
+  }
 
-.context-menu-option {
+  .context-menu-option {
     position: relative;
     width: 100%;
     min-width: 9.5rem;
@@ -28,13 +29,14 @@
     background-color: transparent;
     border: none;
     white-space: nowrap;
-}
+  }
 
-.context-menu-option:hover {
+  .context-menu-option:hover {
     color: var(--popup-background-color);
     background-color: var(--select-highlight-color);
-}
+  }
 
-.context-menu-option:focus {
+  .context-menu-option:focus {
     z-index: 1;
+  }
 }

src/components/ContextMenu.tsx

@@ -16,7 +16,15 @@ type Props = {
   left: number;
 };
 
-const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => (
+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}
@@ -34,7 +42,9 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => (
           ))}
         </ul>
       </Popover>
-);
+    </div>
+  );
+};
 
 const ContextMenuOption = ({ label, action }: ContextMenuOption) => (
   <button className="context-menu-option" onClick={action}>

src/components/Dialog.scss

@@ -1,28 +1,30 @@
 @import "../css/_variables";
 
-.Dialog__title {
+.excalidraw {
+  .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 {
+  .Dialog__titleContent {
     flex: 1;
-}
+  }
 
-.Dialog .Modal__close {
+  .Dialog .Modal__close {
     color: var(--icon-fill-color);
     margin: 0;
-}
+  }
 
-@media #{$media-query} {
+  @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
@@ -42,9 +44,11 @@
       border-bottom: 1px solid var(--button-gray-2);
       z-index: 1;
     }
+
     .Dialog__titleContent {
       text-align: center;
     }
+
     .Dialog .Island {
       width: 100vw;
       height: 100%;
@@ -58,4 +62,5 @@
     .Dialog .Modal__close {
       order: -1;
     }
+  }
 }

src/components/ExportDialog.scss

@@ -1,6 +1,7 @@
 @import "../css/_variables";
 
-.ExportDialog__preview {
+.excalidraw {
+  .ExportDialog__preview {
     --preview-padding: calc(var(--space-factor) * 4);
 
     background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
@@ -8,58 +9,63 @@
     text-align: center;
     padding: var(--preview-padding);
     margin-bottom: calc(var(--space-factor) * 3);
-}
+  }
 
-.ExportDialog__preview canvas {
+  .ExportDialog__preview canvas {
     max-width: calc(100% - var(--preview-padding) * 2);
     max-height: 25rem;
-}
+  }
 
-.Appearance_dark .ExportDialog__preview canvas {
+  &.Appearance_dark .ExportDialog__preview canvas {
     filter: none;
-}
+  }
 
-.ExportDialog__actions {
+  .ExportDialog__actions {
     width: 100%;
     display: flex;
     grid-gap: calc(var(--space-factor) * 2);
     align-items: top;
     justify-content: space-between;
-}
+  }
 
-.ExportDialog__name {
+  .ExportDialog__name {
     grid-column: project-name;
     margin: auto;
 
     .TextInput {
       height: calc(1rem - 3px);
     }
-}
+  }
 
-@media (max-width: 550px) {
+  @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);
     }
-}
+  }
 
-@media #{$media-query} {
+  @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,6 +1,7 @@
 @import "../css/_variables";
 
-.HintViewer {
+.excalidraw {
+  .HintViewer {
     pointer-events: none;
     box-sizing: border-box;
     position: absolute;
@@ -28,4 +29,5 @@
       background-color: var(--overlay-background-color);
       border-radius: 4px;
     }
+  }
 }

src/components/Island.scss

@@ -1,4 +1,5 @@
-.Island {
+.excalidraw {
+  .Island {
     --padding: 0;
     background-color: var(--bg-color-island);
     backdrop-filter: saturate(100%) blur(10px);
@@ -11,4 +12,5 @@
     &.zen-mode {
       box-shadow: none;
     }
+  }
 }

src/components/LayerUI.scss

@@ -1,23 +1,24 @@
 @import "open-color/open-color";
 
-.layer-ui__library {
+.excalidraw {
+  .layer-ui__library {
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
-}
+  }
 
-.layer-ui__library-message {
+  .layer-ui__library-message {
     padding: 10px 20px;
     max-width: 200px;
-}
+  }
 
-.layer-ui__library-items {
+  .layer-ui__library-items {
     max-height: 50vh;
     overflow: auto;
-}
+  }
 
-.layer-ui__wrapper {
+  .layer-ui__wrapper {
     .encrypted-icon {
       position: relative;
       margin-inline-start: 15px;
@@ -36,12 +37,15 @@
         visibility: hidden;
         width: 20rem;
         bottom: calc(50% + 0.8rem + 6px);
+
         :root[dir="ltr"] & {
           left: -5px;
         }
+
         :root[dir="rtl"] & {
           right: -5px;
         }
+
         background-color: $oc-black;
         color: $oc-white;
         text-align: center;
@@ -60,9 +64,11 @@
           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);
           }
@@ -76,9 +82,11 @@
       body:active &.tooltip:not(:hover) {
         pointer-events: none;
       }
+
       body:not(:active) &.tooltip:hover .tooltip-text {
         visibility: visible;
       }
+
       .tooltip-text:hover {
         visibility: visible;
       }
@@ -86,12 +94,15 @@
 
     &__github-corner {
       top: 0;
+
       :root[dir="ltr"] & {
         right: 0;
       }
+
       :root[dir="rtl"] & {
         left: 0;
       }
+
       position: absolute;
       width: 40px;
     }
@@ -100,26 +111,33 @@
       position: absolute;
       z-index: 100;
       bottom: 0px;
+
       :root[dir="ltr"] & {
         right: 0;
       }
+
       :root[dir="rtl"] & {
         left: 0;
       }
+
       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);
       }
+
       :root[dir="rtl"] &.transition-right {
         transform: translate(-999px, 0);
       }
@@ -148,4 +166,5 @@
         transition-delay: 0.8s;
       }
     }
+  }
 }

src/components/LibraryUnit.scss

@@ -1,4 +1,5 @@
-.library-unit {
+.excalidraw {
+  .library-unit {
     align-items: center;
     border: 1px solid var(--button-gray-2);
     display: flex;
@@ -6,24 +7,24 @@
     position: relative;
     width: 63px;
     height: 63px; // match width
-}
+  }
 
-.library-unit__dragger {
+  .library-unit__dragger {
     display: flex;
     height: 100%;
     width: 100%;
-}
+  }
 
-.library-unit__dragger > svg {
+  .library-unit__dragger > svg {
     filter: var(--appearance-filter);
     flex-grow: 1;
     max-height: 100%;
     max-width: 100%;
-}
+  }
 
-.library-unit__removeFromLibrary,
+  .library-unit__removeFromLibrary,
-.library-unit__removeFromLibrary:hover,
+  .library-unit__removeFromLibrary:hover,
-.library-unit__removeFromLibrary:active {
+  .library-unit__removeFromLibrary:active {
     align-items: center;
     background: none;
     border: none;
@@ -35,19 +36,19 @@
     position: absolute;
     right: 5px;
     top: 5px;
-}
+  }
 
-.library-unit__removeFromLibrary > svg {
+  .library-unit__removeFromLibrary > svg {
     height: 16px;
     width: 16px;
-}
+  }
 
-.library-unit__pulse {
+  .library-unit__pulse {
     transform: scale(1);
     animation: library-unit__pulse-animation 1s ease-in infinite;
-}
+  }
 
-.library-unit__adder {
+  .library-unit__adder {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -56,13 +57,13 @@
     margin-left: -10px;
     margin-top: -10px;
     pointer-events: none;
-}
+  }
 
-.library-unit__active {
+  .library-unit__active {
     cursor: pointer;
-}
+  }
 
-@keyframes library-unit__pulse-animation {
+  @keyframes library-unit__pulse-animation {
     0% {
       transform: scale(0.95);
     }
@@ -74,4 +75,5 @@
     100% {
       transform: scale(0.95);
     }
+  }
 }

src/components/Modal.scss

@@ -1,6 +1,7 @@
 @import "../css/_variables";
 
-.Modal {
+.excalidraw {
+  .Modal {
     position: fixed;
     top: 0;
     left: 0;
@@ -11,9 +12,9 @@
     justify-content: center;
     overflow: auto;
     padding: calc(var(--space-factor) * 10);
-}
+  }
 
-.Modal__background {
+  .Modal__background {
     position: fixed;
     top: 0;
     left: 0;
@@ -22,9 +23,9 @@
     z-index: 1;
     background-color: transparentize($oc-black, 0.7);
     backdrop-filter: blur(2px);
-}
+  }
 
-.Modal__content {
+  .Modal__content {
     position: relative;
     z-index: 2;
     width: 100%;
@@ -42,9 +43,9 @@
     @media #{$media-query} {
       max-width: 100%;
     }
-}
+  }
 
-@keyframes Modal__content_fade-in {
+  @keyframes Modal__content_fade-in {
     from {
       opacity: 0;
       transform: translateY(10px);
@@ -53,27 +54,31 @@
       opacity: 1;
       transform: translateY(0);
     }
-}
+  }
-.Modal__close {
+
+  .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 {
+
+  .Modal__close--floating {
     position: absolute;
     right: calc(var(--space-factor) * 5);
     top: calc(var(--space-factor) * 5);
-}
+  }
 
-@media #{$media-query} {
+  @media #{$media-query} {
     .Modal {
       padding: 0;
     }
+
     .Modal__content {
       position: fixed;
       top: 0;
@@ -81,4 +86,5 @@
       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,14 +1,15 @@
 @import "../css/_variables";
 
-.RoomDialog-modalButton.is-collaborating {
+.excalidraw {
+  .RoomDialog-modalButton.is-collaborating {
     background-color: var(--button-special-active-background-color);
 
     .ToolIcon__icon svg {
       color: var(--icon-green-fill-color);
     }
-}
+  }
 
-.RoomDialog-modalButton-collaborators {
+  .RoomDialog-modalButton-collaborators {
     min-width: 1em;
     position: absolute;
     bottom: -5px;
@@ -19,14 +20,14 @@
     color: $oc-white;
     font-size: 0.7em;
     font-family: var(--ui-font);
-}
+  }
 
-.RoomDialog-linkContainer {
+  .RoomDialog-linkContainer {
     display: flex;
     margin: 1.5em 0;
-}
+  }
 
-.RoomDialog-link {
+  .RoomDialog-link {
     color: var(--text-color-primary);
     min-width: 0;
     flex: 1 1 auto;
@@ -40,21 +41,21 @@
     white-space: nowrap;
     border-radius: var(--space-factor);
     background-color: var(--button-gray-1);
-}
+  }
 
-.RoomDialog-emoji {
+  .RoomDialog-emoji {
     font-family: sans-serif;
-}
+  }
 
-.RoomDialog-usernameContainer {
+  .RoomDialog-usernameContainer {
     display: flex;
     margin: 1.5em 0;
     display: flex;
     align-items: center;
     justify-content: center;
-}
+  }
 
-.RoomDialog-username {
+  .RoomDialog-username {
     background-color: var(--input-background-color);
     border-color: var(--input-border-color);
     appearance: none;
@@ -65,18 +66,19 @@
     font-size: 1em;
     line-height: 1.5;
     padding: 0 0.5rem;
-}
+  }
 
-.RoomDialog-sessionStartButtonContainer {
+  .RoomDialog-sessionStartButtonContainer {
     display: flex;
     justify-content: center;
-}
+  }
 
-.RoomDialog-stopSession {
+  .Modal .RoomDialog-stopSession {
     background-color: var(--button-destructive-background-color);
 
     .ToolIcon__label,
     .ToolIcon__icon svg {
       color: var(--button-destructive-color);
     }
+  }
 }

src/components/ShortcutsDialog.scss

@@ -1,22 +1,23 @@
 @import "../css/_variables";
 
-.ShortcutsDialog-island {
+.excalidraw {
+  .ShortcutsDialog-island {
     border: 1px solid var(--button-gray-2);
     margin-bottom: 16px;
-}
+  }
 
-.ShortcutsDialog-island-title {
+  .ShortcutsDialog-island-title {
     margin: 0;
     padding: 4px;
     background-color: var(--button-gray-1);
     text-align: center;
-}
+  }
 
-.ShorcutsDialog-shortcut {
+  .ShorcutsDialog-shortcut {
     border-top: 1px solid var(--button-gray-2);
-}
+  }
 
-.ShorcutsDialog-key {
+  .ShorcutsDialog-key {
     word-break: keep-all;
     border: 1px solid var(--button-gray-2);
     padding: 2px 8px;
@@ -28,13 +29,14 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
-}
+  }
 
-.ShortcutsDialog-footer {
+  .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,6 +1,7 @@
 @import "../css/_variables.scss";
 
-.TextInput {
+.excalidraw {
+  .TextInput {
     color: var(--text-color-primary);
     display: inline-block;
     border: 1.5px solid var(--button-gray-1);
@@ -9,13 +10,16 @@
     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);
     }
+  }
 }

src/components/ToolIcon.scss

@@ -1,6 +1,6 @@
 @import "open-color/open-color.scss";
-
+.excalidraw {
-.ToolIcon {
+  .ToolIcon {
     display: inline-flex;
     align-items: center;
     position: relative;
@@ -9,9 +9,9 @@
     background-color: var(--button-gray-1);
     -webkit-tap-highlight-color: transparent;
     border-radius: var(--space-factor);
-}
+  }
 
-.ToolIcon__icon {
+  .ToolIcon__icon {
     width: 2.5rem;
     height: 2.5rem;
     color: var(--icon-fill-color);
@@ -32,22 +32,24 @@
     & + .ToolIcon__label {
       margin-inline-start: 0;
     }
-}
+  }
 
-.ToolIcon__label {
+  .ToolIcon__label {
     color: var(--icon-fill-color);
     font-family: var(--ui-font);
     margin: 0 0.8em;
     text-overflow: ellipsis;
-}
+  }
 
-.ToolIcon_size_s .ToolIcon__icon {
+  .ToolIcon_size_s .ToolIcon__icon {
     width: 1.4rem;
     height: 1.4rem;
     font-size: 0.8em;
-}
+  }
 
-.ToolIcon_type_button {
+  .excalidraw .ToolIcon_type_button,
+  .Modal .ToolIcon_type_button,
+  .ToolIcon_type_button {
     padding: 0;
     border: none;
     margin: 0;
@@ -56,14 +58,18 @@
     &: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);
       }
@@ -72,13 +78,14 @@
     &--show {
       visibility: visible;
     }
+
     &--hide {
       visibility: hidden;
     }
-}
+  }
 
-.ToolIcon_type_radio,
+  .ToolIcon_type_radio,
-.ToolIcon_type_checkbox {
+  .ToolIcon_type_checkbox {
     position: absolute;
     opacity: 0;
     pointer-events: none;
@@ -86,38 +93,44 @@
     &: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);
     }
-}
+  }
 
-.ToolIcon_type_floating {
+  .ToolIcon_type_floating {
     background-color: transparent;
+
     &:hover {
       background-color: transparent;
     }
+
     &:active {
       background-color: transparent;
     }
+
     &:focus {
       box-shadow: none;
     }
+
     .ToolIcon__icon {
       width: 2rem;
       height: 2em;
     }
-}
+  }
 
-.ToolIcon.ToolIcon__lock {
+  .ToolIcon.ToolIcon__lock {
     &.ToolIcon_type_floating {
       margin-left: 0.1rem;
     }
-}
+  }
 
-.ToolIcon__keybinding {
+  .ToolIcon__keybinding {
     position: absolute;
     bottom: 2px;
     right: 3px;
@@ -125,9 +138,9 @@
     color: var(--keybinding-color);
     font-family: var(--ui-font);
     user-select: none;
-}
+  }
 
-@media (max-width: 425px) {
+  @media (max-width: 425px) {
     .Shape .ToolIcon__icon {
       width: 2rem;
       height: 2rem;
@@ -136,9 +149,9 @@
         height: 0.8em;
       }
     }
-}
+  }
 
-@media (max-width: 360px) {
+  @media (max-width: 360px) {
     .ToolIcon.ToolIcon__lock {
       display: inline-block;
       position: absolute;
@@ -149,9 +162,11 @@
       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);
       }
@@ -159,17 +174,20 @@
       .ToolIcon__icon {
         border-radius: inherit;
       }
+
       svg {
         position: static;
       }
     }
-}
+  }
 
-.unlocked-icon {
+  .unlocked-icon {
     :root[dir="ltr"] & {
       left: 2px;
     }
+
     :root[dir="rtl"] & {
       right: 2px;
     }
+  }
 }

src/components/Tooltip.scss

@@ -1,10 +1,10 @@
 @import "../css/_variables";
-
+.excalidraw {
-.Tooltip {
+  .Tooltip {
     position: relative;
-}
+  }
 
-.Tooltip__label {
+  .Tooltip__label {
     --arrow-size: 4px;
     visibility: hidden;
     width: 10ch;
@@ -30,19 +30,20 @@
       bottom: 100%;
       left: calc(50% - var(--arrow-size));
     }
-}
+  }
 
-// the following 3 rules ensure that the tooltip doesn't show (nor affect
+  // 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
+  // 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
+  // time it still works when clicking on the link/shield
-body:active .Tooltip:not(:hover) {
+  body:active .Tooltip:not(:hover) {
     pointer-events: none;
-}
+  }
 
-body:not(:active) .Tooltip:hover .Tooltip__label {
+  body:not(:active) .Tooltip:hover .Tooltip__label {
     visibility: visible;
-}
+  }
 
-.Tooltip__label:hover {
+  .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,23 +1,16 @@
 @import "./_variables";
 @import "./theme";
 
-body {
+.excalidraw {
-  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%;
+  display: flex;
-  user-select: none;
+  position: fixed;
-  width: 100vw;
+  top: 0;
-  height: 100vh;
+  bottom: 0;
-}
+  left: 0;
-[contenteditable] {
+  right: 0;
-  user-select: auto;
-  cursor: text;
-}
 
-a {
+  a {
     font-weight: 500;
     text-decoration: none;
     color: $oc-blue-7; /* OC Blue 7 */
@@ -25,9 +18,9 @@ a {
     &:hover {
       text-decoration: underline;
     }
-}
+  }
 
-canvas {
+  canvas {
     touch-action: none;
     user-select: none;
 
@@ -37,37 +30,31 @@ canvas {
     image-rendering: pixelated; // chromium
     // NOTE: must be declared *after* the above
     image-rendering: -moz-crisp-edges; // FF
+  }
 
-  .Appearance_dark & {
+  &.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);
     }
-}
+  }
 
-.excalidraw {
+  .FixedSideContainer {
-  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);
-}
+  }
 
-.panelRow {
+  .panelRow {
     display: flex;
     justify-content: space-between;
-}
+  }
 
-.panelColumn {
+  .panelColumn {
     display: flex;
     flex-direction: column;
 
@@ -128,22 +115,22 @@ canvas {
       padding: 0;
       border: none;
     }
-}
+  }
 
-.divider {
+  .divider {
     width: 1px;
     background-color: $oc-gray-2;
     margin: 1px;
-}
+  }
 
-.buttonList label:focus-within,
+  .buttonList label:focus-within,
-input:focus {
+  input:focus {
     outline: transparent;
     box-shadow: 0 0 0 2px var(--focus-highlight-color);
-}
+  }
 
-button,
+  button,
-.buttonList label {
+  .buttonList label {
     user-select: none;
     background-color: var(--button-gray-1);
     border: 0;
@@ -170,20 +157,22 @@ button,
     &:disabled {
       cursor: not-allowed;
     }
-}
+  }
 
-.active,
+  .active,
-.buttonList label.active {
+  .buttonList label.active {
     background-color: var(--button-gray-2);
+
     &:hover {
       background-color: var(--button-gray-2);
     }
+
     &:active {
       background-color: var(--button-gray-3);
     }
-}
+  }
 
-.App-bottom-bar {
+  .App-bottom-bar {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -209,52 +198,54 @@ button,
       flex-direction: column;
       pointer-events: initial;
     }
-}
+  }
 
-.App-toolbar {
+  .App-toolbar {
     width: 100%;
 
     box-sizing: border-box;
-}
+  }
-.App-toolbar-content {
+
+  .App-toolbar-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
-}
+  }
-.App-mobile-menu {
+
+  .App-mobile-menu {
     width: 100%;
     overflow-x: visible;
     overflow-y: auto;
     box-sizing: border-box;
     margin-bottom: var(--bar-padding);
-}
+  }
 
-.App-menu {
+  .App-menu {
     display: grid;
     color: var(--icon-fill-color);
-}
+  }
 
-.App-menu_top {
+  .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 > * {
+  .App-menu_top > * {
     pointer-events: all;
-}
+  }
 
-.App-menu_top > *:first-child {
+  .App-menu_top > *:first-child {
     justify-self: flex-start;
-}
+  }
 
-.App-menu_top > *:last-child {
+  .App-menu_top > *:last-child {
     justify-self: flex-end;
-}
+  }
 
-.App-menu_bottom {
+  .App-menu_bottom {
     position: absolute;
     bottom: 0;
     grid-template-columns: 1fr auto 1fr;
@@ -267,6 +258,7 @@ button,
     :root[dir="ltr"] & {
       left: 0.25rem;
     }
+
     :root[dir="rtl"] & {
       right: 0.25rem;
     }
@@ -280,36 +272,36 @@ button,
     section {
       display: flex;
     }
-}
+  }
 
-.App-menu_bottom > * {
+  .App-menu_bottom > * {
     pointer-events: all;
-}
+  }
 
-.App-menu_bottom > *:first-child {
+  .App-menu_bottom > *:first-child {
     justify-self: flex-start;
-}
+  }
 
-.App-menu_bottom > *:last-child {
+  .App-menu_bottom > *:last-child {
     justify-self: flex-end;
-}
+  }
 
-.App-menu_left {
+  .App-menu_left {
     grid-template-rows: 1fr auto 1fr;
     height: 100%;
-}
+  }
 
-.App-menu_right {
+  .App-menu_right {
     grid-template-rows: 1fr;
     height: 100%;
-}
+  }
 
-.App-menu__left {
+  .App-menu__left {
     overflow-y: auto;
     max-height: calc(100vh - 236px);
-}
+  }
 
-.ErrorSplash {
+  .ErrorSplash {
     min-height: 100vh;
     padding: 20px 0;
     overflow: auto;
@@ -342,6 +334,7 @@ button,
     .bigger button {
       font-size: 1.1em;
     }
+
     .smaller,
     .smaller button {
       font-size: 0.9em;
@@ -359,9 +352,9 @@ button,
         font-size: 0.8em;
       }
     }
-}
+  }
 
-.dropdown-select {
+  .dropdown-select {
     height: 1.5rem;
     padding: 0;
     padding-inline-start: 0.5rem;
@@ -376,9 +369,11 @@ button,
     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 {
@@ -392,24 +387,27 @@ button,
     &:active {
       background-color: var(--button-gray-2);
     }
+
     &.dropdown-select--floating {
       position: absolute;
       margin: 0.5em;
     }
-}
+  }
 
-.dropdown-select__language.dropdown-select--floating {
+  .dropdown-select__language.dropdown-select--floating {
     position: absolute;
     bottom: 10px;
+
     :root[dir="ltr"] & {
       right: 44px;
     }
+
     :root[dir="rtl"] & {
       left: 44px;
     }
-}
+  }
 
-.zIndexButton {
+  .zIndexButton {
     margin: 0 5px;
     padding: 5px;
     display: inline-flex;
@@ -420,31 +418,33 @@ button,
       width: 18px;
       height: 18px;
     }
-}
+  }
 
-.scroll-back-to-content {
+  .scroll-back-to-content {
     color: var(--popup-text-color);
     position: fixed;
     left: 50%;
     bottom: 30px;
     transform: translateX(-50%);
     padding: 10px 20px;
-}
+  }
 
-.help-icon {
+  .help-icon {
     position: absolute;
     cursor: pointer;
     fill: $oc-gray-6;
     bottom: 14px;
+
     :root[dir="ltr"] & {
       right: 14px;
     }
+
     :root[dir="rtl"] & {
       left: 14px;
     }
-}
+  }
 
-@media #{$media-query} {
+  @media #{$media-query} {
     aside {
       display: none;
     }
@@ -452,27 +452,29 @@ button,
       bottom: calc(80px + var(--sab, 0px));
       z-index: -1;
     }
-}
+  }
 
-.rtl-mirror {
+  .rtl-mirror {
     :root[dir="rtl"] & {
       transform: scaleX(-1);
     }
-}
+  }
 
-.github-corner {
+  .github-corner {
     position: absolute;
     top: 0;
     z-index: 2;
+
     :root[dir="ltr"] & {
       right: 0;
     }
+
     :root[dir="rtl"] & {
       left: 0;
     }
-}
+  }
 
-.zen-mode-visibility {
+  .zen-mode-visibility {
     visibility: visible;
     opacity: 1;
     height: auto;
@@ -486,16 +488,17 @@ button,
       width: 0;
       transition: opacity 0.5s;
     }
-}
+  }
 
-.disable-pointerEvents {
+  .disable-pointerEvents {
     pointer-events: none !important;
-}
+  }
 
-@media print {
+  @media print {
     .App-bottom-bar,
     .FixedSideContainer,
     .layer-ui__wrapper {
       display: none;
     }
+  }
 }

src/css/theme.scss

@@ -37,11 +37,16 @@
   --popup-text-inverted-color: #{$oc-white};
 }
 
-:root.Appearance_dark {
+.excalidraw {
-  background-color: #000;
+  &.Appearance_dark {
-}
+    background: #000;
 
-.Appearance_dark {
+    &.Appearance_dark-background-none {
+      background: none;
+    }
+  }
+
+  &.Appearance_dark {
     --text-color-primary: #{$oc-gray-4};
     --bg-color-island: #1e1e1e;
     --popup-background-color: #2c2c2c;
@@ -69,4 +74,5 @@
     --popup-secondary-background-color: #222;
     --popup-text-color: #{$oc-gray-4};
     --popup-text-inverted-color: #2c2c2c;
+  }
 }