@rogieking/figui3 11.1.6 → 11.2.1

package/fig-editor.css

@@ -139,6 +139,32 @@ dialog[is="fig-toast"] {
   }
 }
 
+/* Palette Editor */
+.fig-palette-editor-popup {
+  width: 15rem;
+  padding: 0;
+  pointer-events: auto;
+
+  & > fig-content {
+    padding-top: 0;
+  }
+}
+
+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;
@@ -304,7 +330,7 @@ fig-fill-picker {
     aspect-ratio: auto;
     width: calc(100% - var(--spacer-3) * 2);
     margin: var(--spacer-2) var(--spacer-3);
-    margin-top: calc(var(--spacer-4) + var(--spacer-1));
+    margin-top: var(--spacer-4);
     margin-bottom:0;
     background: transparent;
     &::after{
@@ -312,19 +338,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 +347,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 +451,6 @@ fig-fill-picker {
   .fig-fill-picker-gradient-stops-list {
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-1);
 
     fig-reorder {
       display: contents;
@@ -889,3 +898,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;
+    }
+  }