@redocly/theme 0.64.0-next.0 → 0.64.0-next.1

package/lib/components/SvgViewer/variables.dark.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.svgViewerDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.svgViewerDarkMode = (0, styled_components_1.css) `
-  --svg-viewer-bg-color: var(--color-warm-grey-9);
+  --svg-viewer-bg-color: var(--color-warm-grey-3);
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/core/styles/dark.js

@@ -4,21 +4,22 @@ exports.darkMode = void 0;
 const styled_components_1 = require("styled-components");
 const variables_dark_1 = require("../../components/Scorecard/variables.dark");
 const variables_dark_2 = require("../../markdoc/components/Mermaid/variables.dark");
-const variables_dark_3 = require("../../components/Menu/variables.dark");
-const variables_dark_4 = require("../../components/Button/variables.dark");
-const variables_dark_5 = require("../../components/Buttons/variables.dark");
-const variables_dark_6 = require("../../components/Segmented/variables.dark");
-const variables_dark_7 = require("../../icons/CheckboxIcon/variables.dark");
-const variables_dark_8 = require("../../components/Tag/variables.dark");
-const variables_dark_9 = require("../../components/StatusCode/variables.dark");
-const variables_dark_10 = require("../../components/Switch/variables.dark");
-const variables_dark_11 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_12 = require("../../components/Catalog/variables.dark");
-const variables_dark_13 = require("../../components/PageActions/variables.dark");
-const variables_dark_14 = require("../../components/Tooltip/variables.dark");
-const variables_dark_15 = require("../../components/Banner/variables.dark");
-const variables_dark_16 = require("../../components/Admonition/variables.dark");
-const variables_dark_17 = require("../../components/SvgViewer/variables.dark");
+const variables_dark_3 = require("../../markdoc/components/ExcalidrawDiagram/variables.dark");
+const variables_dark_4 = require("../../components/Menu/variables.dark");
+const variables_dark_5 = require("../../components/Button/variables.dark");
+const variables_dark_6 = require("../../components/Buttons/variables.dark");
+const variables_dark_7 = require("../../components/Segmented/variables.dark");
+const variables_dark_8 = require("../../icons/CheckboxIcon/variables.dark");
+const variables_dark_9 = require("../../components/Tag/variables.dark");
+const variables_dark_10 = require("../../components/StatusCode/variables.dark");
+const variables_dark_11 = require("../../components/Switch/variables.dark");
+const variables_dark_12 = require("../../markdoc/components/Cards/variables.dark");
+const variables_dark_13 = require("../../components/Catalog/variables.dark");
+const variables_dark_14 = require("../../components/PageActions/variables.dark");
+const variables_dark_15 = require("../../components/Tooltip/variables.dark");
+const variables_dark_16 = require("../../components/Banner/variables.dark");
+const variables_dark_17 = require("../../components/Admonition/variables.dark");
+const variables_dark_18 = require("../../components/SvgViewer/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -44,6 +45,8 @@ const replayDarkMode = (0, styled_components_1.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
 `;
 const badgesDarkMode = (0, styled_components_1.css) `
@@ -325,24 +328,25 @@ exports.darkMode = (0, styled_components_1.css) `
   --plus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H4.6875V6.79687C4.6875 6.83984 4.72266 6.875 4.76562 6.875H5.23438C5.27734 6.875 5.3125 6.83984 5.3125 6.79687V5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H5.3125V3.20312C5.3125 3.16016 5.27734 3.125 5.23438 3.125H4.76562C4.72266 3.125 4.6875 3.16016 4.6875 3.20312V4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
   --minus-square-outlined-icon: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.20312 5.3125H6.79688C6.83984 5.3125 6.875 5.27734 6.875 5.23437V4.76562C6.875 4.72266 6.83984 4.6875 6.79688 4.6875H3.20312C3.16016 4.6875 3.125 4.72266 3.125 4.76562V5.23437C3.125 5.27734 3.16016 5.3125 3.20312 5.3125Z' fill='%239B9CA8'/%3E%3Cpath d='M8.59375 1.09375H1.40625C1.2334 1.09375 1.09375 1.2334 1.09375 1.40625V8.59375C1.09375 8.7666 1.2334 8.90625 1.40625 8.90625H8.59375C8.7666 8.90625 8.90625 8.7666 8.90625 8.59375V1.40625C8.90625 1.2334 8.7666 1.09375 8.59375 1.09375ZM8.20312 8.20312H1.79688V1.79687H8.20312V8.20312Z' fill='%239B9CA8'/%3E%3C/svg%3E%0A");
 
-  ${variables_dark_6.segmentedButtonsDarkMode}
-  ${variables_dark_4.buttonDarkMode}
-  ${variables_dark_5.aiAssistantButtonDarkMode}
-  ${variables_dark_7.checkboxDarkMode}
-  ${variables_dark_8.tagDarkMode}
-  ${variables_dark_9.statusCodeDarkMode}
-  ${variables_dark_3.menuDarkMode}
+  ${variables_dark_7.segmentedButtonsDarkMode}
+  ${variables_dark_5.buttonDarkMode}
+  ${variables_dark_6.aiAssistantButtonDarkMode}
+  ${variables_dark_8.checkboxDarkMode}
+  ${variables_dark_9.tagDarkMode}
+  ${variables_dark_10.statusCodeDarkMode}
+  ${variables_dark_4.menuDarkMode}
   ${variables_dark_2.mermaidDarkMode}
+  ${variables_dark_3.excalidrawDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
-  ${variables_dark_10.switcherDarkMode}
-  ${variables_dark_11.cardsDarkMode}
-  ${variables_dark_12.catalogDarkMode}
-  ${variables_dark_13.pageActionsDarkMode}
-  ${variables_dark_14.tooltipDarkMode}
-  ${variables_dark_15.bannerDarkMode}
-  ${variables_dark_16.admonitionDarkMode}
-  ${variables_dark_17.svgViewerDarkMode}
+  ${variables_dark_11.switcherDarkMode}
+  ${variables_dark_12.cardsDarkMode}
+  ${variables_dark_13.catalogDarkMode}
+  ${variables_dark_14.pageActionsDarkMode}
+  ${variables_dark_15.tooltipDarkMode}
+  ${variables_dark_16.bannerDarkMode}
+  ${variables_dark_17.admonitionDarkMode}
+  ${variables_dark_18.svgViewerDarkMode}
   ${badgesDarkMode}
 
   /**

package/lib/core/styles/global.js

@@ -31,20 +31,21 @@ const variables_26 = require("../../components/Markdown/variables");
 const variables_27 = require("../../components/Banner/variables");
 const variables_28 = require("../../markdoc/components/Tabs/variables");
 const variables_29 = require("../../markdoc/components/Mermaid/variables");
-const variables_30 = require("../../components/LastUpdated/variables");
-const variables_31 = require("../../components/Logo/variables");
-const variables_32 = require("../../components/StatusCode/variables");
-const variables_33 = require("../../components/Segmented/variables");
-const variables_34 = require("../../components/UserMenu/variables");
-const variables_35 = require("../../components/Tags/variables");
-const variables_36 = require("../../components/VersionPicker/variables");
-const variables_37 = require("../../components/DatePicker/variables");
-const variables_38 = require("../../components/Switch/variables");
-const variables_39 = require("../../markdoc/components/Cards/variables");
-const variables_40 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_41 = require("../../components/SkipContent/variables");
-const variables_42 = require("../../components/PageActions/variables");
-const variables_43 = require("../../components/SvgViewer/variables");
+const variables_30 = require("../../markdoc/components/ExcalidrawDiagram/variables");
+const variables_31 = require("../../components/LastUpdated/variables");
+const variables_32 = require("../../components/Logo/variables");
+const variables_33 = require("../../components/StatusCode/variables");
+const variables_34 = require("../../components/Segmented/variables");
+const variables_35 = require("../../components/UserMenu/variables");
+const variables_36 = require("../../components/Tags/variables");
+const variables_37 = require("../../components/VersionPicker/variables");
+const variables_38 = require("../../components/DatePicker/variables");
+const variables_39 = require("../../components/Switch/variables");
+const variables_40 = require("../../markdoc/components/Cards/variables");
+const variables_41 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_42 = require("../../components/SkipContent/variables");
+const variables_43 = require("../../components/PageActions/variables");
+const variables_44 = require("../../components/SvgViewer/variables");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -1148,7 +1149,7 @@ const icon = (0, styled_components_1.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
@@ -1230,6 +1231,11 @@ const replay = (0, styled_components_1.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
 `;
 exports.styles = (0, styled_components_1.css) `
@@ -1245,27 +1251,28 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_19.button}
     ${variables_20.aiAssistantButton}
     ${variables_20.connectMCPButton}
-    ${variables_39.cards}
+    ${variables_40.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
     ${variables_24.code}
-    ${variables_40.codeWalkthrough}
+    ${variables_41.codeWalkthrough}
     ${docsDropdown}
     ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
     ${variables_18.footer}
     ${headingsTypography}
-    ${variables_35.httpTag}
+    ${variables_36.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_30.lastUpdated}
+    ${variables_31.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_31.logo}
+    ${variables_32.logo}
     ${variables_26.markdown}
     ${variables_28.markdownTabs}
     ${variables_29.mermaid}
+    ${variables_30.excalidraw}
     ${variables_23.menu}
     ${variables_23.mobileMenu}
     ${modal}
@@ -1283,24 +1290,24 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_15.tooltip}
     ${typography}
-    ${variables_34.userMenu}
-    ${variables_36.versionPicker}
+    ${variables_35.userMenu}
+    ${variables_37.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_32.statusCode}
+    ${variables_33.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_33.segmented}
-    ${variables_38.switcher}
+    ${variables_34.segmented}
+    ${variables_39.switcher}
     ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_37.datePicker}
+    ${variables_38.datePicker}
     ${replay}
-    ${variables_41.skipContent}
-    ${variables_42.pageActions}
-    ${variables_43.svgViewer}
+    ${variables_42.skipContent}
+    ${variables_43.pageActions}
+    ${variables_44.svgViewer}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/lib/icons/ColorPaletteIcon/ColorPaletteIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ColorPaletteIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ColorPaletteIcon/ColorPaletteIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPaletteIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("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" }),
+    react_1.default.createElement("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" }),
+    react_1.default.createElement("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" }),
+    react_1.default.createElement("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" }),
+    react_1.default.createElement("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" }),
+    react_1.default.createElement("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" })));
+exports.ColorPaletteIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ColorPaletteIcon/ColorPaletteIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ColorPaletteIcon.js.map

package/lib/icons/StopIcon/StopIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const StopIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/StopIcon/StopIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StopIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, props),
+    react_1.default.createElement("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" })));
+exports.StopIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/StopIcon/StopIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=StopIcon.js.map

package/lib/index.d.ts

@@ -247,6 +247,7 @@ export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
 export * from './icons/CertificateIcon/CertificateIcon';
 export * from './icons/PlayIcon/PlayIcon';
+export * from './icons/StopIcon/StopIcon';
 export * from './icons/PlaylistIcon/PlaylistIcon';
 export * from './icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from './icons/TaskViewIcon/TaskViewIcon';
@@ -269,6 +270,7 @@ export * from './icons/GenericIcon/GenericIcon';
 export * from './icons/ShareIcon/ShareIcon';
 export * from './icons/HashtagIcon/HashtagIcon';
 export * from './icons/FitToViewIcon/FitToViewIcon';
+export * from './icons/ColorPaletteIcon/ColorPaletteIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -310,6 +310,7 @@ __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 __exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
 __exportStar(require("./icons/PlayIcon/PlayIcon"), exports);
+__exportStar(require("./icons/StopIcon/StopIcon"), exports);
 __exportStar(require("./icons/PlaylistIcon/PlaylistIcon"), exports);
 __exportStar(require("./icons/WorkflowAutomationIcon/WorkflowAutomationIcon"), exports);
 __exportStar(require("./icons/TaskViewIcon/TaskViewIcon"), exports);
@@ -332,6 +333,7 @@ __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 __exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
 __exportStar(require("./icons/HashtagIcon/HashtagIcon"), exports);
 __exportStar(require("./icons/FitToViewIcon/FitToViewIcon"), exports);
+__exportStar(require("./icons/ColorPaletteIcon/ColorPaletteIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+type ExcalidrawDiagramProps = {
+    diagramHtml: string;
+    className?: string;
+};
+export declare function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element;
+export {};

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExcalidrawDiagram = ExcalidrawDiagram;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../../core/utils");
+const hooks_1 = require("../../../core/hooks");
+const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
+function ExcalidrawDiagram({ diagramHtml, className }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const open = () => setIsOpen(true);
+    const close = () => setIsOpen(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Wrapper, { className: (0, utils_1.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') }),
+        react_1.default.createElement(SvgViewer_1.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'),
+            } },
+            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
+}
+const Wrapper = styled_components_1.default.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_components_1.default.div `
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;
+//# sourceMappingURL=ExcalidrawDiagram.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.d.ts

@@ -0,0 +1 @@
+export declare const excalidraw: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const excalidrawDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.excalidrawDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.excalidrawDarkMode = (0, styled_components_1.css) `
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.excalidraw = void 0;
+const styled_components_1 = require("styled-components");
+exports.excalidraw = (0, styled_components_1.css) `
+  /**
+  * @tokens Excalidraw
+  */
+
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

package/lib/markdoc/components/Mermaid/Mermaid.js

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

package/lib/markdoc/components/default.d.ts

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

package/lib/markdoc/components/default.js

@@ -19,6 +19,7 @@ __exportStar(require("../../markdoc/components/InlineSvg/InlineSvg"), exports);
 __exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"), exports);
 __exportStar(require("../../markdoc/components/Heading/Heading"), exports);
 __exportStar(require("../../markdoc/components/Mermaid/Mermaid"), exports);
+__exportStar(require("../../markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram"), exports);
 __exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/TabList"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.0",
+  "version": "0.64.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

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/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/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';