feat(ui5-textarea): Horizon themes implementation (#5018)

* feat(ui5-textarea): Horizon themes implementation

* warning placeholder adjusted

packages/main/src/themes/TextArea.css

@@ -16,6 +16,7 @@
 	line-height: 1.4;
 	letter-spacing: normal;
 	word-spacing: normal;
+	margin: var(--_ui5_textarea_margin);
 }
 
 :host([disabled]) {
@@ -28,7 +29,8 @@
 }
 
 :host([disabled]) .ui5-textarea-inner {
-	background: var(--sapField_ReadOnly_Background);
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--_ui5_textarea_disabled_background_color);
 }
 
 :host([focused]) .ui5-textarea-inner {
@@ -44,10 +46,8 @@
 
 :host(:not([value-state]):not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--_ui5_textarea_hover_box_shadow);
-	background-image: var(--_ui5_textarea_background_image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_Hover_BackgroundStyle);
+	background-color: var(--sapField_Hover_Background);
 }
 
 :host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner,
@@ -56,7 +56,6 @@
 	outline-offset: -4px;
 }
 
-
 .ui5-textarea-root {
 	height: 100%;
 	min-height: var(--_ui5_input_height);
@@ -71,6 +70,7 @@
 .ui5-textarea-inner {
 	width: 100%;
 	height: 100%;
+	min-width: 6rem;
 	margin: 0;
 	padding: var(--_ui5_textarea_padding);
 	box-sizing: border-box;
@@ -84,16 +84,13 @@
 	resize: none;
 	border-color: inherit;
 	border-radius: inherit;
-	background-color: var(--sapField_Background);
 	border-width: var(--_ui5_textarea_inner_border_width);
-	border-style: solid;
+	border-style: var(--sapField_BorderStyle);
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
-	background-image: var(--_ui5_textarea_background_image);
-	background-size: 100% var(--sapField_BorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--sapField_Background);
 }
 
 :host([growing]) .ui5-textarea-root {
@@ -122,10 +119,14 @@
 	border-color: var(--sapField_ReadOnly_BorderColor);
 }
 
-:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
-	background: var(--sapField_ReadOnly_Background);
+:host([readonly][focused]) .ui5-textarea-root .ui5-textarea-inner {
+	background-image: none;
 }
 
+:host([readonly]) .ui5-textarea-root .ui5-textarea-inner {
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--sapField_ReadOnly_Background);
+}
 
 :host([show-exceeded-text]) .ui5-textarea-root {
 	flex-direction: column;
@@ -159,6 +160,34 @@
 	color: var(--sapField_PlaceholderTextColor);
 }
 
+:host([value-state="Error"]) .ui5-textarea-inner::-webkit-input-placeholder {
+	/* Chrome/Opera/Safari */
+	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+:host([value-state="Error"]) .ui5-textarea-inner::-moz-placeholder {
+	/* Firefox 19+ */
+	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+:host([value-state="Error"]) .ui5-textarea-inner:-ms-input-placeholder {
+	/* IE 10+ */
+	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
+:host([value-state="Error"]) .ui5-textarea-inner:-moz-placeholder {
+	/* Firefox 18- */
+	font-weight: var(--_ui5_textarea_value_state_error_placeholder_font_weight);
+	font-style: var(--_ui5_textarea_error_placeholder_font_style);
+	color: var(--_ui5_textarea_error_placeholder_color);
+}
+
 :host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
 	border-color: var(--sapField_Hover_BorderColor);
 }
@@ -183,10 +212,8 @@
 
 :host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
 :host([exceeding]) .ui5-textarea-inner {
-	background-image: var(--_ui5_textarea_warning_background_image);
-	background-size: 100% var(--sapField_WarningBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapField_WarningBackground);
 }
 
 :host([value-state="Warning"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner,
@@ -199,33 +226,29 @@
 :host([exceeding][focused]) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_warning_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
 	font-weight: var(--_ui5_input_error_font_weight);
-	background-image: var(--_ui5_textarea_error_background_image);
-	background-size: 100% var(--sapField_InvalidBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapField_InvalidBackground);
 }
 
 :host([value-state="Error"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
 	box-shadow: var(--sapContent_Negative_Shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--_ui5_textarea_error_hover_background_color);
 }
 
 :host([value-state="Error"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_error_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--_ui5_textarea_error_focused_background_color);
 }
 
 :host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
-	background-image: var(--_ui5_textarea_information_background_image);
-	background-size: 100% var(--sapField_InformationBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapField_InformationBackground);
 }
 
 :host([value-state="Information"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
@@ -236,14 +259,12 @@
 :host([value-state="Information"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
-	background-image: var(--_ui_textarea_success_background_image);
-	background-size: 100% var(--sapField_SuccessBorderWidth);
-	background-repeat: repeat-x;
-	background-position: bottom;
+	background: var(--sapField_SuccessBackgroundStyle);
+	background-color: var(--sapField_SuccessBackground);
 }
 
 :host([value-state="Success"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
@@ -254,7 +275,7 @@
 :host([value-state="Success"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
 	background-image: none;
 	box-shadow: var(--_ui5_textarea_value_state_success_focus_box_shadow);
-	background-color: var(--sapField_Hover_Background);
+	background-color: var(--sapField_Focus_Background);
 }
 
 :host([value-state="Error"]:not([readonly])) {
@@ -296,7 +317,7 @@
 
 :host([value-state="Information"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
 	background-color: var(--sapField_InformationBackground);
-	border-width: var(--_ui5_textarea_state_border_width);
+	border-width: var(--_ui5_textarea_information_border_width);
 }
 
 .ui5-textarea-exceeded-text {
@@ -307,3 +328,39 @@
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
 }
+
+:host ::-webkit-scrollbar {
+	background: var(--sapField_BackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+	border-top-right-radius: var(--sapField_BorderCornerRadius);
+	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
+}
+
+:host([readonly]) ::-webkit-scrollbar {
+	background: var(--sapField_ReadOnly_BackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Error"]) ::-webkit-scrollbar {
+	background: var(--sapField_InvalidBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Warning"]) ::-webkit-scrollbar {
+	background: var(--sapField_WarningBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Information"]) ::-webkit-scrollbar {
+	background: var(--sapField_InformationBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([value-state="Success"]) ::-webkit-scrollbar {
+	background: var(--sapField_SuccessBackgroundStyle);
+	background-color: var(--sapScrollBar_TrackColor);
+}
+
+:host([focused]) ::-webkit-scrollbar {
+	background-image: none;
+}

packages/main/src/themes/base/TextArea-parameters.css

@@ -2,21 +2,23 @@
 	--_ui5_textarea_focus_after_width: 1px;
 	--_ui5_textarea_warning_border_style: solid;
 	--_ui5_textarea_state_border_width: 0.125rem;
-	--_ui5_textarea_background_image: none;
-	--_ui5_textarea_error_background_image: none;
-	--_ui5_textarea_warning_background_image: none;
-	--_ui5_textarea_information_background_image: none;
-	--_ui_textarea_success_background_image: none;
+	--_ui5_textarea_information_border_width: 0.125rem;
 	--_ui5_textarea_focus_box_shadow: none;
 	--_ui5_textarea_value_state_warning_focus_box_shadow: none;
 	--_ui5_textarea_value_state_error_focus_box_shadow: none;
 	--_ui5_textarea_value_state_success_focus_box_shadow: none;
 	--_ui5_textarea_hover_box_shadow: none;
-	--_ui5_textarea_inner_border_width: 1px;
+	--_ui5_textarea_inner_border_width: var(--sapField_BorderWidth);
 	--_ui5_textarea_success_border_width: 1px;
 	--_ui5_textarea_focus_outline: var(--_ui5_textarea_focus_after_width) dotted var(--sapContent_FocusColor);
 	--_ui5_textarea_value_state_focus_outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
 	--_ui5_textarea_after_element_display: none;
 	--_ui5_textarea_placeholder_font_style: italic;
 	--_ui5_input_warning_font_weight: normal;
+	--_ui5_textarea_value_state_error_placeholder_font_weight: normal;
+	--_ui5_textarea_error_placeholder_font_style: normal;
+	--_ui5_textarea_error_placeholder_color: var(--sapField_PlaceholderTextColor);
+	--_ui5_textarea_disabled_background_color: var(--sapField_ReadOnly_Background);
+	--_ui5_textarea_error_hover_background_color: var(--sapField_Hover_Background);
+	--_ui5_textarea_error_focused_background_color: var(--sapField_Focus_Background);
 }

packages/main/src/themes/base/sizes-parameters.css

@@ -86,7 +86,8 @@
 	--_ui5_tc_item_add_text_margin_top: 0.375rem;
 
 	/* TextArea */
-	--_ui5_textarea_padding: 0.5625rem 0.6875rem;
+	--_ui5_textarea_padding: 0.5rem 0.625rem;
+	--_ui5_textarea_margin: .25rem 0;
 
 	/* Radio Button */
 	--_ui5_radio_button_height: 2.75rem;
@@ -204,6 +205,7 @@
 
 	/* TextArea */
 	--_ui5_textarea_padding: .1875rem .5rem;
+	--_ui5_textarea_margin: .1875rem 0;
 
 	/* List */
 	--_ui5_list_no_data_height: 2rem;

packages/main/src/themes/sap_belize_hcb/TextArea-parameters.css

@@ -3,4 +3,7 @@
 :root {
 	--_ui5_textarea_focus_after_width: 2px;
 	--_ui5_textarea_warning_border_style: dashed;
+	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
 }

packages/main/src/themes/sap_belize_hcw/TextArea-parameters.css

@@ -3,4 +3,7 @@
 :root {
 	--_ui5_textarea_focus_after_width: 2px;
 	--_ui5_textarea_warning_border_style: dashed;
+	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
 }

packages/main/src/themes/sap_fiori_3_hcb/TextArea-parameters.css

@@ -7,4 +7,7 @@
 	--_ui5_textarea_information_border_width: 0.0625rem;
 	--_ui5_textarea_placeholder_font_style: normal;
 	--_ui5_input_warning_font_weight: bold;
+	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
 }

packages/main/src/themes/sap_fiori_3_hcw/TextArea-parameters.css

@@ -7,4 +7,7 @@
 	--_ui5_textarea_information_border_width: 0.0625rem;
 	--_ui5_textarea_placeholder_font_style: normal;
 	--_ui5_input_warning_font_weight: bold;
+	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_information_border_width: var(--sapField_BorderWidth);
 }

packages/main/src/themes/sap_horizon/TextArea-parameters.css

@@ -1,11 +1,6 @@
 @import "../base/TextArea-parameters.css";
 
 :root {
-	--_ui5_textarea_background_image: linear-gradient(0deg, var(--sapField_BorderColor) 0, var(--sapField_BorderColor) 100%);
-	--_ui5_textarea_error_background_image: linear-gradient(0deg, var(--sapField_InvalidColor) 0, var(--sapField_InvalidColor) 100%);
-	--_ui5_textarea_warning_background_image: linear-gradient(0deg, var(--sapField_WarningColor) 0, var(--sapField_WarningColor) 100%);
-	--_ui5_textarea_information_background_image: linear-gradient(0deg, var(--sapField_InformationColor) 0, var(--sapField_InformationColor) 100%);
-	--_ui_textarea_success_background_image: linear-gradient(0deg, var(--sapField_SuccessColor) 0, var(--sapField_SuccessColor) 100%);
 	--_ui5_textarea_inner_border_width: 0px;
 	--_ui5_textarea_state_border_width: 0px;
 	--_ui5_textarea_success_border_width: 0px;
@@ -18,5 +13,5 @@
 	--_ui5_textarea_value_state_focus_outline: none;
 	--_ui5_textarea_after_element_display: inline-block;
 	--_ui5_textarea_value_state_warning_hover_box_shadow: none;
-	--_ui5_textarea_placeholder_font_style: normal;
+	--_ui5_textarea_disabled_background_color: var(--sapField_Background);
 }

packages/main/src/themes/sap_horizon_dark/TextArea-parameters.css

@@ -1,11 +1,6 @@
 @import "../base/TextArea-parameters.css";
 
 :root {
-	--_ui5_textarea_background_image: linear-gradient(0deg, var(--sapField_BorderColor) 0, var(--sapField_BorderColor) 100%);
-	--_ui5_textarea_error_background_image: linear-gradient(0deg, var(--sapField_InvalidColor) 0, var(--sapField_InvalidColor) 100%);
-	--_ui5_textarea_warning_background_image: linear-gradient(0deg, var(--sapField_WarningColor) 0, var(--sapField_WarningColor) 100%);
-	--_ui5_textarea_information_background_image: linear-gradient(0deg, var(--sapField_InformationColor) 0, var(--sapField_InformationColor) 100%);
-	--_ui_textarea_success_background_image: linear-gradient(0deg, var(--sapField_SuccessColor) 0, var(--sapField_SuccessColor) 100%);
 	--_ui5_textarea_inner_border_width: 0px;
 	--_ui5_textarea_state_border_width: 0px;
 	--_ui5_textarea_success_border_width: 0px;
@@ -18,5 +13,5 @@
 	--_ui5_textarea_value_state_focus_outline: none;
 	--_ui5_textarea_after_element_display: inline-block;
 	--_ui5_textarea_value_state_warning_hover_box_shadow: none;
-	--_ui5_textarea_placeholder_font_style: normal;
+	--_ui5_textarea_disabled_background_color: var(--sapField_Background);
 }

packages/main/src/themes/sap_horizon_hcb/TextArea-parameters.css

@@ -7,4 +7,11 @@
 	--_ui5_textarea_information_border_width: 0.0625rem;
 	--_ui5_textarea_placeholder_font_style: normal;
 	--_ui5_input_warning_font_weight: bold;
+	--_ui5_textarea_value_state_error_placeholder_font_weight: bold;
+	--_ui5_textarea_error_placeholder_font_style: italic;
+	--_ui5_textarea_error_placeholder_color: var(--sapField_TextColor);
+	--_ui5_textarea_disabled_background_color: var(--sapField_Background);
+	--_ui5_textarea_error_hover_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_error_focused_background_color: var(--sapField_InvalidBackground);
+	--_ui5_textarea_information_border_width: 0.0625rem;
 }