feat: port dashboard Lumo styles to CSS files

dev/dashboard-layout.html

@@ -11,6 +11,7 @@
       import '@vaadin/dashboard/vaadin-dashboard-layout.js';
       import '@vaadin/dashboard/vaadin-dashboard-widget.js';
       import '@vaadin/dashboard/vaadin-dashboard-section.js';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
     </script>
 
     <style>

dev/dashboard.html

@@ -33,6 +33,7 @@
 
     <script type="module">
       import '@vaadin/dashboard';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
 
       const dashboard = document.querySelector('vaadin-dashboard');
 

packages/dashboard/src/vaadin-dashboard-button.js

@@ -15,9 +15,10 @@ 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';
 
-class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardButton extends ButtonMixin(ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-dashboard-button';
   }

packages/dashboard/src/vaadin-dashboard-layout.js

@@ -12,6 +12,7 @@ import { html, LitElement } from 'lit';
 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 { dashboardLayoutStyles } from './styles/vaadin-dashboard-layout-styles.js';
 import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
@@ -56,7 +57,9 @@ import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardLayout extends DashboardLayoutMixin(
+  ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-layout';
   }

packages/dashboard/src/vaadin-dashboard-section.js

@@ -12,6 +12,7 @@ import { html, LitElement } from 'lit';
 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 { dashboardSectionStyles } from './styles/vaadin-dashboard-section-styles.js';
 import { DashboardItemMixin } from './vaadin-dashboard-item-mixin.js';
@@ -69,7 +70,9 @@ import { getDefaultI18n } from './vaadin-dashboard-item-mixin.js';
  * @mixes ThemableMixin
  * @mixes DashboardItemMixin
  */
-class DashboardSection extends DashboardItemMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardSection extends DashboardItemMixin(
+  ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-section';
   }

packages/dashboard/src/vaadin-dashboard-widget.js

@@ -12,6 +12,7 @@ import { html, LitElement } from 'lit';
 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 { dashboardWidgetStyles } from './styles/vaadin-dashboard-widget-styles.js';
 import { findAncestorInstance, SYNCHRONIZED_ATTRIBUTES, WRAPPER_LOCAL_NAME } from './vaadin-dashboard-helpers.js';
@@ -103,7 +104,9 @@ import { DashboardSection } from './vaadin-dashboard-section.js';
  * @mixes ThemableMixin
  * @mixes DashboardItemMixin
  */
-class DashboardWidget extends DashboardItemMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DashboardWidget extends DashboardItemMixin(
+  ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-dashboard-widget';
   }

packages/dashboard/src/vaadin-dashboard.js

@@ -15,6 +15,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-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 { dashboardStyles } from './styles/vaadin-dashboard-styles.js';
 import {
@@ -105,7 +106,7 @@ import { WidgetResizeController } from './widget-resize-controller.js';
  * @mixes ThemableMixin
  */
 class Dashboard extends DashboardLayoutMixin(
-  I18nMixin(getDefaultI18n(), ElementMixin(ThemableMixin(PolylitMixin(LitElement)))),
+  I18nMixin(getDefaultI18n(), ElementMixin(ThemableMixin(CSSInjectionMixin(PolylitMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-dashboard';

packages/dashboard/test/visual/lumo/dashboard.test.ts

@@ -1,7 +1,9 @@
 import { sendKeys } from '@vaadin/test-runner-commands';
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/lumo/vaadin-dashboard.js';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/dashboard.css';
+import '../../../vaadin-dashboard.js';
 import { html, render } from 'lit';
 import type { Dashboard } from '../../../src/vaadin-dashboard.js';
 import {

packages/vaadin-lumo-styles/components.css

@@ -13,6 +13,7 @@
 @import './components/confirm-dialog.css';
 @import './components/context-menu.css';
 @import './components/custom-field.css';
+@import './components/dashboard.css';
 @import './components/date-picker.css';
 @import './components/date-time-picker.css';
 @import './components/details-summary.css';

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

@@ -0,0 +1,30 @@
+/**
+ * @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-dashboard-layout;
+@import '../src/components/dashboard-layout.css' vaadin-dashboard-layout;
+
+@import '../src/mixins/base-layer-reset.css' vaadin-dashboard;
+@import '../src/components/dashboard-layout.css' vaadin-dashboard;
+@import '../src/components/dashboard.css' vaadin-dashboard;
+
+@import '../src/mixins/base-layer-reset.css' vaadin-dashboard-widget;
+@import '../src/mixins/dashboard-item.css' vaadin-dashboard-widget;
+@import '../src/components/dashboard-widget.css' vaadin-dashboard-widget;
+
+@import '../src/mixins/base-layer-reset.css' vaadin-dashboard-section;
+@import '../src/mixins/dashboard-item.css' vaadin-dashboard-section;
+@import '../src/components/dashboard-section.css' vaadin-dashboard-section;
+
+@import '../src/mixins/base-layer-reset.css' vaadin-dashboard-button;
+@import '../src/components/button.css' vaadin-dashboard-button;
+
+html {
+  --vaadin-dashboard-css-inject: 1;
+  --vaadin-dashboard-widget-css-inject: 1;
+  --vaadin-dashboard-section-css-inject: 1;
+  --vaadin-dashboard-layout-css-inject: 1;
+  --vaadin-dashboard-button-css-inject: 1;
+}

packages/vaadin-lumo-styles/src/components/dashboard-layout.css

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:host {
+  display: block;
+  overflow: auto;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host([dense-layout]) #grid {
+  grid-auto-flow: dense;
+}
+
+#grid {
+  box-sizing: border-box;
+
+  /* Padding around dashboard edges */
+  --_default-padding: var(--lumo-space-m);
+  --_padding: max(0px, var(--vaadin-dashboard-padding, var(--_default-padding)));
+  padding: var(--_padding);
+
+  /* Gap between widgets */
+  --_default-gap: var(--lumo-space-m);
+  --_gap: max(0px, var(--vaadin-dashboard-gap, var(--_default-gap)));
+  gap: var(--_gap);
+
+  /* Default min and max column widths */
+  --_default-col-min-width: 25rem;
+  --_default-col-max-width: 1fr;
+
+  /* Effective min and max column widths */
+  --_col-min-width: var(--vaadin-dashboard-col-min-width, var(--_default-col-min-width));
+  --_col-max-width: var(--vaadin-dashboard-col-max-width, var(--_default-col-max-width));
+
+  /* Effective max column count */
+  --_col-max-count: var(--vaadin-dashboard-col-max-count, var(--_col-count));
+
+  /* Effective column count */
+  --_effective-col-count: min(var(--_col-count), var(--_col-max-count));
+
+  /* Default row min height */
+  --_default-row-min-height: 12rem;
+  /* Effective row min height */
+  --_row-min-height: var(--vaadin-dashboard-row-min-height, var(--_default-row-min-height));
+  /* Effective row height */
+  --_row-height: minmax(var(--_row-min-height, auto), auto);
+
+  display: grid;
+  overflow: hidden;
+  min-width: calc(var(--_col-min-width) + var(--_padding) * 2);
+
+  grid-template-columns: repeat(
+    var(--_effective-col-count, auto-fill),
+    minmax(var(--_col-min-width), var(--_col-max-width))
+  );
+
+  grid-auto-rows: var(--_row-height);
+}
+
+::slotted(*) {
+  /* The grid-column value applied to children */
+  --_item-column: span min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
+
+  grid-column: var(--_item-column);
+
+  /* The grid-row value applied to children */
+  --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
+  grid-row: var(--_item-row);
+}
+
+:host([theme~='shaded-background']) {
+  background: var(--lumo-shade-5pct);
+}
+
+:host([theme~='elevated-widgets']) {
+  --vaadin-dashboard-widget-shadow: var(--lumo-box-shadow-xs);
+  --vaadin-dashboard-widget-border-color: var(--lumo-contrast-10pct);
+  --vaadin-dashboard-widget-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct))
+    var(--lumo-base-color);
+}
+
+:host([theme~='flat-widgets']) {
+  --vaadin-dashboard-widget-background: var(--lumo-contrast-5pct);
+  --vaadin-dashboard-widget-border-color: transparent;
+}

packages/vaadin-lumo-styles/src/components/dashboard-section.css

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:host {
+  display: grid;
+  position: relative;
+  grid-template-columns: subgrid;
+  --_section-column: 1 / calc(var(--_effective-col-count) + 1);
+  grid-column: var(--_section-column) !important;
+  gap: var(--_gap, 1rem);
+  /* Dashboard section header height */
+  --_section-header-height: minmax(0, auto);
+  grid-template-rows: var(--_section-header-height) repeat(auto-fill, var(--_row-height));
+  grid-auto-rows: var(--_row-height);
+  --_section-outline-offset: calc(min(var(--_gap), var(--_padding)) / 3);
+  --_focus-ring-offset: calc((var(--_section-outline-offset) - var(--_focus-ring-width)));
+  border-radius: var(--lumo-border-radius-l);
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+::slotted(*) {
+  --_item-column: span min(var(--vaadin-dashboard-widget-colspan, 1), var(--_effective-col-count, var(--_col-count)));
+
+  grid-column: var(--_item-column);
+  --_item-row: span var(--vaadin-dashboard-widget-rowspan, 1);
+  grid-row: var(--_item-row);
+}
+
+header {
+  grid-column: var(--_section-column);
+  margin-bottom: calc(-1 * var(--_section-outline-offset));
+  line-height: var(--lumo-line-height-s);
+  padding-inline: var(--lumo-space-s);
+  min-height: var(--lumo-size-l);
+  align-items: center;
+}
+
+:host::before {
+  z-index: 2 !important;
+}
+
+::slotted(vaadin-dashboard-widget-wrapper) {
+  display: contents;
+}
+
+[part='title'] {
+  font-size: var(--lumo-font-size-xl);
+  font-weight: 600;
+  white-space: nowrap;
+  line-height: var(--lumo-line-height-m);
+}
+
+/* Section states */
+
+:host([editable]) {
+  outline: 1px solid var(--lumo-contrast-10pct);
+  outline-offset: calc(var(--_section-outline-offset) - 1px);
+  background: var(--lumo-contrast-5pct);
+  box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-contrast-5pct);
+}
+
+:host([editable]) header {
+  padding-inline: var(--lumo-space-xs);
+}
+
+:host([focused])::after {
+  content: '';
+  display: block;
+  position: absolute;
+  inset: 0;
+  border-radius: var(--lumo-border-radius-l);
+  z-index: 9;
+  outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
+  outline-offset: var(--_focus-ring-offset);
+}
+
+:host([selected]) {
+  background: var(--lumo-primary-color-10pct);
+  box-shadow: 0 0 0 var(--_section-outline-offset) var(--lumo-primary-color-10pct);
+}
+
+:host([selected]:not([focused])) {
+  outline-color: var(--lumo-primary-color-50pct);
+}
+
+:host([move-mode]) ::slotted(*) {
+  --_widget-opacity: 0.3;
+  --_widget-filter: blur(10px);
+}
+
+:host([dragging]) {
+  background: var(--_drop-target-background-color);
+  outline: var(--_drop-target-border);
+  box-shadow: 0 0 0 var(--_section-outline-offset) var(--_drop-target-background-color);
+}
+
+/* Accessible move mode controls */
+
+[part~='move-backward-button'] {
+  inset-inline-start: calc(-1 * var(--_section-outline-offset));
+}
+
+[part~='move-forward-button'] {
+  inset-inline-end: calc(-1 * var(--_section-outline-offset));
+  transform: translateY(-50%);
+}