figma-kit 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/styles.css

@@ -5,28 +5,28 @@
   --font-family-monospace: 'Roboto Mono', monospace;
 }
 :root {
-  --space-0: 0px;
-  --space-px: 1px;
-  --space-0_5: 2px;
-  --space-1: 4px;
-  --space-1_5: 6px;
-  --space-2: 8px;
-  --space-2_5: 10px;
-  --space-3: 12px;
-  --space-3_5: 14px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-7: 28px;
-  --space-8: 32px;
-  --space-9: 36px;
-  --space-10: 40px;
-  --space-11: 44px;
-  --space-12: 48px;
-  --space-13: 52px;
-  --space-14: 56px;
-  --space-15: 60px;
-  --space-16: 64px;
+  --space-0: 0rem;
+  --space-px: 0.0625rem;
+  --space-0_5: 0.125rem;
+  --space-1: 0.25rem;
+  --space-1_5: 0.375rem;
+  --space-2: 0.5rem;
+  --space-2_5: 0.625rem;
+  --space-3: 0.75rem;
+  --space-3_5: 0.875rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 1.75rem;
+  --space-8: 2rem;
+  --space-9: 2.25rem;
+  --space-10: 2.5rem;
+  --space-11: 2.75rem;
+  --space-12: 3rem;
+  --space-13: 3.25rem;
+  --space-14: 3.5rem;
+  --space-15: 3.75rem;
+  --space-16: 4rem;
 }
 :root {
   --radius-extra-small: 0.0625rem;
@@ -79,15 +79,16 @@
   --letter-spacing-10: -0.0255rem;
   --letter-spacing-default: var(--letter-spacing-3);
 }
-:root {
+:root,
+.light,
+.light-theme {
   --elevation-100: 0px 0px 0.5px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
   --elevation-200: 0px 0px 0.5px rgba(0, 0, 0, 0.18), 0px 3px 8px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
   --elevation-300: 0px 0px 0.5px rgba(0, 0, 0, 0.15), 0px 5px 12px rgba(0, 0, 0, 0.13), 0px 1px 3px rgba(0, 0, 0, 0.1);
   --elevation-400: 0px 0px 0.5px rgba(0, 0, 0, 0.12), 0px 10px 16px rgba(0, 0, 0, 0.12), 0px 2px 5px rgba(0, 0, 0, 0.15);
   --elevation-500: 0px 0px 0.5px rgba(0, 0, 0, 0.08), 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
 }
-.dark,
-.dark-theme {
+.figma-dark {
   --elevation-100: 0px 0px 0.5px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(0, 0, 0, 0.4),
     inset 0px 0.5px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 0.5px rgba(255, 255, 255, 0.3);
 
@@ -113,7 +114,7 @@
   --color-text-menu-tertiary: var(--figma-color-text-oncomponent-tertiary);
   --color-icon-menu: var(--figma-color-icon-oncomponent);
   --shadow-menu: var(--elevation-400);
-  --font-size-menu: 12px;
+  --font-size-menu: var(--font-size-3);
 
   --color-bg-tooltip: #1e1e1e;
   --color-text-tooltip: #fff;
@@ -399,7 +400,7 @@
 .fp-Text:where(.fp-size-medium) {
     --font-size: var(--font-size-3);
     --line-height: var(--line-height-3);
-    --letter-spacing: --letter-spacing-3;
+    --letter-spacing: var(--letter-spacing-3);
   }
 .fp-Text:where(.fp-size-large) {
     --font-size: var(--font-size-5);
@@ -429,7 +430,7 @@
   }
 .fp-Text code {
     font-family: var(--font-family-monospace);
-    font-size: var(var(--font-size-2));
+    font-size: var(--font-size-2);
     background-color: var(--figma-color-bg-brand-tertiary);
     padding: 0.05rem 0.15rem;
     border-radius: var(--radius-extra-small);
@@ -522,6 +523,7 @@
 .fp-ValueFieldRoot {
   box-sizing: border-box;
   display: flex;
+  position: relative;
   align-items: center;
   border-radius: var(--radius-medium);
   padding: 0 1px;
@@ -551,6 +553,52 @@
     cursor: default;
     outline: 0;
   }
+.fp-ValueFieldScrubber {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  cursor: ew-resize;
+  color: var(--figma-color-text-secondary);
+  --color-icon: var(--figma-color-icon-secondary);
+}
+.fp-ValueFieldScrubber:empty {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: var(--space-1);
+  }
+.fp-ValueFieldScrubber[data-disabled] {
+    cursor: default;
+    color: var(--figma-color-text-disabled);
+    --color-icon: var(--figma-color-icon-disabled);
+  }
+.fp-ValueFieldScrubber:not(:empty) + .fp-ValueFieldBase {
+    padding-left: 0;
+  }
+.fp-ValueFieldScrubber .fp-ValueFieldLabel:last-child {
+    width: var(--space-6);
+  }
+.fp-ValueFieldScrubberCursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483647;
+  width: 26px;
+  height: 14px;
+  pointer-events: none;
+  color: var(--figma-color-text-oninverse);
+  filter: drop-shadow(0 1px 1px var(--figma-color-bg-inverse));
+}
+.fp-ValueFieldScrubberCursorIcon {
+  display: block;
+  width: 26px;
+  height: 14px;
+  fill: var(--figma-color-bg-inverse);
+  stroke: var(--figma-color-text-oninverse);
+}
 .fp-ValueFieldLabel {
   display: flex;
   align-items: center;
@@ -577,23 +625,34 @@
   }
 .fp-ValueFieldMulti {
   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;
@@ -617,6 +676,91 @@
     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]))::after {
+    border-color: transparent;
+  }
+.fp-ValueFieldNumericSelect:has(.fp-ValueFieldNumericSelectField:hover):where(:not([data-disabled]))::after {
+    border-color: var(--figma-color-border);
+  }
+.fp-ValueFieldNumericSelect .fp-ValueFieldNumericSelectField {
+    min-width: 0;
+  }
+.fp-ValueFieldNumericSelectTrigger {
+  all: unset;
+  appearance: none;
+  box-sizing: border-box;
+  align-self: flex-start;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 var(--space-6);
+  height: var(--space-6);
+  margin-top: -1px;
+  border-left: 1px solid var(--figma-color-bg);
+  border-top-right-radius: var(--radius-medium);
+  border-bottom-right-radius: var(--radius-medium);
+  color: var(--figma-color-text);
+  --color-icon: var(--figma-color-icon);
+}
+.fp-ValueFieldNumericSelectTrigger:hover:where(:not(:disabled)) {
+    background-color: var(--figma-color-bg-tertiary);
+  }
+.fp-ValueFieldNumericSelectTrigger:disabled {
+    color: var(--figma-color-text-disabled);
+    --color-icon: var(--figma-color-icon-disabled);
+  }
+.fp-ValueFieldNumericSelectTrigger > span:first-child {
+  position: absolute;
+  left: var(--space-2);
+  top: 0;
+  width: 0;
+  height: var(--space-6);
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+}
+.fp-ValueFieldNumericSelectPositioner {
+  display: flex;
+  flex-direction: column;
+  min-width: calc(var(--anchor-width) + var(--space-6) - 2px);
+  min-height: calc(var(--available-height) + var(--space-6) - 2px);
+}
+.fp-ValueFieldNumericSelectPositionerInOptions {
+  margin-top: calc(var(--space-2) + 1px) !important;
+}
+.fp-ValueFieldNumericSelectIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fp-ValueFieldNumericSelectCurrentItem {
+  background-color: var(--color-bg-menu-selected);
+}
 .fp-tooltip {
   box-sizing: border-box;
   padding: var(--space-1) var(--space-2);
@@ -631,10 +775,28 @@
   white-space: pre-wrap;
   word-break: break-word;
   border-radius: var(--radius-medium);
-  box-shadow: var(--elevation-300-tooltip, 0 2px 7px rgba(0, 0, 0, 0.15));
+  box-shadow: var(--elevation-300, 0 2px 7px rgba(0, 0, 0, 0.15));
 }
-.fp-arrow {
+.fp-tooltip-arrow {
   fill: var(--color-bg-tooltip);
+  width: var(--space-3_5);
+  height: 7px;
+  position: absolute;
+}
+.fp-tooltip-arrow[data-side='top'] {
+  top: calc(100% - 1px);
+}
+.fp-tooltip-arrow[data-side='bottom'] {
+  bottom: calc(100% - 1px);
+  transform: rotate(180deg);
+}
+.fp-tooltip-arrow[data-side='left'] {
+  left: calc(100% - 1px);
+  transform: rotate(-90deg);
+}
+.fp-tooltip-arrow[data-side='right'] {
+  right: calc(100% - 1px);
+  transform: rotate(90deg);
 }
 .fp-textarea {
   all: unset;
@@ -686,6 +848,7 @@
   letter-spacing: var(--letter-spacing-default);
   color: var(--color-text-menu);
   box-shadow: var(--elevation-400);
+  outline: 0;
 }
 .fp-MenuItem {
   position: relative;
@@ -714,9 +877,12 @@
   display: flex;
   align-items: center;
   height: var(--space-6);
-  padding: 0 var(--space-4);
+  padding: 0 var(--space-2);
   color: var(--color-text-menu-tertiary);
 }
+.fp-MenuLabel:where(.fp-MenuContent:has(.fp-MenuCheckboxItem, .fp-MenuRadioItem) .fp-MenuLabel) {
+    padding-left: var(--space-6);
+  }
 .fp-MenuGroup {
   padding: var(--space-2) 0;
 }
@@ -762,9 +928,19 @@
   letter-spacing: var(--letter-spacing-default);
   color: var(--figma-color-text);
 }
+.fp-SelectTrigger[data-disabled] {
+    color: var(--figma-color-text-disabled);
+    border-color: var(--figma-color-border-disabled);
+    --color-icon: var(--figma-color-icon-disabled);
+  }
 .fp-SelectTriggerIcon {
   margin-left: auto;
 }
+.fp-SelectPositioner {
+  display: flex;
+  flex-direction: column;
+  min-width: calc(var(--anchor-width) + var(--space-6) - 1px);
+}
 .fp-SelectScrollUpButton,
 .fp-SelectScrollDownButton {
   position: absolute;
@@ -789,6 +965,117 @@
   bottom: 0;
   border-radius: 0 0 var(--radius-large) var(--radius-large);
 }
+.fp-ComboboxTrigger {
+  cursor: default;
+}
+.fp-ComboboxTrigger:focus-visible {
+    border-color: var(--figma-color-border-selected);
+  }
+.fp-ComboboxTrigger[data-disabled] {
+    color: var(--figma-color-text-disabled);
+    border-color: var(--figma-color-border-disabled);
+  }
+.fp-ComboboxPositioner {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--anchor-width);
+  max-width: min(var(--available-width), 24rem);
+}
+.fp-ComboboxPopup {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-height: min(var(--available-height), 20rem);
+  min-width: var(--anchor-width);
+  padding: var(--space-2);
+  background-color: var(--figma-color-bg);
+  border-radius: var(--radius-large);
+  box-shadow: var(--elevation-500);
+  color: var(--figma-color-text);
+  font-family: var(--font-family-default);
+  font-size: var(--font-size-default);
+  font-weight: var(--font-weight-default);
+  letter-spacing: var(--letter-spacing-default);
+  outline: 0;
+  overflow: auto;
+}
+.fp-ComboboxInputGroup {
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+  --color-icon: var(--figma-color-icon-secondary);
+}
+.fp-ComboboxInputGroup > .fp-Icon {
+    position: absolute;
+    top: 50%;
+    left: var(--space-2);
+    z-index: 1;
+    transform: translateY(-50%);
+  }
+.fp-ComboboxInputGroup:has(.fp-ComboboxInput:disabled) {
+    --color-icon: var(--figma-color-icon-disabled);
+  }
+.fp-ComboboxInput {
+  min-width: 0;
+  padding-left: calc(var(--space-2) + var(--space-6) + var(--space-1));
+  padding-right: var(--space-6);
+}
+.fp-ComboboxList {
+  display: flex;
+  flex-direction: column;
+}
+.fp-ComboboxItem {
+  width: 100%;
+  box-sizing: border-box;
+  color: var(--figma-color-text);
+  line-height: var(--line-height-default);
+}
+.fp-ComboboxItem[data-selected] {
+    background-color: var(--figma-color-bg-selected-secondary);
+  }
+.fp-ComboboxItem[data-highlighted] {
+    background-color: var(--figma-color-bg-hover);
+  }
+.fp-ComboboxItem[data-selected][data-highlighted] {
+    background-color: var(--figma-color-bg-selected);
+  }
+.fp-ComboboxItem[data-disabled] {
+    color: var(--figma-color-text-disabled);
+  }
+.fp-ComboboxItemIndicator {
+  --color-icon: var(--figma-color-icon);
+}
+.fp-ComboboxMessage {
+  display: flex;
+  align-items: center;
+  min-height: var(--space-6);
+  padding: 0 var(--space-2);
+  color: var(--figma-color-text-secondary);
+}
+.fp-ComboboxMessage:empty {
+    min-height: 0;
+    padding: 0;
+  }
+.fp-ComboboxClear.fp-IconButton,
+.fp-ComboboxSearchClear.fp-IconButton {
+  --color-icon: var(--figma-color-icon-secondary);
+}
+.fp-ComboboxClear.fp-IconButton:hover, .fp-ComboboxSearchClear.fp-IconButton:hover {
+    background-color: transparent;
+    --color-icon: var(--figma-color-icon-secondary-hover);
+  }
+.fp-ComboboxClear.fp-IconButton[data-disabled] {
+  --color-icon: var(--figma-color-icon-disabled);
+}
+.fp-ComboboxSearchClear.fp-IconButton {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.fp-ComboboxInput:placeholder-shown + .fp-ComboboxSearchClear.fp-IconButton {
+  display: none;
+}
 .fp-Button {
   box-sizing: border-box;
   background-clip: border-box;
@@ -812,6 +1099,7 @@
   letter-spacing: var(--letter-spacing-default);
   line-height: var(--line-height-default);
   border-radius: var(--radius-medium);
+  --color-icon: currentColor;
 }
 .fp-Button:where(.fp-variant-secondary) {
   --button-color-bg: transparent;
@@ -957,76 +1245,105 @@
   width: var(--space-8);
   height: var(--space-8);
 }
-.fp-IconButton[data-state='open']:where(.fp-active-appearance-subtle) {
+.fp-IconButton:where(.fp-active-appearance-subtle):where([data-state='open'], [data-popup-open]) {
     background-color: var(--figma-color-bg-selected);
     --color-icon: var(--figma-color-icon-brand);
   }
-.fp-IconButton[data-state='open']:where(.fp-active-appearance-solid) {
+.fp-IconButton:where(.fp-active-appearance-solid):where([data-state='open'], [data-popup-open]) {
     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;
   position: relative;
   display: block;
-  width: var(--space-6);
-  height: var(--space-3);
+  width: var(--space-8);
+  height: var(--space-4);
   padding: 0;
-  background: linear-gradient(90deg, var(--figma-color-bg-brand) 0px 24px, var(--figma-color-icon-tertiary) 24px 48px);
-  background-repeat: no-repeat;
-  background-size: 200% 100%;
+  background: none;
   background-clip: padding-box;
   border-radius: var(--radius-full);
   border: 0;
-  transition: background-position 0.1s ease-out;
+  transition: background-position 0.08s ease-out;
+
+  /* Using ::before to render the background to create the real gap between the
+  outline and the background in the focused mode as it is in Figma.  */
 }
-.fp-switchRoot:focus-visible {
-    outline-offset: 2px;
-    outline: 2px solid var(--figma-color-border-selected);
+.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-disabled] {
-    background: var(--figma-color-icon-disabled);
-    border-color: var(--figma-color-icon-disabled);
+.fp-switchRoot[data-unchecked]:active::before {
+    background: var(--figma-color-bg-tertiary);
   }
-.fp-switchRoot[data-state='unchecked'] {
-    background-position: -24px;
+.fp-switchRoot[data-checked]::before {
+    background: var(--figma-color-bg-brand);
   }
-.fp-switchRoot[data-state='checked'] {
-    background-position: 0;
+.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);
+  }
+.fp-switchRoot:focus-visible::before {
+      inset: 2px;
+    }
+.fp-switchRoot[data-disabled][data-unchecked]::before {
+      /* This gives it more contrast than the disabled checked state but this is
+      how it is in Figma. ¯\_(ツ)_/¯  */
+      background: var(--figma-color-bg-disabled);
+    }
+.fp-switchRoot[data-disabled][data-checked]::before {
+      background: var(--figma-color-bg-tertiary);
+    }
 .fp-switchThumb {
   box-sizing: border-box;
   position: absolute;
-  top: 1px;
-  left: 1px;
-  height: var(--space-2_5);
-  width: var(--space-2_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.1s ease-out;
+  transition: all 0.08s ease-out;
 }
 .fp-switchThumb[data-disabled] {
-    background-color: var(--figma-color-bg);
-    border-color: var(--figma-color-bg);
-  }
-.fp-switchThumb[data-state='unchecked'] {
-    left: 1px;
+    background-color: var(--figma-color-icon-ondisabled);
   }
-.fp-switchThumb[data-state='checked'] {
-    left: calc(100% - var(--space-2_5) - 1px);
+.fp-switchThumb[data-checked] {
+    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);
-  --color-border-slider-track: #0000001a;
+  --slider-track-border-color: #0000001a;
+  --slider-track-bg: var(--figma-color-bg-secondary);
+  --slider-thumb-bg: transparent;
 }
-.dark,
-.dark-theme {
-  --color-border-slider-track: #ffffff1a;
+.figma-dark {
+  --slider-track-border-color: #ffffff1a;
 }
 .fp-SliderRoot {
   position: relative;
@@ -1039,31 +1356,76 @@
 }
 .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;
+  align-items: center;
+  flex-grow: 1;
+  width: 100%;
+  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: relative;
-  overflow: hidden;
+  position: static;
+  overflow: visible;
   flex-grow: 1;
-  background-color: var(--figma-color-bg-secondary);
+  background: var(--slider-track-bg);
   border-radius: var(--radius-full);
-  outline: 1px solid var(--color-border-slider-track);
+  outline: 1px solid var(--slider-track-border-color);
   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 {
@@ -1074,13 +1436,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);
@@ -1088,9 +1450,10 @@
 .fp-SliderThumb {
   box-sizing: border-box;
   display: block;
-  width: var(--slider-track-size);
-  height: var(--slider-track-size);
-  background-color: var(--figma-color-icon-onbrand);
+  z-index: 1;
+  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);
   box-shadow: var(--elevation-200);
@@ -1104,23 +1467,25 @@
 .fp-SliderThumb.fp-SliderThumb-focusVisible:focus-visible {
     outline: 1px solid var(--figma-color-border-selected);
   }
-.fp-SliderThumb.fp-SliderThumb-modified {
-    background-color: transparent;
+.fp-SliderThumb.fp-SliderThumb-baseValue {
+    --slider-thumb-bg: var(--figma-color-icon-onbrand);
   }
 .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 {
@@ -1242,7 +1607,7 @@
 .fp-TabsList {
   display: flex;
   overflow-y: auto;
-  gap: var(--space-2);
+  gap: var(--space-1);
 }
 .fp-TabsTrigger {
   all: unset;
@@ -1250,6 +1615,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   height: var(--space-6);
   padding: 0 var(--space-2);
   font-family: var(--font-family-default);
@@ -1257,17 +1623,22 @@
   font-weight: var(--font-weight-default);
   letter-spacing: var(--letter-spacing-default);
   line-height: var(--line-height-default);
+  color: var(--figma-color-text-secondary);
+  --color-icon: var(--figma-color-icon-secondary);
+  border-radius: var(--radius-medium);
+  white-space: nowrap;
 }
-.fp-TabsTrigger:where([data-state='inactive']) {
-    color: var(--figma-color-text-secondary);
-    --color-icon: var(--figma-color-icon-secondary);
+.fp-TabsTrigger:hover:where(:not([data-disabled])) {
+    background: var(--figma-color-bg-secondary);
   }
-.fp-TabsTrigger:where([data-state='active']) {
+.fp-TabsTrigger:where([data-active]) {
     font-weight: var(--font-weight-strong);
     color: var(--figma-color-text);
     --color-icon: var(--figma-color-icon);
     background: var(--figma-color-bg-secondary);
-    border-radius: var(--radius-medium);
+  }
+.fp-TabsTrigger:where([data-disabled]) {
+    color: var(--figma-color-text-disabled);
   }
 .fp-CheckboxRoot {
   position: relative;
@@ -1352,6 +1723,7 @@
 .fp-RadioGroupItem {
   all: unset;
   box-sizing: border-box;
+  display: inline-block;
   width: 16px;
   height: 16px;
   background-color: var(--figma-color-bg);
@@ -1363,14 +1735,14 @@
 .fp-RadioGroupItem:focus-visible {
     outline-color: var(--figma-color-border-selected);
   }
-.fp-RadioGroupItem[data-state='checked'] {
+.fp-RadioGroupItem[data-checked] {
     background-color: var(--figma-color-icon);
     border-color: var(--figma-color-bg);
   }
 .fp-RadioGroupItem[data-disabled] {
     outline-color: var(--figma-color-icon-disabled);
   }
-.fp-RadioGroupItem[data-disabled][data-state='checked'] {
+.fp-RadioGroupItem[data-disabled][data-checked] {
     background-color: var(--figma-color-icon-disabled);
   }
 .fp-RadioGroupLabel {
@@ -1407,7 +1779,7 @@
   white-space: nowrap;
   --color-icon: var(--figma-color-icon-secondary);
 }
-.fp-SegmentedControlItem[aria-checked='true'] {
+.fp-SegmentedControlItem[data-pressed] {
     --color-icon: var(--figma-color-icon);
     background-color: var(--figma-color-bg);
     box-shadow: inset 0 0 0 var(--space-px) var(--figma-color-border);
@@ -1442,10 +1814,187 @@
   font-weight: var(--font-weight-default);
   letter-spacing: var(--letter-spacing-default);
   line-height: var(--line-height-default);
+  color: var(--figma-color-text-secondary);
+}
+.fp-CollapsibleIndicator {
+  --color-icon: var(--figma-color-icon-secondary);
 }
-[data-state='open'] > .fp-CollapsibleIndicator {
+[data-panel-open] > .fp-CollapsibleIndicator {
     transform: rotate(90deg);
   }
 .fp-CollapsibleContent {
   margin-left: var(--space-4);
 }
+.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) var(--slider-thumb-inset),
+    rgba(255, 48, 0, 1),
+    rgba(255, 96, 0, 1),
+    rgba(255, 143, 0, 1),
+    rgba(255, 191, 0, 1),
+    rgba(255, 239, 0, 1),
+    rgba(223, 255, 0, 1),
+    rgba(175, 255, 0, 1),
+    rgba(128, 255, 0, 1),
+    rgba(80, 255, 0, 1),
+    rgba(32, 255, 0, 1),
+    rgba(0, 255, 16, 1),
+    rgba(0, 255, 64, 1),
+    rgba(0, 255, 112, 1),
+    rgba(0, 255, 159, 1),
+    rgba(0, 255, 207, 1),
+    rgba(0, 255, 255, 1),
+    rgba(0, 207, 255, 1),
+    rgba(0, 159, 255, 1),
+    rgba(0, 112, 255, 1),
+    rgba(0, 64, 255, 1),
+    rgba(0, 16, 255, 1),
+    rgba(32, 0, 255, 1),
+    rgba(80, 0, 255, 1),
+    rgba(127, 0, 255, 1),
+    rgba(175, 0, 255, 1),
+    rgba(223, 0, 255, 1),
+    rgba(255, 0, 239, 1),
+    rgba(255, 0, 191, 1),
+    rgba(255, 0, 143, 1),
+    rgba(255, 0, 96, 1),
+    rgba(255, 0, 48, 1) calc(100% - var(--slider-thumb-inset))
+  );
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.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) 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),
+        color(display-p3 1 0.75 0),
+        color(display-p3 1 0.9375 0),
+        color(display-p3 0.875 1 0),
+        color(display-p3 0.6875 1 0),
+        color(display-p3 0.5 1 0),
+        color(display-p3 0.3125 1 0),
+        color(display-p3 0.125 1 0),
+        color(display-p3 0 1 0.0625),
+        color(display-p3 0 1 0.25),
+        color(display-p3 0 1 0.4375),
+        color(display-p3 0 1 0.625),
+        color(display-p3 0 1 0.8125),
+        color(display-p3 0 1 1),
+        color(display-p3 0 0.8125 1),
+        color(display-p3 0 0.625 1),
+        color(display-p3 0 0.4375 1),
+        color(display-p3 0 0.25 1),
+        color(display-p3 0 0.0625 1),
+        color(display-p3 0.125 0 1),
+        color(display-p3 0.3125 0 1),
+        color(display-p3 0.5 0 1),
+        color(display-p3 0.6875 0 1),
+        color(display-p3 0.875 0 1),
+        color(display-p3 1 0 0.9375),
+        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% - var(--slider-thumb-inset))
+      );
+}
+    }
+  }
+.fp-ColorPickerAlphaSlider {
+  --track-bg-step-1: var(--track-bg-transparent-srgb);
+  --track-bg-step-2: var(--track-bg-opaque-srgb);
+  --slider-thumb-bg: var(--thumb-bg-srgb);
+
+  --slider-track-bg: linear-gradient(
+      to right,
+      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%,
+    #fff;
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.fp-ColorPickerAlphaSlider:where(.fp-color-space-display-p3) {
+      --slider-thumb-bg: var(--thumb-bg-p3);
+      --track-bg-step-1: var(--track-bg-transparent-p3);
+      --track-bg-step-2: var(--track-bg-opaque-p3);
+}
+    }
+  }
+.fp-ColorPickerArea {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+}
+.fp-ColorPickerAreaCanvas {
+  width: 100%;
+  height: 100%;
+  outline-width: 1px;
+  outline-style: solid;
+  outline-color: #0000001a; /*TODO: color-bordertranslucent*/
+  outline-offset: -1px;
+  --base-color: var(--base-color-srgb);
+  --gradient-step-black: rgb(0 0 0);
+  --gradient-step-black-transparent: rgb(0 0 0 / 0);
+  --gradient-step-white: rgb(255 255 255);
+  --gradient-step-white-transparent: rgb(255 255 255 / 0);
+  --gradient-step-gray: rgb(128 128 128);
+  --gradient-step-gray-transparent: rgb(128 128 128 / 0);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.fp-ColorPickerAreaCanvas:where(.fp-color-space-display-p3) {
+      --base-color: var(--base-color-p3);
+      --gradient-step-black: color(display-p3 0 0 0);
+      --gradient-step-black-transparent: color(display-p3 0 0 0 / 0);
+      --gradient-step-white: color(display-p3 1 1 1);
+      --gradient-step-white-transparent: color(display-p3 1 1 1 / 0);
+      --gradient-step-gray: color(display-p3 0.5 0.5 0.5);
+      --gradient-step-gray-transparent: color(display-p3 0.5 0.5 0.5 / 0);
+}
+    }
+  }
+.fp-ColorPickerAreaCanvas:where(.fp-color-model-hsv, .fp-color-model-hex, .fp-color-model-rgb) {
+  background: linear-gradient(to bottom, var(--gradient-step-black-transparent) 0%, var(--gradient-step-black) 100%),
+    linear-gradient(to right, var(--gradient-step-white) 0%, var(--base-color) 100%);
+}
+.fp-ColorPickerAreaCanvas:where(.fp-color-model-hsl) {
+  background: linear-gradient(
+      to bottom,
+      var(--gradient-step-white) 0%,
+      var(--gradient-step-white-transparent) 49.99%,
+      var(--gradient-step-black-transparent) 50.01%,
+      var(--gradient-step-black) 100%
+    ),
+    linear-gradient(to right, var(--gradient-step-gray) 0%, var(--gradient-step-gray-transparent) 100%),
+    var(--base-color);
+}
+.fp-ColorPickerThumb {
+  position: absolute;
+  box-sizing: border-box;
+  box-shadow: var(--elevation-200);
+  left: 0;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 4px;
+  border-color: white;
+  background: var(--thumb-bg-srgb);
+}
+.fp-ColorPickerThumb:focus-visible {
+    outline: 1px solid var(--figma-color-border-selected);
+  }
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.fp-ColorPickerThumb:where(.fp-color-space-display-p3) {
+      background: var(--thumb-bg-p3);
+}
+    }
+  }