refactor: update HorizontalLayout examples to support both Lumo and Aura

articles/components/horizontal-layout/index.adoc

@@ -51,7 +51,7 @@ Components in a Horizontal Layout can be aligned horizontally, as you'd expect,
 
 You can position components at the top, middle, or bottom. You can also stretch items or position them along the text baseline in the layout.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -96,7 +96,7 @@ endif::[]
 
 It's also possible to set a different vertical alignment for individual items by overriding the general alignment setting of the layout.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -131,7 +131,7 @@ There are two ways to align items horizontally: _individual alignment_ of items,
 
 Each item in the layout can be grouped to the start, center and end of the layout.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -184,7 +184,7 @@ Justification modes determine how items in the layout are distributed within the
 |===
 
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -214,7 +214,7 @@ endif::[]
 
 Components can be made to expand and take up any excess space a layout may have.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]

articles/components/horizontal-layout/styling.adoc

@@ -31,9 +31,9 @@ Horizontal Layout supports the following style variants:
 
 === Spacing
 
-Spacing is used to create space among components in the same layout. Spacing can help prevent misclicks and distinguish content areas.
+Spacing is used to create gaps between components in the same layout. Spacing can help prevent misclicks and distinguish content areas.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -58,109 +58,46 @@ include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layou
 endif::[]
 --
 
-Five different spacing style variants are available:
-
-[.example.render-only]
---
-
-[source,typescript,role=render-only]
-----
-include::{root}/frontend/demo/component/horizontal-layout/horizontal-layout-spacing-variants.ts[render,tags=snippet,indent=0]
-----
-
---
-
-|===
-|Style Variant |Usage Recommendation
-
-|`spacing-xs`
-|Extra-small space between items.
-
-|`spacing-s`
-|Small space between items.
-
-|`spacing`
-|Medium space between items.
-
-|`spacing-l`
-|Large space between items.
-
-|`spacing-xl`
-|Extra-large space between items.
-|===
+Spacing can be customized with a specific value or a CSS custom property:
 
 [.example]
 --
-ifdef::lit[]
-[source,html]
-----
-<source-info group="Lit"></source-info>
-<vaadin-horizontal-layout
-  theme="spacing-xs padding">
-</vaadin-horizontal-layout>
-----
-endif::[]
 
-ifdef::flow[]
-[source,java]
-----
-<source-info group="Flow"></source-info>
-HorizontalLayout layout = new HorizontalLayout();
-layout.setSpacing(false);
-layout.getThemeList().add("spacing-xs");
-----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-<source-info group="React"></source-info>
-<HorizontalLayout
-  theme="spacing-xs padding">
-</HorizontalLayout>
-----
-endif::[]
-
---
-
-Alternatively, the spacing can be set to a custom value:
-
-[.example]
---
-ifdef::lit[]
 [source,html]
 ----
 <source-info group="Lit"></source-info>
-<vaadin-horizontal-layout style="gap: 12px">
-</vaadin-horizontal-layout>
+<vaadin-horizontal-layout style="gap: 12px"></vaadin-horizontal-layout>
+
+<vaadin-horizontal-layout style="gap: var(--vaadin-gap-l)"></vaadin-horizontal-layout>
 ----
-endif::[]
 
-ifdef::flow[]
 [source,java]
 ----
 <source-info group="Flow"></source-info>
 HorizontalLayout layout = new HorizontalLayout();
+
 layout.setSpacing(12, Unit.PIXELS);
+
+layout.setSpacing("var(--vaadin-gap-l)");
 ----
-endif::[]
 
-ifdef::react[]
 [source,tsx]
 ----
 <source-info group="React"></source-info>
-<HorizontalLayout style={{ gap: '12px' }}>
-</HorizontalLayout>
+<HorizontalLayout style={{ gap: '12px' }}></HorizontalLayout>
+
+<HorizontalLayout style={{ gap: 'var(--vaadin-gap-l)' }}></HorizontalLayout>
 ----
-endif::[]
 
 --
 
+For available CSS custom properties that can be used as spacing values, see <</styling/themes/base#gap,gap properties>> from the base styles and <</styling/themes/lumo/lumo-style-properties/size-space#space,space properties>> from the Lumo theme.
+
 === Padding
 
 Padding is the space between the outer border and the content in a layout. Padding can help distinguish the content in a layout from its surrounding. Padding is applied using the padding style variant.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -185,12 +122,11 @@ include::{root}/frontend/demo/component/horizontal-layout/react/horizontal-layou
 endif::[]
 --
 
-
 === Margin
 
 Use margin to create space around a layout.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -219,7 +155,7 @@ endif::[]
 
 By default, components in a layout either shrink or overflow when there isn't enough horizontal space. Enable wrapping to allow components to flow onto a new line when space runs out, preventing overflow.
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -249,7 +185,7 @@ endif::[]
 
 Wrapping may not behave as desired when combined with either of the two <<../#horizontal-alignment,horizontal alignment>> methods. One common solution is group items that should wrap together into sub-layouts:
 
-[.example]
+[.example,themes="lumo,aura"]
 --
 
 ifdef::lit[]
@@ -294,4 +230,4 @@ include::../_styling-section-theming-props.adoc[tag=style-properties]
 
 include::../_styling-section-intros.adoc[tag=selectors]
 
-Root element:: `vaadin-horizontal-layout`
+Root element:: `vaadin-horizontal-layout`

frontend/themes/docs/basic-layouts.css

@@ -31,6 +31,6 @@
   background: var(--vaadin-background-container-strong);
   color: var(--vaadin-text-color);
   border-radius: 0.5em;
-  padding: var(--vaadin-padding-s) var(--vaadin-padding-l);
+  padding: var(--vaadin-padding-s) var(--vaadin-padding-xl);
   white-space: nowrap;
 }