From ebbfb8a89dc75e3f1ae0bdd29829cd6650200578 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 30 Sep 2025 16:52:18 +0300 Subject: [PATCH 1/4] feat: aura dashboard widget theme --- packages/aura/aura.css | 1 + packages/aura/src/components/dashboard.css | 81 ++++++++++++++++++++++ packages/aura/src/surface.css | 1 + 3 files changed, 83 insertions(+) create mode 100644 packages/aura/src/components/dashboard.css diff --git a/packages/aura/aura.css b/packages/aura/aura.css index c5ff382c4c..b53beaf42d 100644 --- a/packages/aura/aura.css +++ b/packages/aura/aura.css @@ -13,6 +13,7 @@ @import './src/components/card.css'; @import './src/components/checkbox-radio.css'; @import './src/components/date-picker.css'; +@import './src/components/dashboard.css'; @import './src/components/dialog.css'; @import './src/components/grid.css'; @import './src/components/input-container.css'; diff --git a/packages/aura/src/components/dashboard.css b/packages/aura/src/components/dashboard.css new file mode 100644 index 0000000000..07ce9c441f --- /dev/null +++ b/packages/aura/src/components/dashboard.css @@ -0,0 +1,81 @@ +:where(:root, :host) { + --vaadin-dashboard-widget-title-font-weight: var(--aura-font-weight-medium); + --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-s) var(--vaadin-padding-m); + --vaadin-dashboard-header-gap: var(--vaadin-gap-xs); + --vaadin-dashboard-widget-border-color: var(--vaadin-border-color-secondary); + --vaadin-dashboard-widget-background: var(--aura-surface) padding-box; + --vaadin-dashboard-widget-border-radius: var(--vaadin-radius-m); +} + +vaadin-dashboard-widget { + border-radius: calc(var(--vaadin-dashboard-widget-border-radius) - var(--vaadin-dashboard-widget-border-width, 1px)); + + &::before { + inset: calc(var(--vaadin-dashboard-widget-border-width, 1px) * -1); + border-radius: var(--vaadin-dashboard-widget-border-radius); + } + + &::part(move-forward-button), + &::part(move-backward-button), + &::part(resize-shrink-height-button), + &::part(resize-grow-height-button), + &::part(resize-shrink-width-button), + &::part(resize-grow-width-button) { + background: var(--aura-surface-solid) padding-box; + color: var(--vaadin-text-color-secondary); + border: 1px solid var(--vaadin-border-color); + transition: 120ms color; + } + + &::part(resize-shrink-height-button), + &::part(resize-grow-height-button) { + margin-top: 0; + border-bottom: 0; + } + + &::part(move-forward-button), + &::part(resize-shrink-width-button), + &::part(resize-grow-width-button) { + margin-inline-start: 0; + border-inline-end: 0; + } + + &::part(move-backward-button) { + margin-inline-end: 0; + border-inline-start: 0; + } + + &::part(move-apply-button), + &::part(resize-apply-button) { + background: var(--aura-accent-color); + color: var(--aura-accent-contrast); + box-shadow: 0 0 0 3px var(--aura-surface); + } + + &::part(move-button), + &::part(remove-button), + &::part(resize-button) { + color: var(--vaadin-text-color-disabled); + transition: 120ms color; + } + + &[editable] { + --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs); + } +} + +@media (any-hover: hover) { + vaadin-dashboard-widget { + &::part(move-button):hover, + &::part(remove-button):hover, + &::part(resize-button):hover, + &::part(move-forward-button):hover, + &::part(move-backward-button):hover, + &::part(resize-shrink-height-button):hover, + &::part(resize-grow-height-button):hover, + &::part(resize-shrink-width-button):hover, + &::part(resize-grow-width-button):hover { + color: var(--vaadin-text-color); + } + } +} diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css index fc38c087b7..ce34b63237 100644 --- a/packages/aura/src/surface.css +++ b/packages/aura/src/surface.css @@ -13,6 +13,7 @@ vaadin-button, vaadin-card, vaadin-checkbox::part(checkbox), vaadin-details[theme~='filled'], +vaadin-dashboard-widget, vaadin-master-detail-layout::part(detail), vaadin-menu-bar-button, vaadin-message-input, From 860df0c283470544b8107994769c7056aa949409 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Wed, 1 Oct 2025 08:56:18 +0300 Subject: [PATCH 2/4] blur content in edit and resize modes --- packages/aura/src/components/dashboard.css | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/aura/src/components/dashboard.css b/packages/aura/src/components/dashboard.css index 07ce9c441f..b8b549d2c8 100644 --- a/packages/aura/src/components/dashboard.css +++ b/packages/aura/src/components/dashboard.css @@ -21,10 +21,11 @@ vaadin-dashboard-widget { &::part(resize-grow-height-button), &::part(resize-shrink-width-button), &::part(resize-grow-width-button) { - background: var(--aura-surface-solid) padding-box; + background: var(--aura-surface) padding-box; color: var(--vaadin-text-color-secondary); border: 1px solid var(--vaadin-border-color); transition: 120ms color; + outline-offset: -1px; } &::part(resize-shrink-height-button), @@ -50,6 +51,7 @@ vaadin-dashboard-widget { background: var(--aura-accent-color); color: var(--aura-accent-contrast); box-shadow: 0 0 0 3px var(--aura-surface); + outline-offset: 2px; } &::part(move-button), @@ -62,6 +64,18 @@ vaadin-dashboard-widget { &[editable] { --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs); } + + &::part(content) { + transition: 200ms; + transition-property: filter, opacity; + } + + &:is([resize-mode], [move-mode])::part(content) { + opacity: 0.75; + filter: blur(10px); + clip-path: inset(0); + transition-duration: 50ms; + } } @media (any-hover: hover) { From 1c65a79af994d5cb16cb636524477f7e382dac98 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Wed, 1 Oct 2025 09:02:56 +0300 Subject: [PATCH 3/4] apply styles to dashboard-section --- packages/aura/src/components/dashboard.css | 42 +++++++++++++++------- 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/packages/aura/src/components/dashboard.css b/packages/aura/src/components/dashboard.css index b8b549d2c8..7520fea003 100644 --- a/packages/aura/src/components/dashboard.css +++ b/packages/aura/src/components/dashboard.css @@ -15,6 +15,34 @@ vaadin-dashboard-widget { border-radius: var(--vaadin-dashboard-widget-border-radius); } + &::part(content) { + transition: 200ms; + transition-property: filter, opacity; + } + + &:is([resize-mode], [move-mode])::part(content) { + opacity: 0.75; + filter: blur(10px); + clip-path: inset(0); + transition-duration: 50ms; + } +} + +vaadin-dashboard-section { + vaadin-dashboard-widget { + transition: 200ms; + transition-property: filter, opacity; + } + + &[move-mode] vaadin-dashboard-widget { + opacity: 0.75; + filter: blur(10px); + clip-path: inset(0); + transition-duration: 50ms; + } +} + +:is(vaadin-dashboard-widget, vaadin-dashboard-section) { &::part(move-forward-button), &::part(move-backward-button), &::part(resize-shrink-height-button), @@ -64,22 +92,10 @@ vaadin-dashboard-widget { &[editable] { --vaadin-dashboard-widget-header-padding: var(--vaadin-padding-xs); } - - &::part(content) { - transition: 200ms; - transition-property: filter, opacity; - } - - &:is([resize-mode], [move-mode])::part(content) { - opacity: 0.75; - filter: blur(10px); - clip-path: inset(0); - transition-duration: 50ms; - } } @media (any-hover: hover) { - vaadin-dashboard-widget { + :is(vaadin-dashboard-widget, vaadin-dashboard-section) { &::part(move-button):hover, &::part(remove-button):hover, &::part(resize-button):hover, From e8347390e212255305cfd1df23a4fe6e18f15b6d Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Thu, 2 Oct 2025 15:50:20 +0300 Subject: [PATCH 4/4] Update dashboard.css --- packages/aura/src/components/dashboard.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/aura/src/components/dashboard.css b/packages/aura/src/components/dashboard.css index 7520fea003..724a3d8ae8 100644 --- a/packages/aura/src/components/dashboard.css +++ b/packages/aura/src/components/dashboard.css @@ -87,6 +87,7 @@ vaadin-dashboard-section { &::part(resize-button) { color: var(--vaadin-text-color-disabled); transition: 120ms color; + outline-offset: -2px; } &[editable] {