@redocly/theme 0.69.0-next.5 → 0.69.0-next.7

package/src/components/Tag/variables.ts

@@ -8,9 +8,9 @@ export const tag = css`
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
-  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius-focused: var(--tag-border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);

package/src/components/Tags/variables.ts

@@ -13,6 +13,6 @@ export const httpTag = css`
   --http-tag-bg-color: none;
 
   --counter-tag-padding: 0px var(--spacing-xxs);
-  --counter-tag-border-radius: var(--border-radius);
+  --counter-tag-border-radius: var(--tag-border-radius);
   --counter-tag-min-width: var(--spacing-md);
 `

package/src/components/Toast/variables.ts

@@ -16,7 +16,7 @@ export const toast = css`
   --toast-max-width: 360px;
   --toast-bg-color: var(--layer-color); // @presenter Color
   --toast-border: var(--border-width) var(--border-style) var(--border-color-secondary); // @presenter Border
-  --toast-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --toast-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --toast-font-family: var(--font-family-base); // @presenter FontFamily
 
   /**

package/src/components/Tooltip/AnchorTooltip.tsx

@@ -250,7 +250,7 @@ const TooltipBody = styled.span.attrs<{ $anchorName: string }>(({ $anchorName })
   overflow-wrap: break-word;
   text-align: left;
 
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   transition: opacity 0.3s ease-out;
 
   font-size: var(--font-size-base);
@@ -270,7 +270,7 @@ const TooltipBody = styled.span.attrs<{ $anchorName: string }>(({ $anchorName })
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+  border: var(--tooltip-border-width, 2px) var(--tooltip-border-style, solid)
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 

package/src/components/Tooltip/JsTooltip.tsx

@@ -254,7 +254,7 @@ const TooltipBody = styled.span<{
   word-break: normal;
   overflow-wrap: break-word;
 
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   transition: opacity 0.3s ease-out;
 
   font-size: var(--font-size-base);
@@ -274,7 +274,7 @@ const TooltipBody = styled.span<{
 
   background: var(--tooltip-bg-color);
   color: var(--tooltip-text-color);
-  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
+  border: var(--tooltip-border-width, 2px) var(--tooltip-border-style, solid)
     var(--tooltip-border-color, transparent);
   box-shadow: var(--bg-raised-shadow);
 

package/src/components/UserMenu/variables.ts

@@ -49,7 +49,7 @@ export const userMenu = css`
   --user-menu-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --user-menu-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --user-menu-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --user-menu-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --user-menu-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --user-menu-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color

package/src/core/constants/mcp.ts

@@ -2,6 +2,10 @@ import type { MCPOption } from '../types/mcp';
 
 export const DEFAULT_MCP_SERVER_NAME = 'mcp-server';
 
+export const MCP_ROUTE = '/mcp';
+
+export const PUBLIC_MCP_ROUTE = '/mcp-public';
+
 export const DEFAULT_MCP_OPTIONS: MCPOption[] = [
   'cursor',
   'vscode',

package/src/core/constants/search.ts

@@ -29,13 +29,13 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
     headerKey: 'search.ai.error.header.forbidden',
     headerDefault: 'Feature Unavailable',
     messageKey: 'search.ai.error.description.forbidden',
-    messageDefault: 'AI Search is currently unavailable.',
+    messageDefault: 'AI assistant is currently unavailable.',
   },
   [AiSearchError.Unauthorized]: {
     headerKey: 'search.ai.error.header.unauthorized',
     headerDefault: 'Authentication Required',
     messageKey: 'search.ai.error.description.unauthorized',
-    messageDefault: 'You are not authorized to use AI Search.',
+    messageDefault: 'You are not authorized to use AI assistant.',
   },
   [AiSearchError.HttpRequestFailed]: defaultErrorConfig,
   [AiSearchError.EmptyResponse]: defaultErrorConfig,

package/src/core/hooks/use-control.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 
 const DEFAULT_CONTROL_OPEN_DELAY = 300;
 
@@ -18,6 +18,10 @@ export const useControl = (initialVal = false): UseControlReturnType => {
     }
   }, []);
 
+  useEffect(() => {
+    return clearOpenTimer;
+  }, [clearOpenTimer]);
+
   const handleOpen = useCallback(() => {
     clearOpenTimer();
     timeoutRef.current = setTimeout(() => {

package/src/core/hooks/use-mcp-config.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { useThemeHooks } from './use-theme-hooks';
 import { IS_BROWSER } from '../utils/dom';
-import { DEFAULT_MCP_SERVER_NAME } from '../constants';
+import { DEFAULT_MCP_SERVER_NAME, MCP_ROUTE, PUBLIC_MCP_ROUTE } from '../constants';
 import { generateMCPDeepLink } from '../utils/mcp';
 import { withPathPrefix } from '../utils/urls';
 
@@ -13,20 +13,29 @@ export type McpConfig = {
   cursorUrl: string;
   vscodeUrl: string;
   isMcpDisabled: boolean;
+  isPublicEndpointPage: boolean;
+  alternateServerUrl?: string;
 };
 
 export function useMCPConfig(): McpConfig {
-  const { useMcpData } = useThemeHooks();
+  const { useMcpData, usePageData } = useThemeHooks();
 
   const {
-    docs: { enabled, name },
+    docs: { enabled, name, publicEndpoint },
   } = useMcpData();
+  const pageSlug = usePageData()?.slug;
 
   const origin = IS_BROWSER
     ? window.location.origin
     : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
   const serverName = name || DEFAULT_MCP_SERVER_NAME;
-  const serverUrl = `${origin}${withPathPrefix('/mcp')}`;
+  const isPublicEndpointPage = pageSlug === withPathPrefix(PUBLIC_MCP_ROUTE);
+  const serverUrl = `${origin}${withPathPrefix(isPublicEndpointPage ? PUBLIC_MCP_ROUTE : MCP_ROUTE)}`;
+  const alternateServerUrl = isPublicEndpointPage
+    ? `${origin}${withPathPrefix(MCP_ROUTE)}`
+    : publicEndpoint
+      ? `${origin}${withPathPrefix(PUBLIC_MCP_ROUTE)}`
+      : undefined;
   const isMcpDisabled = !enabled || false;
 
   const cursorUrl = useMemo(
@@ -46,5 +55,7 @@ export function useMCPConfig(): McpConfig {
     cursorUrl,
     vscodeUrl,
     isMcpDisabled,
+    isPublicEndpointPage,
+    alternateServerUrl,
   };
 }

package/src/core/openapi/index.ts

@@ -1,5 +1,5 @@
 // This file is intended to provide selective imports from @redocly/theme/core
-// to reduce bundle size by exporting only functionality used in the @redocly/openapi-docs package.
+// to reduce bundle size by exporting only functionality used in the @redocly/api-docs package.
 //
 // This selective import approach will help with tree shaking and reduce
 // the overall bundle size by avoiding importing the entire theme package

package/src/core/styles/global.ts

@@ -20,7 +20,7 @@ import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
-import { aiAssistantButton, connectMCPButton } from '@redocly/theme/components/Buttons/variables';
+import { aiAssistantButton } from '@redocly/theme/components/Buttons/variables';
 import { navbar } from '@redocly/theme/components/Navbar/variables';
 import { search } from '@redocly/theme/components/Search/variables';
 import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
@@ -454,18 +454,24 @@ const borders = css`
 
   --border-color-primary: var(--color-warm-grey-3); // Raised dividers
   --border-color-secondary: var(--color-warm-grey-2); // Default dividers, borders
-  --border-color-invers: var(--color-warm-grey-10);
+  --border-color-inverse: var(--color-warm-grey-10);
+  --border-color-invers: var(--border-color-inverse, var(--color-warm-grey-10)); // Deprecated: use --border-color-inverse
 
   /**
      * @tokens Border Radius
      * @presenter BorderRadius
      */
 
+  --border-radius-none: 0;
   --border-radius: 4px;
   --border-radius-md: calc(var(--border-radius) * 1.5);
   --border-radius-lg: calc(var(--border-radius) * 2);
   --border-radius-xl: calc(var(--border-radius) * 3);
   --border-radius-xxl: calc(var(--border-radius) * 4);
+  --border-radius-xxxl: calc(var(--border-radius) * 6);
+  --border-radius-full: 999px;
+
+  // @tokens End
 `;
 
 const headingsTypography = css`
@@ -824,7 +830,7 @@ const badges = css`
 
   --badge-text-color: var(--text-color-inverse); // @presenter Color
   --badge-bg-color: var(--color-purple-6); // @presenter Color
-  --badge-border-radius: var(--border-radius); // @presenter BorderRadius
+  --badge-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   /**
     * @tokens Deprecated Badge
@@ -832,7 +838,7 @@ const badges = css`
 
   --badge-deprecated-text-color: var(--color-warm-grey-1); // @presenter Color
   --badge-deprecated-bg-color: var(--color-warning-base); // @presenter Color
-  --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
+  --badge-deprecated-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
    /**
     * @tokens Webhook Badge
@@ -840,7 +846,7 @@ const badges = css`
 
   --badge-webhook-text-color: var(--color-warm-grey-1); // @presenter Color
   --badge-webhook-bg-color: var(--color-purple-7); // @presenter Color
-  --badge-webhook-border-radius: var(--border-radius); // @presenter BorderRadius
+  --badge-webhook-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   /**
     * @tokens Audience Badge
@@ -1048,11 +1054,6 @@ const pages = css`
   --page-mcp-405-margin-vertical-mobile: var(--spacing-xxl);
   --page-mcp-405-margin-horizontal-mobile: 1rem;
 
-  --page-mcp-405-status-text-color: var(--text-color-helper);
-  --page-mcp-405-status-font-size: var(--font-size-lg); // @presenter FontSize
-  --page-mcp-405-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
-  --page-mcp-405-status-line-height: var(--line-height-lg); // @presenter LineHeight
-
   --page-mcp-405-title-text-color: var(--text-color-primary);
   --page-mcp-405-title-font-size: 42px; // @presenter FontSize
   --page-mcp-405-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
@@ -1269,7 +1270,7 @@ const tree = css`
 
     *::-webkit-scrollbar-thumb {
         background-color: var(--color-warm-grey-2);
-        border-radius: var(--border-radius);
+        border-radius: var(--border-radius-full);
     }
 
     *::-webkit-scrollbar-thumb:hover {
@@ -1337,7 +1338,6 @@ export const styles = css<{ palette?: string }>`
     ${breadcrumbs}
     ${button}
     ${aiAssistantButton}
-    ${connectMCPButton}
     ${cards}
     ${catalog}
     ${catalogClassic}

package/src/core/styles/palette.ts

@@ -244,4 +244,6 @@ function brandPaletteLight(palette: string | undefined): RuleSet<object> {
  */
 export const activeBrandPaletteLight = css<{ palette?: string }>`
   ${({ palette }) => brandPaletteLight(palette)}
+
+  // @tokens End
 `;

package/src/core/types/button-group.ts

@@ -0,0 +1,2 @@
+export type ButtonGroupVariant = 'primary' | 'secondary' | 'outlined';
+export type ButtonGroupSize = 'small' | 'medium' | 'large';

package/src/core/types/catalog.ts

@@ -212,13 +212,8 @@ export type BffCatalogEntityList = BffCatalogList<BffCatalogEntity>;
 export type BffCatalogRelatedEntityList = BffCatalogList<BffCatalogRelatedEntity>;
 
 export type Page = {
-  // Optional so existing code that builds a Page keeps compiling; the catalog BFF always emits both.
-  nextPage?: string | null;
-  previousPage?: string | null;
-  endCursor: string | null;
-  startCursor: string | null;
-  hasNextPage: boolean;
-  hasPrevPage: boolean;
+  nextPage: string | null;
+  previousPage: string | null;
   limit: number;
   total: number;
 };

package/src/core/types/common.ts

@@ -1,5 +1,8 @@
+import type React from 'react';
 import { DEFAULT_COLOR_MODES } from '../constants';
 
 export type Plural<T extends string> = `${T}s`;
 
 export type ColorMode = (typeof DEFAULT_COLOR_MODES)[keyof typeof DEFAULT_COLOR_MODES];
+
+export type RenderableChildren<Context> = React.ReactNode | ((context: Context) => React.ReactNode);

package/src/core/types/hooks.ts

@@ -143,6 +143,7 @@ export type ThemeHooks = {
     docs: {
       enabled: boolean;
       name?: string;
+      publicEndpoint?: boolean;
     };
   };
   useSidebarItems: (activeVersion?: Version | null) => {

package/src/core/types/index.ts

@@ -22,3 +22,4 @@ export type * from './segmented';
 export type * from './tooltip';
 export type * from './toast';
 export type * from './link';
+export type * from './button-group';

package/src/core/types/l10n.ts

@@ -136,6 +136,9 @@ export type TranslationKey =
   | 'page.notFound.description'
   | 'page.mcpNotAllowed.title'
   | 'page.mcpNotAllowed.description'
+  | 'page.mcpNotAllowed.publicNote'
+  | 'page.mcpNotAllowed.publicEndpointHint'
+  | 'page.mcpNotAllowed.mainEndpointHint'
   | 'page.mcpNotAllowed.snippets.terminal.hint'
   | 'page.mcpNotAllowed.snippets.claudeCode.headline'
   | 'page.mcpNotAllowed.snippets.claudeDesktop.headline'
@@ -290,6 +293,8 @@ export type TranslationKey =
   | 'page.actions.connectMcp.codexDescription'
   | 'page.actions.connectMcp.copyConfig'
   | 'page.actions.connectMcp.copyConfigDescription'
+  | 'page.actions.connectMcp.moreOptions'
+  | 'page.actions.moreActions'
   | 'openapi.download.description.title'
   | 'openapi.info.title'
   | 'openapi.info.contact.url'
@@ -297,6 +302,7 @@ export type TranslationKey =
   | 'openapi.info.license'
   | 'openapi.info.termsOfService'
   | 'openapi.info.metadata.title'
+  | 'graphql.info.metadata.title'
   | 'openapi.key'
   | 'openapi.value'
   | 'openapi.enum'
@@ -386,6 +392,8 @@ export type TranslationKey =
   | 'openapi.mcp.inputExample'
   | 'openapi.mcp.outputSchema'
   | 'openapi.mcp.outputExample'
+  | 'openapi.mcp.exampleTitle'
+  | 'openapi.mcp.argumentsExample'
   | 'asyncapi.download.description.title'
   | 'asyncapi.info.title'
   | 'asyncapi.info.contact.url'
@@ -466,7 +474,6 @@ export type TranslationKey =
   | 'graphql.sample'
   | 'graphql.referenced'
   | 'graphql.content.fragment'
-  | 'button.copy.tooltipText'
   | 'button.download.tooltipText'
   | 'button.externalLink.tooltipText'
   | 'button.email.tooltipText'

package/src/core/utils/RenderWithLink.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+// Splits a translated sentence on <link>...</link> markers and renders the
+// marked phrase as an anchor, so each locale keeps its own word order.
+export function renderWithLink(text: string, href: string): JSX.Element {
+  const [before, label, after] = text.split(/<link>|<\/link>/);
+  if (label === undefined) {
+    return <>{text}</>;
+  }
+  return (
+    <>
+      {before}
+      <a href={href}>{label}</a>
+      {after}
+    </>
+  );
+}

package/src/core/utils/index.ts

@@ -48,3 +48,4 @@ export * from './get-auto-dismiss-duration';
 export * from './tooltip-placement';
 export * from './telemetry/get-base-data-attributes';
 export * from './telemetry/generate-before-after-context';
+export * from './RenderWithLink';

package/src/icons/LinkIcon/LinkIcon.tsx

@@ -15,7 +15,7 @@ const Icon = (props: IconProps) => (
     {...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"
+      d="M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z"
       fill="var(--layer-color)"
     />
     <path

package/src/index.ts

@@ -15,6 +15,8 @@ export * from '@redocly/theme/components/Badge/Badge';
 export * from '@redocly/theme/components/Dropdown/Dropdown';
 export * from '@redocly/theme/components/Dropdown/DropdownMenu';
 export * from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+export * from '@redocly/theme/components/Dropdown/DropdownMenuItemContent';
+export * from '@redocly/theme/components/SplitButton/SplitButton';
 export * from '@redocly/theme/components/Loaders/Loading';
 export * from '@redocly/theme/components/LoadMore/LoadMore';
 export * from '@redocly/theme/components/Link/Link';

package/src/layouts/McpNotAllowed.tsx

@@ -3,17 +3,18 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useMCPConfig } from '@redocly/theme/core/hooks';
+import { renderWithLink } from '@redocly/theme/core/utils';
 import { ConnectMCPButton } from '@redocly/theme/components/Buttons/ConnectMCPButton';
 import { McpConnectionTabs } from '@redocly/theme/components/MCP/McpConnectionTabs';
 
 export default function McpNotAllowed(): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const { isPublicEndpointPage, alternateServerUrl } = useMCPConfig();
 
   return (
     <NotAllowedWrapper data-component-name="layouts/McpNotAllowed">
-      <StatusText>405</StatusText>
       <Title data-translation-key="page.mcpNotAllowed.title">
         {translate('page.mcpNotAllowed.title', 'Connect to the MCP server')}
       </Title>
@@ -23,6 +24,36 @@ export default function McpNotAllowed(): JSX.Element {
           'To use this MCP server, register it in your MCP client (for example: VS Code, Cursor, or Claude Code).',
         )}
       </Description>
+      {isPublicEndpointPage && (
+        <Description data-translation-key="page.mcpNotAllowed.publicNote">
+          {translate(
+            'page.mcpNotAllowed.publicNote',
+            'This endpoint serves publicly available content only and requires no login.',
+          )}
+        </Description>
+      )}
+      {isPublicEndpointPage && alternateServerUrl && (
+        <Description data-translation-key="page.mcpNotAllowed.mainEndpointHint">
+          {renderWithLink(
+            translate(
+              'page.mcpNotAllowed.mainEndpointHint',
+              'To access content available to your account, use the <link>main MCP endpoint</link>.',
+            ),
+            alternateServerUrl,
+          )}
+        </Description>
+      )}
+      {!isPublicEndpointPage && alternateServerUrl && (
+        <Description data-translation-key="page.mcpNotAllowed.publicEndpointHint">
+          {renderWithLink(
+            translate(
+              'page.mcpNotAllowed.publicEndpointHint',
+              'To connect anonymously without an account, use the <link>public endpoint</link>.',
+            ),
+            alternateServerUrl,
+          )}
+        </Description>
+      )}
       <ButtonWrapper>
         <ConnectMCPButton alignment="start" />
       </ButtonWrapper>
@@ -46,13 +77,6 @@ const NotAllowedWrapper = styled.div`
   }
 `;
 
-const StatusText = styled.div`
-  color: var(--page-mcp-405-status-text-color);
-  font-size: var(--page-mcp-405-status-font-size);
-  line-height: var(--page-mcp-405-status-line-height);
-  font-weight: var(--page-mcp-405-status-font-weight);
-`;
-
 const Title = styled.div`
   font-size: var(--page-mcp-405-title-font-size);
   line-height: var(--page-mcp-405-title-line-height);

package/src/markdoc/components/Cards/variables.ts

@@ -24,9 +24,9 @@ export const cards = css`
   --card-link-icon-width: 14px;
   --card-link-icon-height: 14px;
   --card-border-width: 1px;
-  --card-image-border-radius: var(--border-radius-md);
+  --card-image-border-radius: var(--border-radius-xl);
   --card-image-aspect-ratio: 16 / 9;
-  --card-icon-border-radius: var(--border-radius-md);
+  --card-icon-border-radius: var(--border-radius-lg);
   --card-icon-border: var(--card-border-width) var(--border-style) var(--card-icon-border-color);
   --card-icon-padding: var(--spacing-sm);
   --card-icon-size: 24px;
@@ -49,7 +49,7 @@ export const cards = css`
   --card-cta-icon-height: 14px;
   --card-badge-margin: 0 var(--spacing-xxs) 0 0 ;
   --card-badge-padding: 0 var(--spacing-xxs);
-  --card-badge-border-radius: var(--border-radius);
+  --card-badge-border-radius: var(--badge-border-radius);
   --card-badge-font-size: var(--font-size-sm);
   --card-badge-font-weight: var(--font-weight-regular);
   --card-badge-line-height: var(--line-height-sm);
@@ -88,7 +88,7 @@ export const cards = css`
     --card-bg-color: transparent;
     --card-bg-color-hover: var(--layer-color);
     --card-border-width: 0;
-    --card-border-radius: var(--border-radius-md);
+    --card-border-radius: var(--border-radius-xl);
     --card-padding: var(--spacing-xs) 0;
     --card-icon-border-color-hover: var(--card-icon-border-color);
     --card-icon-bg-color-hover: var(--card-icon-bg-color);
@@ -154,5 +154,7 @@ export const cards = css`
   .card-icon-color-blueberry {
     --card-icon-color: var(--color-blueberry-7);
   }
+
+  // @tokens End
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -63,6 +63,7 @@ const CodePanelWrapper = styled.div`
   background-color: var(--code-panel-bg-color);
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
+  overflow: clip;
   --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   position: sticky;

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -153,7 +153,7 @@ const StepContent = styled.div.withConfig({
   margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);
   padding: var(--spacing-md) var(--spacing-lg);
   background: ${({ isActive }) => (isActive ? 'var(--layer-color)' : 'none')};
-  border-radius: var(--border-radius);
+  border-radius: var(--code-step-border-radius);
 
   &:hover {
     background-color: ${({ isActive }) =>

package/src/markdoc/components/CodeWalkthrough/variables.ts

@@ -7,10 +7,11 @@ export const codeWalkthrough = css`
 --code-step-bg-active: var(--layer-color);
 --code-step-bg-hover: var(--color-hover-base);
 --code-step-bg-active-hover: var(--layer-color-hover);
+--code-step-border-radius: var(--border-radius-lg);
 
 --code-panel-bg-color: var(--layer-color);
 --code-panel-line-numbering-color: var(--text-color-disabled);
 --code-panel-header-height: var(--spacing-lg);
 --code-panel-border-color: var(--border-color-secondary);
---code-panel-border-radius: var(--border-radius);
+--code-panel-border-radius: var(--border-radius-xl);
 `;

package/src/markdoc/components/Tabs/TabList.tsx

@@ -173,6 +173,7 @@ export function TabList({
   });
 
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     onReadyChange?.(isReady);
   }, [isReady, onReadyChange]);
 
@@ -281,6 +282,7 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
   });
 
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
     const container = tabsContainerRef.current;
 
@@ -302,6 +304,7 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
       const moreButtonRect = moreButton.getBoundingClientRect();
       const containerRect = container.getBoundingClientRect();
 
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
       setHighlightStyle({
         left: moreButtonRect.left - containerRect.left,
         width: moreButtonRect.width,
@@ -319,6 +322,7 @@ const useHighlightBarAnimation = (props: UseHighlightBarAnimationProps) => {
 
     if (visibleTabs.includes(activeIndex)) {
       activeTabElement.classList.add('active');
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
       setHighlightStyle({ left: offsetLeft, width: offsetWidth });
       return;
     }
@@ -400,8 +404,8 @@ export const TabItem = styled.li.withConfig({
       right: -4px;
       bottom: -2px;
       left: -4px;
-      border: 1px solid var(--button-border-color-focused);
-      border-radius: 6px;
+      border: var(--border-width) var(--border-style) var(--button-border-color-focused);
+      border-radius: var(--border-radius-md);
       pointer-events: none;
     }
   }

package/src/markdoc/components/Tabs/Tabs.tsx

@@ -144,7 +144,9 @@ function useValidateActiveTab(
   initialTab: string,
 ) {
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     const availableLabels = childrenArray.map((child) => child.props.label);
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
     if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
       setActiveTab(initialTab);
     }
@@ -221,8 +223,8 @@ export const TabContent = styled.div`
       right: -4px;
       bottom: -2px;
       left: -4px;
-      border: 1px solid var(--button-border-color-focused);
-      border-radius: 6px;
+      border: var(--border-width) var(--border-style) var(--button-border-color-focused);
+      border-radius: var(--border-radius-md);
       pointer-events: none;
     }
   }