@rogieking/figui3 11.1.5 → 11.2.0

package/fig-editor.css

@@ -139,6 +139,28 @@ dialog[is="fig-toast"] {
   }
 }
 
+/* Palette Editor */
+.fig-palette-editor-popup {
+  width: 15rem;
+  padding: 0;
+  pointer-events: auto;
+}
+
+fig-palette-editor {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+
+  > fig-reorder {
+    display: contents;
+  }
+
+  .fig-palette-editor-add {
+    width: 100%;
+  }
+}
+
 /* Fill Picker */
 fig-fill-picker {
   display: contents;
@@ -312,19 +334,7 @@ fig-fill-picker {
     }
   }
 
-  fig-field.fig-fill-picker-gradient-header {
-    display: flex;
-    align-items: center;
-    grid-template-columns: unset;
-    grid-template-areas: unset;
-    padding-right: var(--spacer-2);
-    padding-left: var(--spacer-2);
-    gap: var(--spacer-2);
-
-    > *:not(.fig-field-chevron):not(label) {
-      grid-area: unset;
-    }
-
+  fig-header.fig-fill-picker-gradient-header {
     .fig-fill-picker-gradient-type {
       display: flex;
       flex: 0 1 auto;
@@ -333,11 +343,7 @@ fig-fill-picker {
     }
 
     .fig-fill-picker-gradient-actions {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      gap: var(--spacer-1);
-      margin-left: auto;
+      flex: 0 0 auto;
     }
   }
 
@@ -441,7 +447,6 @@ fig-fill-picker {
   .fig-fill-picker-gradient-stops-list {
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-1);
 
     fig-reorder {
       display: contents;
@@ -826,7 +831,8 @@ fig-select::part(listbox) {
 fig-select-options > :is(fig-separator, fig-menu-separator) {
   /* Align labels with select option text after the checkmark column. */
   &[label]:not([label=""]) {
-    --fig-menu-inline-padding: 0 var(--spacer-2) 0 var(--spacer-5);
+    --fig-menu-inline-padding: var(--spacer-3);
+    --fig-separator-padding-inline: var(--spacer-3,0.75rem);
 
     &::before {
       margin-inline: unset;
@@ -888,3 +894,78 @@ fig-select-option {
     visibility: visible;
   }
 }
+
+/* Drag to Reorder */
+  fig-reorder {
+    display: contents;
+
+    &:not([handle]):is(:not([disabled]), [disabled="false"])
+      > [data-reorder-item] {
+      cursor: grab;
+
+      > fig-header,
+      > fig-header *,
+      > label {
+        cursor: grab;
+      }
+    }
+
+    > .dragging {
+      background-color: var(--figma-color-bg-secondary);
+    }
+
+    &[disabled]:not([disabled="false"]) [data-reorder-handle] {
+      cursor: inherit;
+    }
+  }
+
+  [data-reorder-handle] {
+    cursor: grab;
+  }
+
+  body.fig-reorder-dragging {
+    &,
+    & * {
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      cursor: grabbing !important;
+    }
+  }
+
+  .fig-reorder-indicator {
+    position: fixed;
+    pointer-events: none;
+    z-index: 1000000;
+    border-radius: 1px;
+    &::before{
+      content: "";
+      position: absolute;
+      top: 0;
+      left: var(--spacer-1);
+      width: 100%;
+      height: 100%;
+      background: var(--figma-color-border-selected);
+    }
+
+    &.fig-reorder-indicator-ring {
+      &::after{
+        content: "";
+        position: absolute;
+        top: 1px;
+        left: 0;
+        transform: translate(-50%, -50%);
+        width: var(--spacer-2);
+        height: var(--spacer-2);
+        border: 2px solid var(--figma-color-border-selected);
+        border-radius: 50%;
+      }
+    }
+
+    &[data-axis="vertical"] {
+      height: 2px;
+    }
+
+    &[data-axis="horizontal"] {
+      width: 2px;
+    }
+  }