@rogieking/figui3 6.9.2 → 6.9.4

package/fig-editor.js

@@ -309,7 +309,7 @@ function gradientInterpolationClause(gradient) {
  */
 class FigFillPicker extends HTMLElement {
   #trigger = null;
-  #chit = null;
+  #swatch = null;
   #dialog = null;
   #activeTab = "solid";
   anchorElement = null;
@@ -377,7 +377,7 @@ class FigFillPicker extends HTMLElement {
     requestAnimationFrame(() => {
       this.#setupTrigger();
       this.#parseValue();
-      this.#updateChit();
+      this.#updateSwatch();
     });
   }
 
@@ -405,7 +405,7 @@ class FigFillPicker extends HTMLElement {
     if (this.#video.url && this.#video.url.startsWith("blob:")) {
       URL.revokeObjectURL(this.#video.url);
     }
-    if (this.#chit) this.#chit.removeAttribute("selected");
+    if (this.#swatch) this.#swatch.removeAttribute("selected");
     if (this.#trigger) {
       this.#trigger.removeEventListener("click", this.#boundTriggerClick);
       this.#trigger.removeEventListener("keydown", this.#boundTriggerKeydown);
@@ -423,19 +423,19 @@ class FigFillPicker extends HTMLElement {
     );
 
     if (!child) {
-      // Scenario 1: Empty - create fig-chit
-      this.#chit = document.createElement("fig-chit");
-      this.#chit.setAttribute("background", "#D9D9D9");
-      this.appendChild(this.#chit);
-      this.#trigger = this.#chit;
-    } else if (child.tagName === "FIG-CHIT") {
-      // Scenario 2: Has fig-chit - use and populate it
-      this.#chit = child;
+      // Scenario 1: Empty - create fig-swatch
+      this.#swatch = document.createElement("fig-swatch");
+      this.#swatch.setAttribute("background", "#D9D9D9");
+      this.appendChild(this.#swatch);
+      this.#trigger = this.#swatch;
+    } else if (child.matches("fig-swatch")) {
+      // Scenario 2: Has swatch - use and populate it
+      this.#swatch = child;
       this.#trigger = child;
     } else {
       // Scenario 3: Other element - trigger only, no populate
       this.#trigger = child;
-      this.#chit = null;
+      this.#swatch = null;
     }
 
     this.#syncTriggerA11y();
@@ -444,10 +444,10 @@ class FigFillPicker extends HTMLElement {
     this.#trigger.removeEventListener("keydown", this.#boundTriggerKeydown);
     this.#trigger.addEventListener("keydown", this.#boundTriggerKeydown);
 
-    // Prevent fig-chit's internal color input from opening system picker
-    if (this.#chit) {
+    // Prevent the swatch's internal color input from opening system picker
+    if (this.#swatch) {
       requestAnimationFrame(() => {
-        const input = this.#chit.querySelector('input[type="color"]');
+        const input = this.#swatch.querySelector('input[type="color"]');
         if (input) {
           input.remove();
         }
@@ -549,8 +549,8 @@ class FigFillPicker extends HTMLElement {
     }
   }
 
-  #updateChit() {
-    if (!this.#chit) return;
+  #updateSwatch() {
+    if (!this.#swatch) return;
 
     let bg;
     let bgSize = "cover";
@@ -591,17 +591,17 @@ class FigFillPicker extends HTMLElement {
         break;
       default:
         const slot = this.#customSlots[this.#fillType];
-        bg = slot?.element?.getAttribute("chit-background") || "#D9D9D9";
+        bg = slot?.element?.getAttribute("swatch-background") || "#D9D9D9";
     }
 
-    this.#chit.setAttribute("background", bg);
-    this.#chit.style.setProperty("--chit-bg-size", bgSize);
-    this.#chit.style.setProperty("--chit-bg-position", bgPosition);
+    this.#swatch.setAttribute("background", bg);
+    this.#swatch.style.setProperty("--swatch-bg-size", bgSize);
+    this.#swatch.style.setProperty("--swatch-bg-position", bgPosition);
 
     if (this.#fillType === "solid") {
-      this.#chit.setAttribute("alpha", this.#color.a);
+      this.#swatch.setAttribute("alpha", this.#color.a);
     } else {
-      this.#chit.removeAttribute("alpha");
+      this.#swatch.removeAttribute("alpha");
     }
   }
 
@@ -630,7 +630,7 @@ class FigFillPicker extends HTMLElement {
     const gamutEl = this.#dialog.querySelector(".fig-fill-picker-gamut");
     if (gamutEl) gamutEl.value = this.#gamut;
 
-    if (this.#chit) this.#chit.setAttribute("selected", "true");
+    if (this.#swatch) this.#swatch.setAttribute("selected", "true");
 
     this.#dialog.open = true;
 
@@ -796,7 +796,7 @@ class FigFillPicker extends HTMLElement {
       });
 
     const onDialogClose = () => {
-      if (this.#chit) this.#chit.removeAttribute("selected");
+      if (this.#swatch) this.#swatch.removeAttribute("selected");
       this.#emitChange();
       this.dispatchEvent(new CustomEvent("close"));
     };
@@ -890,7 +890,7 @@ class FigFillPicker extends HTMLElement {
       });
     }
 
-    this.#updateChit();
+    this.#updateSwatch();
     this.#emitInput();
   }
 
@@ -1399,7 +1399,7 @@ class FigFillPicker extends HTMLElement {
       this.#opacitySlider.setAttribute("color", hex);
     }
 
-    this.#updateChit();
+    this.#updateSwatch();
   }
 
   // ============ GRADIENT TAB ============
@@ -1582,7 +1582,7 @@ class FigFillPicker extends HTMLElement {
           ...this.#gradient,
           ...detail.gradient,
         });
-        this.#updateChit();
+        this.#updateSwatch();
         this.#updateGradientStopsList();
       };
       gradientBarInput.addEventListener("input", (e) => {
@@ -1652,7 +1652,7 @@ class FigFillPicker extends HTMLElement {
       );
     }
 
-    this.#updateChit();
+    this.#updateSwatch();
   }
 
   #updateGradientStopsList() {
@@ -1851,14 +1851,14 @@ class FigFillPicker extends HTMLElement {
       this.#image.scaleMode = e.target.value;
       scaleInput.style.display = e.target.value === "tile" ? "block" : "none";
       this.#updateImagePreview(preview);
-      this.#updateChit();
+      this.#updateSwatch();
       this.#emitInput();
     });
 
     scaleInput.addEventListener("input", (e) => {
       this.#image.scale = parseFloat(e.target.value) || 100;
       this.#updateImagePreview(preview);
-      this.#updateChit();
+      this.#updateSwatch();
       this.#emitInput();
     });
 
@@ -1867,7 +1867,7 @@ class FigFillPicker extends HTMLElement {
       if (!src) return;
       this.#image.url = src;
       this.#updateImagePreview(preview);
-      this.#updateChit();
+      this.#updateSwatch();
       this.#emitInput();
     });
 
@@ -1875,7 +1875,7 @@ class FigFillPicker extends HTMLElement {
       if (preview.src) return;
       this.#image.url = null;
       this.#updateImagePreview(preview);
-      this.#updateChit();
+      this.#updateSwatch();
       this.#emitInput();
     });
 
@@ -2011,7 +2011,7 @@ class FigFillPicker extends HTMLElement {
     scaleModeDropdown.addEventListener("change", (e) => {
       this.#video.scaleMode = e.target.value;
       this.#updateVideoPreviewStyle(preview);
-      this.#updateChit();
+      this.#updateSwatch();
       this.#emitInput();
     });
 
@@ -2021,7 +2021,7 @@ class FigFillPicker extends HTMLElement {
       this.#video.url = src;
       this.#updateVideoPreviewStyle(preview);
       preview.play?.();
-      this.#updateChit();
+      this.#updateSwatch();
       this.#emitInput();
     });
 
@@ -2029,7 +2029,7 @@ class FigFillPicker extends HTMLElement {
       if (preview.src) return;
       this.#video.url = null;
       this.#updateVideoPreviewStyle(preview);
-      this.#updateChit();
+      this.#updateSwatch();
       this.#emitInput();
     });
 
@@ -2453,7 +2453,7 @@ class FigFillPicker extends HTMLElement {
 
   // ============ EVENT EMITTERS ============
   #emitInput() {
-    this.#updateChit();
+    this.#updateSwatch();
     this.dispatchEvent(
       new CustomEvent("input", {
         bubbles: true,
@@ -2523,7 +2523,7 @@ class FigFillPicker extends HTMLElement {
     switch (name) {
       case "value":
         this.#parseValue();
-        this.#updateChit();
+        this.#updateSwatch();
         if (this.#dialog) {
           // Update dialog UI if open - but don't rebuild if user is dragging
           if (!this.#isDraggingColor) {

package/fig-lab.css

@@ -9,19 +9,24 @@
  */
 
 fig-field-slider {
+  --fig-field-slider-elastic-distance: var(--spacer-2);
+  --fig-field-slider-elastic-size: 0px;
+  --fig-field-slider-elastic-position-offset: 0px;
+  --fig-field-slider-elastic-transition: 0.1s ease-out;
+  --fig-field-slider-height: 2rem;
+  --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));
   display: block;
   position: relative;
   width: 100%;
+  height: var(--fig-field-slider-height);
   border-radius: var(--radius-medium);
-  --field-text-shadow: 0 1px 1.5px
-    light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
-
-
-  &:focus-within {
-    outline: var(--figma-focus-outline);
-    outline-offset: var(--figma-focus-outline-offset);
-  }
-
+  transition:
+    width var(--fig-field-slider-elastic-transition),
+    transform var(--fig-field-slider-elastic-transition);
+  
   label {
     pointer-events: none;
     z-index: 1;
@@ -29,7 +34,6 @@ fig-field-slider {
 
   &[disabled]:not([disabled="false"]) {
     pointer-events: none;
-
     label,
     input {
       color: var(--figma-color-text-disabled);
@@ -46,16 +50,32 @@ fig-field-slider {
     }
   }
 
+  &[type="opacity"] fig-slider {
+    --slider-checkerboard: var(--checkerboard);
+  }
+ 
+
   fig-field:not([direction="vertical"]) {
     position: relative;
     padding-left: var(--spacer-2-5);
     display: flex;
+    height: 100%;
 
     & > label {
       min-width: 0;
       max-width: none;
       width: 100%;
       flex: 1 1 auto;
+      color: var(--figma-color-text);
+      padding: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--spacer-1);
+      margin:0;
+      height: 100%;
+      fig-icon:first-child{
+        margin-left: calc(var(--spacer-1) * -1);
+      }
     }
 
     fig-slider {
@@ -70,21 +90,57 @@ fig-field-slider {
         var(--figma-color-text-secondary),
         var(--figma-color-text)
       );
-      --slider-thumb-height: calc(
+      /*--slider-thumb-height: calc(
         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-border-radius: var(--radius-medium);
       --slider-tick-width: 0.125rem;
       --slider-tick-height: var(--spacer-2);
       --slider-tick-radius: var(--radius-medium);
       --slider-stepper-padding: 0;
-      --slider-handle-shadow: inset 0 0 0 var(--slider-thumb-height)
-        var(--slider-thumb-color) !important;
-      --slider-thumb-opacity: calc(
-        min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
+      --slider-thumb-inset-threshold: calc(
+        var(--slider-thumb-width) + var(--spacer-2) * 2
+      );
+      --slider-thumb-inset-distance: var(--slider-percent);
+      --slider-thumb-edge-offset: clamp(
+        calc(-1 * var(--spacer-2)),
+        calc(
+          var(--slider-thumb-inset-threshold) -
+            var(--slider-thumb-inset-distance) - var(--spacer-2)
+        ),
+        0px
       );
-      --slider-tick-opacity: 1;
+      --slider-thumb-travel-offset: var(--slider-thumb-edge-offset);
+      --slider-handle-shadow:
+        inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color),
+        var(--handle-shadow) !important;
+      /*--slider-thumb-opacity: calc(
+        min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2
+      );*/
+      --slider-thumb-opacity: 0;
+      --slider-tick-opacity: 0.5;
+
+      &[type="delta"] {
+        --slider-thumb-inset-distance: max(
+          calc(var(--slider-percent) - var(--start-percent)),
+          calc(var(--start-percent) - var(--slider-percent))
+        );
+        --slider-delta-right-inset: max(var(--slider-delta-direction, 1), 0);
+        --slider-thumb-travel-offset: calc(
+          var(--slider-thumb-edge-offset) * var(--slider-delta-right-inset)
+        );
+      }
+
+      &[type="stepper"] {
+        --slider-thumb-travel-offset: 0px;
+      }
+
+      &[type="stepper"] .fig-slider-input-container input[type="range"] {
+        width: 100% !important;
+        margin-left: 0;
+      }
 
       &:has(input[type="range"]:focus-within) {
         --slider-thumb-outline: var(--figma-focus-outline) !important;
@@ -102,16 +158,25 @@ fig-field-slider {
             inset: 0;
             pointer-events: none;
             border-radius: var(--slider-border-radius);
-            box-shadow: inset 0 0 0 1px var(--figma-color-border) !important;
+            box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent) !important;
           }
         }
         &::before {
-          background: var(--figma-color-bg-tertiary) !important;
+          box-shadow: var(--fig-field-slider-progress-shadow) !important;
+          background: var(--figma-color-bordertranslucent) !important;
           min-width: 0 !important;
           box-shadow: none !important;
         }
         input[type="range"] {
           border-radius: 0 !important;
+          width: calc(100% - var(--spacer-2)) !important;
+          margin-left: var(--spacer-2);
+          &::-webkit-slider-thumb {
+            margin-left: var(--slider-thumb-travel-offset);
+          }
+          &::-moz-range-thumb {
+            margin-left: var(--slider-thumb-travel-offset);
+          }
         }
       }
 
@@ -120,6 +185,7 @@ fig-field-slider {
       }
 
       &[type="delta"] .fig-slider-input-container::before {
+        background: var(--figma-color-bordertranslucent) !important;
         --left-start: calc(
           var(--start-percent) - var(--slider-thumb-width) / 2
         ) !important;
@@ -143,6 +209,64 @@ fig-field-slider {
         ) !important;
         width: var(--abs-width) !important;
       }
+
+      &:is([type="hue"], [type="opacity"]) {
+        .fig-slider-input-container {
+          &::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            z-index: 0;
+            pointer-events: none;
+            border-radius: var(--slider-border-radius);
+          }
+
+          input[type="range"] {
+            position: relative;
+            z-index: 1;
+            &::-webkit-slider-runnable-track {
+              background: transparent;
+            }
+            &::-moz-range-track {
+              background: transparent;
+            }
+          }
+        }
+      }
+
+      &[type="hue"] .fig-slider-input-container::after {
+        --fig-field-slider-hue-fade-size: 30%;
+        background: var(--bg-hue);
+        mask-image: linear-gradient(
+          to right,
+          transparent 0%,
+          rgba(0, 0, 0, 0.16) calc(var(--slider-percent) - var(--fig-field-slider-hue-fade-size)),
+          black var(--slider-percent),
+          rgba(0, 0, 0, 0.16) calc(var(--slider-percent) + var(--fig-field-slider-hue-fade-size)),
+          transparent 100%
+        );
+        -webkit-mask-image: linear-gradient(
+          to right,
+          transparent 0%,
+          rgba(0, 0, 0, 0.16) calc(var(--slider-percent) - var(--fig-field-slider-hue-fade-size)),
+          black var(--slider-percent),
+          rgba(0, 0, 0, 0.16) calc(var(--slider-percent) + var(--fig-field-slider-hue-fade-size)),
+          transparent 100%
+        );
+      }
+
+      &[type="opacity"] .fig-slider-input-container::after {
+        opacity: calc(0.2 + var(--slider-complete) * 0.65);
+        background:
+          linear-gradient(to right, transparent, var(--color)),
+          var(--slider-checkerboard);
+      }
+    }
+    &:hover,
+    &:focus-within {
+      fig-slider {
+        --slider-thumb-opacity: 1;
+      }
     }
     datalist {
       mask-image: linear-gradient(
@@ -176,6 +300,7 @@ fig-field-slider {
       }
       input {
         field-sizing: content;
+        font-variant-numeric: tabular-nums;
         border-radius: var(--radius-small);
         width: auto;
         flex: 0 0 auto;
@@ -184,6 +309,12 @@ fig-field-slider {
       }
     }
   }
+
+  &[data-elastic-dragging="true"] {
+    width: calc(100% + var(--fig-field-slider-elastic-size));
+    transform: translateX(var(--fig-field-slider-elastic-position-offset));
+    transition: none;
+  }
 }
 
 /* Canvas Control */