feat(help): describe component using design tokens

Sage · Feb 23, 2022 · a102cdf · a102cdf
1 parent 424b0c2
commit a102cdf
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/components/help/help.style.js b/src/components/help/help.style.js
@@ -5,7 +5,6 @@ import StyledIcon from "../icon/icon.style";
 
 const StyledHelp = styled.div`
   background: none;
-  color: ${({ theme }) => theme.help.color};
   cursor: default;
   border: none;
   outline: none;
@@ -17,20 +16,24 @@ const StyledHelp = styled.div`
   margin-top: 0;
   text-decoration: none;
 
+  ${StyledIcon} {
+    color: var(--colorsUtilityYin065);
+  }
+
   ${({ href }) =>
     href &&
     css`
       cursor: pointer;
     `}
 
-  &:focus,
-  &:hover {
-    color: ${({ theme }) => theme.help.hover};
+  &:focus ${StyledIcon},
+  &:hover ${StyledIcon} {
+    color: var(--colorsUtilityYin090);
     text-decoration: none;
   }
 
   &:focus ${StyledIcon} {
-    outline: ${({ theme }) => `2px solid ${theme.colors.focus}`};
+    outline: 2px solid var(--colorsSemanticFocus500);
   }
 
   ${margin}