@rogieking/figui3 2.18.3 → 2.19.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/components.css +13 -0
- package/index.html +28 -0
- package/package.json +1 -1
package/components.css
CHANGED
|
@@ -747,6 +747,19 @@ fig-button {
|
|
|
747
747
|
background-color: var(--figma-color-bg-secondary);
|
|
748
748
|
box-shadow: none;
|
|
749
749
|
color: var(--figma-color-text);
|
|
750
|
+
|
|
751
|
+
&:hover {
|
|
752
|
+
box-shadow: inset 0 0 0 1px var(--figma-color-border);
|
|
753
|
+
background-color: var(--figma-color-bg-transparent);
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
&:active {
|
|
757
|
+
background-color: var(--figma-color-bg-secondary);
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
&:focus-visible {
|
|
761
|
+
background-color: var(--figma-color-bg-secondary);
|
|
762
|
+
}
|
|
750
763
|
}
|
|
751
764
|
|
|
752
765
|
/* Variant: Overlay (for on top of content) */
|
package/index.html
CHANGED
|
@@ -288,6 +288,17 @@
|
|
|
288
288
|
<label>Link</label>
|
|
289
289
|
<fig-button variant="link">Link Button</fig-button>
|
|
290
290
|
</fig-field>
|
|
291
|
+
<fig-field direction="horizontal">
|
|
292
|
+
<label>Input</label>
|
|
293
|
+
<fig-button variant="input">Input Style</fig-button>
|
|
294
|
+
</fig-field>
|
|
295
|
+
<fig-field direction="horizontal">
|
|
296
|
+
<label>Input (with icon)</label>
|
|
297
|
+
<fig-button variant="input">
|
|
298
|
+
Options
|
|
299
|
+
<span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
|
|
300
|
+
</fig-button>
|
|
301
|
+
</fig-field>
|
|
291
302
|
|
|
292
303
|
<h3>Sizes</h3>
|
|
293
304
|
<fig-field direction="horizontal">
|
|
@@ -323,6 +334,11 @@
|
|
|
323
334
|
<fig-button variant="link"
|
|
324
335
|
disabled>Disabled</fig-button>
|
|
325
336
|
</fig-field>
|
|
337
|
+
<fig-field direction="horizontal">
|
|
338
|
+
<label>Disabled (input)</label>
|
|
339
|
+
<fig-button variant="input"
|
|
340
|
+
disabled>Disabled</fig-button>
|
|
341
|
+
</fig-field>
|
|
326
342
|
|
|
327
343
|
<h3>Icon Buttons</h3>
|
|
328
344
|
<fig-field direction="horizontal">
|
|
@@ -372,6 +388,13 @@
|
|
|
372
388
|
</svg>
|
|
373
389
|
</fig-button>
|
|
374
390
|
</fig-field>
|
|
391
|
+
<fig-field direction="horizontal">
|
|
392
|
+
<label>Icon (input)</label>
|
|
393
|
+
<fig-button variant="input"
|
|
394
|
+
icon="true">
|
|
395
|
+
<span class="fig-mask-icon" style="--icon: var(--icon-chevron); --size: 1rem"></span>
|
|
396
|
+
</fig-button>
|
|
397
|
+
</fig-field>
|
|
375
398
|
<fig-field direction="horizontal">
|
|
376
399
|
<label>Icon (link)</label>
|
|
377
400
|
<fig-button variant="link"
|
|
@@ -3751,6 +3774,11 @@
|
|
|
3751
3774
|
style="--icon: var(--icon-steppers); --size: 1.5rem"></span>
|
|
3752
3775
|
<code>--icon-steppers</code>
|
|
3753
3776
|
</vstack>
|
|
3777
|
+
<vstack style="align-items: center; gap: 4px;">
|
|
3778
|
+
<span class="fig-mask-icon"
|
|
3779
|
+
style="--icon: var(--icon-chevron); --size: 1rem"></span>
|
|
3780
|
+
<code>--icon-chevron</code>
|
|
3781
|
+
</vstack>
|
|
3754
3782
|
</hstack>
|
|
3755
3783
|
|
|
3756
3784
|
<h3>Custom Size</h3>
|
package/package.json
CHANGED