fix(ui5-link): enable overstyling (#5366)

fixes: #5267 #5218

Author: tsanislavgatev

packages/main/src/themes/Link.css

@@ -55,17 +55,14 @@
 	word-wrap: normal;
 	outline: none;
 	text-decoration: inherit;
+	color: inherit;
 }
 
 :host(:active) .ui5-link-root {
 	color: var(--sapLink_Active_Color);
 	text-decoration: var(--_ui5_link_active_text_decoration);
 }
 
-.ui5-link-root:visited {
-	color: var(--sapLink_Visited_Color);
-}
-
 :host .ui5-link-root {
 	border: var(--_ui5_link_border);
 	border-radius: var(--_ui5_link_focus_border-radius);
@@ -81,14 +78,15 @@
 	text-shadow: none;
 }
 
-:host(:hover),
-:host(:hover) .ui5-link-root {
+:host(:hover) {
 	color: var(--sapLink_Hover_Color);
 	text-decoration: var(--_ui5_link_hover_text_decoration);
 }
 
-:host([focused]:hover),
+:host([focused]:hover) {
+	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
+}
+
 :host([focused]:hover) .ui5-link-root {
 	color: var(--_ui5_link_focused_hover_text_color);
-	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }

packages/main/test/pages/Link.html

@@ -49,6 +49,11 @@ <h2>prevent-default</h2>
 		<ui5-link href="https://www.google.com" target="_self" id="link-click-prevent-default">link click default prevented</ui5-link><span>native span</span>
 	</section>
 
+	<section class="group">
+		<h2>overstyle-link</h2>
+		<ui5-link href="https://www.google.com" target="_self" style="color: pink">link with different color</ui5-link><span>native span</span>
+	</section>
+
 	<section class="group">
 		<h2>Disabled link</h2>
 		<ui5-link href="https://www.google.com" target="_blank" id="disabled-link" disabled>Disabled link</ui5-link>