@redocly/theme 0.59.0-rc.1 → 0.59.0

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

@@ -13,39 +13,75 @@ type Tabs = {
   overflow: number[];
 };
 
+type UseTabsReturn = {
+  setTabRef: (element: HTMLButtonElement | null, index: number) => void;
+  onTabClick: (labelOrIndex: string | number) => void;
+  handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
+  visibleTabs: number[];
+  overflowTabs: number[];
+  isReady: boolean;
+};
+
+type UseActiveTabProps = {
+  initialTab: string;
+  tabsId?: string;
+};
+
 const MORE_BUTTON_WIDTH = 80;
 const TABS_GAP = 8;
 
-export function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps) {
+export function useTabs({
+  activeTab,
+  onTabChange,
+  totalTabs,
+  containerRef,
+}: UseTabsProps): UseTabsReturn {
   const [tabs, setTabs] = useState<Tabs>({
     visible: Array.from({ length: totalTabs }, (_, i) => i),
     overflow: [],
   });
-
+  const [isReady, setIsReady] = useState(false);
+  const isFirstCalculation = useRef(true);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
   const tabWidthsRef = useRef<number[]>([]);
   const tabLabelsRef = useRef<string[]>([]);
+  const activeTabRef = useRef(activeTab);
+  const calculateVisibleTabsRef = useRef<(() => void) | null>(null);
 
-  const allTabsHidden = useMemo(() => tabs.visible.length === 0, [tabs.visible]);
+  // Synchronously update ref before any callbacks or effects run
+  activeTabRef.current = activeTab;
 
-  const setTabRef = useCallback((element: HTMLButtonElement | null, index: number) => {
-    tabRefs.current[index] = element;
+  const setTabRef = useCallback(
+    (element: HTMLButtonElement | null, index: number) => {
+      tabRefs.current[index] = element;
 
-    const width = element?.offsetWidth;
-    if (width) {
-      tabWidthsRef.current[index] = width;
-    }
+      const width = element?.offsetWidth;
+      if (width) {
+        tabWidthsRef.current[index] = width;
+      }
 
-    const label = element?.getAttribute('data-label');
-    if (label) {
-      tabLabelsRef.current[index] = label;
-    }
-  }, []);
+      const label = element?.getAttribute('data-label');
+      if (label) {
+        tabLabelsRef.current[index] = label;
+      }
 
-  const focusTab = (index: number) => {
+      // Trigger calculation once all tabs are registered
+      if (
+        isFirstCalculation.current &&
+        tabWidthsRef.current.length >= totalTabs &&
+        tabLabelsRef.current.length >= totalTabs &&
+        calculateVisibleTabsRef.current
+      ) {
+        requestAnimationFrame(calculateVisibleTabsRef.current);
+      }
+    },
+    [totalTabs],
+  );
+
+  const focusTab = useCallback((index: number) => {
     const currentElement = tabRefs.current[index];
     currentElement?.focus();
-  };
+  }, []);
 
   const onTabSelect = useCallback(
     (index: number) => {
@@ -53,7 +89,7 @@ export function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: Use
       const label = tabRefs.current[index]?.getAttribute('data-label');
       if (label) onTabChange(label);
     },
-    [onTabChange],
+    [onTabChange, focusTab],
   );
 
   const handleKeyboard = useCallback(
@@ -77,30 +113,19 @@ export function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: Use
     [totalTabs, onTabSelect],
   );
 
-  const replaceLastVisibleTabWithClickedOverflowTab = useCallback(
-    (clickedIndex: number) => {
-      const { visible: visibleTabs, overflow: overflowTabs } = tabs;
-
-      // Indexes of visible tabs should be sorted(asc), to replace the last visible tab with the clicked tab
-      const newVisibleTabs = [...visibleTabs].sort((a, b) => a - b);
-      const newOverflowTabs = [...overflowTabs];
-
-      const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
-      if (clickedIdxInOverflow !== -1) {
-        const lastVisible = newVisibleTabs[newVisibleTabs.length - 1];
-        newOverflowTabs.splice(clickedIdxInOverflow, 1);
-        newOverflowTabs.unshift(lastVisible);
-        newVisibleTabs.splice(newVisibleTabs.length - 1, 1);
-        newVisibleTabs.unshift(clickedIndex);
-      }
+  const replaceLastVisibleTabWithClickedOverflowTab = useCallback((clickedIndex: number) => {
+    setTabs((prevTabs) => {
+      const { visible: visibleTabs, overflow: overflowTabs } = prevTabs;
 
-      setTabs({
-        visible: newVisibleTabs,
-        overflow: newOverflowTabs,
-      });
-    },
-    [tabs],
-  );
+      const sortedVisible = [...visibleTabs].sort((a, b) => a - b);
+      const lastVisible = sortedVisible[sortedVisible.length - 1];
+
+      return {
+        visible: visibleTabs.map((idx) => (idx === lastVisible ? clickedIndex : idx)),
+        overflow: overflowTabs.map((idx) => (idx === clickedIndex ? lastVisible : idx)),
+      };
+    });
+  }, []);
 
   const onTabClick = useCallback(
     (labelOrIndex: string | number) => {
@@ -111,18 +136,18 @@ export function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: Use
 
       if (clickedIndex === -1) return;
 
-      const hasOverflowTabs = tabs.overflow.length > 0;
-      if (hasOverflowTabs && !allTabsHidden && tabs.overflow.includes(clickedIndex)) {
+      const label = tabLabelsRef.current[clickedIndex];
+      if (!label) return;
+
+      // If this is an overflow tab, replace it with a visible one
+      if (tabs.overflow.includes(clickedIndex)) {
         replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
       }
 
-      const label = tabLabelsRef.current[clickedIndex];
-      if (label) {
-        onTabChange(label);
-        focusTab(clickedIndex);
-      }
+      onTabChange(label);
+      focusTab(clickedIndex);
     },
-    [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab],
+    [tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab, focusTab],
   );
 
   const calculateVisibleTabs = useCallback(() => {
@@ -131,87 +156,141 @@ export function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: Use
 
     const containerWidth = container.offsetWidth;
     const tabWidths = tabWidthsRef.current;
-    const activeTabIndex = tabRefs.current.findIndex(
-      (ref) => ref?.getAttribute('data-label') === activeTab,
-    );
+    const tabLabels = tabLabelsRef.current;
+
+    // Wait until all tabs are registered before calculating
+    if (tabWidths.length < totalTabs || tabLabels.length < totalTabs) {
+      return;
+    }
+
+    // Check if container has proper width (not zero)
+    if (containerWidth === 0) {
+      return;
+    }
+
+    // Find active tab index by label in tabLabelsRef, not by DOM element
+    // because tab might not be rendered if it's in overflow
+    const activeTabIndex = tabLabels.findIndex((label) => label === activeTabRef.current);
 
-    // Active tab should always be visible, so we include it at the beginning of the array
     let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
-    const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
-    const overflow = [];
+    const visibleTabs = activeTabIndex !== -1 ? [activeTabIndex] : [];
+    const overflowTabs = [];
 
     for (let i = 0; i < tabWidths.length; i++) {
-      // Skip active tab, it was added initially
-      if (i === activeTabIndex) {
-        continue;
-      }
+      if (i === activeTabIndex) continue;
 
       const tabWidthWithGap = tabWidths[i] + TABS_GAP;
       const projectedWidth = tabsWidth + tabWidthWithGap;
 
       if (projectedWidth <= containerWidth) {
-        visible.push(i);
+        visibleTabs.push(i);
         tabsWidth += tabWidthWithGap;
       } else {
-        overflow.push(i);
+        overflowTabs.push(i);
       }
     }
 
-    if (overflow.length > 0) {
+    if (overflowTabs.length > 0) {
       tabsWidth += MORE_BUTTON_WIDTH;
 
-      // Remove tabs starting from the end of the array until the width of the visible tabs is less than the container width
-      while (tabsWidth > containerWidth && visible.length) {
-        const removed = visible.pop();
-        if (removed !== undefined) {
-          overflow.unshift(removed);
+      while (tabsWidth > containerWidth && visibleTabs.length > 1) {
+        const removed = visibleTabs.pop();
+        // Never remove the active tab - it should always stay visible or be the last one
+        if (removed !== undefined && removed !== activeTabIndex) {
+          overflowTabs.unshift(removed);
           tabsWidth -= tabWidths[removed];
+        } else if (removed === activeTabIndex) {
+          // Put it back if we accidentally removed the active tab
+          visibleTabs.push(removed);
+          break;
         }
       }
+
+      // If even with only the active tab visible, it doesn't fit with More button,
+      // move all tabs to overflow (show only dropdown)
+      if (tabsWidth > containerWidth && visibleTabs.length === 1) {
+        overflowTabs.unshift(...visibleTabs);
+        visibleTabs.length = 0;
+      }
     }
 
     setTabs({
-      visible,
-      overflow,
+      visible: visibleTabs,
+      overflow: overflowTabs,
     });
-  }, [containerRef, activeTab]);
 
+    // Set ready state on first calculation
+    if (isFirstCalculation.current) {
+      isFirstCalculation.current = false;
+      setIsReady(true);
+    }
+  }, [containerRef, totalTabs]);
+
+  // Store calculateVisibleTabs in ref for use in setTabRef
+  calculateVisibleTabsRef.current = calculateVisibleTabs;
+
+  // Reset isFirstCalculation when totalTabs changes (new page/tabs)
+  useEffect(() => {
+    isFirstCalculation.current = true;
+    setIsReady(false);
+    // Clear refs so we wait for new tabs to register
+    tabWidthsRef.current = [];
+    tabLabelsRef.current = [];
+  }, [totalTabs]);
+
+  // Call calculateVisibleTabs on first render and resize
   useEffect(() => {
-    if (!containerRef?.current) return;
+    const container = containerRef?.current;
+    if (!container) return;
+
+    let resizeTimeout: number | null = null;
+
+    // Use ResizeObserver to wait until container has proper size
+    const resizeObserver = new ResizeObserver(() => {
+      if (resizeTimeout) cancelAnimationFrame(resizeTimeout);
+      resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
+    });
+
+    resizeObserver.observe(container);
 
-    let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
     const handleResize = () => {
-      if (resizeTimeout) {
-        cancelAnimationFrame(resizeTimeout);
-      }
+      if (resizeTimeout) cancelAnimationFrame(resizeTimeout);
       resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
     };
 
     window.addEventListener('resize', handleResize);
+
     return () => {
+      resizeObserver.disconnect();
       window.removeEventListener('resize', handleResize);
-      cancelAnimationFrame(resizeTimeout);
+      if (resizeTimeout) cancelAnimationFrame(resizeTimeout);
     };
   }, [containerRef, totalTabs, calculateVisibleTabs]);
 
+  // Recalculate when activeTab changes to ensure it's visible
+  useEffect(() => {
+    if (!containerRef?.current || isFirstCalculation.current) return;
+    requestAnimationFrame(calculateVisibleTabs);
+  }, [activeTab, containerRef, calculateVisibleTabs]);
+
   return {
     setTabRef,
     onTabClick,
     handleKeyboard,
     visibleTabs: tabs.visible,
     overflowTabs: tabs.overflow,
-    allTabsHidden,
+    isReady,
   };
 }
 
-type UseActiveTabProps = {
-  initialTab: string;
-  tabsId?: string;
-};
-
 export const useActiveTab = ({ initialTab, tabsId }: UseActiveTabProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const [activeTab, setActiveTab] = useState(getInitialTab({ initialTab, searchParams, tabsId }));
+  const initialTabValue = useMemo(
+    () => getInitialTab({ initialTab, searchParams, tabsId }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+  const [activeTab, setActiveTab] = useState(initialTabValue);
   const prevActiveTabRef = useRef(activeTab);
 
   useEffect(() => {
@@ -228,10 +307,13 @@ export const useActiveTab = ({ initialTab, tabsId }: UseActiveTabProps) => {
     });
   }, [activeTab, setSearchParams, tabsId]);
 
-  return {
-    activeTab,
-    setActiveTab,
-  };
+  return useMemo(
+    () => ({
+      activeTab,
+      setActiveTab,
+    }),
+    [activeTab],
+  );
 };
 
 type GetInitialTabProps = {

package/src/core/hooks/use-telemetry-fallback.ts

@@ -37,20 +37,22 @@ export const useTelemetryFallback = () => ({
   sendLanguagePickerLocaleChangedMessage: () => {},
   sendSearchOpenedMessage: () => {},
   sendSearchQueryMessage: () => {},
+  sendSearchAiOpenedMessage: () => {},
   sendSearchAIQueryMessage: () => {},
+  sendSearchAIFeedbackMessage: () => {},
   sendFeedbackMessage: () => {},
   sendSearchResultClickedMessage: () => {},
   sendRedirectMessage: () => {},
   sendOpenapiDocsMessage: () => {},
   sendCopyCodeSnippetClickedMessage: () => {},
-  sendOpenapiDocsViewedMessage: () => {},
-  sendOpenapiDocsPerformanceMetricsMessage: () => {},
-  sendOpenapiDocsDownloadDefinitionClickedMessage: () => {},
-  sendOpenapiDocsSelectLanguageClickedMessage: () => {},
-  sendOpenapiDocsExpandCollapseAllClickedMessage: () => {},
-  sendOpenapiDocsSwitchServersClickedMessage: () => {},
-  sendOpenapiDocsExamplesSwitcherClickedMessage: () => {},
-  sendOpenapiDocsTryItOpenedMessage: () => {},
+  sendViewedMessage: () => {},
+  sendPerformanceMetricsMessage: () => {},
+  sendDownloadDefinitionClickedMessage: () => {},
+  sendSelectLanguageClickedMessage: () => {},
+  sendExpandCollapseAllClickedMessage: () => {},
+  sendSwitchServersClickedMessage: () => {},
+  sendExamplesSwitcherClickedMessage: () => {},
+  sendTryItOpenedMessage: () => {},
   sendAsyncapiDocsViewedMessage: () => {},
   sendAsyncapiDocsPerformanceMetricsMessage: () => {},
   sendAsyncapiDocsSwitchMessageClickedMessage: () => {},

package/src/core/openapi/index.ts

@@ -8,6 +8,7 @@ export type { UserClaims } from '../types/user-claims';
 export type { OperationParameter, ParameterHighlight } from '../types/search';
 export type { TFunction, TOptions } from '../types/l10n';
 export type { SelectOption, SelectProps } from '../types/select';
+export type { SegmentedOption, SegmentedProps } from '../types/segmented';
 export { IS_BROWSER } from '../utils/dom';
 export {
   addLeadingSlash,

package/src/core/styles/dark.ts

@@ -36,6 +36,10 @@ const replayDarkMode = css`
   --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
 
+  --replay-runtime-expression-color:  rgba(147, 166, 249, 1); // @presenter Color
+  --replay-runtime-expression-bg-color: rgba(147, 166, 249, 0.16); // @presenter Color
+  --replay-operators-color: rgba(168, 143, 88, 1); // @presenter Color
+
   // @tokens End
 `;
 

package/src/core/styles/global.ts

@@ -19,7 +19,7 @@ import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
-import { aiAssistantButton } from '@redocly/theme/components/Buttons/variables';
+import { aiAssistantButton, connectMCPButton } from '@redocly/theme/components/Buttons/variables';
 import { navbar } from '@redocly/theme/components/Navbar/variables';
 import { search } from '@redocly/theme/components/Search/variables';
 import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
@@ -1224,6 +1224,10 @@ const replay = css`
   --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
 
+  --replay-runtime-expression-color: rgba(54, 90, 249, 1); // @presenter Color
+  --replay-runtime-expression-bg-color: rgba(54, 90, 249, 0.08); // @presenter Color
+  --replay-operators-color: rgba(193, 142, 31, 1); // @presenter Color
+
   // @tokens End
 `;
 
@@ -1239,6 +1243,7 @@ export const styles = css`
     ${breadcrumbs}
     ${button}
     ${aiAssistantButton}
+    ${connectMCPButton}
     ${cards}
     ${catalog}
     ${catalogClassic}

package/src/core/types/hooks.ts

@@ -86,6 +86,7 @@ export type ThemeHooks = {
   useSearch: (
     product?: string,
     autoSearchDisabled?: boolean,
+    searchSessionId?: string,
   ) => {
     query: string;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
@@ -107,7 +108,10 @@ export type ThemeHooks = {
     advancedSearch?: boolean;
     askAi?: boolean;
   };
-  useAiSearch: (options?: { filter?: SearchFilterItem[] }) => {
+  useAiSearch: (
+    options?: { filter?: SearchFilterItem[] },
+    searchSessionId?: string,
+  ) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
     isGeneratingResponse: boolean;
     question: string;

package/src/core/types/index.ts

@@ -1,6 +1,7 @@
 export * from './breadcrumb';
 export * from './catalog';
 export * from './l10n';
+export * from './mcp';
 export * from './feedback';
 export * from './hooks';
 export * from './markdown';

package/src/core/types/l10n.ts

@@ -86,6 +86,7 @@ export type TranslationKey =
   | 'search.ai.welcomeText'
   | 'search.ai.newConversation'
   | 'search.ai.backToSearch'
+  | 'search.ai.back'
   | 'search.ai.placeholder'
   | 'search.ai.generatingResponse'
   | 'search.ai.followUpQuestion'
@@ -94,6 +95,9 @@ export type TranslationKey =
   | 'search.ai.resourcesFound'
   | 'search.ai.resourcesFound.basedOn'
   | 'search.ai.resourcesFound.resources'
+  | 'search.ai.feedback.title'
+  | 'search.ai.feedback.detailsPlaceholder'
+  | 'search.ai.feedback.thanks'
   | 'search.ai.button'
   | 'search.ai.label'
   | 'search.ai.disclaimer'
@@ -211,6 +215,13 @@ export type TranslationKey =
   | 'page.actions.cursorMcpButtonText'
   | 'page.actions.cursorMcpTitle'
   | 'page.actions.cursorMcpDescription'
+  | 'page.actions.connectMcp'
+  | 'page.actions.connectMcp.cursor'
+  | 'page.actions.connectMcp.cursorDescription'
+  | 'page.actions.connectMcp.vscode'
+  | 'page.actions.connectMcp.vscodeDescription'
+  | 'page.actions.connectMcp.copyConfig'
+  | 'page.actions.connectMcp.copyConfigDescription'
   | 'openapi.download.description.title'
   | 'openapi.info.title'
   | 'openapi.info.contact.url'
@@ -267,6 +278,8 @@ export type TranslationKey =
   | 'openapi.noResponseExample'
   | 'openapi.discriminator.searchPlaceholder'
   | 'openapi.discriminator.searchNoResults'
+  | 'openapi.discriminator.defaultMapping'
+  | 'openapi.discriminator.defaultMappingTooltip'
   | 'openapi.noResponseContent'
   | 'openapi.noRequestPayload'
   | 'openapi.hidePattern'

package/src/core/types/mcp.ts

@@ -0,0 +1,8 @@
+export type MCPClientType = 'cursor' | 'vscode';
+
+export type MCPOption = 'cursor' | 'vscode' | 'copy';
+
+export type McpConnectionParams = {
+  serverName: string;
+  url: string;
+};

package/src/core/types/search.ts

@@ -93,11 +93,20 @@ export type AiSearchErrorConfig = {
   messageDefault: string;
 };
 
+export enum FeedbackType {
+  Like = 'like',
+  Dislike = 'dislike',
+}
+
+export type SearchAiMessageResource = {
+  url: string;
+  title: string;
+};
+
 export type AiSearchConversationItem = {
   role: AiSearchConversationRole;
   content: string;
-  resources?: {
-    url: string;
-    title: string;
-  }[];
+  resources?: SearchAiMessageResource[];
+  messageId?: string;
+  feedback?: FeedbackType;
 };

package/src/core/types/segmented.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+import type { SelectOption } from './select';
+
+export type SegmentedOption<T> = SelectOption<T> & {
+  divider?: React.ReactNode;
+};
+
+export type SegmentedProps<T = any> = {
+  options: SegmentedOption<T>[];
+  value: T;
+  onChange: ({ label, value }: SegmentedOption<T>) => void;
+  className?: string;
+  size?: 'regular' | 'small';
+};

package/src/core/utils/frontmatter-translate.ts

@@ -0,0 +1,9 @@
+/**
+ * Utility function for use in React frontmatter
+ * This function creates a string that will be processed by the frontmatter loader
+ * to convert it into a translation key object
+ */
+export const frontmatterTranslate = (key: string, defaultValue: string): string => {
+  const escapedDefaultValue = defaultValue.replace(/'/g, "\\'");
+  return `frontmatterTranslate('${key}', '${escapedDefaultValue}')`;
+};

package/src/core/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './clipboard-service';
 export * from './css-variables';
 export * from './add-line-numbers';
+export * from './mcp';
 export * from './media-css';
 export * from './theme-helpers';
 export * from './class-names';
@@ -38,3 +39,4 @@ export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './dynamic';
 export * from './tabs';
+export * from './frontmatter-translate';

package/src/core/utils/mcp.ts

@@ -0,0 +1,34 @@
+import type { MCPClientType, McpConnectionParams } from '../types';
+
+function generateCursorMCPDeepLink(config: McpConnectionParams): string {
+  const cursorConfig = {
+    url: config.url,
+    description: 'MCP Server',
+  };
+  const encodedConfig = btoa(JSON.stringify(cursorConfig));
+  return `cursor://anysphere.cursor-deeplink/mcp/install?name=${config.serverName}&config=${encodedConfig}`;
+}
+
+function generateVSCodeMCPDeepLink(config: McpConnectionParams): string {
+  const vscodeConfig = {
+    name: config.serverName,
+    url: config.url,
+    type: 'http',
+  };
+  const encodedConfig = encodeURIComponent(JSON.stringify(vscodeConfig));
+  return `vscode:mcp/install?${encodedConfig}`;
+}
+
+export function generateMCPDeepLink(
+  clientType: MCPClientType,
+  config: McpConnectionParams,
+): string {
+  switch (clientType) {
+    case 'cursor':
+      return generateCursorMCPDeepLink(config);
+    case 'vscode':
+      return generateVSCodeMCPDeepLink(config);
+    default:
+      return generateCursorMCPDeepLink(config);
+  }
+}

package/src/icons/AiStarsGradientIcon/AiStarsGradientIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import type { IconProps } from '@redocly/theme/icons/types';
@@ -15,9 +15,18 @@ export interface AiStarsGradientIconProps extends IconProps {
 const Icon = (props: AiStarsGradientIconProps) => {
   const { color = '', background, borderRadius, padding, margin, ...restProps } = props;
 
-  const resolvedColor = color.startsWith('var(')
-    ? getComputedStyle(document.documentElement).getPropertyValue(color.slice(4, -1)).trim()
-    : color;
+  const [resolvedColor, setResolvedColor] = useState(color);
+
+  useEffect(() => {
+    const resolvedColor = color.startsWith('var(')
+      ? window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue(color.slice(4, -1))
+          .trim()
+      : color;
+
+    setResolvedColor(resolvedColor);
+  }, [color]);
 
   const isColorOverridden = resolvedColor && resolvedColor !== 'none';
   const fill = isColorOverridden ? resolvedColor : 'url(#gradient)';