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

package/lib/components/Catalog/CatalogTags.js

@@ -49,6 +49,7 @@ function CatalogTags({ items, itemsToShow = 1, showPlaceholder = false, showAvat
 const CatalogTagsWrapper = styled_components_1.default.div `
   display: flex;
   flex-wrap: wrap;
+  row-gap: var(--catalog-tags-row-gap);
 `;
 const MoreTagsButton = styled_components_1.default.span `
   font-size: var(--catalog-tags-more-button-font-size);

package/lib/components/Catalog/variables.js

@@ -150,6 +150,7 @@ exports.catalog = (0, styled_components_1.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/lib/components/Markdown/Markdown.js

@@ -39,6 +39,7 @@ const utils_1 = require("../../core/utils");
 const base_table_1 = require("../../components/Markdown/styles/base-table");
 const links_1 = require("../../components/Markdown/styles/links");
 const heading_anchor_1 = require("../../components/Markdown/styles/heading-anchor");
+const constants_1 = require("../../core/constants");
 exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     'data-component-name': 'Markdown/Markdown',
     className,
@@ -85,17 +86,82 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     max-width: 100%;
   }
 
-  h1.md,
-  h2.md,
-  h3.md,
-  h4.md,
-  h5.md,
-  h6.md {
+  .${constants_1.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));
+    ${(0, heading_anchor_1.headingAnchorCss)(constants_1.ANCHOR_CLASS)};
+
+    h1, h2, h3, h4, h5, h6 {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--spacing-sm);
+      margin: 0;
+      font: inherit;
+      color: inherit;
+    }
+  }
+
+  .${constants_1.H1_CLASS} {
+    ${(0, utils_1.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);
+    }
+  }
+
+  .${constants_1.H2_CLASS} {
+    ${(0, utils_1.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);
+    }
+  }
+
+  .${constants_1.H3_CLASS} {
+    ${(0, utils_1.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);
+    }
+  }
+
+  .${constants_1.H4_CLASS} {
+    ${(0, utils_1.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);
+    }
+  }
+
+  .${constants_1.H5_CLASS} {
+    ${(0, utils_1.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);
+    }
+  }
+
+  .${constants_1.H6_CLASS} {
+    ${(0, utils_1.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 {
@@ -139,71 +205,71 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     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.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h2.md {
+  h2.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h3.md {
+  h3.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h4.md {
+  h4.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h5.md {
+  h5.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h6.md {
+  h6.${constants_1.MARKDOWN_CLASS_NAME} {
     ${(0, utils_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
-    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
-  h1.md code {
+  h1.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h1-font-size);
     line-height: var(--h1-code-line-height);
   }
 
-  h2.md code {
+  h2.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h2-font-size);
     line-height: var(--h2-code-line-height);
   }
 
-  h3.md code {
+  h3.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h3-font-size);
     line-height: var(--h3-code-line-height);
   }
 
-  h4.md code {
+  h4.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h4-font-size);
     line-height: var(--h4-code-line-height);
   }
 
-  h5.md code {
+  h5.${constants_1.MARKDOWN_CLASS_NAME} code {
     font-size: var(--h5-font-size);
     line-height: var(--h5-code-line-height);
   }
 
-  h6.md code {
+  h6.${constants_1.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);
@@ -267,8 +333,8 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     }
   }
 
-  ul.md,
-  ol.md {
+  ul.${constants_1.MARKDOWN_CLASS_NAME},
+  ol.${constants_1.MARKDOWN_CLASS_NAME} {
     padding-left: var(--md-list-left-padding);
     margin: var(--md-list-margin);
 

package/lib/components/Markdown/styles/base-table.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdownBaseTableCss = void 0;
 const styled_components_1 = require("styled-components");
+const constants_1 = require("../../../core/constants");
 exports.markdownBaseTableCss = (0, styled_components_1.css) `
   .md-table-wrapper {
     overflow-x: auto;
   }
 
-  table.md {
+  table.${constants_1.MARKDOWN_CLASS_NAME} {
     width: 100%;
     overflow: hidden;
     word-break: keep-all;

package/lib/components/Markdown/styles/heading-anchor.d.ts

@@ -1,2 +1,2 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
-export declare function headingAnchorCss(className?: string): FlattenSimpleInterpolation;
+export declare function headingAnchorCss(className: string): FlattenSimpleInterpolation;

package/lib/components/Markdown/styles/heading-anchor.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.headingAnchorCss = headingAnchorCss;
 const styled_components_1 = require("styled-components");
-function headingAnchorCss(className = 'anchor') {
+function headingAnchorCss(className) {
     return (0, styled_components_1.css) `
     .${className}.before {
       position: absolute;

package/lib/components/Search/variables.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.search = void 0;
 const styled_components_1 = require("styled-components");
-/* eslint-disable theme/no-raw-colors-in-styles */
 exports.search = (0, styled_components_1.css) `
   /**
     * @tokens Search
@@ -148,7 +147,7 @@ exports.search = (0, styled_components_1.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);
@@ -264,5 +263,4 @@ exports.search = (0, styled_components_1.css) `
 
   // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

package/lib/core/constants/heading.d.ts

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

package/lib/core/constants/heading.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.H6_CLASS = exports.H5_CLASS = exports.H4_CLASS = exports.H3_CLASS = exports.H2_CLASS = exports.H1_CLASS = exports.HEADING_CLASS_PREFIX = exports.ANCHOR_CLASS = exports.HEADING_ANCHOR_CLASS = void 0;
+exports.HEADING_ANCHOR_CLASS = 'heading-anchor';
+exports.ANCHOR_CLASS = 'anchor';
+exports.HEADING_CLASS_PREFIX = 'heading-level';
+exports.H1_CLASS = `${exports.HEADING_CLASS_PREFIX}-1`;
+exports.H2_CLASS = `${exports.HEADING_CLASS_PREFIX}-2`;
+exports.H3_CLASS = `${exports.HEADING_CLASS_PREFIX}-3`;
+exports.H4_CLASS = `${exports.HEADING_CLASS_PREFIX}-4`;
+exports.H5_CLASS = `${exports.HEADING_CLASS_PREFIX}-5`;
+exports.H6_CLASS = `${exports.HEADING_CLASS_PREFIX}-6`;
+//# sourceMappingURL=heading.js.map

package/lib/core/constants/index.d.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/lib/core/constants/index.js

@@ -23,4 +23,6 @@ __exportStar(require("./breadcrumb"), exports);
 __exportStar(require("./request-methods"), exports);
 __exportStar(require("./mcp"), exports);
 __exportStar(require("./feedback"), exports);
+__exportStar(require("./heading"), exports);
+__exportStar(require("./markdown"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/markdown.d.ts

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

package/lib/core/constants/markdown.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MARKDOWN_CLASS_NAME = void 0;
+exports.MARKDOWN_CLASS_NAME = 'md';
+//# sourceMappingURL=markdown.js.map

package/lib/core/hooks/use-active-heading.js

@@ -4,6 +4,7 @@ exports.useActiveHeading = useActiveHeading;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const utils_1 = require("../utils");
+const constants_1 = require("../constants");
 function useActiveHeading(contentElement, displayedHeadings) {
     const [heading, setHeading] = (0, react_1.useState)(undefined);
     const [headingElements, setHeadingElements] = (0, react_1.useState)([]);
@@ -42,7 +43,7 @@ function useActiveHeading(contentElement, displayedHeadings) {
         return headingElements.findIndex((item) => item.id === id);
     }, [headingElements]);
     const findHeaders = (allContent) => {
-        const allHeaders = allContent.querySelectorAll('.heading-anchor');
+        const allHeaders = allContent.querySelectorAll(`.${constants_1.HEADING_ANCHOR_CLASS}`);
         const headers = Array.from(allHeaders);
         if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {
             const displayedIds = displayedHeadingsRef.current.map((h) => h === null || h === void 0 ? void 0 : h.id).filter(Boolean);

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

@@ -22,6 +22,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #55576166;
         --color-brand-subtle-4: #6e6f7a66;
         --text-color-on-color: #000000;
+
+        --search-ai-gradient-start-color: var(--color-brand-3); 
+        --search-ai-gradient-end-color: var(--color-brand-7);
       `;
         case 'pink':
             return (0, styled_components_1.css) `
@@ -41,6 +44,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #85366866;
         --color-brand-subtle-4: #a03a7b66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'coral':
             return (0, styled_components_1.css) `
@@ -60,6 +66,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #8b3c4266;
         --color-brand-subtle-4: #a9434c66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'amber':
             return (0, styled_components_1.css) `
@@ -79,6 +88,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #93632f66;
         --color-brand-subtle-4: #b6732a66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-5); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'jade':
             return (0, styled_components_1.css) `
@@ -98,6 +110,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #2b715e66;
         --color-brand-subtle-4: #2b816b66;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4);
+        --search-ai-gradient-end-color: var(--color-brand-7);
       `;
         case 'cyan':
             return (0, styled_components_1.css) `
@@ -117,6 +132,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #246e7f66;
         --color-brand-subtle-4: #1b809766;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'ocean':
             return (0, styled_components_1.css) `
@@ -136,6 +154,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #2a679566;
         --color-brand-subtle-4: #2277b966;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'indigo':
             return (0, styled_components_1.css) `
@@ -155,6 +176,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #36498866;
         --color-brand-subtle-4: #3952a466;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         case 'iris':
             return (0, styled_components_1.css) `
@@ -174,6 +198,9 @@ function brandPaletteDark(palette) {
         --color-brand-subtle-3: #43438580;
         --color-brand-subtle-4: #4c4ca080;
         --text-color-on-color: #ffffff;
+
+        --search-ai-gradient-start-color: var(--color-brand-4); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-8); // @presenter Color
       `;
         default:
             return (0, styled_components_1.css) `

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/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.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

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`