fix: don't use rem values for most sizing and spacing (#9674)

jouni · web-flow · commit 0d33e23248f6 · 2025-07-10T12:01:20.000+03:00
diff --git a/packages/app-layout/src/styles/vaadin-app-layout-base-styles.js b/packages/app-layout/src/styles/vaadin-app-layout-base-styles.js
@@ -173,7 +173,7 @@ export const appLayoutStyles = css`
   @media (max-width: 800px), (max-height: 600px) {
     :host {
       --vaadin-app-layout-drawer-overlay: true;
-      --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
+      --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 320px);
     }
   }
 
diff --git a/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js b/packages/avatar-group/src/styles/vaadin-avatar-group-base-styles.js
@@ -36,7 +36,8 @@ export const avatarGroupStyles = css`
     mask-position: calc(
       50% +
         (
-          var(--vaadin-avatar-size, 2em) - var(--vaadin-avatar-group-overlap, 8px) + var(--vaadin-avatar-group-gap, 2px)
+          var(--vaadin-avatar-size, 32px) - var(--vaadin-avatar-group-overlap, 8px) +
+            var(--vaadin-avatar-group-gap, 2px)
         ) *
         var(--_d)
     );
diff --git a/packages/avatar/src/styles/vaadin-avatar-base-styles.js b/packages/avatar/src/styles/vaadin-avatar-base-styles.js
@@ -15,8 +15,8 @@ export const avatarStyles = css`
     color: var(--vaadin-avatar-color, var(--vaadin-color-subtle));
     line-height: 0;
     overflow: hidden;
-    height: var(--vaadin-avatar-size, 2em);
-    width: var(--vaadin-avatar-size, 2em);
+    height: var(--vaadin-avatar-size, 32px);
+    width: var(--vaadin-avatar-size, 32px);
     border: var(--vaadin-focus-ring-width) solid transparent;
     margin: calc(var(--vaadin-focus-ring-width) * -1);
     background: var(--vaadin-avatar-background, var(--vaadin-background-container-strong));
diff --git a/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js b/packages/date-picker/src/styles/vaadin-date-picker-overlay-content-base-styles.js
@@ -74,8 +74,8 @@ export const overlayContentStyles = css`
   ::slotted([slot='years'])::before {
     background: var(--vaadin-overlay-background, var(--vaadin-background-color));
     border: 1px solid var(--vaadin-date-picker-year-scroller-border-color, var(--vaadin-border-color));
-    width: 1em;
-    height: 1em;
+    width: 16px;
+    height: 16px;
     position: absolute;
     left: auto;
     z-index: 1;
diff --git a/packages/date-picker/src/styles/vaadin-month-calendar-base-styles.js b/packages/date-picker/src/styles/vaadin-month-calendar-base-styles.js
@@ -9,7 +9,7 @@ import { css } from 'lit';
 export const monthCalendarStyles = css`
   :host {
     display: block;
-    padding: var(--vaadin-date-picker-month-padding, 0.5rem);
+    padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding));
   }
 
   [part='month-header'] {
diff --git a/packages/grid/src/styles/vaadin-grid-tree-toggle-base-styles.js b/packages/grid/src/styles/vaadin-grid-tree-toggle-base-styles.js
@@ -32,7 +32,7 @@ export const gridTreeToggleStyles = css`
   }
 
   #level-spacer {
-    width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 1em));
+    width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 16px));
   }
 
   [part='toggle'] {
diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js
@@ -112,7 +112,7 @@ export const mapStyles = css`
     display: grid;
     grid-template-columns: min-content 1fr min-content;
     grid-template-rows: min-content 1fr min-content min-content min-content min-content;
-    padding: var(--vaadin-map-controls-inset, 0.25em);
+    padding: var(--vaadin-map-controls-inset, 4px);
     box-sizing: border-box;
     grid-template-areas:
       'scale mouse-position fullscreen'
@@ -162,7 +162,7 @@ export const mapStyles = css`
 
   .ol-scale-step-text {
     position: absolute;
-    top: 0.75em;
+    top: 12px;
     font-size: 0.625em;
     color: #000;
     filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
@@ -173,19 +173,19 @@ export const mapStyles = css`
   .ol-scale-text {
     position: absolute;
     font-size: 0.625em;
-    top: 2em;
+    top: 32px;
     color: #000;
     white-space: nowrap;
     filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
   }
 
   .ol-scale-singlebar {
-    height: 0.25em;
+    height: 4px;
     opacity: 0.5;
   }
 
   .ol-control {
-    margin: 0.25em;
+    margin: 4px;
     border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius-m));
   }
 
@@ -197,8 +197,8 @@ export const mapStyles = css`
     padding: 0;
     color: inherit;
     font: inherit;
-    width: var(--vaadin-map-control-size, 1.5em);
-    height: var(--vaadin-map-control-size, 1.5em);
+    width: var(--vaadin-map-control-size, 24px);
+    height: var(--vaadin-map-control-size, 24px);
     border-radius: inherit;
   }
 
@@ -228,8 +228,8 @@ export const mapStyles = css`
   }
 
   .ol-attribution.ol-uncollapsible {
-    margin-inline-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
-    margin-block-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
+    margin-inline-end: calc(var(--vaadin-map-controls-inset, 4px) * -1);
+    margin-block-end: calc(var(--vaadin-map-controls-inset, 4px) * -1);
     border-radius: var(--vaadin-radius) 0 0 0;
   }
 
@@ -287,9 +287,9 @@ export const mapStyles = css`
   }
 
   .ol-overviewmap-map {
-    height: 10em;
-    width: 10em;
-    margin: 0.25rem;
+    height: 160px;
+    width: 160px;
+    margin: 4px;
     border: 0;
     border-radius: var(--vaadin-button-border-radius, var(--vaadin-radius));
   }
@@ -312,12 +312,12 @@ export const mapStyles = css`
 
   .ol-zoomslider {
     grid-area: zoom-slider;
-    height: 8em;
+    height: 128px;
   }
 
   .ol-zoomslider button {
     position: relative;
-    height: 0.5em;
+    height: 8px;
     display: block;
     border-radius: inherit;
   }
diff --git a/packages/popover/src/styles/vaadin-popover-overlay-base-styles.js b/packages/popover/src/styles/vaadin-popover-overlay-base-styles.js
@@ -8,8 +8,8 @@ import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-st
 
 const popoverOverlay = css`
   :host {
-    --_arrow-size: var(--vaadin-popover-arrow-size, 0.5rem);
-    --_default-offset: 0.25rem;
+    --_arrow-size: var(--vaadin-popover-arrow-size, 8px);
+    --_default-offset: 4px;
     --_rtl-multiplier: 1;
     --_border-width: var(--vaadin-popover-border-width, var(--vaadin-overlay-border-width, 1px));
   }
@@ -85,7 +85,7 @@ const popoverOverlay = css`
   }
 
   :host([theme~='arrow']) {
-    --_default-offset: calc(0.25rem + var(--_arrow-size) / 2);
+    --_default-offset: calc(4px + var(--_arrow-size) / 2);
   }
 
   :host([theme~='arrow']) [part='arrow'] {
diff --git a/packages/progress-bar/src/styles/vaadin-progress-bar-base-styles.js b/packages/progress-bar/src/styles/vaadin-progress-bar-base-styles.js
@@ -45,8 +45,8 @@ export const progressBarStyles = css`
 
   /* Indeterminate progress */
   :host([indeterminate]) [part='value'] {
-    --_w-min: clamp(0.5em, 5%, 1em);
-    --_w-max: clamp(1em, 20%, 8em);
+    --_w-min: clamp(8px, 5%, 16px);
+    --_w-max: clamp(16px, 20%, 128px);
     animation: indeterminate var(--vaadin-progress-bar-animation-duration, 1s) linear infinite alternate;
     width: var(--_w-min);
   }
diff --git a/packages/split-layout/src/styles/vaadin-split-layout-base-styles.js b/packages/split-layout/src/styles/vaadin-split-layout-base-styles.js
@@ -27,10 +27,10 @@ export const splitLayoutStyles = css`
   }
 
   [part='splitter'] {
-    --_splitter-size: var(--vaadin-split-layout-splitter-size, 0.5rem);
-    --_splitter-target-size: var(--vaadin-split-layout-splitter-target-size, 0.5rem);
-    --_handle-size: var(--vaadin-split-layout-handle-size, 0.25rem);
-    --_handle-target-size: var(--vaadin-split-layout-handle-target-size, 2rem);
+    --_splitter-size: var(--vaadin-split-layout-splitter-size, 8px);
+    --_splitter-target-size: var(--vaadin-split-layout-splitter-target-size, 8px);
+    --_handle-size: var(--vaadin-split-layout-handle-size, 4px);
+    --_handle-target-size: var(--vaadin-split-layout-handle-target-size, 32px);
     background: var(--vaadin-split-layout-splitter-background, var(--vaadin-background-container-strong));
     flex: none;
     position: relative;
diff --git a/packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js b/packages/tabsheet/src/styles/vaadin-tabsheet-base-styles.js
@@ -35,7 +35,7 @@ export const tabSheetStyles = [
     ::slotted([slot='tabs']) {
       flex: 1;
       align-self: stretch;
-      min-width: 8em;
+      min-width: 128px;
     }
 
     [part='content'] {
diff --git a/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js b/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js
@@ -28,22 +28,22 @@ export const tooltipOverlayStyles = css`
 
   :host([position^='top'][top-aligned]) [part='overlay'],
   :host([position^='bottom'][top-aligned]) [part='overlay'] {
-    margin-top: var(--vaadin-tooltip-offset-top, 0.25rem);
+    margin-top: var(--vaadin-tooltip-offset-top, 4px);
   }
 
   :host([position^='top'][bottom-aligned]) [part='overlay'],
   :host([position^='bottom'][bottom-aligned]) [part='overlay'] {
-    margin-bottom: var(--vaadin-tooltip-offset-bottom, 0.25rem);
+    margin-bottom: var(--vaadin-tooltip-offset-bottom, 4px);
   }
 
   :host([position^='start'][start-aligned]) [part='overlay'],
   :host([position^='end'][start-aligned]) [part='overlay'] {
-    margin-inline-start: var(--vaadin-tooltip-offset-start, 0.25rem);
+    margin-inline-start: var(--vaadin-tooltip-offset-start, 4px);
   }
 
   :host([position^='start'][end-aligned]) [part='overlay'],
   :host([position^='end'][end-aligned]) [part='overlay'] {
-    margin-inline-end: var(--vaadin-tooltip-offset-end, 0.25rem);
+    margin-inline-end: var(--vaadin-tooltip-offset-end, 4px);
   }
 
   @media (forced-colors: active) {

Original file line number	Diff line number	Diff line change
@@ -173,7 +173,7 @@ export const appLayoutStyles = css`
`173`	`173`	`@media (max-width: 800px), (max-height: 600px) {`
`174`	`174`	`:host {`
`175`	`175`	`--vaadin-app-layout-drawer-overlay: true;`
`176`		`- --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);`
	`176`	`+ --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 320px);`
`177`	`177`	`}`
`178`	`178`	`}`
`179`	`179`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import { css } from 'lit';`
`9`	`9`	export const monthCalendarStyles = css`
`10`	`10`	`:host {`
`11`	`11`	`display: block;`
`12`		`- padding: var(--vaadin-date-picker-month-padding, 0.5rem);`
	`12`	`+ padding: var(--vaadin-date-picker-month-padding, var(--vaadin-padding));`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`[part='month-header'] {`
Original file line number	Diff line number	Diff line change
@@ -32,7 +32,7 @@ export const gridTreeToggleStyles = css`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`#level-spacer {`
`35`		`- width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 1em));`
	`35`	`+ width: calc(var(--_level, 0) * var(--vaadin-grid-tree-toggle-level-offset, 16px));`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`[part='toggle'] {`
Original file line number	Diff line number	Diff line change
`@@ -8,8 +8,8 @@ import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-st`
`8`	`8`
`9`	`9`	const popoverOverlay = css`
`10`	`10`	`:host {`
`11`		`- --_arrow-size: var(--vaadin-popover-arrow-size, 0.5rem);`
`12`		`- --_default-offset: 0.25rem;`
	`11`	`+ --_arrow-size: var(--vaadin-popover-arrow-size, 8px);`
	`12`	`+ --_default-offset: 4px;`
`13`	`13`	`--_rtl-multiplier: 1;`
`14`	`14`	`--_border-width: var(--vaadin-popover-border-width, var(--vaadin-overlay-border-width, 1px));`
`15`	`15`	`}`
@@ -85,7 +85,7 @@ const popoverOverlay = css`
`85`	`85`	`}`
`86`	`86`
`87`	`87`	`:host([theme~='arrow']) {`
`88`		`- --_default-offset: calc(0.25rem + var(--_arrow-size) / 2);`
	`88`	`+ --_default-offset: calc(4px + var(--_arrow-size) / 2);`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`:host([theme~='arrow']) [part='arrow'] {`