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

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]);
@@ -83,6 +92,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   const selectTags = selectedOptions.map((option, index) => (
     <SelectInputTag
       closable
+      tabIndex={0}
       key={index}
       onClose={() => {
         clearHandler?.(option);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -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
@@ -56,6 +56,7 @@ export type TagProps = {
   maxLength?: number;
   textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
   variant?: 'outline' | 'filled';
+  selectable?: boolean;
 };
 
 export function Tag({
@@ -75,6 +76,7 @@ export function Tag({
   maxLength,
   textTransform,
   variant = 'filled',
+  selectable,
   ...otherProps
 }: TagProps): JSX.Element {
   const truncateText = (text: string, maxLen: number): string => {
@@ -118,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);
       }
     }
@@ -152,6 +155,7 @@ export function Tag({
       hasCloseButton={closable}
       textTransform={textTransform}
       variant={variant}
+      selectable={selectable}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -186,16 +190,28 @@ const CloseButton = styled.div`
   justify-content: center;
   align-self: stretch;
   border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
+  margin: calc(-1 * var(--tag-border-width));
+  padding: var(--tag-border-width);
 
   &:hover {
     background: var(--tag-close-button-bg-color-hover);
   }
+
+  &:focus-visible {
+    background: var(--tag-close-button-bg-color-focus);
+  }
 `;
 
-const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
-  className:
-    (className || '') +
-    ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
+const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagProps) => ({
+  className: [
+    className,
+    'tag-default',
+    color && `tag-${color}`,
+    size && `tag-size-${size}`,
+    `tag-variant-${variant || 'filled'}`,
+  ]
+    .filter(Boolean)
+    .join(' '),
 }))<
   TagProps & {
     hasCloseButton?: boolean;
@@ -239,19 +255,21 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     width: var(--tag-icon-width);
     height: var(--tag-icon-height);
   }
-  /* 
-  &:hover {
-    background-color: ${({ variant }) =>
-    variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
-    border-color: ${({ variant }) =>
-    variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
-  } */
 
-  &:focus-visible {
-    outline: 1px solid var(--tag-border-color-focused);
-    outline-offset: 2px;
-    border-radius: var(--tag-border-radius-focused);
-  }
+  ${({ selectable }) =>
+    selectable &&
+    css`
+      &:hover {
+        background-color: var(--tag-bg-color-hover);
+        border-color: var(--tag-border-color-hover);
+      }
+
+      &:focus-visible {
+        outline: 1px solid var(--tag-border-color-focused);
+        outline-offset: 2px;
+        border-radius: var(--tag-border-radius-focused);
+      }
+    `};
 `;
 
 const StatusDot = styled.div<{ color: string }>`

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

@@ -1,43 +1,12 @@
 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
+
   --tag-border-color-focused: var(--color-blue-8); // @presenter Color
   --tag-badge-border-color: var(--border-color-secondary);
 
-  --tag-operation-color-delete: #fa82a2; // @presenter Color
-  --tag-operation-bg-color-delete: #77214C; // @presenter Color
-
-  --tag-operation-color-get: #68cc97; // @presenter Color
-  --tag-operation-bg-color-get: #1F4D2D; // @presenter Color
-
-  --tag-operation-color-post: #90b0f0; // @presenter Color
-  --tag-operation-bg-color-post: #233061; // @presenter Color
-
-  --tag-operation-color-put: #e0a663; // @presenter Color
-  --tag-operation-bg-color-put: #612729; // @presenter Color
-
-  --tag-operation-color-patch: #e0c363; // @presenter Color
-  --tag-operation-bg-color-patch: #5C3721; // @presenter Color
-
-  --tag-operation-color-head: #e6e1fe; // @presenter Color
-  --tag-operation-bg-color-head: #5b4ccc; // @presenter Color
-
-  --tag-operation-color-options: #1a1c21; // @presenter Color
-  --tag-operation-bg-color-options: #2a2b33; // @presenter Color
-
-  --tag-action-color-receive: #88CF82; // @presenter Color
-  --tag-action-color-sub: #88CF82; // @presenter Color
-  --tag-action-color-cons: #88CF82; // @presenter Color
-
-  --tag-action-color-send: #7779F8; // @presenter Color
-  --tag-action-color-pub: #7779F8; // @presenter Color
-  --tag-action-color-publish: #7779F8; // @presenter Color
-
-  --tag-action-color-channel: #F5AD5B; // @presenter Color
-  --tag-action-color-topic: #F5AD5B; // @presenter Color
-  --tag-action-color-queue: #F7A7CF; // @presenter Color
-  --tag-action-color-exchange: #C79CF2; // @presenter Color
-
   .tag-grey,
   .tag-draft,
   .tag-schema,
@@ -45,6 +14,7 @@ export const tagDarkMode = css`
     --tag-color: var(--color-warm-grey-8); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
     --tag-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
   }
 
   .tag-red {
@@ -52,6 +22,7 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-red-1); // @presenter Color
     --tag-border-color: var(--color-red-8); // @presenter Color
     --tag-border-color-hover: var(--color-red-6); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
   }
 
   .tag-green {
@@ -60,6 +31,7 @@ export const tagDarkMode = css`
     --tag-border-color: var(--color-green-3); // @presenter Color
     --tag-border-color-hover: var(--color-green-5); // @presenter Color
     --tag-bg-color-hover: var(--color-green-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-green-2); // @presenter Color
   }
 
   .tag-blue {
@@ -67,6 +39,7 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-blue-1); // @presenter Color
     --tag-border-color-hover: var(--color-blue-5); // @presenter Color
     --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-blue-2); // @presenter Color
   }
 
   .tag-magenta,
@@ -74,14 +47,15 @@ export const tagDarkMode = css`
     --tag-color: var(--color-magenta-4); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
     --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-magenta-2); // @presenter Color
   }
 
-  .tag-purple,
-  .tag-head {
+  .tag-purple {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
     --tag-border-color-hover: var(--color-purple-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
   }
 
   .tag-carrot {
@@ -89,12 +63,14 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
     --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
     --tag-border-color: var(--color-carrot-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
   }
 
   .tag-raspberry {
     --tag-color: var(--color-raspberry-7); // @presenter Color
     --tag-bg-color: var(--color-raspberry-1); // @presenter Color
     --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-raspberry-2); // @presenter Color
   }
 
   .tag-orange {
@@ -103,6 +79,7 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
     --tag-border-color: var(--color-orange-3); // @presenter Color
     --tag-border-color-hover: var(--color-orange-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
   }
 
   .tag-grass {
@@ -111,6 +88,7 @@ export const tagDarkMode = css`
     --tag-color: var(--color-grass-7); // @presenter Color
     --tag-border-color: var(--color-grass-3); // @presenter Color
     --tag-border-color-hover: var(--color-grass-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
   }
 
   .tag-persian-green {
@@ -119,6 +97,7 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
     --tag-border-color: var(--color-persian-green-3); // @presenter Color
     --tag-border-color-hover: var(--color-persian-green-5); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
   }
 
   .tag-turquoise,
@@ -127,6 +106,7 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
     --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
     --tag-border-color: var(--color-turquoise-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
   }
 
   .tag-sky {
@@ -134,6 +114,7 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-sky-1); // @presenter Color
     --tag-border-color: var(--color-sky-4); // @presenter Color
     --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
   }
 
   .tag-blueberry {
@@ -141,6 +122,7 @@ export const tagDarkMode = css`
     --tag-bg-color: var(--color-blueberry-1); // @presenter Color
     --tag-border-color-hover: var(--color-blueberry-5); // @presenter Color
     --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-blueberry-2); // @presenter Color
   }
 
   .tag-warning,
@@ -148,6 +130,7 @@ export const tagDarkMode = css`
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
   }
 
   .tag-processing,
@@ -155,6 +138,7 @@ export const tagDarkMode = css`
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
   }
 
   .tag-error,
@@ -162,6 +146,7 @@ export const tagDarkMode = css`
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
   }
 
   .tag-success,
@@ -169,11 +154,133 @@ export const tagDarkMode = css`
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
   }
 
   .tag-link {
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
+  }
+
+  .tag-delete {
+    --tag-color: #fa82a2; // @presenter Color
+    --tag-bg-color: #47252E; // @presenter Color
+    --tag-bg-color-hover: #653441; // @presenter Color
+  }
+
+  .tag-get {
+    --tag-color: #68cc97; // @presenter Color
+    --tag-bg-color: #1F3D2D; // @presenter Color
+    --tag-bg-color-hover: #34654B; // @presenter Color
+  }
+
+  .tag-post {
+    --tag-color: #90b0f0; // @presenter Color
+    --tag-bg-color: #2B3447; // @presenter Color
+    --tag-bg-color-hover: #3A465F; // @presenter Color
+  }
+
+  .tag-put {
+    --tag-color: #e0a663; // @presenter Color
+    --tag-bg-color: #3D2D1B; // @presenter Color
+    --tag-bg-color-hover: #674C2D; // @presenter Color
+  }
+
+  .tag-patch {
+    --tag-color: #e0c363; // @presenter Color
+    --tag-bg-color: #3D351B; // @presenter Color
+    --tag-bg-color-hover: #67592D; // @presenter Color
+  }
+
+  .tag-head {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: #312B5A; // @presenter Color
+    --tag-bg-color-hover: #413875; // @presenter Color
+  }
+
+  .tag-channel {
+    --tag-color: #F5AD5B; // @presenter Color
+    --tag-bg-color: #4A3721; // @presenter Color
+    --tag-bg-color-hover: #64492B; // @presenter Color
+  }
+
+  .tag-topic {
+    --tag-color: #F5AD5B; // @presenter Color
+    --tag-bg-color: #4A3721; // @presenter Color
+    --tag-bg-color-hover: #64492B; // @presenter Color
+  }
+
+  .tag-send {
+    --tag-color: #7779F8; // @presenter Color
+    --tag-bg-color: #272754; // @presenter Color
+    --tag-bg-color-hover: #373776; // @presenter Color
+  }
+
+  .tag-pub {
+    --tag-color: #7779F8; // @presenter Color
+    --tag-bg-color: #272754; // @presenter Color
+    --tag-bg-color-hover: #373776; // @presenter Color
+  }
+
+  .tag-publish {
+    --tag-color: #7779F8; // @presenter Color
+    --tag-bg-color: #272754; // @presenter Color
+    --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
+    --tag-bg-color-hover: #305A2A; // @presenter Color
+  }
+
+  .tag-sub {
+    --tag-color: #88CF82; // @presenter Color
+    --tag-bg-color: #23421F; // @presenter Color
+    --tag-bg-color-hover: #305A2A; // @presenter Color
+  }
+
+  .tag-cons {
+    --tag-color: #88CF82; // @presenter Color
+    --tag-bg-color: #23421F; // @presenter Color
+    --tag-bg-color-hover: #305A2A; // @presenter Color
+  }
+
+  .tag-exchange {
+    --tag-color: #C79CF2; // @presenter Color
+    --tag-bg-color: #472669; // @presenter Color
+    --tag-bg-color-hover: #5C3187; // @presenter Color
+  }
+      
+  // shorten alias for exchange tag:
+  .tag-exch {
+    --tag-color: #C79CF2; // @presenter Color
+    --tag-bg-color: #472669; // @presenter Color
+    --tag-bg-color-hover: #5C3187; // @presenter Color
+  }
+
+  .tag-queue {
+    --tag-color: #F7A7CF; // @presenter Color
+    --tag-bg-color: #622242; // @presenter Color
+    --tag-bg-color-hover: #882F5C; // @presenter Color
+  }
+
+  .tag-variant-filled {
+    --tag-border-color: transparent;
+    --tag-border-color-hover: transparent;
+  }
+
+  .tag-variant-outline {
+    --tag-bg-color: transparent;
+    --tag-bg-color-hover: transparent;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */