@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

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'
@@ -103,6 +107,10 @@ export type TranslationKey =
   | 'search.ai.error.header'
   | 'search.ai.error.header.forbidden'
   | 'search.ai.error.header.unauthorized'
+  | 'search.ai.feedback.more'
+  | 'search.searchItem.deprecated'
+  | 'search.groups.all'
+  | 'search.filter.field.footer'
   | 'aiAssistant.trigger'
   | 'toc.header'
   | 'footer.copyrightText'
@@ -147,6 +155,21 @@ export type TranslationKey =
   | 'catalog.entity.schema.title'
   | 'catalog.entity.properties.apiDescription.title'
   | 'catalog.backToAllLabel'
+  | 'catalog.tags.more'
+  | 'catalog.tags.label'
+  | 'catalog.sort'
+  | 'catalog.catalogs.label'
+  | 'catalog.owners.label'
+  | 'catalog.repositories.label'
+  | 'catalog.email.label'
+  | 'catalog.format.label'
+  | 'catalog.entityType.label'
+  | 'catalog.domains.label'
+  | 'catalog.contact.label'
+  | 'catalog.methodAndPath.label'
+  | 'catalog.links.label'
+  | 'catalog.metadata.domains'
+  | 'catalog.metadata.owners'
   | 'sidebar.menu.backLabel'
   | 'sidebar.menu.backToLabel'
   | 'sidebar.actions.show'
@@ -211,6 +234,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 +297,8 @@ export type TranslationKey =
   | 'openapi.noResponseExample'
   | 'openapi.discriminator.searchPlaceholder'
   | 'openapi.discriminator.searchNoResults'
+  | 'openapi.discriminator.defaultMapping'
+  | 'openapi.discriminator.defaultMappingTooltip'
   | 'openapi.noResponseContent'
   | 'openapi.noRequestPayload'
   | 'openapi.hidePattern'
@@ -356,7 +388,11 @@ export type TranslationKey =
   | 'time.past.years'
   | 'page.internalServerError.title'
   | 'page.internalServerError.description'
-  | 'page.skipToContent.label';
+  | 'page.skipToContent.label'
+  | 'select.noResults'
+  | 'loaders.loading'
+  | 'filter.dateRange.from'
+  | 'filter.dateRange.to';
 
 export type Locale = { code: string; name: string };
 

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

@@ -14,7 +14,7 @@ export type OperationParameter = {
   example: string | undefined;
   enum: string[] | undefined;
 };
-
+/* eslint-disable-next-line no-warning-comments */
 // TODO: review SearchHit type as it might contain properties that are not in the search results
 export type SearchHit = {
   id: string;
@@ -25,6 +25,7 @@ export type SearchHit = {
   httpMethod?: string;
   httpPath?: string | string[];
   deprecated?: boolean;
+  isAdditionalOperation?: boolean;
   security?: string[];
   parameters?: OperationParameter[];
   version?: string;
@@ -93,11 +94,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,15 @@
+import type React from 'react';
+import type { SelectOption } from './select';
+
+export type SegmentedOption<T> = SelectOption<T> & {
+  divider?: React.ReactNode;
+};
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export type SegmentedProps<T = any> = {
+  options: SegmentedOption<T>[];
+  value: T;
+  onChange: ({ label, value }: SegmentedOption<T>) => void;
+  className?: string;
+  size?: 'regular' | 'small';
+};

package/src/core/types/select.ts

@@ -7,6 +7,7 @@ export type SelectOption<T> = {
   label?: string;
 };
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export type SelectProps<T = any> = {
   value?: SelectOption<T> | SelectOption<T>[] | T | T[];
   options: SelectOption<T>[];

package/src/core/types/sidebar.ts

@@ -51,6 +51,7 @@ export type ItemState = Omit<SidebarNavItem, 'items'> & {
   languageInsensitive?: boolean;
   modified?: boolean; //item from openapi-docs sidebar
   deprecated?: boolean; //item from openapi-docs sidebar
+  isAdditionalOperation?: boolean; //item from openapi-docs sidebar
 };
 
 export type DrilldownMenuItemDetails = {

package/src/core/utils/args-typecheck.ts

@@ -1,7 +1,7 @@
-export function isEmptyArray(items: any): boolean {
+export function isEmptyArray(items: unknown): boolean {
   return Array.isArray(items) && !items?.length;
 }
 
-export function isPrimitive(arg: any): boolean {
+export function isPrimitive(arg: unknown): boolean {
   return ['string', 'boolean', 'number', 'undefined'].includes(typeof arg);
 }

package/src/core/utils/clipboard-service.ts

@@ -10,7 +10,9 @@ export class ClipboardService {
     }
     let range;
     let selection;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     if ((document.body as any).createTextRange) {
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
       range = (document.body as any).createTextRange();
       range.moveToElementText(element);
       range.select();

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/get-operation-color.ts

@@ -0,0 +1,18 @@
+type OperationColorProps = {
+  deprecated?: boolean;
+  isAdditionalOperation?: boolean;
+  httpVerb: string;
+};
+
+export function getOperationColor({
+  deprecated,
+  isAdditionalOperation,
+  httpVerb,
+}: OperationColorProps): string {
+  if (deprecated) {
+    return 'http-deprecated';
+  } else if (isAdditionalOperation) {
+    return 'http-additional-operation';
+  }
+  return httpVerb;
+}

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

@@ -2,6 +2,7 @@
  * Returns user agent. Handles SSR and browser.
  */
 export function getUserAgent() {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const ssrUserAgent = (globalThis as any)['SSR_USER_AGENT'];
 
   if (ssrUserAgent) {

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';
@@ -27,7 +28,7 @@ export * from './with-load-progress';
 export * from './text-trimmer';
 export * from './get-code-walkthrough-file-text';
 export * from './download-code-walkthrough';
-export * from './get-file-icon';
+export * from './GetFileIcon';
 export * from './match-code-walkthrough-conditions';
 export * from './replace-inputs-with-value';
 export * from './find-closest-common-directory';
@@ -36,5 +37,7 @@ export * from './parse-style-string';
 export * from './lang-to-name';
 export * from './enhanced-smoothstep';
 export * from './icon-resolver';
-export * from './dynamic';
+export * from './Dynamic';
 export * from './tabs';
+export * from './get-operation-color';
+export * from './frontmatter-translate';

package/src/core/utils/js-utils.ts

@@ -24,7 +24,7 @@ export function isBrowser() {
   return typeof window !== 'undefined' && 'HTMLElement' in window;
 }
 
-export function isPlainObject(obj: any): boolean {
+export function isPlainObject(obj: unknown): boolean {
   return (
     typeof obj === 'object' &&
     obj !== null &&

package/src/core/utils/load-and-navigate.ts

@@ -21,6 +21,7 @@ export async function loadAndNavigate({
   const { pathname, hash, search } = new URL(to, window.location.origin + window.location.pathname);
 
   // use window-shared loader instead of importing to prevent circular import issue
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const loader = (window as any)['__LOADER'];
   const result = await withLoadProgress(loader.tryLoad(pathname));
   // @ts-ignore

package/src/core/utils/markdoc.ts

@@ -1,5 +1,6 @@
 import type { Tag } from '@markdoc/markdoc';
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export function isTag(value?: any): value is Tag {
   return !!(value?.$$mdtype === 'Tag');
 }

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/core/utils/parse-style-string.ts

@@ -13,6 +13,7 @@ export function parseStyleString(styleString: string): React.CSSProperties {
         const camelCaseKey = key.replace(/-[a-z]/g, (match) => {
           return match[1].toUpperCase();
         });
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         (styleObj as any)[camelCaseKey] = value;
       }
 

package/src/ext/configure.ts

@@ -1,4 +1,4 @@
-import { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
+import type { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
 
 export type SecurityDetails = {
   password?: string;
@@ -14,11 +14,12 @@ export type SecurityDetails = {
 
 export type ConfigureRequestValues = {
   headers?: Record<string, string>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   body?: Record<string, any>;
   query?: Record<string, string>;
   path?: Record<string, string>;
   cookie?: Record<string, string>;
-  security?: SecurityDetails;
+  security?: Record<string, SecurityDetails>;
   envVariables?: Record<string, string>;
   serverVariables?: Record<string, string>;
 };
@@ -49,8 +50,10 @@ export function configure(_context: ContextProps): Configure {
   //     name: 'Default Product'
   //   },
   //   security: {
-  //     username: 'default_api_user',
-  //     password: 'secureP@ssword123'
+  //     default: {
+  //       username: 'default_api_user',
+  //       password: 'secureP@ssword123'
+  //     },
   //   },
   //   envVariables: {
   //     customLocation: 'default'
@@ -62,8 +65,10 @@ export function configure(_context: ContextProps): Configure {
   //     name: 'Development Product'
   //   },
   //   security: {
-  //     username: 'dev_api_user',
-  //     password: 'Dev@P!T3st'
+  //     default: {
+  //       username: 'dev_api_user',
+  //       password: 'Dev@P!T3st'
+  //     },
   //   },
   //   envVariables: {
   //     customLocation: 'dev'
@@ -75,8 +80,10 @@ export function configure(_context: ContextProps): Configure {
   //     name: 'Production Product'
   //   },
   //   security: {
-  //     username: 'prod_api_user',
-  //     password: 'Pr0d@P!S3cur3'
+  //     default: {
+  //       username: 'prod_api_user',
+  //       password: 'Pr0d@P!S3cur3'
+  //     },
   //   },
   //   envVariables: {
   //     customLocation: 'prod'

package/src/ext/process-scorecard.ts

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import type { CatalogItem } from '@redocly/theme';
 
 export function useProcessScorecard(): {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
   processInfo: <T>(info: T) => T;
 } {

package/src/ext/{useConfigureReplay.ts → use-configure-replay.ts}

@@ -38,11 +38,13 @@ async function getReplayConfiguration(
   //   }
 
   //   const { token } = await response.json();
-  //
+
   //   return {
   //     security: {
-  //       token: {
-  //         access_token: token,
+  //       default: {
+  //         token: {
+  //           access_token: token,
+  //         }
   //       }
   //     }
   //   };

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/ConnectIcon/ConnectIcon.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
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M10.5 7.00875C9.74669 7.00947 9.01371 7.25321 8.40999 7.70375L6.29999 5.59375C6.75586 4.99443 7.00185 4.26175 6.99999 3.50875C7.00197 2.72021 6.73759 1.9541 6.24973 1.33459C5.76186 0.715073 5.07908 0.278462 4.31205 0.0955081C3.54502 -0.0874454 2.73868 -0.00601915 2.02371 0.326591C1.30874 0.659201 0.727035 1.2235 0.372873 1.92805C0.0187108 2.63259 -0.087157 3.43608 0.0724264 4.20832C0.23201 4.98055 0.647693 5.67627 1.25211 6.18272C1.85652 6.68917 2.61425 6.97668 3.4025 6.99864C4.19074 7.02061 4.96331 6.77576 5.59499 6.30375L7.69999 8.41375C7.22812 9.04527 6.98326 9.81759 7.00508 10.6056C7.0269 11.3937 7.31412 12.1512 7.82021 12.7557C8.32631 13.3601 9.02164 13.776 9.79358 13.9359C10.5655 14.0959 11.3688 13.9906 12.0735 13.637C12.7781 13.2834 13.3427 12.7024 13.6758 11.9879C14.009 11.2734 14.0912 10.4674 13.9091 9.70036C13.727 8.93334 13.2913 8.25026 12.6726 7.76174C12.0539 7.27323 11.2883 7.00791 10.5 7.00875ZM0.999993 3.50875C0.999993 3.0143 1.14662 2.53095 1.42132 2.11983C1.69602 1.70871 2.08647 1.38827 2.54328 1.19906C3.0001 1.00984 3.50277 0.960328 3.98772 1.05679C4.47267 1.15325 4.91813 1.39136 5.26776 1.74099C5.61739 2.09062 5.85549 2.53608 5.95196 3.02103C6.04842 3.50598 5.99891 4.00865 5.80969 4.46546C5.62047 4.92228 5.30004 5.31272 4.88892 5.58743C4.4778 5.86213 3.99445 6.00875 3.49999 6.00875C2.83695 6.00875 2.20107 5.74536 1.73223 5.27652C1.26339 4.80768 0.999993 4.1718 0.999993 3.50875Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const ConnectIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ConnectIcon/ConnectIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+`;

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

package/src/icons/ThumbDownFilledIcon/ThumbDownFilledIcon.tsx

@@ -0,0 +1,38 @@
+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) => {
+  const { color, ...restProps } = props;
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path
+        d="M3.0625 0.875H0.875V7H3.0625V0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+      <path
+        d="M10.0625 0.875H3.9375V7.35118L5.26846 9.34771L5.63828 11.9362C5.66886 12.1443 5.77308 12.3346 5.932 12.4725C6.09092 12.6103 6.29402 12.6866 6.5044 12.6875H6.5625C6.91048 12.6871 7.2441 12.5487 7.49016 12.3027C7.73621 12.0566 7.87462 11.723 7.875 11.375V8.75H11.375C11.839 8.74948 12.2838 8.56494 12.6119 8.23686C12.9399 7.90879 13.1245 7.46397 13.125 7V3.9375C13.1241 3.12555 12.8012 2.34712 12.227 1.77298C11.6529 1.19885 10.8744 0.875903 10.0625 0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+    </svg>
+  );
+};
+
+export const ThumbDownFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbDownFilledIcon/ThumbDownFilledIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;