@redocly/theme 0.59.0 → 0.60.0-custom.2

package/src/components/Link/Link.tsx

@@ -16,6 +16,7 @@ export type LinkProps = {
   languageInsensitive?: boolean;
   onClick?: () => void;
   [key: string]: unknown;
+  rel?: string;
 };
 
 export function Link(props: React.PropsWithChildren<LinkProps>): JSX.Element {

package/src/components/Loaders/Loading.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 const LoadingMessage = styled.div<{ color: string }>`
   font-family: helvetica, sans, sans-serif;
@@ -20,9 +21,12 @@ export type LoadingProps = {
 };
 
 export function Loading({ color }: LoadingProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div style={{ textAlign: 'center' }}>
-      <LoadingMessage color={color}>Loading ...</LoadingMessage>
+      <LoadingMessage color={color}>{translate('loaders.loading', 'Loading...')}</LoadingMessage>
       <Spinner color={color} />
     </div>
   );

package/src/components/Markdown/Markdown.tsx

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 import type { PropsWithChildren } from 'react';
 
 import { typography } from '@redocly/theme/core/utils';
-import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
+import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/base-table';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
-import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';
+import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
 
 export type MarkdownProps = PropsWithChildren<{
   className?: string;

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,7 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType } from '@redocly/theme/core/utils';
+import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
@@ -67,7 +67,11 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     )
   ) : null;
 
-  const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+  const httpColor = getOperationColor({
+    isAdditionalOperation: item.isAdditionalOperation,
+    deprecated: item.deprecated,
+    httpVerb: item.httpVerb || '',
+  });
 
   const label = item.label && (
     <MenuItemLabelWrapper

package/src/components/OpenApiDocs/hooks/AdditionalOverviewInfo.tsx

@@ -0,0 +1,10 @@
+// interface AdditionalOverviewInfoProps {
+//   info: any;
+// }
+
+// export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
+//   return null;
+// }
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export const AdditionalOverviewInfo: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export const AfterOpenApiDescription: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiTitle.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiTitle(_props: AfterOpenApiTitleProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiTitle: any = null;

package/src/components/OpenApiDocs/hooks/BeforeOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const BeforeOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiFooter.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiFooter() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiFooter: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiHeader.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiHeader() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiHeader: any = null;

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -27,6 +27,7 @@ export function SearchFilterFieldSelect({
   const { useFacetQuery, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const [selectOptions, setSelectOptions] = useState<any[]>([]);
   const isMultiple = facet.type === 'multi-select';
 
@@ -101,7 +102,9 @@ export function SearchFilterFieldSelect({
       searchable={true}
       footer={
         selectOptions.length === MAX_SELECT_OPTIONS ? (
-          <FilterSelectFooter>Search to show more items...</FilterSelectFooter>
+          <FilterSelectFooter>
+            {translate('search.filter.field.footer', 'Search to show more items...')}
+          </FilterSelectFooter>
         ) : null
       }
       onSearch={onSearch}

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { getOperationColor } from '@redocly/theme/core/utils';
+import { REQUEST_METHODS } from '@redocly/theme/core/constants';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -32,11 +34,15 @@ export function SearchFilterFieldTags({
             : [...selectedValues, value];
           onChange(values);
         };
+        const color = getOperationColor({
+          httpVerb: value,
+          isAdditionalOperation: !REQUEST_METHODS.includes(value.toUpperCase()),
+        });
         return (
           <FilterTagWrapper
             key={`${count}-${index}`}
             tabIndex={0}
-            color={value}
+            color={color}
             onClick={() => {
               updateSelectedValues();
             }}

package/src/components/Search/SearchAiMessage.tsx

@@ -95,9 +95,9 @@ function SearchAiMessageComponent({
         />
       )}
       <MessageContentWrapper>
-        <MessageWrapper role={role}>
-          {role === AiSearchConversationRole.ASSISTANT ? (
-            <>
+        {role === AiSearchConversationRole.ASSISTANT ? (
+          <>
+            <MessageWrapper role={role}>
               <ResponseText as="div" children={markDownContent} data-testid="response-text" />
               {hasResources && (
                 <>
@@ -119,42 +119,47 @@ function SearchAiMessageComponent({
                       ))}
                     </ResourceTagsWrapper>
                   </ResourcesWrapper>
-                  <FeedbackWrapper>
-                    <SearchAiActionButtons
-                      content={content}
-                      feedback={feedback}
-                      onFeedback={handleFeedbackClick}
-                      disabled={feedbackSent}
-                    />
-                  </FeedbackWrapper>
                 </>
               )}
-            </>
-          ) : (
-            content
-          )}
-          {isThinking && content.length === 0 && (
-            <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
-              <ThinkingDot />
-              <ThinkingDot />
-              <ThinkingDot />
-            </ThinkingDotsWrapper>
-          )}
-        </MessageWrapper>
-        {messageId && feedback === FeedbackType.Dislike && !showSuccessMessage && (
-          <SearchAiNegativeFeedbackForm
-            messageId={messageId}
-            onClose={onFeedbackChange}
-            onSubmit={(reason) => handleFeedbackClick(FeedbackType.Dislike, reason)}
-          />
-        )}
-        {showSuccessMessage && (
-          <SuccessMessageWrapper data-component-name="Search/SearchAiMessage/Success">
-            <CheckmarkOutlineIcon size="20px" color="var(--color-success-base)" />
-            <SuccessMessageText>
-              {translate('search.ai.feedback.thanks', 'Thank you for your feedback!')}
-            </SuccessMessageText>
-          </SuccessMessageWrapper>
+              {isThinking && content.length === 0 && (
+                <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
+                  <ThinkingDot />
+                  <ThinkingDot />
+                  <ThinkingDot />
+                </ThinkingDotsWrapper>
+              )}
+              {content.length > 0 && (
+                <FeedbackWrapper>
+                  <SearchAiActionButtons
+                    content={content}
+                    feedback={feedback}
+                    onFeedback={handleFeedbackClick}
+                    disabled={!!feedback}
+                  />
+                </FeedbackWrapper>
+              )}
+            </MessageWrapper>
+            {messageId && feedback === FeedbackType.Dislike && !showSuccessMessage && (
+              <SearchAiNegativeFeedbackForm
+                messageId={messageId}
+                onClose={(messageId: string, feedback: FeedbackType) => {
+                  onFeedbackChange(messageId, feedback);
+                  setFeedbackSent(true);
+                }}
+                onSubmit={(reason) => handleFeedbackClick(FeedbackType.Dislike, reason)}
+              />
+            )}
+            {showSuccessMessage && (
+              <SuccessMessageWrapper data-component-name="Search/SearchAiMessage/Success">
+                <CheckmarkOutlineIcon size="20px" color="var(--color-success-base)" />
+                <SuccessMessageText>
+                  {translate('search.ai.feedback.thanks', 'Thank you for your feedback!')}
+                </SuccessMessageText>
+              </SuccessMessageWrapper>
+            )}
+          </>
+        ) : (
+          <MessageWrapper role={role}>{content}</MessageWrapper>
         )}
       </MessageContentWrapper>
     </SearchAiMessageWrapper>

package/src/components/Search/SearchAiNegativeFeedbackForm.tsx

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { FeedbackType } from '@redocly/theme/core/types';
 
+import { FeedbackType } from '@redocly/theme/core/types';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
@@ -12,8 +12,9 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type SearchAiNegativeFeedbackFormProps = {
   messageId: string;
-  onClose: (messageId: string, feedback: FeedbackType | undefined) => void;
+  onClose: (messageId: string, feedback: FeedbackType, reason?: string) => void;
   onSubmit: (reason: string) => void;
+  formRef?: React.Ref<HTMLDivElement>;
 };
 
 const NEGATIVE_FEEDBACK_DEFAULT_REASONS = [
@@ -27,6 +28,7 @@ export function SearchAiNegativeFeedbackForm({
   messageId,
   onClose,
   onSubmit,
+  formRef,
 }: SearchAiNegativeFeedbackFormProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -54,7 +56,7 @@ export function SearchAiNegativeFeedbackForm({
   }, [showMoreInput]);
 
   return (
-    <FeedbackFormWrapper data-component-name="Search/SearchAiNegativeFeedbackForm">
+    <FeedbackFormWrapper data-component-name="Search/SearchAiNegativeFeedbackForm" ref={formRef}>
       <FeedbackHeader>
         {showMoreInput ? (
           <BackButton
@@ -72,7 +74,7 @@ export function SearchAiNegativeFeedbackForm({
           variant="text"
           size="small"
           icon={<CloseIcon />}
-          onClick={() => onClose(messageId, undefined)}
+          onClick={() => onClose(messageId, FeedbackType.Dislike, undefined)}
           aria-label="Close feedback form"
         />
       </FeedbackHeader>
@@ -85,7 +87,7 @@ export function SearchAiNegativeFeedbackForm({
             </Button>
           ))}
           <Button variant="outlined" size="small" onClick={() => setShowMoreInput(true)}>
-            More...
+            {translate('search.ai.feedback.more', 'More...')}
           </Button>
         </FeedbackReasonsWrapper>
       ) : (

package/src/components/Search/SearchGroups.tsx

@@ -9,6 +9,7 @@ import {
   type SearchFilterItem,
 } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type SearchGroupsProps = {
   facets: SearchFacet[];
@@ -26,6 +27,8 @@ export function SearchGroups({
   onQuickFilterReset,
 }: SearchGroupsProps): JSX.Element {
   const groupFacets = facets.filter((facet) => facet.field === groupField);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   const handleGroupTagClick = (
     value: string,
@@ -47,7 +50,7 @@ export function SearchGroups({
         onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
         selectable
       >
-        All
+        {translate('search.groups.all', 'All')}
       </GroupTag>
       <Divider />
       {groupFacets.flatMap((facet) =>

package/src/components/Search/SearchHighlight.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function slicer(str: string, arr: string[]): any[] {
   const markOpenIndex = str.indexOf('<mark>');
   const markCloseIndex = str.indexOf('</mark>');

package/src/components/Search/SearchItem.tsx

@@ -9,8 +9,9 @@ import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { searchHighlight } from '@redocly/theme/components/Search/SearchHighlight';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
-import { trimText } from '@redocly/theme/core/utils';
+import { trimText, getOperationColor } from '@redocly/theme/core/utils';
 import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type ActiveItem<T> = T & { active?: boolean };
 export type SearchItemProps = {
@@ -32,6 +33,8 @@ export function SearchItem({
   innerRef,
 }: SearchItemProps): JSX.Element {
   const ref = useRef<HTMLAnchorElement>(null);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   useEffect(() => {
     if (item.active) {
@@ -45,6 +48,11 @@ export function SearchItem({
     highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
   const shouldShowPath = document.path && document.path?.length > 1;
 
+  const httpColor = getOperationColor({
+    isAdditionalOperation: document.isAdditionalOperation,
+    httpVerb: document.httpMethod || '',
+  });
+
   return (
     <SearchItemWrapper
       className={className}
@@ -74,7 +82,7 @@ export function SearchItem({
           )}
           {document.httpMethod ? (
             <SearchItemOperation>
-              <SearchItemOperationTag color={document.httpMethod}>
+              <SearchItemOperationTag color={httpColor}>
                 {document.httpMethod.toUpperCase()}
               </SearchItemOperationTag>
               {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
@@ -84,7 +92,11 @@ export function SearchItem({
             <SearchItemTitle>
               {highlight.title ? searchHighlight(highlight.title) : document.title}
             </SearchItemTitle>
-            {document.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
+            {document.deprecated ? (
+              <SearchItemBadge deprecated>
+                {translate('search.searchItem.deprecated', 'Deprecated')}
+              </SearchItemBadge>
+            ) : null}
             {document.badges
               ? document.badges.map(({ name, color }) => (
                   <SearchItemBadge color={color || 'var(--color-info-base)'} key={name}>

package/src/components/Search/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const search = css`
   /**
     * @tokens Search
@@ -261,3 +262,4 @@ export const search = css`
 
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Segmented/Segmented.tsx

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ForwardedRef, ReactElement } from 'react';
-import type { SegmentedProps } from '@redocly/theme/core/types/segmented';
+import type { SegmentedProps } from '@redocly/theme/core/types';
 
-import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
+import { typedMemo } from '@redocly/theme/core/hoc/typed-memo';
 
 function SegmentedComponent<T>(
   { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,

package/src/components/Select/Select.tsx

@@ -2,14 +2,14 @@ import React, { Fragment, useEffect, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { SelectOption, SelectProps } from '@redocly/theme/core/types/select';
+import type { SelectOption, SelectProps } from '@redocly/theme/core/types';
 
 import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
 import { SelectInput } from '@redocly/theme/components/Select/SelectInput';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { useOutsideClick } from '@redocly/theme/core/hooks';
+import { useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
 
 export function Select<T>(props: SelectProps<T>): JSX.Element {
   const {
@@ -37,6 +37,8 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     renderInput,
     renderDivider,
   } = props;
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   const getSelectedOptionsFromPropsValue = () => {
     const values = Array.isArray(value) ? value : [value];
@@ -231,7 +233,9 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       >
         <SelectDropdownMenu role="listbox" footer={footer}>
           {filteredOptions.length === 0 ? (
-            <DropdownMenuItem disabled>No results</DropdownMenuItem>
+            <DropdownMenuItem disabled>
+              {translate('select.noResults', 'No results')}
+            </DropdownMenuItem>
           ) : (
             filteredOptions.map((option, index) => {
               return (
@@ -258,7 +262,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
                   {renderDivider && index !== options.length - 1 ? renderDivider() : null}
                 </Fragment>
               );
-            }) || 'No results'
+            }) || translate('select.noResults', 'No results')
           )}
         </SelectDropdownMenu>
       </SelectDropdown>

package/src/components/Select/SelectInput.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import React, { useRef } from 'react';
 
-import type { SelectOption } from '@redocly/theme/core/types/select';
+import type { SelectOption } from '@redocly/theme/core/types';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
@@ -11,7 +11,9 @@ type SelectInputProps<T> = {
   id?: string;
   listboxId?: string;
   selectedOptions: SelectOption<T>[];
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   searchValue: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   stickyValue: any;
   onlyIcon?: boolean;
   icon?: React.ReactNode;
@@ -21,10 +23,15 @@ type SelectInputProps<T> = {
   searchable?: boolean;
   clearable?: boolean;
   inputRef?: React.ForwardedRef<HTMLInputElement>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   clearHandler?: (value?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   inputBlurHandler?: (e?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   inputFocusHandler?: (e?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   searchHandler?: (e?: any) => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   clickHandler?: (e?: any) => void;
 };
 
@@ -50,11 +57,13 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const onChangeHandler = (e: any) => {
     searchHandler?.(e);
     inputRef.current?.focus();
   };
 
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const onKeyDownHandler = (e: any) => {
     if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
       clearHandler?.(selectedOptions[selectedOptions.length - 1]);

package/src/components/Select/variables.ts

@@ -10,7 +10,7 @@ export const select = css`
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-  
+
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -38,7 +38,7 @@ export const select = css`
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End

package/src/components/SidebarActions/{styled.tsx → styled.ts}

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { breakpoints } from '@redocly/theme/core/utils';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
-export const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }>`
+const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }>`
   display: flex;
   position: relative;
   flex-direction: ${({ collapsedSidebar }) => (collapsedSidebar ? 'column' : 'row')};
@@ -16,7 +16,7 @@ export const StyledChangeViewButton = styled.span<{ collapsedSidebar?: boolean }
   padding: calc(var(--spacing-unit) / 2);
 `;
 
-export const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
+const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
   width: 20px;
   height: 20px;
   border-radius: var(--border-radius);
@@ -26,7 +26,7 @@ export const StyledChangeViewButtonWrap = styled(Tooltip)<{ active?: boolean }>`
   background-color: ${({ active }) => active && 'var(--segmented-buttons-bg-color-inner)'};
 `;
 
-export const ControlsWrap = styled.span<{
+const ControlsWrap = styled.span<{
   iconCount?: number;
   isCollapsed?: boolean;
 }>`
@@ -59,10 +59,17 @@ export const ControlsWrap = styled.span<{
   }
 `;
 
-export const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boolean }>`
+const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boolean }>`
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
   gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;
+
+export {
+  StyledChangeViewButton,
+  StyledChangeViewButtonWrap,
+  ControlsWrapChangeLayoutButtons,
+  ControlsWrap,
+};

package/src/components/Tag/Tag.tsx

@@ -12,7 +12,7 @@ type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type ActionColor = 'receive' | 'send';
 type ChannelColor = 'channel';
-type HttpStatusColor = 'http-deprecated';
+type HttpStatusColor = 'http-deprecated' | 'http-additional-operation';
 type StatusColor =
   | DefaultStatusColor
   | ActionStatusColor
@@ -120,6 +120,7 @@ export function Tag({
         return React.cloneElement(element, {
           ...props,
           children: truncateText(props.children, maxLen),
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         } as any);
       }
     }
@@ -242,7 +243,8 @@ const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagPro
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: var(--tag-bg-color);
+  background-color: ${({ variant }) =>
+    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
   ${({ borderless }) =>
     borderless
       ? ''

package/src/components/Tag/variables.dark.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const tagDarkMode = css`
   --tag-close-button-bg-color-focus: var(--color-warm-grey-6); // @presenter Color
 
@@ -229,6 +230,12 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: #373776; // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #FCAB69; // @presenter Color
+    --tag-bg-color: #523926; // @presenter Color
+    --tag-bg-color-hover: #694830; // @presenter Color
+  }
+
   .tag-receive {
     --tag-color: #88CF82; // @presenter Color
     --tag-bg-color: #23421F; // @presenter Color
@@ -276,3 +283,4 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: transparent;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */