npm - @excalidraw/excalidraw - Versions diffs - 0.18.0-432a46e → 0.18.0-508de2f3a - Mend

@excalidraw/excalidraw 0.18.0-432a46e → 0.18.0-508de2f3a

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 (437) hide show

package/dist/dev/index.css CHANGED Viewed

@@ -376,7 +376,7 @@
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
   --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
+  --color-surface-mid: #f6f6f9;
   --color-surface-low: #ececf4;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
@@ -470,7 +470,7 @@
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
   --color-logo-text: #e2dfff;
-  --color-surface-high: hsl(245, 10%, 21%);
+  --color-surface-high: #2e2d39;
   --color-surface-low: hsl(240, 8%, 15%);
   --color-surface-mid: hsl(240 6% 10%);
   --color-surface-lowest: hsl(0, 0%, 7%);
@@ -611,14 +611,16 @@
 .excalidraw .color-picker__top-picks {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 .excalidraw .color-picker__button {
-  --radius: 0.25rem;
+  --radius: 4px;
+  --size: 1.375rem;
   padding: 0;
   margin: 0;
-  width: 1.35rem;
-  height: 1.35rem;
-  border: 1px solid var(--color-gray-30);
+  width: var(--size);
+  height: var(--size);
+  border: 0;
   border-radius: var(--radius);
   filter: var(--theme-filter);
   background-color: var(--swatch-color);
@@ -627,26 +629,43 @@
   font-family: inherit;
   box-sizing: border-box;
 }
-.excalidraw .color-picker__button:hover::after {
+.excalidraw .color-picker__button.has-outline {
+  box-shadow: inset 0 0 0 1px #d9d9d9;
+}
+.excalidraw .color-picker__button:hover:not(.active):not(.color-picker__button--large) {
+  transform: scale(1.075);
+}
+.excalidraw .color-picker__button:hover:not(.active).color-picker__button--large::after {
   content: "";
   position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
   box-shadow: 0 0 0 1px var(--color-gray-30);
-  border-radius: calc(var(--radius) + 1px);
+  border-radius: var(--radius);
   filter: var(--theme-filter);
 }
+.excalidraw .color-picker__button .color-picker__button-outline {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.excalidraw .color-picker__button .color-picker__button-outline svg {
+  color: var(--color-gray-60);
+  width: 1.25rem;
+  height: 1.25rem;
+}
 .excalidraw .color-picker__button.active .color-picker__button-outline {
   position: absolute;
-  top: -2px;
-  left: -2px;
-  right: -2px;
-  bottom: -2px;
+  --offset: -1px;
+  top: var(--offset);
+  left: var(--offset);
+  right: var(--offset);
+  bottom: var(--offset);
   box-shadow: 0 0 0 1px var(--color-primary-darkest);
   z-index: 1;
-  border-radius: calc(var(--radius) + 1px);
+  border-radius: var(--radius);
   filter: var(--theme-filter);
 }
 .excalidraw .color-picker__button:focus-visible {
@@ -689,10 +708,11 @@
 }
 .excalidraw .color-picker__button__hotkey-label {
   position: absolute;
-  right: 4px;
-  bottom: 4px;
+  right: 5px;
+  bottom: 3px;
   filter: none;
   font-size: 11px;
+  font-weight: 500;
 }
 .excalidraw .color-picker {
   background: var(--popup-bg-color);
@@ -1160,7 +1180,7 @@
 .excalidraw .range-wrapper {
   position: relative;
   padding-top: 10px;
-  padding-bottom: 30px;
+  padding-bottom: 25px;
 }
 .excalidraw .range-input {
   width: 100%;
@@ -1444,6 +1464,21 @@
   flex: 0 0 auto;
 }
+/* components/ConvertElementTypePopup.scss */
+.excalidraw .ConvertElementTypePopup {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.2rem;
+  border-radius: 0.5rem;
+  background: var(--island-bg-color);
+  box-shadow: var(--shadow-island);
+  padding: 0.5rem;
+}
+.excalidraw .ConvertElementTypePopup:focus {
+  outline: none;
+}
 /* components/DialogActionButton.scss */
 .excalidraw .Dialog__action-button {
   position: relative;
@@ -1675,6 +1710,8 @@
   border-radius: var(--border-radius-lg);
   position: relative;
   transition: box-shadow 0.5s ease-in-out;
+  display: flex;
+  flex-direction: column;
 }
 .excalidraw .dropdown-menu--mobile .dropdown-menu-container.zen-mode {
   box-shadow: none;
@@ -1736,6 +1773,7 @@
   align-items: center;
   cursor: pointer;
   border-radius: var(--border-radius-md);
+  flex: 1 0 auto;
 }
 @media screen and (min-width: 1921px) {
   .excalidraw .dropdown-menu .dropdown-menu-item {
@@ -2508,7 +2546,7 @@
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
   --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
+  --color-surface-mid: #f6f6f9;
   --color-surface-low: #ececf4;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
@@ -2602,7 +2640,7 @@
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
   --color-logo-text: #e2dfff;
-  --color-surface-high: hsl(245, 10%, 21%);
+  --color-surface-high: #2e2d39;
   --color-surface-low: hsl(240, 8%, 15%);
   --color-surface-mid: hsl(240 6% 10%);
   --color-surface-lowest: hsl(0, 0%, 7%);
@@ -2924,6 +2962,7 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
+  overflow: hidden;
 }
 .excalidraw .command-palette-dialog .commands .item-selected {
   background-color: var(--color-surface-mid);
@@ -4086,18 +4125,44 @@
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
+  padding: 0 0.75rem;
   gap: 0.125rem;
 }
+.excalidraw .layer-ui__search .collapsible-items {
+  gap: 2px;
+}
+.excalidraw .layer-ui__search-result-title {
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 700;
+}
+.excalidraw .layer-ui__search-result-title .title-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-right: 0.25rem;
+}
+.excalidraw .layer-ui__search-result-title .title-icon svg g {
+  stroke-width: 1.25;
+}
+.excalidraw .layer-ui__divider {
+  width: 100%;
+  margin-top: 0.25rem;
+  margin-bottom: 1rem;
+  position: relative;
+}
 .excalidraw .layer-ui__result-item {
   display: flex;
   align-items: center;
-  min-height: 2rem;
+  min-height: 1.875rem;
   flex: 0 0 auto;
   padding: 0.25rem 0.75rem;
   cursor: pointer;
   border: 1px solid transparent;
   outline: none;
-  margin: 0 0.75rem;
+  font-size: 16px;
   border-radius: var(--border-radius-md);
 }
 .excalidraw .layer-ui__result-item .text-icon {
@@ -4404,10 +4469,12 @@
 .excalidraw .drag-input-container {
   display: flex;
   width: 100%;
+  border-radius: var(--border-radius-lg);
 }
 .excalidraw .drag-input-container:focus-within {
   box-shadow: 0 0 0 1px var(--color-primary-darkest);
   border-radius: var(--border-radius-md);
+  background: transparent;
 }
 .excalidraw .disabled {
   opacity: 0.5;
@@ -4415,26 +4482,18 @@
 }
 .excalidraw .drag-input-label {
   flex-shrink: 0;
-  border: 1px solid var(--default-border-color);
-  border-right: 0;
-  padding: 0 0.5rem 0 0.75rem;
+  border: 0;
+  padding: 0 0.5rem 0 0.25rem;
   min-width: 1rem;
+  width: 1.5rem;
   height: 2rem;
-  box-sizing: border-box;
+  box-sizing: content-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-md) 0 0 var(--border-radius-md);
-}
-:root[dir=rtl] .excalidraw .drag-input-label {
-  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-  border-right: 1px solid var(--default-border-color);
-  border-left: 0;
-}
 .excalidraw .drag-input {
   box-sizing: border-box;
   width: 100%;
@@ -4446,21 +4505,11 @@
   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-md) var(--border-radius-md) 0;
-}
-:root[dir=rtl] .excalidraw .drag-input {
-  border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-  border-left: 1px solid var(--default-border-color);
-  border-right: 0;
-}
 .excalidraw .drag-input:focus-visible {
   box-shadow: none;
 }
@@ -4505,6 +4554,9 @@
 .exc-stats__row div + div {
   text-align: right;
 }
+.exc-stats__row:empty {
+  display: none;
+}
 .exc-stats__row--heading {
   text-align: center;
   font-weight: bold;
@@ -5274,6 +5326,37 @@
   }
 }
+/* components/UnlockPopup.scss */
+.excalidraw .UnlockPopup {
+  position: absolute;
+  z-index: var(--zIndex-interactiveCanvas);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  background: var(--island-bg-color);
+  box-shadow: var(--shadow-island);
+  padding: 0.8rem;
+  cursor: pointer;
+  color: var(--color-gray-60);
+}
+.excalidraw .UnlockPopup:focus {
+  outline: none;
+}
+.excalidraw .UnlockPopup svg {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-gray-60);
+}
+.excalidraw .UnlockPopup:hover svg {
+  color: var(--color-primary);
+}
+.excalidraw .UnlockPopup:active svg {
+  transform: scale(0.95);
+}
 /* components/footer/FooterCenter.scss */
 .footer-center {
   pointer-events: none;
@@ -5756,7 +5839,7 @@
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
   --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
+  --color-surface-mid: #f6f6f9;
   --color-surface-low: #ececf4;
   --color-surface-lowest: #ffffff;
   --color-on-surface: #1b1b1f;
@@ -5850,7 +5933,7 @@
   --color-muted-background: var(--color-gray-40);
   --color-muted-background-darker: var(--color-gray-20);
   --color-logo-text: #e2dfff;
-  --color-surface-high: hsl(245, 10%, 21%);
+  --color-surface-high: #2e2d39;
   --color-surface-low: hsl(240, 8%, 15%);
   --color-surface-mid: hsl(240 6% 10%);
   --color-surface-lowest: hsl(0, 0%, 7%);
@@ -5973,14 +6056,14 @@ body.excalidraw-cursor-resize * {
   display: flex;
   justify-content: space-between;
 }
-.excalidraw .panelColumn {
+.excalidraw .selected-shape-actions {
   display: flex;
   flex-direction: column;
   row-gap: 0.75rem;
 }
-.excalidraw .panelColumn h3,
-.excalidraw .panelColumn legend,
-.excalidraw .panelColumn .control-label {
+.excalidraw .selected-shape-actions h3,
+.excalidraw .selected-shape-actions legend,
+.excalidraw .selected-shape-actions .control-label {
   margin: 0;
   margin-bottom: 0.25rem;
   font-size: 0.75rem;
@@ -5988,36 +6071,36 @@ body.excalidraw-cursor-resize * {
   font-weight: 400;
   display: block;
 }
-.excalidraw .panelColumn .control-label input {
+.excalidraw .selected-shape-actions .control-label input {
   display: block;
   width: 100%;
 }
-.excalidraw .panelColumn legend {
+.excalidraw .selected-shape-actions legend {
   padding: 0;
 }
-.excalidraw .panelColumn .iconSelectList {
+.excalidraw .selected-shape-actions .iconSelectList {
   flex-wrap: wrap;
   position: relative;
 }
-.excalidraw .panelColumn .buttonList {
+.excalidraw .selected-shape-actions .buttonList {
   flex-wrap: wrap;
   display: flex;
   column-gap: 0.5rem;
   row-gap: 0.5rem;
 }
-.excalidraw .panelColumn .buttonList label {
+.excalidraw .selected-shape-actions .buttonList label {
   font-size: 0.75rem;
 }
-.excalidraw .panelColumn .buttonList input[type=radio],
-.excalidraw .panelColumn .buttonList input[type=button] {
+.excalidraw .selected-shape-actions .buttonList input[type=radio],
+.excalidraw .selected-shape-actions .buttonList input[type=button] {
   opacity: 0;
   position: absolute;
   pointer-events: none;
 }
-.excalidraw .panelColumn .buttonList .iconRow {
+.excalidraw .selected-shape-actions .buttonList .iconRow {
   margin-top: 8px;
 }
-.excalidraw .panelColumn fieldset {
+.excalidraw .selected-shape-actions fieldset {
   margin: 0;
   padding: 0;
   border: none;
@@ -6116,10 +6199,6 @@ body.excalidraw-cursor-resize * {
   left: 0;
   right: 0;
   --bar-padding: calc(4 * var(--space-factor));
-  padding-top: max(var(--bar-padding), var(--sat,0));
-  padding-right: var(--sar, 0);
-  padding-bottom: var(--sab, 0);
-  padding-left: var(--sal, 0);
   z-index: 4;
   display: flex;
   align-items: flex-end;
@@ -6135,9 +6214,6 @@ body.excalidraw-cursor-resize * {
   flex-direction: column;
   pointer-events: var(--ui-pointerEvents);
 }
-.excalidraw .App-bottom-bar > .Island .panelColumn {
-  padding: 8px 8px 0 8px;
-}
 .excalidraw .App-toolbar {
   width: 100%;
 }
@@ -6165,6 +6241,9 @@ body.excalidraw-cursor-resize * {
   box-sizing: border-box;
   margin-bottom: var(--bar-padding);
 }
+.excalidraw .App-mobile-menu .selected-shape-actions {
+  padding: 8px 8px 0 8px;
+}
 .excalidraw .App-menu {
   display: grid;
   color: var(--icon-fill-color);