npm - @excalidraw/excalidraw - Versions diffs - 0.17.1-1d71f84 → 0.17.1-1ed53b1 - Mend

@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-1ed53b1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (426) hide show

package/dist/browser/dev/index.css CHANGED Viewed

@@ -94,6 +94,13 @@
 .excalidraw .ToolIcon .ToolIcon__icon:active svg {
   color: var(--color-on-primary-container);
 }
+.excalidraw .ToolIcon .ToolIcon__icon[aria-disabled=true] {
+  background: initial;
+  border: none;
+}
+.excalidraw .ToolIcon .ToolIcon__icon[aria-disabled=true] svg {
+  color: var(--color-disabled);
+}
 .excalidraw .ToolIcon--plain {
   background-color: transparent;
 }
@@ -143,8 +150,7 @@
   font-size: 0.8em;
 }
 .excalidraw .ToolIcon_type_button,
-.excalidraw .Modal .ToolIcon_type_button,
-.excalidraw .ToolIcon_type_button {
+.excalidraw .Modal .ToolIcon_type_button {
   padding: 0;
   border: none;
   margin: 0;
@@ -152,33 +158,45 @@
   background-color: initial;
 }
 .excalidraw .ToolIcon_type_button:focus-visible,
-.excalidraw .Modal .ToolIcon_type_button:focus-visible,
-.excalidraw .ToolIcon_type_button:focus-visible {
+.excalidraw .Modal .ToolIcon_type_button:focus-visible {
   box-shadow: 0 0 0 2px var(--focus-highlight-color);
 }
 .excalidraw .ToolIcon_type_button.ToolIcon--selected,
-.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected,
-.excalidraw .ToolIcon_type_button.ToolIcon--selected {
+.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected {
   background-color: var(--button-gray-2);
 }
 .excalidraw .ToolIcon_type_button.ToolIcon--selected:active,
-.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected:active,
-.excalidraw .ToolIcon_type_button.ToolIcon--selected:active {
+.excalidraw .Modal .ToolIcon_type_button.ToolIcon--selected:active {
   background-color: var(--button-gray-3);
 }
 .excalidraw .ToolIcon_type_button:active,
-.excalidraw .Modal .ToolIcon_type_button:active,
-.excalidraw .ToolIcon_type_button:active {
+.excalidraw .Modal .ToolIcon_type_button:active {
   background-color: var(--button-gray-3);
 }
+.excalidraw .ToolIcon_type_button:disabled,
+.excalidraw .Modal .ToolIcon_type_button:disabled {
+  cursor: default;
+}
+.excalidraw .ToolIcon_type_button:disabled:active,
+.excalidraw .ToolIcon_type_button:disabled:focus-visible,
+.excalidraw .ToolIcon_type_button:disabled:hover,
+.excalidraw .Modal .ToolIcon_type_button:disabled:active,
+.excalidraw .Modal .ToolIcon_type_button:disabled:focus-visible,
+.excalidraw .Modal .ToolIcon_type_button:disabled:hover {
+  background-color: initial;
+  border: none;
+  box-shadow: none;
+}
+.excalidraw .ToolIcon_type_button:disabled svg,
+.excalidraw .Modal .ToolIcon_type_button:disabled svg {
+  color: var(--color-disabled);
+}
 .excalidraw .ToolIcon_type_button--show,
-.excalidraw .Modal .ToolIcon_type_button--show,
-.excalidraw .ToolIcon_type_button--show {
+.excalidraw .Modal .ToolIcon_type_button--show {
   visibility: visible;
 }
 .excalidraw .ToolIcon_type_button--hide,
-.excalidraw .Modal .ToolIcon_type_button--hide,
-.excalidraw .ToolIcon_type_button--hide {
+.excalidraw .Modal .ToolIcon_type_button--hide {
   display: none !important;
 }
 .excalidraw .ToolIcon_type_floating {
@@ -1552,6 +1570,11 @@
   margin-inline-start: auto;
   opacity: 0.5;
 }
+.excalidraw .dropdown-menu .dropdown-menu-item__shortcut--orphaned {
+  text-align: right;
+  font-size: 0.875rem;
+  padding: 0 0.625rem;
+}
 .excalidraw .dropdown-menu .dropdown-menu-item:hover {
   background-color: var(--button-hover-bg);
   text-decoration: none;
@@ -1565,6 +1588,21 @@
   height: 1rem;
   display: block;
 }
+.excalidraw .dropdown-menu .dropdown-menu-item-bare {
+  align-items: center;
+  height: 2rem;
+  justify-content: space-between;
+}
+@media screen and (min-width: 1921px) {
+  .excalidraw .dropdown-menu .dropdown-menu-item-bare {
+    height: 2.25rem;
+  }
+}
+.excalidraw .dropdown-menu .dropdown-menu-item-bare svg {
+  width: 1rem;
+  height: 1rem;
+  display: block;
+}
 .excalidraw .dropdown-menu .dropdown-menu-item-custom {
   margin-top: 0.5rem;
 }
@@ -2181,6 +2219,7 @@
   --color-gray-85: #242424;
   --color-gray-90: #1e1e1e;
   --color-gray-100: #121212;
+  --color-disabled: var(--color-gray-40);
   --color-warning: #fceeca;
   --color-warning-dark: #f5c354;
   --color-warning-darker: #f3ab2c;
@@ -2204,7 +2243,7 @@
   --color-muted-darkest: var(--color-gray-100);
   --color-muted-background: var(--color-gray-80);
   --color-muted-background-darker: var(--color-gray-100);
-  --color-promo: #e70078;
+  --color-promo: var(--color-primary);
   --color-success: #268029;
   --color-success-lighter: #cafccc;
   --color-logo-icon: var(--color-primary);
@@ -2282,6 +2321,7 @@
   --color-primary-light: #4f4d6f;
   --color-primary-light-darker: #43415e;
   --color-primary-hover: #bbb8ff;
+  --color-disabled: var(--color-gray-70);
   --color-text-warning: var(--color-gray-80);
   --color-danger: #ffa8a5;
   --color-danger-dark: #672120;
@@ -2301,7 +2341,6 @@
   --color-muted-darkest: var(--color-gray-20);
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
-  --color-promo: #d297ff;
   --color-logo-text: #e2dfff;
   --color-surface-high: hsl(245, 10%, 21%);
   --color-surface-low: hsl(240, 8%, 15%);
@@ -4645,6 +4684,10 @@
 }
 /* components/SVGLayer.scss */
+:export {
+  themeFilter: invert(93%) hue-rotate(180deg);
+  rightSidebarWidth: 302px;
+}
 .excalidraw .SVGLayer {
   pointer-events: none;
   width: 100vw;
@@ -4652,7 +4695,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 2;
+  z-index: var(--zIndex-svgLayer);
 }
 .excalidraw .SVGLayer svg {
   image-rendering: auto;
@@ -4858,6 +4901,7 @@
   --color-gray-85: #242424;
   --color-gray-90: #1e1e1e;
   --color-gray-100: #121212;
+  --color-disabled: var(--color-gray-40);
   --color-warning: #fceeca;
   --color-warning-dark: #f5c354;
   --color-warning-darker: #f3ab2c;
@@ -4881,7 +4925,7 @@
   --color-muted-darkest: var(--color-gray-100);
   --color-muted-background: var(--color-gray-80);
   --color-muted-background-darker: var(--color-gray-100);
-  --color-promo: #e70078;
+  --color-promo: var(--color-primary);
   --color-success: #268029;
   --color-success-lighter: #cafccc;
   --color-logo-icon: var(--color-primary);
@@ -4959,6 +5003,7 @@
   --color-primary-light: #4f4d6f;
   --color-primary-light-darker: #43415e;
   --color-primary-hover: #bbb8ff;
+  --color-disabled: var(--color-gray-70);
   --color-text-warning: var(--color-gray-80);
   --color-danger: #ffa8a5;
   --color-danger-dark: #672120;
@@ -4978,7 +5023,6 @@
   --color-muted-darkest: var(--color-gray-20);
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
-  --color-promo: #d297ff;
   --color-logo-text: #e2dfff;
   --color-surface-high: hsl(245, 10%, 21%);
   --color-surface-low: hsl(240, 8%, 15%);
@@ -4996,6 +5040,7 @@
 :root {
   --zIndex-canvas: 1;
   --zIndex-interactiveCanvas: 2;
+  --zIndex-svgLayer: 3;
   --zIndex-wysiwyg: 3;
   --zIndex-canvasButtons: 3;
   --zIndex-layerUI: 4;
@@ -5958,9 +6003,8 @@
   text-decoration: none;
   background: var(--button-hover-bg);
 }
-.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut {
-  color: var(--color-gray-50);
-}
+.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut,
+.excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__icon,
 .excalidraw .welcome-screen-menu-item:hover .welcome-screen-menu-item__text {
   color: var(--color-gray-100);
 }
@@ -5968,9 +6012,8 @@
   background: var(--button-hover-bg);
   border-color: var(--color-brand-active);
 }
-.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__shortcut {
-  color: var(--color-gray-50);
-}
+.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__shortcut,
+.excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__icon,
 .excalidraw .welcome-screen-menu-item:active .welcome-screen-menu-item__text {
   color: var(--color-gray-100);
 }
@@ -5989,12 +6032,13 @@
 .excalidraw.theme--dark .welcome-screen-menu-item:hover {
   background-color: var(--color-surface-low);
 }
-.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut {
-  color: var(--color-gray-50);
-}
+.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__icon,
+.excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__shortcut,
 .excalidraw.theme--dark .welcome-screen-menu-item:hover .welcome-screen-menu-item__text {
   color: var(--color-gray-10);
 }
+.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__icon,
+.excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__shortcut,
 .excalidraw.theme--dark .welcome-screen-menu-item:active .welcome-screen-menu-item__text {
   color: var(--color-gray-10);
 }