@rogieking/figui3 6.34.0 → 6.35.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 +2 -1
- package/components.css +20 -1
- package/dist/components.css +1 -1
- package/dist/fig.css +1 -1
- package/fig.js +1 -1
- 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"`, `"destructive"`, `"destructiveSecondary"`, `"ghost"`, `"link"` |
|
|
148
|
+
| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"destructive"`, `"destructiveSecondary"`, `"destructiveGhost"`, `"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) |
|
|
@@ -159,6 +159,7 @@ Minimal example:
|
|
|
159
159
|
<fig-button variant="secondary">Secondary</fig-button>
|
|
160
160
|
<fig-button variant="destructive">Delete</fig-button>
|
|
161
161
|
<fig-button variant="destructiveSecondary">Destructive secondary</fig-button>
|
|
162
|
+
<fig-button variant="destructiveGhost">Destructive ghost</fig-button>
|
|
162
163
|
<fig-button type="toggle" selected="true">Toggle</fig-button>
|
|
163
164
|
<fig-button variant="ghost" icon>
|
|
164
165
|
<svg><!-- icon --></svg>
|
package/components.css
CHANGED
|
@@ -838,6 +838,22 @@ fig-button {
|
|
|
838
838
|
}
|
|
839
839
|
}
|
|
840
840
|
|
|
841
|
+
/* Variant: Destructive Ghost */
|
|
842
|
+
&[variant="destructiveGhost"] {
|
|
843
|
+
box-shadow: none;
|
|
844
|
+
background: none;
|
|
845
|
+
color: var(--figma-color-text-danger);
|
|
846
|
+
|
|
847
|
+
&:hover:not(:active) {
|
|
848
|
+
background-color: var(--figma-color-bg-danger-tertiary);
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
&:active {
|
|
852
|
+
background-color: var(--figma-color-bg-danger-tertiary);
|
|
853
|
+
color: var(--figma-color-text-danger-secondary);
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
|
|
841
857
|
/* Variant: Link */
|
|
842
858
|
&[variant="link"] {
|
|
843
859
|
box-shadow: none;
|
|
@@ -945,12 +961,15 @@ fig-button {
|
|
|
945
961
|
background-color: var(--figma-color-bg-disabled);
|
|
946
962
|
pointer-events: none;
|
|
947
963
|
cursor: not-allowed;
|
|
948
|
-
&:not([variant="secondary"]):not([variant="destructiveSecondary"])
|
|
964
|
+
&:not([variant="secondary"]):not([variant="destructiveSecondary"]):not(
|
|
965
|
+
[variant="destructiveGhost"]
|
|
966
|
+
) {
|
|
949
967
|
color: var(--figma-color-text-ondisabled);
|
|
950
968
|
box-shadow: none;
|
|
951
969
|
}
|
|
952
970
|
&[variant="secondary"],
|
|
953
971
|
&[variant="destructiveSecondary"],
|
|
972
|
+
&[variant="destructiveGhost"],
|
|
954
973
|
&[variant="ghost"] {
|
|
955
974
|
color: var(--figma-color-text-disabled);
|
|
956
975
|
background-color: transparent;
|