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

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,24 +21,38 @@ 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-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;
   --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(--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);
 
   /**
    * @tokens Card variants
@@ -74,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);
@@ -82,5 +96,65 @@ 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);
+  }
+
+  // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */
+/* 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/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import React, { createElement, isValidElement } from 'react';
+import React, { createElement, isValidElement, useContext } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router';
 
@@ -9,6 +9,7 @@ import { concatClassNames } from '@redocly/theme/core/utils';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { PageActionsContext } from '@redocly/theme/core/contexts';
 import {
   ANCHOR_CLASS,
   HEADING_ANCHOR_CLASS,
@@ -65,8 +66,10 @@ export function Heading({
   const { usePageProps } = useThemeHooks();
   const pageProps = usePageProps();
 
-  const isMarkdownPage =
-    pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc';
+  // The page-type fallback is only for backward compatibility; templates set the scope.
+  const withPageActions =
+    useContext(PageActionsContext) ??
+    (pageProps?.metadata?.type === 'markdown' || pageProps?.metadata?.type === 'asciidoc');
   const headingTextId = `${id}-heading-text`;
 
   const linkEl = (
@@ -101,7 +104,7 @@ export function Heading({
       <HeadingContentWrapper>
         {linkEl}
         {headingText}
-        {isMarkdownPage && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
+        {withPageActions && __idx === 0 ? <PageActions pageSlug={pathname} /> : null}
       </HeadingContentWrapper>
     </div>
   );

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;
     }
   }

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

@@ -50,7 +50,7 @@ export const markdownTabs = css`
   --md-tabs-small-tab-font-size: var(--font-size-base); // @presenter FontSize
   --md-tabs-small-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-small-tab-line-height: var(--line-height-base); // @presenter LineHeight
-  --md-tabs-small-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-active-tab-text-color: var(--color-primary-text, var(--md-tabs-active-tab-text-color-legacy)); // @presenter Color
   --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
@@ -63,14 +63,14 @@ export const markdownTabs = css`
   --md-tabs-medium-active-tab-line-height: var(--md-tabs-medium-tab-line-height); // @presenter LineHeight
   --md-tabs-medium-active-tab-padding: var(--md-tabs-medium-tab-padding); // @presenter Spacing
   --md-tabs-medium-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-medium-active-tab-border-radius: 6px; // @presenter BorderRadius
+  --md-tabs-medium-active-tab-border-radius: var(--border-radius-lg); // @presenter BorderRadius
 
   --md-tabs-small-active-tab-font-size: var(--md-tabs-small-tab-font-size); // @presenter FontSize
   --md-tabs-small-active-tab-font-weight: var(--md-tabs-small-tab-font-weight); // @presenter FontWeight
   --md-tabs-small-active-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
   --md-tabs-small-active-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
   --md-tabs-small-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-small-active-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-active-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
   --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
@@ -90,7 +90,7 @@ export const markdownTabs = css`
   --md-tabs-small-hover-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
   --md-tabs-small-hover-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
   --md-tabs-small-hover-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-small-hover-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-hover-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-tab-text-disabled-color: var(--text-color-disabled); // @presenter Color
 

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

@@ -3,6 +3,9 @@ import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 export const accordionGroup: MarkdocSchemaWrapper = {
   schema: {
     render: 'AccordionGroup',
+    attributes: {
+      singleExpanded: { type: Boolean, default: false },
+    },
   },
   tagName: 'accordion-group',
 };

package/src/markdoc/tags/admonition.ts

@@ -7,7 +7,7 @@ export const admonition: MarkdocSchemaWrapper = {
         type: String,
         required: true,
         default: 'info',
-        matches: ['warning', 'info', 'danger', 'success', 'default'],
+        matches: ['warning', 'info', 'danger', 'success', 'idea'],
       },
       name: { type: String },
     },

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',

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,