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

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/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/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/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/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

@@ -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) `
@@ -194,6 +221,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);
       `;
     }
 }