@redocly/theme 0.59.0-rc.1 → 0.59.0

package/src/components/Search/variables.ts

@@ -144,68 +144,76 @@ export const search = css`
   /**
   * @tokens AI Search
   */
-  
+
   --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);
 
-  --search-ai-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
   --search-ai-response-padding: var(--spacing-lg);
   --search-ai-response-gap: var(--spacing-sm);
-
   --search-ai-response-header-gap: var(--spacing-md);
+  --search-ai-response-body-gap: var(--spacing-xl);
+  --search-ai-response-body-padding: 0 40px;
 
   --search-ai-question-font-size: var(--font-size-xl);
   --search-ai-question-font-weight: var(--font-weight-semibold);
   --search-ai-question-line-height: var(--line-height-xl);
   --search-ai-question-text-color: var(--text-color-primary);
 
-  --search-ai-response-body-gap: var(--spacing-xl);
-  --search-ai-response-body-padding: 0 40px;
-
   --search-ai-text-color: var(--text-color-secondary);
   --search-ai-text-font-size: var(--font-size-lg);
   --search-ai-text-line-height: var(--line-height-lg);
+  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
 
   --search-ai-user-bg-color: var(--color-blue-6);
   --search-ai-user-text-color: var(--color-static-white);
   --search-ai-assistant-bg-color: var(--layer-color);
   --search-ai-assistant-text-color: var(--text-color-primary);
   --search-ai-assistant-border: 1px solid var(--border-color-primary);
+  --search-ai-assistant-message-max-width: 80%;
 
-  --search-ai-resources-gap: var(--spacing-base);
+  --search-ai-icon-size: 32px;
+  --search-ai-icon-bg-color: var(--search-ai-gradient);
+  --search-ai-icon-color: var(--color-static-white);
+  --search-ai-icon-wrapper-padding: var(--spacing-xs);
+
+  --search-ai-resources-gap: var(--spacing-xxs);
   --search-ai-resources-title-font-weight: var(--font-weight-medium);
   --search-ai-resources-title-font-size: var(--font-size-lg);
   --search-ai-resources-title-line-height: var(--line-height-lg);
 
-  --search-ai-resource-tags-gap: var(--spacing-base);
+  --search-ai-resource-tags-gap: var(--spacing-xxs);
   --search-ai-resource-tag-text-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-size: 16px;
 
-  --search-ai-icon-size: 32px;
-  --search-ai-icon-bg-color: var(--search-ai-gradient);
-  --search-ai-icon-color: var(--color-static-white);
-
-  --search-ai-button-icon-color: none;
+  --search-ai-suggestions-gap: var(--spacing-sm);
+  --search-ai-suggestions-margin-left: var(--spacing-xs);
+  --search-ai-suggestion-item-gap: var(--spacing-xxs);
+  --search-ai-suggestions-title-text-color: var(--text-color-description);
+  --search-ai-suggestions-title-font-size: var(--font-size-base);
+  --search-ai-suggestions-title-line-height: var(--line-height-base);
+  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
+  --search-ai-suggestions-text-color: var(--text-color-description);
 
   --search-ai-thinking-dots-gap: 4px;
   --search-ai-thinking-dots-padding: 4px 0;
   --search-ai-thinking-dot-size: 6px;
   --search-ai-thinking-dot-color: var(--search-ai-gradient);
 
+  --search-ai-spinner-icon-color: var(--icon-color-interactive);
+  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+
+  --search-ai-feedback-gap: var(--spacing-xxs);
+
+  --search-ai-feedback-form-bg-color: var(--background-color-secondary);
+  --search-ai-feedback-form-border-color: var(--border-color-primary);
+
   --search-ai-disclaimer-font-size: var(--font-size-sm);
   --search-ai-disclaimer-line-height: var(--line-height-sm);
   --search-ai-disclaimer-text-color: var(--text-color-secondary);
 
-
   --search-ai-welcome-margin: var(--spacing-md);
-  --search-ai-icon-wrapper-padding: var(--spacing-xs);
 
-  --search-ai-suggestions-title-text-color: var(--text-color-description);
-  --search-ai-suggestions-title-font-size: var(--font-size-base);
-  --search-ai-suggestions-title-line-height: var(--line-height-base);
-  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
-  --search-ai-suggestions-text-color: var(--text-color-description);
+  --search-ai-button-icon-color: none;
 
   --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
   --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
@@ -232,6 +240,7 @@ export const search = css`
   * @tokens AI Search Conversation Input
   */
   --search-ai-conversation-input-bg-color: var(--bg-color);
+  --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
   --search-ai-conversation-input-border-radius: var(--border-radius-lg);
@@ -241,51 +250,14 @@ export const search = css`
   --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
 
   --search-ai-conversation-input-send-button-right: 12px;
-  --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
-  --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
-  --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
+  --search-ai-conversation-input-send-button-padding: 5px;
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
-  /**
-  * @tokens AI Search Response
-  */
-  --search-ai-response-padding: var(--spacing-lg);
-  --search-ai-response-gap: var(--spacing-sm);
-  --search-ai-response-header-gap: var(--spacing-md);
-  --search-ai-response-body-gap: var(--spacing-xl);
-  --search-ai-response-body-padding: 0 40px;
-
-  --search-ai-text-color: var(--text-color-secondary);
-  --search-ai-text-font-size: var(--font-size-lg);
-  --search-ai-text-line-height: var(--line-height-lg);
-
-  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
-
-  --search-ai-question-font-size: var(--font-size-xl);
-  --search-ai-question-font-weight: var(--font-weight-semibold);
-  --search-ai-question-line-height: var(--line-height-xl);
-  --search-ai-question-text-color: var(--text-color-primary);
-
-  --search-ai-resources-gap: var(--spacing-base);
-  --search-ai-resources-title-font-weight: var(--font-weight-medium);
-  --search-ai-resources-title-font-size: var(--font-size-lg);
-  --search-ai-resources-title-line-height: var(--line-height-lg);
-
-  --search-ai-resource-tags-gap: var(--spacing-base);
-  --search-ai-resource-tag-text-color: var(--text-color-secondary);
-  --search-ai-resource-tag-icon-color: var(--text-color-secondary);
-
-  --search-ai-suggestions-gap: var(--spacing-sm);
-  --search-ai-suggestions-margin-left: var(--spacing-xs);
-  --search-ai-suggestion-item-gap: var(--spacing-xs);
-
-  --search-ai-suggestions-title-text-color: var(--text-color-description);
-  --search-ai-suggestions-title-font-size: var(--font-size-base);
-  --search-ai-suggestions-title-line-height: var(--line-height-base);
-  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
-
-  --search-ai-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+  --search-ai-conversation-input-min-height: 48px;
+  --search-ai-conversation-input-max-height: 120px;
+  --search-ai-conversation-input-padding-right: calc(var(--search-ai-conversation-input-send-button-right) + 30px);
+  --search-ai-conversation-input-send-button-bottom: calc(var(--search-ai-conversation-input-min-height) / 2);
 
   // @tokens End
 `;

package/src/components/Segmented/Segmented.tsx

@@ -2,18 +2,10 @@ import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ForwardedRef, ReactElement } from 'react';
-import type { SelectOption } from '@redocly/theme/core/types/select';
+import type { SegmentedProps } from '@redocly/theme/core/types/segmented';
 
 import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
 
-export type SegmentedProps<T> = {
-  options: SelectOption<T>[];
-  value: T;
-  onChange: ({ label, value }: SelectOption<T>) => void;
-  className?: string;
-  size?: 'regular' | 'small';
-};
-
 function SegmentedComponent<T>(
   { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,
   ref?: ForwardedRef<HTMLDivElement>,
@@ -25,17 +17,20 @@ function SegmentedComponent<T>(
       className={`tag-grey ${size} ${className}`}
       role="tablist"
     >
-      {options.map((opt) => (
-        <SegmentedItem
-          key={opt.label}
-          role="tab"
-          title={opt.label}
-          onClick={() => onChange(opt)}
-          $isActive={value == opt.value}
-          $size={size}
-        >
-          {opt.label}
-        </SegmentedItem>
+      {options.map((opt, index) => (
+        <React.Fragment key={index}>
+          {opt.divider}
+          <SegmentedItem
+            key={opt.label}
+            role="tab"
+            title={opt.label}
+            onClick={() => onChange(opt)}
+            $isActive={value == opt.value}
+            $size={size}
+          >
+            {opt.element || opt.label}
+          </SegmentedItem>
+        </React.Fragment>
       ))}
     </SegmentedGroup>
   );

package/src/components/Select/SelectInput.tsx

@@ -83,6 +83,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/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/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';
 
@@ -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 => {
@@ -152,6 +154,7 @@ export function Tag({
       hasCloseButton={closable}
       textTransform={textTransform}
       variant={variant}
+      selectable={selectable}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -186,16 +189,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;
@@ -227,8 +242,7 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: ${({ variant }) =>
-    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
+  background-color: var(--tag-bg-color);
   ${({ borderless }) =>
     borderless
       ? ''
@@ -239,19 +253,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,11 @@
 import { css } from 'styled-components';
 
 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 +13,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 +21,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 +30,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 +38,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 +46,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 +62,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 +78,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 +87,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 +96,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 +105,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 +113,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 +121,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 +129,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 +137,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 +145,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 +153,126 @@ 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-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;
   }
 `;