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

package/src/core/hooks/use-active-heading.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { enhancedSmoothstep } from '../utils';
+import { HEADING_ANCHOR_CLASS } from '../constants';
 
 type HeadingEntry = {
   [key: string]: IntersectionObserverEntry;
@@ -59,7 +60,7 @@ export function useActiveHeading(
   );
 
   const findHeaders = (allContent: HTMLDivElement) => {
-    const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
+    const allHeaders = allContent.querySelectorAll<HTMLElement>(`.${HEADING_ANCHOR_CLASS}`);
     const headers = Array.from(allHeaders);
 
     if (displayedHeadingsRef.current && displayedHeadingsRef.current.length > 0) {

package/src/core/styles/dark.ts

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

package/src/core/styles/global.ts

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

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

@@ -20,6 +20,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -39,6 +42,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -58,6 +64,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -77,6 +86,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -96,6 +108,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -115,6 +130,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -134,6 +152,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -153,6 +174,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -172,6 +196,9 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --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 css`
@@ -192,6 +219,10 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --admonition-default-border-color-legacy: var(--color-warm-grey-5);
 
         --code-block-highlighted-bg-color-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent); 
+        
+        --link-color-primary-legacy: var(--color-blue-7);
+        --link-color-primary-hover-legacy: var(--color-blue-8);
+        --link-color-visited-legacy: var(--color-purple-8);
       `;
   }
 }

package/src/core/styles/palette.ts

@@ -16,6 +16,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #555761; // @presenter Color
         --color-brand-11: #6e6f7a; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -31,6 +36,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #6a3055; // @presenter Color
         --color-brand-11: #4f2841; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -46,6 +56,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #6d3338; // @presenter Color
         --color-brand-11: #4f282b; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -61,6 +76,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #71512e; // @presenter Color
         --color-brand-11: #4f3c28; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -76,6 +96,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #2a6052; // @presenter Color
         --color-brand-11: #284f45; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -91,6 +116,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #285c67; // @presenter Color
         --color-brand-11: #28484f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -106,6 +136,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #2d5472; // @presenter Color
         --color-brand-11: #283e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -121,6 +156,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #303e6b; // @presenter Color
         --color-brand-11: #28314f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --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 css`
@@ -136,6 +176,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --color-brand-10: #3a3a6a; // @presenter Color
         --color-brand-11: #2e2e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
+
+        --search-ai-gradient-start-color: var(--color-brand-8); // @presenter Color
+        --search-ai-gradient-end-color: var(--color-brand-4); // @presenter Color
       `;
     default:
       return css`
@@ -177,6 +222,14 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --button-content-color-link-legacy: var(--link-color-primary); // @presenter Color
         --button-content-color-link-hover-legacy: var(--link-color-primary-hover); // @presenter Color
         --button-content-color-link-pressed-legacy: var(--link-color-primary-pressed); // @presenter Color
+
+        --link-color-primary-legacy: var(--color-blue-6); // @presenter Color
+        --link-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
+        --link-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
+        --link-color-visited-legacy: var(--color-purple-7); // @presenter Color
+
+        --search-ai-gradient-start-color-legacy: #715efe; // @presenter Color
+        --search-ai-gradient-end-color-legacy: #ff5cdc; // @presenter Color
       `;
   }
 }

package/src/icons/AiStarsGradientIcon/AiStarsGradientIcon.tsx

@@ -36,8 +36,14 @@ const Icon = (props: AiStarsGradientIconProps) => {
       {!isColorOverridden && (
         <defs>
           <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
-            <stop offset="0%" stopColor="#715efe" />
-            <stop offset="100%" stopColor="#ff5cdc" />
+            <stop
+              offset="0%"
+              stopColor="var(--search-ai-gradient-start-color, var(--search-ai-gradient-start-color-legacy))"
+            />
+            <stop
+              offset="100%"
+              stopColor="var(--search-ai-gradient-end-color, var(--search-ai-gradient-end-color-legacy))"
+            />
           </linearGradient>
         </defs>
       )}

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
+import { H1_CLASS } from '@redocly/theme/core/constants';
 import { breakpoints } from '@redocly/theme/core/utils';
 
 export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
@@ -76,7 +77,8 @@ const ContentWrapper = styled.section`
       margin-right: auto;
     }
 
-    &:first-child > h1:first-child {
+    &:first-child > h1:first-child,
+    &:first-child > .${H1_CLASS}:first-child {
       // disable margin top for h1 on the title heading
       margin-top: 0;
     }

package/src/layouts/DocumentationLayout.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink, MarkdownConfig } from '@redocly/config';
 
 import { breakpoints } from '@redocly/theme/core/utils';
+import { H1_CLASS } from '@redocly/theme/core/constants';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
 import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
 import { DocumentationLayoutBottom } from '@redocly/theme/layouts/DocumentationLayoutBottom';
@@ -70,7 +71,8 @@ const ContentWrapper = styled.section<{ withToc: boolean }>`
 
   padding: var(--md-content-padding);
 
-  article:first-child > h1:first-child {
+  article:first-child > h1:first-child,
+  article:first-child > .${H1_CLASS}:first-child {
     // disable margin top for h1 on the title heading
     margin-top: 0;
   }

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

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

package/src/markdoc/components/Heading/Heading.tsx

@@ -9,6 +9,12 @@ import { concatClassNames } from '@redocly/theme/core/utils';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import {
+  ANCHOR_CLASS,
+  HEADING_ANCHOR_CLASS,
+  HEADING_CLASS_PREFIX,
+  MARKDOWN_CLASS_NAME,
+} from '@redocly/theme/core/constants';
 
 function renderWithSpanWrapper(children: ReactNode): ReactNode {
   const childrenArray = React.Children.toArray(children);
@@ -39,11 +45,6 @@ function renderWithSpanWrapper(children: ReactNode): ReactNode {
   );
 }
 
-/**
- * Class name for all MD tags
- */
-const mdClassName = 'md';
-
 export function Heading({
   level,
   id,
@@ -66,31 +67,43 @@ export function Heading({
 
   const isMarkdownPage =
     pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc';
+  const headingTextId = `${id}-heading-text`;
 
   const linkEl = (
     <a
-      aria-label={`link  to ${id}`}
+      aria-labelledby={headingTextId}
       href={`#${id}`}
-      className={concatClassNames('anchor', 'before')}
+      className={concatClassNames(ANCHOR_CLASS, 'before')}
     >
-      <LinkIcon color="--heading-anchor-color" />
+      <LinkIcon aria-hidden="true" focusable="false" color="--heading-anchor-color" />
     </a>
   );
 
-  return createElement(
+  const headingText = createElement(
     `h${level}`,
-    {
-      id,
-      className: concatClassNames('heading-anchor', mdClassName, className),
-      'data-component-name': 'Markdoc/Heading/Heading',
-      'data-source': dataSource,
-      'data-hash': dataHash,
-    },
-    <HeadingContentWrapper>
-      {linkEl}
-      <span>{renderWithSpanWrapper(children)}</span>
-      {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
-    </HeadingContentWrapper>,
+    { id: headingTextId },
+    renderWithSpanWrapper(children),
+  );
+
+  return (
+    <div
+      id={id}
+      className={concatClassNames(
+        HEADING_ANCHOR_CLASS,
+        MARKDOWN_CLASS_NAME,
+        `${HEADING_CLASS_PREFIX}-${level}`,
+        className,
+      )}
+      data-component-name="Markdoc/Heading/Heading"
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
+      <HeadingContentWrapper>
+        {linkEl}
+        {headingText}
+        {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
+      </HeadingContentWrapper>
+    </div>
   );
 }
 
@@ -98,20 +111,14 @@ const HeadingContentWrapper = styled.div`
   display: flex;
   gap: var(--spacing-xs);
 
-  & > .anchor {
+  & > .${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 {
+    && .${ANCHOR_CLASS} svg {
       visibility: hidden;
     }
   }