@vaadin/button 24.4.6 → 24.5.0-alpha10
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 +1 -1
- package/package.json +11 -11
- package/theme/lumo/vaadin-button-styles.js +17 -4
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/README.md
CHANGED
|
@@ -53,7 +53,7 @@ import '@vaadin/button/src/vaadin-button.js';
|
|
|
53
53
|
|
|
54
54
|
## Contributing
|
|
55
55
|
|
|
56
|
-
Read the [contributing guide](https://vaadin.com/docs/latest/contributing
|
|
56
|
+
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
|
57
57
|
|
|
58
58
|
## License
|
|
59
59
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/button",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.5.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "
|
|
40
|
-
"@vaadin/component-base": "
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
42
|
-
"@vaadin/vaadin-material-styles": "
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
39
|
+
"@vaadin/a11y-base": "24.5.0-alpha10",
|
|
40
|
+
"@vaadin/component-base": "24.5.0-alpha10",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "24.5.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
|
|
44
44
|
"lit": "^3.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@
|
|
48
|
-
"@vaadin/icon": "
|
|
49
|
-
"@vaadin/testing-helpers": "^0.
|
|
50
|
-
"sinon": "^
|
|
47
|
+
"@vaadin/chai-plugins": "24.5.0-alpha10",
|
|
48
|
+
"@vaadin/icon": "24.5.0-alpha10",
|
|
49
|
+
"@vaadin/testing-helpers": "^1.0.0",
|
|
50
|
+
"sinon": "^18.0.0"
|
|
51
51
|
},
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
|
|
57
57
|
}
|
|
@@ -83,7 +83,9 @@ const button = css`
|
|
|
83
83
|
/* Active */
|
|
84
84
|
|
|
85
85
|
:host::after {
|
|
86
|
-
transition:
|
|
86
|
+
transition:
|
|
87
|
+
opacity 1.4s,
|
|
88
|
+
transform 0.1s;
|
|
87
89
|
filter: blur(8px);
|
|
88
90
|
}
|
|
89
91
|
|
|
@@ -101,11 +103,13 @@ const button = css`
|
|
|
101
103
|
/* Keyboard focus */
|
|
102
104
|
|
|
103
105
|
:host([focus-ring]) {
|
|
104
|
-
box-shadow:
|
|
106
|
+
box-shadow:
|
|
107
|
+
0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
|
|
108
|
+
0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
|
|
105
109
|
}
|
|
106
110
|
|
|
107
111
|
:host([theme~='primary'][focus-ring]) {
|
|
108
|
-
|
|
112
|
+
--_focus-ring-gap-on: 1;
|
|
109
113
|
}
|
|
110
114
|
|
|
111
115
|
/* Types (primary, tertiary, tertiary-inline */
|
|
@@ -168,7 +172,7 @@ const button = css`
|
|
|
168
172
|
opacity: 0.2;
|
|
169
173
|
}
|
|
170
174
|
|
|
171
|
-
/* Colors (success, error, contrast) */
|
|
175
|
+
/* Colors (success, warning, error, contrast) */
|
|
172
176
|
|
|
173
177
|
:host([theme~='success']) {
|
|
174
178
|
color: var(--lumo-success-text-color);
|
|
@@ -179,6 +183,15 @@ const button = css`
|
|
|
179
183
|
color: var(--lumo-success-contrast-color);
|
|
180
184
|
}
|
|
181
185
|
|
|
186
|
+
:host([theme~='warning']) {
|
|
187
|
+
color: var(--lumo-warning-text-color);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
:host([theme~='warning'][theme~='primary']) {
|
|
191
|
+
background-color: var(--lumo-warning-color);
|
|
192
|
+
color: var(--lumo-warning-contrast-color);
|
|
193
|
+
}
|
|
194
|
+
|
|
182
195
|
:host([theme~='error']) {
|
|
183
196
|
color: var(--lumo-error-text-color);
|
|
184
197
|
}
|
package/web-types.json
CHANGED