feat(ui5-token): change readonly select state visual (#12822)

Author: Vonahz

packages/main/src/themes/Token.css

@@ -20,13 +20,13 @@
 	background: var(--sapButton_Hover_Background);
 }
 
-:host([selected]) {
+:host(:not([readonly])[selected]) {
 	background: var(--sapButton_Selected_Background);
 	border: var(--sapButton_BorderWidth) solid var(--sapButton_Selected_BorderColor);
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper::before {
+:host(:not([readonly])[selected]) .ui5-token--wrapper::before {
 	content: "";
 	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
@@ -40,6 +40,11 @@
 	pointer-events: none;
 }
 
+:host([readonly][selected]) .ui5-token--text {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
 :host([selected]:hover) {
 	background: var(--sapButton_Selected_Hover_Background);
 }
@@ -58,7 +63,7 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([focused][selected]:not(:hover)) {
+:host(:not([readonly])[focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
 	border: var(--_ui5_token_focused_selected_border);