@redocly/theme 0.58.0 → 0.59.0-next.0

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.js

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js

@@ -40,7 +40,7 @@ const teamColumns = [
 ];
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },

package/lib/components/Panel/variables.js

@@ -330,6 +330,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   .panel-language-list,
   .panel-overview,
   .panel-download,
+  .panel-mcp-overview,
   .panel-servers-list,
   .panel-request-samples,
   .panel-response-samples,

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

@@ -8,7 +8,7 @@ type ActionColor = 'receive' | 'send';
 type ChannelColor = 'channel';
 type HttpStatusColor = 'http-deprecated';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | ActionColor | ChannelColor | HttpStatusColor;
-type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
+type Color = 'red' | 'green' | 'blue' | 'grey' | 'turquoise' | 'magenta' | 'purple' | 'carrot' | 'raspberry' | 'orange' | 'grass' | 'persian-green' | 'sky' | 'blueberry';
 export type TagProps = {
     className?: string;
     children?: React.ReactNode;
@@ -27,7 +27,8 @@ export type TagProps = {
     onClose?: (event: React.MouseEvent) => void;
     maxLength?: number;
     textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+    variant?: 'outline' | 'filled';
 };
-export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, textTransform, ...otherProps }: TagProps): JSX.Element;
+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 const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -21,7 +21,7 @@ const styled_components_1 = __importDefault(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 } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform"]);
+    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"]);
     const truncateText = (text, maxLen) => {
         if (text.length <= maxLen)
             return text;
@@ -74,7 +74,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 }, 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 }, 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) => {
@@ -131,11 +131,27 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
   ${({ textTransform }) => `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: var(--tag-bg-color);
-  ${({ borderless }) => borderless
+  background-color: ${({ variant }) => variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
+  ${({ borderless, variant }) => borderless
     ? ''
-    : 'border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);'}
+    : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
   border-radius: var(--tag-border-radius);
+
+  svg {
+    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);
+  }
 `;
 const StatusDot = styled_components_1.default.div `
   display: inline-block;

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

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.tagDarkMode = (0, styled_components_1.css) `
+  --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
 
@@ -41,7 +44,139 @@ exports.tagDarkMode = (0, styled_components_1.css) `
   .tag-draft,
   .tag-schema,
   .tag-default {
+    --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-red {
+    --tag-color: var(--color-red-7); // @presenter Color
+    --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-green {
+    --tag-color: var(--color-green-6); // @presenter Color
+    --tag-bg-color: var(--color-green-1); // @presenter Color
+    --tag-border-color: var(--color-green-3); // @presenter Color
+    --tag-border-color-hover: var(--color-green-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-green-2); // @presenter Color
+  }
+
+  .tag-blue {
+    --tag-color: var(--color-blue-7); // @presenter Color
+    --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-magenta,
+  .tag-hook { 
+    --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-purple,
+  .tag-head {
+    --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-carrot {
+    --tag-color: var(--color-carrot-6); // @presenter Color
+    --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-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-orange {
+    --tag-color: var(--color-orange-7); // @presenter Color
+    --tag-bg-color: var(--color-orange-1); // @presenter Color
+    --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-grass {
+    --tag-bg-color: var(--color-grass-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --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-persian-green {
+    --tag-color: var(--color-persian-green-7); // @presenter Color
+    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
+    --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-turquoise,
+  .tag-option {
+    --tag-color: var(--color-turquoise-6); // @presenter Color
+    --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-sky {
+    --tag-color: var(--color-sky-6); // @presenter Color
+    --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-blueberry {
+    --tag-color: var(--color-blueberry-7); // @presenter Color
+    --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-warning,
+  .tag-deprecated {
+    --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-processing,
+  .tag-info {
+    --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-error,
+  .tag-declined {
+    --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-success,
+  .tag-approved  {
+    --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-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
   }
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Tag/variables.js

@@ -11,12 +11,13 @@ exports.tag = (0, styled_components_1.css) `
   --tag-border-style: solid; //@presenter Border
   --tag-border-radius: var(--border-radius); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
+  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);
-  --tag-badge-border-width: 1.5px;
-  --tag-badge-border-color: #ffffff;
-
+  --tag-badge-border-width: 2px;
+  --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
+  --tag-border-color-focused: var(--color-blue-4); // @presenter Color
 
   /**
     * @tokens Tag spacing
@@ -34,7 +35,7 @@ exports.tag = (0, styled_components_1.css) `
   --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
   
   --tag-margin: 0 5px 0 0; //@presenter Spacing
-  --tag-gap: 5px; //@presenter Spacing
+  --tag-gap: 4px; //@presenter Spacing
 
   /**
     * @tokens Tag size
@@ -60,8 +61,8 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag icon
     */
 
-  --tag-icon-width: 1em; // @presenter Spacing
-  --tag-icon-height: 1em; // @presenter Spacing
+  --tag-icon-width: 14px; // @presenter Spacing
+  --tag-icon-height: 14px; // @presenter Spacing
 
   /**
     * @tokens Tag colors
@@ -74,85 +75,127 @@ exports.tag = (0, styled_components_1.css) `
   .tag-draft,
   .tag-schema,
   .tag-default {
-    --tag-color: var(--text-color-primary); // @presenter Color
+    --tag-color: var(--text-color-secondary); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
     --tag-border-color: var(--border-color-primary); // @presenter Color
+    --tag-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
+    --tag-border-color-hover: var(--color-warm-grey-5); // @presenter Color
+  }
+
+  .tag-green {
+    --tag-color: var(--color-green-8); // @presenter Color
+    --tag-bg-color: var(--color-green-1); // @presenter Color
+    --tag-border-color: 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-border-color-hover: var(--color-green-6); // @presenter Color
   }
 
-  .tag-green,
   .tag-success,
   .tag-approved {
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-active); // @presenter Color
+    --tag-border-color: var(--color-success-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-success-border-hover); // @presenter Color
+  }
+
+  .tag-red {
+    --tag-color: var(--color-red-7); // @presenter Color
+    --tag-bg-color: var(--color-red-1); // @presenter Color
+    --tag-border-color: var(--color-red-3); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-red-2); // @presenter Color
+    --tag-bg-color-hover: var(--color-red-2); // @presenter Color
+    --tag-border-color-hover: var(--color-red-5); // @presenter Color
   }
 
-  .tag-red,
   .tag-error,
   .tag-declined {
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-active); // @presenter Color
+    --tag-border-color: var(--color-error-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-error-border-hover); // @presenter Color
   }
 
-  .tag-gold,
   .tag-warning,
   .tag-deprecated {
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-active); // @presenter Color
+    --tag-border-color: var(--color-warning-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-warning-border-hover); // @presenter Color
   }
 
-  .tag-blue,
-  .tag-processing {
+  .tag-blue {
+    --tag-color: var(--color-blue-7); // @presenter Color
+    --tag-bg-color: var(--color-blue-1); // @presenter Color
+    --tag-border-color: var(--color-blue-4); // @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-border-color-hover: var(--color-blue-6); // @presenter Color
+  }
+
+  .tag-processing,
+  .tag-info {
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-active); // @presenter Color
+    --tag-border-color: var(--color-info-border); // @presenter Color
     --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
+  }
+
+  .tag-link {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-border-color: var(--color-info-border); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+    --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
+    --tag-border-color: var(--color-purple-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-border-color-hover: var(--color-purple-6); // @presenter Color
   }
 
-  .tag-cyan,
-  .tag-option,
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-turquoise-7); // @presenter Color
+  .tag-turquoise,
+  .tag-option {
+    --tag-color: var(--color-turquoise-8); // @presenter Color
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
-    --tag-border-color: var(--color-turquoise-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
+    --tag-border-color: var(--color-turquoise-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-border-color-hover: var(--color-turquoise-7); // @presenter Color
   }
 
-  .tag-yellow {
-    --tag-color: var(--color-carrot-7); // @presenter Color
+  .tag-carrot {
+    --tag-color: var(--color-carrot-8); // @presenter Color
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
-    --tag-border-color: var(--color-carrot-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+    --tag-border-color: var(--color-carrot-6); // @presenter Color
+    --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-border-color-hover: var(--color-carrot-7); // @presenter Color
   }
 
   .tag-magenta,
   .tag-hook {
     --tag-color: var(--color-magenta-7); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
-    --tag-border-color: var(--color-magenta-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
-  }
-
-  .tag-lime {
-    --tag-color: var(--color-green-7); // @presenter Color
-    --tag-bg-color: none; // @presenter Color
-    --tag-border-color: var(--color-green-7); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
+    --tag-border-color: var(--color-magenta-3); // @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-border-color-hover: var(--color-magenta-5); // @presenter Color
   }
 
   .tag-product {
@@ -164,37 +207,56 @@ exports.tag = (0, styled_components_1.css) `
 
   .tag-grass {
     --tag-color: var(--color-grass-8); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-bg-color: var(--color-grass-1); // @presenter Color
     --tag-border-color: var(--color-grass-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-grass-1); // @presenter Color
-  }
-  
-  .tag-purple {
-    --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
-    --tag-border-color: var(--color-purple-4); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-purple-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-border-color-hover: var(--color-grass-6); // @presenter Color
   }
 
   .tag-sky {
-    --tag-color: var(--color-sky-9); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-color: var(--color-sky-8); // @presenter Color
+    --tag-bg-color: var(--color-sky-1); // @presenter Color
     --tag-border-color: var(--color-sky-5); // @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-border-color-hover: var(--color-sky-7); // @presenter Color
   }
 
   .tag-raspberry {
     --tag-color: var(--color-raspberry-7); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
+    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
     --tag-border-color: var(--color-raspberry-3); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-raspberry-1); // @presenter Color
-  }
-
-  .tag-carrot {
-    --tag-color: var(--color-carrot-8); // @presenter Color
-    --tag-bg-color: transparent; // @presenter Color
-    --tag-border-color: var(--color-carrot-6); // @presenter Color
-    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @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-border-color-hover: var(--color-raspberry-5); // @presenter Color
+  }
+
+  .tag-orange {
+    --tag-color: var(--color-orange-7); // @presenter Color
+    --tag-bg-color: var(--color-orange-1); // @presenter Color
+    --tag-border-color: var(--color-orange-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-border-color-hover: var(--color-orange-5); // @presenter Color
+  }
+
+  .tag-persian-green {
+    --tag-color: var(--color-persian-green-8); // @presenter Color
+    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
+    --tag-border-color: var(--color-persian-green-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-border-color-hover: var(--color-persian-green-6); // @presenter Color
+  }
+
+  .tag-blueberry {
+    --tag-color: var(--color-blueberry-7); // @presenter Color
+    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
+    --tag-border-color: var(--color-blueberry-4); // @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-border-color-hover: var(--color-blueberry-6); // @presenter Color
   }
 
   /**

package/lib/core/hooks/use-tabs.d.ts

@@ -1,18 +1,23 @@
 type UseTabsProps = {
-    initialTab: string;
+    activeTab: string;
+    onTabChange: (tab: string) => void;
     totalTabs: number;
     containerRef?: React.RefObject<HTMLElement | null>;
 };
-export declare function useTabs({ initialTab, totalTabs, containerRef }: UseTabsProps): {
-    activeTab: string;
-    setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;
+export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps): {
     setTabRef: (element: HTMLButtonElement | null, index: number) => void;
     onTabClick: (labelOrIndex: string | number) => void;
     handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
-    getTabId: (label: string, index: number) => string;
     visibleTabs: number[];
     overflowTabs: number[];
-    ready: boolean;
     allTabsHidden: boolean;
 };
+type UseActiveTabProps = {
+    initialTab: string;
+    tabsId?: string;
+};
+export declare const useActiveTab: ({ initialTab, tabsId }: UseActiveTabProps) => {
+    activeTab: string;
+    setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
 export {};