From fc0b2afd66a4ef2bf1404354590d3a142366aee4 Mon Sep 17 00:00:00 2001
From: Diego Cardoso <diego@vaadin.com>
Date: Tue, 21 Jan 2025 12:58:15 +0200
Subject: [PATCH] feat: add spacing CSS properties in layout components

---
 .../src/vaadin-horizontal-layout-styles.js                | 7 ++++++-
 .../theme/lumo/vaadin-horizontal-layout-styles.js         | 8 ++++++++
 packages/vertical-layout/src/vaadin-vertical-layout.js    | 7 ++++++-
 .../theme/lumo/vaadin-vertical-layout-styles.js           | 8 ++++++++
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js
index c3401ceab7f..6a37eccc95b 100644
--- a/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js
+++ b/packages/horizontal-layout/src/vaadin-horizontal-layout-styles.js
@@ -9,6 +9,11 @@ export const horizontalLayoutStyles = css`
   :host {
     display: flex;
     box-sizing: border-box;
+    --vaadin-spacing-xs: 0.25rem;
+    --vaadin-spacing-s: 0.5rem;
+    --vaadin-spacing-m: 1rem;
+    --vaadin-spacing-l: 1.5rem;
+    --vaadin-spacing-xl: 2.5rem;
   }
 
   :host([hidden]) {
@@ -25,6 +30,6 @@ export const horizontalLayoutStyles = css`
   }
 
   :host([theme~='spacing']) {
-    gap: 1em;
+    gap: var(--vaadin-spacing-m);
   }
 `;
diff --git a/packages/horizontal-layout/theme/lumo/vaadin-horizontal-layout-styles.js b/packages/horizontal-layout/theme/lumo/vaadin-horizontal-layout-styles.js
index 7814b4430d1..3a09c92aa73 100644
--- a/packages/horizontal-layout/theme/lumo/vaadin-horizontal-layout-styles.js
+++ b/packages/horizontal-layout/theme/lumo/vaadin-horizontal-layout-styles.js
@@ -2,6 +2,14 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const horizontalLayout = css`
+  :host {
+    --vaadin-spacing-xs: var(--lumo-space-xs);
+    --vaadin-spacing-s: var(--lumo-space-s);
+    --vaadin-spacing-m: var(--lumo-space-m);
+    --vaadin-spacing-l: var(--lumo-space-l);
+    --vaadin-spacing-xl: var(--lumo-space-xl);
+  }
+
   :host([theme~='margin']) {
     margin: var(--lumo-space-m);
   }
diff --git a/packages/vertical-layout/src/vaadin-vertical-layout.js b/packages/vertical-layout/src/vaadin-vertical-layout.js
index 8403751b705..d1621279340 100644
--- a/packages/vertical-layout/src/vaadin-vertical-layout.js
+++ b/packages/vertical-layout/src/vaadin-vertical-layout.js
@@ -43,6 +43,11 @@ class VerticalLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
           flex-direction: column;
           align-items: flex-start;
           box-sizing: border-box;
+          --vaadin-spacing-xs: 0.25rem;
+          --vaadin-spacing-s: 0.5rem;
+          --vaadin-spacing-m: 1rem;
+          --vaadin-spacing-l: 1.5rem;
+          --vaadin-spacing-xl: 2.5rem;
         }
 
         :host([hidden]) {
@@ -59,7 +64,7 @@ class VerticalLayout extends ElementMixin(ThemableMixin(PolymerElement)) {
         }
 
         :host([theme~='spacing']) {
-          gap: 1em;
+          gap: var(--vaadin-spacing-m);
         }
       </style>
 
diff --git a/packages/vertical-layout/theme/lumo/vaadin-vertical-layout-styles.js b/packages/vertical-layout/theme/lumo/vaadin-vertical-layout-styles.js
index 9c6713c727a..99a3e9c716f 100644
--- a/packages/vertical-layout/theme/lumo/vaadin-vertical-layout-styles.js
+++ b/packages/vertical-layout/theme/lumo/vaadin-vertical-layout-styles.js
@@ -2,6 +2,14 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const verticalLayout = css`
+  :host {
+    --vaadin-spacing-xs: var(--lumo-space-xs);
+    --vaadin-spacing-s: var(--lumo-space-s);
+    --vaadin-spacing-m: var(--lumo-space-m);
+    --vaadin-spacing-l: var(--lumo-space-l);
+    --vaadin-spacing-xl: var(--lumo-space-xl);
+  }
+
   :host([theme~='margin']) {
     margin: var(--lumo-space-m);
   }