@redocly/theme 0.54.3 → 0.55.0-next.1

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -20,8 +20,8 @@ export type LanguagePickerProps = {
 
 export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
   const { currentLocale, locales, setLocale } = useLanguagePicker();
-  const { useOtelTelemetry } = useThemeHooks();
-  const otelTelemetry = useOtelTelemetry();
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
 
   if (locales.length < 2 || !currentLocale) {
     return null;
@@ -40,7 +40,7 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     onAction: () => {
       setLocale(locale.code);
       props.onChangeLanguage(locale.code);
-      otelTelemetry.send({
+      telemetry.send({
         type: 'language_picker_locale.changed',
         payload: { locale: locale.code },
       });

package/src/components/Logo/Logo.tsx

@@ -14,8 +14,8 @@ export type LogoProps = {
 };
 
 export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Element | null {
-  const { useOtelTelemetry } = useThemeHooks();
-  const otelTelemetry = useOtelTelemetry();
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
 
   if (!config?.image && !config?.srcSet) {
     return null;
@@ -27,7 +27,7 @@ export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Eleme
   return (
     <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
       {config.link ? (
-        <Link to={config.link} onClick={() => otelTelemetry.send({ type: 'logo.clicked' })}>
+        <Link to={config.link} onClick={() => telemetry.send({ type: 'logo.clicked' })}>
           {image}
         </Link>
       ) : (

package/src/components/Menu/MenuItem.tsx

@@ -17,7 +17,7 @@ import { Badge } from '@redocly/theme/components/Badge/Badge';
 
 export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   const { item, depth, className, onClick } = props;
-  const { useTranslate, useOtelTelemetry } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const type = getMenuItemType(item);
   const nestedMenuRef = useRef<HTMLDivElement>(null);
@@ -28,7 +28,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     labelRef,
     nestedMenuRef,
   });
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
   const isDrilldown = type === MenuItemType.DrillDown;
   const isSeparator = type === MenuItemType.Separator;
   const isNested = type === MenuItemType.Group;
@@ -36,7 +36,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const hasHttpTag = !!item.httpVerb || type === MenuItemType.Operation;
 
   const handleOnClick = () => {
-    otelTelemetry.send({
+    telemetry.send({
       type: 'sidebar.item_clicked',
       payload: {
         label: item.label,

package/src/components/Navbar/Navbar.tsx

@@ -25,9 +25,9 @@ export type NavbarProps = {
 export function Navbar({ className }: NavbarProps): JSX.Element | null {
   const { isOpen, closeMobileMenu, openMobileMenu } = useMobileMenu(false);
   const themeConfig = useThemeConfig();
-  const { useL10n, useOtelTelemetry } = useThemeHooks();
+  const { useL10n, useTelemetry } = useThemeHooks();
   const { changeLanguage } = useL10n();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
 
   const menu = themeConfig.navbar?.items;
 
@@ -58,11 +58,11 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
             isOpen
               ? () => {
                   closeMobileMenu();
-                  otelTelemetry.send({ type: 'mobile_menu_button_close.clicked' });
+                  telemetry.send({ type: 'mobile_menu_button_close.clicked' });
                 }
               : () => {
                   openMobileMenu();
-                  otelTelemetry.send({ type: 'mobile_menu_button_open.clicked' });
+                  telemetry.send({ type: 'mobile_menu_button_open.clicked' });
                 }
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}

package/src/components/Navbar/NavbarItem.tsx

@@ -25,10 +25,10 @@ export type NavbarItemProps = {
 
 export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
   const { pathname } = useLocation();
-  const { useTranslate, useL10nConfig, useOtelTelemetry } = useThemeHooks();
+  const { useTranslate, useL10nConfig, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const { defaultLocale, currentLocale, locales } = useL10nConfig();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
 
   if (navItem.type !== 'link' && !navItem.items) return null;
 
@@ -46,7 +46,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       active={isActive}
       className={className}
       onClick={() =>
-        otelTelemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } })
+        telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } })
       }
       external={item.external}
       target={item.target}

package/src/components/Search/SearchDialog.tsx

@@ -37,9 +37,9 @@ export type SearchDialogProps = {
 };
 
 export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
-  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } =
+  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
     useThemeHooks();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
@@ -139,7 +139,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
           innerRef={innerRef}
           onClick={() => {
             addSearchHistoryItem(query);
-            otelTelemetry.send({
+            telemetry.send({
               type: 'search.result.clicked',
               payload: {
                 query,
@@ -154,7 +154,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
         />
       );
     },
-    [onClose, product, products, addSearchHistoryItem, query, otelTelemetry, mode],
+    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode],
   );
 
   const showLoadMore = useCallback(
@@ -381,7 +381,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                   <>
                     <SearchRecent
                       onSelect={(query, index) => {
-                        otelTelemetry.send({
+                        telemetry.send({
                           type: 'search.recent.clicked',
                           payload: {
                             query,

package/src/components/Search/SearchInput.tsx

@@ -33,9 +33,9 @@ export function SearchInput({
   onSubmit,
   className,
 }: SearchInputProps): JSX.Element {
-  const { useOtelTelemetry } = useThemeHooks();
+  const { useTelemetry } = useThemeHooks();
   const { addSearchHistoryItem } = useRecentSearches();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
 
   const { onKeyDown } = useInputKeyCommands({
     onEnter: (event) => onSubmit?.(event),
@@ -51,7 +51,7 @@ export function SearchInput({
   const handleOnReset = () => {
     onChange('');
     addSearchHistoryItem(value);
-    otelTelemetry.send({ type: 'search_input_reset_button.clicked' });
+    telemetry.send({ type: 'search_input_reset_button.clicked' });
   };
 
   return (

package/src/components/Search/SearchRecent.tsx

@@ -16,16 +16,16 @@ export type SearchRecentProps = {
 
 export function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.Element | null {
   const { items, removeSearchHistoryItem } = useRecentSearches();
-  const { useTranslate, useOtelTelemetry } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
 
   if (!items || !items.length) return null;
 
   const handleOnRemove = (e: React.MouseEvent<SVGSVGElement, MouseEvent>, item: string) => {
     e.stopPropagation();
     removeSearchHistoryItem(item);
-    otelTelemetry.send({ type: 'search_recent_remove_button.clicked' });
+    telemetry.send({ type: 'search_recent_remove_button.clicked' });
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, item: string, index: number) => {

package/src/components/Search/SearchTrigger.tsx

@@ -6,7 +6,7 @@ import type { JSX } from 'react';
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getUserAgent } from '@redocly/theme/core/utils';
 
 export type SearchTriggerProps = {
   onClick: () => void;
@@ -18,7 +18,8 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
+  const defaultKeyShortcut = '⌘+K,CTRL+K';
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? [defaultKeyShortcut];
   let mainShortcutKey: string | null | undefined = null;
 
   if (keyShortcuts) {
@@ -30,6 +31,7 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   }
 
   mainShortcutKey = mainShortcutKey?.toUpperCase();
+  const isMac = getUserAgent().includes('Mac');
 
   return (
     <SearchTriggerWrapper
@@ -49,7 +51,11 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
       >
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
-        {mainShortcutKey && <span>{mainShortcutKey}</span>}
+        {mainShortcutKey === defaultKeyShortcut ? (
+          <span>{isMac ? '⌘K' : 'Ctrl+K'}</span>
+        ) : (
+          <span>{mainShortcutKey}</span>
+        )}
       </SearchTriggerInput>
     </SearchTriggerWrapper>
   );

package/src/components/SidebarActions/SidebarActions.tsx

@@ -34,9 +34,9 @@ export const SidebarActions = ({
   requestAccessButton,
   className,
 }: SidebarActionsProps) => {
-  const { useOtelTelemetry, useTranslate } = useThemeHooks();
+  const { useTelemetry, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
   return (
     <ControlsWrap
       className={className}
@@ -48,9 +48,9 @@ export const SidebarActions = ({
           onClick={() => {
             onChangeCollapseSidebarClick();
             if (collapsedSidebar) {
-              otelTelemetry.send({ type: 'sidebar.item_expanded' });
+              telemetry.send({ type: 'sidebar.item_expanded' });
             } else {
-              otelTelemetry.send({ type: 'sidebar.item_collapsed' });
+              telemetry.send({ type: 'sidebar.item_collapsed' });
             }
           }}
           title={
@@ -70,7 +70,7 @@ export const SidebarActions = ({
             layout={layout}
             onClick={() => {
               onChangeViewClick();
-              otelTelemetry.send({ type: 'change_layout_button.clicked' });
+              telemetry.send({ type: 'change_layout_button.clicked' });
             }}
           />
         </ControlsWrapChangeLayoutButtons>

package/src/components/TableOfContent/TableOfContent.tsx

@@ -25,9 +25,9 @@ export type TableOfContentProps = {
 
 export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   const { headings, contentWrapper, className } = props;
-  const { useTranslate, useOtelTelemetry } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
 
   const sidebar = React.useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
@@ -66,7 +66,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
                 className={activeHeadingId === heading.id ? 'active' : ''}
                 dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                 data-testid={`toc-${heading.value}`}
-                onClick={() => otelTelemetry.send({ type: 'toc_item.clicked' })}
+                onClick={() => telemetry.send({ type: 'toc_item.clicked' })}
               />
             );
           })}

package/src/components/UserMenu/LoginButton.tsx

@@ -11,16 +11,16 @@ export type LoginButtonProps = {
 };
 
 export function LoginButton({ href, className }: LoginButtonProps): JSX.Element {
-  const { useTranslate, useOtelTelemetry } = useThemeHooks();
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
 
   return (
     <div data-component-name="UserMenu/LoginButton" className={className}>
       <Button
         data-translation-key="userMenu.login"
         to={href}
-        onClick={() => otelTelemetry.send({ type: 'login_button.clicked' })}
+        onClick={() => telemetry.send({ type: 'login_button.clicked' })}
         data-testid="login-btn"
         extraClass={className}
         variant="primary"

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -12,13 +12,13 @@ export type LogoutMenuItemProps = {
 };
 
 export function LogoutMenuItem({ iconOnly, className }: LogoutMenuItemProps): JSX.Element {
-  const { useTranslate, useOtelTelemetry, useUserMenu } = useThemeHooks();
+  const { useTranslate, useTelemetry, useUserMenu } = useThemeHooks();
   const { handleLogout } = useUserMenu();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
   const { translate } = useTranslate();
 
   const handleClick = () => {
-    otelTelemetry.send({ type: 'logout_menu_item.clicked' });
+    telemetry.send({ type: 'logout_menu_item.clicked' });
     handleLogout();
   };
 

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -11,9 +11,6 @@ export const useThemeHooks = jest.fn(() => ({
   useTelemetry: jest.fn(() => ({
     send: jest.fn(),
   })),
-  useOtelTelemetry: jest.fn(() => ({
-    send: jest.fn(),
-  })),
   useBreadcrumbs: jest.fn().mockReturnValue([]),
   usePageSharedData: jest.fn().mockReturnValue({}),
   useCatalogClassic: jest.fn(() => ({

package/src/core/hooks/index.ts

@@ -36,3 +36,5 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
 export * from '@redocly/theme/core/hooks/use-element-size';
 export * from '@redocly/theme/core/hooks/use-time-ago';
 export * from '@redocly/theme/core/hooks/use-input-key-commands';
+export * from '@redocly/theme/core/hooks/use-page-active-version';
+export * from '@redocly/theme/core/hooks/use-page-versions';

package/src/core/hooks/search/use-search-dialog.ts

@@ -8,16 +8,16 @@ export function useSearchDialog() {
   const [isOpen, setIsOpen] = useState(false);
   const themeSettings = useThemeConfig();
   const location = useLocation();
-  const { useOtelTelemetry } = useThemeHooks();
-  const otelTelemetry = useOtelTelemetry();
-  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['⌘+K,CTRL+K'];
   const hotKeys = keyShortcuts?.join(',');
 
   useEffect(() => {
     if (hotKeys) {
       hotkeys(hotKeys, (ev) => {
         setIsOpen(true);
-        otelTelemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
+        telemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
         ev.preventDefault();
       });
 
@@ -27,7 +27,7 @@ export function useSearchDialog() {
   }, [hotKeys]);
 
   const onOpen = useCallback(function () {
-    otelTelemetry.send({ type: 'search.opened', payload: { method: 'click' } });
+    telemetry.send({ type: 'search.opened', payload: { method: 'click' } });
     setIsOpen(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/core/hooks/use-color-switcher.ts

@@ -4,8 +4,8 @@ import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const useColorSwitcher = () => {
   const themeSettings = useThemeConfig();
-  const { useOtelTelemetry } = useThemeHooks();
-  const otelTelemetry = useOtelTelemetry();
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
   const colorMode = themeSettings.colorMode;
   const modes = colorMode?.modes || ['light', 'dark'];
   const defaultColor = modes[0] || 'light';
@@ -33,7 +33,7 @@ export const useColorSwitcher = () => {
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
-    otelTelemetry.send({
+    telemetry.send({
       type: 'color_mode.switched',
       payload: { from: activeColorMode, to: newMode },
     });

package/src/core/hooks/use-input-key-commands.ts

@@ -1,5 +1,7 @@
 import { useCallback, useMemo } from 'react';
 
+import { getUserAgent } from '@redocly/theme/core/utils';
+
 type Action = 'selectAll' | 'escape' | 'clear' | 'enter' | 'paste';
 type ActionHandlers = {
   [key in `on${Capitalize<Action>}`]?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
@@ -11,7 +13,7 @@ type KeyboardCommand = {
 
 export function useInputKeyCommands(actionHandlers?: ActionHandlers) {
   // MacOS uses Command key instead of Ctrl
-  const ctrlKey = useMemo(() => (navigator.userAgent.includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
+  const ctrlKey = useMemo(() => (getUserAgent().includes('Mac') ? 'metaKey' : 'ctrlKey'), []);
 
   const isSelectAll = useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {

package/src/core/hooks/use-page-active-version.ts

@@ -0,0 +1,9 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function usePageActiveVersion(): string | undefined {
+  const { usePageVersions } = useThemeHooks();
+  const { versions } = usePageVersions();
+  const activeVersion = versions.find((version) => version.active);
+
+  return activeVersion?.version;
+}

package/src/core/hooks/use-page-versions.ts

@@ -0,0 +1,20 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type PageVersion = {
+  active: boolean;
+  default: boolean;
+  label: string;
+  version: string;
+};
+
+export function usePageVersions(): PageVersion[] {
+  const { usePageVersions } = useThemeHooks();
+  const pageVersions = usePageVersions();
+
+  return pageVersions.versions.map((version) => ({
+    active: version.active,
+    default: version.default,
+    label: version.label,
+    version: version.version,
+  }));
+}

package/src/core/hooks/use-product-picker.ts

@@ -3,15 +3,15 @@ import { useNavigate } from 'react-router-dom';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export function useProductPicker() {
-  const { useCurrentProduct, useProducts, useOtelTelemetry, useLoadAndNavigate } = useThemeHooks();
+  const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();
   const currentProduct = useCurrentProduct();
   const products = useProducts();
-  const otelTelemetry = useOtelTelemetry();
+  const telemetry = useTelemetry();
   const navigate = useNavigate();
   const loadAndNavigate = useLoadAndNavigate();
   function setProduct(product: typeof currentProduct) {
     if (!product) return;
-    otelTelemetry.send({ type: 'product.picked', payload: { product: product.slug } });
+    telemetry.send({ type: 'product.picked', payload: { product: product.slug } });
     loadAndNavigate({ navigate, to: product.link });
   }
   return {

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

@@ -10,7 +10,10 @@ const fallbacks = {
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',
   }),
   useSubmitFeedback: () => ({ submitFeedback: () => {} }),
-  useTelemetry: () => ({ telemetry: () => {} }),
+  useTelemetry: () => ({ send: () => {} }),
+  /**
+   * @deprecated use `useTelemetry` instead
+   **/
   useOtelTelemetry: () => ({ send: () => {} }),
   useBreadcrumbs: () => [],
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),

package/src/core/styles/dark.ts

@@ -11,15 +11,27 @@ import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variabl
 import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
 import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables.dark';
 
+
 const replayDarkMode = css`
   /**
     * @tokens Replay Colors
     * @presenter Color
     */
 
-  --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.18); // @presenter Color
-  --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.18); // @presenter Color
-  --replay-server-variable-bg-color: rgba(119, 45, 240, 0.2); // @presenter Color
+  --replay-undefined-variable-color: rgb(255, 138, 162); // @presenter Color
+  --replay-defined-variable-color: rgb(110, 171, 250); // @presenter Color
+  --replay-server-variable-color: rgb(179, 166, 249); // @presenter Color
+  --replay-path-parameter-color: rgb(8, 199, 224); // @presenter Color
+
+  --replay-undefined-variable-bg-color: rgba(82, 10, 24, 0.16); // @presenter Color
+  --replay-defined-variable-bg-color: rgba(12, 76, 158, 0.16); // @presenter Color
+  --replay-server-variable-bg-color: rgba(31, 10, 144, 0.16); // @presenter Color
+  --replay-path-parameter-bg-color: rgba(5, 88, 99, 0.16); // @presenter Color
+
+  --replay-undefined-variable-bg-color-hover: rgba(82, 10, 24, 0.4); // @presenter Color
+  --replay-defined-variable-bg-color-hover: rgba(12, 76, 158, 0.4); // @presenter Color
+  --replay-server-variable-bg-color-hover: rgba(31, 10, 144, 0.4); // @presenter Color
+  --replay-path-parameter-bg-color-hover: rgba(5, 88, 99, 0.4); // @presenter Color
 
   // @tokens End
 `;

package/src/core/styles/global.ts

@@ -1182,17 +1182,20 @@ const replay = css`
     * @presenter Color
     */
 
-  --replay-undefined-variable-color: var(--color-raspberry-6); // @presenter Color
-  --replay-defined-variable-color: var(--color-blue-6); // @presenter Color
-  --replay-server-variable-color: var(--color-purple-6); // @presenter Color
+  --replay-undefined-variable-color: rgb(249, 49, 109); // @presenter Color
+  --replay-defined-variable-color: rgb(31, 124, 255); // @presenter Color
+  --replay-server-variable-color: rgb(91, 76, 204); // @presenter Color
+  --replay-path-parameter-color: rgb(4, 117, 161); // @presenter Color
 
   --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.08); // @presenter Color
   --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.08); // @presenter Color
   --replay-server-variable-bg-color: rgba(119, 45, 240, 0.08); // @presenter Color
+  --replay-path-parameter-bg-color: rgba(4, 117, 161, 0.08); // @presenter Color
 
-  --replay-undefined-variable-bg-color-hover: var(--color-raspberry-2); // @presenter Color
-  --replay-defined-variable-bg-color-hover: var(--color-blue-2); // @presenter Color
-  --replay-server-variable-bg-color-hover: var(--color-purple-2); // @presenter Color
+  --replay-undefined-variable-bg-color-hover: rgba(249, 49, 109, 0.16); // @presenter Color
+  --replay-defined-variable-bg-color-hover: rgba(31, 124, 255, 0.16); // @presenter Color
+  --replay-server-variable-bg-color-hover: rgba(119, 45, 240, 0.16); // @presenter Color
+  --replay-path-parameter-bg-color-hover: rgba(4, 117, 161, 0.16); // @presenter Color
 
   // @tokens End
 `;

package/src/core/types/hooks.ts

@@ -119,8 +119,7 @@ export type ThemeHooks = {
       }
     | undefined;
   useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
-  useTelemetry: () => { send(action: TelemetryEvent, data: unknown): void };
-  useOtelTelemetry: () => {
+  useTelemetry: () => {
     send(data: AsyncApiRealm.Messages): void;
   };
   useUserTeams: () => string[];
@@ -145,5 +144,3 @@ export type L10nConfig = {
   defaultLocale: string;
   locales: { code: string; name: string }[];
 };
-
-type TelemetryEvent = unknown;

package/src/core/types/l10n.ts

@@ -214,7 +214,7 @@ export type TranslationKey =
   | 'openapi.showExample'
   | 'openapi.expandAll'
   | 'openapi.collapseAll'
-  | 'openapi.viewDetails'
+  | 'openapi.viewSecurityDetails'
   | 'openapi.noResponseExample'
   | 'openapi.noResponseContent'
   | 'openapi.noRequestPayload'

package/src/core/utils/get-user-agent.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns user agent. Handles SSR and browser.
+ */
+export function getUserAgent() {
+  const ssrUserAgent = (globalThis as any)['SSR_USER_AGENT'];
+
+  if (ssrUserAgent) {
+    return ssrUserAgent;
+  }
+  const browserUserAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '';
+
+  return browserUserAgent;
+}

package/src/core/utils/index.ts

@@ -31,3 +31,4 @@ export * from '@redocly/theme/core/utils/get-file-icon';
 export * from '@redocly/theme/core/utils/match-code-walkthrough-conditions';
 export * from '@redocly/theme/core/utils/replace-inputs-with-value';
 export * from '@redocly/theme/core/utils/find-closest-common-directory';
+export * from '@redocly/theme/core/utils/get-user-agent';