@rogieking/figui3 6.33.1 → 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 +4 -1
- package/components.css +56 -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"`, `"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) |
|
|
@@ -157,6 +157,9 @@ 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>
|
|
162
|
+
<fig-button variant="destructiveGhost">Destructive ghost</fig-button>
|
|
160
163
|
<fig-button type="toggle" selected="true">Toggle</fig-button>
|
|
161
164
|
<fig-button variant="ghost" icon>
|
|
162
165
|
<svg><!-- icon --></svg>
|
package/components.css
CHANGED
|
@@ -803,6 +803,57 @@ 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
|
+
|
|
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
|
+
|
|
806
857
|
/* Variant: Link */
|
|
807
858
|
&[variant="link"] {
|
|
808
859
|
box-shadow: none;
|
|
@@ -910,11 +961,15 @@ fig-button {
|
|
|
910
961
|
background-color: var(--figma-color-bg-disabled);
|
|
911
962
|
pointer-events: none;
|
|
912
963
|
cursor: not-allowed;
|
|
913
|
-
&:not([variant="secondary"])
|
|
964
|
+
&:not([variant="secondary"]):not([variant="destructiveSecondary"]):not(
|
|
965
|
+
[variant="destructiveGhost"]
|
|
966
|
+
) {
|
|
914
967
|
color: var(--figma-color-text-ondisabled);
|
|
915
968
|
box-shadow: none;
|
|
916
969
|
}
|
|
917
970
|
&[variant="secondary"],
|
|
971
|
+
&[variant="destructiveSecondary"],
|
|
972
|
+
&[variant="destructiveGhost"],
|
|
918
973
|
&[variant="ghost"] {
|
|
919
974
|
color: var(--figma-color-text-disabled);
|
|
920
975
|
background-color: transparent;
|