@vaadin/vaadin-lumo-styles 24.1.0-alpha9 → 24.1.0-beta2

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.
Files changed (8) hide show
  1. package/auto-complete.css +25 -0
  2. package/badge.js +14 -0
  3. package/color.js +12 -0
  4. package/package.json +4 -4
  5. package/utilities/background.js +7 -0
  6. package/utilities/border.js +10 -0
  7. package/utilities/typography.js +6 -0
  8. package/version.js +1 -1
package/auto-complete.css CHANGED
@@ -62,6 +62,10 @@
62
62
  --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
63
63
  --lumo-success-text-color: hsl(145, 85%, 25%);
64
64
  --lumo-success-contrast-color: #fff;
65
+ --lumo-warning-color: hsl(48, 100%, 50%);
66
+ --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
67
+ --lumo-warning-text-color: hsl(32, 100%, 30%);
68
+ --lumo-warning-contrast-color: var(--lumo-shade-90pct);
65
69
  --lumo-size-xs: 1.625rem;
66
70
  --lumo-size-s: 1.875rem;
67
71
  --lumo-size-m: 2.25rem;
@@ -201,6 +205,12 @@
201
205
  .bg-success-10 {
202
206
  background-color: var(--lumo-success-color-10pct);
203
207
  }
208
+ .bg-warning {
209
+ background-color: var(--lumo-warning-color);
210
+ }
211
+ .bg-warning-10 {
212
+ background-color: var(--lumo-warning-color-10pct);
213
+ }
204
214
 
205
215
  /* === Border === */
206
216
  .border-0 {
@@ -281,6 +291,15 @@
281
291
  }
282
292
  .border-success-10 {
283
293
  border-color: var(--lumo-success-color-10pct);
294
+ }
295
+ .border-warning {
296
+ border-color: var(--lumo-warning-color);
297
+ }
298
+ .border-warning-10 {
299
+ border-color: var(--lumo-warning-color-10pct);
300
+ }
301
+ .border-warning-strong {
302
+ border-color: var(--lumo-warning-text-color);
284
303
  }
285
304
  /* === Border radius === */
286
305
  .rounded-none {
@@ -1541,6 +1560,12 @@
1541
1560
  }
1542
1561
  .text-success-contrast {
1543
1562
  color: var(--lumo-success-contrast-color);
1563
+ }
1564
+ .text-warning {
1565
+ color: var(--lumo-warning-text-color);
1566
+ }
1567
+ .text-warning-contrast {
1568
+ color: var(--lumo-warning-contrast-color);
1544
1569
  }
1545
1570
  /* === Text overflow === */
1546
1571
  .overflow-clip {
package/badge.js CHANGED
@@ -52,6 +52,11 @@ const badge = css`
52
52
  background-color: var(--lumo-error-color-10pct);
53
53
  }
54
54
 
55
+ [theme~='badge'][theme~='warning'] {
56
+ color: var(--lumo-warning-text-color);
57
+ background-color: var(--lumo-warning-color-10pct);
58
+ }
59
+
55
60
  [theme~='badge'][theme~='contrast'] {
56
61
  color: var(--lumo-contrast-80pct);
57
62
  background-color: var(--lumo-contrast-5pct);
@@ -74,6 +79,11 @@ const badge = css`
74
79
  background-color: var(--lumo-error-color);
75
80
  }
76
81
 
82
+ [theme~='badge'][theme~='warning'][theme~='primary'] {
83
+ color: var(--lumo-warning-contrast-color);
84
+ background-color: var(--lumo-warning-color);
85
+ }
86
+
77
87
  [theme~='badge'][theme~='contrast'][theme~='primary'] {
78
88
  color: var(--lumo-base-color);
79
89
  background-color: var(--lumo-contrast);
@@ -140,6 +150,10 @@ const badge = css`
140
150
  background-color: var(--lumo-error-color);
141
151
  }
142
152
 
153
+ [theme~='badge'][theme~='warning']:not([icon]):empty {
154
+ background-color: var(--lumo-warning-color);
155
+ }
156
+
143
157
  /* Pill */
144
158
 
145
159
  [theme~='badge'][theme~='pill'] {
package/color.js CHANGED
@@ -78,6 +78,12 @@ const colorBase = css`
78
78
  --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
79
79
  --lumo-success-text-color: hsl(145, 85%, 25%);
80
80
  --lumo-success-contrast-color: #fff;
81
+
82
+ /* Warning */
83
+ --lumo-warning-color: hsl(48, 100%, 50%);
84
+ --lumo-warning-color-10pct: hsla(48, 100%, 50%, 0.25);
85
+ --lumo-warning-text-color: hsl(32, 100%, 30%);
86
+ --lumo-warning-contrast-color: var(--lumo-shade-90pct);
81
87
  }
82
88
 
83
89
  /* forced-colors mode adjustments */
@@ -159,6 +165,12 @@ const color = css`
159
165
  --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
160
166
  --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
161
167
  --lumo-success-text-color: hsl(145, 85%, 46%);
168
+
169
+ /* Warning */
170
+ --lumo-warning-color: hsl(43, 100%, 48%);
171
+ --lumo-warning-color-10pct: hsla(40, 100%, 50%, 0.2);
172
+ --lumo-warning-text-color: hsl(45, 100%, 60%);
173
+ --lumo-warning-contrast-color: var(--lumo-shade-90pct);
162
174
  }
163
175
 
164
176
  html {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/vaadin-lumo-styles",
3
- "version": "24.1.0-alpha9",
3
+ "version": "24.1.0-beta2",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -41,8 +41,8 @@
41
41
  ],
42
42
  "dependencies": {
43
43
  "@polymer/polymer": "^3.0.0",
44
- "@vaadin/icon": "24.1.0-alpha9",
45
- "@vaadin/vaadin-themable-mixin": "24.1.0-alpha9"
44
+ "@vaadin/icon": "24.1.0-beta2",
45
+ "@vaadin/vaadin-themable-mixin": "24.1.0-beta2"
46
46
  },
47
47
  "devDependencies": {
48
48
  "gulp": "^4.0.2",
@@ -51,5 +51,5 @@
51
51
  "gulp-sort": "^2.0.0",
52
52
  "gulp-svgmin": "^4.1.0"
53
53
  },
54
- "gitHead": "db4fe44603a6702b85b0da2a6d033ddf8ffea5c4"
54
+ "gitHead": "83536fcc7d6661a593b2713cb99a8cb74f2fd868"
55
55
  }
package/utilities/background.js CHANGED
@@ -78,4 +78,11 @@ export const background = css`
78
78
  .bg-success-10 {
79
79
  background-color: var(--lumo-success-color-10pct);
80
80
  }
81
+
82
+ .bg-warning {
83
+ background-color: var(--lumo-warning-color);
84
+ }
85
+ .bg-warning-10 {
86
+ background-color: var(--lumo-warning-color-10pct);
87
+ }
81
88
  `;
package/utilities/border.js CHANGED
@@ -91,6 +91,16 @@ export const border = css`
91
91
  border-color: var(--lumo-success-color-10pct);
92
92
  }
93
93
 
94
+ .border-warning {
95
+ border-color: var(--lumo-warning-color);
96
+ }
97
+ .border-warning-10 {
98
+ border-color: var(--lumo-warning-color-10pct);
99
+ }
100
+ .border-warning-strong {
101
+ border-color: var(--lumo-warning-text-color);
102
+ }
103
+
94
104
  /* === Border radius === */
95
105
  .rounded-none {
96
106
  border-radius: 0;
package/utilities/typography.js CHANGED
@@ -128,6 +128,12 @@ export const typography = css`
128
128
  .text-success-contrast {
129
129
  color: var(--lumo-success-contrast-color);
130
130
  }
131
+ .text-warning {
132
+ color: var(--lumo-warning-text-color);
133
+ }
134
+ .text-warning-contrast {
135
+ color: var(--lumo-warning-contrast-color);
136
+ }
131
137
 
132
138
  /* === Text overflow === */
133
139
  .overflow-clip {
package/version.js CHANGED
@@ -12,7 +12,7 @@
12
12
  */
13
13
  class Lumo extends HTMLElement {
14
14
  static get version() {
15
- return '24.1.0-alpha9';
15
+ return '24.1.0-beta2';
16
16
  }
17
17
  }
18
18