feat: add spacing CSS properties in layout components

vaadin · Jan 21, 2025 · fc0b2af · fc0b2af
1 parent 90cfbd7
commit fc0b2af
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
   }