feat(ui5-file-uploader): implement SAP Horizon theme parameters (#5086)

NHristov-sap · web-flow · commit aff0af9139d1 · 2022-04-21T17:20:10.000+03:00
diff --git a/packages/main/src/themes/FileUploader.css b/packages/main/src/themes/FileUploader.css
@@ -27,9 +27,31 @@
 	margin-right: 0.25rem;
 }
 
+:host([value-state="None"]:not([disabled]):hover) [ui5-input],
 :host(:not([value-state]):not([disabled]):hover) [ui5-input] {
+	border: var(--_ui5_file_uploader_hover_border);
 	background-color: var(--sapField_Hover_Background);
-	border: 1px solid var(--sapField_Hover_BorderColor);
+	box-shadow: var(--_ui5_input_hover_box_shadow);
+}
+
+:host([value-state="Error"]:not([disabled]):hover) [ui5-input] {
+	background-color: var(--_ui5_file_uploader_value_state_error_hover_background_color);
+	box-shadow: var(--_ui5_input_value_state_error_hover_box_shadow);
+}
+
+:host([value-state="Warning"]:not([disabled]):hover) [ui5-input] {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5_input_value_state_warning_hover_box_shadow);
+}
+
+:host([value-state="Success"]:not([disabled]):hover) [ui5-input] {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5_input_value_state_success_hover_box_shadow);
+}
+
+:host([value-state="Information"]:not([disabled]):hover) [ui5-input] {
+	background-color: var(--sapField_Hover_Background);
+	box-shadow: var(--_ui5_input_value_state_information_hover_box_shadow);
 }
 
 :host(:not([disabled]):active) [ui5-button] {
diff --git a/packages/main/src/themes/base/FileUploader-parameters.css b/packages/main/src/themes/base/FileUploader-parameters.css
@@ -0,0 +1,4 @@
+:root {
+	--_ui5_file_uploader_hover_border: 1px solid var(--sapField_Hover_BorderColor);
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_Hover_Background);
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -14,6 +14,7 @@
 @import "../base/CheckBox-parameters.css";
 @import "../base/ColorPalette-parameters.css";
 @import "../base/ColorPicker-parameters.css";
+@import "../base/FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/FileUploader-parameters.css b/packages/main/src/themes/sap_belize_hcb/FileUploader-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
+}
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -14,6 +14,7 @@
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/FileUploader-parameters.css b/packages/main/src/themes/sap_belize_hcw/FileUploader-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
+}
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -14,6 +14,7 @@
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -12,6 +12,7 @@
 @import "../base/ColorPicker-parameters.css";
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
+@import "../base/FileUploader-parameters.css";
 @import "../base/Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -13,6 +13,7 @@
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
+@import "../base/FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "../base/InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/FileUploader-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/FileUploader-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -14,6 +14,7 @@
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "../base/InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/FileUploader-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/FileUploader-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -14,6 +14,7 @@
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "../base/InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/FileUploader-parameters.css b/packages/main/src/themes/sap_horizon/FileUploader-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_hover_border: none;
+}
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -15,6 +15,7 @@
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
 @import "./Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Icon-parameters.css";
 @import "./Input-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_dark/FileUploader-parameters.css b/packages/main/src/themes/sap_horizon_dark/FileUploader-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_hover_border: none;
+}
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -15,6 +15,7 @@
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
 @import "./Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Icon-parameters.css";
 @import "./Input-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb/FileUploader-parameters.css b/packages/main/src/themes/sap_horizon_hcb/FileUploader-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_hover_border: 2px solid var(--sapField_Hover_BorderColor);
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
+}
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -14,6 +14,7 @@
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/FileUploader-parameters.css b/packages/main/src/themes/sap_horizon_hcw/FileUploader-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/FileUploader-parameters.css";
+
+:root {
+	--_ui5_file_uploader_hover_border: 2px solid var(--sapField_Hover_BorderColor);
+	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_InvalidBackground);
+}
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -14,6 +14,7 @@
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./Dialog-parameters.css";
+@import "./FileUploader-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "./InputIcon-parameters.css";

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +:root {
 +	--_ui5_file_uploader_hover_border: 1px solid var(--sapField_Hover_BorderColor);
 +	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_Hover_Background);
 +}