@rogieking/figui3 6.26.0 → 6.28.0

package/fig-lab.css

@@ -1053,11 +1053,16 @@ propskit-slider {
         );
       }
 
-      &[type="opacity"] .fig-slider-input-container::after {
-        opacity: calc(0.2 + var(--slider-complete) * 0.65);
+      &[type="opacity"] .fig-slider-input-container::before {
+        display: block;
+        width: 100% !important;
+        clip-path: inset(
+          0 calc(100% - var(--propskit-slider-progress-percent)) 0 0 round
+            var(--slider-border-radius)
+        );
         background:
           linear-gradient(to right, transparent, var(--color)),
-          var(--slider-checkerboard);
+          var(--slider-checkerboard) !important;
       }
     }
     datalist {
@@ -1077,6 +1082,7 @@ propskit-slider {
       right: var(--propskit-slider-number-right);
       top: 2px;
       bottom: 2px;
+      z-index: 2;
       width: fit-content;
       min-width: fit-content;
       max-width: max-content;
@@ -1085,6 +1091,14 @@ propskit-slider {
       border-radius: var(--radius-medium);
       outline: none !important;
 
+      &[theme="light"] {
+        --propskit-slider-filled-text-color: #fff;
+      }
+
+      &[theme="dark"] {
+        --propskit-slider-filled-text-color: #000;
+      }
+
       &:hover,
       &:has(input:focus) {
         box-shadow: none !important;
@@ -1102,6 +1116,33 @@ propskit-slider {
     }
   }
 
+  &[type="opacity"][color] {
+    fig-slider {
+      container-type: inline-size;
+    }
+
+    fig-input-number[theme] input {
+      --propskit-slider-number-fill-edge: clamp(
+        0px,
+        calc(
+          100% + var(--propskit-slider-number-right) -
+            (1 - var(--slider-complete)) * 100cqw
+        ),
+        100%
+      );
+      background-image: linear-gradient(
+        to right,
+        var(--propskit-slider-filled-text-color) 0
+          var(--propskit-slider-number-fill-edge),
+        var(--figma-color-text) var(--propskit-slider-number-fill-edge) 100%
+      ) !important;
+      background-clip: text;
+      -webkit-background-clip: text;
+      color: transparent !important;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
   &[data-elastic-dragging="true"] {
     transform: scaleX(var(--propskit-slider-elastic-scale));
     transition: none;
@@ -1326,8 +1367,8 @@ propskit-oscillator {
   flex-direction: column;
   width: 100%;
   --aspect-ratio: 2 / 1;
-  --oscillator-stroke-width: 1;
-  --propskit-oscillator-playhead-radius: 4px;
+  --oscillator-stroke-width: 2;
+  --propskit-oscillator-playhead-radius: 5px;
 
   .propskit-oscillator-svg-container {
     border-radius: var(--radius-medium);
@@ -1465,14 +1506,6 @@ propskit-oscillator {
     width: var(--spacer-4);
     height: var(--spacer-4);
     min-width: var(--spacer-4);
-
-    &::part(trigger) {
-      padding: 0;
-    }
-
-    &::part(label) {
-      display: none;
-    }
   }
 
   &[disabled]:not([disabled="false"]) {