@redocly/theme 0.69.0-next.0 → 0.69.0-next.2

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/Accordion/Accordion.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import type { JSX, PropsWithChildren } from 'react';
+
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { ACCORDION_COMPONENT_NAME } from '@redocly/theme/core/constants';
+
+export type AccordionProps = {
+  title: string;
+  expanded?: boolean;
+  className?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+};
+
+export function Accordion({
+  title,
+  expanded = false,
+  className,
+  children,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: PropsWithChildren<AccordionProps>): JSX.Element {
+  return (
+    <AccordionWrapper
+      className={className}
+      open={expanded}
+      data-component-name={ACCORDION_COMPONENT_NAME}
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
+      <AccordionSummary>
+        <ChevronRightIcon
+          color="--md-accordion-chevron-icon-color"
+          size="var(--md-accordion-chevron-icon-size)"
+        />
+        {title}
+      </AccordionSummary>
+      <AccordionBody>{children}</AccordionBody>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.details`
+  margin: var(--md-accordion-margin);
+  border: var(--md-accordion-border);
+  border-radius: var(--md-accordion-border-radius);
+  font-family: var(--md-accordion-font-family);
+  overflow: hidden;
+
+  &[open] > summary svg {
+    transform: rotate(90deg);
+  }
+`;
+
+const AccordionSummary = styled.summary`
+  display: flex;
+  align-items: center;
+  gap: var(--md-accordion-gap);
+  cursor: pointer;
+  list-style: none;
+
+  background-color: var(--md-accordion-header-bg-color);
+  color: var(--md-accordion-header-text-color);
+  font-weight: var(--md-accordion-header-font-weight);
+  font-size: var(--md-accordion-header-font-size);
+  line-height: var(--md-accordion-header-line-height);
+  padding: var(--md-accordion-header-padding);
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--md-accordion-header-bg-color-hover);
+  }
+
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 2px;
+      border: 1px solid var(--button-border-color-focused);
+      border-radius: calc(var(--md-accordion-border-radius) - 2px);
+      pointer-events: none;
+    }
+  }
+
+  svg {
+    flex-shrink: 0;
+    transition: transform 0.15s ease-out;
+  }
+`;
+
+const showAccordionBody = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const AccordionBody = styled.div`
+  padding: var(--md-accordion-body-padding);
+  background-color: var(--md-accordion-body-bg-color);
+  color: var(--md-accordion-body-text-color);
+  font-size: var(--md-accordion-body-font-size);
+  line-height: var(--md-accordion-body-line-height);
+
+  details[open] > & {
+    animation: ${showAccordionBody} 0.15s ease-out;
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+`;

package/src/markdoc/components/Accordion/AccordionGroup.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX, PropsWithChildren } from 'react';
+
+import { ACCORDION_GROUP_COMPONENT_NAME, ACCORDION_SELECTOR } from '@redocly/theme/core/constants';
+
+export type AccordionGroupProps = {
+  className?: string;
+};
+
+export function AccordionGroup({
+  className,
+  children,
+}: PropsWithChildren<AccordionGroupProps>): JSX.Element {
+  return (
+    <AccordionGroupWrapper
+      className={className}
+      data-component-name={ACCORDION_GROUP_COMPONENT_NAME}
+    >
+      {children}
+    </AccordionGroupWrapper>
+  );
+}
+
+const AccordionGroupWrapper = styled.div`
+  margin: var(--md-accordion-group-margin);
+  border: var(--md-accordion-group-border);
+  border-radius: var(--md-accordion-group-border-radius);
+  overflow: hidden;
+
+  & > ${ACCORDION_SELECTOR} {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  & > ${ACCORDION_SELECTOR} + ${ACCORDION_SELECTOR} {
+    border-top: var(--md-accordion-group-divider);
+  }
+`;

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

@@ -0,0 +1,37 @@
+import { css } from 'styled-components';
+
+export const markdownAccordion = css`
+  /**
+  *  @tokens Markdown Accordion
+  */
+
+  --md-accordion-group-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-group-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-group-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-group-divider: 1px solid var(--border-color-secondary); // @presenter Border
+
+  --md-accordion-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-gap: var(--spacing-xs); // @presenter Spacing
+  --md-accordion-font-family: var(--font-family-base); // @presenter FontFamily
+
+  --md-accordion-chevron-icon-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-chevron-icon-size: 16px;
+
+  --md-accordion-header-bg-color: var(--layer-color); // @presenter Color
+  --md-accordion-header-bg-color-hover: var(--layer-color-hover); // @presenter Color
+  --md-accordion-header-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-header-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --md-accordion-header-line-height: var(--line-height-lg); // @presenter LineHeight
+  --md-accordion-header-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-accordion-header-padding: var(--spacing-sm) var(--spacing-md); // @presenter Spacing
+
+  --md-accordion-body-bg-color: var(--bg-color); // @presenter Color
+  --md-accordion-body-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-body-font-size: var(--font-size-base); // @presenter FontSize
+  --md-accordion-body-line-height: var(--line-height-base); // @presenter LineHeight
+  --md-accordion-body-padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); // @presenter Spacing
+
+  // @tokens End
+`;

package/src/markdoc/components/default.ts

@@ -1,3 +1,5 @@
+export * from '@redocly/theme/markdoc/components/Accordion/Accordion';
+export * from '@redocly/theme/markdoc/components/Accordion/AccordionGroup';
 export * from '@redocly/theme/markdoc/components/Admonition/Admonition';
 export * from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
 export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';

package/src/markdoc/default.ts

@@ -8,6 +8,8 @@ export * from '@redocly/theme/markdoc/attributes/svg-content';
 /* Components */
 export * as components from '@redocly/theme/markdoc/components/default';
 /* Tags */
+import { accordion } from '@redocly/theme/markdoc/tags/accordion';
+import { accordionGroup } from '@redocly/theme/markdoc/tags/accordion-group';
 import { admonition } from '@redocly/theme/markdoc/tags/admonition';
 import { html } from '@redocly/theme/markdoc/tags/html';
 import { markdocExample } from '@redocly/theme/markdoc/tags/markdoc-example';
@@ -33,6 +35,8 @@ import { loginButton } from '@redocly/theme/markdoc/tags/login-button';
 import { diagram } from '@redocly/theme/markdoc/tags/diagram';
 
 export const tags = {
+  [accordion.tagName]: accordion.schema,
+  [accordionGroup.tagName]: accordionGroup.schema,
   [admonition.tagName]: admonition.schema,
   [debug.tagName]: debug.schema,
   [html.tagName]: html.schema,

package/src/markdoc/tags/accordion-group.ts

@@ -0,0 +1,8 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const accordionGroup: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'AccordionGroup',
+  },
+  tagName: 'accordion-group',
+};

package/src/markdoc/tags/accordion.ts

@@ -0,0 +1,12 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const accordion: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'Accordion',
+    attributes: {
+      title: { type: String, required: true },
+      expanded: { type: Boolean, default: false },
+    },
+  },
+  tagName: 'accordion',
+};

package/src/markdoc/tags/connect-mcp.ts

@@ -1,5 +1,7 @@
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 
+import { DEFAULT_MCP_OPTIONS } from '@redocly/theme/core/constants';
+
 export const connectMcp: MarkdocSchemaWrapper = {
   schema: {
     render: 'ConnectMCP',
@@ -16,7 +18,7 @@ export const connectMcp: MarkdocSchemaWrapper = {
       },
       options: {
         type: Array,
-        default: ['cursor', 'vscode', 'copy'],
+        default: DEFAULT_MCP_OPTIONS,
       },
     },
     selfClosing: true,