Skip to content

Commit 7728221

Browse files
vursenvursen
authored
feat: port checkbox and radio button Lumo styles to CSS files (#9355)
1 parent 81db84c commit 7728221

22 files changed

+737
-10
lines changed

‎dev/checkbox-group.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<script type="module">
1111
import '@vaadin/checkbox-group';
12+
import '@vaadin/vaadin-lumo-styles/lumo.css';
1213
</script>
1314

1415
<style>

‎dev/checkbox.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import '@vaadin/checkbox';
1212
import '@vaadin/icon';
1313
import '@vaadin/icons';
14+
import '@vaadin/vaadin-lumo-styles/lumo.css';
1415
</script>
1516
</head>
1617

‎dev/radio-group.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
<script type="module">
1111
import '@vaadin/radio-group';
12+
import '@vaadin/vaadin-lumo-styles/lumo.css';
1213
</script>
1314

1415
<style>

‎packages/checkbox-group/src/vaadin-checkbox-group.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { html, LitElement } from 'lit';
88
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
99
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
1010
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
11+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1112
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1213
import { checkboxGroupStyles } from './styles/vaadin-checkbox-group-core-styles.js';
1314
import { CheckboxGroupMixin } from './vaadin-checkbox-group-mixin.js';
@@ -61,7 +62,9 @@ import { CheckboxGroupMixin } from './vaadin-checkbox-group-mixin.js';
6162
* @mixes ElementMixin
6263
* @mixes CheckboxGroupMixin
6364
*/
64-
class CheckboxGroup extends CheckboxGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
65+
class CheckboxGroup extends CheckboxGroupMixin(
66+
ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
67+
) {
6568
static get is() {
6669
return 'vaadin-checkbox-group';
6770
}

‎packages/checkbox-group/test/visual/lumo/checkbox-group.test.js

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

79
describe('checkbox-group', () => {
810
let div, element;

‎packages/checkbox/src/vaadin-checkbox.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ 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';
1010
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
11+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1112
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1213
import { checkboxStyles } from './styles/vaadin-checkbox-core-styles.js';
1314
import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
@@ -59,7 +60,7 @@ import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
5960
* @mixes ThemableMixin
6061
* @mixes ElementMixin
6162
*/
62-
export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
63+
export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
6364
static get is() {
6465
return 'vaadin-checkbox';
6566
}

‎packages/checkbox/test/visual/lumo/checkbox.test.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { sendKeys } from '@vaadin/test-runner-commands';
22
import { fixtureSync } from '@vaadin/testing-helpers';
33
import { visualDiff } from '@web/test-runner-visual-regression';
4-
import '@vaadin/vaadin-lumo-styles/test/autoload.js';
4+
import '@vaadin/vaadin-lumo-styles/global.css';
5+
import '@vaadin/vaadin-lumo-styles/props.css';
6+
import '@vaadin/vaadin-lumo-styles/components/checkbox.css';
57
import '../common.js';
6-
import '../../../theme/lumo/vaadin-checkbox.js';
8+
import '../../../vaadin-checkbox.js';
79

810
describe('checkbox', () => {
911
let div, element;

‎packages/radio-group/src/vaadin-radio-button.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 { radioButtonStyles } from './styles/vaadin-radio-button-core-styles.js';
1213
import { RadioButtonMixin } from './vaadin-radio-button-mixin.js';
@@ -52,7 +53,7 @@ import { RadioButtonMixin } from './vaadin-radio-button-mixin.js';
5253
* @mixes ElementMixin
5354
* @mixes RadioButtonMixin
5455
*/
55-
class RadioButton extends RadioButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
56+
class RadioButton extends RadioButtonMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
5657
static get is() {
5758
return 'vaadin-radio-button';
5859
}

‎packages/radio-group/src/vaadin-radio-group.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { html, LitElement } from 'lit';
88
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
99
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
1010
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
11+
import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
1112
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
1213
import { radioGroupStyles } from './styles/vaadin-radio-group-core-styles.js';
1314
import { RadioGroupMixin } from './vaadin-radio-group-mixin.js';
@@ -60,7 +61,7 @@ import { RadioGroupMixin } from './vaadin-radio-group-mixin.js';
6061
* @mixes ElementMixin
6162
* @mixes RadioGroupMixin
6263
*/
63-
class RadioGroup extends RadioGroupMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
64+
class RadioGroup extends RadioGroupMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
6465
static get is() {
6566
return 'vaadin-radio-group';
6667
}

‎packages/radio-group/test/visual/lumo/radio-button.test.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { sendKeys } from '@vaadin/test-runner-commands';
22
import { fixtureSync } from '@vaadin/testing-helpers';
33
import { visualDiff } from '@web/test-runner-visual-regression';
4-
import '@vaadin/vaadin-lumo-styles/test/autoload.js';
5-
import '../../../theme/lumo/vaadin-radio-button.js';
4+
import '@vaadin/vaadin-lumo-styles/global.css';
5+
import '@vaadin/vaadin-lumo-styles/props.css';
6+
import '@vaadin/vaadin-lumo-styles/components/radio-button.css';
7+
import '../../../vaadin-radio-button.js';
68

79
describe('radio-button', () => {
810
let div, element;

‎packages/radio-group/test/visual/lumo/radio-group.test.js

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

79
describe('radio-group', () => {
810
let div, element;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
*/
66
@import './components/accordion.css';
77
@import './components/button.css';
8+
@import './components/checkbox-group.css';
9+
@import './components/checkbox.css';
810
@import './components/combo-box.css';
911
@import './components/custom-field.css';
1012
@import './components/date-picker.css';
@@ -22,6 +24,8 @@
2224
@import './components/multi-select-combo-box.css';
2325
@import './components/number-field.css';
2426
@import './components/password-field.css';
27+
@import './components/radio-button.css';
28+
@import './components/radio-group.css';
2529
@import './components/select.css';
2630
@import './components/text-area.css';
2731
@import './components/text-field.css';

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
@import './checkbox.css';
7+
8+
@import '../src/mixins/base-layer-reset.css' vaadin-checkbox-group;
9+
@import '../src/mixins/group-field.css' vaadin-checkbox-group;
10+
@import '../src/mixins/field-label.css' vaadin-checkbox-group;
11+
@import '../src/mixins/field-required.css' vaadin-checkbox-group;
12+
@import '../src/mixins/field-error-message.css' vaadin-checkbox-group;
13+
@import '../src/mixins/field-helper.css' vaadin-checkbox-group;
14+
@import '../src/components/checkbox-group.css' vaadin-checkbox-group;
15+
16+
html {
17+
--vaadin-checkbox-group-css-inject: 1;
18+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 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-checkbox;
7+
@import '../src/mixins/checkable-field.css' vaadin-checkbox;
8+
@import '../src/components/checkbox.css' vaadin-checkbox;
9+
10+
html {
11+
--vaadin-checkbox-css-inject: 1;
12+
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 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-radio-button;
7+
@import '../src/mixins/checkable-field.css' vaadin-radio-button;
8+
@import '../src/components/radio-button.css' vaadin-radio-button;
9+
10+
html {
11+
--vaadin-radio-button-css-inject: 1;
12+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
@import './radio-button.css';
7+
8+
@import '../src/mixins/base-layer-reset.css' vaadin-radio-group;
9+
@import '../src/mixins/group-field.css' vaadin-radio-group;
10+
@import '../src/mixins/field-label.css' vaadin-radio-group;
11+
@import '../src/mixins/field-required.css' vaadin-radio-group;
12+
@import '../src/mixins/field-error-message.css' vaadin-radio-group;
13+
@import '../src/mixins/field-helper.css' vaadin-radio-group;
14+
@import '../src/components/radio-group.css' vaadin-radio-group;
15+
16+
html {
17+
--vaadin-radio-group-css-inject: 1;
18+
}

‎packages/vaadin-lumo-styles/src/components/checkbox-group.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2017 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'],
7+
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='helper-text'] {
8+
color: var(--lumo-body-text-color);
9+
}
10+
11+
/* Touch device adjustment */
12+
@media (pointer: coarse) {
13+
:host(:hover:not([readonly]):not([disabled]):not([focused])) [part='label'] {
14+
color: var(--lumo-secondary-text-color);
15+
}
16+
}

0 commit comments

Comments
 (0)