From d4cda836ab3ce264ab4616e20c6e47e72734438a Mon Sep 17 00:00:00 2001 From: Tomi Virkki Date: Fri, 10 Jan 2025 09:29:13 +0200 Subject: [PATCH] refactor: remove global dashboard widget styles --- .../lumo/vaadin-dashboard-section-styles.js | 6 +- .../lumo/vaadin-dashboard-widget-styles.js | 61 ++++++++++--------- 2 files changed, 36 insertions(+), 31 deletions(-) diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js index cc1e4d4f13..170b6c1530 100644 --- a/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js +++ b/packages/dashboard/theme/lumo/vaadin-dashboard-section-styles.js @@ -64,9 +64,9 @@ const section = css` } :host([dragging]) { - background: var(--vaadin-dashboard-drop-target-background-color); - outline: var(--vaadin-dashboard-drop-target-border); - box-shadow: 0 0 0 var(--_section-outline-offset) var(--vaadin-dashboard-drop-target-background-color); + background: var(--_vaadin-dashboard-drop-target-background-color); + outline: var(--_vaadin-dashboard-drop-target-border); + box-shadow: 0 0 0 var(--_section-outline-offset) var(--_vaadin-dashboard-drop-target-background-color); } /* Accessible move mode controls */ diff --git a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js index 80489634d2..d946ae5412 100644 --- a/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js +++ b/packages/dashboard/theme/lumo/vaadin-dashboard-widget-styles.js @@ -4,32 +4,37 @@ import '@vaadin/vaadin-lumo-styles/spacing.js'; import '@vaadin/vaadin-lumo-styles/style.js'; import '@vaadin/vaadin-lumo-styles/typography.js'; import '@vaadin/vaadin-lumo-styles/font-icons.js'; -import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles'; import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; -/* Global styles */ -const dashboardWidgetProps = css` - html { - --vaadin-dashboard-widget-background: var(--lumo-base-color); - --vaadin-dashboard-widget-border-radius: var(--lumo-border-radius-l); - --vaadin-dashboard-widget-border-width: 1px; - --vaadin-dashboard-widget-border-color: var(--lumo-contrast-20pct); - --vaadin-dashboard-widget-shadow: 0 0 0 0 transparent; - --vaadin-dashboard-widget-editable-shadow: var(--lumo-box-shadow-s); - --vaadin-dashboard-widget-selected-shadow: 0 2px 4px -1px var(--lumo-primary-color-10pct), - 0 3px 12px -1px var(--lumo-primary-color-50pct); - --vaadin-dashboard-drop-target-background-color: var(--lumo-primary-color-10pct); - --vaadin-dashboard-drop-target-border: 1px dashed var(--lumo-primary-color-50pct); - } -`; -addGlobalThemeStyles('dashboard-widget-props', dashboardWidgetProps); - /* Styles shared between widgets and sections */ const dashboardWidgetAndSection = css` /* stylelint-disable rule-empty-line-before */ /* stylelint-disable length-zero-no-unit */ :host { + --_vaadin-dashboard-widget-background: var(--vaadin-dashboard-widget-background, var(--lumo-base-color)); + --_vaadin-dashboard-widget-border-radius: var(--vaadin-dashboard-widget-border-radius, var(--lumo-border-radius-l)); + --_vaadin-dashboard-widget-border-width: var(--vaadin-dashboard-widget-border-width, 1px); + --_vaadin-dashboard-widget-border-color: var(--vaadin-dashboard-widget-border-color, var(--lumo-contrast-20pct)); + --_vaadin-dashboard-widget-shadow: var(--vaadin-dashboard-widget-shadow, 0 0 0 0 transparent); + --_vaadin-dashboard-widget-editable-shadow: var( + --vaadin-dashboard-widget-editable-shadow, + var(--lumo-box-shadow-s) + ); + --_vaadin-dashboard-widget-selected-shadow: var( + --vaadin-dashboard-widget-selected-shadow, + 0 2px 4px -1px var(--lumo-primary-color-10pct), + 0 3px 12px -1px var(--lumo-primary-color-50pct) + ); + --_vaadin-dashboard-drop-target-background-color: var( + --vaadin-dashboard-drop-target-background-color, + var(--lumo-primary-color-10pct) + ); + --_vaadin-dashboard-drop-target-border: var( + --vaadin-dashboard-drop-target-border, + 1px dashed var(--lumo-primary-color-50pct) + ); + color: var(--lumo-body-text-color); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-m); @@ -137,17 +142,17 @@ const dashboardWidgetAndSection = css` /* Widget styles */ const dashboardWidget = css` :host { - background: var(--vaadin-dashboard-widget-background); - border-radius: var(--vaadin-dashboard-widget-border-radius); - --_border-shadow: 0 0 0 var(--vaadin-dashboard-widget-border-width) var(--vaadin-dashboard-widget-border-color); - --_shadow: var(--vaadin-dashboard-widget-shadow); + background: var(--_vaadin-dashboard-widget-background); + border-radius: var(--_vaadin-dashboard-widget-border-radius); + --_border-shadow: 0 0 0 var(--_vaadin-dashboard-widget-border-width) var(--_vaadin-dashboard-widget-border-color); + --_shadow: var(--_vaadin-dashboard-widget-shadow); box-shadow: var(--_shadow), var(--_border-shadow); } /* Widget states */ :host([editable]) { - --_shadow: var(--vaadin-dashboard-widget-editable-shadow); + --_shadow: var(--_vaadin-dashboard-widget-editable-shadow); } :host([focused]) { @@ -155,19 +160,19 @@ const dashboardWidget = css` } :host([selected]) { - --_shadow: var(--vaadin-dashboard-widget-selected-shadow); + --_shadow: var(--_vaadin-dashboard-widget-selected-shadow); background: var(--lumo-primary-color-10pct); } :host([dragging]) { box-shadow: none; - background: var(--vaadin-dashboard-drop-target-background-color); - border: var(--vaadin-dashboard-drop-target-border); + background: var(--_vaadin-dashboard-drop-target-background-color); + border: var(--_vaadin-dashboard-drop-target-border); } :host([resizing])::after { - background: var(--vaadin-dashboard-drop-target-background-color); - border: var(--vaadin-dashboard-drop-target-border); + background: var(--_vaadin-dashboard-drop-target-background-color); + border: var(--_vaadin-dashboard-drop-target-border); } /* Widget parts */