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

package/src/core/types/l10n.ts

@@ -134,8 +134,28 @@ export type TranslationKey =
   | 'page.forbidden.description'
   | 'page.notFound.title'
   | 'page.notFound.description'
+  | 'page.apiNotFound.title'
+  | 'page.apiNotFound.description'
+  | 'page.apiNotFound.hint'
+  | 'page.apiNotFound.backButton'
   | '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'
+  | '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,8 +291,14 @@ 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'
+  | 'page.actions.connectMcp.moreOptions'
+  | 'page.actions.moreActions'
   | 'openapi.download.description.title'
   | 'openapi.info.title'
   | 'openapi.info.contact.url'
@@ -280,6 +306,7 @@ export type TranslationKey =
   | 'openapi.info.license'
   | 'openapi.info.termsOfService'
   | 'openapi.info.metadata.title'
+  | 'graphql.info.metadata.title'
   | 'openapi.key'
   | 'openapi.value'
   | 'openapi.enum'
@@ -369,6 +396,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'
@@ -449,7 +478,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/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/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/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/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,28 +3,61 @@ 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', '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>
+      {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>
+      <McpConnectionTabs />
     </NotAllowedWrapper>
   );
 }
@@ -44,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/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 */