fix: link color in simple menu (#1965)

<!--
Hello 👋 Thank you for submitting a pull request.

To help us merge your PR, make sure to follow the instructions below:

- Create or update the tests
- Create or update the documentation at
https://github.com/strapi/documentation
- Refer to the issue you are closing in the PR description: Fix #issue
- Specify if the PR is ready to be merged or work in progress (by
opening a draft PR)

Please ensure you read the Contributing Guide:
https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md
-->

### What does it do?

Fixes the link color (text and icon) in simple menu by adding color and
active color props (default to the existing color) to the Link
component. No breaking changes.

### Why is it needed?


#1934 (comment)

### How to test it?

Provide information about the environment and the path to verify the
behaviour.

### Related issue(s)/PR(s)

Let us know if this is related to any issue/pull request


<img width="627" height="730" alt="Screenshot 2025-10-13 at 15 40 05"
src="https://github.com/user-attachments/assets/c92f1a36-9ca0-4bac-80a0-5e504c0aa1d4"
/>

Author: HichamELBSI

.changeset/tricky-dolphins-hunt.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+fix: link color (icon + text) in simple menu

docs/stories/SimpleMenu.stories.tsx

@@ -50,7 +50,7 @@ export const WithLinks = {
       <MenuItem href="/" isLink>
         Home
       </MenuItem>
-      <MenuItem href="/accounts" isLink>
+      <MenuItem href="/accounts" startIcon={<Bell />} isLink disabled>
         Accounts
       </MenuItem>
       <MenuItem href="https://strapi.io/" isExternal>

packages/design-system/src/components/Link/Link.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ExternalLink } from '@strapi/icons';
-import { styled } from 'styled-components';
+import { styled, type DefaultTheme } from 'styled-components';
 
 import { Typography } from '../../primitives/Typography';
 import { focus } from '../../styles/buttons';
@@ -16,27 +16,56 @@ type LinkProps<C extends React.ElementType = 'a'> = BaseLinkProps<C> & {
    * @default false
    */
   isExternal?: boolean;
+  /**
+   * @default primary600
+   */
+  color?: keyof DefaultTheme['colors'];
+  /**
+   * @default primary700
+   */
+  activeColor?: keyof DefaultTheme['colors'];
 };
 
 const Link = forwardRef(
   <C extends React.ElementType = 'a'>(
-    { children, href, disabled = false, startIcon, endIcon, isExternal = false, ...props }: LinkProps<C>,
+    {
+      children,
+      href,
+      disabled = false,
+      startIcon,
+      endIcon,
+      isExternal = false,
+      color = 'primary600',
+      activeColor = 'primary700',
+      ...props
+    }: LinkProps<C>,
     ref: PolymorphicRef<C>,
   ) => {
     return (
-      <LinkWrapper ref={ref} href={href} disabled={disabled} isExternal={isExternal} {...props}>
+      <LinkWrapper
+        ref={ref}
+        href={href}
+        disabled={disabled}
+        isExternal={isExternal}
+        $activeColor={activeColor}
+        $color={color}
+        {...props}
+      >
         {startIcon}
-        <Typography textColor={disabled ? 'neutral600' : 'primary600'}>{children}</Typography>
+        <Typography textColor={disabled ? 'neutral600' : color}>{children}</Typography>
         {endIcon}
-        {href && !endIcon && isExternal && <ExternalLink />}
+        {href && !endIcon && isExternal && <ExternalLink fill={color} />}
       </LinkWrapper>
     );
   },
 );
 
 type LinkComponent<C extends React.ElementType = 'a'> = (props: LinkProps<C>) => React.ReactNode;
 
-const LinkWrapper = styled<BaseLinkComponent>(BaseLink)`
+const LinkWrapper = styled<BaseLinkComponent>(BaseLink)<{
+  $color?: keyof DefaultTheme['colors'];
+  $activeColor?: keyof DefaultTheme['colors'];
+}>`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -47,22 +76,23 @@ const LinkWrapper = styled<BaseLinkComponent>(BaseLink)`
     font-size: 1rem;
 
     path {
-      fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};
+      fill: ${({ disabled, $color, theme }) =>
+        disabled ? theme.colors.neutral600 : theme.colors[$color || 'primary600']};
     }
   }
 
   &:hover {
     & > span {
-      color: ${({ theme }) => theme.colors.primary500};
+      color: ${({ theme, $color }) => theme.colors[$color || 'primary600']};
     }
 
     svg path {
-      fill: ${({ theme }) => theme.colors.primary500};
+      fill: ${({ theme, $color }) => theme.colors[$color || 'primary600']};
     }
   }
 
   &:active {
-    color: ${({ theme }) => theme.colors.primary700};
+    color: ${({ theme, $activeColor }) => theme.colors[$activeColor || 'primary700']};
   }
 
   ${focus};

packages/design-system/src/components/SimpleMenu/Menu.tsx

@@ -252,6 +252,8 @@ const getOptionStyle = ({ theme, $variant }: { theme: DefaultTheme; $variant: It
       content: none;
     }
   }
+
+  color: ${theme.colors[getTextColor($variant, false)]};
 `;
 
 const OptionButton = styled<FlexComponent<'button' | 'a'>>(Flex)<{ $variant: ItemVariant }>`
@@ -265,12 +267,26 @@ const OptionLink = styled(Link)<{ $variant: ItemVariant }>`
 
   &:hover {
     color: unset;
+
+    > svg {
+      path {
+        fill: ${({ theme, $variant }) => theme.colors[getIconColor($variant, false)]};
+      }
+    }
   }
+  > svg {
+    path {
+      fill: ${({ theme, $variant }) => theme.colors[getIconColor($variant, false)]};
+    }
+  }
+  &[aria-disabled='true'] {
+    pointer-events: none;
 
-  /* TODO: do we need this? */
-  svg > path,
-  &:focus-visible svg > path {
-    fill: currentColor;
+    > svg {
+      path {
+        fill: ${({ theme, $variant }) => theme.colors[getIconColor($variant, true)]};
+      }
+    }
   }
 
   ${({ theme, $variant }) => getOptionStyle({ theme, $variant })}