@vaadin/button 24.3.0-alpha5 → 24.3.0-alpha6
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/package.json +8 -8
- package/theme/lumo/vaadin-button-styles.js +30 -15
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/button",
|
|
3
|
-
"version": "24.3.0-
|
|
3
|
+
"version": "24.3.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -38,16 +38,16 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
40
|
"@polymer/polymer": "^3.0.0",
|
|
41
|
-
"@vaadin/a11y-base": "24.3.0-
|
|
42
|
-
"@vaadin/component-base": "24.3.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.3.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.3.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.3.0-
|
|
41
|
+
"@vaadin/a11y-base": "24.3.0-alpha6",
|
|
42
|
+
"@vaadin/component-base": "24.3.0-alpha6",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha6",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha6",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.3.0-alpha6",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@esm-bundle/chai": "^4.3.4",
|
|
50
|
-
"@vaadin/icon": "24.3.0-
|
|
50
|
+
"@vaadin/icon": "24.3.0-alpha6",
|
|
51
51
|
"@vaadin/testing-helpers": "^0.6.0",
|
|
52
52
|
"sinon": "^13.0.2"
|
|
53
53
|
},
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "2721ab38ba3bc7d38dc1241016915354617ff659"
|
|
59
59
|
}
|
|
@@ -9,23 +9,33 @@ const button = css`
|
|
|
9
9
|
:host {
|
|
10
10
|
/* Sizing */
|
|
11
11
|
--lumo-button-size: var(--lumo-size-m);
|
|
12
|
-
min-width: calc(var(--
|
|
13
|
-
height: var(--
|
|
14
|
-
padding:
|
|
15
|
-
|
|
12
|
+
min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
|
|
13
|
+
height: var(--_button-size);
|
|
14
|
+
padding: var(--vaadin-button-padding-v, 0)
|
|
15
|
+
var(--vaadin-button-padding-h, calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
|
|
16
|
+
margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
|
|
16
17
|
box-sizing: border-box;
|
|
17
18
|
/* Style */
|
|
18
19
|
font-family: var(--lumo-font-family);
|
|
19
|
-
font-size: var(--lumo-font-size-m);
|
|
20
|
-
font-weight: 500;
|
|
21
|
-
color: var(--_lumo-button-
|
|
22
|
-
background
|
|
23
|
-
border
|
|
20
|
+
font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
|
|
21
|
+
font-weight: var(--vaadin-button-font-weight, 500);
|
|
22
|
+
color: var(--_lumo-button-text-color);
|
|
23
|
+
background: var(--_lumo-button-background);
|
|
24
|
+
border: var(--vaadin-button-border, none);
|
|
25
|
+
border-radius: var(--vaadin-button-border-radius, var(--lumo-border-radius-m));
|
|
24
26
|
cursor: var(--lumo-clickable-cursor);
|
|
25
27
|
-webkit-tap-highlight-color: transparent;
|
|
26
28
|
-webkit-font-smoothing: antialiased;
|
|
27
29
|
-moz-osx-font-smoothing: grayscale;
|
|
28
30
|
flex-shrink: 0;
|
|
31
|
+
--_button-size: var(--vaadin-button-height, var(--lumo-button-size));
|
|
32
|
+
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
|
|
33
|
+
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
|
|
34
|
+
/* Used by notification */
|
|
35
|
+
--_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
|
|
36
|
+
--_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
|
|
37
|
+
--_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
|
|
38
|
+
--_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
|
|
29
39
|
}
|
|
30
40
|
|
|
31
41
|
/* Set only for the internal parts so we don't affect the host vertical alignment */
|
|
@@ -92,7 +102,7 @@ const button = css`
|
|
|
92
102
|
/* Keyboard focus */
|
|
93
103
|
|
|
94
104
|
:host([focus-ring]) {
|
|
95
|
-
box-shadow: 0 0 0
|
|
105
|
+
box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
|
|
96
106
|
}
|
|
97
107
|
|
|
98
108
|
:host([theme~='primary'][focus-ring]) {
|
|
@@ -103,12 +113,16 @@ const button = css`
|
|
|
103
113
|
|
|
104
114
|
:host([theme~='tertiary']),
|
|
105
115
|
:host([theme~='tertiary-inline']) {
|
|
106
|
-
|
|
116
|
+
--_background: transparent !important;
|
|
117
|
+
background: var(--vaadin-button-tertiary-background, var(--_background));
|
|
107
118
|
min-width: 0;
|
|
108
119
|
}
|
|
109
120
|
|
|
110
121
|
:host([theme~='tertiary']) {
|
|
111
|
-
|
|
122
|
+
border: var(--vaadin-button-tertiary-border, none);
|
|
123
|
+
color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
|
|
124
|
+
font-weight: var(--vaadin-button-tertiary-font-weight, 500);
|
|
125
|
+
padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6));
|
|
112
126
|
}
|
|
113
127
|
|
|
114
128
|
:host([theme~='tertiary-inline'])::before {
|
|
@@ -130,9 +144,10 @@ const button = css`
|
|
|
130
144
|
}
|
|
131
145
|
|
|
132
146
|
:host([theme~='primary']) {
|
|
133
|
-
background
|
|
134
|
-
|
|
135
|
-
|
|
147
|
+
background: var(--_lumo-button-primary-background);
|
|
148
|
+
border: var(--vaadin-button-primary-border, none);
|
|
149
|
+
color: var(--_lumo-button-primary-text-color);
|
|
150
|
+
font-weight: var(--vaadin-button-primary-font-weight, 600);
|
|
136
151
|
min-width: calc(var(--lumo-button-size) * 2.5);
|
|
137
152
|
}
|
|
138
153
|
|
package/web-types.json
CHANGED