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

package/src/components/PageNavigation/PageNavigation.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 
+import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeConfig } from '@redocly/theme/core/hooks';
 import { NextButton } from '@redocly/theme/components/PageNavigation/NextButton';
 import { PreviousButton } from '@redocly/theme/components/PageNavigation/PreviousButton';
@@ -41,8 +42,13 @@ const PageNavigationWrapper = styled.div`
   justify-content: space-between;
   margin: 25px 0;
   width: 100%;
+  gap: var(--page-navigations-wrapper-gap);
 
   @media print {
     display: none;
   }
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    flex-direction: column;
+  }
 `;

package/src/components/PageNavigation/variables.ts

@@ -0,0 +1,24 @@
+import { css } from 'styled-components';
+
+export const pageNavigation = css`
+  /**
+   * @tokens Page Navigation
+   */
+
+  --page-navigations-wrapper-gap: var(--spacing-base); // @presenter Spacing
+
+  --page-navigation-button-width: var(--container-max-width); // @presenter Width
+  --page-navigation-button-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --page-navigation-button-title-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-navigation-button-title-font-weight: var(--font-weight-medium); // @presenter FontWeight
+  --page-navigation-button-title-line-height: var(--line-height-lg); // @presenter LineHeight
+  --page-navigation-button-title-color: var(--text-color-primary); // @presenter Color
+  --page-navigation-button-gap: var(--spacing-xxs); // @presenter Spacing
+  --page-navigation-button-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --page-navigation-button-border-color: var(--border-color-secondary); // @presenter Color
+  --page-navigation-button-border: var(--border-width) var(--border-style) var(--page-navigation-button-border-color); // @presenter Border
+  --page-navigation-button-border-color-hover: var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
+  --page-navigation-button-border-hover: var(--border-width) var(--border-style) var(--page-navigation-button-border-color-hover); // @presenter Border
+  --page-navigation-button-min-width: 220px; // @presenter Width
+  // @tokens End
+`;

package/src/components/Search/variables.ts

@@ -164,7 +164,7 @@ export const search = css`
   --search-ai-text-line-height: var(--line-height-lg);
   --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
 
-  --search-ai-user-bg-color: var(--color-blue-6);
+  --search-ai-user-bg-color: var(--color-primary-base, var(--search-ai-user-bg-color-legacy));
   --search-ai-user-text-color: var(--color-static-white);
   --search-ai-assistant-bg-color: var(--layer-color);
   --search-ai-assistant-text-color: var(--text-color-primary);
@@ -247,7 +247,7 @@ export const search = css`
   --search-ai-conversation-input-border-radius: var(--border-radius-lg);
   --search-ai-conversation-input-font-size: var(--font-size-base);
   --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
-  --search-ai-conversation-input-border-color-focus: var(--color-blue-6);
+  --search-ai-conversation-input-border-color-focus: var(--color-primary-base, var(--search-ai-conversation-input-border-color-focus-legacy));
   --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
 
   --search-ai-conversation-input-send-button-right: 12px;

package/src/core/hooks/use-modal-scroll-lock.ts

@@ -1,40 +1,56 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 export function useModalScrollLock(isOpen: boolean): void {
+  const originalBodyStylesRef = useRef<{
+    overflow: string;
+    paddingRight: string;
+    scrollbarWidth: string | null;
+  } | null>(null);
+
   useEffect(() => {
     if (typeof window === 'undefined' || typeof document === 'undefined') {
       return;
     }
 
     const { body, documentElement } = document;
-    const originalOverflow = body.style.overflow;
-    const originalPaddingRight = body.style.paddingRight;
-    const originalScrollbarWidth =
-      documentElement.style.getPropertyValue('--modal-scrollbar-width');
-
-    const restoreScrollState = () => {
-      body.style.overflow = originalOverflow;
-      body.style.paddingRight = originalPaddingRight;
-      if (originalScrollbarWidth) {
-        documentElement.style.setProperty('--modal-scrollbar-width', originalScrollbarWidth);
+
+    const restoreOriginalBodyStyles = () => {
+      if (!originalBodyStylesRef.current) return;
+
+      const { overflow, paddingRight, scrollbarWidth } = originalBodyStylesRef.current;
+
+      body.style.overflow = overflow;
+      body.style.paddingRight = paddingRight;
+      if (scrollbarWidth) {
+        documentElement.style.setProperty('--modal-scrollbar-width', scrollbarWidth);
       } else {
         documentElement.style.removeProperty('--modal-scrollbar-width');
       }
+
+      originalBodyStylesRef.current = null;
     };
 
-    if (isOpen) {
-      const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
+    if (isOpen && !originalBodyStylesRef.current) {
+      originalBodyStylesRef.current = {
+        overflow: body.style.overflow,
+        paddingRight: body.style.paddingRight,
+        scrollbarWidth: documentElement.style.getPropertyValue('--modal-scrollbar-width') || null,
+      };
 
+      const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
       body.style.overflow = 'hidden';
 
       if (scrollbarWidth > 0) {
         body.style.paddingRight = `${scrollbarWidth}px`;
         documentElement.style.setProperty('--modal-scrollbar-width', `${scrollbarWidth}px`);
       }
+    } else if (!isOpen && originalBodyStylesRef.current) {
+      restoreOriginalBodyStyles();
     }
 
+    // Cleanup only if component unmounts while modal is open
     return () => {
-      restoreScrollState();
+      restoreOriginalBodyStyles();
     };
   }, [isOpen]);
 }

package/src/core/hooks/use-page-actions.ts

@@ -64,21 +64,14 @@ export function usePageActions(
   const openApiSharedData = usePageSharedData<
     { options: { excludeFromSearch: boolean } } | undefined
   >('openAPIDocsStore');
+  const openapiExcludeFromSearch = openApiSharedData?.options?.excludeFromSearch;
   const mcpConfig = useMCPConfig();
 
-  const shouldHideAllActions = shouldHidePageActions(
-    pageProps,
-    themeConfig,
-    openApiSharedData?.options?.excludeFromSearch,
-  );
   const { isPublic } = usePageData() || {};
 
   const createMCPHandler = useCallback(
     (clientType: MCPClientType, requiresMcpUrl: boolean = false) =>
-      () => {
-        if (requiresMcpUrl && !mcpUrl) return null;
-        if (!requiresMcpUrl && (mcpUrl || mcpConfig.isMcpDisabled)) return null;
-
+      (): PageAction => {
         const config = requiresMcpUrl
           ? { serverName: mcpConfig.serverName, url: mcpUrl || '' }
           : { serverName: mcpConfig.serverName, url: mcpConfig.serverUrl || '' };
@@ -107,9 +100,14 @@ export function usePageActions(
   );
 
   const result: PageAction[] = useMemo(() => {
-    if (shouldHideAllActions) {
-      return [];
-    }
+    const hideActionContext: ShouldHideActionContext = {
+      pageProps,
+      themeConfig,
+      openapiExcludeFromSearch,
+      isPublic,
+      mcpUrl,
+      isMcpDisabled: mcpConfig.isMcpDisabled,
+    };
 
     const origin = IS_BROWSER
       ? window.location.origin
@@ -121,7 +119,7 @@ export function usePageActions(
       ? combineUrls(origin, pathname, 'index.html.md')
       : combineUrls(origin, removeTrailingSlash(pathname) + '.md');
 
-    const actionHandlers: Record<PageActionType, () => PageAction | null> = {
+    const actionHandlers: Record<PageActionType, () => PageAction> = {
       'docs-mcp-cursor': createMCPHandler('cursor', false),
       'docs-mcp-vscode': createMCPHandler('vscode', false),
       'mcp-cursor': createMCPHandler('cursor', true),
@@ -169,9 +167,6 @@ export function usePageActions(
       }),
 
       chatgpt: () => {
-        if (!isPublic) {
-          return null;
-        }
         const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
         return {
           buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
@@ -192,9 +187,6 @@ export function usePageActions(
       },
 
       claude: () => {
-        if (!isPublic) {
-          return null;
-        }
         const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
         return {
           buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
@@ -216,15 +208,18 @@ export function usePageActions(
     };
 
     return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
-      .map((action) => actionHandlers[action]?.())
-      .filter((action): action is PageAction => action !== null);
+      .filter((action) => !shouldHideAction(action, hideActionContext))
+      .map((action) => actionHandlers[action]());
   }, [
-    shouldHideAllActions,
+    pageProps,
+    themeConfig,
+    openapiExcludeFromSearch,
+    isPublic,
+    mcpUrl,
+    mcpConfig.isMcpDisabled,
     pageSlug,
-    themeConfig.navigation?.actions?.items,
     actions,
     translate,
-    isPublic,
     createMCPHandler,
     telemetry,
   ]);
@@ -285,35 +280,77 @@ function createMCPAction({
   };
 }
 
-function shouldHidePageActions(
-  pageProps: PageProps,
-  themeConfig: UiAccessibleConfig,
-  openapiExcludeFromSearch?: boolean,
+type ShouldHideActionContext = {
+  pageProps: PageProps;
+  themeConfig: UiAccessibleConfig;
+  openapiExcludeFromSearch?: boolean;
+  isPublic?: boolean;
+  mcpUrl?: string;
+  isMcpDisabled: boolean;
+};
+
+function shouldHideAction(
+  action: PageActionType,
+  {
+    pageProps,
+    themeConfig,
+    openapiExcludeFromSearch,
+    isPublic,
+    mcpUrl,
+    isMcpDisabled,
+  }: ShouldHideActionContext,
 ): boolean {
   // Can't use any actions if search is globally disabled (markdown files are not generated)
   if (themeConfig.search?.hide) {
     return true;
   }
-
   // Can't use any actions if no markdown files are generated for LLMs
   if (pageProps?.seo?.llmstxt?.hide) {
     return true;
   }
-
   // Page actions are explicitly disabled in config
   if (themeConfig.navigation?.actions?.hide) {
     return true;
   }
 
-  // Page is excluded from search
   const isOpenApiPage =
     pageProps?.metadata?.type === 'openapi' || pageProps?.metadata?.subType === 'openapi-operation';
   const isPageExcludedFromSearch =
     pageProps?.frontmatter?.excludeFromSearch || (isOpenApiPage && openapiExcludeFromSearch);
 
-  if (isPageExcludedFromSearch) {
+  // Page excluded from search: only explicit MCP connect actions remain visible,
+  // since they don't depend on the page's markdown.
+  if (isPageExcludedFromSearch && action !== 'mcp-cursor' && action !== 'mcp-vscode') {
     return true;
   }
 
-  return false;
+  return shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled });
+}
+
+function shouldHideActionByType(
+  action: PageActionType,
+  {
+    isPublic,
+    mcpUrl,
+    isMcpDisabled,
+  }: Pick<ShouldHideActionContext, 'isPublic' | 'mcpUrl' | 'isMcpDisabled'>,
+): boolean {
+  switch (action) {
+    case 'chatgpt':
+    case 'claude':
+      return !isPublic;
+    case 'docs-mcp-cursor':
+    case 'docs-mcp-vscode':
+      return Boolean(mcpUrl) || isMcpDisabled;
+    case 'mcp-cursor':
+    case 'mcp-vscode':
+      return !mcpUrl;
+    case 'copy':
+    case 'view':
+      return false;
+    default: {
+      action satisfies never;
+      return true;
+    }
+  }
 }

package/src/core/styles/dark.ts

@@ -15,6 +15,7 @@ import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/varia
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
 import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
 import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
+import { codeBlockDarkMode } from '@redocly/theme/components/CodeBlock/variables.dark';
 
 import { activeBrandPaletteDark } from './palette.dark';
 
@@ -293,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
@@ -352,6 +353,7 @@ export const darkMode = css`
   ${admonitionDarkMode}
   ${badgesDarkMode}
   ${activeBrandPaletteDark}
+  ${codeBlockDarkMode}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/src/core/styles/global.ts

@@ -44,6 +44,7 @@ import { skipContent } from '@redocly/theme/components/SkipContent/variables';
 import { pageActions } from '@redocly/theme/components/PageActions/variables';
 import { svgViewer } from '@redocly/theme/components/SvgViewer/variables';
 import { toast } from '@redocly/theme/components/Toast/variables';
+import { pageNavigation } from '@redocly/theme/components/PageNavigation/variables';
 
 import { activeBrandPaletteLight } from './palette';
 import { darkMode } from './dark';
@@ -481,8 +482,8 @@ const headingsTypography = css`
     * @tokens Typography heading anchor icon
     */
 
-  --heading-anchor-offset-right: 4px; // @presenter Spacing
-  --heading-anchor-color: var(--button-content-color-primary); // @presenter Color
+  --heading-anchor-offset-right: var(--spacing-xs); // @presenter Spacing
+  --heading-anchor-color: var(--icon-color-primary); // @presenter Color
   --heading-anchor-icon: none;
 
   /**
@@ -571,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
 `;
@@ -706,9 +708,10 @@ const apiReferenceDocs = css`
     * @tokens API Reference Schema Nested styles
     */
 
-  --schema-nested-offset: calc(var(--spacing-unit) * 2.5); // @presenter Spacing
+  --schema-nested-offset: calc(var(--spacing-sm) - 1px); // @presenter Spacing
   --schema-nested-bg-color: var(--tree-bg-color-active); // @presenter Color
-
+  --schema-nested-hyperlink-offset: 2px; // @presenter Spacing
+  
   /**
     * @tokens API Reference Schema Required styles
     */
@@ -740,7 +743,8 @@ const apiReferenceDocs = css`
     * @tokens API Reference Schema Properties
     */
 
-  --schemas-property-name-text-color: var(--text-color-primary); //@presenter Color
+  --schemas-property-name-text-color: var(--color-primary-base, var(--text-color-primary)); //@presenter Color
+  --schemas-property-name-box-text-color: var(--text-color-primary); // @presenter Color
   --schemas-property-name-font-size: var(--font-size-base); // @presenter FontSize
   --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
   --schemas-property-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
@@ -1342,6 +1346,7 @@ export const styles = css<{ palette?: string }>`
     ${pageActions}
     ${svgViewer}
     ${toast}
+    ${pageNavigation}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -190,6 +190,12 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
 
         --admonition-default-bg-color-legacy: var(--color-warm-grey-3);
         --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,8 @@ 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
       `;
     case 'pink':
       return css`
@@ -31,6 +33,8 @@ 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
       `;
     case 'coral':
       return css`
@@ -46,6 +50,8 @@ 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
       `;
     case 'amber':
       return css`
@@ -61,6 +67,8 @@ 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
       `;
     case 'jade':
       return css`
@@ -76,6 +84,8 @@ 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
       `;
     case 'cyan':
       return css`
@@ -91,6 +101,8 @@ 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
       `;
     case 'ocean':
       return css`
@@ -106,6 +118,8 @@ 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
       `;
     case 'indigo':
       return css`
@@ -121,6 +135,8 @@ 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
       `;
     case 'iris':
       return css`
@@ -136,6 +152,8 @@ 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
       `;
     default:
       return css`
@@ -161,6 +179,27 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
 
         --menu-item-bg-color-active-legacy: var(--tree-bg-color-active); // @presenter Color
         --menu-item-color-active-legacy: var(--tree-content-color-default); // @presenter Color
+        --menu-item-color-active-hover-legacy: var(--tree-content-color-hover); // @presenter Color
+        --menu-item-bg-color-active-hover-legacy: var(--color-hover-base); // @presenter Color
+
+        --code-block-highlighted-bg-color-legacy: var(--layer-color-hover); // @presenter Color
+        --code-block-tokens-string-color-legacy: var(--color-blue-7); // @presenter Color
+
+        --security-header-color-legacy: var(--link-color-primary); // @presenter Color
+
+        --schema-name-color-legacy: var(--text-color-primary); // @presenter Color
+
+        --search-ai-conversation-input-border-color-focus-legacy: var(--color-blue-6); // @presenter Color
+        --search-ai-user-bg-color-legacy: var(--color-blue-6); // @presenter Color
+
+        --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
       `;
   }
 }

package/src/core/types/catalog.ts

@@ -171,7 +171,7 @@ export type BffCatalogEntity = {
   key: string;
   type: string;
   title: string;
-  readonly source: 'api' | 'file';
+  readonly source: 'remote' | 'file';
   domains?: Array<BffCatalogRelatedEntity>;
   owners?: Array<BffCatalogRelatedEntity>;
   summary?: string | null;

package/src/icons/LinkIcon/LinkIcon.tsx

@@ -6,19 +6,32 @@ import type { IconProps } from '@redocly/theme/icons/types';
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 
 const Icon = (props: IconProps) => (
-  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M14.625 3.37992C14.3463 3.10024 14.0151 2.87833 13.6505 2.72692C13.2858 2.5755 12.8949 2.49756 12.5 2.49756C12.1052 2.49756 11.7142 2.5755 11.3496 2.72692C10.9849 2.87833 10.6537 3.10024 10.375 3.37992L11.085 4.08992C11.2712 3.90378 11.4922 3.75611 11.7354 3.65537C11.9786 3.55463 12.2393 3.50278 12.5025 3.50278C12.7658 3.50278 13.0264 3.55463 13.2697 3.65537C13.5129 3.75611 13.7339 3.90378 13.92 4.08992C14.1062 4.27607 14.2538 4.49706 14.3546 4.74028C14.4553 4.98349 14.5072 5.24417 14.5072 5.50742C14.5072 5.77068 14.4553 6.03135 14.3546 6.27457C14.2538 6.51778 14.1062 6.73878 13.92 6.92492L9.92002 10.9249C9.54473 11.3009 9.03548 11.5123 8.50428 11.5128C7.97309 11.5133 7.46346 11.3027 7.08752 10.9274C6.71157 10.5521 6.5001 10.0429 6.49964 9.51169C6.49917 8.98049 6.70973 8.47087 7.08502 8.09492L7.79002 7.38492L7.08502 6.67492L6.37502 7.38492C6.09534 7.66363 5.87343 7.99481 5.72201 8.35947C5.57059 8.72412 5.49265 9.11508 5.49265 9.50992C5.49265 9.90477 5.57059 10.2957 5.72201 10.6604C5.87343 11.025 6.09534 11.3562 6.37502 11.6349C6.94076 12.1934 7.70505 12.5045 8.50002 12.4999C8.89637 12.5016 9.28913 12.4246 9.65558 12.2736C10.022 12.1225 10.3549 11.9004 10.635 11.6199L14.635 7.61992C15.1955 7.0561 15.5093 6.29286 15.5074 5.49785C15.5055 4.70285 15.1881 3.9411 14.625 3.37992Z" />
-    <path d="M2.09502 12.4099C1.90831 12.2241 1.76016 12.0032 1.65907 11.7599C1.55798 11.5167 1.50593 11.2559 1.50593 10.9924C1.50593 10.729 1.55798 10.4682 1.65907 10.2249C1.76016 9.98165 1.90831 9.76076 2.09502 9.57492L6.09502 5.57492C6.28085 5.38822 6.50174 5.24007 6.745 5.13898C6.98826 5.03788 7.24909 4.98584 7.51252 4.98584C7.77594 4.98584 8.03677 5.03788 8.28003 5.13898C8.52329 5.24007 8.74418 5.38822 8.93002 5.57492C9.11554 5.76222 9.26158 5.98486 9.35949 6.22963C9.4574 6.47441 9.50519 6.73634 9.50002 6.99992C9.50154 7.26433 9.45062 7.52641 9.35021 7.771C9.2498 8.0156 9.10188 8.23786 8.91502 8.42492L7.85502 9.49992L8.56501 10.2099L9.62502 9.14992C10.1893 8.58568 10.5063 7.82039 10.5063 7.02242C10.5063 6.22446 10.1893 5.45917 9.62502 4.89492C9.06077 4.33068 8.29548 4.01368 7.49752 4.01368C6.69955 4.01368 5.93426 4.33068 5.37002 4.89492L1.37002 8.89492C1.08958 9.17373 0.867037 9.50522 0.715177 9.87033C0.563316 10.2354 0.485138 10.627 0.485138 11.0224C0.485138 11.4179 0.563316 11.8094 0.715177 12.1745C0.867037 12.5396 1.08958 12.8711 1.37002 13.1499C1.93943 13.7042 2.70546 14.0099 3.50002 13.9999C4.30157 14.0007 5.07087 13.6843 5.64002 13.1199L4.93002 12.4099C4.74418 12.5966 4.52329 12.7448 4.28003 12.8459C4.03677 12.947 3.77594 12.999 3.51252 12.999C3.24909 12.999 2.98826 12.947 2.745 12.8459C2.50174 12.7448 2.28085 12.5966 2.09502 12.4099Z" />
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4Z"
+      fill="var(--layer-color)"
+    />
+    <path
+      d="M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z"
+      fill="var(--icon-color-primary)"
+    />
   </svg>
 );
 
 export const LinkIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/LinkIcon/LinkIcon',
 }))<IconProps>`
-  path {
+  path:last-of-type {
     fill: ${({ color }) => getCssColorVariable(color)};
   }
 
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
+  height: ${({ size }) => size || '20px'};
+  width: ${({ size }) => size || '20px'};
 `;

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

@@ -73,7 +73,7 @@ export function Heading({
       href={`#${id}`}
       className={concatClassNames('anchor', 'before')}
     >
-      <LinkIcon size="14px" color="--heading-anchor-color" />
+      <LinkIcon color="--heading-anchor-color" />
     </a>
   );
 
@@ -98,6 +98,12 @@ const HeadingContentWrapper = styled.div`
   display: flex;
   gap: var(--spacing-xs);
 
+  & > .anchor {
+    display: flex;
+    align-items: center;
+    height: 1lh;
+  }
+
   & > span {
     display: flex;
     align-items: flex-start;