@rogieking/figui3 3.9.3 → 3.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -1
- package/components.css +600 -299
- package/dist/fig.js +133 -76
- package/fig.js +1771 -276
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -487,7 +487,7 @@ A comprehensive fill input supporting colors, gradients, images, and video.
|
|
|
487
487
|
<fig-input-fill value='{"type":"solid","color":"#FF5733","opacity":100}'></fig-input-fill>
|
|
488
488
|
|
|
489
489
|
<!-- Gradient -->
|
|
490
|
-
<fig-input-fill value='{"type":"gradient","gradient":{"type":"linear","angle":90,"stops":[{"position":0,"color":"#FF0000"},{"position":100,"color":"#0000FF"}]}}'></fig-input-fill>
|
|
490
|
+
<fig-input-fill value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"oklab","stops":[{"position":0,"color":"#FF0000"},{"position":100,"color":"#0000FF"}]}}'></fig-input-fill>
|
|
491
491
|
|
|
492
492
|
<!-- Image -->
|
|
493
493
|
<fig-input-fill value='{"type":"image","image":{"url":"path/to/image.jpg","scaleMode":"fill"}}'></fig-input-fill>
|
|
@@ -495,6 +495,35 @@ A comprehensive fill input supporting colors, gradients, images, and video.
|
|
|
495
495
|
|
|
496
496
|
---
|
|
497
497
|
|
|
498
|
+
### Gradient Input (`<fig-input-gradient>`)
|
|
499
|
+
|
|
500
|
+
A gradient-only fill input that opens the `fig-fill-picker` locked to gradient mode.
|
|
501
|
+
|
|
502
|
+
| Attribute | Type | Default | Description |
|
|
503
|
+
|-----------|------|---------|-------------|
|
|
504
|
+
| `value` | string | — | JSON gradient fill data (`{ "type": "gradient", "gradient": ... }`) |
|
|
505
|
+
| `disabled` | boolean | `false` | Disable input |
|
|
506
|
+
| `experimental` | string | — | Optional picker feature flags (e.g. `"modern"`) |
|
|
507
|
+
| `picker-*` | string | — | Optional passthrough picker attributes (except `picker-anchor`) |
|
|
508
|
+
| `picker-anchor` | string | `"self"` | Anchor target selector or `"self"` |
|
|
509
|
+
|
|
510
|
+
```html
|
|
511
|
+
<fig-input-gradient
|
|
512
|
+
value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"oklch","hueInterpolation":"shorter","stops":[{"position":0,"color":"#FF0000","opacity":100},{"position":100,"color":"#0000FF","opacity":100}]}}'
|
|
513
|
+
></fig-input-gradient>
|
|
514
|
+
```
|
|
515
|
+
|
|
516
|
+
Supported gradient interpolation spaces:
|
|
517
|
+
- `srgb`
|
|
518
|
+
- `srgb-linear`
|
|
519
|
+
- `display-p3`
|
|
520
|
+
- `oklab`
|
|
521
|
+
- `oklch` (supports `hueInterpolation`: `shorter`, `longer`, `increasing`, `decreasing`)
|
|
522
|
+
|
|
523
|
+
Note: stop colors are currently authored/stored as hex (sRGB-origin). `display-p3` interpolation syntax is supported, but fully wide-gamut editing requires P3 stop-color storage.
|
|
524
|
+
|
|
525
|
+
---
|
|
526
|
+
|
|
498
527
|
### Fill Picker (`<fig-fill-picker>`)
|
|
499
528
|
|
|
500
529
|
A comprehensive fill picker dialog supporting solid colors, gradients, images, video, and webcam.
|