fix(ui5-switch): align 'off' text in RTL, add compact mode params (#7603

)

In RTL mode the 'off' icon of `Graphical` type Switch was misaligned due to missing parameters for RTL scenario of the control.

Fixes: #7522 
Fixes: #7806

packages/main/src/themes/Switch.css

@@ -114,7 +114,7 @@
 
 .ui5-switch-handle,
 .ui5-switch-text {
-	left: var(--_ui5_switch_handle_left);
+	inset-inline-start: var(--_ui5_switch_handle_left);
 	top: 50%;
 	transform: translateY(-50%);
 }
@@ -123,8 +123,8 @@
 .ui5-switch-desktop.ui5-switch-root:focus::after {
 	content: "";
 	position: absolute;
-	left: var(--_ui5_switch_root_outline_left);
-	right: var(--_ui5_switch_root_outline_right);
+	inset-inline-start: var(--_ui5_switch_root_outline_left);
+	inset-inline-end: var(--_ui5_switch_root_outline_right);
 	top: var(--_ui5_switch_root_outline_top);
 	bottom: var(--_ui5_switch_root_outline_bottom);
 	border: var(--_ui5_switch_focus_outline);
@@ -137,11 +137,12 @@
 /* switch hidden input */
 .ui5-switch-root .ui5-switch-input {
 	position: absolute;
-	left: 0;
+	inset-inline-start: 0;
 	width: 0;
 	height: 0;
 	margin: 0;
 	visibility: hidden;
+	appearance: none;
 	-webkit-appearance: none;
 }
 
@@ -160,12 +161,12 @@
 
 .ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on, 
 .ui5-switch-root.ui5-switch--checked.ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--on {
-	left: var(--_ui5_switch_text_active_left);
+	inset-inline-start: var(--_ui5_switch_text_active_left);
 }
 .ui5-switch-root:not(.ui5-switch--checked).ui5-switch--semantic .ui5-switch-text--off,
 .ui5-switch-root:not(.ui5-switch--checked).ui5-switch-desktop.ui5-switch--no-label .ui5-switch-text--off {
-	left: var(--_ui5_switch_text_inactive_left);
-	right: var(--_ui5_switch_text_inactive_right);
+	inset-inline-start: var(--_ui5_switch_text_inactive_left);
+	inset-inline-end: var(--_ui5_switch_text_inactive_right);
 }
 
 /* handle */
@@ -337,14 +338,14 @@
 	color: var(--_ui5_switch_text_active_color);
 	overflow: var(--_ui5_switch_text_overflow);
 	text-overflow: ellipsis;
-	left: var(--_ui5_switch_text_active_left_alternate);
+	inset-inline-start: var(--_ui5_switch_text_active_left_alternate);
 }
 .ui5-switch-root .ui5-switch-text--off {
 	color: var(--_ui5_switch_text_inactive_color);
 	overflow: var(--_ui5_switch_text_overflow);
 	text-overflow: ellipsis;
-	left: var(--_ui5_switch_text_inactive_left_alternate);
-	right: var(--_ui5_switch_text_inactive_right_alternate);
+	inset-inline-start: var(--_ui5_switch_text_inactive_left_alternate);
+	inset-inline-end: var(--_ui5_switch_text_inactive_right_alternate);
 }
 
 .ui5-switch-root .ui5-switch-no-label-icon-on,
@@ -364,19 +365,4 @@
 
 [dir="rtl"].ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
 	transform: var(--_ui5_switch_rtl_transform);
-}
-
-[dir="rtl"].ui5-switch-root .ui5-switch-handle {
-	left: auto;
-	right: var(--_ui5_switch_handle_left);
-}
-
-[dir="rtl"].ui5-switch-root .ui5-switch-text--on {
-	right: var(--_ui5_switch_text_active_left);
-	left: var(--_ui5_switch_text_active_right);
-}
-
-[dir="rtl"].ui5-switch-root .ui5-switch-text--off {
-	right: var(--_ui5_switch_text_inactive_left);
-	left: var(--_ui5_switch_text_inactive_right);
-}
+}

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

@@ -143,4 +143,30 @@
 
 	--_ui5_switch_icon_width: 1rem;
 	--_ui5_switch_icon_height: 1rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_switch_width: 3rem;
+	--_ui5_switch_min_width: none;
+	--_ui5_switch_with_label_width: 3.75rem;
+	--_ui5_switch_root_outline_top: 0.25rem;
+	--_ui5_switch_root_outline_bottom: 0.25rem;
+	--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
+	--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
+	--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
+	--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
+	--_ui5_switch_track_width: 2rem;
+	--_ui5_switch_track_height: 1.25rem;
+	--_ui5_switch_track_with_label_width: 2.75rem;
+	--_ui5_switch_track_with_label_height: 1.25rem;
+	--_ui5_switch_handle_width: 1.25rem;
+	--_ui5_switch_handle_height: 1rem;
+	--_ui5_switch_handle_with_label_width: 1.75rem;
+	--_ui5_switch_handle_with_label_height: 1rem;
+	--_ui5_switch_text_font_size: var(--sapFontSize);
+	--_ui5_switch_text_width: 1rem;
+	--_ui5_switch_text_active_left: 0.1875rem;
+	--_ui5_switch_text_active_left_alternate: 0.0625rem;
 }