From 19d00bb6e89b4addc9561f940bf4add19655869e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 29 Aug 2025 15:11:47 +0200 Subject: [PATCH 1/6] improve CSS reset for Lumo --- .../overlay/test/visual/lumo/overlay.test.js | 22 ++++++++++++++++++ .../overlay/baseline/text-style-reset.png | Bin 0 -> 9807 bytes .../vaadin-lumo-styles/src/mixins/overlay.css | 5 ++++ 3 files changed, 27 insertions(+) create mode 100644 packages/overlay/test/visual/lumo/screenshots/overlay/baseline/text-style-reset.png diff --git a/packages/overlay/test/visual/lumo/overlay.test.js b/packages/overlay/test/visual/lumo/overlay.test.js index 6ec83b4d1d8..e3788e8a019 100644 --- a/packages/overlay/test/visual/lumo/overlay.test.js +++ b/packages/overlay/test/visual/lumo/overlay.test.js @@ -27,4 +27,26 @@ describe('overlay', () => { element.opened = true; await visualDiff(div, 'with-backdrop'); }); + + it('text-style-reset', async () => { + Object.assign(div.style, { + color: 'red', + fontFamily: "'Comic Sans MS', cursive", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 'bold', + fontVariant: 'small-caps', + lineHeight: '2', + letterSpacing: '2px', + textAlign: 'center', + textDecoration: 'underline', + textTransform: 'uppercase', + whiteSpace: 'nowrap', + }); + // Make overlay smaller to force text wrapping, also tests text-align on wrapped text + element.$.overlay.style.width = '150px'; + element.opened = true; + + await visualDiff(div, 'text-style-reset'); + }); }); diff --git a/packages/overlay/test/visual/lumo/screenshots/overlay/baseline/text-style-reset.png b/packages/overlay/test/visual/lumo/screenshots/overlay/baseline/text-style-reset.png new file mode 100644 index 0000000000000000000000000000000000000000..81a3b49fa2788042c1f800f25cef8666321fc93d GIT binary patch literal 9807 zcmeHNS6EY7v_2Fm158jy5l}!;5vhV0krHNPWGKQ67*VO}00Ih1q(c(Mf(1bYq&Ec_ z!U!^SLI`CP1(F~jp@o2y03iuAA^o1rz4zgM_w7F1C-Z&T$w^N3-s|6M{p;Ur=kc$u z4l3Vidg*)&MGE2W@Dor?+`j|>I)J17j~8MJ7!=ey z-^j%2H5SJjdic@%vJ1Lp@Ak>r_kXW{Ke+Y%7vsf~W?89Kv%{^0jrBu^8V)oDTqyY4 z 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 literal 0 HcmV?d00001 diff --git a/packages/vaadin-lumo-styles/src/mixins/overlay.css b/packages/vaadin-lumo-styles/src/mixins/overlay.css index 7d3e8f8e4f7..e8221d43d87 100644 --- a/packages/vaadin-lumo-styles/src/mixins/overlay.css +++ b/packages/vaadin-lumo-styles/src/mixins/overlay.css @@ -68,10 +68,15 @@ color: var(--lumo-body-text-color); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-m); + font-style: normal; font-weight: 400; + font-variant: normal; line-height: var(--lumo-line-height-m); letter-spacing: 0; + text-align: initial; + text-decoration: none; text-transform: none; + white-space: initial; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; From b74efd71392c02696f8d55953efce2acb8c89ed7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 29 Aug 2025 15:21:50 +0200 Subject: [PATCH 2/6] add CSS reset for base styles --- .../src/styles/vaadin-overlay-base-styles.js | 17 ++++++++++++++ .../overlay/test/visual/base/overlay.test.js | 22 ++++++++++++++++++ .../overlay/baseline/text-style-reset.png | Bin 0 -> 7363 bytes .../vaadin-lumo-styles/src/mixins/overlay.css | 2 ++ 4 files changed, 41 insertions(+) create mode 100644 packages/overlay/test/visual/base/screenshots/overlay/baseline/text-style-reset.png diff --git a/packages/overlay/src/styles/vaadin-overlay-base-styles.js b/packages/overlay/src/styles/vaadin-overlay-base-styles.js index 6380a4567bc..daf2d48a611 100644 --- a/packages/overlay/src/styles/vaadin-overlay-base-styles.js +++ b/packages/overlay/src/styles/vaadin-overlay-base-styles.js @@ -65,6 +65,23 @@ export const overlayStyles = css` overscroll-behavior: contain; pointer-events: auto; -webkit-tap-highlight-color: initial; + + /* CSS reset for font styles*/ + color: initial; + font-family: initial; + font-size: initial; + font-style: initial; + font-weight: initial; + font-variant: normal; + line-height: initial; + letter-spacing: initial; + text-align: initial; + text-decoration: none; + text-transform: none; + white-space: initial; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } [part='backdrop'] { diff --git a/packages/overlay/test/visual/base/overlay.test.js b/packages/overlay/test/visual/base/overlay.test.js index 73f755e99f6..2064d092345 100644 --- a/packages/overlay/test/visual/base/overlay.test.js +++ b/packages/overlay/test/visual/base/overlay.test.js @@ -25,4 +25,26 @@ describe('overlay', () => { element.opened = true; await visualDiff(div, 'with-backdrop'); }); + + it('text-style-reset', async () => { + Object.assign(div.style, { + color: 'red', + fontFamily: "'Comic Sans MS', cursive", + fontSize: '20px', + fontStyle: 'italic', + fontWeight: 'bold', + fontVariant: 'small-caps', + lineHeight: '2', + letterSpacing: '2px', + textAlign: 'center', + textDecoration: 'underline', + textTransform: 'uppercase', + whiteSpace: 'nowrap', + }); + // Make overlay smaller to force text wrapping, also tests text-align on wrapped text + element.$.overlay.style.width = '150px'; + element.opened = true; + + await visualDiff(div, 'text-style-reset'); + }); }); diff --git a/packages/overlay/test/visual/base/screenshots/overlay/baseline/text-style-reset.png b/packages/overlay/test/visual/base/screenshots/overlay/baseline/text-style-reset.png new file mode 100644 index 0000000000000000000000000000000000000000..64a20f6d2b55d0418f8a5328c9e41474e19fe56d GIT binary patch literal 7363 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 literal 0 HcmV?d00001 diff --git a/packages/vaadin-lumo-styles/src/mixins/overlay.css b/packages/vaadin-lumo-styles/src/mixins/overlay.css index e8221d43d87..091cdff7d74 100644 --- a/packages/vaadin-lumo-styles/src/mixins/overlay.css +++ b/packages/vaadin-lumo-styles/src/mixins/overlay.css @@ -65,6 +65,8 @@ box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m); + + /* CSS reset for font styles */ color: var(--lumo-body-text-color); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-m); From 8a35240e38961e862067855cfe178b5dac28ea53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 29 Aug 2025 15:31:45 +0200 Subject: [PATCH 3/6] fix CSS lint issue --- packages/overlay/src/styles/vaadin-overlay-base-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/overlay/src/styles/vaadin-overlay-base-styles.js b/packages/overlay/src/styles/vaadin-overlay-base-styles.js index daf2d48a611..81e7825121a 100644 --- a/packages/overlay/src/styles/vaadin-overlay-base-styles.js +++ b/packages/overlay/src/styles/vaadin-overlay-base-styles.js @@ -66,7 +66,7 @@ export const overlayStyles = css` pointer-events: auto; -webkit-tap-highlight-color: initial; - /* CSS reset for font styles*/ + /* CSS reset for font styles */ color: initial; font-family: initial; font-size: initial; From ac555b9c4e81663b68de649352999926dbb710aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Mon, 1 Sep 2025 08:43:49 +0200 Subject: [PATCH 4/6] remove some properties from base styles --- packages/overlay/src/styles/vaadin-overlay-base-styles.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/overlay/src/styles/vaadin-overlay-base-styles.js b/packages/overlay/src/styles/vaadin-overlay-base-styles.js index 81e7825121a..e65553c6ef5 100644 --- a/packages/overlay/src/styles/vaadin-overlay-base-styles.js +++ b/packages/overlay/src/styles/vaadin-overlay-base-styles.js @@ -79,9 +79,6 @@ export const overlayStyles = css` text-decoration: none; text-transform: none; white-space: initial; - -webkit-text-size-adjust: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } [part='backdrop'] { From c7c62ea001685875ee0298ba267a7fbeff4fa7bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Wed, 3 Sep 2025 09:22:45 +0200 Subject: [PATCH 5/6] use initial for all properties --- packages/overlay/src/styles/vaadin-overlay-base-styles.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/overlay/src/styles/vaadin-overlay-base-styles.js b/packages/overlay/src/styles/vaadin-overlay-base-styles.js index e65553c6ef5..d115379883f 100644 --- a/packages/overlay/src/styles/vaadin-overlay-base-styles.js +++ b/packages/overlay/src/styles/vaadin-overlay-base-styles.js @@ -72,12 +72,12 @@ export const overlayStyles = css` font-size: initial; font-style: initial; font-weight: initial; - font-variant: normal; + font-variant: initial; line-height: initial; letter-spacing: initial; text-align: initial; - text-decoration: none; - text-transform: none; + text-decoration: initial; + text-transform: initial; white-space: initial; } From 9616d52a44680f6a27ed8471ef1ee52fceef67fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Tue, 9 Sep 2025 08:12:16 +0200 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: Jouni Koivuviita --- .../overlay/src/styles/vaadin-overlay-base-styles.js | 9 +++------ packages/overlay/test/visual/base/overlay.test.js | 2 ++ packages/overlay/test/visual/lumo/overlay.test.js | 2 ++ packages/vaadin-lumo-styles/src/mixins/overlay.css | 2 ++ 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/overlay/src/styles/vaadin-overlay-base-styles.js b/packages/overlay/src/styles/vaadin-overlay-base-styles.js index d115379883f..769d40cbfb9 100644 --- a/packages/overlay/src/styles/vaadin-overlay-base-styles.js +++ b/packages/overlay/src/styles/vaadin-overlay-base-styles.js @@ -68,17 +68,14 @@ export const overlayStyles = css` /* CSS reset for font styles */ color: initial; - font-family: initial; - font-size: initial; - font-style: initial; - font-weight: initial; - font-variant: initial; - line-height: initial; + font: initial; letter-spacing: initial; text-align: initial; text-decoration: initial; + text-indent: initial; text-transform: initial; white-space: initial; + word-spacing: initial; } [part='backdrop'] { diff --git a/packages/overlay/test/visual/base/overlay.test.js b/packages/overlay/test/visual/base/overlay.test.js index 2064d092345..abc710ad001 100644 --- a/packages/overlay/test/visual/base/overlay.test.js +++ b/packages/overlay/test/visual/base/overlay.test.js @@ -39,7 +39,9 @@ describe('overlay', () => { textAlign: 'center', textDecoration: 'underline', textTransform: 'uppercase', + textIndent: '20px', whiteSpace: 'nowrap', + wordSpacing: '20px', }); // Make overlay smaller to force text wrapping, also tests text-align on wrapped text element.$.overlay.style.width = '150px'; diff --git a/packages/overlay/test/visual/lumo/overlay.test.js b/packages/overlay/test/visual/lumo/overlay.test.js index e3788e8a019..c93331fc6cf 100644 --- a/packages/overlay/test/visual/lumo/overlay.test.js +++ b/packages/overlay/test/visual/lumo/overlay.test.js @@ -40,8 +40,10 @@ describe('overlay', () => { letterSpacing: '2px', textAlign: 'center', textDecoration: 'underline', + textIndent: '20px', textTransform: 'uppercase', whiteSpace: 'nowrap', + wordSpacing: '20px', }); // Make overlay smaller to force text wrapping, also tests text-align on wrapped text element.$.overlay.style.width = '150px'; diff --git a/packages/vaadin-lumo-styles/src/mixins/overlay.css b/packages/vaadin-lumo-styles/src/mixins/overlay.css index 091cdff7d74..625778b1d3d 100644 --- a/packages/vaadin-lumo-styles/src/mixins/overlay.css +++ b/packages/vaadin-lumo-styles/src/mixins/overlay.css @@ -77,8 +77,10 @@ letter-spacing: 0; text-align: initial; text-decoration: none; + text-indent: initial; text-transform: none; white-space: initial; + word-spacing: initial; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;