figma-kit 1.0.0-beta.26 → 1.0.0-beta.28

package/dist/tailwind.css

@@ -644,7 +644,7 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    width: var(--space-6);
+    width: var(--space-1);
   }
 
   .fp-ValueFieldScrubber[data-disabled] {
@@ -712,26 +712,38 @@
   display: flex;
   position: relative;
   border-radius: var(--radius-medium);
-  outline-offset: -1px;
   box-sizing: border-box;
   border: 1px solid transparent;
   height: var(--space-6);
   background-color: var(--figma-color-bg-secondary);
 }
 
-  .fp-ValueFieldMulti:hover:where(:not([data-disabled])) {
-    border: 1px solid var(--figma-color-border);
+  .fp-ValueFieldMulti::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border: 1px solid transparent;
+    border-radius: inherit;
+    outline-offset: -1px;
+    pointer-events: none;
   }
 
-  .fp-ValueFieldMulti:focus-within {
+  .fp-ValueFieldMulti:hover:where(:not([data-disabled]))::after {
+    border-color: var(--figma-color-border);
+  }
+
+  .fp-ValueFieldMulti:focus-within::after {
     outline: 1px solid var(--figma-color-border-selected);
   }
 
   .fp-ValueFieldMulti[data-disabled] {
-    border: 1px solid var(--figma-color-border-disabled);
     background-color: var(--figma-color-bg);
   }
 
+    .fp-ValueFieldMulti[data-disabled]::after {
+      border-color: var(--figma-color-border-disabled);
+    }
+
   .fp-ValueFieldMulti .fp-ValueFieldRoot {
     height: var(--space-6);
     flex-grow: 1;
@@ -759,16 +771,42 @@
     background-color: transparent;
     padding-left: calc(var(--space-2) - 1px);
   }
+  .fp-ValueFieldMulti:has(> .fp-SliderRoot):hover:where(:not([data-disabled]))::after {
+    border-color: transparent;
+  }
+
+  .fp-ValueFieldMulti:has(> .fp-SliderRoot):focus-within::after {
+    outline: 0;
+  }
+
+  .fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-SliderRoot {
+    align-self: center;
+    margin-inline: 10px 11px;
+  }
+
+  .fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot {
+    flex: 0 0 var(--space-14);
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+  }
+
+    .fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot:hover:where(:not([data-disabled])) {
+      outline-color: var(--figma-color-border);
+    }
+
+    .fp-ValueFieldMulti:has(> .fp-SliderRoot) > .fp-ValueFieldRoot:focus-within {
+      outline-color: var(--figma-color-border-selected);
+    }
 
 .fp-ValueFieldNumericSelect {
   width: 100%;
 }
 
-  .fp-ValueFieldNumericSelect:hover:where(:not([data-disabled])) {
+  .fp-ValueFieldNumericSelect:hover:where(:not([data-disabled]))::after {
     border-color: transparent;
   }
 
-  .fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled])) {
+  .fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled]))::after {
     border-color: var(--figma-color-border);
   }
 
@@ -1428,6 +1466,18 @@
 }
 @layer components {
 
+:root,
+.light,
+.light-theme {
+  --switch-border-color: #00000033;
+  --switch-thumb-outline-color-unchecked: #00000033;
+  --switch-thumb-outline-color-checked: #0000001a;
+}
+
+.figma-dark {
+  --switch-border-color: #ffffff33;
+}
+
 .fp-switchRoot {
   appearance: none;
   box-sizing: border-box;
@@ -1446,14 +1496,20 @@
   outline and the background in the focused mode as it is in Figma.  */
 }
   .fp-switchRoot::before {
+    box-sizing: border-box;
     position: absolute;
     inset: 0;
+    border: 1px solid var(--switch-border-color);
     border-radius: var(--radius-full);
     background: none;
     content: '';
   }
 
   .fp-switchRoot[data-unchecked]::before {
+    background: var(--figma-color-bg-secondary);
+  }
+
+  .fp-switchRoot[data-unchecked]:active::before {
     background: var(--figma-color-bg-tertiary);
   }
 
@@ -1461,6 +1517,10 @@
     background: var(--figma-color-bg-brand);
   }
 
+  .fp-switchRoot[data-checked]:active::before {
+    background: var(--figma-color-bg-brand-pressed);
+  }
+
   .fp-switchRoot:focus-visible {
     outline-offset: -1px;
     outline: 1px solid var(--figma-color-border-selected-strong);
@@ -1482,11 +1542,12 @@
 .fp-switchThumb {
   box-sizing: border-box;
   position: absolute;
-  top: 1px;
-  left: 1px;
-  height: var(--space-3_5);
-  width: var(--space-3_5);
+  top: var(--space-1);
+  left: var(--space-1);
+  height: var(--space-2);
+  width: var(--space-3);
   border-radius: var(--radius-full);
+  outline: 1px solid var(--switch-thumb-outline-color-unchecked);
   background: var(--figma-color-icon-onbrand);
   transition: all 0.08s ease-out;
 }
@@ -1495,12 +1556,9 @@
     background-color: var(--figma-color-icon-ondisabled);
   }
 
-  .fp-switchThumb[data-unchecked] {
-    left: 1px;
-  }
-
   .fp-switchThumb[data-checked] {
-    left: calc(100% - var(--space-3_5) - 1px);
+    left: calc(100% - var(--space-3) - var(--space-1));
+    outline-color: var(--switch-thumb-outline-color-checked);
   }
 }
 @layer components {
@@ -1508,9 +1566,6 @@
 :root,
 .light,
 .light-theme {
-  --slider-root-size: var(--space-6);
-  --slider-track-size: var(--space-4);
-  --slider-thumb-width: var(--space-4);
   --slider-track-border-color: #0000001a;
   --slider-track-bg: var(--figma-color-bg-secondary);
   --slider-thumb-bg: transparent;
@@ -1532,15 +1587,40 @@
 
   .fp-SliderRoot[data-orientation='horizontal'] {
     height: var(--slider-root-size);
-    border-width: 0 calc(var(--slider-thumb-width) / 2);
+    border-width: 0 var(--slider-thumb-inset);
   }
 
   .fp-SliderRoot[data-orientation='vertical'] {
     flex-direction: column;
     width: var(--slider-root-size);
-    border-width: calc(var(--slider-thumb-width) / 2) 0;
+    border-width: var(--slider-thumb-inset) 0;
   }
 
+.fp-SliderRoot:where(.fp-size-large) {
+  --slider-root-size: var(--space-6);
+  --slider-track-size: var(--space-4);
+  --slider-thumb-size: var(--space-4);
+  --slider-thumb-inset: calc(var(--slider-thumb-size) / 2);
+  --slider-hint-width: var(--space-1);
+  --slider-hint-height: var(--space-1);
+  --slider-hint-offset: 0px;
+  --slider-hint-radius: var(--radius-full);
+}
+
+.fp-SliderRoot:where(.fp-size-small) {
+  --slider-root-size: var(--space-4);
+  --slider-track-size: var(--space-1_5);
+  --slider-thumb-size: var(--space-3);
+  --slider-thumb-inset: calc(var(--slider-track-size) / 2);
+  --slider-hint-width: 1px;
+  --slider-hint-height: 3px;
+  --slider-hint-offset: calc(var(--slider-track-size) / 2 + 3px + var(--slider-hint-height) / 2);
+  --slider-hint-radius: 0;
+  --slider-track-bg: var(--figma-color-bg-tertiary);
+  --slider-track-border-color: transparent;
+  --slider-thumb-bg: var(--figma-color-icon-onbrand);
+}
+
 .fp-SliderControl {
   position: relative;
   display: flex;
@@ -1551,10 +1631,23 @@
   outline: 0;
 }
 
+  .fp-SliderControl::before {
+    content: '';
+    position: absolute;
+  }
+
+.fp-SliderRoot[data-orientation='horizontal'] .fp-SliderControl::before {
+  inset: calc(50% - var(--space-11) / 2) calc((var(--slider-thumb-inset) + var(--space-3)) * -1);
+}
+
 .fp-SliderRoot[data-orientation='vertical'] .fp-SliderControl {
   flex-direction: column;
 }
 
+  .fp-SliderRoot[data-orientation='vertical'] .fp-SliderControl::before {
+    inset: calc((var(--slider-thumb-inset) + var(--space-3)) * -1) calc(50% - var(--space-11) / 2);
+  }
+
 .fp-SliderTrack {
   box-sizing: border-box;
   position: static;
@@ -1567,14 +1660,14 @@
 }
 
   .fp-SliderTrack[data-orientation='horizontal'] {
-    margin-left: calc((var(--slider-thumb-width) / 2) * -1);
-    margin-right: calc((var(--slider-thumb-width) / 2) * -1);
+    margin-left: calc(var(--slider-thumb-inset) * -1);
+    margin-right: calc(var(--slider-thumb-inset) * -1);
     height: var(--slider-track-size);
   }
 
   .fp-SliderTrack[data-orientation='vertical'] {
-    margin-top: calc((var(--slider-thumb-width) / 2) * -1);
-    margin-bottom: calc((var(--slider-thumb-width) / 2) * -1);
+    margin-top: calc(var(--slider-thumb-inset) * -1);
+    margin-bottom: calc(var(--slider-thumb-inset) * -1);
     width: var(--slider-track-size);
   }
 
@@ -1587,14 +1680,14 @@
 
   .fp-SliderRange[data-orientation='horizontal'] {
     height: var(--slider-track-size);
-    margin-left: calc((var(--slider-thumb-width) / 2) * -1);
-    margin-right: calc((var(--slider-thumb-width) / 2) * -1);
+    margin-left: calc(var(--slider-thumb-inset) * -1);
+    margin-right: calc(var(--slider-thumb-inset) * -1);
   }
 
   .fp-SliderRange[data-orientation='vertical'] {
     width: var(--slider-track-size);
-    margin-top: calc((var(--slider-thumb-width) / 2) * -1);
-    margin-bottom: calc((var(--slider-thumb-width) / 2) * -1);
+    margin-top: calc(var(--slider-thumb-inset) * -1);
+    margin-bottom: calc(var(--slider-thumb-inset) * -1);
   }
 
   .fp-SliderRange[data-disabled] {
@@ -1605,8 +1698,8 @@
   box-sizing: border-box;
   display: block;
   z-index: 1;
-  width: var(--slider-track-size);
-  height: var(--slider-track-size);
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
   background-color: var(--slider-thumb-bg);
   border: 4px solid var(--figma-color-icon-onbrand);
   border-radius: var(--radius-full);
@@ -1631,19 +1724,21 @@
 .fp-SliderHint {
   position: absolute;
   display: block;
-  width: var(--space-1);
-  height: var(--space-1);
   background-color: var(--figma-color-icon-tertiary);
-  border-radius: var(--radius-full);
+  border-radius: var(--slider-hint-radius);
 }
 
   .fp-SliderHint[data-orientation='horizontal'] {
-    top: 50%;
+    top: calc(50% + var(--slider-hint-offset));
+    width: var(--slider-hint-width);
+    height: var(--slider-hint-height);
     transform: translateY(-50%);
   }
 
   .fp-SliderHint[data-orientation='vertical'] {
-    left: 50%;
+    left: calc(50% + var(--slider-hint-offset));
+    width: var(--slider-hint-height);
+    height: var(--slider-hint-width);
     transform: translateX(-50%);
   }
 
@@ -2066,7 +2161,7 @@
 .fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl, .fp-color-model-rgb, .fp-color-model-hex) {
   --slider-track-bg: linear-gradient(
     90deg,
-    rgba(255, 0, 0, 1) calc(var(--slider-track-size) / 2),
+    rgba(255, 0, 0, 1) var(--slider-thumb-inset),
     rgba(255, 48, 0, 1),
     rgba(255, 96, 0, 1),
     rgba(255, 143, 0, 1),
@@ -2097,7 +2192,7 @@
     rgba(255, 0, 191, 1),
     rgba(255, 0, 143, 1),
     rgba(255, 0, 96, 1),
-    rgba(255, 0, 48, 1) calc(100% - calc(var(--slider-track-size) / 2))
+    rgba(255, 0, 48, 1) calc(100% - var(--slider-thumb-inset))
   );
 }
   @supports (color: color(display-p3 1 1 1)) {
@@ -2106,7 +2201,7 @@
 .fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl):where(.fp-color-space-display-p3) {
       --slider-track-bg: linear-gradient(
         90deg,
-        color(display-p3 1 0 0) calc(var(--slider-track-size) / 2),
+        color(display-p3 1 0 0) var(--slider-thumb-inset),
         color(display-p3 1 0.1875 0),
         color(display-p3 1 0.375 0),
         color(display-p3 1 0.5625 0),
@@ -2137,7 +2232,7 @@
         color(display-p3 1 0 0.75),
         color(display-p3 1 0 0.5625),
         color(display-p3 1 0 0.375),
-        color(display-p3 1 0 0.1875) calc(100% - calc(var(--slider-track-size) / 2))
+        color(display-p3 1 0 0.1875) calc(100% - var(--slider-thumb-inset))
       );
 }
     }
@@ -2150,8 +2245,8 @@
 
   --slider-track-bg: linear-gradient(
       to right,
-      var(--track-bg-step-1) 0 calc(var(--slider-track-size) / 2),
-      var(--track-bg-step-2) calc(100% - calc(var(--slider-track-size) / 2)) 100%
+      var(--track-bg-step-1) 0 var(--slider-thumb-inset),
+      var(--track-bg-step-2) calc(100% - var(--slider-thumb-inset)) 100%
     ),
     url('data:image/svg+xml;utf8,%3Csvg%20width%3D%222%22%20height%3D%222%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h1v2h1V1H0%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23e1e1e1%22/%3E%3C/svg%3E')
       0 0 / auto 66.66%,

package/package.json

@@ -2,7 +2,7 @@
   "name": "figma-kit",
   "description": "A set of React components for building Figma plugins.",
   "homepage": "https://figma-kit.dev",
-  "version": "1.0.0-beta.26",
+  "version": "1.0.0-beta.28",
   "license": "MIT",
   "repository": {
     "type": "git",