@rogieking/figui3 6.9.9 → 6.11.0

package/fig-editor.css

@@ -78,12 +78,6 @@ fig-fill-picker {
   width: 240px;
   padding: 0;
 
-  & > fig-header {
-    padding: var(--spacer-2);
-    min-width: 0;
-    overflow: hidden;
-  }
-
   fig-tab {
     font-size: 0.6875rem;
     padding: var(--spacer-1) var(--spacer-1);
@@ -91,12 +85,6 @@ fig-fill-picker {
   & > fig-content {
     padding-bottom: var(--spacer-2-5);
   }
-  .fig-fill-picker-type-label {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    color: var(--figma-color-text);
-    padding: var(--spacer-1) var(--spacer-2);
-  }
 
   .fig-fill-picker-gamut {
     margin-left: auto;

package/fig-editor.js

@@ -1439,28 +1439,6 @@ class FigFillPicker extends HTMLElement {
       <fig-preview class="fig-fill-picker-gradient-preview">
         <fig-input-gradient class="fig-fill-picker-gradient-bar-input" aria-label="Gradient stops" edit="true" mode="tip" size="large" value='${JSON.stringify({ type: "gradient", gradient: gradientToValueShape(this.#gradient) })}'></fig-input-gradient>
       </fig-preview>
-      <fig-field class="fig-fill-picker-gradient-interpolation">
-        <label>Mixing</label>
-        <fig-dropdown class="fig-fill-picker-gradient-space" label="Gradient mixing" full ${expAttr} value="${
-          this.#gradient.interpolationSpace === "oklch"
-            ? `oklch-${this.#gradient.hueInterpolation || "shorter"}`
-            : this.#gradient.interpolationSpace
-        }">
-          <optgroup label="sRGB">
-            <option value="srgb">Classic</option>
-            <option value="srgb-linear">Linear</option>
-          </optgroup>
-          <optgroup label="OKLab">
-            <option value="oklab">Perceptual</option>
-          </optgroup>
-          <optgroup label="OKLCH">
-            <option value="oklch-shorter">Shorter hue</option>
-            <option value="oklch-longer">Longer hue</option>
-            <option value="oklch-increasing">Increasing hue</option>
-            <option value="oklch-decreasing">Decreasing hue</option>
-          </optgroup>
-        </fig-dropdown>
-      </fig-field>
       <div class="fig-fill-picker-gradient-stops">
         <fig-header class="fig-fill-picker-gradient-stops-header" borderless>
           <span>Stops</span>
@@ -1470,6 +1448,32 @@ class FigFillPicker extends HTMLElement {
         </fig-header>
         <div class="fig-fill-picker-gradient-stops-list"></div>
       </div>
+      <div class="fig-fill-picker-gradient-interpolation">
+        <fig-header class="fig-fill-picker-gradient-interpolation-header" borderless>
+          <span>Color interpolation</span>
+        </fig-header>
+        <fig-field class="fig-fill-picker-gradient-interpolation-field">
+          <fig-dropdown class="fig-fill-picker-gradient-space" label="Color interpolation" full ${expAttr} value="${
+            this.#gradient.interpolationSpace === "oklch"
+              ? `oklch-${this.#gradient.hueInterpolation || "shorter"}`
+              : this.#gradient.interpolationSpace
+          }">
+            <optgroup label="sRGB">
+              <option value="srgb">Classic</option>
+              <option value="srgb-linear">Linear</option>
+            </optgroup>
+            <optgroup label="OKLab">
+              <option value="oklab">Perceptual</option>
+            </optgroup>
+            <optgroup label="OKLCH">
+              <option value="oklch-shorter">Shorter hue</option>
+              <option value="oklch-longer">Longer hue</option>
+              <option value="oklch-increasing">Increasing hue</option>
+              <option value="oklch-decreasing">Decreasing hue</option>
+            </optgroup>
+          </fig-dropdown>
+        </fig-field>
+      </div>
     `;
 
     this.#updateGradientUI();

package/fig-lab.css

@@ -15,10 +15,15 @@ fig-field-slider {
   --fig-field-slider-elastic-origin: left center;
   --fig-field-slider-elastic-transition: 0.18s cubic-bezier(0.2, 1.45, 0.35, 1);
   --fig-field-slider-height: 2rem;
+  --fig-field-slider-vertical-padding: var(--spacer-1);
+  --fig-field-slider-horizontal-padding: var(--spacer-3);
   --figma-focus-outline-offset: 1px;
   --fig-field-slider-progress-shadow: inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
   --field-text-shadow: 0 1px 1.5px
     light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
+  --fig-field-slider-fig-slider-height: calc(var(--fig-field-slider-height) - var(--fig-field-slider-vertical-padding) * 2);
+  --fig-field-slider-fig-slider-thumb-height: calc(var(--fig-field-slider-fig-slider-height) - var(--spacer-2-5));
+
   display: block;
   position: relative;
   width: 100%;
@@ -26,6 +31,15 @@ fig-field-slider {
   border-radius: var(--radius-medium);
   transform-origin: var(--fig-field-slider-elastic-origin);
   transition: transform var(--fig-field-slider-elastic-transition);
+  padding-top: var(--fig-field-slider-vertical-padding);
+  padding-bottom: var(--fig-field-slider-vertical-padding);
+  padding-left: var(--fig-field-slider-horizontal-padding);
+  padding-right: var(--fig-field-slider-horizontal-padding);
+
+  &[size="large"]{
+    --fig-field-slider-vertical-padding: 0px;
+    --fig-field-slider-fig-slider-thumb-height: calc(var(--fig-field-slider-fig-slider-height) - var(--spacer-3));
+  }
   
   label {
     pointer-events: none;
@@ -57,7 +71,7 @@ fig-field-slider {
 
   fig-field:not([direction="vertical"]) {
     position: relative;
-    padding-left: var(--spacer-2-5);
+    padding-left: var(--spacer-2);
     display: flex;
     height: 100%;
 
@@ -83,8 +97,8 @@ fig-field-slider {
       inset: 0;
       padding: 0;
       background-color: transparent;
-      --slider-height: 2rem;
-      --slider-field-height: 2rem;
+      --slider-height: var(--fig-field-slider-fig-slider-height);
+      --slider-field-height: calc(var(--fig-field-slider-height) - var(--fig-field-slider-vertical-padding) * 2);
       --slider-thumb-width: var(--spacer-1);
       --slider-thumb-color: light-dark(
         var(--figma-color-text-secondary),
@@ -94,7 +108,7 @@ fig-field-slider {
         var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) *
           min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
       );*/
-      --slider-thumb-height: calc(var(--slider-height) - var(--spacer-3));
+      --slider-thumb-height: var(--fig-field-slider-fig-slider-thumb-height);
       --slider-border-radius: var(--radius-medium);
       --slider-tick-width: 0.125rem;
       --slider-tick-height: var(--spacer-2);
@@ -288,7 +302,7 @@ fig-field-slider {
       background-color: transparent;
       box-shadow: none !important;
       position: absolute;
-      right: var(--spacer-1);
+      right: 0;
       width: fit-content;
       min-width: fit-content;
       max-width: max-content;
@@ -539,10 +553,18 @@ fig-input-oscillator {
 
   .fig-input-oscillator-svg-container {
     border-radius: var(--radius-medium);
-    background: var(--figma-color-bg-secondary);
-    padding: var(--spacer-3) var(--spacer-2);
+    padding: var(--spacer-3) var(--spacer-5);
     margin-bottom: var(--spacer-2);
     overflow: hidden;
+    position: relative;
+
+    &::before{
+      position: absolute;
+      inset: 0 var(--spacer-3);
+      content: "";
+      background: var(--figma-color-bg-secondary);
+      border-radius: var(--radius-medium);
+    }
 
     &:is(:hover, :active, :focus, :focus-visible, :focus-within) {
       overflow: visible;
@@ -557,6 +579,8 @@ fig-input-oscillator {
     width: 100%;
     aspect-ratio: var(--aspect-ratio);
     overflow: visible;
+    position: relative;
+    z-index: 1;
 
     .fig-input-oscillator-handle{
       opacity: 0;
@@ -612,59 +636,60 @@ fig-input-oscillator {
     }
   }
 
+  .fig-input-oscillator-frequency-handle {
+    cursor: ew-resize;
+
+    fig-handle,
+    fig-handle:hover,
+    fig-handle .fig-handle-hit-area,
+    fig-handle:hover .fig-handle-hit-area,
+    fig-handle:is(:active, .active, .dragging),
+    fig-handle:is(:active, .active, .dragging) .fig-handle-hit-area {
+      cursor: ew-resize !important;
+    }
+  }
+
+  .fig-input-oscillator-amplitude-handle {
+    cursor: ns-resize;
+
+    fig-handle,
+    fig-handle:hover,
+    fig-handle .fig-handle-hit-area,
+    fig-handle:hover .fig-handle-hit-area,
+    fig-handle:is(:active, .active, .dragging),
+    fig-handle:is(:active, .active, .dragging) .fig-handle-hit-area {
+      cursor: ns-resize !important;
+    }
+  }
+
   .fig-input-oscillator-waves {
     display: flex;
     flex-direction: column;
-    gap: var(--spacer-2);
+    gap: 0;
   }
 
   .fig-input-oscillator-wave {
-    padding: 0;
-
-    > .fig-input-oscillator-wave-summary {
-      min-height: var(--control-height);
-      padding: 0;
-
-      > label {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--spacer-1);
-        min-width: 0;
+    margin-bottom: 0;
 
-        > svg {
-          flex: 0 0 auto;
-        }
-      }
-
-      > .fig-input-oscillator-remove-button {
-        margin-left: auto;
+    > fig-header {
+      .fig-input-oscillator-remove-button,
+      .fig-input-oscillator-add-type-button {
+        flex-shrink: 0;
       }
     }
   }
 
   .fig-input-oscillator-field {
-    --fig-field-left-padding: 0;
-    --fig-field-right-padding: 0;
-
-    > fig-slider {
-      min-width: 0;
-    }
-  }
-
-  .fig-input-oscillator-add-wave {
-    display: grid;
-    grid-template-columns: auto;
-    justify-content: end;
     width: 100%;
+  }
 
-    > fig-button[type="select"] {
-      > fig-dropdown,
-      > fig-dropdown > select {
-        width: 100%;
-        height: 100%;
-        min-width: 100%;
-        padding: 0;
-      }
+  .fig-input-oscillator-add-type-button {
+    > fig-dropdown,
+    > fig-dropdown > select {
+      width: 100%;
+      height: 100%;
+      min-width: 100%;
+      padding: 0;
     }
   }
 
@@ -674,3 +699,52 @@ fig-input-oscillator {
   }
 }
 
+/* Reorder */
+fig-reorder {
+  display: contents;
+}
+
+fig-reorder:not([handle]):not([disabled]):not([disabled="false"]) > [data-reorder-item] {
+  cursor: grab;
+}
+
+fig-reorder:not([handle]):not([disabled]):not([disabled="false"]) > [data-reorder-item] > fig-header,
+fig-reorder:not([handle]):not([disabled]):not([disabled="false"]) > [data-reorder-item] > fig-header *,
+fig-reorder:not([handle]):not([disabled]):not([disabled="false"]) > [data-reorder-item] > label {
+  cursor: grab;
+}
+
+fig-reorder > .dragging {
+  opacity: 0.6;
+}
+
+[data-reorder-handle] {
+  cursor: grab;
+}
+
+fig-reorder[disabled]:not([disabled="false"]) [data-reorder-handle] {
+  cursor: inherit;
+}
+
+body.fig-reorder-dragging,
+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: 10000;
+  background: var(--figma-color-border-strong);
+}
+
+.fig-reorder-indicator[data-axis="vertical"] {
+  height: 2px;
+}
+
+.fig-reorder-indicator[data-axis="horizontal"] {
+  width: 2px;
+}
+