@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-a38e82f

package/dist/browser/dev/index.css

@@ -242,119 +242,6 @@
   height: var(--default-button-size);
 }
 
-/* components/Tooltip.scss */
-:export {
-  themeFilter: invert(93%) hue-rotate(180deg);
-  rightSidebarWidth: 302px;
-}
-.excalidraw-tooltip {
-  --ui-font:
-    Assistant,
-    system-ui,
-    BlinkMacSystemFont,
-    -apple-system,
-    Segoe UI,
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif;
-  font-family: var(--ui-font);
-  position: fixed;
-  z-index: var(--zIndex-popup);
-  padding: 8px;
-  border-radius: 6px;
-  box-sizing: border-box;
-  pointer-events: none;
-  word-wrap: break-word;
-  background: #000000;
-  line-height: 1.5;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 500;
-  color: #ffffff;
-  display: none;
-}
-.excalidraw-tooltip.excalidraw-tooltip--visible {
-  display: block;
-}
-.excalidraw-tooltip-wrapper {
-  display: flex;
-}
-.excalidraw-tooltip-icon {
-  width: 0.9em;
-  height: 0.9em;
-  margin-left: 5px;
-  margin-top: 1px;
-  display: flex;
-}
-.excalidraw--mobile.excalidraw-tooltip-icon {
-  display: none;
-}
-
-/* element/Hyperlink.scss */
-:export {
-  themeFilter: invert(93%) hue-rotate(180deg);
-  rightSidebarWidth: 302px;
-}
-.excalidraw-hyperlinkContainer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: absolute;
-  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.3);
-  z-index: var(--zIndex-hyperlinkContainer);
-  background: var(--island-bg-color);
-  border-radius: var(--border-radius-md);
-  box-sizing: border-box;
-  min-height: 42px;
-}
-.excalidraw-hyperlinkContainer-input,
-.excalidraw-hyperlinkContainer button {
-  z-index: 100;
-}
-.excalidraw-hyperlinkContainer-input,
-.excalidraw-hyperlinkContainer-link {
-  height: 24px;
-  padding: 0 8px;
-  line-height: 24px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  font-family: var(--ui-font);
-}
-.excalidraw-hyperlinkContainer-input {
-  width: 18rem;
-  border: none;
-  background-color: transparent;
-  color: var(--text-primary-color);
-  outline: none;
-  border: none;
-  box-shadow: none !important;
-}
-.excalidraw-hyperlinkContainer-link {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 15rem;
-}
-.excalidraw-hyperlinkContainer button {
-  color: #228be6;
-  background-color: transparent !important;
-  font-weight: 500;
-}
-.excalidraw-hyperlinkContainer button.excalidraw-hyperlinkContainer--remove {
-  color: #c92a2a;
-}
-.excalidraw-hyperlinkContainer--remove .ToolIcon__icon svg {
-  color: #fa5252;
-}
-.excalidraw-hyperlinkContainer .ToolIcon__icon {
-  width: 2rem;
-  height: 2rem;
-}
-.excalidraw-hyperlinkContainer__buttons {
-  flex: 0 0 auto;
-}
-
 /* components/EyeDropper.scss */
 .excalidraw .excalidraw-eye-dropper-container,
 .excalidraw .excalidraw-eye-dropper-backdrop {
@@ -726,6 +613,7 @@
   cursor: pointer;
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
   background-color: var(--swatch-color) !important;
   overflow: hidden;
   position: relative;
@@ -932,6 +820,55 @@
   color: #000000;
 }
 
+/* components/Tooltip.scss */
+:export {
+  themeFilter: invert(93%) hue-rotate(180deg);
+  rightSidebarWidth: 302px;
+}
+.excalidraw-tooltip {
+  --ui-font:
+    Assistant,
+    system-ui,
+    BlinkMacSystemFont,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-family: var(--ui-font);
+  position: fixed;
+  z-index: var(--zIndex-popup);
+  padding: 8px;
+  border-radius: 6px;
+  box-sizing: border-box;
+  pointer-events: none;
+  word-wrap: break-word;
+  background: #000000;
+  line-height: 1.5;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 500;
+  color: #ffffff;
+  display: none;
+}
+.excalidraw-tooltip.excalidraw-tooltip--visible {
+  display: block;
+}
+.excalidraw-tooltip-wrapper {
+  display: flex;
+}
+.excalidraw-tooltip-icon {
+  width: 0.9em;
+  height: 0.9em;
+  margin-left: 5px;
+  margin-top: 1px;
+  display: flex;
+}
+.excalidraw--mobile.excalidraw-tooltip-icon {
+  display: none;
+}
+
 /* components/TextInput.scss */
 :export {
   themeFilter: invert(93%) hue-rotate(180deg);
@@ -1077,6 +1014,70 @@
   cursor: auto;
 }
 
+/* components/hyperlink/Hyperlink.scss */
+:export {
+  themeFilter: invert(93%) hue-rotate(180deg);
+  rightSidebarWidth: 302px;
+}
+.excalidraw-hyperlinkContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.3);
+  z-index: var(--zIndex-hyperlinkContainer);
+  background: var(--island-bg-color);
+  border-radius: var(--border-radius-md);
+  box-sizing: border-box;
+  min-height: 42px;
+}
+.excalidraw-hyperlinkContainer-input,
+.excalidraw-hyperlinkContainer button {
+  z-index: 100;
+}
+.excalidraw-hyperlinkContainer-input,
+.excalidraw-hyperlinkContainer-link {
+  height: 24px;
+  padding: 0 8px;
+  line-height: 24px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  font-family: var(--ui-font);
+}
+.excalidraw-hyperlinkContainer-input {
+  width: 18rem;
+  border: none;
+  background-color: transparent;
+  color: var(--text-primary-color);
+  outline: none;
+  border: none;
+  box-shadow: none !important;
+}
+.excalidraw-hyperlinkContainer-link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 15rem;
+}
+.excalidraw-hyperlinkContainer button {
+  color: #228be6;
+  background-color: transparent !important;
+  font-weight: 500;
+}
+.excalidraw-hyperlinkContainer button.excalidraw-hyperlinkContainer--remove {
+  color: #c92a2a;
+}
+.excalidraw-hyperlinkContainer--remove .ToolIcon__icon svg {
+  color: #fa5252;
+}
+.excalidraw-hyperlinkContainer .ToolIcon__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.excalidraw-hyperlinkContainer__buttons {
+  flex: 0 0 auto;
+}
+
 /* components/ContextMenu.scss */
 :export {
   themeFilter: invert(93%) hue-rotate(180deg);
@@ -1381,6 +1382,7 @@
   cursor: pointer;
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
   width: var(--lg-button-size);
   height: var(--lg-button-size);
   --background: var(--color-surface-mid);
@@ -2335,6 +2337,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  user-select: none;
 }
 .excalidraw .ImageExportModal h3 {
   font-family: "Assistant";
@@ -2474,22 +2477,40 @@
   color: var(--text-color);
   background-color: var(--back-color);
   border-color: var(--border-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  flex-wrap: nowrap;
   border-radius: 0.5rem;
   border-width: 1px;
   border-style: solid;
-  font-family: "Assistant";
+  font-family: var(--font-family);
   user-select: none;
   transition: all 150ms ease-out;
 }
+.excalidraw .ExcButton .Spinner {
+  --spinner-color: var(--color-surface-lowest);
+  position: absolute;
+  visibility: visible;
+}
+.excalidraw .ExcButton[disabled] {
+  pointer-events: none;
+}
+.excalidraw .ExcButton[disabled] .ExcButton__contents {
+  visibility: hidden;
+}
+.excalidraw .ExcButton,
+.excalidraw .ExcButton__contents {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  position: relative;
+}
 .excalidraw .ExcButton--color-primary.ExcButton--variant-filled {
   --text-color: var(--color-surface-lowest);
   --back-color: var(--color-primary);
 }
+.excalidraw .ExcButton--color-primary.ExcButton--variant-filled .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-primary.ExcButton--variant-filled:hover {
   --back-color: var(--color-brand-hover);
 }
@@ -2499,9 +2520,13 @@
 .excalidraw .ExcButton--color-primary.ExcButton--variant-outlined,
 .excalidraw .ExcButton--color-primary.ExcButton--variant-icon {
   --text-color: var(--color-primary);
-  --border-color: var(--color-border-outline);
+  --border-color: var(--color-primary);
   --back-color: transparent;
 }
+.excalidraw .ExcButton--color-primary.ExcButton--variant-outlined .Spinner,
+.excalidraw .ExcButton--color-primary.ExcButton--variant-icon .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-primary.ExcButton--variant-outlined:hover,
 .excalidraw .ExcButton--color-primary.ExcButton--variant-icon:hover {
   --text-color: var(--color-brand-hover);
@@ -2516,6 +2541,9 @@
   --text-color: var(--color-danger-text);
   --back-color: var(--color-danger-dark);
 }
+.excalidraw .ExcButton--color-danger.ExcButton--variant-filled .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-danger.ExcButton--variant-filled:hover {
   --back-color: var(--color-danger-darker);
 }
@@ -2528,6 +2556,10 @@
   --border-color: var(--color-danger);
   --back-color: transparent;
 }
+.excalidraw .ExcButton--color-danger.ExcButton--variant-outlined .Spinner,
+.excalidraw .ExcButton--color-danger.ExcButton--variant-icon .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-danger.ExcButton--variant-outlined:hover,
 .excalidraw .ExcButton--color-danger.ExcButton--variant-icon:hover {
   --text-color: var(--color-danger-darkest);
@@ -2542,6 +2574,9 @@
   --text-color: var(--island-bg-color);
   --back-color: var(--color-gray-50);
 }
+.excalidraw .ExcButton--color-muted.ExcButton--variant-filled .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-muted.ExcButton--variant-filled:hover {
   --back-color: var(--color-gray-60);
 }
@@ -2554,6 +2589,10 @@
   --border-color: var(--color-muted);
   --back-color: var(--island-bg-color);
 }
+.excalidraw .ExcButton--color-muted.ExcButton--variant-outlined .Spinner,
+.excalidraw .ExcButton--color-muted.ExcButton--variant-icon .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-muted.ExcButton--variant-outlined:hover,
 .excalidraw .ExcButton--color-muted.ExcButton--variant-icon:hover {
   --text-color: var(--color-muted-background-darker);
@@ -2568,6 +2607,9 @@
   --text-color: black;
   --back-color: var(--color-warning-dark);
 }
+.excalidraw .ExcButton--color-warning.ExcButton--variant-filled .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-warning.ExcButton--variant-filled:hover {
   --back-color: var(--color-warning-darker);
 }
@@ -2580,6 +2622,10 @@
   --border-color: var(--color-warning-dark);
   --back-color: var(--input-bg-color);
 }
+.excalidraw .ExcButton--color-warning.ExcButton--variant-outlined .Spinner,
+.excalidraw .ExcButton--color-warning.ExcButton--variant-icon .Spinner {
+  --spinner-color: var(--text-color);
+}
 .excalidraw .ExcButton--color-warning.ExcButton--variant-outlined:hover,
 .excalidraw .ExcButton--color-warning.ExcButton--variant-icon:hover {
   --text-color: var(--color-warning-darker);
@@ -2595,17 +2641,21 @@
   font-size: 0.875rem;
   min-height: 3rem;
   padding: 0.5rem 1.5rem;
-  gap: 0.75rem;
   letter-spacing: 0.4px;
 }
+.excalidraw .ExcButton--size-large .ExcButton__contents {
+  gap: 0.75rem;
+}
 .excalidraw .ExcButton--size-medium {
   font-weight: 600;
   font-size: 0.75rem;
   min-height: 2.5rem;
   padding: 0.5rem 1rem;
-  gap: 0.5rem;
   letter-spacing: normal;
 }
+.excalidraw .ExcButton--size-medium .ExcButton__contents {
+  gap: 0.5rem;
+}
 .excalidraw .ExcButton--variant-icon {
   padding: 0.5rem 0.75rem;
   width: 3rem;
@@ -2959,6 +3009,11 @@
 .excalidraw .UserList__more--is-current-user {
   cursor: auto;
 }
+.excalidraw .UserList__collaborator-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 .excalidraw .UserList__collaborator-follow-status-icon {
   margin-left: auto;
   flex: 0 0 auto;
@@ -3425,6 +3480,7 @@
   cursor: pointer;
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
 }
 .excalidraw .excalidraw-button svg {
   width: var(--button-width, var(--lg-icon-size));
@@ -3470,6 +3526,7 @@
   cursor: pointer;
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
   border: none;
   box-shadow: 0 0 0 1px var(--color-surface-lowest);
   background-color: var(--color-surface-low);
@@ -3517,6 +3574,7 @@
 }
 .excalidraw .default-sidebar-trigger .sidebar-trigger__label {
   display: block;
+  white-space: nowrap;
 }
 .excalidraw.excalidraw--mobile .default-sidebar-trigger .sidebar-trigger__label {
   display: none;
@@ -3595,6 +3653,7 @@
   cursor: pointer;
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
   --button-bg: transparent;
   border: 0 !important;
   width: var(--lg-button-size);
@@ -4370,8 +4429,8 @@
   }
 }
 
-/* components/LaserTool/LaserToolOverlay.scss */
-.excalidraw .LaserToolOverlay {
+/* components/SVGLayer.scss */
+.excalidraw .SVGLayer {
   pointer-events: none;
   width: 100vw;
   height: 100vh;
@@ -4380,10 +4439,12 @@
   left: 0;
   z-index: 2;
 }
-.excalidraw .LaserToolOverlay .LaserToolOverlayCanvas {
+.excalidraw .SVGLayer svg {
   image-rendering: auto;
   overflow: visible;
   position: absolute;
+  width: 100%;
+  height: 100%;
   top: 0;
   left: 0;
 }
@@ -4907,6 +4968,7 @@
   cursor: pointer;
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
   padding: 0;
 }
 .excalidraw .buttonList label svg,
@@ -5157,6 +5219,7 @@
   cursor: pointer;
   background-color: var(--button-bg, var(--island-bg-color));
   color: var(--button-color, var(--color-on-surface));
+  font-family: var(--ui-font);
   border: none;
   box-shadow: 0 0 0 1px var(--color-surface-lowest);
   background-color: var(--color-surface-low);
@@ -5743,7 +5806,7 @@
 }
 .excalidraw .collab-button {
   --button-bg: var(--color-primary);
-  --button-color: white;
+  --button-color: var(--color-surface-lowest);
   --button-border: var(--color-primary);
   --button-width: var(--lg-button-size);
   --button-height: var(--lg-button-size);
@@ -5765,9 +5828,6 @@
   background-color: #0fb884;
   border-color: #0fb884;
 }
-.excalidraw.theme--dark .collab-button {
-  color: var(--color-gray-90);
-}
 .excalidraw .CollabButton.is-collaborating {
   background-color: var(--button-special-active-bg-color);
 }