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

package/lib/core/styles/palette.js

@@ -18,6 +18,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-10); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-7); // @presenter Color
       `;
         case 'pink':
             return (0, styled_components_1.css) `
@@ -33,6 +38,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-7); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
         case 'coral':
             return (0, styled_components_1.css) `
@@ -48,6 +58,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
         case 'amber':
             return (0, styled_components_1.css) `
@@ -63,6 +78,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-7); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
         case 'jade':
             return (0, styled_components_1.css) `
@@ -78,6 +98,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-5); // @presenter Color
       `;
         case 'cyan':
             return (0, styled_components_1.css) `
@@ -93,6 +118,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
         case 'ocean':
             return (0, styled_components_1.css) `
@@ -108,6 +138,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
         case 'indigo':
             return (0, styled_components_1.css) `
@@ -123,6 +158,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
         case 'iris':
             return (0, styled_components_1.css) `
@@ -138,6 +178,11 @@ 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
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
         default:
             return (0, styled_components_1.css) `
@@ -179,6 +224,14 @@ 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
+
+        --search-ai-gradient-start-color-legacy: #715efe; // @presenter Color
+        --search-ai-gradient-end-color-legacy: #ff5cdc; // @presenter Color
       `;
     }
 }

package/lib/icons/AiStarsGradientIcon/AiStarsGradientIcon.js

@@ -68,8 +68,8 @@ const Icon = (props) => {
     return (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
         !isColorOverridden && (react_1.default.createElement("defs", null,
             react_1.default.createElement("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "1", y2: "0" },
-                react_1.default.createElement("stop", { offset: "0%", stopColor: "#715efe" }),
-                react_1.default.createElement("stop", { offset: "100%", stopColor: "#ff5cdc" })))),
+                react_1.default.createElement("stop", { offset: "0%", stopColor: "var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy))" }),
+                react_1.default.createElement("stop", { offset: "100%", stopColor: "var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy))" })))),
         react_1.default.createElement("path", { d: "M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z", fill: fill }),
         react_1.default.createElement("path", { d: "M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z", fill: fill })));
 };

package/lib/layouts/CodeWalkthroughLayout.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeWalkthroughLayout = CodeWalkthroughLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../core/constants");
 const utils_1 = require("../core/utils");
 function CodeWalkthroughLayout({ className, children, }) {
     return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/CodeWalkthroughLayout", className: className },
@@ -66,7 +67,8 @@ const ContentWrapper = styled_components_1.default.section `
       margin-right: auto;
     }
 
-    &:first-child > h1:first-child {
+    &:first-child > h1:first-child,
+    &:first-child > .${constants_1.H1_CLASS}:first-child {
       // disable margin top for h1 on the title heading
       margin-top: 0;
     }

package/lib/layouts/DocumentationLayout.js

@@ -7,6 +7,7 @@ exports.DocumentationLayout = DocumentationLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../core/utils");
+const constants_1 = require("../core/constants");
 const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
 const DocumentationLayoutTop_1 = require("../layouts/DocumentationLayoutTop");
 const DocumentationLayoutBottom_1 = require("../layouts/DocumentationLayoutBottom");
@@ -41,7 +42,8 @@ const ContentWrapper = styled_components_1.default.section `
 
   padding: var(--md-content-padding);
 
-  article:first-child > h1:first-child {
+  article:first-child > h1:first-child,
+  article:first-child > .${constants_1.H1_CLASS}:first-child {
     // disable margin top for h1 on the title heading
     margin-top: 0;
   }

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/lib/markdoc/components/Heading/Heading.js

@@ -45,6 +45,7 @@ const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const PageActions_1 = require("../../../components/PageActions/PageActions");
 const hooks_1 = require("../../../core/hooks");
+const constants_1 = require("../../../core/constants");
 function renderWithSpanWrapper(children) {
     const childrenArray = react_1.default.Children.toArray(children);
     if (childrenArray.length === 0)
@@ -65,47 +66,34 @@ function renderWithSpanWrapper(children) {
         middleChildren.length > 0 && react_1.default.createElement(StyledHeadingText, null, middleChildren),
         isImage(last) && last));
 }
-/**
- * Class name for all MD tags
- */
-const mdClassName = 'md';
 function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }) {
     var _a, _b;
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { usePageProps } = (0, hooks_1.useThemeHooks)();
     const pageProps = usePageProps();
     const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';
-    const linkEl = (react_1.default.createElement("a", { "aria-label": `link  to ${id}`, href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
-        react_1.default.createElement(LinkIcon_1.LinkIcon, { color: "--heading-anchor-color" })));
-    return (0, react_1.createElement)(`h${level}`, {
-        id,
-        className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName, className),
-        'data-component-name': 'Markdoc/Heading/Heading',
-        'data-source': dataSource,
-        'data-hash': dataHash,
-    }, react_1.default.createElement(HeadingContentWrapper, null,
-        linkEl,
-        react_1.default.createElement("span", null, renderWithSpanWrapper(children)),
-        isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null));
+    const headingTextId = `${id}-heading-text`;
+    const linkEl = (react_1.default.createElement("a", { "aria-labelledby": headingTextId, href: `#${id}`, className: (0, utils_1.concatClassNames)(constants_1.ANCHOR_CLASS, 'before') },
+        react_1.default.createElement(LinkIcon_1.LinkIcon, { "aria-hidden": "true", focusable: "false", color: "--heading-anchor-color" })));
+    const headingText = (0, react_1.createElement)(`h${level}`, { id: headingTextId }, renderWithSpanWrapper(children));
+    return (react_1.default.createElement("div", { id: id, className: (0, utils_1.concatClassNames)(constants_1.HEADING_ANCHOR_CLASS, constants_1.MARKDOWN_CLASS_NAME, `${constants_1.HEADING_CLASS_PREFIX}-${level}`, className), "data-component-name": "Markdoc/Heading/Heading", "data-source": dataSource, "data-hash": dataHash },
+        react_1.default.createElement(HeadingContentWrapper, null,
+            linkEl,
+            headingText,
+            isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null)));
 }
 const HeadingContentWrapper = styled_components_1.default.div `
   display: flex;
   gap: var(--spacing-xs);
 
-  & > .anchor {
+  & > .${constants_1.ANCHOR_CLASS} {
     display: flex;
     align-items: center;
     height: 1lh;
   }
 
-  & > span {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--spacing-sm);
-  }
-
   &:has([data-component-name='PageActions/PageActions']:hover) {
-    && .anchor svg {
+    && .${constants_1.ANCHOR_CLASS} svg {
       visibility: hidden;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.65.0-next.2",
+  "version": "0.65.0-next.4",
   "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/Catalog/CatalogTags.tsx

@@ -101,6 +101,7 @@ export function CatalogTags({
 const CatalogTagsWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
+  row-gap: var(--catalog-tags-row-gap);
 `;
 
 const MoreTagsButton = styled.span`

package/src/components/Catalog/variables.ts

@@ -148,6 +148,7 @@ export const catalog = css`
     */
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
+  --catalog-tags-row-gap: var(--spacing-xxs);
   --catalog-tags-placeholder-bg-color: var(--bg-color);
   --catalog-tags-not-connected-font-size: var(--font-size-base);
   --catalog-tags-not-connected-line-height: var(--line-height-base);

package/src/components/Markdown/Markdown.tsx

@@ -6,6 +6,17 @@ import { typography } from '@redocly/theme/core/utils';
 import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/base-table';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
 import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
+import {
+  ANCHOR_CLASS,
+  H1_CLASS,
+  H2_CLASS,
+  H3_CLASS,
+  H4_CLASS,
+  H5_CLASS,
+  H6_CLASS,
+  HEADING_ANCHOR_CLASS,
+  MARKDOWN_CLASS_NAME,
+} from '@redocly/theme/core/constants';
 
 export type MarkdownProps = PropsWithChildren<{
   className?: string;
@@ -66,17 +77,82 @@ export const Markdown = styled.main.attrs<{
     max-width: 100%;
   }
 
-  h1.md,
-  h2.md,
-  h3.md,
-  h4.md,
-  h5.md,
-  h6.md {
+  .${HEADING_ANCHOR_CLASS} {
     font-weight: var(--heading-font-weight);
     font-family: var(--heading-font-family);
     position: relative;
 
     scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
+    ${headingAnchorCss(ANCHOR_CLASS)};
+
+    h1, h2, h3, h4, h5, h6 {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-sm);
+      margin: 0;
+      font: inherit;
+      color: inherit;
+    }
+  }
+
+  .${H1_CLASS} {
+    ${typography('h1')};
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
+
+    h1 code {
+      font-size: var(--h1-font-size);
+      line-height: var(--h1-code-line-height);
+    }
+  }
+
+  .${H2_CLASS} {
+    ${typography('h2')};
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
+
+    h2 code {
+      font-size: var(--h2-font-size);
+      line-height: var(--h2-code-line-height);
+    }
+  }
+
+  .${H3_CLASS} {
+    ${typography('h3')};
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
+
+    h3 code {
+      font-size: var(--h3-font-size);
+      line-height: var(--h3-code-line-height);
+    }
+  }
+
+  .${H4_CLASS} {
+    ${typography('h4')};
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
+
+    h4 code {
+      font-size: var(--h4-font-size);
+      line-height: var(--h4-code-line-height);
+    }
+  }
+
+  .${H5_CLASS} {
+    ${typography('h5')};
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
+
+    h5 code {
+      font-size: var(--h5-font-size);
+      line-height: var(--h5-code-line-height);
+    }
+  }
+
+  .${H6_CLASS} {
+    ${typography('h6')};
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
+
+    h6 code {
+      font-size: var(--h6-font-size);
+      line-height: var(--h6-code-line-height);
+    }
   }
 
   strong {
@@ -120,71 +196,71 @@ export const Markdown = styled.main.attrs<{
     margin: var(--md-paragraph-margin);
   }
 
-  h1.md {
+  /**
+   * @deprecated Legacy styles for ejected Heading components that render h1-h6 as the root.
+   *
+   * Deprecated legacy heading styles start.
+   */
+  h1.${MARKDOWN_CLASS_NAME} {
     ${typography('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h2.md {
+  h2.${MARKDOWN_CLASS_NAME} {
     ${typography('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h3.md {
+  h3.${MARKDOWN_CLASS_NAME} {
     ${typography('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h4.md {
+  h4.${MARKDOWN_CLASS_NAME} {
     ${typography('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h5.md {
+  h5.${MARKDOWN_CLASS_NAME} {
     ${typography('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h6.md {
+  h6.${MARKDOWN_CLASS_NAME} {
     ${typography('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
-    ${headingAnchorCss()};
   }
 
-  h1.md code {
+  h1.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h1-font-size);
     line-height: var(--h1-code-line-height);
   }
 
-  h2.md code {
+  h2.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h2-font-size);
     line-height: var(--h2-code-line-height);
   }
 
-  h3.md code {
+  h3.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h3-font-size);
     line-height: var(--h3-code-line-height);
   }
 
-  h4.md code {
+  h4.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h4-font-size);
     line-height: var(--h4-code-line-height);
   }
 
-  h5.md code {
+  h5.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h5-font-size);
     line-height: var(--h5-code-line-height);
   }
 
-  h6.md code {
+  h6.${MARKDOWN_CLASS_NAME} code {
     font-size: var(--h6-font-size);
     line-height: var(--h6-code-line-height);
   }
+  /* Deprecated legacy heading styles end. */
 
   code {
     color: var(--inline-code-text-color);
@@ -248,8 +324,8 @@ export const Markdown = styled.main.attrs<{
     }
   }
 
-  ul.md,
-  ol.md {
+  ul.${MARKDOWN_CLASS_NAME},
+  ol.${MARKDOWN_CLASS_NAME} {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 

package/src/components/Markdown/styles/base-table.ts

@@ -1,11 +1,13 @@
 import { css } from 'styled-components';
 
+import { MARKDOWN_CLASS_NAME } from '@redocly/theme/core/constants';
+
 export const markdownBaseTableCss = css`
   .md-table-wrapper {
     overflow-x: auto;
   }
 
-  table.md {
+  table.${MARKDOWN_CLASS_NAME} {
     width: 100%;
     overflow: hidden;
     word-break: keep-all;

package/src/components/Markdown/styles/heading-anchor.ts

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 
 import type { FlattenSimpleInterpolation } from 'styled-components';
 
-export function headingAnchorCss(className = 'anchor'): FlattenSimpleInterpolation {
+export function headingAnchorCss(className: string): FlattenSimpleInterpolation {
   return css`
     .${className}.before {
       position: absolute;

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/components/Search/variables.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-/* eslint-disable theme/no-raw-colors-in-styles */
+ 
 export const search = css`
   /**
     * @tokens Search
@@ -146,7 +146,7 @@ export const search = css`
   * @tokens AI Search
   */
 
-  --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);
+  --search-ai-gradient: linear-gradient(to right, var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy)), var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy)));
 
   --search-ai-response-padding: var(--spacing-lg);
   --search-ai-response-gap: var(--spacing-sm);
@@ -262,4 +262,4 @@ export const search = css`
 
   // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
+ 

package/src/core/constants/heading.ts

@@ -0,0 +1,9 @@
+export const HEADING_ANCHOR_CLASS = 'heading-anchor';
+export const ANCHOR_CLASS = 'anchor';
+export const HEADING_CLASS_PREFIX = 'heading-level';
+export const H1_CLASS = `${HEADING_CLASS_PREFIX}-1`;
+export const H2_CLASS = `${HEADING_CLASS_PREFIX}-2`;
+export const H3_CLASS = `${HEADING_CLASS_PREFIX}-3`;
+export const H4_CLASS = `${HEADING_CLASS_PREFIX}-4`;
+export const H5_CLASS = `${HEADING_CLASS_PREFIX}-5`;
+export const H6_CLASS = `${HEADING_CLASS_PREFIX}-6`;

package/src/core/constants/index.ts

@@ -7,3 +7,5 @@ export * from './breadcrumb';
 export * from './request-methods';
 export * from './mcp';
 export * from './feedback';
+export * from './heading';
+export * from './markdown';

package/src/core/constants/markdown.ts

@@ -0,0 +1 @@
+export const MARKDOWN_CLASS_NAME = 'md';