@rogieking/figui3 6.34.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 +3 -1
- package/components.css +40 -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"`, `"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) |
|
|
@@ -159,6 +159,8 @@ 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>
|
|
163
|
+
<fig-button variant="destructiveLink">Destructive link</fig-button>
|
|
162
164
|
<fig-button type="toggle" selected="true">Toggle</fig-button>
|
|
163
165
|
<fig-button variant="ghost" icon>
|
|
164
166
|
<svg><!-- icon --></svg>
|
package/components.css
CHANGED
|
@@ -838,6 +838,39 @@ 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
|
+
|
|
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
|
+
|
|
841
874
|
/* Variant: Link */
|
|
842
875
|
&[variant="link"] {
|
|
843
876
|
box-shadow: none;
|
|
@@ -945,12 +978,18 @@ fig-button {
|
|
|
945
978
|
background-color: var(--figma-color-bg-disabled);
|
|
946
979
|
pointer-events: none;
|
|
947
980
|
cursor: not-allowed;
|
|
948
|
-
&:not([variant="secondary"]):not([variant="destructiveSecondary"])
|
|
981
|
+
&:not([variant="secondary"]):not([variant="destructiveSecondary"]):not(
|
|
982
|
+
[variant="destructiveGhost"]
|
|
983
|
+
):not(
|
|
984
|
+
[variant="destructiveLink"]
|
|
985
|
+
) {
|
|
949
986
|
color: var(--figma-color-text-ondisabled);
|
|
950
987
|
box-shadow: none;
|
|
951
988
|
}
|
|
952
989
|
&[variant="secondary"],
|
|
953
990
|
&[variant="destructiveSecondary"],
|
|
991
|
+
&[variant="destructiveGhost"],
|
|
992
|
+
&[variant="destructiveLink"],
|
|
954
993
|
&[variant="ghost"] {
|
|
955
994
|
color: var(--figma-color-text-disabled);
|
|
956
995
|
background-color: transparent;
|