feat(odyssey-react): add :focus state to Link

okta · Mar 8, 2022 · 28cf97f · 28cf97f
1 parent 8f29d89
commit 28cf97f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/odyssey-react/src/components/Link/Link.module.scss b/packages/odyssey-react/src/components/Link/Link.module.scss
@@ -11,6 +11,8 @@
  */
 
 .root {
+  @include border-radius(var(--BorderRadius));
+
   color: var(--TextColor);
   text-decoration: none;
 
@@ -19,6 +21,13 @@
     text-decoration: underline;
   }
 
+  &:focus {
+    outline-color: var(--FocusOutlineColor);
+    outline-offset: var(--FocusOutlineOffset);
+    outline-style: var(--FocusOutlineStyle);
+    outline-width: var(--FocusOutlineWidth);
+  }
+
   &:visited {
     color: var(--TextColor);
   }

diff --git a/packages/odyssey-react/src/components/Link/Link.theme.ts b/packages/odyssey-react/src/components/Link/Link.theme.ts
@@ -13,12 +13,20 @@
 import type { ThemeReducer } from "@okta/odyssey-react-theme";
 
 export const theme: ThemeReducer = (theme) => ({
+  BorderRadius: theme.BorderRadiusBase,
+
   // Primary Variant
   TextColor: theme.ColorTextPrimary,
 
   // Secondary Variant
   SecondaryTextColor: theme.ColorTextBody,
 
+  // Focus
+  FocusOutlineColor: theme.FocusOutlineColorPrimary,
+  FocusOutlineOffset: theme.FocusOutlineOffsetBase,
+  FocusOutlineStyle: theme.FocusOutlineStyle,
+  FocusOutlineWidth: theme.FocusOutlineWidthTight,
+
   // Space
   IndicatorMarginInlineStart: theme.SpaceScale1,
   IconMarginInlineEnd: theme.SpaceScale1,