@rogieking/figui3 4.15.3 → 4.15.4

package/components.css

@@ -282,11 +282,21 @@
       rgba(255, 255, 255, 0.2) 0% 50%
     )
     0 0 / 0.5rem 0.5rem;
-    --checkerboard-chit: repeating-conic-gradient(
+  --checkerboard-chit: repeating-conic-gradient(
       rgba(0, 0, 0, 0.2) 0% 25%,
       rgba(255, 255, 255, 0.2) 0% 50%
     )
-    0 0 / 14px 14px;
+    0 0 / 0.875rem 0.875rem;
+    --checkerboard-slider: repeating-conic-gradient(
+      rgba(0, 0, 0, 0.2) 0% 25%,
+      rgba(255, 255, 255, 0.2) 0% 50%
+    )
+    0 0 / 0.375rem 0.375rem;
+  --checkerboard-handle: repeating-conic-gradient(
+      rgba(0, 0, 0, 0.2) 0% 25%,
+      rgba(255, 255, 255, 0.2) 0% 50%
+    )
+    0 0 / 0.625rem 0.625rem;
   --bg-hue: linear-gradient(
     90deg,
     rgba(255, 0, 0, 1),
@@ -1910,6 +1920,7 @@ fig-origin-grid {
     --width: var(--origin-grid-handle-size);
     --height: var(--origin-grid-handle-size);
     --border-radius: var(--radius-small);
+    
     position: absolute;
     left: 50%;
     top: 50%;
@@ -2404,6 +2415,7 @@ fig-slider {
     0 0 0 1px var(--figma-color-border-selected);
   --slider-transition: none;
   --handle-transition: var(--slider-transition);
+  --slider-checkerboard: var(--checkerboard);
 
   display: flex;
   align-items: center;
@@ -2575,7 +2587,7 @@ fig-slider {
     &.opacity::-webkit-slider-runnable-track {
       background:
         linear-gradient(to right, transparent, var(--color)),
-        var(--checkerboard);
+        var(--slider-checkerboard);
     }
 
     /* Firefox thumb */
@@ -2630,7 +2642,7 @@ fig-slider {
     &.opacity::-moz-range-track {
       background:
         linear-gradient(to right, transparent, var(--color)),
-        var(--checkerboard);
+        var( --slider-checkerboard);
     }
   }
 
@@ -2684,6 +2696,7 @@ fig-slider {
         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);
+    --slider-checkerboard: var(--checkerboard-slider);
 
     background-color: var(--figma-color-bg-secondary);
     border-radius: var(--radius-medium);
@@ -2716,6 +2729,7 @@ fig-slider {
         height: auto;
       }
     }
+    
   }
 }
 
@@ -3459,7 +3473,6 @@ fig-input-palette {
     "inline    button";
   gap: var(--spacer-2);
   min-width: 0;
-  border-radius: var(--radius-medium);
 
   > .palette-colors-inline {
     grid-area: inline;
@@ -3569,6 +3582,12 @@ fig-input-palette {
       border-radius: var(--radius-medium) !important;
     }
   }
+  fig-field &{
+    grid-template-columns: 1fr calc(var(--spacer-3) + var(--spacer-1));
+    .palette-colors-expanded {
+      grid-template-columns: [input] 1fr [button] calc(var(--spacer-3) + var(--spacer-1));
+    }
+  }
 }
 
 fig-field {
@@ -3641,6 +3660,10 @@ fig-field {
     &[columns="half"] {
       --fig-field-label-ratio: 2fr;
     }
+    &[columns="2/5"] {
+      --fig-field-label-ratio: 2fr;
+      --fig-field-input-ratio: 3fr;
+    }
     & > label {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -4934,6 +4957,7 @@ fig-handle {
   --border: none;
   --fig-handle-hit-area-opacity: 0;
   --fig-handle-hit-area-size: 0;
+  --fig-handle-checkerboard: var(--checkerboard);
 
   margin: 0;
   padding: 0;
@@ -4964,7 +4988,9 @@ fig-handle {
     width: calc(var(--width) - var(--ring-width) * 2);
     height: calc(var(--height) - var(--ring-width) * 2);
     background:
-      linear-gradient(var(--fill), var(--fill)), var(--checkerboard-chit);
+      linear-gradient(var(--fill), var(--fill)), var(--fig-handle-checkerboard);
+    background-position: 0 0;
+    background-size: 0.625rem 0.625rem;
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     place-self: center;