figma-kit 1.0.0-beta.10 → 1.0.0-beta.12

package/dist/styles.css

@@ -1029,10 +1029,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;
 }
 .figma-dark {
-  --color-border-slider-track: #ffffff1a;
+  --slider-track-border-color: #ffffff1a;
 }
 .fp-SliderRoot {
   position: relative;
@@ -1057,9 +1059,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'] {
@@ -1096,7 +1098,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);
@@ -1110,8 +1112,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;
@@ -1459,3 +1461,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);
+}
+    }
+  }

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.10",
+  "version": "1.0.0-beta.12",
   "license": "MIT",
   "repository": {
     "type": "git",