@rogieking/figui3 6.35.0 → 6.36.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 -0
- 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"`, `"destructiveGhost"`, `"ghost"`, `"link"` |
|
|
148
|
+
| `variant` | string | `"primary"` | `"primary"`, `"secondary"`, `"destructive"`, `"destructiveSecondary"`, `"destructiveGhost"`, `"destructiveLink"`, `"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) |
|
|
@@ -160,6 +160,7 @@ Minimal example:
|
|
|
160
160
|
<fig-button variant="destructive">Delete</fig-button>
|
|
161
161
|
<fig-button variant="destructiveSecondary">Destructive secondary</fig-button>
|
|
162
162
|
<fig-button variant="destructiveGhost">Destructive ghost</fig-button>
|
|
163
|
+
<fig-button variant="destructiveLink">Destructive link</fig-button>
|
|
163
164
|
<fig-button type="toggle" selected="true">Toggle</fig-button>
|
|
164
165
|
<fig-button variant="ghost" icon>
|
|
165
166
|
<svg><!-- icon --></svg>
|
package/components.css
CHANGED
|
@@ -854,6 +854,23 @@ fig-button {
|
|
|
854
854
|
}
|
|
855
855
|
}
|
|
856
856
|
|
|
857
|
+
/* Variant: Destructive Link */
|
|
858
|
+
&[variant="destructiveLink"] {
|
|
859
|
+
box-shadow: none;
|
|
860
|
+
background: none;
|
|
861
|
+
color: var(--figma-color-text-danger);
|
|
862
|
+
|
|
863
|
+
&:hover:not(:active) {
|
|
864
|
+
background-color: transparent;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
&:active {
|
|
868
|
+
outline: 0;
|
|
869
|
+
background-color: var(--figma-color-bg-danger-tertiary);
|
|
870
|
+
color: var(--figma-color-text-danger-secondary);
|
|
871
|
+
}
|
|
872
|
+
}
|
|
873
|
+
|
|
857
874
|
/* Variant: Link */
|
|
858
875
|
&[variant="link"] {
|
|
859
876
|
box-shadow: none;
|
|
@@ -963,6 +980,8 @@ fig-button {
|
|
|
963
980
|
cursor: not-allowed;
|
|
964
981
|
&:not([variant="secondary"]):not([variant="destructiveSecondary"]):not(
|
|
965
982
|
[variant="destructiveGhost"]
|
|
983
|
+
):not(
|
|
984
|
+
[variant="destructiveLink"]
|
|
966
985
|
) {
|
|
967
986
|
color: var(--figma-color-text-ondisabled);
|
|
968
987
|
box-shadow: none;
|
|
@@ -970,6 +989,7 @@ fig-button {
|
|
|
970
989
|
&[variant="secondary"],
|
|
971
990
|
&[variant="destructiveSecondary"],
|
|
972
991
|
&[variant="destructiveGhost"],
|
|
992
|
+
&[variant="destructiveLink"],
|
|
973
993
|
&[variant="ghost"] {
|
|
974
994
|
color: var(--figma-color-text-disabled);
|
|
975
995
|
background-color: transparent;
|