@rogieking/figui3 8.3.0 → 8.4.0

package/components.css

@@ -982,6 +982,8 @@ fig-button {
         [variant="destructiveGhost"]
       ):not(
         [variant="destructiveLink"]
+      ):not(
+        [variant="ghost"]
       ) {
       color: var(--figma-color-text-ondisabled);
       box-shadow: none;
@@ -1648,6 +1650,12 @@ fig-video {
     width: 100%;
   }
 
+  /* An explicit size wins over full/aspect-ratio stretching, which would
+     otherwise collapse to 0 inside a shrink-to-fit parent (e.g. fig-choice). */
+  &[size]:not([size=""]):not([size="auto"]) {
+    width: var(--fig-media-size);
+  }
+
   > fig-preview {
     --fig-preview-fit: var(--fig-media-fit);
     width: 100%;
@@ -1692,7 +1700,7 @@ fig-video {
     pointer-events: none;
   }
 
-  &:is(:not([src]), [src=""]):is(:not([poster]), [poster=""])
+  &:not(:has(> fig-preview > video.fig-media-element[data-generated][src]:not([src=""]))):is(:not([poster]), [poster=""])
     > fig-preview > video.fig-media-element[data-generated] {
     opacity: 0;
     pointer-events: none;
@@ -1732,7 +1740,11 @@ fig-video {
   &:has(> [slot="overlay"]:is(:focus, :focus-within, :active)) > [slot="overlay"],
   &:has(> fig-input-file[variant="overlay"]:is(:focus, :focus-within, :active)) > fig-input-file[variant="overlay"],
   > [slot="overlay"]:focus-within,
-  > fig-input-file[variant="overlay"]:focus-within {
+  > fig-input-file[variant="overlay"]:focus-within,
+  /* The overlay is a sibling of fig-preview, so hovering it drops the
+     preview's :hover. Keep it shown to avoid a show/hide flicker loop. */
+  > [slot="overlay"]:hover,
+  > fig-input-file[variant="overlay"]:hover {
     opacity: 1;
     pointer-events: all;
   }
@@ -2697,6 +2709,7 @@ fig-slider {
   --slider-stepper-padding: calc(
     (var(--slider-height) / 2) - var(--slider-tick-width) / 2
   );
+  --slider-track-color: var(--figma-color-bg-secondary);
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
   --slider-tick-width: calc(var(--slider-height) / 4);
@@ -2741,7 +2754,7 @@ fig-slider {
     flex: 1 1 0;
     min-width: 0;
     transition: var(--slider-transition);
-    background: var(--figma-color-bg-secondary);
+    background: var(--slider-track-color);
     border-radius: var(--slider-border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
@@ -2764,6 +2777,13 @@ fig-slider {
       max-width: 100%;
     }
   }
+
+  /* Disabled: progress fill blends into the track so the bar stays legible */
+  &:has(input[type="range"]:disabled) .fig-slider-input-container::before {
+    background: var(--slider-track-color);
+    box-shadow: none;
+  }
+
   &[type="stepper"] {
     .fig-slider-input-container {
       &::before {
@@ -2877,12 +2897,7 @@ fig-slider {
     }
 
     &:disabled::-webkit-slider-runnable-track {
-      background: linear-gradient(
-        to right,
-        var(--figma-color-bg-secondary) 0%,
-        var(--figma-color-bg-secondary) var(--slider-percent),
-        var(--figma-color-bg) var(--slider-percent)
-      );
+      background-color: transparent;
     }
 
     &.hue::-webkit-slider-runnable-track {
@@ -2932,12 +2947,7 @@ fig-slider {
     }
 
     &:disabled::-moz-range-track {
-      background: linear-gradient(
-        to right,
-        var(--figma-color-bg-secondary) 0%,
-        var(--figma-color-bg-secondary) var(--slider-percent),
-        var(--figma-color-bg) var(--slider-percent)
-      );
+      background-color: transparent;
     }
 
     &.hue::-moz-range-track {
@@ -3003,6 +3013,7 @@ fig-slider {
       0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
       var(--figma-elevation-100);
     --slider-checkerboard: var(--checkerboard-slider);
+    --slider-track-color: var(--figma-color-bg-tertiary);
 
     background-color: var(--figma-color-bg-secondary);
     border-radius: var(--radius-medium);
@@ -3018,7 +3029,7 @@ fig-slider {
       display: block;
       width: 100%;
       box-shadow: none;
-      background-color: var(--figma-color-bg-tertiary);
+      background-color: var(--slider-track-color);
     }
     fig-input-text,
     fig-input-number {
@@ -3563,6 +3574,7 @@ fig-footer {
     z-index: 10;
     margin-top: auto;
     background: var(--figma-color-bg);
+    border-radius: 0 0 var(--radius-large) var(--radius-large)
   }
 }
 
@@ -3578,6 +3590,9 @@ fig-content {
   &:has(>fig-group[name]:last-child){
     padding-bottom: 0;
   }
+  &>p{
+    padding-inline: var(--spacer-3);
+  }
 }
 
 fig-content[padding]:not([padding="false"]):not(:empty) {
@@ -4318,52 +4333,6 @@ fig-spinner {
   }
 }
 
-fig-interpolation-swatch {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex: 0 0 auto;
-  color: var(--figma-color-bordertranslucent);
-  overflow: visible;
-
-  &[size="large"] {
-    width: 2rem;
-    height: 2rem;
-
-    .fig-interpolation-swatch-svg,
-    .fig-interpolation-swatch-fill {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-  }
-
-  .fig-interpolation-swatch-svg {
-    display: block;
-    width: 1rem;
-    height: 1rem;
-    overflow: visible;
-  }
-
-  .fig-interpolation-swatch-fill {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1rem;
-    height: 1rem;
-    background: linear-gradient(90deg, #ff0000, #4f9eff);
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-    mask-position: center;
-  }
-}
-
 /* Segmented control */
 .segmented-control,
 fig-segmented-control {