SONAR-20852 Fix StandoutLink external link icon color to match latest design system

Co-authored-by: Stanislav <31501873+stanislavhh@users.noreply.github.com>

diff --git a/server/sonar-web/design-system/src/components/Link.tsx b/server/sonar-web/design-system/src/components/Link.tsx
index 07d743a85aa6ebfab8a87472e724b415306b4bc2..47177ca0f546f5e5e324b420db8d9291df561435 100644 (file)
--- a/server/sonar-web/design-system/src/components/Link.tsx
+++ b/server/sonar-web/design-system/src/components/Link.tsx
@@ -93,7 +93,7 @@ function BaseLinkWithRef(props: LinkProps, ref: React.ForwardedRef<HTMLAnchorEle
       >
         {icon}
         {children}
-        {showExternalIcon && <OpenNewTabIcon className="sw-ml-1" />}
+        {showExternalIcon && <ExternalIcon className="sw-ml-1" />}
       </a>
     );
   }
@@ -106,6 +106,10 @@ function BaseLinkWithRef(props: LinkProps, ref: React.ForwardedRef<HTMLAnchorEle
   );
 }
 
+const ExternalIcon = styled(OpenNewTabIcon)`
+  color: ${themeColor('linkExternalIcon')};
+`;
+
 export const BaseLink = React.forwardRef(BaseLinkWithRef);
 
 const StyledBaseLink = styled(BaseLink)`
@@ -123,6 +127,10 @@ const StyledBaseLink = styled(BaseLink)`
     color: var(--active);
     border-bottom: ${({ children, icon, theme }) =>
       icon && !children ? themeBorder('default', 'transparent')({ theme }) : 'var(--borderActive)'};
+
+    ${ExternalIcon} {
+      color: ${themeColor('linkExternalIconActive')};
+    }
   }
 
   & > svg {

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index 31cbc743bb5cb9b39d9d3433595cd5062ee10662..ed9ed6e68adfbfb6181c3a884218538c36b5d969 100644 (file)
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -335,6 +335,8 @@ export const lightTheme = {
     linkTooltipDefault: COLORS.indigo[200],
     linkTooltipActive: COLORS.indigo[100],
     linkBorder: COLORS.indigo[300],
+    linkExternalIcon: COLORS.indigo[300],
+    linkExternalIconActive: COLORS.indigo[400],
     contentLinkBorder: COLORS.blueGrey[200],
 
     // discreet select