@rogieking/figui3 6.33.0 → 6.34.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 +3 -1
- package/components.css +50 -4
- package/dist/components.css +1 -1
- package/dist/fig.css +1 -1
- package/fig.js +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -145,7 +145,7 @@ Minimal example:
|
|
|
145
145
|
|
|
146
146
|
| Attribute | Type | Default | Description |
|
|
147
147
|
|---|---|---|---|
|
|
148
|
-
| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"ghost"`, `"link"` |
|
|
148
|
+
| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"destructive"`, `"destructiveSecondary"`, `"ghost"`, `"link"` |
|
|
149
149
|
| `type` | string | `"button"` | `"button"`, `"toggle"`, `"submit"`, `"select"`, `"upload"` |
|
|
150
150
|
| `size` | string | — | `"large"`, `"compact"` |
|
|
151
151
|
| `selected` | boolean | `false` | Selected state (toggle type) |
|
|
@@ -157,6 +157,8 @@ Minimal example:
|
|
|
157
157
|
```html
|
|
158
158
|
<fig-button>Primary</fig-button>
|
|
159
159
|
<fig-button variant="secondary">Secondary</fig-button>
|
|
160
|
+
<fig-button variant="destructive">Delete</fig-button>
|
|
161
|
+
<fig-button variant="destructiveSecondary">Destructive secondary</fig-button>
|
|
160
162
|
<fig-button type="toggle" selected="true">Toggle</fig-button>
|
|
161
163
|
<fig-button variant="ghost" icon>
|
|
162
164
|
<svg><!-- icon --></svg>
|
package/components.css
CHANGED
|
@@ -803,6 +803,41 @@ fig-button {
|
|
|
803
803
|
}
|
|
804
804
|
}
|
|
805
805
|
|
|
806
|
+
/* Variant: Destructive */
|
|
807
|
+
&[variant="destructive"] {
|
|
808
|
+
background-color: var(--figma-color-bg-danger);
|
|
809
|
+
color: var(--figma-color-text-ondanger);
|
|
810
|
+
|
|
811
|
+
&:hover {
|
|
812
|
+
background-color: var(--figma-color-bg-danger-hover);
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
&:active,
|
|
816
|
+
&:hover:active {
|
|
817
|
+
background-color: var(--figma-color-bg-danger-pressed);
|
|
818
|
+
color: var(--figma-color-text-ondanger-secondary);
|
|
819
|
+
}
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
/* Variant: Destructive Secondary */
|
|
823
|
+
&[variant="destructiveSecondary"] {
|
|
824
|
+
box-shadow: inset 0 0 0 1px var(--figma-color-border-danger);
|
|
825
|
+
padding: 0 calc(var(--spacer-2) - 1px);
|
|
826
|
+
background: none;
|
|
827
|
+
color: var(--figma-color-text-danger);
|
|
828
|
+
|
|
829
|
+
&:hover {
|
|
830
|
+
background-color: var(--figma-color-bg-danger-tertiary);
|
|
831
|
+
}
|
|
832
|
+
|
|
833
|
+
&:active,
|
|
834
|
+
&:hover:active {
|
|
835
|
+
box-shadow: inset 0 0 0 1px var(--figma-color-border-danger-strong);
|
|
836
|
+
background-color: var(--figma-color-bg-danger-tertiary);
|
|
837
|
+
color: var(--figma-color-text-danger-secondary);
|
|
838
|
+
}
|
|
839
|
+
}
|
|
840
|
+
|
|
806
841
|
/* Variant: Link */
|
|
807
842
|
&[variant="link"] {
|
|
808
843
|
box-shadow: none;
|
|
@@ -910,11 +945,12 @@ fig-button {
|
|
|
910
945
|
background-color: var(--figma-color-bg-disabled);
|
|
911
946
|
pointer-events: none;
|
|
912
947
|
cursor: not-allowed;
|
|
913
|
-
&:not([variant="secondary"]) {
|
|
948
|
+
&:not([variant="secondary"]):not([variant="destructiveSecondary"]) {
|
|
914
949
|
color: var(--figma-color-text-ondisabled);
|
|
915
950
|
box-shadow: none;
|
|
916
951
|
}
|
|
917
952
|
&[variant="secondary"],
|
|
953
|
+
&[variant="destructiveSecondary"],
|
|
918
954
|
&[variant="ghost"] {
|
|
919
955
|
color: var(--figma-color-text-disabled);
|
|
920
956
|
background-color: transparent;
|
|
@@ -2280,6 +2316,10 @@ fig-combo-input fig-button[type="select"] {
|
|
|
2280
2316
|
margin-left: -1px;
|
|
2281
2317
|
}
|
|
2282
2318
|
|
|
2319
|
+
input[type="checkbox"] {
|
|
2320
|
+
flex-shrink: 0;
|
|
2321
|
+
}
|
|
2322
|
+
|
|
2283
2323
|
/* Switch */
|
|
2284
2324
|
input[type="checkbox"].switch {
|
|
2285
2325
|
--knob-width: 0.75rem;
|
|
@@ -3257,8 +3297,6 @@ fig-dropdown {
|
|
|
3257
3297
|
|
|
3258
3298
|
fig-checkbox,
|
|
3259
3299
|
fig-radio {
|
|
3260
|
-
|
|
3261
|
-
align-items: center;
|
|
3262
3300
|
padding-top: 0.25rem;
|
|
3263
3301
|
padding-bottom: 0.25rem;
|
|
3264
3302
|
|
|
@@ -3267,8 +3305,16 @@ fig-radio {
|
|
|
3267
3305
|
}
|
|
3268
3306
|
}
|
|
3269
3307
|
|
|
3270
|
-
fig-
|
|
3308
|
+
fig-checkbox {
|
|
3309
|
+
align-items: flex-start;
|
|
3310
|
+
}
|
|
3311
|
+
|
|
3312
|
+
fig-radio {
|
|
3271
3313
|
align-items: center;
|
|
3314
|
+
}
|
|
3315
|
+
|
|
3316
|
+
fig-switch {
|
|
3317
|
+
align-items: flex-start;
|
|
3272
3318
|
padding-top: 0.25rem;
|
|
3273
3319
|
padding-bottom: 0.25rem;
|
|
3274
3320
|
}
|