@rogieking/figui3 11.3.2 → 11.3.3

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 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

package/components.css

@@ -3208,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: "";
@@ -3275,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;
       }
@@ -3332,7 +3343,6 @@ fig-slider {
       cursor: default;
       box-shadow: var(--slider-handle-shadow);
       opacity: var(--slider-thumb-opacity);
-      transform: translateX(calc(var(--slider-complete) * 50% - 25%));
     }
 
     &:disabled::-webkit-slider-thumb {
@@ -3384,7 +3394,6 @@ fig-slider {
       cursor: default;
       box-shadow: var(--slider-handle-shadow);
       opacity: var(--slider-thumb-opacity);
-      transform: translateX(calc(var(--slider-complete) * 50% - 25%));
     }
 
     &:disabled::-moz-range-thumb {
@@ -3412,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;
@@ -3429,8 +3446,8 @@ fig-slider {
     pointer-events: none;
     justify-content: space-between;
     width: auto;
-    left: calc(var(--slider-height) / 2);
-    right: calc(var(--slider-height) / 2);
+    left: calc((var(--slider-height) - var(--slider-tick-width)) / 2);
+    right: calc((var(--slider-height) - var(--slider-tick-width)) / 2);
 
     & option {
       appearance: none;
@@ -3469,17 +3486,11 @@ fig-slider {
     }
   }
 
-  &:not([variant="classic"]):is(:not([min]), [min="0"])
-    datalist[data-generated="slider-default"]
-    option[value="0"] {
-    transform: translateX(-0.125rem);
-  }
-
   &:not([variant="classic"]) {
-    --slider-height: 0.5rem;
-    --slider-thumb-size: 0.875rem;
-    --slider-tick-width: calc(var(--slider-height) - 4px);
-    --slider-tick-height: calc(var(--slider-height) - 4px);
+    --slider-height: 0.375rem;
+    --slider-thumb-size: 0.75rem;
+    --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;