refactor: split padding-container custom CSS property in base styles (#10447)

web-padawan · web-flow · commit 982464cc418b · 2025-11-13T13:30:13.000+02:00
diff --git a/packages/aura/src/components/accordion-details.css b/packages/aura/src/components/accordion-details.css
@@ -1,5 +1,5 @@
 :is(vaadin-details, vaadin-accordion-panel):not([theme~='no-padding'])::part(content) {
-  padding: var(--vaadin-padding-container);
+  padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
   padding-top: 0;
 }
 
diff --git a/packages/aura/src/size.css b/packages/aura/src/size.css
@@ -31,8 +31,8 @@
     1px
   );
 
-  --vaadin-padding-container: round(var(--vaadin-padding-s) / 1.4, 1px)
-    max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
+  --vaadin-padding-block-container: round(var(--vaadin-padding-s) / 1.4, 1px);
+  --vaadin-padding-inline-container: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 2, 1px));
 
   --vaadin-gap-xs: var(--vaadin-padding-xs);
   --vaadin-gap-s: var(--vaadin-padding-s);
diff --git a/packages/button/src/styles/vaadin-button-base-styles.js b/packages/button/src/styles/vaadin-button-base-styles.js
@@ -22,7 +22,7 @@ export const buttonStyles = css`
     flex-shrink: 0;
     height: var(--vaadin-button-height, auto);
     margin: var(--vaadin-button-margin, 0);
-    padding: var(--vaadin-button-padding, var(--vaadin-padding-container));
+    padding: var(--vaadin-button-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
     font-family: var(--vaadin-button-font-family, inherit);
     font-size: var(--vaadin-button-font-size, inherit);
     line-height: var(--vaadin-button-line-height, inherit);
diff --git a/packages/component-base/src/styles/style-props.js b/packages/component-base/src/styles/style-props.js
diff --git a/packages/dashboard/src/styles/vaadin-dashboard-widget-base-styles.js b/packages/dashboard/src/styles/vaadin-dashboard-widget-base-styles.js
@@ -95,7 +95,10 @@ const widgetStyles = css`
 
   /* Widget parts */
   header {
-    padding: var(--vaadin-dashboard-widget-header-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-dashboard-widget-header-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
   }
 
   :host([editable]) header {
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
@@ -36,7 +36,7 @@ export const overlayContentStyles = css`
     font-weight: var(--vaadin-button-font-weight, 500);
     height: var(--vaadin-button-height, auto);
     line-height: var(--vaadin-button-line-height, inherit);
-    padding: var(--vaadin-button-padding, var(--vaadin-padding-container));
+    padding: var(--vaadin-button-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
     cursor: var(--vaadin-clickable-cursor);
   }
 
diff --git a/packages/details/src/styles/vaadin-details-summary-base-styles.js b/packages/details/src/styles/vaadin-details-summary-base-styles.js
@@ -24,7 +24,10 @@ export const detailsSummary = (partName = 'vaadin-details-summary') => css`
     height: var(--${unsafeCSS(partName)}-height, auto);
     outline: calc(var(--vaadin-focus-ring-width) * var(--_focus-ring, 0)) solid var(--vaadin-focus-ring-color);
     outline-offset: 1px;
-    padding: var(--${unsafeCSS(partName)}-padding, var(--vaadin-padding-container));
+    padding: var(
+      --${unsafeCSS(partName)}-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
     user-select: none;
diff --git a/packages/field-base/src/styles/field-base-styles.js b/packages/field-base/src/styles/field-base-styles.js
@@ -63,7 +63,10 @@ export const field = css`
     align-self: var(--_has-label, end) var(--_no-label, start);
     font-size: var(--vaadin-input-field-value-font-size, inherit);
     line-height: var(--vaadin-input-field-value-line-height, inherit);
-    padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-input-field-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     border: var(--vaadin-input-field-border-width, 1px) solid transparent;
     pointer-events: none;
     margin-bottom: var(--_no-label, 0)
diff --git a/packages/field-base/src/styles/group-base-styles.js b/packages/field-base/src/styles/group-base-styles.js
@@ -26,7 +26,7 @@ export const group = css`
   }
 
   :host([has-label][theme~='horizontal']) [part='group-field'] {
-    padding: var(--vaadin-padding-container);
+    padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
     padding-inline: 0;
     border-block: var(--vaadin-input-field-border-width, 1px) solid transparent;
   }
diff --git a/packages/grid/src/styles/vaadin-grid-base-styles.js b/packages/grid/src/styles/vaadin-grid-base-styles.js
@@ -25,6 +25,10 @@ export const gridStyles = css`
     --_border-color: var(--vaadin-grid-border-color, var(--vaadin-border-color-secondary));
     --_row-border-width: var(--vaadin-grid-row-border-width, 1px);
     --_column-border-width: var(--vaadin-grid-column-border-width, 0px);
+    --_cell-padding: var(
+      --vaadin-grid-cell-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     border-radius: var(--vaadin-grid-border-radius, var(--vaadin-radius-m));
   }
 
@@ -383,7 +387,7 @@ export const gridStyles = css`
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
+    padding: var(--_cell-padding);
     flex: 1;
     min-height: 1lh;
     min-width: 0;
@@ -418,7 +422,7 @@ export const gridStyles = css`
     display: block;
     flex: 1;
     overflow: auto;
-    padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
+    padding: var(--_cell-padding);
     outline: none;
     border-block: var(--_row-border-width) var(--_border-color);
   }
@@ -450,7 +454,7 @@ export const gridStyles = css`
     box-shadow:
       0 0 0 1px hsla(0deg, 0%, 0%, 0.2),
       0 8px 24px -2px hsla(0deg, 0%, 0%, 0.2);
-    padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container)) !important;
+    padding: var(--_cell-padding) !important;
     border-radius: 3px;
 
     /* Prevent overflowing the grid in Firefox */
diff --git a/packages/input-container/src/styles/vaadin-input-container-base-styles.js b/packages/input-container/src/styles/vaadin-input-container-base-styles.js
@@ -21,7 +21,10 @@ export const inputContainerStyles = css`
       var(--vaadin-input-field-border-color, var(--vaadin-border-color));
     box-sizing: border-box;
     cursor: text;
-    padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-input-field-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     gap: var(--vaadin-input-field-gap, var(--vaadin-gap-s));
     background: var(--vaadin-input-field-background, var(--vaadin-background-color));
     color: var(--vaadin-input-field-value-color, var(--vaadin-text-color));
diff --git a/packages/item/src/styles/vaadin-item-base-styles.js b/packages/item/src/styles/vaadin-item-base-styles.js
@@ -15,7 +15,7 @@ export const itemStyles = css`
     display: flex;
     gap: var(--vaadin-item-gap, 0 var(--vaadin-gap-s));
     height: var(--vaadin-item-height, auto);
-    padding: var(--vaadin-item-padding, var(--vaadin-padding-container));
+    padding: var(--vaadin-item-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
   }
 
   :host([focused]) {
diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js
@@ -257,7 +257,7 @@ export const mapStyles = css`
     list-style: none;
     margin: 0;
     color: var(--vaadin-map-attribution-text-color, var(--vaadin-text-color-secondary));
-    padding: var(--vaadin-padding-container);
+    padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
     font-size: 0.8em;
   }
 
diff --git a/packages/message-input/src/styles/vaadin-message-input-button-styles.js b/packages/message-input/src/styles/vaadin-message-input-button-styles.js
@@ -10,7 +10,10 @@ export const messageInputButtonStyles = css`
   :host {
     flex: none;
     align-self: end;
-    margin: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
+    margin: var(
+      --vaadin-input-field-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     --vaadin-button-border-width: 0;
     --vaadin-button-background: transparent;
     --vaadin-button-text-color: var(--vaadin-text-color);
diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-base-styles.js
@@ -94,7 +94,10 @@ export const content = css`
     line-height: var(--vaadin-rich-text-editor-content-line-height, inherit);
     outline: none;
     overflow-y: auto;
-    padding: var(--vaadin-rich-text-editor-content-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-rich-text-editor-content-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     tab-size: calc(var(--_item-indent) * 2);
     text-align: left;
     white-space: pre-wrap;
@@ -132,7 +135,7 @@ export const content = css`
     border-radius: var(--vaadin-radius-s);
     white-space: pre-wrap;
     margin-block: var(--vaadin-padding-s);
-    padding: var(--vaadin-padding-container);
+    padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
   }
 
   /* lists */
@@ -360,7 +363,7 @@ export const content = css`
 
   blockquote {
     border-inline-start: 4px solid var(--vaadin-border-color-secondary);
-    margin: var(--vaadin-padding-container);
+    margin: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);
     padding-inline-start: var(--vaadin-padding-s);
   }
 
@@ -412,7 +415,10 @@ const toolbar = css`
     cursor: var(--vaadin-clickable-cursor);
     flex-shrink: 0;
     font: inherit;
-    padding: var(--vaadin-rich-text-editor-toolbar-button-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-rich-text-editor-toolbar-button-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     position: relative;
   }
 
diff --git a/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-popup-overlay-base-styles.js b/packages/rich-text-editor/src/styles/vaadin-rich-text-editor-popup-overlay-base-styles.js
@@ -13,7 +13,10 @@ import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-st
 
 export const richTextEditorPopupOverlay = css`
   [part='overlay'] {
-    padding: var(--vaadin-rich-text-editor-overlay-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-rich-text-editor-overlay-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
   }
 
   [part='content'] {
diff --git a/packages/side-nav/src/styles/vaadin-side-nav-base-styles.js b/packages/side-nav/src/styles/vaadin-side-nav-base-styles.js
@@ -19,7 +19,10 @@ const sideNav = css`
     align-items: center;
     justify-content: start;
     gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s));
-    padding: var(--vaadin-side-nav-item-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-side-nav-item-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     font-size: var(--vaadin-side-nav-label-font-size, max(11px, 0.875em));
     font-weight: var(--vaadin-side-nav-label-font-weight, 500);
     color: var(--vaadin-side-nav-label-color, var(--vaadin-text-color-secondary));
diff --git a/packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js b/packages/side-nav/src/styles/vaadin-side-nav-item-base-styles.js
@@ -14,7 +14,10 @@ const sideNavItem = css`
     align-items: center;
     min-width: 0;
     max-width: 100%;
-    padding: var(--vaadin-side-nav-item-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-side-nav-item-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     --_gap: var(--vaadin-side-nav-item-gap, var(--vaadin-gap-s));
     gap: var(--_gap);
     font-size: var(--vaadin-side-nav-item-font-size, 1em);
diff --git a/packages/tabs/src/styles/vaadin-tab-base-styles.js b/packages/tabs/src/styles/vaadin-tab-base-styles.js
@@ -13,7 +13,7 @@ export const tabStyles = css`
     align-items: center;
     justify-content: center;
     gap: var(--vaadin-tab-gap, var(--vaadin-gap-s));
-    padding: var(--vaadin-tab-padding, var(--vaadin-padding-container));
+    padding: var(--vaadin-tab-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
     cursor: var(--vaadin-clickable-cursor);
     font-size: var(--vaadin-tab-font-size, 1em);
     font-weight: var(--vaadin-tab-font-weight, 500);
diff --git a/packages/tabs/src/styles/vaadin-tabs-base-styles.js b/packages/tabs/src/styles/vaadin-tabs-base-styles.js
@@ -49,7 +49,7 @@ export const tabsStyles = css`
     cursor: var(--vaadin-clickable-cursor);
     box-sizing: border-box;
     height: 100%;
-    padding: var(--vaadin-tab-padding, var(--vaadin-padding-container));
+    padding: var(--vaadin-tab-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
     background: var(--vaadin-background-color);
     display: flex;
     align-items: center;
diff --git a/packages/text-area/src/styles/vaadin-text-area-base-styles.js b/packages/text-area/src/styles/vaadin-text-area-base-styles.js
@@ -9,7 +9,10 @@ import { css } from 'lit';
 export const textAreaStyles = css`
   [part='input-field'] {
     overflow: auto;
-    scroll-padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
+    scroll-padding: var(
+      --vaadin-input-field-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
   }
 
   ::slotted(textarea) {
diff --git a/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js b/packages/tooltip/src/styles/vaadin-tooltip-overlay-base-styles.js
@@ -14,7 +14,10 @@ export const tooltipOverlayStyles = css`
 
   [part='overlay'] {
     max-width: var(--vaadin-tooltip-max-width, 40ch);
-    padding: var(--vaadin-tooltip-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-tooltip-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
     border: var(--vaadin-tooltip-border-width, var(--vaadin-overlay-border-width, 1px)) solid
       var(--vaadin-tooltip-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)));
     border-radius: var(--vaadin-tooltip-border-radius, var(--vaadin-radius-m));
diff --git a/packages/upload/src/styles/vaadin-upload-file-base-styles.js b/packages/upload/src/styles/vaadin-upload-file-base-styles.js
@@ -91,7 +91,10 @@ export const uploadFileStyles = css`
     cursor: var(--vaadin-clickable-cursor);
     flex-shrink: 0;
     font: inherit;
-    padding: var(--vaadin-upload-file-button-padding, var(--vaadin-padding-container));
+    padding: var(
+      --vaadin-upload-file-button-padding,
+      var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container)
+    );
   }
 
   button:focus-visible {

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`:is(vaadin-details, vaadin-accordion-panel):not([theme~='no-padding'])::part(content) {`
`2`		`- padding: var(--vaadin-padding-container);`
	`2`	`+ padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);`
`3`	`3`	`padding-top: 0;`
`4`	`4`	`}`
`5`	`5`
Original file line number	Diff line number	Diff line change
@@ -36,7 +36,7 @@ export const overlayContentStyles = css`
`36`	`36`	`font-weight: var(--vaadin-button-font-weight, 500);`
`37`	`37`	`height: var(--vaadin-button-height, auto);`
`38`	`38`	`line-height: var(--vaadin-button-line-height, inherit);`
`39`		`- padding: var(--vaadin-button-padding, var(--vaadin-padding-container));`
	`39`	`+ padding: var(--vaadin-button-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));`
`40`	`40`	`cursor: var(--vaadin-clickable-cursor);`
`41`	`41`	`}`
`42`	`42`
Original file line number	Diff line number	Diff line change
@@ -26,7 +26,7 @@ export const group = css`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`:host([has-label][theme~='horizontal']) [part='group-field'] {`
`29`		`- padding: var(--vaadin-padding-container);`
	`29`	`+ padding: var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container);`
`30`	`30`	`padding-inline: 0;`
`31`	`31`	`border-block: var(--vaadin-input-field-border-width, 1px) solid transparent;`
`32`	`32`	`}`