@rogieking/figui3 3.21.0 → 3.21.2

package/components.css

@@ -277,6 +277,11 @@
       rgba(255, 255, 255, 0.1) 0% 50%
     )
     0 0 / 0.66666rem 0.66666rem;
+  --checkerboard-small: repeating-conic-gradient(
+      rgba(0, 0, 0, 0.2) 0% 25%,
+      rgba(255, 255, 255, 0.2) 0% 50%
+    )
+    0 0 / 0.5rem 0.5rem;
   --bg-hue: linear-gradient(
     90deg,
     rgba(255, 0, 0, 1),
@@ -363,7 +368,7 @@
     inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
 
   --handle-shadow:
-    0px 0px 0px 0.5px rgba(0, 0, 0, 0.1),
+    0px 0px 0px 1px rgba(0, 0, 0, 0.2),
     0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
     0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
 }
@@ -1237,10 +1242,12 @@ fig-chit {
   }
   &::before {
     content: "";
-    background: var(--chit-background);
-    background-size: var(--chit-bg-size);
+    background: var(--chit-background), var(--checkerboard-small);
+    background-size:
+      var(--chit-bg-size),
+      0.5rem 0.5rem;
     background-position: var(--chit-bg-position);
-    background-repeat: no-repeat;
+    background-repeat: no-repeat, repeat;
     border-radius: calc(var(--border-radius) - (var(--padding) / 2));
     mask-image: linear-gradient(
       to right,
@@ -1866,13 +1873,17 @@ fig-origin-grid {
 
 /* Switch */
 input[type="checkbox"].switch {
+  --knob-width: 0.75rem;
+  --knob-height: 0.5rem;
+  --width: 2rem;
+  --height: 1rem;
   contain: strict;
   display: inline-flex;
   margin: 0;
   vertical-align: middle;
   padding: 0;
-  width: 2rem;
-  height: 1rem;
+  width: var(--width);
+  height: var(--height);
   left: 0;
   top: 0;
   background: transparent;
@@ -1888,22 +1899,26 @@ input[type="checkbox"].switch {
   transition: var(--input-transition);
   box-sizing: border-box;
   box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
-}
-
-input[type="checkbox"].switch:after {
-  content: "";
-  background-color: var(--handle-color);
-  width: calc(1rem - 2px);
-  height: calc(1rem - 2px);
-  border-radius: 0.5rem;
-  margin: 1px;
-  transform: translate(calc(-0.5rem));
-  transition: var(--input-transition);
-  box-shadow: var(--handle-shadow);
+  &:after {
+    content: "";
+    background-color: var(--handle-color);
+    width: var(--knob-width);
+    height: var(--knob-height);
+    border-radius: 0.5rem;
+    margin: 0.25rem;
+    transform: translate(
+      calc(
+        (var(--width) - var(--knob-width)) * -0.5 +
+          (var(--height) - var(--knob-height)) * 0.5
+      )
+    );
+    transition: var(--input-transition);
+    box-shadow: var(--handle-shadow);
+  }
 }
 
 input[type="checkbox"].switch[indeterminate="true"]:after {
-  width: 0.5rem;
+  width: 0.625rem;
   height: 0.125rem;
   transform: none;
 }
@@ -1914,14 +1929,29 @@ input[type="checkbox"].switch:checked {
 }
 
 input[type="checkbox"].switch:checked:after {
-  transform: translate(0.5rem);
+  transform: translate(
+    calc(
+      (var(--width) - var(--knob-width)) * 0.5 +
+        (var(--height) - var(--knob-height)) * -0.5
+    )
+  );
 }
 
 input[type="checkbox"].switch:disabled {
-  background-color: var(--figma-color-bg-secondary);
+  background-color: transparent;
   cursor: not-allowed;
   &:after {
-    background-color: var(--figma-color-bg);
+    background-color: var(--figma-color-icon-disabled);
+    box-shadow: none;
+  }
+
+  &:checked,
+  &[indeterminate="true"] {
+    background-color: var(--figma-color-bg-disabled);
+    box-shadow: none;
+    &:after {
+      background-color: var(--figma-color-bg);
+    }
   }
 }
 
@@ -2790,6 +2820,7 @@ fig-tooltip {
   filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
     drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
     drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
+  pointer-events: none;
 
   & > span {
     text-wrap: balance;
@@ -4897,12 +4928,14 @@ fig-handle {
     color-scheme: light only;
     width: calc(var(--width) - var(--ring-width) * 2);
     height: calc(var(--height) - var(--ring-width) * 2);
-    background: var(--fill);
+    background:
+      linear-gradient(var(--fill), var(--fill)), var(--checkerboard-small);
     border-radius: var(--border-radius);
     box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
     place-self: center;
     grid-area: 1 / 1;
     z-index: 2;
+    display: none;
   }
 
   &[size="small"] {
@@ -4925,6 +4958,11 @@ fig-handle {
     pointer-events: none;
     cursor: default;
   }
+  &[type="color"] {
+    &::after {
+      display: block;
+    }
+  }
 
   &[type="color"],
   &[control] {