@openui5/sap.ui.layout 1.135.0 → 1.136.0

package/src/sap/ui/layout/themes/base/ResponsiveSplitter.less

@@ -7,8 +7,8 @@
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonWidth: 2.5rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHeight: 2.375rem;
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius: unset;
-@_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton: @sapUiContentIconColor;
-@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive: @sapUiContentContrastIconColor;
+@_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton: var(--sapContent_IconColor);
+@_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive: var(--sapContent_ContrastIconColor);
 @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow: none;
 
 .sapUiResponsiveSplitter {
@@ -25,6 +25,7 @@
 }
 
 .sapUiRSVisiblePaginator {
+
 	& .sapUiResponsiveSplitterPaginator {
 		width: 100%;
 		display: flex;
@@ -32,9 +33,9 @@
 		box-sizing: border-box;
 		outline: none;
 		height: @_sap_ui_layout_ResponsiveSplitter_PaginatorHeight;
-		background-color: @sapUiPageFooterBackground;
-		border-top: 0.0625rem solid @sapUiPageFooterBorderColor;
-		border-bottom: 0.0625rem solid transparent; // needed to properly align buttons vertically
+		background-color: var(--sapPageFooter_Background);
+		border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+		border-bottom: 0.0625rem solid transparent; /* needed to properly align buttons vertically */
 	}
 
 	& .sapUiResponsiveSplitterPage {
@@ -56,14 +57,14 @@
 	height: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHeight;
 	cursor: pointer;
 	background-color: transparent;
-	border-radius: @sapUiButtonBorderCornerRadius;
+	border-radius: var(--sapButton_BorderCornerRadius);
 	position: relative;
 
 	&::after {
-		content: "";
+		content: '';
 		width: 0.25rem;
 		height: 0.25rem;
-		background-color: @sapUiContentNonInteractiveIconColor;
+		background-color: var(--sapContent_NonInteractiveIconColor);
 		margin: auto;
 		display: block;
 		margin-top: 16px;
@@ -75,27 +76,27 @@
 	}
 
 	&:focus::before {
-		content: "";
+		content: '';
 		position: absolute;
 		top: 0;
 		bottom: 0;
 		right: 0;
 		left: 0;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 		border-radius: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonFocusBorderRadius;
 	}
 
 	&:hover {
-		background-color: @sapUiButtonLiteHoverBackground;
+		background-color: var(--sapButton_Lite_Hover_Background);
 		box-shadow: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonHoverShadow;
 
 		&::after {
-			background-color: @sapUiContentNonInteractiveIconColor;
+			background-color: var(--sapContent_NonInteractiveIconColor);
 		}
 	}
 
 	&:active {
-		background-color: @sapUiButtonLiteActiveBackground;
+		background-color: var(--sapButton_Lite_Active_Background);
 
 		&::after {
 			background-color: @_sap_ui_layout_ResponsiveSplitter_PaginatorButtonActive;
@@ -112,6 +113,7 @@
 	}
 
 	&:hover {
+
 		&::after {
 			background-color: @_sap_ui_layout_ResponsiveSplitter_PaginatorSelectedButton;
 		}
@@ -148,7 +150,7 @@
 }
 
 .sapUiResponsiveSplitterHiddenBackButton,
- .sapUiResponsiveSplitterHiddenPaginatorButton {
+.sapUiResponsiveSplitterHiddenPaginatorButton {
 	display: none !important;
-	background-color: @sapUiSelected;
-}
+	background-color: var(--sapSelectedColor);
+}

package/src/sap/ui/layout/themes/base/Splitter.less

@@ -14,12 +14,12 @@
  *
 **/
 
-@_sap_ui_layout_Splitter_BarActiveDecorationColors: @sapUiHighlight, @sapUiHighlight;
-@_sap_ui_layout_Splitter_BarDecorationColors: @sapUiHighlight, fade(@sapUiHighlight, 0);
-@_sap_ui_layout_Splitter_BarBorder: 0.0625rem solid @sapUiGroupContentBorderColor;
-@_sap_ui_layout_Splitter_BarHoverIconBorderColor: @sapUiButtonLiteBorderColor;
-@_sap_ui_layout_Splitter_BarHoverIconBackground: @sapUiButtonLiteBackground;
-@_sap_ui_layout_Splitter_GripButtonColor: @sapUiContentIconColor;
+@_sap_ui_layout_Splitter_BarActiveDecorationColors: var(--sapHighlightColor), var(--sapHighlightColor);
+@_sap_ui_layout_Splitter_BarDecorationColors: var(--sapHighlightColor), fade(@sapUiHighlight, 0);
+@_sap_ui_layout_Splitter_BarBorder: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+@_sap_ui_layout_Splitter_BarHoverIconBorderColor: var(--sapButton_Lite_BorderColor);
+@_sap_ui_layout_Splitter_BarHoverIconBackground: var(--sapButton_Lite_Background);
+@_sap_ui_layout_Splitter_GripButtonColor: var(--sapContent_IconColor);
 
 /********************************************* General ********************************************/
 
@@ -43,7 +43,7 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	background-color: @sapUiShellBackground;
+	background-color: var(--sapShell_Background);
 	box-sizing: border-box;
 }
 
@@ -131,18 +131,19 @@
 
 		.sapUiLoSplitterBarGripIcon {
 			cursor: col-resize;
-			line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; // center the icon vertically
+			line-height: 1.625rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; /* center the icon vertically */
 			box-sizing: border-box;
 			height: 1.625rem;
 			width: 1.5rem;
 			margin-top: 3px;
-			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
-			border-radius: @sapUiButtonBorderCornerRadius;
-			background: @sapUiButtonLiteBackground;
+			border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+			border-radius: var(--sapButton_BorderCornerRadius);
+			background: var(--sapButton_Lite_Background);
 		}
 	}
 
 	&:hover {
+
 		.sapUiLoSplitterBarDecorationBefore,
 		.sapUiLoSplitterBarDecorationAfter {
 			flex-grow: 1;
@@ -157,6 +158,7 @@
 }
 
 .sapUiLoSplitter.sapUiLoSplitterH > .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
+
 	.sapUiLoSplitterBarDecorationBefore {
 		flex-grow: 1;
 		background-image: linear-gradient(to top, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
@@ -225,13 +227,14 @@
 			height: 1.5rem;
 			line-height: 1.5rem - @sapUiButtonBorderWidth - @sapUiButtonBorderWidth; // center the icon vertically
 			margin-left: 3px;
-			border: @sapUiButtonBorderWidth solid @sapUiButtonLiteBorderColor;
-			border-radius: @sapUiButtonBorderCornerRadius;
-			background: @sapUiButtonLiteBackground;
+			border: var(--sapButton_BorderWidth) solid var(--sapButton_Lite_BorderColor);
+			border-radius: var(--sapButton_BorderCornerRadius);
+			background: var(--sapButton_Lite_Background);
 		}
 	}
 
 	&:hover {
+
 		.sapUiLoSplitterBarDecorationBefore,
 		.sapUiLoSplitterBarDecorationAfter {
 			flex-grow: 1;
@@ -246,6 +249,7 @@
 }
 
 .sapUiLoSplitter.sapUiLoSplitterV > .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
+
 	.sapUiLoSplitterBarDecorationBefore {
 		flex-grow: 1;
 		background-image: linear-gradient(to left, @_sap_ui_layout_Splitter_BarActiveDecorationColors);
@@ -268,13 +272,13 @@
 	}
 
 	&:focus::after {
-		content: "";
+		content: '';
 		display: block;
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		border: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+		border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	}
 }

package/src/sap/ui/layout/themes/base/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/ui/layout/themes/sap_hcb/library.source.less

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2025 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2025 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/ui5.yaml

@@ -5,7 +5,7 @@ metadata:
   name: sap.ui.layout
   copyright: |-
    OpenUI5
-    * (c) Copyright 2009-${currentYear} SAP SE or an SAP affiliate company.
+    * (c) Copyright ${currentYear} SAP SE or an SAP affiliate company.
     * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
 resources:
   configuration: