feat: set up infra, port button Lumo styles to CSS files (#9245)

Author: vursen

.github/workflows/visual-tests.yml

@@ -79,3 +79,35 @@ jobs:
           path: |
             packages/*/test/visual/lumo/screenshots/*/failed/*.png
             packages/vaadin-lumo-styles/test/visual/screenshots/failed/*.png
+  lumo-ported:
+    name: Lumo (CSS files)
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'vaadin'
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: '0'
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'yarn'
+
+      - name: Install Dependencies
+        run: yarn --frozen-lockfile --no-progress --non-interactive
+
+      - name: Visual tests
+        env:
+          SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
+          SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
+        run: yarn test:lumo --ported
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: screenshots
+          path: |
+            packages/*/test/visual/lumo/screenshots/*/failed/*.png
+            packages/vaadin-lumo-styles/test/visual/screenshots/failed/*.png

dev/button.html

@@ -17,6 +17,7 @@
       import '@vaadin/icon';
       import '@vaadin/icons';
       import '@vaadin/tooltip';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
       import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
     </script>
   </head>

dev/icon.html

@@ -11,6 +11,7 @@
       import '@vaadin/icon';
       import '@vaadin/icons/vaadin-iconset.js';
       import '@vaadin/vaadin-lumo-styles/font-icons.js';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
       import '@vaadin/tooltip';
       import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
 

package.json

@@ -19,7 +19,7 @@
     "prepare": "husky",
     "serve:dist": "web-dev-server --app-index dist/index.html --open",
     "start": "web-dev-server --node-resolve --open /dev",
-    "start:base": "web-dev-server --node-resolve --open /dev --base",
+    "start:base": "web-dev-server --node-resolve --open /dev --theme=base",
     "check-releases": "node ./scripts/check-releases.js && web-dev-server --node-resolve --open /scripts/check-releases.html",
     "test": "web-test-runner",
     "test:base": "yarn test --config web-test-runner-base.config.js",

packages/button/src/vaadin-button.js

@@ -8,6 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { buttonStyles } from './vaadin-button-core-styles.js';
 import { ButtonMixin } from './vaadin-button-mixin.js';
@@ -46,7 +47,7 @@ import { ButtonMixin } from './vaadin-button-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Button extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Button extends ButtonMixin(ElementMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-button';
   }

packages/button/test/visual/lumo/button.test.js

@@ -1,9 +1,11 @@
 import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands';
 import { fixtureSync, mousedown } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '@vaadin/icon/theme/lumo/vaadin-icon.js';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/button.css';
 import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
-import '../../../theme/lumo/vaadin-button.js';
+import '@vaadin/icon';
+import '../../../vaadin-button.js';
 
 describe('button', () => {
   let div, element;

packages/icon/src/vaadin-icon.js

@@ -9,6 +9,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { IconMixin } from './vaadin-icon-mixin.js';
 import { iconStyles } from './vaadin-icon-styles.js';
@@ -58,7 +59,7 @@ import { iconStyles } from './vaadin-icon-styles.js';
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Icon extends IconMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Icon extends IconMixin(ElementMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-icon';
   }

packages/icon/test/visual/lumo/icon.test.js

@@ -1,2 +1,2 @@
-import '../../../theme/lumo/vaadin-icon.js';
+import '../../../vaadin-icon.js';
 import '../icon.common.js';

packages/vaadin-lumo-styles/components.css

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './components/button.css';
+@import './components/icon.css';

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import '../src/mixins/base-layer-reset.css' vaadin-button;
+@import '../src/components/button.css' vaadin-button;
+
+html {
+  --vaadin-button-css-inject: 1;
+}