@rogieking/figui3 11.3.1 → 11.3.3

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.3.3]
+
+### Changed
+
+- Refined default slider track and tick sizing and limited thumb endpoint compensation to the default variant.
+
+### Fixed
+
+- Restored inset borders over hue and opacity slider tracks.
+
+## [11.3.2]
+
+### Changed
+
+- Refined the default slider track, thumb, and tick proportions.
+
+### Fixed
+
+- Aligned generated default ticks with snapped slider values and variant-specific endpoints.
+
 ## [11.3.1]
 
 ### Added

package/components.css

@@ -3159,7 +3159,6 @@ fig-slider {
   --slider-stepper-padding: calc(
     (var(--slider-thumb-size) / 2) - var(--slider-tick-width) / 2
   );
-  --slider-default-tick-end-inset: calc(var(--slider-stepper-padding) * 2);
   --slider-track-color: var(--figma-color-bg-secondary);
   --slider-percent: calc(var(--slider-complete) * 100%);
   --start-percent: calc(var(--default, 0) * 100%);
@@ -3209,6 +3208,7 @@ fig-slider {
     border-radius: var(--slider-border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
 
+
     /* Track */
     &::before {
       content: "";
@@ -3276,6 +3276,16 @@ fig-slider {
   &[type="hue"],
   &[type="opacity"] {
     .fig-slider-input-container {
+      /* Highlight */
+      &::after{
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: var(--slider-border-radius);
+        pointer-events: none;
+        z-index: 1;
+        box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+      }
       &::before {
         display: none;
       }
@@ -3411,6 +3421,14 @@ fig-slider {
         var( --slider-checkerboard);
     }
   }
+  &:not([variant="classic"]) input[type="range"]{
+    &::-webkit-slider-thumb {
+      transform: translateX(calc(var(--slider-complete) * 50% - 25%));
+    }
+    &::-moz-range-thumb {
+      transform: translateX(calc(var(--slider-complete) * 50% - 25%));
+    }
+  }
 
   datalist {
     position: absolute;
@@ -3423,11 +3441,13 @@ fig-slider {
     margin: 0;
     border: 0;
     appearance: none;
-    padding: 0 var(--slider-stepper-padding);
+    padding: 0;
     height: var(--slider-height);
     pointer-events: none;
     justify-content: space-between;
-    width: 100%;
+    width: auto;
+    left: calc((var(--slider-height) - var(--slider-tick-width)) / 2);
+    right: calc((var(--slider-height) - var(--slider-tick-width)) / 2);
 
     & option {
       appearance: none;
@@ -3439,6 +3459,7 @@ fig-slider {
       font-size: 0;
       background: var(--figma-color-icon-tertiary);
       opacity: var(--slider-tick-opacity);
+      box-shadow: 0 0 0 0.75px rgba(0, 0, 0, 0.075);
       display: block;
       &[default] {
         background: var(--figma-color-icon);
@@ -3450,30 +3471,31 @@ fig-slider {
     }
   }
 
-  datalist[data-generated="slider-default"] option:first-child:last-child {
-    position: absolute;
-    margin: 0;
-    left: clamp(
-      var(--slider-stepper-padding),
-      calc(var(--start-percent) - var(--slider-tick-width) / 2),
-      calc(100% - var(--slider-default-tick-end-inset))
-    );
-    top: calc(50% - var(--slider-tick-height) / 2);
+  datalist[data-generated="slider-default"] {
+    left: calc(var(--slider-height) / 2);
+    right: calc(var(--slider-height) / 2);
+    width: auto;
+    padding-inline: 0;
+
+    option:first-child:last-child {
+      position: absolute;
+      margin: 0;
+      left: var(--start-percent);
+      top: calc(50% - var(--slider-tick-height) / 2);
+      transform: translateX(-50%);
+    }
   }
 
   &:not([variant="classic"]) {
     --slider-height: 0.375rem;
     --slider-thumb-size: 0.75rem;
-    --slider-tick-width: calc(var(--slider-height) / 2);
-    --slider-tick-height: calc(var(--slider-height) / 2);
-    --slider-default-tick-end-inset: calc(
-      var(--slider-thumb-size) / 2 + var(--slider-tick-width) / 2 - 0.125rem
-    );
+    --slider-tick-width: calc(var(--slider-height) - 3px);
+    --slider-tick-height: calc(var(--slider-height) - 3px);
     --slider-number-width: var(--input-opacity-width);
     --handle-transition: none;
     --slider-transition: none;
     --slider-handle-shadow:
-      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
+      inset 0 0 0 calc(var(--slider-thumb-size) / 2 + 0.5rem * var(--unchanged))
         var(--slider-thumb-color),
       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);