Merge branch 'main' into add-border-for-top-controls

Author: vursen

articles/components/button/styling.adoc

@@ -313,66 +313,52 @@ include::../_styling-section-theming-props.adoc[tag=style-properties]
 
 === Common Properties
 
-[cols="1,3,1"]
+[cols="2,1"]
 |===
-| Feature | Property | Supported by
+| Property | Supported by
 
-|Background
 |`--vaadin-button-background`
 |Aura, Lumo
 
-|Text Color
-|`--vaadin-button-text-color`
-|Aura, Lumo
-
-|Font Weight
-|`--vaadin-button-font-weight`
-|Aura, Lumo
-
-|Font Size
-|`--vaadin-button-font-size`
-|Aura, Lumo
-
-|Border
 |`--vaadin-button-border`
 |Lumo
 
-|Border
 |`--vaadin-button-border-color`
 |Aura
 
-|Border
-|`--vaadin-button-border-width`
-|Aura
-
-|Border Radius
 |`--vaadin-button-border-radius`
 |Aura, Lumo
 
-|Padding
-|`--vaadin-button-padding`
+|`--vaadin-button-border-width`
+|Aura
+
+|`--vaadin-button-font-size`
 |Aura, Lumo
 
-|Margin
-|`--vaadin-button-margin`
+|`--vaadin-button-font-weight`
 |Aura, Lumo
 
-|Gap
 |`--vaadin-button-gap`
 |Aura
 
-|Height
 |`--vaadin-button-height`
 |Aura, Lumo
 
-|Line Height
 |`--vaadin-button-line-height`
 |Aura
 
-|Min-Width
+|`--vaadin-button-margin`
+|Aura, Lumo
+
 |`--vaadin-button-min-width`
 |Lumo
 
+|`--vaadin-button-padding`
+|Aura, Lumo
+
+|`--vaadin-button-text-color`
+|Aura, Lumo
+
 |===
 
 

articles/components/form-layout/index.adoc

@@ -379,28 +379,6 @@ include::{root}/frontend/demo/component/formlayout/form-layout-colspan.ts[render
 
 Column span is capped to the number of columns currently in the layout to prevent overflow.
 
-== Spacing
-
-Form Layout allows you to configure the spacing between columns, rows, and between the label and input field when labels are positioned on the side.
-
-Use the following CSS properties on individual `vaadin-form-layout` elements, or globally on the `html` element. The Flow API also provides setters for these properties.
-
-|===
-|Spacing |CSS Property |Flow API
-
-|Between columns
-|`--vaadin-form-layout-column-spacing`
-|`setColumnSpacing`
-
-|Between rows
-|`--vaadin-form-layout-row-spacing`
-|`setRowSpacing`
-
-|Between side label and field
-|`--vaadin-form-layout-label-spacing`
-|`setLabelSpacing`
-|===
-
 == Miscellaneous
 
 === Form Item Usage

articles/components/form-layout/styling.adoc

@@ -7,27 +7,42 @@ order: 50
 ---
 = Form Layout Styling
 
-include::../_styling-section-intros.adoc[tag=properties]
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+=== Spacing
+
+Form Layout allows you to configure the spacing between columns, rows, and between the label and input field when labels are positioned on the side.
+
+Use the following CSS properties on individual `vaadin-form-layout` elements, or globally on the `html` element. The Flow API also provides setters for these properties.
 
 [cols="2,3,2"]
 |===
-| Feature | Property | Default Value
+|Spacing |CSS Property |Flow API
 
-|Spacing between columns
+|Between columns
 |`--vaadin-form-layout-column-spacing`
-|`--lumo-space-l`
+|`setColumnSpacing`
 
-|Spacing between rows
+|Between rows
 |`--vaadin-form-layout-row-spacing`
-|`0`
+|`setRowSpacing`
 
-|Spacing between side label and field
+|Between side label and field
 |`--vaadin-form-layout-label-spacing`
-|`1em`
+|`setLabelSpacing`
+|===
+
+=== Sizing
+
+Form Layout allows you to configure the width of the labels when they are positioned on the side.
+
+[cols="2,3,2"]
+|===
+| Feature | CSS Property | Flow API
 
 |Side label width
 |`--vaadin-form-layout-label-width`
-|`8em`
+|`setLabelWidth`
 |===
 
 include::../_styling-section-intros.adoc[tag=selectors]

dspublisher/theme/global.css

@@ -95,8 +95,8 @@ html {
   --docs-example-render-font-family:
     -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --docs-example-render-color: light-dark(hsla(214, 40%, 16%, 0.94), hsla(214, 96%, 96%, 0.9));
-  --docs-example-render-background-color: light-dark(#fff, hsl(214, 35%, 21%));
+  --docs-example-render-color: hsla(214, 40%, 16%, 0.94);
+  --docs-example-render-background-color: #fff;
 }
 
 ::-moz-selection {
@@ -281,6 +281,9 @@ html[theme~='dark'] {
   --docs-before-background-color: #301821;
   --docs-after-background-color: #172e1f;
   --docs-before-after-border-color: var(--gray-600);
+
+  --docs-example-render-color: hsla(214, 96%, 96%, 0.9);
+  --docs-example-render-background-color: hsl(214, 35%, 21%);
 }
 
 /* Vaadin logo text color (adapt to dark mode) */