@rogieking/figui3 10.0.8 → 10.0.10

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file.
 
+## [10.0.10]
+
+### Changed
+
+- Unified thin scrollbar colors and styling across the base stylesheet and playground.
+
+### Fixed
+
+- Prevented delayed chooser media loads from overriding the user’s scroll position.
+
+## [10.0.9]
+
+### Changed
+
+- Restored standard inline spacing for single-tab tab lists.
+
+### Fixed
+
+- Fixed one-sided overflow-fade masks so inactive and opposite edges remain fully visible.
+- Ensured end-edge fades disappear when no overflow remains.
+
 ## [10.0.8]
 
 ### Added

package/base.css

@@ -88,16 +88,23 @@ iframe{
   background-color: var(--figma-color-text-selection);
 }
 
-/* helper classes/defaults */
+/* Scrollbars */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--figma-color-border) transparent;
+}
+
 ::-webkit-scrollbar {
   width: var(--spacer-1);
-  /* Width of the vertical scrollbar */
   height: var(--spacer-1);
-  /* Height of the horizontal scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--figma-color-bg-tertiary);
+  background-color: var(--figma-color-border);
   border-radius: calc(var(--spacer-1) / 2);
 }
 
@@ -105,13 +112,7 @@ iframe{
   background-color: var(--figma-color-bg-secondary);
 }
 
-/* For Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--figma-color-bg-tertiary)
-    var(--figma-color-bg-secondary);
-}
-
+/* helper classes/defaults */
 .subtle {
   color: var(--figma-color-text-tertiary);
 }

package/components.css

@@ -1375,8 +1375,6 @@ fig-tabs,
     /* Single tab */
     &:first-of-type:last-of-type{
       background-color: transparent;
-      padding-inline: 0;
-      margin-inline: 0;
     }
 
     & + fig-tab {
@@ -5398,9 +5396,55 @@ fig-skeleton {
   initial-value: 0px;
 }
 
+@property --fig-overflow-fade-top-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --fig-overflow-fade-bottom-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --fig-overflow-fade-left-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
+@property --fig-overflow-fade-right-opacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+
 .fig-overflow-fade {
   --fig-overflow-fade-size: var(--spacer-5);
   --fig-overflow-fade-clear-top: 0px;
+  --fig-overflow-fade-edge-opacity: 0;
+  --fig-overflow-fade-edge-alpha-04: calc(
+    0.04 + var(--fig-overflow-fade-edge-opacity) * 0.96
+  );
+  --fig-overflow-fade-edge-alpha-16: calc(
+    0.16 + var(--fig-overflow-fade-edge-opacity) * 0.84
+  );
+  --fig-overflow-fade-edge-alpha-32: calc(
+    0.32 + var(--fig-overflow-fade-edge-opacity) * 0.68
+  );
+  --fig-overflow-fade-edge-alpha-50: calc(
+    0.5 + var(--fig-overflow-fade-edge-opacity) * 0.5
+  );
+  --fig-overflow-fade-edge-alpha-68: calc(
+    0.68 + var(--fig-overflow-fade-edge-opacity) * 0.32
+  );
+  --fig-overflow-fade-edge-alpha-84: calc(
+    0.84 + var(--fig-overflow-fade-edge-opacity) * 0.16
+  );
+  --fig-overflow-fade-edge-alpha-96: calc(
+    0.96 + var(--fig-overflow-fade-edge-opacity) * 0.04
+  );
 
   overflow-y: auto;
 }
@@ -5885,6 +5929,56 @@ fig-toolbelt {
       .fig-overflow-fade-right
     )
   ) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-top-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to bottom,
+      black 0,
+      black var(--fig-overflow-fade-clear-top),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity))
+        var(--fig-overflow-fade-clear-top),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.125
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.25
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.375
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.5
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.625
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.75
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(
+          var(--fig-overflow-fade-clear-top) +
+            var(--fig-overflow-fade-top) * 0.875
+        ),
+      black calc(
+        var(--fig-overflow-fade-clear-top) +
+          var(--fig-overflow-fade-top)
+      ),
+      black 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
     animation: fig-overflow-fade-in-top 1ms linear both;
     animation-timeline: scroll(self block);
     animation-range: 0 var(--fig-overflow-fade-size);
@@ -5899,6 +5993,29 @@ fig-toolbelt {
       .fig-overflow-fade-right
     )
   ) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-bottom-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to bottom,
+      black 0,
+      black calc(100% - var(--fig-overflow-fade-bottom)),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.875),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.75),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.625),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.5),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.375),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.25),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(100% - var(--fig-overflow-fade-bottom) * 0.125),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity)) 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
     animation: fig-overflow-fade-out-bottom 1ms linear both;
     animation-timeline: scroll(self block);
     animation-range: calc(100% - var(--fig-overflow-fade-size)) 100%;
@@ -6043,12 +6160,85 @@ fig-toolbelt {
   }
 
   .fig-overflow-fade.fig-overflow-fade-left:not(.fig-overflow-fade-right) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-left-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to right,
+      black 0,
+      black var(--fig-overflow-fade-clear-left),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity))
+        var(--fig-overflow-fade-clear-left),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.125
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.25
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.375
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.5
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.625
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.75
+        ),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(
+          var(--fig-overflow-fade-clear-left) +
+            var(--fig-overflow-fade-left) * 0.875
+        ),
+      black calc(
+        var(--fig-overflow-fade-clear-left) +
+          var(--fig-overflow-fade-left)
+      ),
+      black 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
     animation: fig-overflow-fade-in-left 1ms linear both;
     animation-timeline: scroll(self inline);
     animation-range: 0 var(--fig-overflow-fade-size);
   }
 
   .fig-overflow-fade.fig-overflow-fade-right:not(.fig-overflow-fade-left) {
+    --fig-overflow-fade-edge-opacity: var(--fig-overflow-fade-right-opacity);
+    --fig-overflow-fade-single-edge-mask: linear-gradient(
+      to right,
+      black 0,
+      black calc(100% - var(--fig-overflow-fade-right)),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-96))
+        calc(100% - var(--fig-overflow-fade-right) * 0.875),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-84))
+        calc(100% - var(--fig-overflow-fade-right) * 0.75),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-68))
+        calc(100% - var(--fig-overflow-fade-right) * 0.625),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-50))
+        calc(100% - var(--fig-overflow-fade-right) * 0.5),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-32))
+        calc(100% - var(--fig-overflow-fade-right) * 0.375),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-16))
+        calc(100% - var(--fig-overflow-fade-right) * 0.25),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-alpha-04))
+        calc(100% - var(--fig-overflow-fade-right) * 0.125),
+      rgba(0, 0, 0, var(--fig-overflow-fade-edge-opacity)) 100%
+    );
+    mask-image: var(--fig-overflow-fade-single-edge-mask);
+    -webkit-mask-image: var(--fig-overflow-fade-single-edge-mask);
     animation: fig-overflow-fade-out-right 1ms linear both;
     animation-timeline: scroll(self inline);
     animation-range: calc(100% - var(--fig-overflow-fade-size)) 100%;
@@ -6058,36 +6248,44 @@ fig-toolbelt {
 @keyframes fig-overflow-fade-in-top {
   from {
     --fig-overflow-fade-top: 0px;
+    --fig-overflow-fade-top-opacity: 1;
   }
   to {
     --fig-overflow-fade-top: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-top-opacity: 0;
   }
 }
 
 @keyframes fig-overflow-fade-out-bottom {
   from {
     --fig-overflow-fade-bottom: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-bottom-opacity: 0;
   }
   to {
     --fig-overflow-fade-bottom: 0px;
+    --fig-overflow-fade-bottom-opacity: 1;
   }
 }
 
 @keyframes fig-overflow-fade-in-left {
   from {
     --fig-overflow-fade-left: 0px;
+    --fig-overflow-fade-left-opacity: 1;
   }
   to {
     --fig-overflow-fade-left: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-left-opacity: 0;
   }
 }
 
 @keyframes fig-overflow-fade-out-right {
   from {
     --fig-overflow-fade-right: var(--fig-overflow-fade-size);
+    --fig-overflow-fade-right-opacity: 0;
   }
   to {
     --fig-overflow-fade-right: 0px;
+    --fig-overflow-fade-right-opacity: 1;
   }
 }
 
@@ -6170,9 +6368,12 @@ fig-chooser {
         var(--fig-choice-selection-ring-gutter)
     );
   scroll-behavior: smooth;
-  scrollbar-width: none;
   width: calc(100% - var(--fig-chooser-inline-margin) * 2);
 
+  &:not([overflow="scrollbar"]) {
+    scrollbar-width: none;
+  }
+
   &[scroll-behavior="auto"] {
     scroll-behavior: auto;
   }
@@ -6226,11 +6427,6 @@ fig-chooser {
     }
   }
 
-  &[overflow="scrollbar"] {
-    scrollbar-width: thin;
-    scrollbar-color: var(--figma-color-border) transparent;
-  }
-
   &[layout="horizontal"] {
     flex-direction: row;
     overflow: auto hidden;

package/dist/base.css

@@ -1 +1 @@
-html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0;line-height:1rem}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize);text-wrap:pretty}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2);&:last-child{margin-bottom:0}}fieldset{padding:var(--spacer-1) var(--spacer-3)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{text-wrap:pretty;margin-block:1em}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}label,p,li,figcaption{color:var(--figma-color-text-secondary);text-wrap:pretty}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0;text-wrap:pretty}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}
+html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0;line-height:1rem}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing);line-height:1.4545em}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize);text-wrap:pretty}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}strong{font-weight:var(--body-medium-strong-fontWeight)}section{padding:var(--spacer-1) var(--spacer-3);margin-bottom:var(--spacer-2);&:last-child{margin-bottom:0}}fieldset{padding:var(--spacer-1) var(--spacer-3)}hr{background-color:var(--figma-color-border);width:100%;height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}iframe{background-color:#0000;border:0;flex:auto;width:100%;max-width:100%;height:max-content;min-height:0;max-height:100%;margin:0;display:block}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-border) transparent}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--figma-color-border);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{text-wrap:pretty;margin-block:1em}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}label,p,li,figcaption{color:var(--figma-color-text-secondary);text-wrap:pretty}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0;text-wrap:pretty}a{color:var(--figma-color-text-brand);text-decoration:none;&:hover{text-decoration:underline}}