refactor: split padding-container custom CSS property in base styles

web-padawan · web-padawan · commit 1379b437381d · 2025-11-12T11:39:14.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) var(--vaadin-padding-inline);
   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: round(var(--vaadin-padding-s) / 1.4, 1px);
+  --vaadin-padding-inline: 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) var(--vaadin-padding-inline));
     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,7 @@ 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) var(--vaadin-padding-inline));
   }
 
   :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) var(--vaadin-padding-inline));
     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,7 @@ 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) var(--vaadin-padding-inline));
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
     user-select: none;
diff --git a/packages/grid/src/styles/vaadin-grid-base-styles.js b/packages/grid/src/styles/vaadin-grid-base-styles.js
@@ -367,7 +367,7 @@ export const gridStyles = css`
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
+    padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-block) var(--vaadin-padding-inline));
     flex: 1;
     min-height: 1lh;
     min-width: 0;
@@ -402,7 +402,7 @@ export const gridStyles = css`
     display: block;
     flex: 1;
     overflow: auto;
-    padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-container));
+    padding: var(--vaadin-grid-cell-padding, var(--vaadin-padding-block) var(--vaadin-padding-inline));
     outline: none;
     border-block: var(--_row-border-width) var(--_border-color);
   }
@@ -434,7 +434,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(--vaadin-grid-cell-padding, var(--vaadin-padding-block) var(--vaadin-padding-inline)) !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,7 @@ 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) var(--vaadin-padding-inline));
     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) var(--vaadin-padding-inline));
   }
 
   :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) var(--vaadin-padding-inline);
     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,7 @@ 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) var(--vaadin-padding-inline));
     --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,7 @@ 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) var(--vaadin-padding-inline));
     tab-size: calc(var(--_item-indent) * 2);
     text-align: left;
     white-space: pre-wrap;
@@ -132,7 +132,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) var(--vaadin-padding-inline);
   }
 
   /* lists */
@@ -360,7 +360,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) var(--vaadin-padding-inline);
     padding-inline-start: var(--vaadin-padding-s);
   }
 
@@ -412,7 +412,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) var(--vaadin-padding-inline)
+    );
     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,7 @@ 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) var(--vaadin-padding-inline));
   }
 
   [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,7 @@ 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) var(--vaadin-padding-inline));
     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,7 @@ 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) var(--vaadin-padding-inline));
     --_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) var(--vaadin-padding-inline));
     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) var(--vaadin-padding-inline));
     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,7 @@ 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) var(--vaadin-padding-inline));
   }
 
   ::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,7 @@ 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) var(--vaadin-padding-inline));
     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,7 @@ 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) var(--vaadin-padding-inline));
   }
 
   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) var(--vaadin-padding-inline);`
`3`	`3`	`padding-top: 0;`
`4`	`4`	`}`
`5`	`5`
Original file line number	Diff line number	Diff line change
@@ -95,7 +95,7 @@ const widgetStyles = css`
`95`	`95`
`96`	`96`	`/* Widget parts */`
`97`	`97`	`header {`
`98`		`- padding: var(--vaadin-dashboard-widget-header-padding, var(--vaadin-padding-container));`
	`98`	`+ padding: var(--vaadin-dashboard-widget-header-padding, var(--vaadin-padding-block) var(--vaadin-padding-inline));`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`:host([editable]) header {`
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) var(--vaadin-padding-inline));`
`40`	`40`	`cursor: var(--vaadin-clickable-cursor);`
`41`	`41`	`}`
`42`	`42`
Original file line number	Diff line number	Diff line change
@@ -15,7 +15,7 @@ export const itemStyles = css`
`15`	`15`	`display: flex;`
`16`	`16`	`gap: var(--vaadin-item-gap, 0 var(--vaadin-gap-s));`
`17`	`17`	`height: var(--vaadin-item-height, auto);`
`18`		`- padding: var(--vaadin-item-padding, var(--vaadin-padding-container));`
	`18`	`+ padding: var(--vaadin-item-padding, var(--vaadin-padding-block) var(--vaadin-padding-inline));`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`:host([focused]) {`