@openui5/themelib_sap_horizon 1.100.0 → 1.102.1

package/src/sap/m/themes/sap_horizon/Tokenizer.less

@@ -3,10 +3,10 @@
 /* Horizon theme                    */
 /* ================================ */
 
-@_sap_m_Tokenizer_OutlineOffset: 5px;
+@_sap_m_Tokenizer_OutlineOffset: 0.3125rem;
 
 .sapMTokenizer {
-	padding-left: @_sap_m_Tokenizer_OutlineOffset;
+	padding-left: 0.3125rem;
 	position: relative;
 	display: inline-block;
 	white-space: nowrap;
@@ -34,6 +34,9 @@ html.sap-desktop .sapMTokenizer:focus {
 .sapUiSizeCompact {
 	.sapMTokenizer {
 		padding-left: 0.25rem;
+		.sapMToken {
+			margin-right: 0.25rem;
+		}
 	}
 }
 
@@ -46,8 +49,8 @@ html.sap-desktop .sapMTokenizer:focus {
 	&:focus,
 	&.sapMTokenSelected,
 	&.sapMTokenSelected:focus,
-	&.sapMTokenSelected:hover,
-	&:not(.sapMTokenSelected):not(:focus):hover {
+	&.sapMToken.sapMTokenSelected:hover,
+	&.sapMToken:not(.sapMTokenSelected):not(:focus):hover {
 		background: @sapButton_TokenBackground;
 		cursor: default;
 		color: @sapUiBaseText;
@@ -57,6 +60,10 @@ html.sap-desktop .sapMTokenizer:focus {
 		box-shadow: none;
 	}
 
+	&:focus:after {
+		content: none;
+	}
+
 	.sapMTokenText,
 	.sapMTokenIcon {
 		color: @sapUiBaseText;
@@ -77,14 +84,3 @@ html.sap-desktop .sapMTokenizer:focus {
 	color: @sapLinkColor;
 	font-weight: bold;
 }
-
-.sapMTokenizerTokensPopup .sapMListItems {
-	& li:first-child:focus {
-		border-top-left-radius: @sapUiElementBorderCornerRadius;
-		border-top-right-radius: @sapUiElementBorderCornerRadius;
-	}
-	& li:last-child:focus {
-		border-bottom-left-radius: @sapUiElementBorderCornerRadius;
-		border-bottom-right-radius: @sapUiElementBorderCornerRadius;
-	}
-}

package/src/sap/m/themes/sap_horizon/Toolbar.less

@@ -10,44 +10,55 @@ html.sap-desktop .sapMTBActive:focus {
 
 .sapMTB {
 	height: 2.75rem;
-	padding: 0 0.5rem 0 0.25rem;
+	padding: 0 0.5rem;
 	background: @sapUiToolbarBackground;
 }
 
+.sapMIBar > .sapMBarChild:last-child {
+	margin-right: 0;
+}
+
+.sapMTB-Transparent-CTX.sapMTB,
+.sapMIBar.sapMTB-Info-CTX.sapMTB {
+	padding: 0 0.5rem;
+}
 
 /* Transparent Toolbar Context */
 .sapMTB-Transparent-CTX.sapMTB {
-	padding: 0 0.5rem 0 0.75rem;
+	background: @sapUiToolbarBackground;
 }
 
 /* Info Toolbar Context */
 .sapMTB-Info-CTX.sapMTB {
-	background: darken(@sapUiBaseColor, 10);
+	background: @sapUiInfobarNonInteractiveBackground;
+	color: @sapUiListTextColor;
+	height: 2rem;
 
 	> .sapUiIcon {
-		color: @sapUiBaseText;
+		width: 1rem;
+		height: 1rem;
+		color: @sapUiListTextColor;
 	}
 
 	> .sapUiIcon:focus {
-		color: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapContent_FocusColor;
+		color: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
 	}
 
 	&.sapMTBActive {
 		background: @sapUiInfobarBackground;
-		.generate-contrast-color-toolbar(@sapUiInfobarBackground);
+		color: @sapUiInfobarTextColor;
 
 		&:active {
-			.generate-contrast-color-toolbar(@sapUiInfobarActiveBackground);
+			background: @sapUiInfobarActiveBackground;
 		}
 
 		&:hover {
-			.generate-contrast-color-toolbar(@sapUiInfobarHoverBackground);
+			background: @sapUiInfobarHoverBackground;
 		}
 
 		.sapMText,
 		.sapMLabel,
-		> .sapMTitle,
-		> .sapUiIcon {
+		> .sapMTitle {
 			color: inherit;
 		}
 	}
@@ -57,25 +68,22 @@ html.sap-desktop .sapMTB-Info-CTX.sapMTBActive:focus {
 	outline-color: @sapUiContentContrastFocusColor;
 }
 
-.generate-contrast-color-toolbar(@backgroundColor) {
-	color: contrast(@backgroundColor, @sapUiBaseText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
-}
-
-// Border radius for default and solid states as they result in white color
-.sapMTB:not(.sapMTB-Info-CTX) {
-	border-top-right-radius: @sapElement_BorderCornerRadius;
-	border-top-left-radius: @sapElement_BorderCornerRadius;
+.sapMTB.sapMTBStandard {
+	border-bottom: solid 0.0625rem @sapUiGroupTitleBorderColor;
 }
 
 // =====================================
 // solid toolbar context
 // =====================================
-
 .sapMTB-Solid-CTX.sapMTB {
 	background-color: @sapUiToolbarBackground;
 }
 
 html.sap-desktop .sapMTBActive:focus {
 	outline: none;
-	box-shadow: inset 0px 0px 0px @sapContent_FocusWidth  @sapUiContentFocusColor;
+	box-shadow: inset 0px 0px 0px @sapUiContentFocusWidth  @sapUiContentFocusColor;
+}
+
+.sapMTB .sapMTBSeparator {
+	background: @sapUiToolbarSeparatorColor;
 }

package/src/sap/m/themes/sap_horizon/ValueStateHeader.less

@@ -1,55 +1,56 @@
-.sapMValueStateHeaderText {
-	padding-left: 0.75rem;
+.sapMValueStateHeaderRoot {
+	padding: 0.5rem 0.5rem 0.5rem 1.875rem;
+	line-height: 1rem;
 }
 
 .sapMValueStateHeaderSuccess:before {
 	font-family: SAP-icons;
 	content: "\e1c1";
 	position: absolute;
-	top: 0.725rem;
+	top: 0.5rem;
 	left: 0rem;
 	vertical-align: middle;
-	font-size: 0.875rem;
+	font-size: 1rem;
 	color: @sapPositiveElementColor;
 	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }
 
 .sapMValueStateHeaderError:before {
 	font-family: SAP-icons;
 	content: "\e1ec";
 	position: absolute;
-	top: 0.725rem;
+	top: 0.5rem;
 	left: 0rem;
 	vertical-align: middle;
-	font-size: 0.875rem;
+	font-size: 1rem;
 	color: @sapNegativeElementColor;
 	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }
 
 .sapMValueStateHeaderWarning:before {
 	font-family: SAP-icons;
 	content: "\e053";
 	position: absolute;
-	top: 0.725rem;
+	top: 0.5rem;
 	left: 0rem;
 	vertical-align: middle;
-	font-size: 0.875rem;
+	font-size: 1rem;
 	color: @sapCriticalElementColor;
 	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }
 
 .sapMValueStateHeaderInformation:before {
 	font-family: SAP-icons;
 	content: "\e289";
 	position: absolute;
-	top: 0.725rem;
+	top: 0.5rem;
 	left: 0rem;
 	vertical-align: middle;
-	font-size: 0.875rem;
+	font-size: 1rem;
 	color: @sapInformativeElementColor;
 	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }

package/src/sap/m/themes/sap_horizon/ValueStateMessage.less

@@ -4,46 +4,48 @@
 /* ======================================== */
 
 .sapMValueStateMessage {
-	box-shadow:@sapContent_Interaction_Shadow;
+	line-height: 1rem;
+	min-height: 2rem;
+	box-shadow: @sapUiContentShadow1;
 	border-radius: @sapGroup_BorderCornerRadius;
-	padding-left: 1.75 * @sapContent_GridSize;
+	padding: 0.5rem 0.5rem 0.5rem 1.875rem;
 }
 
 .sapMValueStateMessageError:before {
 	font-family: SAP-icons;
 	content: "\e1ec";
 	position: absolute;
-	top: 0.313rem;
+	top: 0.5rem;
 	left: 0rem;
 	vertical-align: middle;
-	font-size: 0.875rem;
+	font-size: 1rem;
 	color: @sapNegativeElementColor;
 	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }
 
 .sapMValueStateMessageWarning:before {
 	font-family: SAP-icons;
 	content: "\e053s";
 	position: absolute;
-	top: 0.313rem;
+	top: 0.5rem;
 	left: 0rem;
 	vertical-align: middle;
-	font-size: 0.875rem;
+	font-size: 1rem;
 	color: @sapCriticalElementColor;
 	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }
 
 .sapMValueStateMessageInformation:before {
 	font-family: SAP-icons;
 	content: "\e289";
 	position: absolute;
-	top: 0.313rem;
+	top: 0.5rem;
 	left: 0rem;
 	vertical-align: middle;
-	font-size: 0.875rem;
+	font-size: 1rem;
 	color: @sapInformativeElementColor;
 	padding-left: 0.5rem;
-	padding-right: 0.5rem;
+	padding-right: 0.375rem;
 }

package/src/sap/m/themes/sap_horizon/Wizard.less

@@ -12,16 +12,21 @@
 		background-color: @sapUiShellBackground;
 	}
 }
-.sapMWizard .sapMWizardProgressNav {
-	box-shadow: @sapUiShadowHeader;
-}
 
 .sapMWizard {
 	overflow: hidden;
 }
 
+.sapMWizard .sapMWizardStep {
+	padding-bottom: 1rem;
+}
+
+.sapMWizard:not(.sapMWizardModePage) .sapMWizardLastActivatedStep {
+	min-height: calc(100% - 3rem);
+}
+
 html.sap-phone .sapMWizard .sapMWizardNextButtonVisible {
-	left: 1rem;
+	left: 2rem;
 	bottom: 3.5rem;
 	-webkit-transform: none;
 	transform: none;

package/src/sap/m/themes/sap_horizon/WizardProgressNavigator.less

@@ -9,6 +9,7 @@
 .sapMWizardProgressNav {
 	position: absolute;
 	z-index: 1;
+	box-shadow: @sapUiContentHeaderShadow;
 }
 
 .sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepCircle {
@@ -21,11 +22,14 @@
 	color: @sapUiContentContrastIconColor;
 }
 
-.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"]:hover .sapMWizardProgressNavStepTitle,
 .sapMWizardProgressNavStep:hover .sapMWizardProgressNavStepTitle {
 	color: @sapTextColor;
 }
 
+.sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepTitle {
+	color: @sapUiContentSelectedForegroundColor;
+}
+
 .sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepCircle::after {
 	height: @_sap_m_WizardProgressNavigator_StepUnderlineHeight;
 	background: @sapUiSelected;
@@ -41,6 +45,7 @@
 .sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] .sapMWizardProgressNavStepContainer::after {
 	height: 0;
 }
+
 .sapMWizardProgressNavStep[data-sap-ui-wpn-step-current="true"] {
 	& .sapMWizardProgressNavStepCircle {
 		background: @sapUiSelected;
@@ -50,13 +55,13 @@
 
 .sapMWizardProgressNavStepCircle {
 	background: @sapUiObjectHeaderBackground;
-	border-color:  @sapUiSelected;
+	border-color: @sapUiSelected;
 	color: @sapUiSelected;
 }
 
 .sapMWizardProgressNavStepTitle {
 	color: @sapTextColor;
-	font-weight: bold;
+	font-family: @sapUiFontBoldFamily;
 }
 
 .sapMWizardProgressNavStepTitle:hover {
@@ -64,18 +69,21 @@
 }
 
 .sapMWizardProgressNavStep::after {
-	border-bottom-color: @sapUiSelected;
+	border-bottom-color: @sapUiContentSelectedForegroundColor;
 }
 
 .sapMWizard .sapMWizardStepContainer {
   background: @sapUiGroupContentBackground;
 }
 
-.sapMWizardProgressNavStepTitleOptional,
-.sapMWizardProgressNavStepLabelOptional {
+.sapMWizardProgressNavStepTitleOptional {
 	color: @sapTextColor;
 }
 
+.sapMWizardProgressNavStepLabelOptional {
+	margin-top: 0.125rem;
+}
+
 .sapMWizardProgressNavStep[data-sap-ui-wpn-step-active="true"] {
 	/* all steps after the active one have inactive style */
 	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepCircle {
@@ -84,6 +92,10 @@
 		color: @sapUiContentLabelColor;
 	}
 
+	& ~ .sapMWizardProgressNavStep .sapMWizardProgressNavStepTitle {
+		color: @sapUiContentLabelColor;
+	}
+
 	/* all separators after (and including) the active step have inactive style */
 	&::after,
 	& ~ .sapMWizardProgressNavStep::after {

package/src/sap/m/themes/sap_horizon/WizardStep.less

@@ -1,3 +1,10 @@
+.sapMWizardStep {
+	background-color: @sapUiGroupContentBackground;
+	border-radius: @sapUiElementBorderCornerRadius;
+	padding: 1rem;
+	margin-bottom: 1rem;
+}
+
 .sapMWizardStep .sapMWizardStepTitle {
 	font-weight: bold;
 }

package/src/sap/m/themes/sap_horizon/library.source.less

@@ -23,6 +23,7 @@
 @import "CustomTile.less";
 @import "Dialog.less";
 @import "DraftIndicator.less";
+@import "DynamicDateRange.less";
 @import "Image.less";
 @import "MessagePage.less";
 @import "GenericTag.less";
@@ -37,6 +38,7 @@
 /* note: the following three files are not in alphabetical order and should be imported after InputBase.less */
 @import "ColumnListItem.less";
 @import "ComboBoxBase.less";
+@import "Label.less";
 @import "LightBox.less";
 @import "Link.less";
 @import "ListBase.less";
@@ -48,9 +50,10 @@
 @import "MultiComboBox.less";
 @import "MultiInput.less";
 @import "NewsContent.less";
-@import "NotificationListItem.less";
+@import "NotificationListGroup.less";
 @import "ObjectAttribute.less";
 @import "ObjectHeader.less";
+@import "ObjectListItem.less";
 @import "ObjectMarker.less";
 @import "ObjectNumber.less";
 @import "ObjectStatus.less";
@@ -68,7 +71,6 @@
 @import "RangeSlider.less";
 @import "RatingIndicator.less";
 @import "ResponsivePopover.less";
-@import "ScrollContainer.less";
 @import "SearchField.less";
 @import "SegmentedButton.less";
 @import "Select.less";

package/src/sap/m/themes/sap_horizon_dark/ActionSelect.less

@@ -73,11 +73,10 @@ html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled) .sapMBtn
 	border: none;
 }
 
-.sapMActionSelectPicker ul:not(:only-child) .sapMSelectListItemBaseSelected:last-child:after {
-	border-radius:0;
+html.sap-desktop .sapMActionSelectPicker .sapMBtn:not(.sapMBtnDisabled):focus > .sapMBtnInner:before {
+	border-radius: 0;
+	left: 0.125rem;
+	top: 0.125rem;
+	right: 0.125rem;
+	bottom: 0.125rem;
 }
-
-.sapMActionSelectPicker .sapMBtn:last-child:focus .sapMFocusable {
-	border-bottom-left-radius: @sapUiElementBorderCornerRadius;
-	border-bottom-right-radius: @sapUiElementBorderCornerRadius;
-}

package/src/sap/m/themes/sap_horizon_dark/ActionSheet.less

@@ -3,7 +3,42 @@
 /* Evening Horizon  theme             */
 /* ================================== */
 
+.sapMActionSheetPopover.sapMPopover {
+	box-shadow: @sapUiContentShadow2;
+}
+
 .sapMActionSheetDialog .sapMBar.sapMHeader-CTX > .sapMBarMiddle > .sapMBarPH > .sapMDialogTitle {
-	color: @sapUiContentContrastTextColor;
-	background: transparent;
+	color: @sapUiPageHeaderTextColor;
+	font-size: @sapMFontHeader5Size;
+	font-weight: bold;
+}
+
+.sapMDialog.sapMActionSheetDialog {
+	background-color: @sapUiPageHeaderBackground;
+	border-top-left-radius: @sapUiElementBorderCornerRadius;
+	border-top-right-radius: @sapUiElementBorderCornerRadius;
+	box-shadow: @sapUiContentShadow3;
+
+	&.sapMDialogPhone .sapMIBar.sapMHeader-CTX {
+		box-shadow: @sapUiContentHeaderShadow;
+		background-color: @sapUiPageHeaderBackground;
+		border-top-left-radius: @sapUiElementBorderCornerRadius;
+		border-top-right-radius: @sapUiElementBorderCornerRadius;
+	}
+
+	&.sapUiPopupWithPadding:not(.sapUiNoContentPadding) .sapMDialogScrollCont {
+		padding: 0;
+	}
+
+	& > .sapMDialogSection {
+		box-shadow: none;
+	}
+
+	&:not(.sapUiResponsiveContentPadding):not(.sapUiContentPadding).sapMDialog-NoFooter .sapMDialogScroll {
+		padding-bottom: 0;
+	}
+}
+
+.sapMActionSheetDialogWithTitle .sapMBarMiddle .sapMBarPH {
+	padding: 0 1rem;
 }

package/src/sap/m/themes/sap_horizon_dark/Avatar.less

@@ -3,6 +3,12 @@
 /* Evening Horizon theme         */
 /* ============================= */
 
+@_sap_m_Avatar_Font_Size_XL: 3rem;
+@_sap_m_Avatar_Font_Size_L: 2.25rem;
+@_sap_m_Avatar_Font_Size_M: 1.5rem;
+@_sap_m_Avatar_Font_Size_S: 1.125rem;
+@_sap_m_Avatar_Font_Size_XS: 1rem;
+
 .sapFAvatarSquare {
 	border-radius: @sapUiElementBorderCornerRadius;
 
@@ -11,120 +17,45 @@
 	}
 }
 
-.sapFAvatarXL{
-	font-size: 3rem;
-}
-
-.sapFAvatarL {
-	font-size: 2.25rem;
-}
-
-.sapFAvatarM {
-	font-size: 1.5rem;
-}
-
-.sapFAvatarS {
-	font-size: 1.125rem;
-}
-
-.sapFAvatarXS {
-	font-size: 1rem;
-}
-
 .sapFAvatar.sapFAvatarInitials > .sapFAvatarInitialsHolder {
 	font-size: inherit;
 }
 
-.sapFAvatarColorAccent1 {
-	background-color: @sapAccentBackgroundColor1;
-	color: darken(@sapAccentColor1, 10);
-}
-.sapFAvatarColorAccent1 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor1, 10);
-}
-
-.sapFAvatarColorAccent2 {
-	background-color: @sapAccentBackgroundColor2;
-	color: @sapAccentColor2;
-}
-.sapFAvatarColorAccent2 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor2;
-}
-
-.sapFAvatarColorAccent3 {
-	background-color: @sapAccentBackgroundColor3;
-	color: darken(@sapAccentColor3, 10);
-}
-.sapFAvatarColorAccent3 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor3, 10);
-}
-
-.sapFAvatarColorAccent4 {
-	background-color: @sapAccentBackgroundColor4;
-	color: @sapAccentColor4;
-}
-.sapFAvatarColorAccent4 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor4;
-}
-
-.sapFAvatarColorAccent5 {
-	background-color: @sapAccentBackgroundColor5;
-	color: darken(@sapAccentColor5, 2);
-}
-.sapFAvatarColorAccent5 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor5, 2);
-}
-
-.sapFAvatarColorAccent6 {
-	background-color: @sapAccentBackgroundColor6;
-	color: @sapAccentColor6;
-}
-.sapFAvatarColorAccent6 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor6;
-}
-
-.sapFAvatarColorAccent7 {
-	background-color: @sapAccentBackgroundColor7;
-	color: @sapAccentColor7;
-}
-.sapFAvatarColorAccent7 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor7;
+.sapFAvatarFocusable:focus {
+	outline: none;
+	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
 }
 
-.sapFAvatarColorAccent8 {
-	background-color: @sapAccentBackgroundColor8;
-	color: @sapAccentColor8;
-}
-.sapFAvatarColorAccent8 .sapFAvatarInitialsHolder {
-	color: @sapAccentColor8;
-}
+.sapFAvatarColorTileIcon {
+	background-color: @sapUiTileBackground;
+	color: @sapUiTileIconColor;
 
-.sapFAvatarColorAccent9 {
-	background-color: @sapAccentBackgroundColor9;
-	color: darken(@sapAccentColor9, 2);
-}
-.sapFAvatarColorAccent9 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor9, 2);
+	.sapFAvatarInitialsHolder {
+		color: currentColor;
+	}
 }
 
-.sapFAvatarColorAccent10 {
-	background-color: @sapAccentBackgroundColor10;
-	color: darken(@sapAccentColor10, 3);
-}
-.sapFAvatarColorAccent10 .sapFAvatarInitialsHolder {
-	color: darken(@sapAccentColor10, 3);
+.sapFAvatarColorPlaceholder {
+	background-color: @sapUiContentImagePlaceholderBackground;
+	color: @sapUiContentImagePlaceholderForegroundColor;;
+	.sapFAvatarInitialsHolder {
+		color: currentColor;
+	}
 }
 
-.sapFAvatarColorTileIcon {
-	background-color: @sapAccentBackgroundColor10;
-	color: @sapTile_IconColor;
-}
+.generateColor (@accentIndex) {
+	@css-selector: ~"sapFAvatarColorAccent@{accentIndex}"; // Create the css selector string
+	@background-param: ~"sapUiAvatar@{accentIndex}Background"; // Build the color param which is a sapUiAccent
+	@color-param: ~"sapUiAvatar@{accentIndex}TextColor";
 
-.sapFAvatarColorTileIcon .sapFAvatarInitialsHolder {
-	color: @sapTile_IconColor;
-}
+	// Build the real CSS selector.
+	// The output would be something like this: .sapFAvatar.sapFAvatarColorAccent6 {background-color: #0092d1;}
+	.@{css-selector} {
+		background-color: @@background-param;
+	}
 
-.sapFAvatarFocusable:focus {
-	outline: none;
-	box-shadow: 0px 0px 0px 0.125rem @sapUiContentFocusColor;
+	.@{css-selector}.sapFAvatarIcon,
+	.@{css-selector} .sapFAvatarInitialsHolder {
+		color: contrast(@@background-param, @@color-param, @sapContent_ContrastTextColor, @sapContent_ContrastTextThreshold);
+	}
 }