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

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

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

package/src/components/Search/variables.ts

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

package/src/components/UserMenu/LoginButton.tsx

@@ -35,6 +35,7 @@ export function LoginButton({
       <Button
         data-translation-key={label ? undefined : labelTranslationKey}
         to={href}
+        languageInsensitive
         onClick={() => telemetry.sendLoginButtonClickedMessage()}
         data-testid="login-btn"
         extraClass={className}

package/src/core/constants/heading.ts

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

package/src/core/constants/index.ts

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

package/src/core/constants/markdown.ts

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

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -153,7 +153,7 @@ export function useCodeWalkthroughSteps({
       }
 
       step.compRef = element;
-      setVisibleSteps((prevSteps) => insertAt(prevSteps, step.index, step));
+      setVisibleSteps((prevSteps) => insertVisibleStepInOrder(prevSteps, step));
     },
     [stepsMap],
   );
@@ -365,7 +365,7 @@ function getGroups(steps: CodeWalkthroughStep[]): StepsGroup[] {
   return groups;
 }
 
-export function getGroupMarkers(group: StepsGroup) {
+function getGroupMarkers(group: StepsGroup) {
   if (!group.steps.length) {
     return [];
   }
@@ -440,3 +440,11 @@ function getNormalizedNumber(options: { min: number; max: number; value: number
 
   return (value - min) / (max - min);
 }
+
+function insertVisibleStepInOrder(visible: StepWithIndex[], step: StepWithIndex): StepWithIndex[] {
+  const others = visible.filter((s) => s.id !== step.id);
+  const laterAt = others.findIndex((s) => s.index > step.index);
+  const at = laterAt === -1 ? others.length : laterAt;
+
+  return insertAt(others, at, step);
+}

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/hooks/use-language-picker.ts

@@ -1,34 +1,59 @@
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import type { L10nConfig } from '../types/hooks';
 
 import { useThemeHooks } from './use-theme-hooks';
-import { getPathnameForLocale, withPathPrefix, withoutPathPrefix } from '../utils/urls';
+import {
+  addLeadingSlash,
+  getPathnameForLocale,
+  withoutPathPrefix,
+  withPathPrefix,
+} from '../utils/urls';
 
-export function useLanguagePicker(): {
+export type UseLanguagePickerResult = {
   currentLocale: L10nConfig['locales'][number] | undefined;
   locales: L10nConfig['locales'];
+  getLocaleUrl: (value: string) => string;
+  /**
+   * @deprecated Use `getLocaleUrl` to build the URL for the target locale, then pass it to `<Link>`.
+   */
   setLocale: (value: string) => void;
-} {
+};
+
+export function useLanguagePicker(): UseLanguagePickerResult {
   const { useL10nConfig, useLoadAndNavigate } = useThemeHooks();
   const navigate = useNavigate();
   const loadAndNavigate = useLoadAndNavigate();
+
   const { currentLocale, locales, defaultLocale } = useL10nConfig();
+  const location = useLocation();
 
   const locale = locales.find((l) => l.code === currentLocale);
 
-  function setLocale(value: string) {
-    const newLangPathname = withPathPrefix(
-      getPathnameForLocale(withoutPathPrefix(location.pathname), defaultLocale, value, locales),
+  function getLocaleUrl(value: string): string {
+    let newLangPathname = getPathnameForLocale(
+      withoutPathPrefix(location.pathname),
+      defaultLocale,
+      value,
+      locales,
     );
 
-    const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+    if (location.search) {
+      newLangPathname += location.search;
+    }
+
+    return addLeadingSlash(newLangPathname);
+  }
+
+  function setLocale(value: string): void {
+    const newUrlWithLanguage = withPathPrefix(getLocaleUrl(value));
     loadAndNavigate({ navigate, to: newUrlWithLanguage });
   }
 
   return {
     currentLocale: locale,
     locales,
+    getLocaleUrl,
     setLocale,
   };
 }

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`

package/src/core/styles/palette.ts

@@ -18,6 +18,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -35,6 +38,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -52,6 +58,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -69,6 +78,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -86,6 +98,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -103,6 +118,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -120,6 +138,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -137,6 +158,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -154,6 +178,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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`
@@ -200,6 +227,9 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
         --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/CodeWalkthrough/CodeStep.tsx

@@ -8,6 +8,7 @@ import React, {
   useCallback,
 } from 'react';
 import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
 
 import type { WithConditions } from '@redocly/config';
 
@@ -29,6 +30,7 @@ export function CodeStep({
   unless,
   children,
 }: PropsWithChildren<CodeStepProps>) {
+  const location = useLocation();
   const compRef = useRef<HTMLDivElement | null>(null);
   const markerRef = useRef<HTMLDivElement | null>(null);
 
@@ -79,16 +81,13 @@ export function CodeStep({
   );
 
   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]);
 
   useEffect(() => {
     const currentCompRef = compRef.current;

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;
     }
   }