@rogieking/figui3 11.6.0 → 11.6.2

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.
Files changed (25) hide show
  1. package/.cursor/skills/fig-editor/components.md +10 -5
  2. package/.cursor/skills/fig-editor/reference.md +10 -4
  3. package/.cursor/skills/figui3/reference.md +8 -0
  4. package/CHANGELOG.md +32 -0
  5. package/README.md +32 -8
  6. package/components.css +3 -1
  7. package/dist/components.css +1 -1
  8. package/dist/fig-color.js +1 -0
  9. package/dist/fig-editor.css +1 -1
  10. package/dist/fig-editor.js +3 -3
  11. package/dist/fig-property.css +1 -1
  12. package/dist/fig.css +1 -1
  13. package/dist/fig.js +6 -6
  14. package/fig-color.js +406 -0
  15. package/fig-editor.css +1 -16
  16. package/fig-editor.js +39 -594
  17. package/fig-gradient-editor.css +6 -1
  18. package/fig-gradient-editor.js +566 -237
  19. package/fig-palette-editor.css +20 -0
  20. package/fig-palette-editor.js +745 -0
  21. package/fig-popup-gradient.js +9 -1
  22. package/fig-popup-palette.js +13 -2
  23. package/fig-property.css +4 -0
  24. package/fig.js +164 -177
  25. package/package.json +7 -2
package/dist/fig-property.css CHANGED
@@ -1 +1 @@
1
- fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}
1
+ fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[selected]:not([selected=false]){background-color:var(--figma-color-bg-selected)}&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}