refactor(styles): use :dir(rtl|ltr) instead of dir="rtl"ltr" (#12766)

Author: ilhan007

packages/fiori/src/themes/ShellBar.css

@@ -406,11 +406,11 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-overflow-container-right-child .ui5-shellbar-bell-button [slot="badge"] {
-    inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset);
+    inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
 }
 
 .ui5-shellbar-overflow-container-right-child .ui5-shellbar-custom-item [slot="badge"] {
-    inset-inline-end: var(--_ui5-shellbar-notification-btn-count-offset);
+    inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
 }
 
 .ui5-shellbar-menu-button {

packages/fiori/src/themes/base/SideNavigation-parameters.css

@@ -75,8 +75,3 @@
 	--_ui5_side_navigation_item_expand_arrow_padding: 0.3125rem;
 	--_ui5_side_navigation_item_margin: 0.5rem;
 }
-
-[dir="rtl"] {
-	--_ui5_side_navigation_item_expand_icon_hover_left: 0;
-	--_ui5_side_navigation_item_expand_icon_hover_right: auto;
-}

packages/fiori/src/themes/base/rtl-parameters.css

@@ -0,0 +1,14 @@
+:root,
+:dir(ltr) {
+	--_ui5_timeline_scroll_container_offset: 0.5rem;
+	--_ui5_shellbar_notification_btn_count_offset: 0.125rem;
+	--_ui5_side_navigation_item_expand_icon_hover_left: auto;
+	--_ui5_side_navigation_item_expand_icon_hover_right: 0;
+}
+
+:dir(rtl) {
+	--_ui5_timeline_scroll_container_offset: -0.5rem;
+	--_ui5_shellbar_notification_btn_count_offset: auto;
+	--_ui5_side_navigation_item_expand_icon_hover_left: 0;
+	--_ui5_side_navigation_item_expand_icon_hover_right: auto;
+}

packages/fiori/src/themes/sap_horizon/parameters-bundle.css

@@ -1,3 +1,4 @@
+@import "../base/rtl-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";

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

@@ -1,10 +1,10 @@
-:root, [dir="ltr"] {
+:root,
+:dir(ltr) {
 	--_ui5_rotation_90deg: rotate(90deg);
 	--_ui5_rotation_minus_90deg: rotate(-90deg);
 
 	--_ui5_icon_transform_scale: none;
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_90deg);
-	--_ui5_timeline_scroll_container_offset: 0.5rem;
 
 	--_ui5_popover_upward_arrow_margin: 0.1875rem 0 0 0.1875rem;
 	--_ui5_popover_right_arrow_margin: 0.1875rem 0 0 -0.375rem;
@@ -15,15 +15,11 @@
 	--_ui5_progress_indicator_bar_border_radius: 0.5rem 0 0 0.5rem;
 	--_ui5_progress_indicator_remaining_bar_border_radius: 0 0.5rem 0.5rem 0;
 	--_ui5_menu_submenu_margin_offset: -0.25rem 0;
-
-	--_ui5-shellbar-notification-btn-count-offset: 0.125rem;
 }
 
-[dir="rtl"],
-[dir="rtl"] :host {
+:dir(rtl) {
 	--_ui5_icon_transform_scale: scale(-1, 1);
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);
-	--_ui5_timeline_scroll_container_offset: -0.5rem;
 
 	--_ui5_popover_upward_arrow_margin: .1875rem .125rem 0 0;
 	--_ui5_popover_right_arrow_margin: .1875rem .25rem 0 0;
@@ -38,5 +34,4 @@
 
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0px;
-	--_ui5-shellbar-notification-btn-count-offset: auto;
 }

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

@@ -1,6 +1,6 @@
 @import "../base/rtl-parameters.css";
 
-[dir="rtl"] {
+:dir(rtl) {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 	--_ui5_progress_indicator_bar_border_radius: 0.5rem;

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

@@ -1,6 +1,6 @@
 @import "../base/rtl-parameters.css";
 
-[dir="rtl"] {
+:dir(rtl) {
 	--_ui5_segmented_btn_item_border_left: 0.0625rem;
 	--_ui5_segmented_btn_item_border_right: 0.0625rem;
 }