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

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

@@ -5,18 +5,26 @@ import {
 
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
+  currentSortOption?: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
 
 export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
   column,
+  currentSortOption,
   handleSortClick,
   isColumnSorted,
 }: CatalogTableHeaderCellActionsProps<T>) {
   const sortKey = column.sortKey;
-  const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
-  const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+  const isUpActive = Boolean(
+    sortKey &&
+    (currentSortOption ? currentSortOption === sortKey : isColumnSorted(sortKey, 'desc')),
+  );
+  const isDownActive = Boolean(
+    sortKey &&
+    (currentSortOption ? currentSortOption === `-${sortKey}` : isColumnSorted(sortKey, 'asc')),
+  );
 
   const handleCellClick = (): void => {
     if (!column.sortable || !sortKey) return;

package/src/core/hooks/index.ts

@@ -46,7 +46,10 @@ export * from './use-page-actions';
 export * from './use-mcp-config';
 export * from './use-connect-mcp-button';
 export * from './catalog/use-catalog-entity-details';
+export * from './catalog/use-catalog-entity-link';
 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/src/core/hooks/use-toast-logic.ts

@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+
+import type { RefObject } from 'react';
+import type { ToastItem } from '../types/toast';
+
+import { getAutoDismissDuration } from '../utils';
+
+const STACK_SHIFT_ENTER_DURATION_MS = 280;
+const STACK_SHIFT_EXIT_DURATION_MS = 200;
+
+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 function useToastLogic({
+  toast,
+  onDismiss,
+  stackIndex,
+}: UseToastLogicOptions): UseToastLogicReturn {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const previousTopRef = useRef<number | null>(null);
+  const previousStackIndexRef = useRef<number | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const startedAtRef = useRef<number | null>(null);
+  const remainingTimeRef = useRef<number>(0);
+  const animationFrameRef = useRef<number | null>(null);
+  const isHoveredRef = useRef<boolean>(false);
+
+  const hasDetails = Boolean(toast.description);
+  const resolvedDuration = useMemo(
+    () => 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 = useCallback((): void => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+
+    startedAtRef.current = null;
+  }, []);
+
+  const dismissToast = useCallback((): void => {
+    onDismiss(toast.id);
+  }, [onDismiss, toast.id]);
+
+  const startTimer = useCallback(
+    (delay: number): void => {
+      clearTimer();
+
+      if (delay <= 0) {
+        dismissToast();
+        return;
+      }
+
+      remainingTimeRef.current = delay;
+      startedAtRef.current = Date.now();
+      timerRef.current = setTimeout(() => {
+        dismissToast();
+      }, delay);
+    },
+    [clearTimer, dismissToast],
+  );
+
+  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,
+  ]);
+
+  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;
+      }
+    };
+  });
+
+  useEffect(() => {
+    return () => {
+      clearTimer();
+
+      if (animationFrameRef.current !== null) {
+        window.cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [clearTimer]);
+
+  const handleMouseEnter = useCallback((): void => {
+    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 = useCallback((): void => {
+    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,
+  };
+}

package/src/core/hooks/use-toast.ts

@@ -0,0 +1,47 @@
+import { useContext, useMemo } from 'react';
+
+import type { ToastContextValue, ToastOptions, ToastType } from '../types/toast';
+
+import { ToastContext } from '../contexts/Toast/ToastContext';
+
+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;
+}
+
+function createTypedToast(
+  showToast: ToastContextValue['showToast'],
+  type: ToastType,
+): (title: string, options?: TypedToastOptions) => string {
+  return (title: string, options?: TypedToastOptions): string =>
+    showToast({
+      ...options,
+      title,
+      type,
+    });
+}
+
+export function useToast(): UseToastReturn {
+  const context = useContext(ToastContext);
+
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+
+  return useMemo(
+    () => ({
+      ...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],
+  );
+}

package/src/core/styles/dark.ts

@@ -2,7 +2,6 @@ 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';
@@ -19,7 +18,9 @@ import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark'
 import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
 import { svgViewerDarkMode } from '@redocly/theme/components/SvgViewer/variables.dark';
 
-const replayDarkMode = css`
+import { activeBrandPaletteDark } from './palette.dark';
+
+const replayDarkMode = css<{ palette?: string }>`
   /**
     * @tokens Replay Colors
     * @presenter Color
@@ -267,6 +268,11 @@ export const darkMode = 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
@@ -338,7 +344,6 @@ export const darkMode = css`
   ${statusCodeDarkMode}
   ${menuDarkMode}
   ${mermaidDarkMode}
-  ${excalidrawDarkMode}
   ${scorecardDarkMode}
   ${replayDarkMode}
   ${switcherDarkMode}
@@ -350,7 +355,7 @@ export const darkMode = css`
   ${admonitionDarkMode}
   ${svgViewerDarkMode}
   ${badgesDarkMode}
-
+  ${activeBrandPaletteDark}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/src/core/styles/global.ts

@@ -29,7 +29,6 @@ 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';
@@ -44,7 +43,9 @@ import { codeWalkthrough } from '@redocly/theme/markdoc/components/CodeWalkthrou
 import { skipContent } from '@redocly/theme/components/SkipContent/variables';
 import { pageActions } from '@redocly/theme/components/PageActions/variables';
 import { svgViewer } from '@redocly/theme/components/SvgViewer/variables';
+import { toast } from '@redocly/theme/components/Toast/variables';
 
+import { activeBrandPaletteLight } from './palette';
 import { darkMode } from './dark';
 
 const themeColors = css`
@@ -226,17 +227,6 @@ const themeColors = css`
   --color-white: #ffffff;
   --color-static-white: #ffffff;
 
-  --color-primary-bg: var(--color-blueberry-1);
-  --color-primary-bg-hover: var(--color-blueberry-2);
-  --color-primary-border: var(--color-blueberry-3);
-  --color-primary-border-hover: var(--color-blueberry-4);
-  --color-primary-hover: var(--color-blueberry-5);
-  --color-primary-base: var(--color-blueberry-6);
-  --color-primary-active: var(--color-blueberry-7);
-  --color-primary-text-hover: var(--color-blueberry-8);
-  --color-primary-text: var(--color-blueberry-9);
-  --color-primary-text-active: var(--color-blueberry-10);
-
   --color-success-bg: var(--color-green-1);
   --color-success-bg-hover: var(--color-green-2);
   --color-success-border: var(--color-green-3);
@@ -281,6 +271,18 @@ const themeColors = css`
   --color-info-text: var(--color-blue-9);
   --color-info-text-active: var(--color-blue-10);
 
+  --color-primary-bg: var(--color-brand-1); // @presenter Color
+  --color-primary-bg-hover: var(--color-brand-2); // @presenter Color
+  --color-primary-border: var(--color-brand-3); // @presenter Color
+  --color-primary-border-hover: var(--color-brand-4); // @presenter Color
+  --color-primary-hover: var(--color-brand-8); // @presenter Color
+  --color-primary-base: var(--color-brand-6); // @presenter Color
+  --color-primary-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-hover: var(--color-brand-9); // @presenter Color
+  --color-primary-text: var(--color-brand-8); // @presenter Color
+  --color-primary-text-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-on-color: var(--text-color-on-color); // @presenter Color
+
   /**
    * @tokens Elevation Colors
    * @presenter Color
@@ -763,24 +765,24 @@ const apiReferenceDocs = css`
   --schema-chevron-color: var(--text-color-secondary); // @presenter Color
   --schema-chevron-size: 9px;
 
-  --schema-property-deep-link-icon-color: var(--color-primary-base); // @presenter Color
+  --schema-property-deep-link-icon-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --schema-property-deep-link-icon: none;
 
   /**
     * @tokens API Reference Other
     */
 
-  --loading-spinner-color: var(--color-primary-base); // @presenter Color
+  --loading-spinner-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --linear-progress-color: var(--color-info-base); // @presenter Color
   --linear-progress-bg-color: var(--color-info-bg); // @presenter Color
 
-  --fab-bg-color: var(--color-primary-base); // @presenter Color
+  --fab-bg-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
 
-  --fab-bg-color-hover: var(--color-primary-base); // @presenter Color
+  --fab-bg-color-hover: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow-hover: var(--bg-raised-shadow); // @presenter Shadow
 
-  --fab-bg-color-active: var(--color-primary-base); // @presenter Color
+  --fab-bg-color-active: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow-active: var(--bg-raised-shadow); // @presenter Shadow
 
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
@@ -1257,11 +1259,18 @@ const replay = css`
   --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;
+
+  --replay-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --replay-transition-duration: 300ms;
+
+  @media (prefers-reduced-motion: reduce) {
+    --replay-transition-duration: 0s;
+  }
   // @tokens End
 `;
 
 
-export const styles = css`
+export const styles = css<{ palette?: string }>`
   :root {
     ${accordion}
     ${admonition}
@@ -1295,7 +1304,6 @@ export const styles = css`
     ${markdown}
     ${markdownTabs}
     ${mermaid}
-    ${excalidraw}
     ${menu}
     ${mobileMenu}
     ${modal}
@@ -1309,6 +1317,7 @@ export const styles = css`
     ${sizeAndSpace}
     ${tag}
     ${themeColors}
+    ${activeBrandPaletteLight}
     ${tile}
     ${toc}
     ${tooltip}
@@ -1331,6 +1340,7 @@ export const styles = css`
     ${skipContent}
     ${pageActions}
     ${svgViewer}
+    ${toast}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);
@@ -1348,6 +1358,6 @@ export const styles = css`
   ${browserOverrides}
 `;
 
-export const GlobalStyle = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle<{ palette?: string }>`
   ${styles};
 `;

package/src/core/styles/palette.dark.ts

@@ -0,0 +1,199 @@
+import { css, type FlattenSimpleInterpolation } from 'styled-components';
+
+function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolation {
+  switch (palette) {
+    case 'slate':
+      return css`
+        --color-brand-1: #2a2b33;
+        --color-brand-2: #3b3c45;
+        --color-brand-3: #555761;
+        --color-brand-4: #6e6f7a;
+        --color-brand-5: #9b9ca8;
+        --color-brand-6: #fbfbfc;
+        --color-brand-7: #ededf2;
+        --color-brand-8: #dcdde5;
+        --color-brand-9: #c4c6d1;
+        --color-brand-10: #9b9ca8;
+        --color-brand-11: #6e6f7a;
+        --color-brand-subtle-1: #2a2b3366;
+        --color-brand-subtle-2: #3b3c4566;
+        --color-brand-subtle-3: #55576166;
+        --color-brand-subtle-4: #6e6f7a66;
+        --text-color-on-color: #000000;
+      `;
+    case 'pink':
+      return css`
+        --color-brand-1: #4f2841;
+        --color-brand-2: #6a3055;
+        --color-brand-3: #853668;
+        --color-brand-4: #a03a7b;
+        --color-brand-5: #bb3d8d;
+        --color-brand-6: #d6409f;
+        --color-brand-7: #de59ad;
+        --color-brand-8: #e677bd;
+        --color-brand-9: #ef99cf;
+        --color-brand-10: #f7bfe2;
+        --color-brand-11: #ffe8f7;
+        --color-brand-subtle-1: #4f284166;
+        --color-brand-subtle-2: #6a305566;
+        --color-brand-subtle-3: #85366866;
+        --color-brand-subtle-4: #a03a7b66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'coral':
+      return css`
+        --color-brand-1: #4f282b;
+        --color-brand-2: #6d3338;
+        --color-brand-3: #8b3c42;
+        --color-brand-4: #a9434c;
+        --color-brand-5: #c74b55;
+        --color-brand-6: #e5535f;
+        --color-brand-7: #ea6a75;
+        --color-brand-8: #ef858d;
+        --color-brand-9: #f5a3aa;
+        --color-brand-10: #fac5c9;
+        --color-brand-11: #ffe8ea;
+        --color-brand-subtle-1: #4f282b66;
+        --color-brand-subtle-2: #6d333866;
+        --color-brand-subtle-3: #8b3c4266;
+        --color-brand-subtle-4: #a9434c66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'amber':
+      return css`
+        --color-brand-1: #4f3c28;
+        --color-brand-2: #71512e;
+        --color-brand-3: #93632f;
+        --color-brand-4: #b6732a;
+        --color-brand-5: #d88121;
+        --color-brand-6: #fa8d15;
+        --color-brand-7: #fb9f3a;
+        --color-brand-8: #fcb261;
+        --color-brand-9: #fdc78c;
+        --color-brand-10: #feddba;
+        --color-brand-11: #fff4e8;
+        --color-brand-subtle-1: #4f3c2866;
+        --color-brand-subtle-2: #71512e66;
+        --color-brand-subtle-3: #93632f66;
+        --color-brand-subtle-4: #b6732a66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'jade':
+      return css`
+        --color-brand-1: #284f45;
+        --color-brand-2: #2a6052;
+        --color-brand-3: #2b715e;
+        --color-brand-4: #2b816b;
+        --color-brand-5: #2a9277;
+        --color-brand-6: #29a383;
+        --color-brand-7: #42b597;
+        --color-brand-8: #61c8ad;
+        --color-brand-9: #88dac4;
+        --color-brand-10: #b5edde;
+        --color-brand-11: #e8fff9;
+        --color-brand-subtle-1: #284f4566;
+        --color-brand-subtle-2: #2a605266;
+        --color-brand-subtle-3: #2b715e66;
+        --color-brand-subtle-4: #2b816b66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'cyan':
+      return css`
+        --color-brand-1: #28484f;
+        --color-brand-2: #285c67;
+        --color-brand-3: #246e7f;
+        --color-brand-4: #1b8097;
+        --color-brand-5: #0f91af;
+        --color-brand-6: #00a2c7;
+        --color-brand-7: #22b2d2;
+        --color-brand-8: #4ac2dd;
+        --color-brand-9: #79d4e9;
+        --color-brand-10: #aee7f4;
+        --color-brand-11: #e8fbff;
+        --color-brand-subtle-1: #28484f66;
+        --color-brand-subtle-2: #285c6766;
+        --color-brand-subtle-3: #246e7f66;
+        --color-brand-subtle-4: #1b809766;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'ocean':
+      return css`
+        --color-brand-1: #283e4f;
+        --color-brand-2: #2d5472;
+        --color-brand-3: #2a6795;
+        --color-brand-4: #2277b9;
+        --color-brand-5: #1384dc;
+        --color-brand-6: #0090ff;
+        --color-brand-7: #29a2ff;
+        --color-brand-8: #56b5ff;
+        --color-brand-9: #85caff;
+        --color-brand-10: #b6dfff;
+        --color-brand-11: #e8f5ff;
+        --color-brand-subtle-1: #283e4f66;
+        --color-brand-subtle-2: #2d547266;
+        --color-brand-subtle-3: #2a679566;
+        --color-brand-subtle-4: #2277b966;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'indigo':
+      return css`
+        --color-brand-1: #28314f;
+        --color-brand-2: #303e6b;
+        --color-brand-3: #364988;
+        --color-brand-4: #3952a4;
+        --color-brand-5: #3c5bc1;
+        --color-brand-6: #3e63dd;
+        --color-brand-7: #5879e4;
+        --color-brand-8: #7691eb;
+        --color-brand-9: #99aef1;
+        --color-brand-10: #bfcdf8;
+        --color-brand-11: #e8edff;
+        --color-brand-subtle-1: #28314f66;
+        --color-brand-subtle-2: #303e6b66;
+        --color-brand-subtle-3: #36498866;
+        --color-brand-subtle-4: #3952a466;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'iris':
+      return css`
+        --color-brand-1: #2e2e4f;
+        --color-brand-2: #3a3a6a;
+        --color-brand-3: #434385;
+        --color-brand-4: #4c4ca0;
+        --color-brand-5: #5353bb;
+        --color-brand-6: #5b5bd6;
+        --color-brand-7: #7070de;
+        --color-brand-8: #8a8ae6;
+        --color-brand-9: #a7a7ef;
+        --color-brand-10: #c8c8f7;
+        --color-brand-11: #ebebff;
+        --color-brand-subtle-1: #2e2e4f80;
+        --color-brand-subtle-2: #3a3a6a80;
+        --color-brand-subtle-3: #43438580;
+        --color-brand-subtle-4: #4c4ca080;
+        --text-color-on-color: #ffffff;
+      `;
+    default:
+      return css`
+        --button-bg-color-primary-hover-legacy: var(--color-blue-5);
+        --button-bg-color-primary-pressed-legacy: var(--color-blue-4);
+
+        --toc-item-text-color-active-legacy: var(--text-color-primary); 
+        --toc-item-border-color-active-legacy: var(--border-color-invers);
+
+        --checkbox-border-color-legacy: var(--border-color-primary);
+        
+        --switch-bg-color-selected-legacy: var(--color-warm-grey-7);
+        --switch-border-color-selected-legacy: var(--color-warm-grey-7);
+
+        --md-tabs-active-tab-bg-color-legacy: var(--bg-color-active);
+
+        --admonition-default-bg-color-legacy: var(--color-warm-grey-3);
+        --admonition-default-border-color-legacy: var(--color-warm-grey-5);
+      `;
+  }
+}
+
+export const activeBrandPaletteDark = css<{ palette?: string }>`
+  ${({ palette }) => brandPaletteDark(palette)}
+`;