Skip to content

Commit b95fc10

Browse files
vursenvursen
committed
feat: port progress-bar Lumo styles to CSS files
1 parent 6dfe7f2 commit b95fc10

File tree

6 files changed

+313
-3
lines changed

6 files changed

+313
-3
lines changed

‎dev/progress-bar.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<script type="module" src="./common.js"></script>
99
<script type="module">
1010
import '@vaadin/progress-bar';
11+
import '@vaadin/vaadin-lumo-styles/lumo.css';
1112
</script>
1213
</head>
1314
<body>

‎packages/progress-bar/src/vaadin-progress-bar.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { html, LitElement } from 'lit';
77
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
88
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
99
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1011
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1112
import { progressBarStyles } from './styles/vaadin-progress-bar-core-styles.js';
1213
import { ProgressMixin } from './vaadin-progress-mixin.js';
@@ -48,7 +49,7 @@ import { ProgressMixin } from './vaadin-progress-mixin.js';
4849
* @mixes ThemableMixin
4950
* @mixes ElementMixin
5051
*/
51-
class ProgressBar extends ProgressMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
52+
class ProgressBar extends ProgressMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
5253
static get is() {
5354
return 'vaadin-progress-bar';
5455
}

‎packages/progress-bar/test/visual/lumo/progress-bar.test.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
22
import { visualDiff } from '@web/test-runner-visual-regression';
3-
import '../../../theme/lumo/vaadin-progress-bar.js';
3+
import '@vaadin/vaadin-lumo-styles/props.css';
4+
import '@vaadin/vaadin-lumo-styles/components/progress-bar.css';
5+
import '../../../vaadin-progress-bar.js';
46

57
describe('progress-bar', () => {
68
let div, element;

‎packages/vaadin-lumo-styles/components.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @license
3-
* Copyright (c) 2017 - 2025 Vaadin Ltd.
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
66
@import './components/accordion.css';
@@ -33,6 +33,7 @@
3333
@import './components/number-field.css';
3434
@import './components/password-field.css';
3535
@import './components/popover.css';
36+
@import './components/progress-bar.css';
3637
@import './components/radio-button.css';
3738
@import './components/radio-group.css';
3839
@import './components/select.css';

‎packages/vaadin-lumo-styles/components/progress-bar.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
@import '../src/mixins/base-layer-reset.css' vaadin-progress-bar;
7+
@import '../src/components/progress-bar.css' vaadin-progress-bar;
8+
9+
html {
10+
--vaadin-progress-bar-css-inject: 1;
11+
}

‎packages/vaadin-lumo-styles/src/components/progress-bar.css

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2000 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
:host {
7+
display: block;
8+
width: 100%; /* prevent collapsing inside non-stretching column flex */
9+
height: 8px;
10+
height: calc(var(--lumo-size-l) / 10);
11+
margin: var(--lumo-space-s) 0;
12+
}
13+
14+
:host([hidden]) {
15+
display: none !important;
16+
}
17+
18+
[part='bar'] {
19+
height: 100%;
20+
border-radius: var(--lumo-border-radius-m);
21+
background-color: var(--lumo-contrast-10pct);
22+
}
23+
24+
[part='value'] {
25+
height: 100%;
26+
transform-origin: 0 50%;
27+
border-radius: var(--lumo-border-radius-m);
28+
background-color: var(--lumo-primary-color);
29+
/* Use width instead of transform to preserve border radius */
30+
transform: none;
31+
width: calc(var(--vaadin-progress-value) * 100%);
32+
will-change: width;
33+
transition: 0.1s width linear;
34+
}
35+
36+
:host([dir='rtl']) [part='value'] {
37+
transform-origin: 100% 50%;
38+
}
39+
40+
@media (forced-colors: active) {
41+
[part='bar'] {
42+
outline: 1px solid;
43+
}
44+
45+
[part='value'] {
46+
background-color: AccentColor !important;
47+
forced-color-adjust: none;
48+
}
49+
}
50+
51+
/* Indeterminate mode */
52+
:host([indeterminate]) [part='value'] {
53+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
54+
to right,
55+
var(--lumo-primary-color-10pct) 10%,
56+
var(--lumo-primary-color)
57+
);
58+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
59+
to left,
60+
var(--lumo-primary-color-10pct) 10%,
61+
var(--lumo-primary-color)
62+
);
63+
width: 100%;
64+
background-color: transparent !important;
65+
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
66+
opacity: 0.75;
67+
will-change: transform;
68+
animation: vaadin-progress-indeterminate 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
69+
}
70+
71+
@keyframes vaadin-progress-indeterminate {
72+
0% {
73+
transform: scaleX(0.015);
74+
transform-origin: 0% 0%;
75+
}
76+
77+
25% {
78+
transform: scaleX(0.4);
79+
}
80+
81+
50% {
82+
transform: scaleX(0.015);
83+
transform-origin: 100% 0%;
84+
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
85+
}
86+
87+
50.1% {
88+
transform: scaleX(0.015);
89+
transform-origin: 100% 0%;
90+
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
91+
}
92+
93+
75% {
94+
transform: scaleX(0.4);
95+
}
96+
97+
100% {
98+
transform: scaleX(0.015);
99+
transform-origin: 0% 0%;
100+
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
101+
}
102+
}
103+
104+
:host(:not([aria-valuenow])) [part='value']::before,
105+
:host([indeterminate]) [part='value']::before {
106+
content: '';
107+
display: block;
108+
width: 100%;
109+
height: 100%;
110+
border-radius: inherit;
111+
background-color: var(--lumo-primary-color);
112+
will-change: opacity;
113+
animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
114+
}
115+
116+
@keyframes vaadin-progress-pulse3 {
117+
0% {
118+
opacity: 1;
119+
}
120+
121+
10% {
122+
opacity: 0;
123+
}
124+
125+
40% {
126+
opacity: 0;
127+
}
128+
129+
50% {
130+
opacity: 1;
131+
}
132+
133+
50.1% {
134+
opacity: 1;
135+
}
136+
137+
60% {
138+
opacity: 0;
139+
}
140+
141+
90% {
142+
opacity: 0;
143+
}
144+
145+
100% {
146+
opacity: 1;
147+
}
148+
}
149+
150+
/* Contrast color */
151+
:host([theme~='contrast']) [part='value'],
152+
:host([theme~='contrast']) [part='value']::before {
153+
background-color: var(--lumo-contrast-80pct);
154+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
155+
to right,
156+
var(--lumo-contrast-5pct) 10%,
157+
var(--lumo-contrast-80pct)
158+
);
159+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
160+
to left,
161+
var(--lumo-contrast-5pct) 10%,
162+
var(--lumo-contrast-60pct)
163+
);
164+
}
165+
166+
/* Error color */
167+
:host([theme~='error']) [part='value'],
168+
:host([theme~='error']) [part='value']::before {
169+
background-color: var(--lumo-error-color);
170+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
171+
to right,
172+
var(--lumo-error-color-10pct) 10%,
173+
var(--lumo-error-color)
174+
);
175+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
176+
to left,
177+
var(--lumo-error-color-10pct) 10%,
178+
var(--lumo-error-color)
179+
);
180+
}
181+
182+
/* Primary color */
183+
:host([theme~='success']) [part='value'],
184+
:host([theme~='success']) [part='value']::before {
185+
background-color: var(--lumo-success-color);
186+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
187+
to right,
188+
var(--lumo-success-color-10pct) 10%,
189+
var(--lumo-success-color)
190+
);
191+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
192+
to left,
193+
var(--lumo-success-color-10pct) 10%,
194+
var(--lumo-success-color)
195+
);
196+
}
197+
198+
/* RTL specific styles */
199+
:host([indeterminate][dir='rtl']) [part='value'] {
200+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
201+
to left,
202+
var(--lumo-primary-color-10pct) 10%,
203+
var(--lumo-primary-color)
204+
);
205+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
206+
to right,
207+
var(--lumo-primary-color-10pct) 10%,
208+
var(--lumo-primary-color)
209+
);
210+
animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
211+
}
212+
213+
:host(:not([aria-valuenow])[dir='rtl']) [part='value']::before,
214+
:host([indeterminate][dir='rtl']) [part='value']::before {
215+
animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(0.355, 0.045, 0.645, 1);
216+
}
217+
218+
@keyframes vaadin-progress-indeterminate-rtl {
219+
0% {
220+
transform: scaleX(0.015);
221+
transform-origin: 100% 0%;
222+
}
223+
224+
25% {
225+
transform: scaleX(0.4);
226+
}
227+
228+
50% {
229+
transform: scaleX(0.015);
230+
transform-origin: 0% 0%;
231+
background-image: var(--lumo-progress-indeterminate-progress-bar-background);
232+
}
233+
234+
50.1% {
235+
transform: scaleX(0.015);
236+
transform-origin: 0% 0%;
237+
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
238+
}
239+
240+
75% {
241+
transform: scaleX(0.4);
242+
}
243+
244+
100% {
245+
transform: scaleX(0.015);
246+
transform-origin: 100% 0%;
247+
background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
248+
}
249+
}
250+
251+
/* Contrast color */
252+
:host([theme~='contrast'][dir='rtl']) [part='value'],
253+
:host([theme~='contrast'][dir='rtl']) [part='value']::before {
254+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
255+
to left,
256+
var(--lumo-contrast-5pct) 10%,
257+
var(--lumo-contrast-80pct)
258+
);
259+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
260+
to right,
261+
var(--lumo-contrast-5pct) 10%,
262+
var(--lumo-contrast-60pct)
263+
);
264+
}
265+
266+
/* Error color */
267+
:host([theme~='error'][dir='rtl']) [part='value'],
268+
:host([theme~='error'][dir='rtl']) [part='value']::before {
269+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
270+
to left,
271+
var(--lumo-error-color-10pct) 10%,
272+
var(--lumo-error-color)
273+
);
274+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
275+
to right,
276+
var(--lumo-error-color-10pct) 10%,
277+
var(--lumo-error-color)
278+
);
279+
}
280+
281+
/* Primary color */
282+
:host([theme~='success'][dir='rtl']) [part='value'],
283+
:host([theme~='success'][dir='rtl']) [part='value']::before {
284+
--lumo-progress-indeterminate-progress-bar-background: linear-gradient(
285+
to left,
286+
var(--lumo-success-color-10pct) 10%,
287+
var(--lumo-success-color)
288+
);
289+
--lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(
290+
to right,
291+
var(--lumo-success-color-10pct) 10%,
292+
var(--lumo-success-color)
293+
);
294+
}

0 commit comments

Comments
 (0)