fix(ai-label): React & WC link colors (#21991)

devadula-nandan · web-flow · commit 5bc862303824 · 2026-04-23T08:16:17.000Z
* fix: link colors in ai-label

* chore: add example links in stories
diff --git a/packages/react/src/components/AILabel/AILabel.stories.js b/packages/react/src/components/AILabel/AILabel.stories.js
@@ -12,6 +12,7 @@ import { action } from 'storybook/actions';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import Button from '../Button';
 import { IconButton } from '../IconButton';
+import { Link } from '../Link';
 import mdx from './AILabel.mdx';
 import './ailabel-story.scss';
 
@@ -136,6 +137,8 @@ export const Default = (args) => {
       <hr />
       <p className="secondary">Model type</p>
       <p className="bold">Foundation model</p>
+      <a href="#">normal link</a>
+      <Link href="#">cds link</Link>
     </div>
   );
 
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
@@ -13,6 +13,7 @@
 @use '../../type' as *;
 @use '../../utilities/ai-gradient' as *;
 @use '../../utilities/convert';
+@use '../../utilities/custom-property';
 @use '../toggletip';
 @use '../popover';
 
@@ -1061,6 +1062,13 @@ $sizes: (
     // This sets the max size to the size of the action bar with 3 buttons
     padding-block: convert.to-rem(24px) convert.to-rem(80px);
     padding-inline: convert.to-rem(24px);
+
+    // Reset the custom properties of the link styles to initial for AI-label and slug. as the AI-label uses gradient backgrounds.
+    @include custom-property.declaration('button-focus-color', initial);
+    @include custom-property.declaration('link-text-color', initial);
+    @include custom-property.declaration('link-hover-text-color', initial);
+    @include custom-property.declaration('link-visited-text-color', initial);
+    @include custom-property.declaration('link-focus-text-color', initial);
   }
 
   .#{$prefix}--ai-label
diff --git a/packages/web-components/src/components/ai-label/ai-label.stories.ts b/packages/web-components/src/components/ai-label/ai-label.stories.ts
@@ -62,6 +62,8 @@ const content = html`
     <hr />
     <p class="secondary">Model type</p>
     <p class="bold">Foundation model</p>
+    <a href="#">normal link</a>
+    <cds-link href="#">cds link</cds-link>
   </div>
 `;
 
