@rogieking/figui3 3.21.1 → 3.22.0

package/.cursor/skills/propkit/SKILL.md

@@ -111,8 +111,7 @@ bootstrap();
 - Use `transform` when internal value scale differs from UI display (example: internal `0..1`, display `0..100%`).
 - Variants:
   - Default variant for most property panels.
-  - `variant="minimal"` for visually quieter contexts.
-  - `variant="neue"` only where explicitly requested for that panel's style.
+  - `variant="neue"` for a compact, visually quieter style.
 - Always set explicit `min`, `max`, and `step` (and `units` where applicable) to keep behavior predictable.
 
 ### Control Selection Heuristics
@@ -176,7 +175,7 @@ Use a horizontal fig-field, with a fig-slider, min=0 max=100 text=true units=%.
 </fig-field>
 <fig-field direction="horizontal">
   <label>Hue</label>
-  <fig-slider type="hue" value="180" text="true" variant="minimal" full></fig-slider>
+  <fig-slider type="hue" value="180" text="true" variant="neue" full></fig-slider>
 </fig-field>
 <fig-field direction="horizontal">
   <label>Offset</label>

package/README.md

@@ -451,7 +451,7 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
 
 ```html
 <fig-input-palette value='["#FF0000","#00FF00","#0000FF"]'></fig-input-palette>
-<fig-input-palette value='[{"color":"#FF0000","alpha":0.5},{"color":"#00FF00","alpha":1}]' expanded="true"></fig-input-palette>
+<fig-input-palette value='[{"color":"#FF0000","alpha":0.5},{"color":"#00FF00","alpha":1}]' open></fig-input-palette>
 ```
 
 ---

package/components.css

@@ -368,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);
 }
@@ -1178,7 +1178,7 @@ fig-chit {
   --width: var(--size);
   --height: var(--size);
   --border-radius: var(--radius-medium);
-  --chit-background: #d9d9d9;
+  --chit-background: linear-gradient(#d9d9d9, #d9d9d9);
   --chit-bg-size: cover;
   --chit-bg-position: center;
   --selected: 0;
@@ -1194,9 +1194,14 @@ fig-chit {
 
   &::before,
   &::after,
+  div,
   input {
     grid-area: 1/1;
   }
+  & > div {
+    background: var(--checkerboard-small);
+    border-radius: var(--border-radius);
+  }
 
   /* Selection ring */
   &[selected]:not([selected="false"]) {
@@ -1210,6 +1215,9 @@ fig-chit {
     &[selected]:not([selected="false"]) {
       --padding: 3px;
     }
+    & > div {
+      background: var(--checkerboard);
+    }
   }
 
   &[size="medium"] {
@@ -1227,7 +1235,8 @@ fig-chit {
   }
 
   &::before,
-  &::after {
+  &::after,
+  & > div {
     content: "";
     width: calc(var(--width) - var(--padding) * 2);
     height: calc(var(--height) - var(--padding) * 2);
@@ -1242,12 +1251,10 @@ fig-chit {
   }
   &::before {
     content: "";
-    background: var(--chit-background), var(--checkerboard-small);
-    background-size:
-      var(--chit-bg-size),
-      0.5rem 0.5rem;
+    background: var(--chit-background);
+    background-size: var(--chit-bg-size);
     background-position: var(--chit-bg-position);
-    background-repeat: no-repeat, repeat;
+    background-repeat: no-repeat;
     border-radius: calc(var(--border-radius) - (var(--padding) / 2));
     mask-image: linear-gradient(
       to right,
@@ -1280,14 +1287,6 @@ fig-chit {
       display: none;
     }
   }
-
-  /* Checkerboard for empty/missing images */
-  &[data-type="image"]:not([background])::after,
-  &[data-type="image"][background=""]::after,
-  &[data-type="image"][background="url()"]::after,
-  &[checkerboard]:not([checkerboard="false"])::after {
-    background: var(--checkerboard);
-  }
 }
 
 /* Fig Image */
@@ -1873,13 +1872,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;
@@ -1895,22 +1898,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;
 }
@@ -1921,14 +1928,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);
+    }
   }
 }
 
@@ -2454,37 +2476,6 @@ fig-slider {
     }
   }
 
-  &[variant="minimal"] {
-    --slider-height: 0.375rem;
-    --slider-thumb-size: 0.75rem;
-    --slider-tick-width: calc(var(--slider-height) / 2);
-    --slider-tick-height: calc(var(--slider-height) / 2);
-    --handle-transition: none;
-    --slider-transition: none;
-    --slider-handle-shadow:
-      inset 0 0 0 calc(6px + 0.5rem * var(--unchanged))
-        var(--slider-thumb-color),
-      0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
-      var(--figma-elevation-100);
-
-    .fig-slider-input-container {
-      height: var(--slider-height);
-      position: relative;
-      display: block;
-      width: 100%;
-    }
-    fig-input-text {
-      height: calc(var(--slider-height) * 2);
-      background-color: transparent;
-    }
-
-    &:hover,
-    &:focus-within {
-      fig-input-text {
-        height: auto;
-      }
-    }
-  }
   &[variant="neue"] {
     --slider-height: 0.375rem;
     --slider-thumb-size: 0.75rem;
@@ -2793,10 +2784,11 @@ fig-tooltip {
   max-width: 180px;
   width: max-content;
   box-shadow: inset 0 0.5px 0 0
-    light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.06));
+    light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
   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;
@@ -2925,10 +2917,13 @@ fig-header {
   align-items: center;
   box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
   gap: 0.25rem;
+  user-select: none;
 
   & h3 {
     font-weight: var(--body-medium-strong-fontWeight);
     flex-grow: 1;
+    display: flex;
+    align-items: center;
   }
 
   &[borderless] {
@@ -2936,6 +2931,65 @@ fig-header {
   }
 }
 
+fig-group {
+  display: block;
+  padding-bottom: var(--spacer-2-5);
+
+  /* Sibling groups  */
+  & + fig-group {
+    box-shadow: inset 0 1px 0 0 var(--figma-color-border);
+    &:not([name]) {
+      padding-top: var(--spacer-2-5);
+    }
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+  }
+
+  & > fig-header {
+    cursor: default;
+    padding-left: var(--spacer-3);
+    h3 {
+      .fig-group-chevron {
+        --icon: var(--icon-chevron);
+        --size: 1rem;
+        color: var(--figma-color-text-tertiary);
+        transform: rotate(-90deg);
+        transition: transform var(--transition-duration)
+          var(--transition-timing-function);
+        margin-left: calc(var(--spacer-3) * -1);
+      }
+    }
+  }
+
+  &[collapsible] > fig-header h3 {
+    user-select: none;
+  }
+
+  &[collapsible]:not([open]):not([open="true"]),
+  &[collapsible][open="false"] {
+    padding-bottom: 0;
+    fig-header {
+      color: var(--figma-color-text-secondary);
+      &:hover {
+        color: var(--figma-color-text);
+        .fig-group-chevron {
+          color: inherit;
+        }
+      }
+    }
+  }
+
+  &[open]:not([open="false"]) > fig-header .fig-group-chevron {
+    transform: rotate(0deg);
+  }
+
+  &[collapsible]:not([open]):not([open="true"]) > :not(fig-header),
+  &[collapsible][open="false"] > :not(fig-header) {
+    display: none;
+  }
+}
+
 fig-footer {
   display: flex;
   align-items: center;
@@ -3219,12 +3273,18 @@ fig-input-palette {
   flex-direction: column;
   gap: var(--spacer-2);
   min-width: 0;
+  border-radius: var(--radius-medium);
+
+  &:focus {
+    outline: 1px solid var(--figma-color-border-selected) !important;
+    outline-offset: -1px !important;
+  }
 
   .palette-colors {
     display: flex;
     flex-wrap: nowrap;
     gap: 0;
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-medium);
     overflow: hidden;
     grid-area: inputs;
     min-width: 0;
@@ -3239,18 +3299,14 @@ fig-input-palette {
     grid-template-columns: 1fr 24px;
     grid-template-areas: "inputs button";
     border-radius: var(--radius-medium);
-    background-color: var(--figma-color-bg-secondary);
     width: 100%;
-    gap: var(--spacer-1);
+    gap: var(--spacer-2);
     place-items: center;
 
     .palette-colors {
       display: flex;
-      --palette-colors-height: calc(1.5rem - var(--spacer-1));
+      --palette-colors-height: 1.5rem;
       height: var(--palette-colors-height);
-      margin-left: var(--spacer-1);
-
-      background-color: var(--figma-color-bg-secondary);
       fig-input-color {
         width: 100%;
       }
@@ -3274,7 +3330,7 @@ fig-input-palette {
       }
     }
   }
-  &[expanded]:not([expanded="false"]):not([edit="false"]) {
+  &[open]:not([open="false"]):not([edit="false"]) {
     .palette-colors-expanded {
       display: flex;
     }
@@ -3285,11 +3341,6 @@ 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;
@@ -3311,10 +3362,6 @@ fig-input-palette {
   }
 }
 
-fig-field[direction="horizontal"]:has(> fig-input-palette) {
-  padding-right: var(--spacer-2);
-}
-
 fig-slider {
   display: flex;
 
@@ -3360,30 +3407,46 @@ fig-field,
   & > label {
     flex: 0;
     padding: var(--spacer-1) 0;
-    display: flex;
-    justify-content: space-between;
     min-height: calc(1rem + var(--spacer-1) * 2);
+    display: flex;
     align-items: center;
     width: 100%;
+    user-select: none;
+  }
+
+  & > .fig-field-chevron {
+    --icon: var(--icon-chevron);
+    --size: 1rem;
+    color: var(--figma-color-text-tertiary);
+    transform: rotate(-90deg);
+    transition: transform var(--transition-duration)
+      var(--transition-timing-function);
+    flex-shrink: 0;
+    margin: var(--spacer-1) 0;
+    margin-left: calc(var(--spacer-3) * -1);
+    margin-right: calc(var(--spacer-2) * -1);
+  }
+
+  &:has(> [open]:not([open="false"])) > .fig-field-chevron {
+    transform: rotate(0deg);
   }
 
   &[direction="horizontal"] > label {
+    display: block;
     width: auto;
     min-width: var(--field-label-width);
     max-width: var(--field-label-width);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    padding: 0;
+    line-height: 1.5rem;
   }
 
   &[direction="horizontal"] {
     gap: var(--spacer-2);
     align-items: start;
     flex-direction: row;
-
-    & > label {
-      min-width: 4rem;
-    }
     &[columns="thirds"] {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
@@ -4911,6 +4974,7 @@ fig-handle {
     place-self: center;
     grid-area: 1 / 1;
     z-index: 2;
+    display: none;
   }
 
   &[size="small"] {
@@ -4933,6 +4997,11 @@ fig-handle {
     pointer-events: none;
     cursor: default;
   }
+  &[type="color"] {
+    &::after {
+      display: block;
+    }
+  }
 
   &[type="color"],
   &[control] {