@rogieking/figui3 6.33.1 → 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 +37 -1
- 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;
|