@redocly/theme 0.54.0 → 0.55.0-next.0

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/markdoc/components/Tabs/Tabs.tsx

@@ -25,7 +25,13 @@ type TabsProps = {
 };
 
 export function Tabs({ children, className, size }: TabsProps): JSX.Element {
-  const childrenArray = React.Children.toArray(children) as React.ReactElement<TabItemProps>[];
+  const [childrenArray, setChildrenArray] = useState<React.ReactElement<TabItemProps>[]>(
+    React.Children.toArray(children) as React.ReactElement<TabItemProps>[],
+  );
+
+  useEffect(() => {
+    setChildrenArray(React.Children.toArray(children) as React.ReactElement<TabItemProps>[]);
+  }, [children]);
   const tabsContainerRef = useRef<HTMLUListElement>(null);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);