@excalidraw/excalidraw 0.17.1-890ed9f → 0.17.1-96eeec5

package/dist/browser/dev/index.css

@@ -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 {
@@ -2201,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;
@@ -2224,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);
@@ -2302,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;
@@ -2321,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%);
@@ -3233,55 +3252,6 @@
   color: var(--color-gray-60);
 }
 
-/* components/Stats.scss */
-:export {
-  themeFilter: invert(93%) hue-rotate(180deg);
-  rightSidebarWidth: 302px;
-}
-.excalidraw .Stats {
-  position: absolute;
-  top: 64px;
-  right: 12px;
-  font-size: 12px;
-  z-index: 10;
-  pointer-events: var(--ui-pointerEvents);
-}
-.excalidraw .Stats h3 {
-  margin: 0 24px 8px 0;
-  white-space: nowrap;
-}
-.excalidraw .Stats .close {
-  float: right;
-  height: 16px;
-  width: 16px;
-  cursor: pointer;
-}
-.excalidraw .Stats .close svg {
-  width: 100%;
-  height: 100%;
-}
-.excalidraw .Stats table {
-  width: 100%;
-}
-.excalidraw .Stats table th {
-  border-bottom: 1px solid var(--input-border-color);
-  padding: 4px;
-}
-.excalidraw .Stats table tr td:nth-child(2) {
-  min-width: 24px;
-  text-align: right;
-}
-:root[dir=rtl] .excalidraw .Stats {
-  left: 12px;
-  right: initial;
-}
-:root[dir=rtl] .excalidraw .Stats h3 {
-  margin: 0 0 8px 24px;
-}
-:root[dir=rtl] .excalidraw .Stats .close {
-  float: left;
-}
-
 /* components/PasteChartDialog.scss */
 :export {
   themeFilter: invert(93%) hue-rotate(180deg);
@@ -4215,6 +4185,84 @@
 .excalidraw .layer-ui__wrapper__top-right > * {
   pointer-events: var(--ui-pointerEvents);
 }
+.excalidraw .layer-ui__wrapper__top-right > .Stats {
+  width: 204px;
+  position: absolute;
+  top: 60px;
+  font-size: 12px;
+  z-index: var(--zIndex-layerUI);
+  pointer-events: var(--ui-pointerEvents);
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .title h2 {
+  margin: 0;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .sectionContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .elementType {
+  font-size: 12px;
+  font-weight: 700;
+  margin-top: 8px;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .elementsCount {
+  width: 100%;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .statsItem {
+  margin-top: 8px;
+  width: 100%;
+  margin-bottom: 4px;
+  display: grid;
+  gap: 4px;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .statsItem .label {
+  margin-right: 4px;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats h3 {
+  white-space: nowrap;
+  margin: 0;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .close {
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .close svg {
+  width: 100%;
+  height: 100%;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats table {
+  width: 100%;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats table th {
+  border-bottom: 1px solid var(--input-border-color);
+  padding: 4px;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats table tr td:nth-child(2) {
+  min-width: 24px;
+  text-align: right;
+}
+.excalidraw .layer-ui__wrapper__top-right > .Stats .divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--default-border-color);
+}
+:root[dir=rtl] .excalidraw .layer-ui__wrapper__top-right > .Stats {
+  left: 12px;
+  right: initial;
+}
 .excalidraw .layer-ui__wrapper__footer {
   width: 100%;
 }
@@ -4620,6 +4668,70 @@
   border-radius: 4px;
 }
 
+/* components/Stats/DragInput.scss */
+.excalidraw .drag-input-container {
+  display: flex;
+  width: 100%;
+}
+.excalidraw .drag-input-container:focus-within {
+  box-shadow: 0 0 0 1px var(--color-primary-darkest);
+  border-radius: var(--border-radius-lg);
+}
+.excalidraw .disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.excalidraw .drag-input-label {
+  flex-shrink: 0;
+  border: 1px solid var(--default-border-color);
+  border-right: 0;
+  width: 2rem;
+  height: 2rem;
+  box-sizing: border-box;
+  color: var(--popup-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+:root[dir=ltr] .excalidraw .drag-input-label {
+  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+}
+:root[dir=rtl] .excalidraw .drag-input-label {
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+  border-right: 1px solid var(--default-border-color);
+  border-left: 0;
+}
+.excalidraw .drag-input {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  font-size: 0.875rem;
+  font-family: inherit;
+  background-color: transparent;
+  color: var(--text-primary-color);
+  border: 0;
+  outline: none;
+  height: 2rem;
+  border: 1px solid var(--default-border-color);
+  border-left: 0;
+  letter-spacing: 0.4px;
+  padding: 0.5rem;
+  padding-left: 0.25rem;
+  appearance: none;
+}
+:root[dir=ltr] .excalidraw .drag-input {
+  border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
+}
+:root[dir=rtl] .excalidraw .drag-input {
+  border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+  border-left: 1px solid var(--default-border-color);
+  border-right: 0;
+}
+.excalidraw .drag-input:focus-visible {
+  box-shadow: none;
+}
+
 /* components/Toast.scss */
 :export {
   themeFilter: invert(93%) hue-rotate(180deg);
@@ -4665,6 +4777,10 @@
 }
 
 /* components/SVGLayer.scss */
+:export {
+  themeFilter: invert(93%) hue-rotate(180deg);
+  rightSidebarWidth: 302px;
+}
 .excalidraw .SVGLayer {
   pointer-events: none;
   width: 100vw;
@@ -4672,7 +4788,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 2;
+  z-index: var(--zIndex-svgLayer);
 }
 .excalidraw .SVGLayer svg {
   image-rendering: auto;
@@ -4878,6 +4994,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;
@@ -4901,7 +5018,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);
@@ -4979,6 +5096,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;
@@ -4998,7 +5116,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%);
@@ -5016,6 +5133,7 @@
 :root {
   --zIndex-canvas: 1;
   --zIndex-interactiveCanvas: 2;
+  --zIndex-svgLayer: 3;
   --zIndex-wysiwyg: 3;
   --zIndex-canvasButtons: 3;
   --zIndex-layerUI: 4;
@@ -5030,6 +5148,11 @@
   --sar: env(safe-area-inset-right);
   --sat: env(safe-area-inset-top);
 }
+body.excalidraw-cursor-resize,
+body.excalidraw-cursor-resize a:hover,
+body.excalidraw-cursor-resize * {
+  cursor: ew-resize;
+}
 .excalidraw {
   --ui-font:
     Assistant,
@@ -5978,9 +6101,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);
 }
@@ -5988,9 +6110,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);
 }
@@ -6009,12 +6130,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);
 }