@openui5/themelib_sap_horizon 1.142.1 → 1.143.1

package/src/sap/ui/unified/themes/sap_horizon_dark/Menu.less

@@ -4,26 +4,26 @@
 /* ==================================== */
 
 .sapUiMnu {
-	border-radius: @sapUiPopoverBorderCornerRadius;
+	border-radius: var(--sapPopover_BorderCornerRadius);
 }
 
-.sapUiMnuItmSbMnu > div:after {
+.sapUiMnuItmSbMnu > div::after {
 	font-size: 1rem;
 }
 
 .sapUiMnuItm.sapUiMnuTfItm .sapUiMnuTfItemTf.sapUiMnuTfItemTfDsbl {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:hover {
 	background-color: @sapUiListSelectionHoverBackground;
 }
 
-.sapUiMnu  .sapUiMnuDiv>hr,
-.sapMList .sapMListItems .sapUiMnuDiv>hr{
-	border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
-	inset-inline-start: 0rem;
-	inset-inline-end: 0rem;
+.sapUiMnu .sapUiMnuDiv > hr,
+.sapMList .sapMListItems .sapUiMnuDiv > hr {
+	border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+	inset-inline-start: 0;
+	inset-inline-end: 0;
 }
 
 .sapUiMnu.sapUiMnuCozySupport.sapUiSizeCozy .sapUiMnuItm {
@@ -40,12 +40,14 @@
 	width: 2.25rem;
 	height: 2.75rem;
 	font-size: 0.75rem;
-	&.sapUiIconMirrorInRTL{
+
+	&.sapUiIconMirrorInRTL {
 		height: 2.75rem;
 	}
 }
 
 html.sap-phone .sapUiSizeCozy {
+
 	.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 		padding-inline-start: 0;
 	}
@@ -64,34 +66,37 @@ html.sap-phone .sapUiSizeCozy {
 
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen,
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
-	border-bottom: 1px solid @sapUiListSelectionBorderColor;
+	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
 }
 
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm {
 	border-bottom: 1px solid transparent;
 }
 
-.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmHov:active{
+.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmHov:active {
 	border-bottom: 1px solid transparent;
 }
 
-.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:active{
+.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:active {
 	border-bottom: 1px solid transparent;
-	background-color: @sapUiListActiveBackground;
+	background-color: var(--sapList_Active_Background);
 }
 
 .sapUiMnuItm:focus {
-	outline: 0.125rem solid @sapUiContentFocusColor;
+	outline: 0.125rem solid var(--sapContent_FocusColor);
 	outline-offset: -0.1875rem;
 }
 
 html.sap-desktop,
 html.sap-tablet {
+
 	.sapUiSizeCompact {
+
 		.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 			padding-inline-start: 0;
 		}
 	}
+
 	.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 		padding-inline-start: 0;
 	}

package/src/sap/ui/unified/themes/sap_horizon_hcb/CalendarLegend.less

@@ -8,12 +8,13 @@
 
 	&:focus {
 		outline: none;
+
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			box-sizing: border-box;
 			inset: 0.125rem;
-			border: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
+			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			pointer-events: none;
 		}
 	}
@@ -25,10 +26,11 @@
 
 .sapUiCalLegDayTypeNonWorking .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor,
 .sapUiUnifiedLegendNonWorkingDay .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor {
-	background: @sapUiLegendNonWorkingBackground;
+	background: var(--sapLegend_NonWorkingBackground);
 }
 
 .sapUiSizeCompact {
+
 	.sapUiUnifiedLegendSquare > .sapUiUnifiedLegendSquareColor {
 		margin: 0.1875rem;
 	}
@@ -36,6 +38,7 @@
 	.sapUiUnifiedLegendItem {
 
 		&:focus {
+
 			&::after {
 				inset: 0.0625rem;
 			}

package/src/sap/ui/unified/themes/sap_horizon_hcb/CalendarRow.less

@@ -5,30 +5,30 @@
 
 /* intervals */
 .sapUiCalendarRowAppsInt,
-.sapUiCalendarRowAppsSubInt{
+.sapUiCalendarRowAppsSubInt {
 	border-color: @sapUiListVerticalBorderColor;
 }
 
-.sapUiCalendarRowAppsIntHead{
-	font-size: @sapMFontSmallSize;
-	color: @sapUiBaseText;
+.sapUiCalendarRowAppsIntHead {
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .sapMListTblRow:not(.sapMLIBSelected) .sapUiCalendarRowAppsNoWork,
 .sapMListTblSubRow:not(.sapMLIBSelected) .sapUiCalendarRowAppsNoWork {
-	background-color: @sapUiLegendNonWorkingBackground;
+	background-color: var(--sapLegend_NonWorkingBackground);
 }
 
 /* Appointments */
 /* as outlines can't have different offsets on one side (no left border) and don't work in IE just use a inner border */
-html.sap-desktop .sapUiCalendarApp:focus > .sapUiCalendarAppCont:after {
+html.sap-desktop .sapUiCalendarApp:focus > .sapUiCalendarAppCont::after {
 	position: absolute;
 	top: 1px;
 	left: 1px;
 	right: 1px;
 	bottom: 1px;
-	content: "";
-	border: 0.125rem dotted @sapUiContentFocusColor;
+	content: '';
+	border: 0.125rem dotted var(--sapContent_FocusColor);
 	pointer-events: none;
 }
 
@@ -43,61 +43,55 @@ html.sap-desktop .sapUiCalendarApp:focus > .sapUiCalendarAppCont:after {
 }
 
 html.sap-desktop .sapUiCalendarApp:focus:not(:active) > .sapUiCalendarAppCont {
-	background-color: @sapUiListBackground;
+	background-color: var(--sapList_Background);
 }
 
 html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:hover:not(:active) > .sapUiCalendarAppCont,
 html.sap-desktop .sapUiCalendarApp:hover:not(:active) > .sapUiCalendarAppCont {
-	background-color: @sapUiListHoverBackground;
+	background-color: var(--sapList_Hover_Background);
 }
 
-html[data-sap-ui-browser ^= "ie"], html[data-sap-ui-browser^="ed"] {
-	.sapUiCalendarApp:focus > .sapUiCalendarAppCont:after{
-		border-style: dashed;
-	}
-}
-
-html.sap-desktop .sapUiCalendarAppSel:focus > .sapUiCalendarAppCont:after{
-	border-color: @sapUiContentContrastFocusColor;
+html.sap-desktop .sapUiCalendarAppSel:focus > .sapUiCalendarAppCont::after {
+	border-color: var(--sapContent_ContrastFocusColor);
 	left: 2px;
 }
 
-html.sap-desktop .sapUiCalendarApp:hover:not(:active) > .sapUiCalendarAppCont{
-	border-color: @sapUiListSelectionBorderColor;
+html.sap-desktop .sapUiCalendarApp:hover:not(:active) > .sapUiCalendarAppCont {
+	border-color: var(--sapList_SelectionBorderColor);
 }
 
-.sapUiCalendarAppCont{
-	border-color: @sapUiContentForegroundBorderColor;
+.sapUiCalendarAppCont {
+	border-color: var(--sapContent_ForegroundBorderColor);
 }
 
 .sapUiCalendarApp.sapUiCalendarAppSel,
 .sapUiCalendarApp:active,
-.sapUiCalendarApp.sapUiCalendarAppSel:active{
-	color: @sapUiContentSelectedTextColor;
-	background-color:@sapUiContentSelectedBackground
+.sapUiCalendarApp.sapUiCalendarAppSel:active {
+	color: var(--sapContent_Selected_TextColor);
+	background-color: var(--sapContent_Selected_Background)
 }
 
 html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active),
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) > .sapUiCalendarAppCont,
 html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active){
-	background-color: @sapUiContentSelectedHoverBackground;
-	color: @sapUiContentSelectedTextColor;
+	background-color: var(--sapContent_Selected_Hover_Background);
+	color: var(--sapContent_Selected_TextColor);
 }
 
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont,
 .sapUiCalendarApp:active > .sapUiCalendarAppCont,
-.sapUiCalendarApp.sapUiCalendarAppSel:active > .sapUiCalendarAppCont{
-	border-color: @sapUiListSelectionBorderColor;
+.sapUiCalendarApp.sapUiCalendarAppSel:active > .sapUiCalendarAppCont {
+	border-color: var(--sapList_SelectionBorderColor);
 }
 
-
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active)  > .sapUiCalendarAppCont,
-html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active)  > .sapUiCalendarAppCont {
-	border-color: @sapUiListSelectionBorderColor;
-	border-left-color: @sapUiListBackground;
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:focus:not(:active) > .sapUiCalendarAppCont,
+html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active) > .sapUiCalendarAppCont {
+	border-color: var(--sapList_SelectionBorderColor);
+	border-left-color: var(--sapList_Background);
 }
 
-.sapUiCalendarApp.sapUiCalendarAppTent > .sapUiCalendarAppCont{
-	border-color: @sapUiContentForegroundBorderColor;
+.sapUiCalendarApp.sapUiCalendarAppTent > .sapUiCalendarAppCont {
+	border-color: var(--sapContent_ForegroundBorderColor);
 }
 
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont > .sapUiCalendarAppIcon,
@@ -106,38 +100,39 @@ html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active)  > .sa
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont .sapUiCalendarAppTitle,
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont .sapUiCalendarAppText,
 .sapUiCalendarApp.sapUiCalendarAppSel > .sapUiCalendarAppCont .sapUiCalendarAppDescription {
-	color: @sapUiListActiveTextColor;
+	color: var(--sapList_Active_TextColor);
 }
 
-.sapUiCalendarAppTitle{
+.sapUiCalendarAppTitle {
 	font-size: @sapMFontMediumSize;
-	color: @sapUiBaseText;
+	color: var(--sapTextColor);
 }
 
-.sapUiCalendarAppText{
-	font-size: @sapMFontSmallSize;
+.sapUiCalendarAppText {
+	font-size: var(--sapFontSmallSize);
 }
 
-.sapUiCalendarRowNow{
-	border-color: @sapLegend_CurrentDateTime;
+.sapUiCalendarRowNow {
+	border-color: var(--sapLegend_CurrentDateTime);
 }
 
 /* colors for types */
-.calendarRowTypeColorMixIn(@class, @iclass, @color, @bcolor){
+.calendarRowTypeColorMixIn(@class, @iclass, @color, @bcolor) {
+
 	.@{class}.sapUiCalendarApp,
-	.@{class}.sapUiCalendarApp:active{
+	.@{class}.sapUiCalendarApp:active {
 		border-left-color: @color;
 	}
 
-	.sapUiCalendarRowVisFilled > .sapUiCalendarRowApps > .@{class}.sapUiCalendarApp:not(.sapUiCalendarAppSel) > .sapUiCalendarAppCont{
+	.sapUiCalendarRowVisFilled > .sapUiCalendarRowApps > .@{class}.sapUiCalendarApp:not(.sapUiCalendarAppSel) > .sapUiCalendarAppCont {
 		background-color: @bcolor;
 	}
 
-	.@{iclass}.sapUiCalendarRowAppsIntHead{
+	.@{iclass}.sapUiCalendarRowAppsIntHead {
 		background-color: @bcolor;
 	}
 
-	.@{iclass}.sapUiCalendarRowAppsIntHeadFirst{
+	.@{iclass}.sapUiCalendarRowAppsIntHeadFirst {
 		border-left-color: @color;
 	}
 }
@@ -147,5 +142,5 @@ html.sap-desktop .sapUiCalendarApp.sapUiCalendarAppSel:hover:not(:active)  > .sa
 	border-right-color: lighten(@sapUiListBorderColor, 15);
 	border-bottom-color: lighten(@sapUiListBorderColor, 15);
 	background-color: darken(@sapUiAccent1, 50);
-	color: @sapUiListTextColor;
+	color: var(--sapList_TextColor);
 }

package/src/sap/ui/unified/themes/sap_horizon_hcb/FileUploader.less

@@ -8,7 +8,8 @@
 	height: 2.75rem;
 }
 
-.sapUiSizeCompact{
+.sapUiSizeCompact {
+
 	.sapUiFup,
 	.sapUiFup.sapMBarChild {
 		height: 2rem;
@@ -26,7 +27,7 @@
 
 html.sap-desktop .sapUiFup .sapMFocusable:focus,
 html.sap-desktop .sapUiFup .sapMFocusable:active {
-	outline: 1px dotted @sapUiContentFocusColor;
+	outline: 1px dotted var(--sapContent_FocusColor);
 	outline-offset: -1px;
 }
 
@@ -38,36 +39,10 @@ html.sap-desktop .sapUiFup .sapMBtnInner:active.sapMBtnAccept,
 html.sap-desktop .sapUiFup .sapMBtnInner:active.sapMBtnReject,
 .sapUiFup .sapMBtnInner:active.sapMBtnEmphasized,
 html.sap-desktop .sapUiFup .sapMBtnInner:active.sapMBtnEmphasized {
-	outline-color: @sapUiContentContrastFocusColor;
+	outline-color: var(--sapContent_ContrastFocusColor);
 	outline-offset: -.125rem;
 }
 
 .sapMFooter-CTX .sapUiFup .sapMBtnInner:active.sapMFocusable {
-	background-color: @sapUiButtonActiveBackground;
-}
-
-/* IE ignores outline-offset. Use an overlay: */
-
-html[data-sap-ui-browser^="ie"] {
-
-	.sapUiFup .sapMBtnInner:focus.sapMFocusable {
-		outline: none;
-		position: relative;
-	}
-
-	.sapUiFup .sapMBtnInner:focus.sapMFocusable:before {
-		content: " ";
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		left: 0;
-		top: 0;
-		border: 1px dotted @sapUiContentFocusColor;
-	}
-
-	.sapMFooter-CTX .sapUiFup .sapMBtnInner:focus.sapMFocusable:before {
-		border-color: @sapUiContentContrastFocusColor;
-	}
-
+	background-color: var(--sapButton_Active_Background);
 }

package/src/sap/ui/unified/themes/sap_horizon_hcb/Menu.less

@@ -4,19 +4,19 @@
 /* ==================================== */
 
 .sapUiMnu {
-	border-radius: @sapUiPopoverBorderCornerRadius;
+	border-radius: var(--sapPopover_BorderCornerRadius);
 }
 
 .sapUiMnuItm:focus {
-	outline: 0.125rem dotted @sapUiContentFocusColor;
+	outline: 0.125rem dotted var(--sapContent_FocusColor);
 }
 
-.sapUiMnuItmSbMnu > div:after {
+.sapUiMnuItmSbMnu > div::after {
 	font-size: 1rem;
 }
 
 .sapUiMnuItm.sapUiMnuTfItm .sapUiMnuTfItemTf.sapUiMnuTfItemTfDsbl {
-	opacity: @sapUiContentDisabledOpacity;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 /** Cozy Mode **/
@@ -24,14 +24,14 @@
 .sapUiMnu.sapUiMnuCozySupport.sapUiSizeCozy {
 
 	.sapUiMnuDiv > hr {
-		left: 0rem;
-		right: 0rem;
+		left: 0;
+		right: 0;
 		margin-top: 0;
 		margin-bottom: 0;
 	}
 
 	.sapUiMnuDiv {
-	  height: 1px;
+		height: 1px;
 	}
 
 	.sapUiMnuItm.sapUiMnuTfItm .sapUiMnuTfItemTf {
@@ -44,11 +44,11 @@
 	background-color: @sapUiListSelectionHoverBackground;
 }
 
-.sapUiMnu  .sapUiMnuDiv>hr,
-.sapMList .sapMListItems .sapUiMnuDiv>hr{
-	border-top: 0.0625rem solid @sapUiGroupContentBorderColor;
-	left: 0rem;
-	right: 0rem;
+.sapUiMnu .sapUiMnuDiv > hr,
+.sapMList .sapMListItems .sapUiMnuDiv > hr {
+	border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+	left: 0;
+	right: 0;
 }
 
 .sapUiMnu.sapUiMnuCozySupport.sapUiSizeCozy .sapUiMnuItm {
@@ -74,15 +74,18 @@
 	width: 2.25rem;
 	height: 2.75rem;
 	font-size: 0.75rem;
-	&.sapUiIconMirrorInRTL{
+
+	&.sapUiIconMirrorInRTL {
 		height: 2.75rem;
 	}
 }
 
 html.sap-phone .sapUiSizeCozy .sapUiMnuItm {
+
 	.sapUiMnuItmTxt {
 		padding-left: 1rem;
 	}
+
 	.sapUiMnuItmIco + .sapUiMnuItmTxt {
 		padding-left: 0;
 	}
@@ -101,30 +104,33 @@ html.sap-phone .sapUiSizeCozy .sapUiMnuItm {
 
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen,
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov {
-	border-bottom: 1px solid @sapUiListSelectionBorderColor;
+	border-bottom: 1px solid var(--sapList_SelectionBorderColor);
 }
 
 .sapUiMnu .sapUiMnuLst .sapUiMnuItm {
 	border-bottom: 1px solid transparent;
 }
 
-.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmHov:active{
+.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmHov:active {
 	border-bottom: 1px solid transparent;
 }
 
-.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:active{
+.sapUiMnu .sapUiMnuLst .sapUiMnuItm.sapUiMnuItmSubMnuOpen.sapUiMnuItmHov:active {
 	border-bottom: 1px solid transparent;
-	background-color: @sapUiListActiveBackground;
+	background-color: var(--sapList_Active_Background);
 }
 
 html.sap-desktop,
 html.sap-tablet {
+
 	.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmTxt {
 		padding-left: 0.75rem;
 	}
+
 	.sapUiMnuLst > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 		padding-left: 0;
 	}
+
 	.sapUiMnuLst.sapUiMnuNoIco > .sapUiMnuItm > .sapUiMnuItmTxt,
 	.sapUiMnuLst.sapUiMnuNoIco > .sapUiMnuItm > .sapUiMnuItmIco + .sapUiMnuItmTxt {
 		padding-left: 0;

package/src/sap/ui/unified/themes/sap_horizon_hcw/CalendarLegend.less

@@ -8,12 +8,13 @@
 
 	&:focus {
 		outline: none;
+
 		&::after {
-			content: "";
+			content: '';
 			position: absolute;
 			box-sizing: border-box;
 			inset: 0.125rem;
-			border: @sapContent_FocusWidth @sapContent_FocusStyle @sapUiContentFocusColor;
+			border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 			pointer-events: none;
 		}
 	}
@@ -25,10 +26,11 @@
 
 .sapUiCalLegDayTypeNonWorking .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor,
 .sapUiUnifiedLegendNonWorkingDay .sapUiUnifiedLegendSquare .sapUiUnifiedLegendSquareColor {
-	background: @sapUiLegendNonWorkingBackground;
+	background: var(--sapLegend_NonWorkingBackground);
 }
 
 .sapUiSizeCompact {
+
 	.sapUiUnifiedLegendSquare > .sapUiUnifiedLegendSquareColor {
 		margin: 0.1875rem;
 	}
@@ -36,6 +38,7 @@
 	.sapUiUnifiedLegendItem {
 
 		&:focus {
+
 			&::after {
 				inset: 0.0625rem;
 			}