refactor: allow global overrides of form-layout custom properties (#10286)

Author: jouni

packages/form-layout/src/layouts/responsive-steps-layout.js

@@ -125,7 +125,7 @@ export class ResponsiveStepsLayout extends AbstractLayout {
     */
 
     const style = getComputedStyle(host);
-    const columnSpacing = style.getPropertyValue('--vaadin-form-layout-column-spacing');
+    const columnSpacing = style.getPropertyValue('--_column-spacing');
 
     const direction = style.direction;
     const marginStartProp = `margin-${direction === 'ltr' ? 'left' : 'right'}`;

packages/form-layout/src/styles/vaadin-form-item-base-styles.js

@@ -16,7 +16,7 @@ export const formItemStyles = css`
     display: inline-flex;
     flex-flow: var(--_form-item-labels-above, column) nowrap;
     justify-self: stretch;
-    margin: calc(0.5 * var(--vaadin-form-layout-row-spacing, 1em)) 0;
+    margin: calc(0.5 * var(--_row-spacing, 1em)) 0;
   }
 
   :host([label-position='top']) {
@@ -34,13 +34,13 @@ export const formItemStyles = css`
     font-size: var(--vaadin-form-item-label-font-size, inherit);
     font-weight: var(--vaadin-form-item-label-font-weight, 500);
     line-height: var(--vaadin-form-item-label-line-height, inherit);
-    width: var(--_form-item-labels-aside, var(--vaadin-form-layout-label-width, 8em));
+    width: var(--_form-item-labels-aside, var(--_label-width, 8em));
     word-break: break-word;
   }
 
   #spacing {
     flex: 0 0 auto;
-    width: var(--vaadin-form-layout-label-spacing, 1em);
+    width: var(--_label-spacing, 1em);
   }
 
   #content {

packages/form-layout/src/styles/vaadin-form-layout-base-styles.js

@@ -5,14 +5,29 @@
  */
 import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
+import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+addGlobalThemeStyles(
+  'vaadin-form-layout-base',
+  css`
+    @layer vaadin.base {
+      :where(html) {
+        --vaadin-form-layout-label-spacing: var(--vaadin-gap-s);
+        --vaadin-form-layout-label-width: 8em;
+        --vaadin-form-layout-column-spacing: var(--vaadin-gap-l);
+        --vaadin-form-layout-row-spacing: var(--vaadin-gap-l);
+      }
+    }
+  `,
+);
 
 export const formLayoutStyles = css`
   :host {
     /* Default values */
-    --vaadin-form-layout-label-spacing: var(--vaadin-gap-s);
-    --vaadin-form-layout-label-width: 8em;
-    --vaadin-form-layout-column-spacing: calc(var(--vaadin-gap-s) * 2);
-    --vaadin-form-layout-row-spacing: calc(var(--vaadin-gap-s) * 2);
+    --_label-spacing: var(--vaadin-form-layout-label-spacing);
+    --_label-width: var(--vaadin-form-layout-label-width);
+    --_column-spacing: var(--vaadin-form-layout-column-spacing);
+    --_row-spacing: var(--vaadin-form-layout-row-spacing);
 
     align-self: stretch;
     display: block;
@@ -35,7 +50,7 @@ export const formLayoutStyles = css`
     flex-shrink: 0;
 
     /* Margins make spacing between the columns */
-    margin-inline: calc(0.5 * var(--vaadin-form-layout-column-spacing));
+    margin-inline: calc(0.5 * var(--_column-spacing));
   }
 
   #layout ::slotted(br) {
@@ -46,13 +61,11 @@ export const formLayoutStyles = css`
     /* Column width */
     --_column-width: var(--vaadin-field-default-width, 12em);
     --_column-width-labels-above: var(--_column-width);
-    --_column-width-labels-aside: calc(
-      var(--_column-width) + var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing)
-    );
+    --_column-width-labels-aside: calc(var(--_column-width) + var(--_label-width) + var(--_label-spacing));
 
     /* Column gap */
-    --_min-total-gap: calc((var(--_min-columns) - 1) * var(--vaadin-form-layout-column-spacing));
-    --_max-total-gap: calc((var(--_max-columns) - 1) * var(--vaadin-form-layout-column-spacing));
+    --_min-total-gap: calc((var(--_min-columns) - 1) * var(--_column-spacing));
+    --_max-total-gap: calc((var(--_max-columns) - 1) * var(--_column-spacing));
 
     /* Minimum form layout width */
     --_min-width-labels-above: calc(var(--_min-columns) * var(--_column-width-labels-above) + var(--_min-total-gap));
@@ -78,7 +91,7 @@ export const formLayoutStyles = css`
     --_grid-repeat: var(--_grid-column-width);
 
     display: grid;
-    gap: var(--vaadin-form-layout-row-spacing) var(--vaadin-form-layout-column-spacing);
+    gap: var(--_row-spacing) var(--_column-spacing);
 
     /*
       Auto-columns can be created when an item's colspan exceeds the rendered column count.

packages/form-layout/src/vaadin-form-layout.js

@@ -7,7 +7,6 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { formLayoutStyles } from './styles/vaadin-form-layout-base-styles.js';
 import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
@@ -206,7 +205,7 @@ import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-form-layout';
   }
@@ -215,12 +214,6 @@ class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin
     return formLayoutStyles;
   }
 
-  static get lumoInjector() {
-    return {
-      includeBaseStyles: true,
-    };
-  }
-
   /** @protected */
   render() {
     return html`

packages/form-layout/test/form-layout.test.js

@@ -77,15 +77,13 @@ describe('form layout', () => {
     });
 
     it('should apply default --vaadin-form-layout-row-spacing', () => {
-      expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-row-spacing')).to.equal('calc(8px * 2)');
+      expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-row-spacing')).to.equal('16px');
       expect(getComputedStyle(item).marginTop).to.equal('8px');
       expect(getComputedStyle(item).marginBottom).to.equal('8px');
     });
 
     it('should apply default --vaadin-form-layout-column-spacing', () => {
-      expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-column-spacing')).to.equal(
-        'calc(8px * 2)',
-      );
+      expect(getComputedStyle(layout).getPropertyValue('--vaadin-form-layout-column-spacing')).to.equal('16px');
       expect(getComputedStyle(item).marginLeft).to.equal('8px');
       expect(getComputedStyle(item).marginRight).to.equal('8px');
     });

packages/vaadin-lumo-styles/components/crud.css

@@ -9,10 +9,10 @@
 @import '../src/components/crud-edit.css';
 @import '../src/components/crud.css';
 @import '../src/components/dialog-overlay.css';
-@import '../src/components/form-layout.css';
 @import '../src/components/grid.css';
 @import './button.css';
 @import './confirm-dialog.css';
+@import './form-layout.css';
 @import './grid-filter.css';
 @import './grid-sorter.css';
 @import './text-field.css';

packages/vaadin-lumo-styles/components/form-layout.css

@@ -3,9 +3,11 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-@import '../src/components/form-layout.css';
-
-:is(:root, :host)::before {
-  --_lumo-vaadin-form-layout-inject: 1;
-  --_lumo-vaadin-form-layout-inject-modules: lumo_components_form-layout;
+:where(:root, :host) {
+  --vaadin-form-layout-label-spacing: 1em;
+  --vaadin-form-layout-label-width: 8em;
+  --vaadin-form-layout-column-spacing: var(
+    --lumo-space-l
+  );
+  --vaadin-form-layout-row-spacing: 0;
 }