@redocly/theme 0.63.0 → 0.64.0-next.1

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.tsx

@@ -14,36 +14,6 @@ import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/C
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
 
-const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
-  {
-    key: 'entity',
-    title: 'Entity',
-    render: (entity) => <CatalogEntityCell entity={entity} />,
-    sortable: true,
-    sortKey: 'title',
-    width: '2.5fr',
-  },
-  {
-    key: 'type',
-    title: 'Type',
-    render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
-    sortable: true,
-    sortKey: 'type',
-    width: '1fr',
-  },
-  {
-    key: 'relationType',
-    title: 'Relations',
-    render: (entity) => (
-      <CatalogEntityRelationCell
-        relationType={entity.relationType}
-        relationRole={entity.relationRole}
-      />
-    ),
-    width: '1fr',
-  },
-];
-
 export type CatalogEntityDefaultRelationsProps = {
   entity: BffCatalogEntity;
   entitiesCatalogConfig: EntitiesCatalogConfig;
@@ -91,7 +61,7 @@ export function CatalogEntityDefaultRelations({
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
         heading={shouldShowHeading ? 'Related entities' : undefined}
-        columns={columns}
+        columns={getRelationsTableColumns(listType)}
         sortOption={sortOption}
         setSortOption={setSortOption}
         handleSortClick={handleSortClick}
@@ -102,3 +72,41 @@ export function CatalogEntityDefaultRelations({
     </div>
   );
 }
+
+function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalogRelatedEntity>[] {
+  const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
+    {
+      key: 'entity',
+      title: 'Entity',
+      render: (entity) => <CatalogEntityCell entity={entity} />,
+      sortable: true,
+      sortKey: 'title',
+      width: '2.5fr',
+    },
+    {
+      key: 'type',
+      title: 'Type',
+      render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
+      sortable: true,
+      sortKey: 'type',
+      width: '1fr',
+    },
+    {
+      key: 'relationType',
+      title: 'Relations',
+      render: (entity) => (
+        <CatalogEntityRelationCell
+          relationType={entity.relationType}
+          relationRole={entity.relationRole}
+        />
+      ),
+      width: '1fr',
+    },
+  ];
+
+  if (listType === 'api-operation' || listType === 'data-schema') {
+    return columns.filter((column) => column.key !== 'type');
+  }
+
+  return columns;
+}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.tsx

@@ -32,7 +32,7 @@ export function CatalogEntityRelations({
   setSearchQuery,
 }: CatalogEntityRelationsProps): JSX.Element | null {
   const { useCatalogSort, useFetchCatalogEntitiesRelations } = useThemeHooks();
-  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
+  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort('title');
 
   const [filter, setFilter] = useState<string | undefined>(ENTITY_DEFAULT_FILTERS[entity.type]);
 

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -86,7 +86,8 @@ export function CatalogEntityRelationsTable({
         setSearchQuery={setSearchQuery}
         sortOption={sortOption}
         setSortOption={setSortOption}
-        style={{ marginBottom: '12px' }}
+        viewMode="table"
+        isDetailsPage={true}
       />
       <CatalogEntityRelationsTableContent
         entitiesCatalogConfig={entitiesCatalogConfig}
@@ -95,7 +96,6 @@ export function CatalogEntityRelationsTable({
         query={query}
         searchQuery={searchQuery}
         columns={columns}
-        setSortOption={setSortOption}
         sortOption={sortOption}
         handleSortClick={handleSortClick}
         isColumnSorted={isColumnSorted}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent.tsx

@@ -25,7 +25,6 @@ export type CatalogEntityRelationsTableContentProps = {
   searchQuery: string;
   columns: CatalogColumn<BffCatalogRelatedEntity>[];
   sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -40,7 +39,6 @@ export function CatalogEntityRelationsTableContent({
   query,
   searchQuery,
   columns,
-  setSortOption,
   sortOption,
   handleSortClick,
   isColumnSorted,
@@ -57,7 +55,6 @@ export function CatalogEntityRelationsTableContent({
             entitiesCatalogConfig={entitiesCatalogConfig}
             catalogConfig={catalogConfig}
             columns={columns}
-            setSortOption={setSortOption}
             currentSortOption={sortOption}
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -12,7 +12,6 @@ import {
 
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
-  setSortOption: (sortOption: SortOption | null) => void;
   currentSortOption?: SortOption | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
@@ -22,13 +21,11 @@ export const CatalogTableHeaderCell = <T extends BaseEntity>({
   column,
   handleSortClick,
   isColumnSorted,
-  setSortOption,
 }: CatalogTableHeaderCellProps<T>) => {
   const { handleCellClick, sortKey, isUpActive, isDownActive } = useCatalogTableHeaderCellActions({
     column,
     handleSortClick,
     isColumnSorted,
-    setSortOption,
   });
 
   return (

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -26,7 +26,6 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
   entitiesCatalogConfig?: EntitiesCatalogConfig;
   catalogConfig: CatalogEntityConfig;
   columns?: CatalogColumn<T>[];
-  setSortOption: (sortOption: SortOption | null) => void;
   currentSortOption?: SortOption | null;
   onRowClick?: (entity: T) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
@@ -96,7 +95,6 @@ export const CatalogTableView = <T extends BaseEntity>({
   entitiesCatalogConfig,
   catalogConfig,
   columns = baseColumns as CatalogColumn<BaseEntity>[],
-  setSortOption,
   currentSortOption,
   onRowClick,
   handleSortClick,
@@ -114,7 +112,6 @@ export const CatalogTableView = <T extends BaseEntity>({
           <CatalogTableHeaderCell<T>
             key={column.key}
             column={column}
-            setSortOption={setSortOption}
             currentSortOption={currentSortOption}
             handleSortClick={handleSortClick}
             isColumnSorted={isColumnSorted}

package/src/components/SvgViewer/variables.dark.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
 
 export const svgViewerDarkMode = css`
-  --svg-viewer-bg-color: var(--color-warm-grey-9);
+  --svg-viewer-bg-color: var(--color-warm-grey-3);
 `;

package/src/core/hooks/catalog/use-catalog-table-header-cell-actions.ts

@@ -3,19 +3,15 @@ import {
   CatalogColumn,
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 
-import { SortOption } from '../../types';
-
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
-  setSortOption: (sortOption: SortOption | null) => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
 
 export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
   column,
   handleSortClick,
-  setSortOption,
   isColumnSorted,
 }: CatalogTableHeaderCellActionsProps<T>) {
   const sortKey = column.sortKey;
@@ -27,8 +23,6 @@ export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
 
     if (isDownActive) {
       handleSortClick(sortKey, 'desc');
-    } else if (isUpActive) {
-      setSortOption(null);
     } else {
       handleSortClick(sortKey, 'asc');
     }

package/src/core/styles/dark.ts

@@ -2,6 +2,7 @@ import { css } from 'styled-components';
 
 import { scorecardDarkMode } from '@redocly/theme/components/Scorecard/variables.dark';
 import { mermaidDarkMode } from '@redocly/theme/markdoc/components/Mermaid/variables.dark'
+import { excalidrawDarkMode } from '@redocly/theme/markdoc/components/ExcalidrawDiagram/variables.dark'
 import { menuDarkMode } from '@redocly/theme/components/Menu/variables.dark';
 import { buttonDarkMode } from '@redocly/theme/components/Button/variables.dark';
 import { aiAssistantButtonDarkMode } from '@redocly/theme/components/Buttons/variables.dark';
@@ -43,6 +44,8 @@ const replayDarkMode = css`
   --replay-runtime-expression-bg-color: rgba(147, 166, 249, 0.16); // @presenter Color
   --replay-operators-color: rgba(168, 143, 88, 1); // @presenter Color
 
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.16) 10.13%, rgba(255, 92, 220, 0.16) 87.29%);
+
   // @tokens End
 `;
 
@@ -335,6 +338,7 @@ export const darkMode = css`
   ${statusCodeDarkMode}
   ${menuDarkMode}
   ${mermaidDarkMode}
+  ${excalidrawDarkMode}
   ${scorecardDarkMode}
   ${replayDarkMode}
   ${switcherDarkMode}

package/src/core/styles/global.ts

@@ -29,6 +29,7 @@ import { markdown } from '@redocly/theme/components/Markdown/variables';
 import { banner } from '@redocly/theme/components/Banner/variables';
 import { markdownTabs } from '@redocly/theme/markdoc/components/Tabs/variables';
 import { mermaid } from '@redocly/theme/markdoc/components/Mermaid/variables';
+import { excalidraw } from '@redocly/theme/markdoc/components/ExcalidrawDiagram/variables';
 import { lastUpdated } from '@redocly/theme/components/LastUpdated/variables';
 import { logo } from '@redocly/theme/components/Logo/variables';
 import { statusCode } from '@redocly/theme/components/StatusCode/variables';
@@ -1167,7 +1168,7 @@ const icon = css`
 
   --icon-color-primary: var(--color-warm-grey-11); // @presenter Color
   --icon-color-secondary: var(--color-warm-grey-8); // @presenter Color
-  --icon-color-on-color: var(--color-warm-grey-1); // @presenter Color
+  --icon-color-on-color: var(--color-static-white); // @presenter Color
   --icon-color-interactive: var(--color-blueberry-6); // @presenter Color
   --icon-color-inverse: var(--color-white); // @presenter Color
   --icon-color-disabled: var(--color-warm-grey-5); // @presenter Color
@@ -1251,6 +1252,11 @@ const replay = css`
   --replay-runtime-expression-bg-color: rgba(54, 90, 249, 0.08); // @presenter Color
   --replay-operators-color: rgba(193, 142, 31, 1); // @presenter Color
 
+  --replay-ai-gradient-soft: linear-gradient(62.6deg, rgba(113, 94, 254, 0.16) 0%, rgba(255, 92, 220, 0.16) 100%);
+  --replay-ai-gradient-disabled: linear-gradient(62.6deg, rgba(113, 94, 254, 0.6) 0%, rgba(255, 92, 220, 0.6) 100%);
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.08) 10.13%, rgba(255, 92, 220, 0.08) 87.29%);
+
+  --replay-ai-send-button-disabled-border: 1px solid #ffffff33;
   // @tokens End
 `;
 
@@ -1289,6 +1295,7 @@ export const styles = css`
     ${markdown}
     ${markdownTabs}
     ${mermaid}
+    ${excalidraw}
     ${menu}
     ${mobileMenu}
     ${modal}

package/src/core/types/hooks.ts

@@ -19,6 +19,7 @@ import type {
   UseCatalogProps,
   CatalogApiParams,
   CatalogApiResults,
+  SortOption,
 } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
@@ -164,7 +165,7 @@ export type ThemeHooks = {
       }
     | undefined;
   useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
-  useCatalogSort: () => UseCatalogSortResponse;
+  useCatalogSort: (defaultSortOption?: SortOption | null) => UseCatalogSortResponse;
   useCatalogSearch: () => UseCatalogSearchResponse;
   useFetchCatalogEntities: (
     params: CatalogApiParams,

package/src/icons/ColorPaletteIcon/ColorPaletteIcon.tsx

@@ -0,0 +1,28 @@
+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 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.5 5.25456C3.98325 5.25456 4.375 4.86281 4.375 4.37956C4.375 3.89631 3.98325 3.50456 3.5 3.50456C3.01675 3.50456 2.625 3.89631 2.625 4.37956C2.625 4.86281 3.01675 5.25456 3.5 5.25456Z" />
+    <path d="M6.125 3.94206C6.60825 3.94206 7 3.55031 7 3.06706C7 2.58381 6.60825 2.19206 6.125 2.19206C5.64175 2.19206 5.25 2.58381 5.25 3.06706C5.25 3.55031 5.64175 3.94206 6.125 3.94206Z" />
+    <path d="M8.75 5.25456C9.23325 5.25456 9.625 4.86281 9.625 4.37956C9.625 3.89631 9.23325 3.50456 8.75 3.50456C8.26675 3.50456 7.875 3.89631 7.875 4.37956C7.875 4.86281 8.26675 5.25456 8.75 5.25456Z" />
+    <path d="M9.1875 7.87956C9.67075 7.87956 10.0625 7.48781 10.0625 7.00456C10.0625 6.52131 9.67075 6.12956 9.1875 6.12956C8.70425 6.12956 8.3125 6.52131 8.3125 7.00456C8.3125 7.48781 8.70425 7.87956 9.1875 7.87956Z" />
+    <path d="M7.4375 10.0671C7.92075 10.0671 8.3125 9.67531 8.3125 9.19206C8.3125 8.70881 7.92075 8.31706 7.4375 8.31706C6.95425 8.31706 6.5625 8.70881 6.5625 9.19206C6.5625 9.67531 6.95425 10.0671 7.4375 10.0671Z" />
+    <path d="M6.36125 0.00455826C5.53725 -0.0272487 4.7153 0.107661 3.9447 0.401198C3.17409 0.694735 2.4707 1.14086 1.87668 1.71281C1.28266 2.28477 0.810249 2.97079 0.487771 3.72974C0.165293 4.48869 -0.000611956 5.30494 1.69613e-06 6.12956C-2.00107e-05 6.45389 0.074769 6.77385 0.218553 7.06457C0.362337 7.35528 0.57124 7.60891 0.829017 7.80574C1.08679 8.00256 1.3865 8.13728 1.70482 8.1994C2.02315 8.26153 2.35151 8.24939 2.66438 8.16393L3.15438 8.02831C3.3493 7.9751 3.55388 7.96761 3.75217 8.00643C3.95047 8.04526 4.13712 8.12934 4.29759 8.25212C4.45806 8.37491 4.58801 8.53309 4.67733 8.71433C4.76664 8.89558 4.8129 9.095 4.8125 9.29706V10.9421C4.8125 11.2902 4.95078 11.624 5.19692 11.8701C5.44307 12.1163 5.77691 12.2546 6.125 12.2546C6.94962 12.2552 7.76587 12.0893 8.52482 11.7668C9.28377 11.4443 9.96979 10.9719 10.5417 10.3779C11.1137 9.78386 11.5598 9.08046 11.8534 8.30986C12.1469 7.53926 12.2818 6.71731 12.25 5.89331C12.1865 4.35185 11.5457 2.89063 10.4548 1.79973C9.36393 0.708834 7.90271 0.0680368 6.36125 0.00455826ZM9.90938 9.76518C9.42087 10.2766 8.83352 10.6835 8.18297 10.961C7.53243 11.2385 6.83227 11.3809 6.125 11.3796C6.00897 11.3796 5.89769 11.3335 5.81564 11.2514C5.7336 11.1694 5.6875 11.0581 5.6875 10.9421V9.29706C5.6875 8.7169 5.45703 8.1605 5.0468 7.75026C4.63656 7.34003 4.08016 7.10956 3.5 7.10956C3.30341 7.10991 3.10774 7.13639 2.91813 7.18831L2.42813 7.32393C2.24511 7.37298 2.05326 7.37922 1.86744 7.34216C1.68163 7.3051 1.50685 7.22574 1.35665 7.11024C1.20645 6.99474 1.08488 6.84619 1.00135 6.67612C0.917824 6.50605 0.87459 6.31903 0.875002 6.12956C0.874459 5.42247 1.01676 4.72256 1.29336 4.07181C1.56996 3.42107 1.97517 2.83291 2.48466 2.34261C2.99416 1.85232 3.59745 1.47 4.25833 1.21859C4.91922 0.967181 5.62408 0.851864 6.33063 0.879558C7.64627 0.948081 8.8899 1.50154 9.82146 2.4331C10.753 3.36466 11.3065 4.60829 11.375 5.92393C11.4051 6.63092 11.2907 7.33662 11.0387 7.99785C10.7867 8.65908 10.4024 9.26195 9.90938 9.76956V9.76518Z" />
+  </svg>
+);
+
+export const ColorPaletteIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ColorPaletteIcon/ColorPaletteIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/StopIcon/StopIcon.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" {...props}>
+    <path d="M10.5 3.5V10.5H3.5V3.5H10.5ZM10.5 2.625H3.5C3.26794 2.625 3.04538 2.71719 2.88128 2.88128C2.71719 3.04538 2.625 3.26794 2.625 3.5V10.5C2.625 10.7321 2.71719 10.9546 2.88128 11.1187C3.04538 11.2828 3.26794 11.375 3.5 11.375H10.5C10.7321 11.375 10.9546 11.2828 11.1187 11.1187C11.2828 10.9546 11.375 10.7321 11.375 10.5V3.5C11.375 3.26794 11.2828 3.04538 11.1187 2.88128C10.9546 2.71719 10.7321 2.625 10.5 2.625Z" />
+  </svg>
+);
+
+export const StopIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/StopIcon/StopIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -274,6 +274,7 @@ export * from '@redocly/theme/icons/FileIcon/FileIcon';
 export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
 export * from '@redocly/theme/icons/PlayIcon/PlayIcon';
+export * from '@redocly/theme/icons/StopIcon/StopIcon';
 export * from '@redocly/theme/icons/PlaylistIcon/PlaylistIcon';
 export * from '@redocly/theme/icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from '@redocly/theme/icons/TaskViewIcon/TaskViewIcon';
@@ -296,6 +297,7 @@ export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
 export * from '@redocly/theme/icons/HashtagIcon/HashtagIcon';
 export * from '@redocly/theme/icons/FitToViewIcon/FitToViewIcon';
+export * from '@redocly/theme/icons/ColorPaletteIcon/ColorPaletteIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { concatClassNames } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
+
+type ExcalidrawDiagramProps = {
+  diagramHtml: string;
+  className?: string;
+};
+
+export function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
+  return (
+    <>
+      <Wrapper
+        className={concatClassNames('excalidraw-wrapper', className)}
+        dangerouslySetInnerHTML={{ __html: diagramHtml }}
+        data-component-name="Markdoc/ExcalidrawDiagram/ExcalidrawDiagram"
+        onClick={open}
+        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && open()}
+        role="button"
+        tabIndex={0}
+        aria-label={translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen')}
+      />
+      <SvgViewer
+        isOpen={isOpen}
+        onClose={close}
+        labels={{
+          zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
+          zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
+          fitToView: translate('excalidraw.reset', 'Fit to view'),
+          close: translate('excalidraw.close', 'Close'),
+          dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
+        }}
+      >
+        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
+      </SvgViewer>
+    </>
+  );
+}
+
+const Wrapper = styled.div`
+  background-color: var(--excalidraw-bg-color);
+  border-radius: var(--excalidraw-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+  overflow: hidden;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
+
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+
+    > rect {
+      fill: var(--excalidraw-bg-color);
+    }
+  }
+
+  & + & {
+    margin-top: var(--spacing-md);
+  }
+`;
+
+const ViewerContent = styled.div`
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;

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

@@ -0,0 +1,5 @@
+import { css } from "styled-components";
+
+export const excalidrawDarkMode = css`
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+`;

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

@@ -0,0 +1,12 @@
+import { css } from "styled-components";
+
+export const excalidraw = css`
+  /**
+  * @tokens Excalidraw
+  */
+
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+`;

package/src/markdoc/components/Mermaid/Mermaid.tsx

@@ -81,6 +81,8 @@ const Wrapper = styled.div`
 `;
 
 const ViewerContent = styled.div`
+  background-color: var(--mermaid-bg-color);
+
   * {
     font-family: var(--mermaid-font-family) !important;
   }

package/src/markdoc/components/default.ts

@@ -3,6 +3,7 @@ export * from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
 export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';
 export * from '@redocly/theme/markdoc/components/Heading/Heading';
 export * from '@redocly/theme/markdoc/components/Mermaid/Mermaid';
+export * from '@redocly/theme/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram';
 export * from '@redocly/theme/markdoc/components/HtmlBlock/HtmlBlock';
 export * from '@redocly/theme/markdoc/components/Tabs/Tab';
 export * from '@redocly/theme/markdoc/components/Tabs/TabList';