feat(ui5-input, ui5-date-picker): implement sap_horizon theme (#4006)

Fixes: #4040 Fixes: #4046
SAP · Oct 4, 2021 · e137de3 · e137de3
1 parent 33ee202
commit e137de3
Show file tree

Hide file tree

Showing 21 changed files with 320 additions and 37 deletions.
diff --git a/packages/base/hash.txt b/packages/base/hash.txt
@@ -1 +1 @@
-rdDAWx+4D0PvEdxuBB9NMlHEXYo=
+MqYJwSsMbglsBVErBjlj4MODyjI=
diff --git a/packages/localization/hash.txt b/packages/localization/hash.txt
@@ -1 +1 @@
-65ggwN6ZkFOPO38ZE2UOXXibHi8=
+VW6BY+s3XWP66RxH3uUWdXbfn/A=
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -38,12 +38,17 @@
 			min="{{nativeInputAttributes.min}}"
 			max="{{nativeInputAttributes.max}}"
 		/>
+
 		{{#if icon.length}}
 			<div class="ui5-input-icon-root">
 				<slot name="icon"></slot>
 			</div>
 		{{/if}}
 
+		<div class="ui5-input-value-state-icon">
+			{{{_valueStateInputIcon}}}
+		</div>
+
 		{{> postContent }}
 
 		{{#if showSuggestions}}

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -1263,6 +1263,26 @@ class Input extends UI5Element {
 		return this.placeholder;
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateInputIcon() {
+		const iconPerValueState = {
+			Error: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20ZM7.70711 13.7071C7.31658 14.0976 6.68342 14.0976 6.29289 13.7071C5.90237 13.3166 5.90237 12.6834 6.29289 12.2929L8.58579 10L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L10 8.58579L12.2929 6.29289C12.6834 5.90237 13.3166 5.90237 13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711L11.4142 10L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L10 11.4142L7.70711 13.7071Z" fill="#EE3939"/>`,
+			Warning: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M11.8619 0.49298C11.6823 0.187541 11.3544 0 11 0C10.6456 0 10.3177 0.187541 10.1381 0.49298L0.138066 17.493C-0.0438112 17.8022 -0.0461447 18.1851 0.13195 18.4965C0.310046 18.8079 0.641283 19 1 19H21C21.3587 19 21.69 18.8079 21.868 18.4965C22.0461 18.1851 22.0438 17.8022 21.8619 17.493L11.8619 0.49298ZM11 6C11.5523 6 12 6.44772 12 7V10C12 10.5523 11.5523 11 11 11C10.4477 11 10 10.5523 10 10V7C10 6.44772 10.4477 6 11 6ZM11 16C11.8284 16 12.5 15.3284 12.5 14.5C12.5 13.6716 11.8284 13 11 13C10.1716 13 9.5 13.6716 9.5 14.5C9.5 15.3284 10.1716 16 11 16Z" fill="#F58B00"/>`,
+			Success: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10ZM14.7071 6.29289C14.3166 5.90237 13.6834 5.90237 13.2929 6.29289L8 11.5858L6.70711 10.2929C6.31658 9.90237 5.68342 9.90237 5.29289 10.2929C4.90237 10.6834 4.90237 11.3166 5.29289 11.7071L7.29289 13.7071C7.68342 14.0976 8.31658 14.0976 8.70711 13.7071L14.7071 7.70711C15.0976 7.31658 15.0976 6.68342 14.7071 6.29289Z" fill="#36A41D"/>`,
+			Information: `<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M3 0C1.34315 0 0 1.34315 0 3V15C0 16.6569 1.34315 18 3 18H15C16.6569 18 18 16.6569 18 15V3C18 1.34315 16.6569 0 15 0H3ZM9 6.5C9.82843 6.5 10.5 5.82843 10.5 5C10.5 4.17157 9.82843 3.5 9 3.5C8.17157 3.5 7.5 4.17157 7.5 5C7.5 5.82843 8.17157 6.5 9 6.5ZM9 8.5C9.55228 8.5 10 8.94772 10 9.5V13.5C10 14.0523 9.55228 14.5 9 14.5C8.44771 14.5 8 14.0523 8 13.5V9.5C8 8.94772 8.44771 8.5 9 8.5Z" fill="#1B90FF"/>`,
+		};
+
+		const result = `
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 20 20" fill="none">
+			${iconPerValueState[this.valueState]};
+		</svg>
+		`;
+
+		return this.valueState !== ValueState.None ? result : "";
+	}
+
 	/**
 	 * Returns the caret position inside the native input
 	 * @protected

diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css
@@ -11,6 +11,11 @@
 :host {
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
+	border-radius: var(--_ui5-datepicker_border_radius)
+}
+
+:host(:not([disabled]):hover) {
+	background: var(--_ui5-datepicker-hover-background);
 }
 
 :host .ui5-date-picker-input {
@@ -21,4 +26,9 @@
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
-}
+}
+
+[slot="icon"] {
+	border-top-right-radius: var(--_ui5-datepicker_border_radius);
+    border-bottom-right-radius: var(--_ui5-datepicker_border_radius);
+}
diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css
@@ -12,42 +12,66 @@
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
 	font-style: normal;
-	background-color: var(--sapField_Background);
-	border: 1px solid var(--sapField_BorderColor);
-	border-radius: var(--sapField_BorderCornerRadius);
+	background-color: var(--_ui5-input-background-color);
+	border: var(--_ui5-input-border);
+	border-radius: var(--_ui5-input-border-radius);
 	box-sizing: border-box;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;
 	text-align: start;
+	transition: var(--_ui5-input-transition);
 }
 
 :host([focused]) {
-	outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
-	outline-offset: -3px;
+	border-color: var(--_ui5-input-focused-border-color);
+	background-color: var(--sapField_Hover_Background);
+	outline: var(--_ui5-input-focus-outline);
+	outline-offset: var(--_ui5-input-focus-outline-offset);
+	box-shadow: var(--_ui5-input-hover-box-shadow);
+}
+
+.ui5-input-root::before {
+	content: "";
+    position: absolute;
+    width: calc(100% - 2px);
+    left: 1px;
+    bottom: -2px;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    height: var(--_ui5-input-bottom-border-height);
+    transition: var(--_ui5-input-transition);
+    background-color: var(--_ui5-input-bottom-border-color);
 }
 
 :host([value-state]:not([value-state="None"])[focused]) {
-	outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
-	outline-offset: -4px;
+	outline: var(--_ui5-input-value-state-outline);
+	outline-offset: var(--_ui5-input-value-state-outline-offset);
 }
 
 .ui5-input-root {
 	width: 100%;
 	height: 100%;
+	position: relative;
 	background: transparent;
 	display: inline-block;
 	outline: none;
 	box-sizing: border-box;
 	color: inherit;
+	transition: border-color .2s ease-in-out;
 }
 
 :host([disabled]) {
 	opacity: var(--_ui5_input_disabled_opacity);
 	cursor: default;
 	pointer-events: none;
-	background: var(--sapField_ReadOnly_Background);
-	border-color: var(--sapField_ReadOnly_BorderColor);
+	background: var(--_ui5-input-disabled-background);
+	border-color: var(--_ui5_input_disabled_border_color);
+}
+
+:host([disabled]) .ui5-input-root::before,
+:host([readonly]) .ui5-input-root::before {
+	content: none;
 }
 
 [inner-input] {
@@ -77,6 +101,16 @@
 	padding: var(--_ui5_input_inner_padding_with_icon);
 }
 
+.ui5-input-value-state-icon {
+	height: 100%;
+	display: var(--_ui5-input-value-state-icon-display);
+    align-items: center;
+}
+
+.ui5-input-value-state-icon > svg {
+	margin-right: 8px;
+}
+
 [inner-input]::selection {
 	background: var(--sapSelectedColor);
 	color: var(--sapContent_ContrastTextColor);
@@ -90,8 +124,8 @@
 	visibility: hidden;
 }
 [inner-input]::-webkit-input-placeholder {
-	font-style: italic;
-	color: var(--sapField_PlaceholderTextColor);
+	font-style: var(--_ui5-input-placeholder-style);
+	color: var(--_ui5-input-placeholder-color);
 	padding-right: 0.125rem;
 }
 
@@ -102,7 +136,7 @@
 	visibility: hidden;
 }
 [inner-input]::-moz-placeholder {
-	font-style: italic;
+	font-style: var(--_ui5-input-placeholder-style);
 	color: var(--sapField_PlaceholderTextColor);
 	padding-right: 0.125rem;
 }
@@ -119,6 +153,38 @@
 	padding-right: 0.125rem;
 }
 
+:host([value-state="Error"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-state-error-border-botom-color);
+}
+
+:host([value-state="Error"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-state-error-border-botom-color);
+}
+
+:host([value-state="Warning"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-state-warning-border-botom-color);
+}
+
+:host([value-state="Warning"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-state-warning-border-botom-color);
+}
+
+:host([value-state="Success"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-state-success-border-botom-color);
+}
+
+:host([value-state="Success"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-state-success-border-botom-color);
+}
+
+:host([value-state="Information"]) [inner-input]::-webkit-input-placeholder {
+	color: var(--_ui5-input-value-success-information-border-botom-color);
+}
+
+:host([value-state="Information"]) [inner-input]::-moz-placeholder {
+	color: var(--_ui5-input-value-success-information-border-botom-color);
+}
+
 .ui5-input-content {
 	height: 100%;
 	box-sizing: border-box;
@@ -132,18 +198,33 @@
 }
 
 :host([readonly]) {
-	border-color: var(--sapField_ReadOnly_BorderColor);
-	background: var(--sapField_ReadOnly_Background);
+	border-color: var(--_ui5_input_readonly_border_color);
+	background: var(--_ui5-input-readonly-background);
 }
 
 :host(:not([value-state]):not([readonly]):hover) {
 	background-color: var(--sapField_Hover_Background);
-	border: 1px solid var(--sapField_Hover_BorderColor);
+	border: var(--_ui5-input-hover-border);
+	box-shadow: var(--_ui5-input-hover-box-shadow);
+}
+
+:host(:not([value-state]):not([readonly])[focused]:hover),
+:host([value-state="None"]:not([readonly])[focused]:hover) {
+	border-color: var(--_ui5-input-focused-border-color);
+}
+
+:host(:not([value-state]):not([readonly]):hover) {
+	border: var(--_ui5-input-hover-border);
+}
+
+:host([focused]) .ui5-input-root::before {
+	content: none;
 }
 
 :host([value-state="None"]:not([readonly]):hover) {
 	background-color: var(--sapField_Hover_Background);
-	border: 1px solid var(--sapField_Hover_BorderColor);
+	border: var(--_ui5-input-hover-border);
+	box-shadow: var(--_ui5-input-hover-box-shadow);
 }
 
 :host([value-state]:not([value-state="None"])) {
@@ -161,7 +242,21 @@
 
 :host([value-state="Error"]:not([readonly])) {
 	background-color: var(--sapField_InvalidBackground);
-	border-color: var(--sapField_InvalidColor);
+	border-color: var(--_ui5-input-value-state-error-border-color);
+}
+
+:host([value-state="Error"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-error-background);
+	border-color: var(--_ui5-input-focused-value-state-error-border-color);
+}
+
+:host([value-state="Error"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-state-error-border-botom-color);
+}
+
+:host([value-state="Error"]:not([readonly]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-error-box-shadow);
 }
 
 :host([value-state="Error"]:not([readonly]):not([disabled])),
@@ -172,21 +267,63 @@
 
 :host([value-state="Warning"]:not([readonly])) {
 	background-color: var(--sapField_WarningBackground);
-	border-color: var(--sapField_WarningColor);
+	border-color: var(--_ui5-input-value-state-warning-border-color);
+}
+
+:host([value-state="Warning"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-warning-background);
+	border-color: var(--_ui5-input-focused-value-state-warning-border-color);
+}
+
+:host([value-state="Warning"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-state-warning-border-botom-color);
+}
+
+:host([value-state="Warning"]:not([readonly]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-warning-box-shadow);
 }
 
 :host([value-state="Success"]:not([readonly])) {
 	background-color: var(--sapField_SuccessBackground);
-	border-color: var(--sapField_SuccessColor);
-	border-width: 1px;
+	border-color: var(--_ui5-input-value-state-success-border-color);
+	border-width: var(--_ui5-input-value-state-success-border-width);
+}
+
+:host([value-state="Success"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-success-background);
+	border-color: var(--_ui5-input-focused-value-state-success-border-color);
+}
+
+:host([value-state="Success"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-state-success-border-botom-color);
+}
+
+:host([value-state="Success"]:not([readonly]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-success-box-shadow);
 }
 
 :host([value-state="Information"]:not([readonly])) {
 	background-color: var(--sapField_InformationBackground);
-	border-color: var(--sapField_InformationColor);
+	border-color: var(--_ui5-input-value-state-information-border-color);
 	border-width: var(--_ui5-input-information_border_width);
 }
 
+:host([value-state="Information"][focused]:not([readonly])) {
+	background-color: var(--_ui5-input-focused-value-state-information-background);
+	border-color: var(--_ui5-input-focused-value-state-information-border-color);
+}
+
+:host([value-state="Information"]:not([readonly])) .ui5-input-root::before{
+	background-color: var(--_ui5-input-value-success-information-border-botom-color);
+}
+
+:host([value-state="Information"]:not([readonly]):hover) {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5-input-value-state-information-box-shadow);
+}
+
 /* Remove IE's defaut clear button */
 [inner-input]::-ms-clear {
 	height: 0;

diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css
@@ -30,3 +30,8 @@
 [ui5-multi-combobox] [ui5-tokenizer] {
 	flex: 3;
 }
+
+[ui5-icon] {
+	border-top-right-radius: var(--ui5-multi_bombobox_icon_border_top_right_radius);
+    border-bottom-right-radius: var(--ui5-multi_bombobox_icon_border_bottom_right_radius);
+}
diff --git a/packages/main/src/themes/base/DatePicker-parameters.css b/packages/main/src/themes/base/DatePicker-parameters.css
@@ -1,3 +1,4 @@
 :root {
 	--_ui5_datepicker_icon_border: none;
+	--_ui5-datepicker_border_radius: 0;
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		rdDAWx+4D0PvEdxuBB9NMlHEXYo=
		MqYJwSsMbglsBVErBjlj4MODyjI=
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		65ggwN6ZkFOPO38ZE2UOXXibHi8=
		VW6BY+s3XWP66RxH3uUWdXbfn/A=