@openui5/themelib_sap_horizon 1.100.0 → 1.101.0

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_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);
+	}
 }

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

@@ -155,10 +155,6 @@ span.sapMBtnInner.sapMBtnEmphasized {
 /* Custom focus border:                                                 */
 /* ---------------------------------------------------------------------*/
 
-html.sap-desktop .sapMBtn:focus > .sapMBtnActive.sapMFocusable {
-	border-color:    @sapUiContentContrastFocusColor;
-}
-
 html.sap-desktop .sapMBtn:focus > .sapMBtnEmphasized.sapMBtnActive.sapMFocusable {
 	border-color:    @sapUiContentFocusColor;
 }
@@ -243,12 +239,6 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	background-color: @sapUiButtonActiveBackground;
 }
 
-:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnIconFirst.sapMBtnTransparent.sapMBtnActive,
-:not(.sapMBtnDisabled) > span.sapMBtnInner.sapMBtnIconLast.sapMBtnTransparent.sapMBtnActive {
-	background-color: @sapUiButtonLiteActiveBackground;
-	border-color: @sapUiButtonLiteActiveBorderColor;
-}
-
 // text color for enabled buttons
 :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept.sapMBtnActive,
 :not(.sapMBtnDisabled) > .sapMBtnInner.sapMBtnAccept.sapMBtnActive .sapMBtnIcon {
@@ -265,6 +255,11 @@ html.sap-desktop .sapMFooter-CTX .sapMBtnInner.sapMBtnReject {
 	color: @sapUiButtonAttentionActiveTextColor;
 }
 
+:not(.sapMBtnDisabled) .sapMBtnBack > .sapMBtnIcon,
+:not(.sapMBtnDisabled) .sapMBtnTransparent > .sapMBtnIcon {
+	color: @sapUiButtonLiteTextColor;
+}
+
 // box shadow on hover
 .sapMBtn:not(.sapMBtnDisabled):hover .sapMBtnInner:not(.sapMBtnActive) {
 	box-shadow: @sapContent_Interaction_Shadow;