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

package/lib/core/styles/palette.js

@@ -20,6 +20,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -37,6 +40,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -54,6 +60,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -71,6 +80,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -88,6 +100,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -105,6 +120,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -122,6 +140,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -139,6 +160,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -156,6 +180,9 @@ function brandPaletteLight(palette) {
         --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) `
@@ -202,6 +229,9 @@ function brandPaletteLight(palette) {
         --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/CodeWalkthrough/CodeStep.js

@@ -40,9 +40,11 @@ exports.StepWrapper = void 0;
 exports.CodeStep = CodeStep;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
 const Marker_1 = require("../../../components/Marker/Marker");
 const contexts_1 = require("../../../core/contexts");
 function CodeStep({ id, heading, when, unless, children, }) {
+    const location = (0, react_router_dom_1.useLocation)();
     const compRef = (0, react_1.useRef)(null);
     const markerRef = (0, react_1.useRef)(null);
     const { areConditionsMet } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
@@ -66,15 +68,14 @@ function CodeStep({ id, heading, when, unless, children, }) {
     const handleRegisterMarker = (0, react_1.useCallback)((element) => registerMarker(id, element), [registerMarker, id]);
     const handleRemoveMarker = (0, react_1.useCallback)((element) => removeMarker(id, element), [removeMarker, id]);
     (0, react_1.useEffect)(() => {
-        // If the step is active during first render, scroll to it
-        // This is to ensure that the step is visible when the page is loaded
-        if (isActive) {
-            // Ensure scrollMarginTop calculated before step being scrolled.
-            setTimeout(handleActivateStep, 5);
-        }
+        // If the step is active during navigation or first render, scroll to it
+        if (!isActive)
+            return;
+        const timer = setTimeout(handleActivateStep, 5);
+        return () => clearTimeout(timer);
         // Ignore dependency array because we only need to run this once
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [location.pathname]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         const currentCompRef = compRef.current;

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.3",
+  "version": "0.65.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.11.0-next.2"
+    "@redocly/realm-asyncapi-sdk": "0.11.0-next.3"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Button/Button.tsx

@@ -28,6 +28,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   extraClass?: string;
   to?: string;
   external?: boolean;
+  languageInsensitive?: boolean;
   icon?: JSX.Element;
   iconPosition?: 'left' | 'right';
   title?: string;
@@ -175,12 +176,13 @@ const StyledButton = styled.button.attrs((props: ButtonProps) => ({
 `;
 
 const ButtonComponent: React.FC<ButtonProps> = (props) => {
+  const { languageInsensitive, ...buttonProps } = props;
   const tabIndex = 'tabIndex' in props ? props.tabIndex : props.to ? -1 : undefined;
 
   const button = (
     <StyledButton
       data-component-name="Button/Button"
-      {...props}
+      {...buttonProps}
       iconOnly={!props.children && props.icon !== null}
       tabIndex={tabIndex}
     >
@@ -192,7 +194,12 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
 
   if (props.to) {
     return (
-      <StyledButtonLink to={props.to} external={props.external} onClick={props.onClick}>
+      <StyledButtonLink
+        to={props.to}
+        external={props.external}
+        languageInsensitive={languageInsensitive}
+        onClick={props.onClick}
+      >
         {button}
       </StyledButtonLink>
     );

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/Dropdown/DropdownMenuItem.tsx

@@ -55,16 +55,25 @@ export function DropdownMenuItem({
 
   className = className || '' + (active ? ' active' : '');
 
+  const sharedProps = {
+    $active: active,
+    $dangerous: dangerous,
+    $disabled: disabled,
+    $separator: separator,
+    $separatorLine: separatorLine,
+    'data-component-name': 'Dropdown/DropdownMenuItem',
+    className,
+    onClick: handleClick,
+    role,
+    style,
+  };
+
   if (to) {
     return (
       <DropdownMenuItemWrapper
         as={Link}
-        data-component-name="Dropdown/DropdownMenuItem"
-        className={className}
-        $separatorLine={separatorLine}
         to={to}
-        style={style}
-        role={role}
+        {...sharedProps}
         {...dataAttributes}
         {...otherProps}
       >
@@ -77,19 +86,10 @@ export function DropdownMenuItem({
 
   return (
     <DropdownMenuItemWrapper
-      data-component-name="Dropdown/DropdownMenuItem"
-      className={className}
-      role={role}
-      style={style}
+      {...sharedProps}
       {...dataAttributes}
-      onClick={handleClick}
       onKeyDown={handleKeyDown}
       tabIndex={onAction ? 0 : -1}
-      active={active}
-      disabled={disabled}
-      separator={separator}
-      dangerous={dangerous}
-      $separatorLine={separatorLine}
     >
       {prefix}
       {children || content}
@@ -100,10 +100,10 @@ export function DropdownMenuItem({
 
 const DropdownMenuItemWrapper = styled.li<{
   $separatorLine?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-  separator?: boolean;
-  dangerous?: boolean;
+  $separator?: boolean;
+  $active?: boolean;
+  $disabled?: boolean;
+  $dangerous?: boolean;
 }>`
   display: flex;
   flex-direction: row;
@@ -140,8 +140,8 @@ const DropdownMenuItemWrapper = styled.li<{
     color: var(--dropdown-menu-item-color-hover);
   }
 
-  ${({ separator }) =>
-    separator &&
+  ${({ $separator }) =>
+    $separator &&
     css`
       cursor: default;
       pointer-events: none;
@@ -151,8 +151,8 @@ const DropdownMenuItemWrapper = styled.li<{
       --dropdown-menu-item-bg-color-hover: var(--dropdown-menu-item-bg-color);
     `}
 
-  ${({ active }) =>
-    active &&
+  ${({ $active }) =>
+    $active &&
     css`
       background-color: var(--dropdown-menu-item-bg-color-active);
       color: var(--dropdown-menu-item-color-active);
@@ -161,8 +161,8 @@ const DropdownMenuItemWrapper = styled.li<{
       }
     `}
 
-  ${({ disabled }) =>
-    disabled &&
+  ${({ $disabled }) =>
+    $disabled &&
     css`
       cursor: default;
       pointer-events: none;
@@ -187,8 +187,8 @@ const DropdownMenuItemWrapper = styled.li<{
       }
     `}
 
-  ${({ dangerous }) =>
-    dangerous &&
+  ${({ $dangerous }) =>
+    $dangerous &&
     css`
       &:hover,
       & {

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -19,7 +19,7 @@ export type LanguagePickerProps = {
 };
 
 export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
-  const { currentLocale, locales, setLocale } = useLanguagePicker();
+  const { currentLocale, locales, getLocaleUrl } = useLanguagePicker();
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
 
@@ -37,8 +37,9 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
 
   const languageItems = locales.map((locale) => ({
     content: locale.name || locale.code || '',
+    to: getLocaleUrl(locale.code),
+    languageInsensitive: true,
     onAction: () => {
-      setLocale(locale.code);
       props.onChangeLanguage(locale.code);
       telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
     },

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;