From a102cdf4e736784a796b17994d627dd69bc5dcaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Janiczko?= Date: Wed, 23 Feb 2022 14:02:44 +0100 Subject: [PATCH] feat(help): describe component using design tokens --- src/components/help/help.style.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/help/help.style.js b/src/components/help/help.style.js index bd0dbf704f..22c9f99ffa 100644 --- 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}