fix(ui-link): fix Link outline styles and overrides

The issue was that View's CSS specificity was higher, so it took precedence over Link's own styles.
This fix increases specificity higher and adds an example to test it

Fixes INSTUI-4854

Author: matyasf

packages/ui-link/src/Link/README.md

@@ -10,15 +10,23 @@ describes: Link
 ---
 type: example
 ---
-<Text>The quick brown fox <Link href="https://instructure.github.io/instructure-ui/">jumps</Link> over the lazy dog.</Text>
+  <div>
+<Text>The quick brown fox <Link href="https://instructure.github.io/instructure-ui/"
+                                themeOverride={{
+                                  focusOutlineColor: 'pink'
+                                }}>jumps</Link> over the lazy dog.</Text>
+<Link color="link-inverse" href="https://instructure.github.io/instructure-ui/">jumps</Link>
+</div>
 ```
 
 ```js
 ---
 type: example
 ---
 <View background="primary-inverse" as="div">
-  <Text color="primary-inverse">The quick brown fox <Link color="link-inverse" href="https://instructure.github.io/instructure-ui/">jumps</Link> over the lazy dog.</Text>
+  <Text color="primary-inverse">The quick brown fox <Link color="link-inverse" href="https://instructure.github.io/instructure-ui/" themeOverride={{
+    focusInverseIconOutlineColor: 'pink'
+  }}>jumps</Link> over the lazy dog.</Text>
 </View>
 ```
 
@@ -154,6 +162,57 @@ type: example
 </div>
 ```
 
+### Theme overrides
+
+Examples showing how theme overrides work for Link:
+
+```js
+---
+type: example
+---
+<div>
+  <Text>The quick brown fox <Link
+    href="https://instructure.github.io/instructure-ui/"
+    themeOverride={{
+      focusOutlineWidth: '0.5rem',
+      focusOutlineStyle: 'dashed',
+      focusOutlineBorderRadius: '0',
+      focusOutlineColor: 'pink'
+    }}>jumps</Link> over the lazy dog.
+  </Text>
+</div>
+```
+
+```js
+---
+type: example
+---
+<View background="primary-inverse" as="div">
+  <Text color="primary-inverse">The quick brown fox <Link
+    color="link-inverse"
+    href="https://instructure.github.io/instructure-ui/"
+    themeOverride={{
+      focusOutlineWidth: '0.5rem',
+      focusOutlineStyle: 'dashed',
+      focusOutlineBorderRadius: '0',
+      focusInverseOutlineColor: 'green'
+  }}
+  >jumps</Link> over the lazy dog.</Text>
+  <br />
+  <Text color="primary-inverse">The quick brown fox <Link
+    color="link-inverse"
+    href="https://instructure.github.io/instructure-ui/"
+    renderIcon={<IconUserLine />}
+    themeOverride={{
+      focusOutlineWidth: '0.5rem',
+      focusOutlineStyle: 'dashed',
+      focusOutlineBorderRadius: '0',
+      focusInverseIconOutlineColor: 'red'
+  }}
+  >jumps</Link> over the lazy dog.</Text>
+</View>
+```
+
 ### Guidelines
 
 ```js

packages/ui-link/src/Link/styles.ts

@@ -80,12 +80,8 @@ const generateStyle = (
     fontWeight: componentTheme.fontWeight,
     transition: 'outline-color 0.2s',
     verticalAlign: 'baseline',
-
     // set up focus styles
     outlineColor: 'transparent',
-    outlineWidth: componentTheme.focusOutlineWidth,
-    outlineStyle: componentTheme.focusOutlineStyle,
-    borderRadius: componentTheme.focusOutlineBorderRadius,
     outlineOffset: '0.25rem',
     textUnderlineOffset: componentTheme.textUnderlineOffset,
 
@@ -96,7 +92,10 @@ const generateStyle = (
         alignItems: 'center'
       }),
 
-    '&:focus': {
+    '&&&&&&:focus': {
+      outlineWidth: componentTheme.focusOutlineWidth,
+      outlineStyle: componentTheme.focusOutlineStyle,
+      borderRadius: componentTheme.focusOutlineBorderRadius,
       outlineColor: componentTheme.focusOutlineColor
     },
     '&[aria-disabled]': {
@@ -114,7 +113,8 @@ const generateStyle = (
     ...baseStyles,
     cursor: 'pointer',
     color: componentTheme.color,
-    '&:focus': {
+    // This needs stronger specificity than `View`
+    '&&&&&:focus': {
       color: componentTheme.color,
       outlineColor: componentTheme.focusOutlineColor
     },
@@ -147,10 +147,15 @@ const generateStyle = (
 
   const inverseStyles = {
     color: componentTheme.colorInverse,
-    '&:focus': {
-      outlineColor: componentTheme.focusInverseIconOutlineColor
+    '&&&&&:focus': {
+      outlineColor: componentTheme.focusInverseOutlineColor
     },
-    '&:hover, &:focus, &:active': {
+    ...(renderIcon && {
+      '&&&&&:focus': {
+        outlineColor: componentTheme.focusInverseIconOutlineColor
+      }
+    }),
+    '&:hover, &&&&&:focus, &:active': {
       color: componentTheme.colorInverse
     }
   }