fix: reset font styles in overlays (#10110)

* improve CSS reset for Lumo

* add CSS reset for base styles

* fix CSS lint issue

* remove some properties from base styles

* use initial for all properties

* Apply suggestions from code review

Co-authored-by: Jouni Koivuviita <[email protected]>

---------

Co-authored-by: Jouni Koivuviita <[email protected]>

Author: sissbruecker

packages/overlay/src/styles/vaadin-overlay-base-styles.js

@@ -65,6 +65,17 @@ export const overlayStyles = css`
     overscroll-behavior: contain;
     pointer-events: auto;
     -webkit-tap-highlight-color: initial;
+
+    /* CSS reset for font styles */
+    color: 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'] {

packages/overlay/test/visual/base/overlay.test.js

@@ -25,4 +25,28 @@ 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',
+      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';
+    element.opened = true;
+
+    await visualDiff(div, 'text-style-reset');
+  });
 });

packages/overlay/test/visual/base/screenshots/overlay/baseline/text-style-reset.png

@@ -27,4 +27,28 @@ 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',
+      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';
+    element.opened = true;
+
+    await visualDiff(div, 'text-style-reset');
+  });
 });

packages/overlay/test/visual/lumo/overlay.test.js

@@ -65,13 +65,22 @@
     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);
+    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-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;