@rogieking/figui3 3.20.3 → 3.21.1

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),
@@ -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,
@@ -3146,6 +3153,7 @@ fig-input-fill {
 }
 fig-input-gradient {
   --height: 1.5rem;
+  --chit-height: var(--height);
   position: relative;
   height: var(--height);
   width: 100%;
@@ -3157,12 +3165,34 @@ fig-input-gradient {
     outline: 1px solid var(--figma-color-border-selected) !important;
     outline-offset: -1px !important;
   }
-  & > fig-chit {
+
+  &[edit="false"] {
+    pointer-events: none;
+
+    &:focus,
+    &:active,
+    &:focus-within {
+      outline: none !important;
+    }
+  }
+
+  &[edit="picker"] {
+    & > fig-fill-picker {
+      display: contents;
+    }
+  }
+  & > fig-chit,
+  & > fig-fill-picker > fig-chit {
     --padding: 0;
     --width: 100%;
+    --height: var(--chit-height);
     flex: 1 1 auto;
     width: 100% !important;
     min-width: 0 !important;
+    min-height: var(--chit-height) !important;
+  }
+  &[size="large"] {
+    --height: 3rem;
   }
 
   .fig-input-gradient-track {
@@ -3194,7 +3224,7 @@ fig-input-palette {
     display: flex;
     flex-wrap: nowrap;
     gap: 0;
-    border-radius: var(--radius-medium);
+    border-radius: var(--radius-small);
     overflow: hidden;
     grid-area: inputs;
     min-width: 0;
@@ -3211,9 +3241,15 @@ fig-input-palette {
     border-radius: var(--radius-medium);
     background-color: var(--figma-color-bg-secondary);
     width: 100%;
+    gap: var(--spacer-1);
+    place-items: center;
 
     .palette-colors {
       display: flex;
+      --palette-colors-height: calc(1.5rem - var(--spacer-1));
+      height: var(--palette-colors-height);
+      margin-left: var(--spacer-1);
+
       background-color: var(--figma-color-bg-secondary);
       fig-input-color {
         width: 100%;
@@ -3223,10 +3259,11 @@ fig-input-palette {
         --padding: 0px;
         --border-radius: 0px;
         --width: 100%;
+        --height: var(--palette-colors-height);
+        --size: var(--palette-colors-height);
         flex: 1;
         min-width: 0;
         width: 100% !important;
-        height: var(--size);
         border-radius: 0 !important;
         input,
         &::before,
@@ -3248,6 +3285,11 @@ fig-input-palette {
       grid-template-areas: "inputs inputs";
     }
   }
+  &[color-strip="false"] {
+    .palette-colors-inline {
+      display: none !important;
+    }
+  }
   .palette-colors-expanded {
     display: none;
     flex-direction: column;
@@ -4375,17 +4417,13 @@ fig-preview {
     }
   }
 
-  .fig-fill-picker-gradient-bar {
-    background: linear-gradient(90deg, #d9d9d9 0%, #737373 100%);
-  }
-
-  .fig-fill-picker-gradient-stops-handles {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
+  .fig-fill-picker-gradient-preview {
+    display: block;
+    .fig-fill-picker-gradient-bar-input {
+      --width: 100%;
+      --height: 100%;
+      aspect-ratio: 1/1;
+    }
   }
 
   .fig-fill-picker-gradient-stops {
@@ -4866,7 +4904,8 @@ 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;