@redocly/theme 0.64.0-next.2 → 0.64.0-next.3

package/lib/core/contexts/Toast/ToastProvider.js

@@ -0,0 +1,156 @@
+"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.ToastProvider = ToastProvider;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importStar(require("react"));
+const Portal_1 = require("../../../components/Portal/Portal");
+const Toast_1 = require("../../../components/Toast/Toast");
+const ToastContext_1 = require("../../../core/contexts/Toast/ToastContext");
+const toast_1 = require("../../../core/constants/toast");
+function toastReducer(state, action) {
+    switch (action.type) {
+        case 'add':
+            return [action.payload, ...state];
+        case 'startExit':
+            return state.map((toast) => toast.id === action.payload.id ? Object.assign(Object.assign({}, toast), { isExiting: true }) : toast);
+        case 'remove':
+            return state.filter((toast) => toast.id !== action.payload.id);
+        case 'update':
+            return state.map((toast) => {
+                var _a;
+                return toast.id === action.payload.id
+                    ? Object.assign(Object.assign(Object.assign({}, toast), action.payload.updates), { type: (_a = action.payload.updates.type) !== null && _a !== void 0 ? _a : toast.type }) : toast;
+            });
+        default:
+            return state;
+    }
+}
+function getToastType(type) {
+    return type !== null && type !== void 0 ? type : 'info';
+}
+function createToastId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        return crypto.randomUUID();
+    }
+    return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+}
+function ToastProvider({ children, mountId }) {
+    const [toasts, dispatch] = (0, react_1.useReducer)(toastReducer, []);
+    const toastsRef = (0, react_1.useRef)([]);
+    const removeTimeoutsRef = (0, react_1.useRef)(new Map());
+    (0, react_1.useEffect)(() => {
+        toastsRef.current = toasts;
+    }, [toasts]);
+    (0, react_1.useEffect)(() => {
+        const timeoutsMap = removeTimeoutsRef.current;
+        return () => {
+            timeoutsMap.forEach((timeoutId) => {
+                clearTimeout(timeoutId);
+            });
+            timeoutsMap.clear();
+        };
+    }, []);
+    const dismissToast = (0, react_1.useCallback)((id) => {
+        var _a;
+        const currentToast = toastsRef.current.find((toast) => toast.id === id);
+        if (!currentToast || currentToast.isExiting) {
+            return;
+        }
+        (_a = currentToast.onClose) === null || _a === void 0 ? void 0 : _a.call(currentToast);
+        dispatch({ type: 'startExit', payload: { id } });
+        const existingTimeout = removeTimeoutsRef.current.get(id);
+        if (existingTimeout) {
+            clearTimeout(existingTimeout);
+        }
+        const timeoutId = setTimeout(() => {
+            dispatch({ type: 'remove', payload: { id } });
+            removeTimeoutsRef.current.delete(id);
+        }, toast_1.TOAST_SLIDE_DURATION_MS);
+        removeTimeoutsRef.current.set(id, timeoutId);
+    }, []);
+    const showToast = (0, react_1.useCallback)((options) => {
+        const id = createToastId();
+        dispatch({
+            type: 'add',
+            payload: Object.assign(Object.assign({}, options), { id, type: getToastType(options.type), isExiting: false }),
+        });
+        return id;
+    }, []);
+    const updateToast = (0, react_1.useCallback)((id, updates) => {
+        dispatch({
+            type: 'update',
+            payload: {
+                id,
+                updates,
+            },
+        });
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        showToast,
+        dismissToast,
+        updateToast,
+    }), [dismissToast, showToast, updateToast]);
+    return (react_1.default.createElement(ToastContext_1.ToastContext.Provider, { value: contextValue },
+        children,
+        toasts.length > 0 ? (react_1.default.createElement(Portal_1.Portal, { mountId: mountId },
+            react_1.default.createElement(ToastViewport, { "aria-label": "Notifications" }, toasts.map((toast, index) => (react_1.default.createElement(Toast_1.Toast, { key: toast.id, stackIndex: index, stackZIndex: toasts.length - index, toast: toast, onDismiss: dismissToast })))))) : null));
+}
+const ToastViewport = styled_components_1.default.div `
+  position: fixed;
+  right: var(--spacing-md);
+  bottom: var(--spacing-md);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--spacing-sm);
+  width: 320px;
+  min-width: 240px;
+  max-width: 360px;
+  pointer-events: none;
+
+  @media (max-width: 480px) {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    width: calc(100vw - var(--spacing-md) * 2);
+    min-width: 0;
+    max-width: none;
+  }
+`;
+//# sourceMappingURL=ToastProvider.js.map

package/lib/core/contexts/index.d.ts

@@ -3,3 +3,5 @@ export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
 export * from './CodeSnippetContext';
 export * from './SearchContext';
+export * from './Toast/ToastContext';
+export * from './Toast/ToastProvider';

package/lib/core/contexts/index.js

@@ -19,4 +19,6 @@ __exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), export
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
 __exportStar(require("./CodeSnippetContext"), exports);
 __exportStar(require("./SearchContext"), exports);
+__exportStar(require("./Toast/ToastContext"), exports);
+__exportStar(require("./Toast/ToastProvider"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/index.d.ts

@@ -51,3 +51,5 @@ export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
 export * from './use-store';
 export * from './use-is-truncated';
+export * from './use-toast';
+export * from './use-toast-logic';

package/lib/core/hooks/index.js

@@ -67,4 +67,6 @@ __exportStar(require("./catalog/use-catalog-entity-schema"), exports);
 __exportStar(require("./catalog/use-catalog-table-header-cell-actions"), exports);
 __exportStar(require("./use-store"), exports);
 __exportStar(require("./use-is-truncated"), exports);
+__exportStar(require("./use-toast"), exports);
+__exportStar(require("./use-toast-logic"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-toast-logic.d.ts

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+import type { ToastItem } from '../types/toast';
+interface UseToastLogicOptions {
+    toast: ToastItem;
+    onDismiss: (id: string) => void;
+    stackIndex: number;
+}
+interface UseToastLogicReturn {
+    wrapperRef: RefObject<HTMLDivElement | null>;
+    hasDetails: boolean;
+    dismissToast: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    ariaRole: 'alert' | 'status';
+    ariaLive: 'assertive' | 'polite';
+}
+export declare function useToastLogic({ toast, onDismiss, stackIndex, }: UseToastLogicOptions): UseToastLogicReturn;
+export {};

package/lib/core/hooks/use-toast-logic.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastLogic = useToastLogic;
+const react_1 = require("react");
+const utils_1 = require("../utils");
+const STACK_SHIFT_ENTER_DURATION_MS = 280;
+const STACK_SHIFT_EXIT_DURATION_MS = 200;
+function useToastLogic({ toast, onDismiss, stackIndex, }) {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const previousTopRef = (0, react_1.useRef)(null);
+    const previousStackIndexRef = (0, react_1.useRef)(null);
+    const timerRef = (0, react_1.useRef)(null);
+    const startedAtRef = (0, react_1.useRef)(null);
+    const remainingTimeRef = (0, react_1.useRef)(0);
+    const animationFrameRef = (0, react_1.useRef)(null);
+    const isHoveredRef = (0, react_1.useRef)(false);
+    const hasDetails = Boolean(toast.description);
+    const resolvedDuration = (0, react_1.useMemo)(() => (0, utils_1.getAutoDismissDuration)(hasDetails, toast.type, toast.duration), [hasDetails, toast.duration, toast.type]);
+    const ariaRole = toast.type === 'error' ? 'alert' : 'status';
+    const ariaLive = toast.type === 'error' ? 'assertive' : 'polite';
+    const clearTimer = (0, react_1.useCallback)(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        startedAtRef.current = null;
+    }, []);
+    const dismissToast = (0, react_1.useCallback)(() => {
+        onDismiss(toast.id);
+    }, [onDismiss, toast.id]);
+    const startTimer = (0, react_1.useCallback)((delay) => {
+        clearTimer();
+        if (delay <= 0) {
+            dismissToast();
+            return;
+        }
+        remainingTimeRef.current = delay;
+        startedAtRef.current = Date.now();
+        timerRef.current = setTimeout(() => {
+            dismissToast();
+        }, delay);
+    }, [clearTimer, dismissToast]);
+    (0, react_1.useEffect)(() => {
+        if (toast.isExiting || resolvedDuration === null) {
+            clearTimer();
+            return undefined;
+        }
+        if (!isHoveredRef.current) {
+            startTimer(resolvedDuration);
+        }
+        return () => {
+            clearTimer();
+        };
+    }, [
+        clearTimer,
+        resolvedDuration,
+        startTimer,
+        toast.description,
+        toast.isExiting,
+        toast.title,
+        toast.type,
+    ]);
+    (0, react_1.useLayoutEffect)(() => {
+        const node = wrapperRef.current;
+        if (!node) {
+            return undefined;
+        }
+        node.style.transition = 'none';
+        node.style.transform = '';
+        const currentTop = node.getBoundingClientRect().top;
+        const previousTop = previousTopRef.current;
+        const previousStackIndex = previousStackIndexRef.current;
+        if (toast.isExiting) {
+            previousTopRef.current = currentTop;
+            previousStackIndexRef.current = stackIndex;
+            return () => {
+                if (animationFrameRef.current !== null) {
+                    window.cancelAnimationFrame(animationFrameRef.current);
+                    animationFrameRef.current = null;
+                }
+            };
+        }
+        const didStackIndexChange = previousStackIndex !== null && previousStackIndex !== stackIndex;
+        if (didStackIndexChange && previousTop !== null && previousTop !== currentTop) {
+            const delta = previousTop - currentTop;
+            const shiftDuration = delta > 0 ? STACK_SHIFT_ENTER_DURATION_MS : STACK_SHIFT_EXIT_DURATION_MS;
+            node.style.transform = `translateY(${delta}px)`;
+            node.getBoundingClientRect();
+            animationFrameRef.current = window.requestAnimationFrame(() => {
+                animationFrameRef.current = null;
+                if (!wrapperRef.current) {
+                    return;
+                }
+                wrapperRef.current.style.transition = `transform ${shiftDuration}ms ease-out`;
+                wrapperRef.current.style.transform = 'translateY(0)';
+            });
+        }
+        previousTopRef.current = currentTop;
+        previousStackIndexRef.current = stackIndex;
+        return () => {
+            if (animationFrameRef.current !== null) {
+                window.cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        return () => {
+            clearTimer();
+            if (animationFrameRef.current !== null) {
+                window.cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [clearTimer]);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        isHoveredRef.current = true;
+        if (resolvedDuration === null || startedAtRef.current === null) {
+            return;
+        }
+        const elapsed = Date.now() - startedAtRef.current;
+        remainingTimeRef.current = Math.max(remainingTimeRef.current - elapsed, 0);
+        clearTimer();
+    }, [clearTimer, resolvedDuration]);
+    const handleMouseLeave = (0, react_1.useCallback)(() => {
+        isHoveredRef.current = false;
+        if (toast.isExiting || resolvedDuration === null) {
+            return;
+        }
+        startTimer(remainingTimeRef.current || resolvedDuration);
+    }, [resolvedDuration, startTimer, toast.isExiting]);
+    return {
+        wrapperRef,
+        hasDetails,
+        dismissToast,
+        handleMouseEnter,
+        handleMouseLeave,
+        ariaRole,
+        ariaLive,
+    };
+}
+//# sourceMappingURL=use-toast-logic.js.map

package/lib/core/hooks/use-toast.d.ts

@@ -0,0 +1,11 @@
+import type { ToastContextValue, ToastOptions } from '../types/toast';
+type TypedToastOptions = Omit<ToastOptions, 'title' | 'type'>;
+interface UseToastReturn extends ToastContextValue {
+    info: (title: string, options?: TypedToastOptions) => string;
+    success: (title: string, options?: TypedToastOptions) => string;
+    warning: (title: string, options?: TypedToastOptions) => string;
+    error: (title: string, options?: TypedToastOptions) => string;
+    loading: (title: string, options?: TypedToastOptions) => string;
+}
+export declare function useToast(): UseToastReturn;
+export {};

package/lib/core/hooks/use-toast.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = useToast;
+const react_1 = require("react");
+const ToastContext_1 = require("../contexts/Toast/ToastContext");
+function createTypedToast(showToast, type) {
+    return (title, options) => showToast(Object.assign(Object.assign({}, options), { title,
+        type }));
+}
+function useToast() {
+    const context = (0, react_1.useContext)(ToastContext_1.ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, context), { info: createTypedToast(context.showToast, 'info'), success: createTypedToast(context.showToast, 'success'), warning: createTypedToast(context.showToast, 'warning'), error: createTypedToast(context.showToast, 'error'), loading: createTypedToast(context.showToast, 'loading') })), [context]);
+}
+//# sourceMappingURL=use-toast.js.map

package/lib/core/styles/dark.js

@@ -4,22 +4,21 @@ 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("../../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 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 palette_dark_1 = require("./palette.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
@@ -243,12 +242,6 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-black: #ffffff;
   --color-white: #000000;
 
-
-  --color-brand-pink-subtle-bg: var(--color-brand-subtle-1);
-  --color-brand-pink-subtle-bg-hover: var(--color-brand-subtle-2);
-  --color-brand-pink-subtle-border: var(--color-brand-subtle-3);
-  --color-brand-pink-subtle-border-hover: var(--color-brand-subtle-4);
-
   --color-hover-base: #32343E;
 
   --bg-color: var(--color-warm-grey-2);
@@ -272,6 +265,11 @@ exports.darkMode = (0, styled_components_1.css) `
   --layer-accent-hover: var(--color-warm-grey-10);
   --layer-color-raised: var(--color-warm-grey-3);
 
+  --color-brand-subtle-bg: var(--color-brand-subtle-1);
+  --color-brand-subtle-bg-hover: var(--color-brand-subtle-2);
+  --color-brand-subtle-border: var(--color-brand-subtle-3);
+  --color-brand-subtle-border-hover: var(--color-brand-subtle-4);
+
   /**
     * @tokens Border Colors
     * @presenter Color
@@ -335,25 +333,24 @@ 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_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_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_2.mermaidDarkMode}
-  ${variables_dark_3.excalidrawDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
-  ${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}
+  ${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}
   ${badgesDarkMode}
   ${palette_dark_1.activeBrandPaletteDark}
   /**