@fluid-topics/ft-button 1.3.0 → 1.3.2
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/build/ft-button.light.js +34 -30
- package/build/ft-button.min.js +73 -62
- package/build/ftds-button.styles.d.ts +147 -1
- package/build/ftds-button.styles.js +9 -2
- package/package.json +9 -9
|
@@ -1,2 +1,148 @@
|
|
|
1
|
-
export
|
|
1
|
+
export declare const FtdsButtonCssVariables: {
|
|
2
|
+
iconOnlyScale: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
3
|
+
largeHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
4
|
+
largeHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
5
|
+
largeGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
6
|
+
largeBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
7
|
+
largeIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
8
|
+
largeBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
9
|
+
largeFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
10
|
+
largeFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
11
|
+
largeIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
12
|
+
mediumHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
13
|
+
mediumHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
14
|
+
mediumGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
15
|
+
mediumBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
16
|
+
mediumIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
17
|
+
mediumBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
18
|
+
mediumFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
19
|
+
mediumFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
20
|
+
mediumIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
21
|
+
smallHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
22
|
+
smallHorizontalPadding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
23
|
+
smallGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
24
|
+
smallBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
25
|
+
smallIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
26
|
+
smallBorderWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
27
|
+
smallFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
28
|
+
smallFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
29
|
+
smallIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
30
|
+
xSmallHeight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
31
|
+
xSmallIconSize: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
32
|
+
xSmallFocusOutlineOffset: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
33
|
+
xSmallFocusOutlineWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
34
|
+
xSmallIconOnlyWidth: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
35
|
+
roundBorderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
36
|
+
primaryBrandBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
37
|
+
primaryBrandColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
38
|
+
primaryBrandIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
39
|
+
primaryBrandStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
40
|
+
primaryBrandHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
41
|
+
primaryBrandFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
42
|
+
primaryBrandActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
43
|
+
primaryBrandDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
44
|
+
focusFocusRingColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
45
|
+
tertiaryBrandBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
46
|
+
tertiaryBrandColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
47
|
+
tertiaryBrandIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
48
|
+
tertiaryBrandStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
49
|
+
tertiaryBrandHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
50
|
+
tertiaryBrandFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
51
|
+
tertiaryBrandActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
52
|
+
tertiaryBrandDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
53
|
+
tertiaryInfoBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
54
|
+
tertiaryInfoColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
55
|
+
tertiaryInfoIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
56
|
+
tertiaryInfoStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
57
|
+
tertiaryInfoFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
58
|
+
tertiaryInfoHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
59
|
+
tertiaryInfoActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
60
|
+
tertiaryInfoDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
61
|
+
tertiarySuccessBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
62
|
+
tertiarySuccessColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
63
|
+
tertiarySuccessIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
64
|
+
tertiarySuccessStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
65
|
+
tertiarySuccessHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
66
|
+
tertiarySuccessFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
67
|
+
tertiarySuccessActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
68
|
+
tertiarySuccessDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
69
|
+
tertiaryWarningBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
70
|
+
tertiaryWarningColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
71
|
+
tertiaryWarningIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
72
|
+
tertiaryWarningStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
73
|
+
tertiaryWarningHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
74
|
+
tertiaryWarningFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
75
|
+
tertiaryWarningActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
76
|
+
tertiaryWarningDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
77
|
+
tertiaryErrorBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
78
|
+
tertiaryErrorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
79
|
+
tertiaryErrorIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
80
|
+
tertiaryErrorStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
81
|
+
tertiaryErrorHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
82
|
+
tertiaryErrorFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
83
|
+
tertiaryErrorActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
84
|
+
tertiaryErrorDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
85
|
+
tertiaryNeutralBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
86
|
+
tertiaryNeutralIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
87
|
+
tertiaryNeutralColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
88
|
+
tertiaryNeutralStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
89
|
+
tertiaryNeutralHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
90
|
+
tertiaryNeutralFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
91
|
+
tertiaryNeutralActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
92
|
+
tertiaryNeutralDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
93
|
+
secondaryBrandBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
94
|
+
secondaryBrandColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
95
|
+
secondaryBrandIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
96
|
+
secondaryBrandStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
97
|
+
secondaryBrandHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
98
|
+
secondaryBrandFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
99
|
+
secondaryBrandActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
100
|
+
secondaryBrandDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
101
|
+
secondaryBrandBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
102
|
+
secondaryNeutralHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
103
|
+
secondaryNeutralFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
104
|
+
secondaryNeutralActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
105
|
+
secondaryNeutralDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
106
|
+
secondaryNeutralBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
107
|
+
secondaryNeutralColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
108
|
+
secondaryNeutralIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
109
|
+
secondaryNeutralStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
110
|
+
secondaryNeutralBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
111
|
+
secondaryInfoHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
112
|
+
secondaryInfoFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
113
|
+
secondaryInfoActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
114
|
+
secondaryInfoDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
115
|
+
secondaryInfoBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
116
|
+
secondaryInfoBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
117
|
+
secondaryInfoColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
118
|
+
secondaryInfoIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
119
|
+
secondaryInfoStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
120
|
+
secondarySuccessHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
121
|
+
secondarySuccessFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
122
|
+
secondarySuccessActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
123
|
+
secondarySuccessDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
124
|
+
secondarySuccessBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
125
|
+
secondarySuccessBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
126
|
+
secondarySuccessColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
127
|
+
secondarySuccessIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
128
|
+
secondarySuccessStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
129
|
+
secondaryWarningHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
130
|
+
secondaryWarningFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
131
|
+
secondaryWarningActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
132
|
+
secondaryWarningDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
133
|
+
secondaryWarningBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
134
|
+
secondaryWarningBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
135
|
+
secondaryWarningColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
136
|
+
secondaryWarningIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
137
|
+
secondaryWarningStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
138
|
+
secondaryErrorHoverStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
139
|
+
secondaryErrorFocusStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
140
|
+
secondaryErrorActiveStateLayerOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
141
|
+
secondaryErrorDisabledComponentOpacity: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
142
|
+
secondaryErrorBackgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
143
|
+
secondaryErrorBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
144
|
+
secondaryErrorColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
145
|
+
secondaryErrorIconColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
146
|
+
secondaryErrorStateLayerColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
147
|
+
};
|
|
2
148
|
export declare const designSystemStyles: import("lit").CSSResult[];
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { css, } from "lit";
|
|
2
|
-
import { noTextSelect, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
2
|
+
import { noTextSelect, setVariable, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
|
|
3
3
|
import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.styles";
|
|
4
4
|
import { FtLoaderCssVariables } from "@fluid-topics/ft-loader/build/ft-loader.styles";
|
|
5
5
|
import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.styles";
|
|
6
6
|
import { button } from "@fluid-topics/design-system-variables";
|
|
7
|
-
export
|
|
7
|
+
export const FtdsButtonCssVariables = {
|
|
8
|
+
...button,
|
|
9
|
+
iconOnlyScale: FtCssVariableFactory.create("--ft-button-icon-only-scale", "", "NUMBER", "1"),
|
|
10
|
+
};
|
|
8
11
|
//language=css
|
|
9
12
|
export const designSystemStyles = [
|
|
10
13
|
css `
|
|
@@ -89,6 +92,10 @@ export const designSystemStyles = [
|
|
|
89
92
|
border-radius: 50%;
|
|
90
93
|
}
|
|
91
94
|
|
|
95
|
+
.ft-button.ft-button--icon-only ft-icon {
|
|
96
|
+
transform: scale(${FtdsButtonCssVariables.iconOnlyScale});
|
|
97
|
+
}
|
|
98
|
+
|
|
92
99
|
/** Brand Primary styles **/
|
|
93
100
|
|
|
94
101
|
.ftds--family-brand.ft-button--primary {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-button",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "A generic Fluid Topics tag",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/design-system-variables": "0.1.
|
|
23
|
-
"@fluid-topics/ft-icon": "1.3.
|
|
24
|
-
"@fluid-topics/ft-loader": "1.3.
|
|
25
|
-
"@fluid-topics/ft-ripple": "1.3.
|
|
26
|
-
"@fluid-topics/ft-tooltip": "1.3.
|
|
27
|
-
"@fluid-topics/ft-typography": "1.3.
|
|
28
|
-
"@fluid-topics/ft-wc-utils": "1.3.
|
|
22
|
+
"@fluid-topics/design-system-variables": "0.1.100",
|
|
23
|
+
"@fluid-topics/ft-icon": "1.3.2",
|
|
24
|
+
"@fluid-topics/ft-loader": "1.3.2",
|
|
25
|
+
"@fluid-topics/ft-ripple": "1.3.2",
|
|
26
|
+
"@fluid-topics/ft-tooltip": "1.3.2",
|
|
27
|
+
"@fluid-topics/ft-typography": "1.3.2",
|
|
28
|
+
"@fluid-topics/ft-wc-utils": "1.3.2",
|
|
29
29
|
"lit": "3.1.0"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "a583b0f740d044ef603e79b142f96dc74b993f11"
|
|
32
32
|
}
|