refactor(ui5-side-navigation): improve side navigation styling

Removed rounded corners and shadow from ui5-side-navigation.
Now it can be visually combined with other components in the framework.

Related to: #7982, #7308

packages/fiori/src/themes/SideNavigation.css

@@ -5,8 +5,6 @@
 	width: var(--_ui5_side_navigation_width);
 	max-width: 100%;
 	transition: width 0.3s, min-width 0.3s;
-	border-radius: var(--_ui5_side_navigation_border_radius);
-	box-shadow: var(--_ui5_side_navigation_box_shadow);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	background: var(--sapList_Background);
@@ -17,10 +15,6 @@
 	width: var(--_ui5_side_navigation_collapsed_width);
 }
 
-:host([is-touch-device]) {
-	border-radius: var(--_ui5_side_navigation_phone_border_radius);
-}
-
 .ui5-sn-root {
 	height: 100%;
 	display: flex;

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

@@ -11,9 +11,6 @@
 	--_ui5_side_navigation_navigation_separator_height: calc(2 * var(--sapList_BorderWidth));
 	--_ui5_side_navigation_triangle_color: var(--sapContent_IconColor);
 	--_ui5_side_navigation_border_right: 1px solid var(--sapGroup_ContentBorderColor);
-	--_ui5_side_navigation_border_radius: 0;
-	--_ui5_side_navigation_phone_border_radius: 0;
-	--_ui5_side_navigation_box_shadow: none;
 	--_ui5_side_navigation_triangle_display: block;
 	--_ui5_side_navigation_phone_width: var(--_ui5_side_navigation_width);
 

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

@@ -11,11 +11,6 @@
 	--_ui5_side_navigation_navigation_separator_height:  0.0625rem;
 	--_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor);
 	--_ui5_side_navigation_border_right: 0;
-	--_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0;
-	--_ui5_side_navigation_phone_border_radius: 0.5rem;
-	--_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
-	--_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
-	--_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2);
 	--_ui5_side_navigation_triangle_display: none;
 	--_ui5_side_navigation_phone_width: 100%;
 

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

@@ -11,11 +11,6 @@
 	--_ui5_side_navigation_navigation_separator_height:  0.0625rem;
 	--_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor);
 	--_ui5_side_navigation_border_right: 0;
-	--_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0;
-	--_ui5_side_navigation_phone_border_radius: 0.5rem;
-	--_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
-	--_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 32%, transparent);
-	--_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2);
 	--_ui5_side_navigation_triangle_display: none;
 	--_ui5_side_navigation_phone_width: 100%;
 

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

@@ -6,11 +6,6 @@
 
 	--_ui5_side_navigation_navigation_separator_height:  0.0625rem;
 	--_ui5_side_navigation_border_right: 0;
-	--_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0;
-	--_ui5_side_navigation_phone_border_radius: 0.5rem;
-	--_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor);
-	--_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
-	--_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2);
 	--_ui5_side_navigation_triangle_display: none;
 	--_ui5_side_navigation_phone_width: 100% !important;
 

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

@@ -6,11 +6,6 @@
 
 	--_ui5_side_navigation_navigation_separator_height:  0.0625rem;
 	--_ui5_side_navigation_border_right: 0;
-	--_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0;
-	--_ui5_side_navigation_phone_border_radius: 0.5rem;
-	--_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor);
-	--_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
-	--_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2);
 	--_ui5_side_navigation_triangle_display: none;
 	--_ui5_side_navigation_phone_width: 100% !important;
 

packages/website/docs/_samples/fiori/SideNavigation/ToolLayout/main.css

@@ -1,5 +1,9 @@
 ui5-side-navigation {
     height: 600px;
+    border-radius: 0.5rem 0.5rem 0 0;
+    box-shadow:
+        0 0 0.125rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent),
+        0 0.5rem 1rem 0 color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
 }
 
 ui5-shellbar::part(root) {