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

package/dist/styles.css

@@ -568,7 +568,7 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-    width: var(--space-6);
+    width: var(--space-1);
   }
 .fp-ValueFieldScrubber[data-disabled] {
     cursor: default;
@@ -627,22 +627,32 @@
   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;
@@ -666,13 +676,34 @@
     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);
   }
 .fp-ValueFieldNumericSelect .fp-ValueFieldNumericSelectField {
@@ -1217,6 +1248,16 @@
     background-color: var(--figma-color-bg-selected-strong);
     --color-icon: var(--figma-color-icon-onbrand);
   }
+: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;
@@ -1235,18 +1276,26 @@
   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);
   }
 .fp-switchRoot[data-checked]::before {
     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);
@@ -1265,29 +1314,25 @@
 .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;
 }
 .fp-switchThumb[data-disabled] {
     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);
   }
 :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;
@@ -1306,13 +1351,36 @@
 }
 .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;
@@ -1322,9 +1390,19 @@
   height: 100%;
   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;
@@ -1336,13 +1414,13 @@
   outline-offset: -1px;
 }
 .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);
   }
 .fp-SliderRange {
@@ -1353,13 +1431,13 @@
 }
 .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] {
     background-color: var(--figma-color-bg-disabled);
@@ -1368,8 +1446,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);
@@ -1390,17 +1468,19 @@
 .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%);
   }
 .fp-SliderHint.fp-SliderHint-baseValue {
@@ -1739,7 +1819,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),
@@ -1770,7 +1850,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)) {
@@ -1778,7 +1858,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),
@@ -1809,7 +1889,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))
       );
 }
     }
@@ -1821,8 +1901,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%,