@redocly/theme 0.58.0-next.9 → 0.59.0-next.0

package/src/components/Tag/variables.ts

@@ -9,12 +9,13 @@ export const tag = css`
   --tag-border-style: solid; //@presenter Border
   --tag-border-radius: var(--border-radius); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
+  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);
-  --tag-badge-border-width: 1.5px;
-  --tag-badge-border-color: #ffffff;
-
+  --tag-badge-border-width: 2px;
+  --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
+  --tag-border-color-focused: var(--color-blue-4); // @presenter Color
 
   /**
     * @tokens Tag spacing
@@ -32,7 +33,7 @@ export const tag = css`
   --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
   
   --tag-margin: 0 5px 0 0; //@presenter Spacing
-  --tag-gap: 5px; //@presenter Spacing
+  --tag-gap: 4px; //@presenter Spacing
 
   /**
     * @tokens Tag size
@@ -58,8 +59,8 @@ export const tag = css`
     * @tokens Tag icon
     */
 
-  --tag-icon-width: 1em; // @presenter Spacing
-  --tag-icon-height: 1em; // @presenter Spacing
+  --tag-icon-width: 14px; // @presenter Spacing
+  --tag-icon-height: 14px; // @presenter Spacing
 
   /**
     * @tokens Tag colors
@@ -72,85 +73,127 @@ export const tag = css`
   .tag-draft,
   .tag-schema,
   .tag-default {
-    --tag-color: var(--text-color-primary); // @presenter Color
+    --tag-color: var(--text-color-secondary); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
     --tag-border-color: var(--border-color-primary); // @presenter Color
+    --tag-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
+    --tag-border-color-hover: var(--color-warm-grey-5); // @presenter Color
+  }
+
+  .tag-green {
+    --tag-color: var(--color-green-8); // @presenter Color
+    --tag-bg-color: var(--color-green-1); // @presenter Color
+    --tag-border-color: var(--color-green-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-green-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-green-2); // @presenter Color
+    --tag-border-color-hover: var(--color-green-6); // @presenter Color
   }
 
-  .tag-green,
   .tag-success,
   .tag-approved {
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-active); // @presenter Color
+    --tag-border-color: var(--color-success-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-success-border-hover); // @presenter Color
+  }
+
+  .tag-red {
+    --tag-color: var(--color-red-7); // @presenter Color
+    --tag-bg-color: var(--color-red-1); // @presenter Color
+    --tag-border-color: var(--color-red-3); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
+    --tag-bg-color-hover: var(--color-red-2); // @presenter Color
+    --tag-border-color-hover: var(--color-red-5); // @presenter Color
   }
 
-  .tag-red,
   .tag-error,
   .tag-declined {
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-active); // @presenter Color
+    --tag-border-color: var(--color-error-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-error-border-hover); // @presenter Color
   }
 
-  .tag-gold,
   .tag-warning,
   .tag-deprecated {
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-active); // @presenter Color
+    --tag-border-color: var(--color-warning-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-warning-border-hover); // @presenter Color
   }
 
-  .tag-blue,
-  .tag-processing {
+  .tag-blue {
+    --tag-color: var(--color-blue-7); // @presenter Color
+    --tag-bg-color: var(--color-blue-1); // @presenter Color
+    --tag-border-color: var(--color-blue-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-blue-2); // @presenter Color
+    --tag-border-color-hover: var(--color-blue-6); // @presenter Color
+  }
+
+  .tag-processing,
+  .tag-info {
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-active); // @presenter Color
+    --tag-border-color: var(--color-info-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
+  }
+
+  .tag-link {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-border-color: var(--color-info-border); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
+    --tag-border-color: var(--color-purple-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-border-color-hover: var(--color-purple-6); // @presenter Color
   }
 
-  .tag-cyan,
-  .tag-option,
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-turquoise-7); // @presenter Color
+  .tag-turquoise,
+  .tag-option {
+    --tag-color: var(--color-turquoise-8); // @presenter Color
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
-    --tag-border-color: var(--color-turquoise-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
+    --tag-border-color: var(--color-turquoise-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-border-color-hover: var(--color-turquoise-7); // @presenter Color
   }
 
-  .tag-yellow {
-    --tag-color: var(--color-carrot-7); // @presenter Color
+  .tag-carrot {
+    --tag-color: var(--color-carrot-8); // @presenter Color
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
-    --tag-border-color: var(--color-carrot-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+    --tag-border-color: var(--color-carrot-6); // @presenter Color
+    --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-border-color-hover: var(--color-carrot-7); // @presenter Color
   }
 
   .tag-magenta,
   .tag-hook {
     --tag-color: var(--color-magenta-7); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
-    --tag-border-color: var(--color-magenta-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
-  }
-
-  .tag-lime {
-    --tag-color: var(--color-green-7); // @presenter Color
-    --tag-bg-color: none; // @presenter Color
-    --tag-border-color: var(--color-green-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
+    --tag-border-color: var(--color-magenta-3); // @presenter Color
+    --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-magenta-2); // @presenter Color
+    --tag-border-color-hover: var(--color-magenta-5); // @presenter Color
   }
 
   .tag-product {
@@ -162,37 +205,56 @@ export const tag = css`
 
   .tag-grass {
     --tag-color: var(--color-grass-8); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-bg-color: var(--color-grass-1); // @presenter Color
     --tag-border-color: var(--color-grass-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-grass-1); // @presenter Color
-  }
-  
-  .tag-purple {
-    --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
-    --tag-border-color: var(--color-purple-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-border-color-hover: var(--color-grass-6); // @presenter Color
   }
 
   .tag-sky {
-    --tag-color: var(--color-sky-9); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-color: var(--color-sky-8); // @presenter Color
+    --tag-bg-color: var(--color-sky-1); // @presenter Color
     --tag-border-color: var(--color-sky-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
+    --tag-border-color-hover: var(--color-sky-7); // @presenter Color
   }
 
   .tag-raspberry {
     --tag-color: var(--color-raspberry-7); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
     --tag-border-color: var(--color-raspberry-3); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-raspberry-1); // @presenter Color
-  }
-
-  .tag-carrot {
-    --tag-color: var(--color-carrot-8); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
-    --tag-border-color: var(--color-carrot-6); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+    --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+    --tag-border-color-hover: var(--color-raspberry-5); // @presenter Color
+  }
+
+  .tag-orange {
+    --tag-color: var(--color-orange-7); // @presenter Color
+    --tag-bg-color: var(--color-orange-1); // @presenter Color
+    --tag-border-color: var(--color-orange-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-border-color-hover: var(--color-orange-5); // @presenter Color
+  }
+
+  .tag-persian-green {
+    --tag-color: var(--color-persian-green-8); // @presenter Color
+    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
+    --tag-border-color: var(--color-persian-green-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-border-color-hover: var(--color-persian-green-6); // @presenter Color
+  }
+
+  .tag-blueberry {
+    --tag-color: var(--color-blueberry-7); // @presenter Color
+    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
+    --tag-border-color: var(--color-blueberry-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+    --tag-border-color-hover: var(--color-blueberry-6); // @presenter Color
   }
 
   /**

package/src/core/constants/catalog.ts

@@ -38,6 +38,8 @@ export const reverseRelationMap: Record<EntityRelationType, EntityRelationType>
   memberOf: 'hasMember',
   triggers: 'triggeredBy',
   triggeredBy: 'triggers',
+  returns: 'returnedBy',
+  returnedBy: 'returns',
 } as const;
 
 export const relationTypeMap: Record<EntityRelationType, string> = {
@@ -66,6 +68,8 @@ export const relationTypeMap: Record<EntityRelationType, string> = {
   memberOf: 'Member of',
   triggers: 'Triggers',
   triggeredBy: 'Triggered by',
+  returns: 'Returns',
+  returnedBy: 'Returned by',
 };
 
 export enum GraphHandleType {

package/src/core/contexts/CodeSnippetContext.tsx

@@ -1,31 +1,67 @@
-import { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useCallback, useMemo } from 'react';
 
-export type CodeSnippetContextType = {
-  activeSnippetName: string;
-  setActiveSnippetName: (name: string) => void;
-};
+import { useLocalState } from '../hooks/use-local-state';
 
 export const CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
 
+type CodeSnippetContextType = {
+  activeSnippets: Record<string, string>;
+  setActiveSnippet: (groupId: string, snippetId: string) => void;
+};
+
 export const CodeSnippetContext = createContext<CodeSnippetContextType | null>(null);
 
-export function useActiveCodeSnippetName(
-  mode: 'tabs' | 'dropdown',
-): [string, (name: string) => void] {
+export function CodeSnippetProvider({ children }: { children: React.ReactNode }) {
+  const [activeSnippets, setActiveSnippets] = useLocalState<Record<string, string>>(
+    CODE_GROUP_SNIPPET_NAME_KEY,
+    {},
+  );
+
+  const setActiveSnippet = useCallback(
+    (groupId: string, snippetId: string) => {
+      setActiveSnippets({ ...activeSnippets, [groupId]: snippetId });
+    },
+    [activeSnippets, setActiveSnippets],
+  );
+
+  const contextValue = { activeSnippets, setActiveSnippet };
+
+  return <CodeSnippetContext.Provider value={contextValue}>{children}</CodeSnippetContext.Provider>;
+}
+
+export const useCodeSnippetContext = (): CodeSnippetContextType => {
   const context = useContext(CodeSnippetContext);
+
   if (!context) {
     throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
   }
 
-  const [activeSnippetName, setActiveSnippetName] = useState(
-    mode === 'tabs' ? '' : context.activeSnippetName,
+  return context;
+};
+
+export const useActiveCodeSnippetId = (
+  groupId?: string,
+  availableSnippets?: { id: string }[],
+): [string, (id: string) => void] => {
+  const { activeSnippets, setActiveSnippet } = useCodeSnippetContext();
+
+  const storedSnippetId = groupId ? activeSnippets[groupId] || '' : '';
+
+  const activeId = useMemo(() => {
+    if (!availableSnippets?.length) return storedSnippetId;
+
+    const found = storedSnippetId && availableSnippets.find((s) => s.id === storedSnippetId);
+    return found ? storedSnippetId : availableSnippets[0]?.id || '';
+  }, [storedSnippetId, availableSnippets]);
+
+  const setActiveSnippetId = useCallback(
+    (id: string) => {
+      if (groupId) {
+        setActiveSnippet(groupId, id);
+      }
+    },
+    [groupId, setActiveSnippet],
   );
 
-  if (mode === 'tabs') {
-    // use non-synced state for tabs mode
-    return [activeSnippetName, setActiveSnippetName];
-  } else {
-    // use global synced state for dropdown mode
-    return [context.activeSnippetName, context.setActiveSnippetName];
-  }
-}
+  return [activeId, setActiveSnippetId];
+};

package/src/core/hooks/use-codeblock-tabs-controls.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState, useCallback, useMemo } from 'react';
 
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 
 type CodeBlockTabsProps = {
-  tabs: CodeBlockTabItems;
+  tabs: CodeBlockItems;
   containerRef: React.RefObject<HTMLDivElement | null>;
   tabRefs: React.RefObject<HTMLButtonElement[]>;
 };

package/src/core/hooks/use-local-state.ts

@@ -1,30 +1,39 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+
+import { isBrowser } from '../utils/js-utils';
+
+function getStoredValue<T>(key: string, fallback: T): T {
+  if (!isBrowser()) return fallback;
 
-function getInitialValue<T>(key: string, initialValue: T): T {
-  if (typeof window === 'undefined') {
-    return initialValue;
-  }
   try {
     const savedValue = localStorage.getItem(key);
-    if (savedValue) {
-      return JSON.parse(savedValue) as T;
-    }
-  } catch (error) {
-    console.error(`Error reading from localStorage for key "${key}":`, error);
+    return savedValue ? (JSON.parse(savedValue) as T) : fallback;
+  } catch {
+    return fallback;
   }
-  return initialValue;
 }
 
 export function useLocalState<T>(key: string, initialValue: T): [T, (value: T) => void] {
-  const [value, setValue] = useState<T>(() => getInitialValue(key, initialValue));
+  const [value, setValue] = useState<T>(initialValue);
 
+  // Load stored value from localStorage after component mounts
+  // This ensures SSR compatibility: server and client both start with initialValue,
+  // then client loads the actual stored value without hydration mismatch
   useEffect(() => {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch (error) {
-      console.error(`Error writing to localStorage for key "${key}":`, error);
-    }
-  }, [key, value]);
+    if (!isBrowser()) return;
+    setValue(getStoredValue(key, initialValue));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  const handleSetValue = useCallback(
+    (newValue: T) => {
+      setValue(newValue);
+      if (isBrowser()) {
+        localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    },
+    [key],
+  );
 
-  return [value, setValue] as const;
+  return [value, handleSetValue] as const;
 }

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

@@ -12,10 +12,19 @@ import { useThemeHooks } from './use-theme-hooks';
 import { useThemeConfig } from './use-theme-config';
 import { ClipboardService } from '../utils/clipboard-service';
 import { IS_BROWSER } from '../utils/dom';
+import { CursorIcon } from '../../icons/CursorIcon/CursorIcon';
 
 const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'] as const;
+const CURSOR_URL =
+  'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
 
-export function usePageActions(pageSlug: string): PageAction[] {
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor';
+
+export function usePageActions(
+  pageSlug: string,
+  mcpUrl?: string,
+  actions?: PageActionType[],
+): PageAction[] {
   const { useTranslate, usePageData, usePageProps, usePageSharedData } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -32,7 +41,7 @@ export function usePageActions(pageSlug: string): PageAction[] {
   );
   const { isPublic } = usePageData() || {};
 
-  const actions: PageAction[] = useMemo(() => {
+  const result: PageAction[] = useMemo(() => {
     if (shouldHideAllActions) {
       return [];
     }
@@ -54,9 +63,49 @@ export function usePageActions(pageSlug: string): PageAction[] {
       return url.toString();
     }
 
-    return (themeConfig.navigation?.actions?.items || DEFAULT_ENABLED_ACTIONS)
+    return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
       .map((action) => {
+        function generateMCPConfig(isCursor?: boolean): string {
+          const jsonConfig = {
+            'mcp-server': {
+              url: mcpUrl,
+              description: 'MCP Server',
+            },
+          };
+          if (isCursor) {
+            const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace(
+              '$BASE64_ENCODED_CONFIG',
+              btoa(JSON.stringify(jsonConfig['mcp-server'])),
+            );
+            return url;
+          }
+
+          return JSON.stringify(jsonConfig, null, 2);
+        }
+
         switch (action) {
+          case 'mcp-cursor':
+            if (!mcpUrl) {
+              return null;
+            }
+
+            return {
+              buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
+              title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
+              description: translate(
+                'page.actions.cursorMcpDescription',
+                'Install MCP server on Cursor',
+              ),
+              iconComponent: CursorIcon,
+              onClick: () => {
+                try {
+                  const url = generateMCPConfig(true);
+                  window.open(url, '_blank');
+                } catch (error) {
+                  console.error(error);
+                }
+              },
+            };
           case 'copy':
             return {
               buttonText: translate('page.actions.copyButtonText', 'Copy'),
@@ -121,9 +170,17 @@ export function usePageActions(pageSlug: string): PageAction[] {
         }
       })
       .filter((action) => action !== null);
-  }, [themeConfig, translate, pageSlug, isPublic, shouldHideAllActions]);
-
-  return actions;
+  }, [
+    shouldHideAllActions,
+    pageSlug,
+    themeConfig.navigation?.actions?.items,
+    actions,
+    mcpUrl,
+    translate,
+    isPublic,
+  ]);
+
+  return result;
 }
 
 function shouldHidePageActions(