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

package/lib/components/SidebarActions/styled.d.ts

@@ -1,13 +1,14 @@
-export declare const StyledChangeViewButton: import("styled-components").StyledComponent<"span", any, {
+declare const StyledChangeViewButton: import("styled-components").StyledComponent<"span", any, {
     collapsedSidebar?: boolean;
 }, never>;
-export declare const StyledChangeViewButtonWrap: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("react").PropsWithChildren<import("../../components/Tooltip/Tooltip").TooltipProps>>, any, {
+declare const StyledChangeViewButtonWrap: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("react").PropsWithChildren<import("../../components/Tooltip/Tooltip").TooltipProps>>, any, {
     active?: boolean;
 }, never>;
-export declare const ControlsWrap: import("styled-components").StyledComponent<"span", any, {
+declare const ControlsWrap: import("styled-components").StyledComponent<"span", any, {
     iconCount?: number;
     isCollapsed?: boolean;
 }, never>;
-export declare const ControlsWrapChangeLayoutButtons: import("styled-components").StyledComponent<"span", any, {
+declare const ControlsWrapChangeLayoutButtons: import("styled-components").StyledComponent<"span", any, {
     isCollapsed?: boolean;
 }, never>;
+export { StyledChangeViewButton, StyledChangeViewButtonWrap, ControlsWrapChangeLayoutButtons, ControlsWrap, };

package/lib/components/SidebarActions/styled.js

@@ -33,11 +33,11 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlsWrapChangeLayoutButtons = exports.ControlsWrap = exports.StyledChangeViewButtonWrap = exports.StyledChangeViewButton = void 0;
+exports.ControlsWrap = exports.ControlsWrapChangeLayoutButtons = exports.StyledChangeViewButtonWrap = exports.StyledChangeViewButton = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-exports.StyledChangeViewButton = styled_components_1.default.span `
+const StyledChangeViewButton = styled_components_1.default.span `
   display: flex;
   position: relative;
   flex-direction: ${({ collapsedSidebar }) => (collapsedSidebar ? 'column' : 'row')};
@@ -49,7 +49,8 @@ exports.StyledChangeViewButton = styled_components_1.default.span `
   z-index: 1;
   padding: calc(var(--spacing-unit) / 2);
 `;
-exports.StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
+exports.StyledChangeViewButton = StyledChangeViewButton;
+const StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
   width: 20px;
   height: 20px;
   border-radius: var(--border-radius);
@@ -58,7 +59,8 @@ exports.StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.
   justify-content: center;
   background-color: ${({ active }) => active && 'var(--segmented-buttons-bg-color-inner)'};
 `;
-exports.ControlsWrap = styled_components_1.default.span `
+exports.StyledChangeViewButtonWrap = StyledChangeViewButtonWrap;
+const ControlsWrap = styled_components_1.default.span `
   display: none;
   justify-content: flex-end;
   bottom: 0;
@@ -86,11 +88,13 @@ exports.ControlsWrap = styled_components_1.default.span `
     display: none;
   }
 `;
-exports.ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
+exports.ControlsWrap = ControlsWrap;
+const ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
   gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;
+exports.ControlsWrapChangeLayoutButtons = ControlsWrapChangeLayoutButtons;
 //# sourceMappingURL=styled.js.map

package/lib/components/Tag/Tag.d.ts

@@ -6,7 +6,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 | SubjectStatusColor | HttpColor | ActionColor | ChannelColor | HttpStatusColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'turquoise' | 'magenta' | 'purple' | 'carrot' | 'raspberry' | 'orange' | 'grass' | 'persian-green' | 'sky' | 'blueberry';
 export type TagProps = {
@@ -28,7 +28,8 @@ export type TagProps = {
     maxLength?: number;
     textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
     variant?: 'outline' | 'filled';
+    selectable?: boolean;
 };
-export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, textTransform, variant, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, textTransform, variant, selectable, ...otherProps }: TagProps): JSX.Element;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -17,11 +50,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentWrapper = void 0;
 exports.Tag = Tag;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength, textTransform, variant = 'filled' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform", "variant"]);
+    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength, textTransform, variant = 'filled', selectable } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform", "variant", "selectable"]);
     const truncateText = (text, maxLen) => {
         if (text.length <= maxLen)
             return text;
@@ -74,7 +107,7 @@ function Tag(_a) {
         }
         return children;
     };
-    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform, variant: variant }, otherProps),
+    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform, variant: variant, selectable: selectable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
         react_1.default.createElement(exports.ContentWrapper, null, renderChildren()),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
@@ -98,14 +131,27 @@ const CloseButton = styled_components_1.default.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_components_1.default.div.attrs(({ className, color, size }) => ({
-    className: (className || '') +
-        ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
+const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size, variant }) => ({
+    className: [
+        className,
+        'tag-default',
+        color && `tag-${color}`,
+        size && `tag-size-${size}`,
+        `tag-variant-${variant || 'filled'}`,
+    ]
+        .filter(Boolean)
+        .join(' '),
 })) `
   display: inline-flex;
   align-items: center;
@@ -141,17 +187,20 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
     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 &&
+    (0, styled_components_1.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_components_1.default.div `
   display: inline-block;

package/lib/components/Tag/variables.dark.js

@@ -2,44 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.tagDarkMode = (0, styled_components_1.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,
@@ -47,6 +16,7 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -54,6 +24,7 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -62,6 +33,7 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -69,6 +41,7 @@ exports.tagDarkMode = (0, styled_components_1.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,
@@ -76,14 +49,15 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -91,12 +65,14 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -105,6 +81,7 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -113,6 +90,7 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -121,6 +99,7 @@ exports.tagDarkMode = (0, styled_components_1.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,
@@ -129,6 +108,7 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -136,6 +116,7 @@ exports.tagDarkMode = (0, styled_components_1.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 {
@@ -143,6 +124,7 @@ exports.tagDarkMode = (0, styled_components_1.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,
@@ -150,6 +132,7 @@ exports.tagDarkMode = (0, styled_components_1.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,
@@ -157,6 +140,7 @@ exports.tagDarkMode = (0, styled_components_1.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,
@@ -164,6 +148,7 @@ exports.tagDarkMode = (0, styled_components_1.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,
@@ -171,12 +156,134 @@ exports.tagDarkMode = (0, styled_components_1.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 */
 //# sourceMappingURL=variables.dark.js.map