@redocly/theme 0.65.0-next.2 → 0.65.0-next.3

package/lib/components/Banner/Banner.js

@@ -128,7 +128,7 @@ function Banner({ className }) {
         return null;
     }
     return (react_1.default.createElement(BannerWrapper, { ref: bannerRef, "data-component-name": "Banner/Banner", className: className, "$color": displayBanner.color, "$isVisible": isVisible },
-        react_1.default.createElement(BannerContent, null,
+        react_1.default.createElement(BannerContent, { "$color": displayBanner.color },
             react_1.default.createElement(contexts_1.MarkdownLinkContext.Provider, { value: markdownLinkContextValue },
                 react_1.default.createElement(Markdown_1.Markdown, { compact: true }, markdownContent))),
         displayBanner.dismissible && (react_1.default.createElement(DismissButton, { variant: "ghost", size: "var(--banner-button-size)", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { color: `var(--banner-${displayBanner.color}-icon-color)`, size: "16px" }), onClick: () => {
@@ -149,7 +149,15 @@ const BannerContent = styled_components_1.default.div `
 
     a:not([role='button']) {
       color: var(--banner-link-color);
-      text-decoration: var(--banner-link-decoration);
+      text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration)`};
+
+      &:hover, &:focus {
+        text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration-hover)`};
+      }
+
+      &:visited {
+        text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration)`};
+      }
     }
 
     [data-component-name='Button/Button'] {

package/lib/components/Banner/variables.js

@@ -19,7 +19,6 @@ exports.banner = (0, styled_components_1.css) `
   --banner-button-icon-right-padding: 1px 10px 1px var(--spacing-sm); // @presenter Spacing
   --banner-button-margin: 0 var(--spacing-xs); // @presenter Spacing
   --banner-padding: var(--spacing-xs); // @presenter Spacing
-  --banner-link-decoration: var(--link-decoration-hover);
   --banner-min-height: 38px;
   --banner-gap: var(--spacing-xxs); // @presenter Spacing
 
@@ -27,20 +26,28 @@ exports.banner = (0, styled_components_1.css) `
   --banner-info-text-color: var(--color-static-white); // @presenter Color
   --banner-info-icon-color: var(--color-static-white); // @presenter Color
   --banner-info-link-color: var(--banner-info-text-color); // @presenter Color
+  --banner-info-link-decoration: underline 1px var(--banner-info-link-color);
+  --banner-info-link-decoration-hover: underline 2px var(--banner-info-link-color);
 
   --banner-success-bg-color: var(--color-success-base); // @presenter Color
   --banner-success-text-color: var(--color-static-white); // @presenter Color
   --banner-success-icon-color: var(--color-static-white); // @presenter Color
   --banner-success-link-color: var(--banner-success-text-color); // @presenter Color
+  --banner-success-link-decoration: underline 1px var(--banner-success-link-color);
+  --banner-success-link-decoration-hover: underline 2px var(--banner-success-link-color);
 
   --banner-warning-bg-color: var(--color-warning-base); // @presenter Color
   --banner-warning-text-color: var(--color-black); // @presenter Color
   --banner-warning-icon-color: var(--color-black); // @presenter Color
   --banner-warning-link-color: var(--banner-warning-text-color); // @presenter Color
+  --banner-warning-link-decoration: underline 1px var(--banner-warning-link-color);
+  --banner-warning-link-decoration-hover: underline 2px var(--banner-warning-link-color);
 
   --banner-error-bg-color: var(--color-error-base); // @presenter Color
   --banner-error-text-color: var(--color-static-white); // @presenter Color
   --banner-error-icon-color: var(--color-static-white); // @presenter Color
   --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
+  --banner-error-link-decoration: underline 1px var(--banner-error-link-color);
+  --banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Markdown/styles/links.js

@@ -5,12 +5,13 @@ const styled_components_1 = require("styled-components");
 exports.markdownLinksCss = (0, styled_components_1.css) `
   a:not([role='button']) {
     text-decoration: var(--link-decoration);
+    text-underline-offset: var(--link-underline-offset);
     color: var(--link-color-primary);
     font-weight: var(--link-font-weight);
 
     &:visited {
       color: var(--link-color-visited);
-      text-decoration: var(--link-visited-decoration);
+      text-decoration: var(--link-decoration-visited);
     }
 
     &:hover,

package/lib/components/PageActions/PageActions.js

@@ -112,6 +112,7 @@ const PageActionsWrapper = styled_components_1.default.div `
 `;
 const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
+  --link-decoration: none;
   --link-decoration-hover: none;
 `;
 const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `

package/lib/core/styles/dark.js

@@ -291,10 +291,10 @@ exports.darkMode = (0, styled_components_1.css) `
   * @tokens Links
   */
 
-  --link-color-primary: var(--color-blue-7); // @presenter Color
-  --link-color-primary-hover: var(--color-blue-8); // @presenter Color
+  --link-color-primary: var(--link-color-primary-palette, var(--link-color-primary-legacy)); // @presenter Color
+  --link-color-primary-hover: var(--link-color-primary-palette, var(--link-color-primary-hover-legacy)); // @presenter Color
   --link-color-inverse: var(--color-blue-6); // @presenter Color
-  --link-color-visited: var(--color-purple-8); // @presenter Color
+  --link-color-visited: var(--link-color-primary-palette, var(--link-color-visited-legacy)); // @presenter Color
 
   /**
   * @tokens Tab Colors

package/lib/core/styles/global.js

@@ -567,18 +567,19 @@ const links = (0, styled_components_1.css) `
     * @tokens Links
     */
 
-  --link-color-primary: var(--color-blue-6); // @presenter Color
-  --link-decoration: none;
-  --link-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --link-color-primary: var(--link-color-primary-palette, var(--link-color-primary-legacy)); // @presenter Color
+  --link-decoration: underline 1px var(--color-primary-base, var(--link-color-primary-legacy));
+  --link-underline-offset: 4px;
+  --link-font-weight: var(--font-weight-medium); // @presenter FontWeight
 
-  --link-color-primary-hover: var(--color-blue-7); // @presenter Color
-  --link-color-primary-pressed: var(--color-blue-8);
-  --link-decoration-hover: underline;
+  --link-color-primary-hover: var(--link-color-primary-palette, var(--link-color-primary-hover-legacy)); // @presenter Color
+  --link-color-primary-pressed: var(--link-color-primary-palette, var(--link-color-primary-pressed-legacy));
+  --link-decoration-hover: underline 2px var(--color-primary-base, var(--link-color-primary-hover-legacy));
 
   --link-color-inverse: var(--color-blue-5); // @presenter Color
 
-  --link-color-visited: var(--color-purple-7); // @presenter Color
-  --link-visited-decoration: none;
+  --link-color-visited: var(--link-color-primary-palette, var(--link-color-visited-legacy)); // @presenter Color
+  --link-decoration-visited: underline 1px var(--color-primary-base, var(--link-color-visited-legacy));
 
   // @tokens End
 `;

package/lib/core/styles/palette.dark.js

@@ -194,6 +194,10 @@ function brandPaletteDark(palette) {
         --admonition-default-border-color-legacy: var(--color-warm-grey-5);
 
         --code-block-highlighted-bg-color-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent); 
+        
+        --link-color-primary-legacy: var(--color-blue-7);
+        --link-color-primary-hover-legacy: var(--color-blue-8);
+        --link-color-visited-legacy: var(--color-purple-8);
       `;
     }
 }

package/lib/core/styles/palette.js

@@ -18,6 +18,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #555761; // @presenter Color
         --color-brand-11: #6e6f7a; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'pink':
             return (0, styled_components_1.css) `
@@ -33,6 +35,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #6a3055; // @presenter Color
         --color-brand-11: #4f2841; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'coral':
             return (0, styled_components_1.css) `
@@ -48,6 +52,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #6d3338; // @presenter Color
         --color-brand-11: #4f282b; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'amber':
             return (0, styled_components_1.css) `
@@ -63,6 +69,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #71512e; // @presenter Color
         --color-brand-11: #4f3c28; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'jade':
             return (0, styled_components_1.css) `
@@ -78,6 +86,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #2a6052; // @presenter Color
         --color-brand-11: #284f45; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'cyan':
             return (0, styled_components_1.css) `
@@ -93,6 +103,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #285c67; // @presenter Color
         --color-brand-11: #28484f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'ocean':
             return (0, styled_components_1.css) `
@@ -108,6 +120,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #2d5472; // @presenter Color
         --color-brand-11: #283e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'indigo':
             return (0, styled_components_1.css) `
@@ -123,6 +137,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #303e6b; // @presenter Color
         --color-brand-11: #28314f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'iris':
             return (0, styled_components_1.css) `
@@ -138,6 +154,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #3a3a6a; // @presenter Color
         --color-brand-11: #2e2e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         default:
             return (0, styled_components_1.css) `
@@ -179,6 +197,11 @@ function brandPaletteLight(palette) {
         --button-content-color-link-legacy: var(--link-color-primary); // @presenter Color
         --button-content-color-link-hover-legacy: var(--link-color-primary-hover); // @presenter Color
         --button-content-color-link-pressed-legacy: var(--link-color-primary-pressed); // @presenter Color
+
+        --link-color-primary-legacy: var(--color-blue-6); // @presenter Color
+        --link-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
+        --link-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
+        --link-color-visited-legacy: var(--color-purple-7); // @presenter Color
       `;
     }
 }

package/lib/markdoc/components/Cards/Card.js

@@ -98,6 +98,7 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
   text-decoration: none;
   --md-paragraph-margin: 0;
   --link-decoration-hover: none;
+  --link-decoration: none;
 
   background-color: var(--card-bg-color);
   border-width: var(--card-border-width);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.65.0-next.2",
+  "version": "0.65.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Banner/Banner.tsx

@@ -138,7 +138,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
       $color={displayBanner.color}
       $isVisible={isVisible}
     >
-      <BannerContent>
+      <BannerContent $color={displayBanner.color}>
         <MarkdownLinkContext.Provider value={markdownLinkContextValue}>
           <Markdown compact>{markdownContent}</Markdown>
         </MarkdownLinkContext.Provider>
@@ -159,7 +159,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
   );
 }
 
-const BannerContent = styled.div`
+const BannerContent = styled.div<{ $color: DisplayBanner['color'] }>`
   flex: 1;
   display: flex;
   align-items: center;
@@ -172,7 +172,15 @@ const BannerContent = styled.div`
 
     a:not([role='button']) {
       color: var(--banner-link-color);
-      text-decoration: var(--banner-link-decoration);
+      text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration)`};
+
+      &:hover, &:focus {
+        text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration-hover)`};
+      }
+
+      &:visited {
+        text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration)`};
+      }
     }
 
     [data-component-name='Button/Button'] {

package/src/components/Banner/variables.ts

@@ -17,7 +17,6 @@ export const banner = css`
   --banner-button-icon-right-padding: 1px 10px 1px var(--spacing-sm); // @presenter Spacing
   --banner-button-margin: 0 var(--spacing-xs); // @presenter Spacing
   --banner-padding: var(--spacing-xs); // @presenter Spacing
-  --banner-link-decoration: var(--link-decoration-hover);
   --banner-min-height: 38px;
   --banner-gap: var(--spacing-xxs); // @presenter Spacing
 
@@ -25,20 +24,28 @@ export const banner = css`
   --banner-info-text-color: var(--color-static-white); // @presenter Color
   --banner-info-icon-color: var(--color-static-white); // @presenter Color
   --banner-info-link-color: var(--banner-info-text-color); // @presenter Color
+  --banner-info-link-decoration: underline 1px var(--banner-info-link-color);
+  --banner-info-link-decoration-hover: underline 2px var(--banner-info-link-color);
 
   --banner-success-bg-color: var(--color-success-base); // @presenter Color
   --banner-success-text-color: var(--color-static-white); // @presenter Color
   --banner-success-icon-color: var(--color-static-white); // @presenter Color
   --banner-success-link-color: var(--banner-success-text-color); // @presenter Color
+  --banner-success-link-decoration: underline 1px var(--banner-success-link-color);
+  --banner-success-link-decoration-hover: underline 2px var(--banner-success-link-color);
 
   --banner-warning-bg-color: var(--color-warning-base); // @presenter Color
   --banner-warning-text-color: var(--color-black); // @presenter Color
   --banner-warning-icon-color: var(--color-black); // @presenter Color
   --banner-warning-link-color: var(--banner-warning-text-color); // @presenter Color
+  --banner-warning-link-decoration: underline 1px var(--banner-warning-link-color);
+  --banner-warning-link-decoration-hover: underline 2px var(--banner-warning-link-color);
 
   --banner-error-bg-color: var(--color-error-base); // @presenter Color
   --banner-error-text-color: var(--color-static-white); // @presenter Color
   --banner-error-icon-color: var(--color-static-white); // @presenter Color
   --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
+  --banner-error-link-decoration: underline 1px var(--banner-error-link-color);
+  --banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
 `;
 

package/src/components/Markdown/styles/links.ts

@@ -3,12 +3,13 @@ import { css } from 'styled-components';
 export const markdownLinksCss = css`
   a:not([role='button']) {
     text-decoration: var(--link-decoration);
+    text-underline-offset: var(--link-underline-offset);
     color: var(--link-color-primary);
     font-weight: var(--link-font-weight);
 
     &:visited {
       color: var(--link-color-visited);
-      text-decoration: var(--link-visited-decoration);
+      text-decoration: var(--link-decoration-visited);
     }
 
     &:hover,

package/src/components/PageActions/PageActions.tsx

@@ -120,6 +120,7 @@ const PageActionsWrapper = styled.div`
 
 const LinkMenuItem = styled(Link)`
   text-decoration: none;
+  --link-decoration: none;
   --link-decoration-hover: none;
 `;
 

package/src/core/styles/dark.ts

@@ -294,10 +294,10 @@ export const darkMode = css`
   * @tokens Links
   */
 
-  --link-color-primary: var(--color-blue-7); // @presenter Color
-  --link-color-primary-hover: var(--color-blue-8); // @presenter Color
+  --link-color-primary: var(--link-color-primary-palette, var(--link-color-primary-legacy)); // @presenter Color
+  --link-color-primary-hover: var(--link-color-primary-palette, var(--link-color-primary-hover-legacy)); // @presenter Color
   --link-color-inverse: var(--color-blue-6); // @presenter Color
-  --link-color-visited: var(--color-purple-8); // @presenter Color
+  --link-color-visited: var(--link-color-primary-palette, var(--link-color-visited-legacy)); // @presenter Color
 
   /**
   * @tokens Tab Colors

package/src/core/styles/global.ts

@@ -572,18 +572,19 @@ const links = css`
     * @tokens Links
     */
 
-  --link-color-primary: var(--color-blue-6); // @presenter Color
-  --link-decoration: none;
-  --link-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --link-color-primary: var(--link-color-primary-palette, var(--link-color-primary-legacy)); // @presenter Color
+  --link-decoration: underline 1px var(--color-primary-base, var(--link-color-primary-legacy));
+  --link-underline-offset: 4px;
+  --link-font-weight: var(--font-weight-medium); // @presenter FontWeight
 
-  --link-color-primary-hover: var(--color-blue-7); // @presenter Color
-  --link-color-primary-pressed: var(--color-blue-8);
-  --link-decoration-hover: underline;
+  --link-color-primary-hover: var(--link-color-primary-palette, var(--link-color-primary-hover-legacy)); // @presenter Color
+  --link-color-primary-pressed: var(--link-color-primary-palette, var(--link-color-primary-pressed-legacy));
+  --link-decoration-hover: underline 2px var(--color-primary-base, var(--link-color-primary-hover-legacy));
 
   --link-color-inverse: var(--color-blue-5); // @presenter Color
 
-  --link-color-visited: var(--color-purple-7); // @presenter Color
-  --link-visited-decoration: none;
+  --link-color-visited: var(--link-color-primary-palette, var(--link-color-visited-legacy)); // @presenter Color
+  --link-decoration-visited: underline 1px var(--color-primary-base, var(--link-color-visited-legacy));
 
   // @tokens End
 `;

package/src/core/styles/palette.dark.ts

@@ -192,6 +192,10 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --admonition-default-border-color-legacy: var(--color-warm-grey-5);
 
         --code-block-highlighted-bg-color-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent); 
+        
+        --link-color-primary-legacy: var(--color-blue-7);
+        --link-color-primary-hover-legacy: var(--color-blue-8);
+        --link-color-visited-legacy: var(--color-purple-8);
       `;
   }
 }

package/src/core/styles/palette.ts

@@ -16,6 +16,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #555761; // @presenter Color
         --color-brand-11: #6e6f7a; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'pink':
       return css`
@@ -31,6 +33,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #6a3055; // @presenter Color
         --color-brand-11: #4f2841; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'coral':
       return css`
@@ -46,6 +50,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #6d3338; // @presenter Color
         --color-brand-11: #4f282b; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'amber':
       return css`
@@ -61,6 +67,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #71512e; // @presenter Color
         --color-brand-11: #4f3c28; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'jade':
       return css`
@@ -76,6 +84,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #2a6052; // @presenter Color
         --color-brand-11: #284f45; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'cyan':
       return css`
@@ -91,6 +101,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #285c67; // @presenter Color
         --color-brand-11: #28484f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'ocean':
       return css`
@@ -106,6 +118,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #2d5472; // @presenter Color
         --color-brand-11: #283e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'indigo':
       return css`
@@ -121,6 +135,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #303e6b; // @presenter Color
         --color-brand-11: #28314f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     case 'iris':
       return css`
@@ -136,6 +152,8 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #3a3a6a; // @presenter Color
         --color-brand-11: #2e2e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
     default:
       return css`
@@ -177,6 +195,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --button-content-color-link-legacy: var(--link-color-primary); // @presenter Color
         --button-content-color-link-hover-legacy: var(--link-color-primary-hover); // @presenter Color
         --button-content-color-link-pressed-legacy: var(--link-color-primary-pressed); // @presenter Color
+
+        --link-color-primary-legacy: var(--color-blue-6); // @presenter Color
+        --link-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
+        --link-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
+        --link-color-visited-legacy: var(--color-purple-7); // @presenter Color
       `;
   }
 }

package/src/markdoc/components/Cards/Card.tsx

@@ -170,6 +170,7 @@ const CardWrapper = styled.div.attrs<{
   text-decoration: none;
   --md-paragraph-margin: 0;
   --link-decoration-hover: none;
+  --link-decoration: none;
 
   background-color: var(--card-bg-color);
   border-width: var(--card-border-width);