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

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

@@ -1,8 +1,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';
@@ -17,7 +15,6 @@ import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/varia
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
 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';
 
 import { activeBrandPaletteDark } from './palette.dark';
 
@@ -246,12 +243,6 @@ export const darkMode = 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);
@@ -275,6 +266,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
@@ -345,8 +341,6 @@ export const darkMode = css`
   ${tagDarkMode}
   ${statusCodeDarkMode}
   ${menuDarkMode}
-  ${mermaidDarkMode}
-  ${excalidrawDarkMode}
   ${scorecardDarkMode}
   ${replayDarkMode}
   ${switcherDarkMode}
@@ -356,7 +350,6 @@ export const darkMode = css`
   ${tooltipDarkMode}
   ${bannerDarkMode}
   ${admonitionDarkMode}
-  ${svgViewerDarkMode}
   ${badgesDarkMode}
   ${activeBrandPaletteDark}
   /**

package/src/core/styles/global.ts

@@ -28,8 +28,7 @@ import { productPicker } from '@redocly/theme/components/Product/variables';
 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 { diagram } from '@redocly/theme/markdoc/components/Diagram/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,6 +43,7 @@ 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';
@@ -227,23 +227,6 @@ const themeColors = css`
   --color-white: #ffffff;
   --color-static-white: #ffffff;
 
-  --color-primary-bg: var(--color-brand-1);
-  --color-primary-bg-hover: var(--color-brand-2);
-  --color-primary-border: var(--color-brand-3);
-  --color-primary-border-hover: var(--color-brand-4);
-  --color-primary-hover: var(--color-brand-8);
-  --color-primary-base: var(--color-brand-6);
-  --color-primary-active: var(--color-brand-7);
-  --color-primary-text-hover: var(--color-brand-9);
-  --color-primary-text: var(--color-brand-8);
-  --color-primary-text-active: var(--color-brand-7);
-  --color-primary-text-on-color: var(--text-color-on-color);
-
-  --color-brand-pink-subtle-bg: var(--color-brand-1);
-  --color-brand-pink-subtle-bg-hover: var(--color-brand-2);
-  --color-brand-pink-subtle-border: var(--color-brand-3);
-  --color-brand-pink-subtle-border-hover: var(--color-brand-4);
-
   --color-success-bg: var(--color-green-1);
   --color-success-bg-hover: var(--color-green-2);
   --color-success-border: var(--color-green-3);
@@ -288,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
@@ -770,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
@@ -1264,6 +1259,13 @@ 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
 `;
 
@@ -1301,8 +1303,7 @@ export const styles = css<{ palette?: string }>`
     ${logo}
     ${markdown}
     ${markdownTabs}
-    ${mermaid}
-    ${excalidraw}
+    ${diagram}
     ${menu}
     ${mobileMenu}
     ${modal}
@@ -1339,6 +1340,7 @@ export const styles = css<{ palette?: string }>`
     ${skipContent}
     ${pageActions}
     ${svgViewer}
+    ${toast}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -2,20 +2,6 @@ import { css, type FlattenSimpleInterpolation } from 'styled-components';
 
 function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolation {
   switch (palette) {
-    case 'default':
-      return css`
-        --color-brand-1: var(--color-blueberry-1);
-        --color-brand-2: var(--color-blueberry-2);
-        --color-brand-3: var(--color-blueberry-3);
-        --color-brand-4: var(--color-blueberry-4);
-        --color-brand-5: var(--color-blueberry-5);
-        --color-brand-6: var(--color-blueberry-6);
-        --color-brand-7: var(--color-blueberry-7);
-        --color-brand-8: var(--color-blueberry-8);
-        --color-brand-9: var(--color-blueberry-9);
-        --color-brand-10: var(--color-blueberry-10);
-        --color-brand-11: var(--color-blueberry-11);
-      `;
     case 'slate':
       return css`
         --color-brand-1: #2a2b33;
@@ -189,22 +175,21 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
       `;
     default:
       return css`
-        --color-brand-1: #232a61;
-        --color-brand-2: #222d7a;
-        --color-brand-3: #1e2f93;
-        --color-brand-4: #2f46b7;
-        --color-brand-5: #4561db;
-        --color-brand-6: #5f81ff;
-        --color-brand-7: #87a3ff;
-        --color-brand-8: #9fb7ff;
-        --color-brand-9: #bfd0ff;
-        --color-brand-10: #dfe8ff;
-        --color-brand-11: #f0f4ff;
-        --color-brand-subtle-1: #232a6166;
-        --color-brand-subtle-2: #222d7a66;
-        --color-brand-subtle-3: #1e2f9366;
-        --color-brand-subtle-4: #2f46b766;
-        --text-color-on-color: #ffffff;
+        --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);
       `;
   }
 }