@redocly/theme 0.59.0-next.1 → 0.59.0-next.10

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/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

@@ -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
 `;
 

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;
@@ -142,6 +146,7 @@ export type ThemeHooks = {
     | undefined;
   useCatalog: (
     config?: CatalogEntityConfig,
+    serverFilters?: Record<string, { value: string; count: number }[]>,
     entitiesCounterInitial?: number,
     initialViewMode?: CatalogViewMode,
   ) => UseCatalogResponse;

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'
@@ -146,6 +150,7 @@ export type TranslationKey =
   | 'catalog.entity.metadata.title'
   | 'catalog.entity.schema.title'
   | 'catalog.entity.properties.apiDescription.title'
+  | 'catalog.backToAllLabel'
   | 'sidebar.menu.backLabel'
   | 'sidebar.menu.backToLabel'
   | 'sidebar.actions.show'

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/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

@@ -38,3 +38,4 @@ export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './dynamic';
 export * from './tabs';
+export * from './frontmatter-translate';

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)';

package/src/icons/AiStarsIcon/AiStarsIcon.tsx

@@ -35,19 +35,28 @@ export const AiStarsIcon = styled(Icon).attrs(() => ({
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 
-  ${({ background, borderRadius, margin }) =>
+  ${({ background, borderRadius, margin, padding, size }) =>
     background &&
     `
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
 
       background: ${getCssColorVariable(background)};
+      width: ${size || '16px'};
+      height: ${size || '16px'};
 
-      padding: var(--spacing-xs);
+      padding: ${padding || 'var(--spacing-xs)'};
       margin: ${margin || '0'};
       
       border-radius: ${background && borderRadius ? borderRadius : 'none'};
+      
+      svg {
+        width: calc(${size || '16px'} - 2 * (${padding || 'var(--spacing-xs)'}));
+        height: calc(${size || '16px'} - 2 * (${padding || 'var(--spacing-xs)'}));
+        flex-shrink: 0;
+      }
     `}
 
   color: ${({ color }) => color && getCssColorVariable(color)};

package/src/icons/CubeIcon/CubeIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M14.252 4.06812L8.25195 0.568119C8.17548 0.523507 8.08853 0.5 8 0.5C7.91147 0.5 7.82452 0.523507 7.74805 0.568119L1.74805 4.06812C1.67257 4.11215 1.60994 4.1752 1.56642 4.25099C1.5229 4.32677 1.5 4.41263 1.5 4.50002V11.5C1.5 11.5874 1.5229 11.6733 1.56642 11.7491C1.60994 11.8248 1.67257 11.8879 1.74805 11.9319L7.74805 15.4319C7.82452 15.4765 7.91147 15.5 8 15.5C8.08853 15.5 8.17548 15.4765 8.25195 15.4319L14.252 11.9319C14.3274 11.8879 14.3901 11.8248 14.4336 11.7491C14.4771 11.6733 14.5 11.5874 14.5 11.5V4.50002C14.5 4.41263 14.4771 4.32677 14.4336 4.25099C14.3901 4.1752 14.3274 4.11215 14.252 4.06812ZM8 1.57887L13.0078 4.50002L8 7.42117L2.9922 4.50002L8 1.57887ZM2.5 5.37062L7.5 8.28712V14.1294L2.5 11.2129V5.37062ZM8.5 14.1294V8.28712L13.5 5.37062V11.2129L8.5 14.1294Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const CubeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CubeIcon/CubeIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/HashtagIcon/HashtagIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10.5 4.5V3.75H8.25V1.5H7.5V3.75H4.5V1.5H3.75V3.75H1.5V4.5H3.75V7.5H1.5V8.25H3.75V10.5H4.5V8.25H7.5V10.5H8.25V8.25H10.5V7.5H8.25V4.5H10.5ZM7.5 7.5H4.5V4.5H7.5V7.5Z" />
+  </svg>
+);
+
+export const HashtagIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/HashtagIcon/HashtagIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/RedoclyIcon/RedoclyIcon.tsx

@@ -6,29 +6,11 @@ import type { IconProps } from '@redocly/theme/icons/types';
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 
 const Icon = (props: IconProps) => (
-  <svg
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <g clipPath="url(#clip0_4053_1165)">
-      <path
-        d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z"
-        fill="#2467F2"
-      />
-      <path
-        d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z"
-        fill="#2467F2"
-      />
+  <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g>
+      <path d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z" />
+      <path d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z" />
     </g>
-    <defs>
-      <clipPath id="clip0_4053_1165">
-        <rect width="18" height="18" fill="white" />
-      </clipPath>
-    </defs>
   </svg>
 );