refactor: update split-layout Lumo theme to use base styles (#10217)

web-padawan · web-flow · commit e791ece53561 · 2025-09-23T13:44:13.000+03:00
diff --git a/packages/split-layout/src/vaadin-split-layout.js b/packages/split-layout/src/vaadin-split-layout.js
@@ -165,6 +165,12 @@ class SplitLayout extends SplitLayoutMixin(ElementMixin(ThemableMixin(PolylitMix
     return splitLayoutStyles;
   }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
   /** @protected */
   render() {
     return html`
diff --git a/packages/vaadin-lumo-styles/src/components/split-layout.css b/packages/vaadin-lumo-styles/src/components/split-layout.css
@@ -4,128 +4,50 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 @media lumo_components_split-layout {
-  :host {
-    display: flex;
-    overflow: hidden !important;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  :host([orientation='vertical']) {
-    flex-direction: column;
-  }
-
-  :host ::slotted(*) {
-    flex: 1 1 auto;
-    overflow: auto;
-  }
-
   [part='splitter'] {
-    flex: none;
-    position: relative;
-    z-index: 1;
-    overflow: visible;
-    min-width: var(--lumo-space-s);
-    min-height: var(--lumo-space-s);
-    background-color: var(--lumo-contrast-5pct);
+    --_splitter-size: var(--vaadin-split-layout-splitter-size, var(--lumo-space-s));
+    --_splitter-target-size: var(--vaadin-split-layout-splitter-target-size, var(--lumo-space-s));
+    --_handle-size: var(--vaadin-split-layout-handle-size, var(--lumo-space-xs));
+    --_handle-target-size: var(--vaadin-split-layout-handle-target-size, var(--lumo-size-m));
+    background: var(--vaadin-split-layout-splitter-background, var(--lumo-contrast-5pct));
     transition: 0.1s background-color;
   }
 
-  :host(:not([orientation='vertical'])) > [part='splitter'] {
-    cursor: ew-resize;
-  }
-
-  :host([orientation='vertical']) > [part='splitter'] {
-    cursor: ns-resize;
-  }
-
   [part='handle'] {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--lumo-size-m);
-    height: var(--lumo-size-m);
-  }
-
-  [part='handle']::after {
-    content: '';
-    display: block;
-    --_handle-size: 4px;
-    width: var(--_handle-size);
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
+    background: var(--vaadin-split-layout-handle-background, var(--lumo-contrast-30pct));
     border-radius: var(--lumo-border-radius-s);
-    background-color: var(--lumo-contrast-30pct);
-    transition:
-      0.1s opacity,
-      0.1s background-color;
-  }
-
-  :host([orientation='vertical']) [part='handle']::after {
-    width: 100%;
-    height: var(--_handle-size);
   }
 
   /* Active style */
-  [part='splitter']:active [part='handle']::after {
-    background-color: var(--lumo-contrast-50pct);
+  [part='splitter']:active [part='handle'] {
+    background: var(--lumo-contrast-50pct);
   }
 
-  /* Small/minimal */
+  /* Small overrides */
   :host([theme~='small']) > [part='splitter'] {
-    border-left: 1px solid var(--lumo-contrast-10pct);
-    border-top: 1px solid var(--lumo-contrast-10pct);
-  }
-
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] {
-    min-width: 0;
-    min-height: 0;
-    background-color: transparent;
-  }
-
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']::after {
-    content: '';
-    position: absolute;
-    inset: -4px;
+    --vaadin-split-layout-handle-size: 5px;
+    background: var(--lumo-contrast-10pct);
   }
 
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle'] {
-    left: calc(50% - 0.5px);
-    top: calc(50% - 0.5px);
+  /* Minimal */
+  :host([theme~='minimal']) > [part='splitter'] {
+    --vaadin-split-layout-splitter-size: 0px;
+    --vaadin-split-layout-handle-size: 5px;
+    --vaadin-split-layout-splitter-target-size: 5px;
   }
 
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter'] > [part='handle']::after {
+  :host([theme~='minimal']) > [part='splitter'] > [part='handle'] {
     opacity: 0;
-    --_handle-size: 5px;
   }
 
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:hover > [part='handle']::after,
-  :host(:is([theme~='small'], [theme~='minimal'])) > [part='splitter']:active > [part='handle']::after {
+  :host([theme~='minimal']) > [part='splitter']:is(:hover, :active) > [part='handle'] {
     opacity: 1;
   }
 
   /* Hover style */
   @media (any-hover: hover) {
-    [part='splitter']:hover [part='handle']::after {
+    [part='splitter']:hover [part='handle'] {
       background-color: var(--lumo-contrast-40pct);
     }
   }
-
-  @media (forced-colors: active) {
-    [part~='splitter'] {
-      outline: 1px solid;
-    }
-
-    [part~='handle']::after {
-      background-color: AccentColor !important;
-      forced-color-adjust: none;
-    }
-  }
 }
