@rogieking/figui3 8.9.18 → 8.9.19

package/.cursor/skills/fig-editor/SKILL.md

@@ -128,7 +128,7 @@ Full fill editor. Core `fig-input-color` / `fig-input-fill` auto-open it when re
 </fig-fill-picker>
 ```
 
-Playground: `#fill-picker` — `all-modes`, `solid`, `gradient`, `image`, `video`, `webcam`.
+Playground: `#fill-picker` — `all-modes`, `solid`, `gradient`, `image`, `video`, `webcam`, `shader` (custom `slot="mode-shader"`).
 
 | Attr | Notes |
 |---|---|
@@ -161,13 +161,12 @@ Do not use `picker` or `picker-anchor` on `fig-input-color`. Forward picker chro
 ### Custom modes (vanilla)
 
 ```html
-<fig-fill-picker mode="solid,tokens">
-  <fig-swatch></fig-swatch>
+<fig-input-fill mode="solid,tokens" value='{"type":"tokens"}'>
   <div slot="mode-tokens" label="Tokens">Token UI</div>
-</fig-fill-picker>
+</fig-input-fill>
 ```
 
-Child `slot="mode-<name>"` plus `<name>` in `mode`. Custom content must dispatch `input` / `change` with `detail` so the picker stores mode data.
+Child `slot="mode-<name>"` plus `<name>` in `mode`. `fig-input-fill` forwards those slots to the inner picker and uses image-style chrome (type label + opacity). Custom content must dispatch `input` / `change` with `detail` so the picker stores mode data.
 
 ### Custom modes (React)
 

package/.cursor/skills/figui3/SKILL.md

@@ -138,7 +138,7 @@ Playground hashes: `/figui3#{id}`. Full attrs: [reference.md](reference.md).
 | Tag | Playground | Notes |
 |---|---|---|
 | `fig-input-color` | (propkit `#color`) | Solid color. `text`, `alpha`. Auto-detects `fig-fill-picker` |
-| `fig-input-fill` | `#fill-input` | Solid/gradient/image/video/webcam JSON `value`. Same `webcam` / `video.poster` shape as the picker. `webcam-mode`, `default-video`, `picker-*` forwarded if picker registered |
+| `fig-input-fill` | `#fill-input` | Solid/gradient/image/video/webcam/custom JSON `value`. Custom `mode-*` slots forward to the inner picker and use image-style chrome. Same `webcam` / `video.poster` shape as the picker. `webcam-mode`, `default-video`, `picker-*` forwarded if picker registered |
 | `fig-input-palette` | (propkit `#palette`) | Multi-color. `fixed`, `open` |
 | `fig-input-gradient` | (propkit `#gradient`) | Stops. `edit`, `mode="handle\|tip"` |
 | `fig-swatch` | `#swatch` | `size`, `selected`, `alpha` |

package/components.css

@@ -436,7 +436,7 @@
     0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
     0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
     inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
-    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
+    inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
 
   --fig-popover-shadow:
     drop-shadow(0px 1px 1.5px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)))
@@ -3166,7 +3166,6 @@ dialog[is="fig-popup"] {
     position: sticky;
     top: 0;
     z-index: 2;
-    background: var(--fig-popup-bg-color, var(--figma-color-bg));
   }
 
   &:has(> fig-header) {
@@ -3936,6 +3935,10 @@ fig-input-number {
 }
 
 fig-input-fill {
+  & > [slot^="mode-"] {
+    display: none;
+  }
+
   & > .input-combo > fig-fill-picker {
     display: contents;
   }