figma-kit 1.0.0-beta.2 → 1.0.0-beta.23

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);
 
@@ -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);
@@ -626,15 +627,19 @@
   font-weight: var(--font-weight-default);
   letter-spacing: var(--letter-spacing-default);
   line-height: var(--line-height-default);
-  height: var(--space-6);
+  min-height: var(--space-6);
   color: var(--color-text-tooltip);
   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: relative;
+  bottom: 1px;
 }
 .fp-textarea {
   all: unset;
@@ -717,6 +722,9 @@
   padding: 0 var(--space-4);
   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;
 }
@@ -812,6 +820,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;
@@ -970,51 +979,65 @@
   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 {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-full);
+    background: none;
+    content: '';
   }
-.fp-switchRoot[data-disabled] {
-    background: var(--figma-color-icon-disabled);
-    border-color: var(--figma-color-icon-disabled);
+.fp-switchRoot[data-state='unchecked']::before {
+    background: var(--figma-color-bg-tertiary);
   }
-.fp-switchRoot[data-state='unchecked'] {
-    background-position: -24px;
+.fp-switchRoot[data-state='checked']::before {
+    background: var(--figma-color-bg-brand);
   }
-.fp-switchRoot[data-state='checked'] {
-    background-position: 0;
+.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-state='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-state='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);
+  height: var(--space-3_5);
+  width: var(--space-3_5);
   border-radius: var(--radius-full);
   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);
+    background-color: var(--figma-color-icon-ondisabled);
   }
 .fp-switchThumb[data-state='unchecked'] {
     left: 1px;
   }
 .fp-switchThumb[data-state='checked'] {
-    left: calc(100% - var(--space-2_5) - 1px);
+    left: calc(100% - var(--space-3_5) - 1px);
   }
 :root,
 .light,
@@ -1022,11 +1045,12 @@
   --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;
@@ -1051,9 +1075,9 @@
   position: relative;
   overflow: hidden;
   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'] {
@@ -1090,7 +1114,7 @@
   display: block;
   width: var(--slider-track-size);
   height: var(--slider-track-size);
-  background-color: var(--figma-color-icon-onbrand);
+  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,8 +1128,8 @@
 .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;
@@ -1250,6 +1274,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,6 +1282,7 @@
   font-weight: var(--font-weight-default);
   letter-spacing: var(--letter-spacing-default);
   line-height: var(--line-height-default);
+  white-space: nowrap;
 }
 .fp-TabsTrigger:where([data-state='inactive']) {
     color: var(--figma-color-text-secondary);
@@ -1442,6 +1468,10 @@
   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 {
     transform: rotate(90deg);
@@ -1449,3 +1479,176 @@
 .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) calc(var(--slider-track-size) / 2),
+    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% - calc(var(--slider-track-size) / 2))
+  );
+}
+@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) calc(var(--slider-track-size) / 2),
+        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% - calc(var(--slider-track-size) / 2))
+      );
+}
+    }
+  }
+.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 calc(var(--slider-track-size) / 2),
+      var(--track-bg-step-2) calc(100% - calc(var(--slider-track-size) / 2)) 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);
+}
+    }
+  }