fix(ui5-date-picker, ui5-time-picker): adjust styles (#11704)

- `ui5-time-picker` now has the correct hover background for the readonly and all value-states
- `ui5-date-picker` and the other date & time picker components now have the correct disabled opacity

Fixes: #11605
Fixes: #11609

Author: didip1000

packages/main/src/themes/DatePicker.css

@@ -51,6 +51,11 @@
 	margin: inherit;
 }
 
+:host([disabled]) .ui5-date-picker-input {
+	background-color: var(--_ui5-input_disabled_background);
+	opacity: var(--_ui5_input_disabled_opacity);
+}
+
 :host(:not([disabled]):not([readonly])) .ui5-date-picker-input[focused] {
 	background-color: var(--_ui5-datepicker-hover-background);
 }

packages/main/src/themes/InputSharedStyles.css

@@ -4,20 +4,18 @@
 	- readonly and disabled states
 */
 
+:host([disabled]) {
+	cursor: default;
+	pointer-events: none;
+	background: none;
+}
+
 :host([readonly]:not([disabled])) {
 	border-color: var(--_ui5_input_readonly_border_color);
 	background: var(--sapField_ReadOnly_BackgroundStyle);
 	background-color: var(--_ui5_input_readonly_background);
 }
 
-:host([disabled]) {
-	opacity: var(--_ui5_input_disabled_opacity);
-	cursor: default;
-	pointer-events: none;
-	background-color: var(--_ui5-input_disabled_background);
-	border-color: var(--_ui5_input_disabled_border_color);
-}
-
 :host([value-state="Negative"]) .inputIcon:not(.inputIcon--pressed):not(:active):hover {
 	box-shadow: var(--_ui5_input_error_icon_box_shadow);
 }

packages/main/src/themes/TimePicker.css

@@ -27,7 +27,7 @@
 	background-color: var(--sapField_InvalidBackground);
 }
 
-:host(:not([disabled]):hover) {
+:host(:not([disabled]):not([readonly]):hover) {
 	background: var(--sapField_Hover_Background);
 }
 
@@ -49,6 +49,11 @@
 	height: inherit;
 }
 
+:host([disabled]) .ui5-time-picker-input {
+	background-color: var(--_ui5-input_disabled_background);
+	opacity: var(--_ui5_input_disabled_opacity);
+}
+
 .ui5-time-picker-popover::part(header) {
 	padding: 0;
 }

packages/main/test/pages/TimePicker.html

@@ -90,6 +90,9 @@ <h3>TimePicker in Compact</h3>
 			<div slot="valueStateMessage" id="customValueStateMessageInformation">Additional information</div>
 		</ui5-time-picker>
 
+		<ui5-time-picker readonly></ui5-time-picker>
+		<ui5-time-picker disabled></ui5-time-picker>
+
 		<script>
 				var counter = 0;
 				timepickerChange.addEventListener("ui5-change", function() {