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

package/src/core/hooks/use-connect-mcp-button.ts

@@ -6,13 +6,15 @@ import type { MCPOption } from '../types';
 import { useThemeHooks } from './use-theme-hooks';
 import { useMCPConfig } from './use-mcp-config';
 import { ClipboardService } from '../utils/clipboard-service';
+import { DEFAULT_MCP_OPTIONS } from '../constants/mcp';
+import { generateClaudeCodeCommand, generateCodexCommand } from '../utils/mcp';
 
 export type McpButtonOptions = {
   options?: MCPOption[];
 };
 
 export type McpButtonSettings = {
-  isCopied: boolean;
+  copiedOption: MCPOption | null;
   cursorUrl: string;
   vscodeUrl: string;
   triggerButtonText: string;
@@ -23,35 +25,41 @@ export type McpButtonSettings = {
 const COPIED_RESET_TIMEOUT = 1000;
 
 export function useConnectMCPButton({
-  options = ['cursor', 'vscode', 'copy'],
+  options = DEFAULT_MCP_OPTIONS,
 }: McpButtonOptions = {}): McpButtonSettings {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { serverName, serverUrl, cursorUrl, vscodeUrl } = useMCPConfig();
-  const [isCopied, setIsCopied] = useState(false);
+  const [copiedOption, setCopiedOption] = useState<MCPOption | null>(null);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const resetCopied = useCallback(
-    debounce(() => setIsCopied(false), COPIED_RESET_TIMEOUT),
+    debounce(() => setCopiedOption(null), COPIED_RESET_TIMEOUT),
     [],
   );
 
   const handleAction = useCallback(
     (action: MCPOption) => {
-      if (action === 'copy') {
-        const config = {
-          [serverName]: {
-            url: serverUrl,
-            description: 'MCP Server',
-          },
-        };
-        ClipboardService.copyCustom(JSON.stringify(config, null, 2));
-        setIsCopied(true);
+      const connection = { serverName, url: serverUrl };
+      const copyTextMap: Partial<Record<MCPOption, string>> = {
+        copy: JSON.stringify(
+          { [serverName]: { url: serverUrl, description: 'MCP Server' } },
+          null,
+          2,
+        ),
+        'claude-code': generateClaudeCodeCommand(connection),
+        codex: generateCodexCommand(connection),
+      };
+
+      const copyText = copyTextMap[action];
+      if (copyText !== undefined) {
+        ClipboardService.copyCustom(copyText);
+        setCopiedOption(action);
         resetCopied();
         return;
       }
 
-      const urlMap: Record<Exclude<MCPOption, 'copy'>, string> = {
+      const urlMap: Partial<Record<MCPOption, string>> = {
         cursor: cursorUrl,
         vscode: vscodeUrl,
       };
@@ -69,7 +77,7 @@ export function useConnectMCPButton({
   const visibleOptions = useMemo(() => options.filter(Boolean), [options]);
 
   return {
-    isCopied,
+    copiedOption,
     cursorUrl,
     vscodeUrl,
     triggerButtonText,

package/src/core/styles/global.ts

@@ -1050,8 +1050,8 @@ const pages = css`
 
   --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-line-height: var(--line-height-lg); // @presenter LineHeight
   --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
@@ -1067,6 +1067,11 @@ const pages = css`
   --page-mcp-405-description-font-size-mobile: var(--font-size-lg);
   --page-mcp-405-description-line-height-mobile: var(--line-height-lg);
 
+  --page-mcp-405-snippets-font-size: var(--font-size-base); // @presenter FontSize
+  --page-mcp-405-snippets-line-height: var(--line-height-base); // @presenter LineHeight
+  --page-mcp-405-snippets-hint-text-color: var(--text-color-secondary);
+  --page-mcp-405-snippets-code-padding-right: var(--spacing-xxl);
+
    // @tokens End
 
   /**

package/src/core/types/catalog.ts

@@ -212,6 +212,9 @@ 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;

package/src/core/types/l10n.ts

@@ -136,6 +136,19 @@ export type TranslationKey =
   | 'page.notFound.description'
   | 'page.mcpNotAllowed.title'
   | 'page.mcpNotAllowed.description'
+  | 'page.mcpNotAllowed.snippets.terminal.hint'
+  | 'page.mcpNotAllowed.snippets.claudeCode.headline'
+  | 'page.mcpNotAllowed.snippets.claudeDesktop.headline'
+  | 'page.mcpNotAllowed.snippets.claudeDesktop.instruction'
+  | 'page.mcpNotAllowed.snippets.chatgptApp.headline'
+  | 'page.mcpNotAllowed.snippets.chatgptApp.instruction'
+  | 'page.mcpNotAllowed.snippets.codexCli.headline'
+  | 'page.mcpNotAllowed.snippets.prompt.headline'
+  | 'page.mcpNotAllowed.snippets.prompt.hint'
+  | 'page.mcpNotAllowed.snippets.json.hint'
+  | 'page.mcpNotAllowed.tabs.claude'
+  | 'page.mcpNotAllowed.tabs.chatgpt'
+  | 'page.mcpNotAllowed.tabs.json'
   | 'page.lastUpdated.timeago'
   | 'page.lastUpdated.on'
   | 'catalog.filters.placeholder'
@@ -271,6 +284,10 @@ export type TranslationKey =
   | 'page.actions.connectMcp.cursorDescription'
   | 'page.actions.connectMcp.vscode'
   | 'page.actions.connectMcp.vscodeDescription'
+  | 'page.actions.connectMcp.claudeCode'
+  | 'page.actions.connectMcp.claudeCodeDescription'
+  | 'page.actions.connectMcp.codex'
+  | 'page.actions.connectMcp.codexDescription'
   | 'page.actions.connectMcp.copyConfig'
   | 'page.actions.connectMcp.copyConfigDescription'
   | 'openapi.download.description.title'

package/src/core/types/mcp.ts

@@ -1,6 +1,6 @@
 export type MCPClientType = 'cursor' | 'vscode';
 
-export type MCPOption = 'cursor' | 'vscode' | 'copy';
+export type MCPOption = 'cursor' | 'vscode' | 'claude-code' | 'codex' | 'copy';
 
 export type McpConnectionParams = {
   serverName: string;

package/src/core/utils/mcp.ts

@@ -32,3 +32,42 @@ export function generateMCPDeepLink(
       return generateCursorMCPDeepLink(config);
   }
 }
+
+// Server names can contain spaces (e.g. "Docs MCP server") which break bare CLI
+// arguments, so commands use a slugified form while JSON configs keep the raw name.
+export function slugifyMcpServerName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+// Claude Desktop's config file only launches stdio commands, so remote servers
+// connect through the mcp-remote bridge.
+export function generateClaudeDesktopConfig(config: McpConnectionParams): string {
+  return JSON.stringify(
+    {
+      mcpServers: {
+        [slugifyMcpServerName(config.serverName)]: {
+          command: 'npx',
+          args: ['-y', 'mcp-remote', config.url],
+        },
+      },
+    },
+    null,
+    2,
+  );
+}
+
+export function generateClaudeCodeCommand(config: McpConnectionParams): string {
+  return `claude mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
+}
+
+export function generateCodexCommand(config: McpConnectionParams): string {
+  return `codex mcp add ${slugifyMcpServerName(config.serverName)} --url ${config.url}`;
+}
+
+// Pasted into an AI assistant (Claude Code, Codex) so it installs the server itself.
+export function generateMcpInstallPrompt(config: McpConnectionParams): string {
+  return `Add the MCP server "${slugifyMcpServerName(config.serverName)}" with URL ${config.url} (streamable HTTP transport) to my MCP configuration, then verify it is connected.`;
+}

package/src/icons/CodexIcon/CodexIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.073zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.8956zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997z" />
+  </svg>
+);
+
+export const CodexIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/CodexIcon/CodexIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/layouts/McpNotAllowed.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 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();
@@ -14,17 +15,18 @@ export default function McpNotAllowed(): JSX.Element {
     <NotAllowedWrapper data-component-name="layouts/McpNotAllowed">
       <StatusText>405</StatusText>
       <Title data-translation-key="page.mcpNotAllowed.title">
-        {translate('page.mcpNotAllowed.title', 'Method not allowed')}
+        {translate('page.mcpNotAllowed.title', 'Connect to the MCP server')}
       </Title>
       <Description data-translation-key="page.mcpNotAllowed.description">
         {translate(
           'page.mcpNotAllowed.description',
-          'To use this MCP server, register it in your MCP Client (for example: VS Code, Cursor, or Claude Code).',
+          'To use this MCP server, register it in your MCP client (for example: VS Code, Cursor, or Claude Code).',
         )}
       </Description>
       <ButtonWrapper>
         <ConnectMCPButton alignment="start" />
       </ButtonWrapper>
+      <McpConnectionTabs />
     </NotAllowedWrapper>
   );
 }

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

@@ -2,8 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 import { CardImage } from '@redocly/theme/markdoc/components/Cards/CardImage';
 import { CardIcon, CardIconWrapper } from '@redocly/theme/markdoc/components/Cards/CardIcon';
+import { CardBadge } from '@redocly/theme/markdoc/components/Cards/CardBadge';
 import { Link } from '@redocly/theme/components/Link/Link';
 
 export type CardProps = React.PropsWithChildren<{
@@ -17,8 +19,15 @@ export type CardProps = React.PropsWithChildren<{
   layout?: 'horizontal' | 'vertical' | 'combined';
   variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
   iconVariant?: 'filled' | 'ghost';
+  iconColor?: string;
   align?: 'start' | 'center' | 'end';
   to?: string;
+  linkIcon?: 'chevron' | 'arrow';
+  cta?: React.ReactNode;
+  badge?: string;
+  badgeColor?: string;
+  badgeIcon?: string;
+  badgeIconRawContent?: string;
 }>;
 
 export function Card({
@@ -32,8 +41,15 @@ export function Card({
   variant = 'filled',
   lineClamp,
   iconVariant = 'filled',
+  iconColor,
   align = 'start',
   to,
+  cta,
+  linkIcon,
+  badge,
+  badgeColor,
+  badgeIcon,
+  badgeIconRawContent,
   children,
 }: CardProps) {
   const titleNoSpaces = title?.replace(/\s+/g, '-').toLowerCase();
@@ -66,14 +82,30 @@ export function Card({
               src={icon}
               rawContent={iconRawContent}
               position={iconPosition}
+              color={iconColor}
             />
           )}
           <ContentWrapper>
-            <Title id={cardTitleId} $isCardLink={!!to} $justifyContent={justifyContent}>
-              {title}
-              {variant == 'ghost' && !!to && <CardLinkIcon />}
-            </Title>
+            <TitleWrapper id={cardTitleId} $isCardLink={!!to} $justifyContent={justifyContent}>
+              <Title>
+                {title}
+                {!!to && !!linkIcon && (
+                  <CardLinkIcon as={linkIcon === 'arrow' ? ArrowUpRightIcon : undefined} />
+                )}
+              </Title>
+              {!!badge && (
+                <CardBadge color={badgeColor} icon={badgeIcon} iconRawContent={badgeIconRawContent}>
+                  {badge}
+                </CardBadge>
+              )}
+            </TitleWrapper>
             <Body $lineClamp={lineClamp}>{children}</Body>
+            {!!to && !!cta && (
+              <Cta $justifyContent={justifyContent}>
+                <CtaText> {cta} </CtaText>
+                <CtaIcon />
+              </Cta>
+            )}
           </ContentWrapper>
         </CardContentWrapper>
       </>
@@ -105,25 +137,28 @@ const ContentWrapper = styled.div`
   width: 100%;
 `;
 
-const Title = styled.h3<{ $isCardLink: boolean; $justifyContent: string }>`
-  margin: var(--card-title-margin);
-  font-weight: var(--card-title-font-weight);
+const TitleWrapper = styled.div<{ $isCardLink: boolean; $justifyContent: string }>`
   color: var(--card-title-text-color);
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: var(--card-title-row-gap);
   justify-content: ${({ $justifyContent }) => $justifyContent};
   width: 100%;
 `;
 
+const Title = styled.h3`
+  margin: var(--card-title-margin);
+  font-weight: var(--card-title-font-weight);
+`;
+
+// The `as` prop selects the icon; the chevron is the default target.
 const CardLinkIcon = styled(ChevronRightIcon)`
   width: var(--card-link-icon-width);
   height: var(--card-link-icon-height);
-  color: var(--card-link-icon-color);
+  color: var(--icon-color-secondary);
   margin-left: var(--spacing-xxs);
-  opacity: 0;
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  margin-top: calc(var(--spacing-xxs) / 2);
 `;
 
 const Body = styled.div<{ $lineClamp?: number }>`
@@ -149,6 +184,29 @@ const Body = styled.div<{ $lineClamp?: number }>`
   }
 `;
 
+const Cta = styled.div<{ $justifyContent: string }>`
+  display: flex;
+  gap: var(--card-cta-gap);
+  align-items: center;
+  margin-top: var(--card-cta-margin-top);
+  color: var(--card-cta-text-color);
+  font-size: var(--card-cta-font-size);
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+    
+  && > * {
+    cursor: pointer;
+  }  
+`;
+
+const CtaText = styled.span`
+  font-weight: var(--card-cta-font-weight);
+`;
+
+const CtaIcon = styled(ChevronRightIcon)`
+  width: var(--card-cta-icon-width);
+  height: var(--card-cta-icon-height);
+`;
+
 const CardWrapper = styled.div.attrs<{
   $variant: string;
   $isCardLink: boolean;
@@ -185,6 +243,13 @@ const CardWrapper = styled.div.attrs<{
       height: 100%;
       object-fit: cover;
     `}
+  } 
+    
+  &:hover,
+  &:focus-within {
+    ${Cta} {
+      color: var(--card-link-icon-color);
+    }
   }
 
   &.card-link {
@@ -203,8 +268,8 @@ const CardWrapper = styled.div.attrs<{
         background-color: var(--card-icon-bg-color-hover);
       }
 
-      svg {
-        opacity: 1;
+      ${CardLinkIcon} {
+        color: var(--card-link-icon-color);
       }
     }
   }

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Badge } from '@redocly/theme/components/Badge/Badge';
+
+export type CardBadgeProps = React.PropsWithChildren<{
+  color?: string;
+  icon?: string;
+  /** Inline SVG content for the icon */
+  iconRawContent?: string;
+  className?: string;
+}>;
+
+export function CardBadge({ color, icon, iconRawContent, className, children }: CardBadgeProps) {
+  // `tag-default` keeps a badge grey when the name is absent or unknown.
+  const classNames = ['tag-default', color && `tag-${color}`, className].filter(Boolean).join(' ');
+
+  return (
+    <CardBadgeWrapper className={classNames} icon={icon} iconRawContent={iconRawContent}>
+      {children}
+    </CardBadgeWrapper>
+  );
+}
+
+const CardBadgeWrapper = styled(Badge)`
+  display: flex;
+  align-items: center;
+  margin: var(--card-badge-margin);
+  padding: var(--card-badge-padding);
+  border-radius: var(--card-badge-border-radius);
+  font-size: var(--card-badge-font-size);
+  font-weight: var(--card-badge-font-weight);
+  line-height: var(--card-badge-line-height);
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  --badge-text-color: var(--tag-color);
+  --badge-bg-color: var(--tag-bg-color);
+`;

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

@@ -4,24 +4,35 @@ import styled from 'styled-components';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type CardIconProps = {
-  variant?: string;
+  variant?: 'filled' | 'ghost';
   src: string;
   rawContent?: string;
   position?: 'auto' | 'start' | 'center' | 'end';
+  color?: string;
 };
 
-export function CardIcon({ variant, src, rawContent, position }: CardIconProps) {
+export function CardIcon({ variant, src, rawContent, position, color }: CardIconProps) {
   return (
-    <CardIconWrapper $variant={variant} $position={position}>
+    <CardIconWrapper
+      className={color && `card-icon-color-${color}`}
+      $variant={variant}
+      $position={position}
+    >
       <GenericIcon icon={src} rawContent={rawContent} />
     </CardIconWrapper>
   );
 }
 
-export const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
+export const CardIconWrapper = styled.div<{
+  $variant?: 'filled' | 'ghost';
+  $position?: string;
+}>`
+  --card-icon-bg-color-hover: ${({ $variant }) => $variant === 'ghost' && 'transparent'};
   --icon-width: var(--card-icon-width);
   --icon-height: var(--card-icon-height);
   color: var(--card-icon-color);
+  /* An inline SVG fills from this. */
+  --icon-color: var(--card-icon-color);
 
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
@@ -30,7 +41,7 @@ export const CardIconWrapper = styled.div<{ $variant?: string; $position?: strin
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: var(--card-icon-padding);
+  padding: ${({ $variant }) => ($variant === 'ghost' ? 0 : `var(--card-icon-padding)`)};
   border: ${({ $variant }) => $variant !== 'ghost' && `var(--card-icon-border)`};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;

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

@@ -21,5 +21,37 @@ export const cardsDarkMode = css`
     --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--color-warm-grey-8);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-6);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-4);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-6);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-7);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-7);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-6);
+  }
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */

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

@@ -21,8 +21,8 @@ export const cards = css`
   --card-border-radius: var(--border-radius-xl);
   --card-border-style: solid;
   --card-link-cursor: pointer;
-  --card-link-icon-width: var(--h3-font-size);
-  --card-link-icon-height: var(--h3-font-size);
+  --card-link-icon-width: 14px;
+  --card-link-icon-height: 14px;
   --card-border-width: 1px;
   --card-image-border-radius: var(--border-radius-md);
   --card-image-aspect-ratio: 16 / 9;
@@ -33,12 +33,26 @@ export const cards = css`
   --card-icon-height: var(--card-icon-size);
   --card-icon-width: var(--card-icon-size);
   --card-icon-gap: var(--spacing-base);
-  --card-title-margin: 0;
+  --card-title-margin: 0 var(--spacing-xs) 0 0;
   --card-title-font-weight: var(--font-weight-semibold);
+  --card-title-row-gap: var(--spacing-xxs);
   --card-content-gap: 4px;
   --card-padding: 16px 20px;
   --card-body-font-size: var(--font-size-base);
   --card-body-line-height: var(--line-height-base);
+  --card-cta-margin-top: var(--spacing-base);
+  --card-cta-gap: var(--spacing-xxs);
+  --card-cta-font-size: var(--font-size-base);
+  --card-cta-font-weight: var(--font-weight-regular);  
+  --card-cta-text-color: var(--text-color-secondary);
+  --card-cta-icon-width: 14px;
+  --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-font-size: var(--font-size-sm);
+  --card-badge-font-weight: var(--font-weight-regular);
+  --card-badge-line-height: var(--line-height-sm);
 
   /**
    * @tokens Card variants
@@ -82,5 +96,63 @@ export const cards = css`
     --card-hover-transition: initial;
   }
 
+  /**
+   * @tokens Card icon colors
+   */
+  .card-icon-color-red {
+    --card-icon-color: var(--color-red-7);
+  }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-8);
+  }
+
+  .card-icon-color-blue {
+    --card-icon-color: var(--color-blue-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--text-color-secondary);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-8);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-7);
+  }
+
+  .card-icon-color-purple {
+    --card-icon-color: var(--color-purple-7);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-8);
+  }
+
+  .card-icon-color-raspberry {
+    --card-icon-color: var(--color-raspberry-7);
+  }
+
+  .card-icon-color-orange {
+    --card-icon-color: var(--color-orange-7);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-8);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-8);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-8);
+  }
+
+  .card-icon-color-blueberry {
+    --card-icon-color: var(--color-blueberry-7);
+  }
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/markdoc/tags/card.ts

@@ -52,7 +52,21 @@ export const card: MarkdocSchemaWrapper = {
         type: String,
         matches: ['filled', 'ghost'],
       },
+      iconColor: { type: String },
       to: { type: String, resolver: 'link' },
+      linkIcon: {
+        type: String,
+        matches: ['arrow', 'chevron'],
+      },
+      cta: { type: String },
+      badge: { type: String },
+      badgeColor: { type: String },
+      badgeIcon: { type: String, resolver: 'relativeOrCdnIcon' },
+      badgeIconRawContent: {
+        // internal use only
+        type: String,
+        render: true,
+      },
     },
   },
   tagName: 'card',