@redocly/theme 0.18.3-patch.8 → 0.18.4-patch.1

package/lib/components/Button/Button.js

@@ -54,7 +54,7 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 5px;
+  gap: var(--spacing-xs);
   outline: none;
   margin: var(--button-margin);
   cursor: pointer;

package/lib/components/Catalog/Catalog.js

@@ -83,9 +83,12 @@ exports.FilterControls = styled_components_1.default.div `
 `;
 exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
-  padding: var(--mobile-catalog-page-padding);
+  width: 90%;
+  margin: 0 auto;
+  padding: 0;
 
   ${({ theme }) => theme.mediaQueries.medium} {
+    width: 100%;
     padding: var(--catalog-page-padding);
   }
 `;
@@ -141,6 +144,8 @@ exports.CatalogPageWrapper = styled_components_1.default.div `
   }
 `;
 const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/FilterTags' }) `
+  width: 90%;
+  margin: 0 auto;
   padding: var(--filter-tags-wrapper-padding);
   display: flex;
   overflow-x: scroll;

package/lib/components/Catalog/CatalogCard.js

@@ -142,7 +142,9 @@ const CardFooter = styled_components_1.default.div `
 const CardTags = styled_components_1.default.div `
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: var(--spacing-xxs);
+  min-height: var(--spacing-xl);
 `;
 const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
   margin: 0;

package/lib/components/Catalog/styledVariables.js

@@ -10,7 +10,6 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-page-padding-vertical: var(--spacing-lg);
   --catalog-page-padding-horizontal: var(--spacing-xl);
   --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
-  --mobile-catalog-page-padding: 0 var(--spacing-base) var(--spacing-base) var(--spacing-base);
 
   --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
   --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
@@ -34,7 +33,7 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog page separator
     */
-  --catalog-separator-color: var(--text-description);
+  --catalog-separator-color: var(--text-secondary);
   --catalog-separator-font-size: var(--font-size-base);
   --catalog-separator-font-weight: var(--font-weight-regular);
   --catalog-separator-border-color: var(--border-secondary);
@@ -44,8 +43,8 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-separator-count-height: var(--control-height-xs);
   --catalog-separator-count-padding: 0 var(--spacing-xxs);
   --catalog-separator-count-border-radius: var(--border-radius-xlg);
-  --catalog-separator-count-border-color: var(--border-secondary);
-  --catalog-separator-count-background: var(--bg-raised);
+  --catalog-separator-count-border-color: var(--border-primary);
+  --catalog-separator-count-background: var(--bg-overlay);
 
   /**
     * @tokens Catalog card

package/lib/components/CodeBlock/styledVariables.js

@@ -68,24 +68,24 @@ exports.code = (0, styled_components_1.css) `
   --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
-  --code-block-tokens-string-color: var(--color-cyan-6); // @presenter Color
+  --code-block-tokens-string-color: var(--color-cyan-7); // @presenter Color
   --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
   --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
-  --code-block-tokens-link-color: var(--color-blue-6); // @presenter Color
+  --code-block-tokens-link-color: var(--color-blue-7); // @presenter Color
   --code-block-tokens-operator-color: var(--color-gold-7); // @presenter Color
   --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
   --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
   --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
-  --code-block-tokens-keyword-color: var(--color-magneta-6); // @presenter Color
+  --code-block-tokens-keyword-color: var(--color-magenta-7); // @presenter Color
   --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
   --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
-  --code-block-tokens-regex-color: var(--color-gold-5); // @presenter Color
+  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
   --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
-  --code-block-tokens-deleted-color: var(--color-red-6); // @presenter Color
+  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
 
   // @tokens End
 `;

package/lib/components/EditPageButton/EditPageButton.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 export interface EditPageButtonProps {
-    text: string;
     to: string;
-    icon?: string;
 }
-export declare const EditPageButton: ({ text, to, icon }: EditPageButtonProps) => JSX.Element;
+export declare const EditPageButton: ({ to }: EditPageButtonProps) => JSX.Element;

package/lib/components/EditPageButton/EditPageButton.js

@@ -8,10 +8,16 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const telemetry_1 = require("../../mocks/telemetry");
-const EditPageButton = ({ text, to, icon }) => {
-    return (react_1.default.createElement(EditButton, { to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
-        icon ? react_1.default.createElement(ButtonIcon, { src: icon }) : null,
-        react_1.default.createElement(ButtonText, null, text)));
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../mocks/hooks");
+const EditPageButton = ({ to }) => {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        text: 'theme.markdown.editPage.text',
+    };
+    return (react_1.default.createElement(EditButton, { "data-component-name": "EditPageButton/EditPageButton", to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
+        react_1.default.createElement(ButtonIcon, null),
+        react_1.default.createElement(ButtonText, { "data-translation-key": translationKeys.text }, translate(translationKeys.text, 'Edit'))));
 };
 exports.EditPageButton = EditPageButton;
 const EditButton = (0, styled_components_1.default)(Link_1.Link) `
@@ -31,9 +37,8 @@ const EditButton = (0, styled_components_1.default)(Link_1.Link) `
     display: none;
   }
 `;
-const ButtonIcon = styled_components_1.default.img `
-  height: 14px;
-  padding-right: 3px;
+const ButtonIcon = (0, styled_components_1.default)(icons_1.EditIcon) `
+  margin-right: 3px;
 `;
 const ButtonText = styled_components_1.default.span `
   line-height: 14px;

package/lib/components/Filter/Filter.js

@@ -102,7 +102,7 @@ const FilterOptionCount = styled_components_1.default.label `
   font-weight: var(--filter-option-count-font-weight);
   padding: var(--filter-option-count-padding);
   border-radius: var(--filter-option-count-border-radius);
-  border: 1px solid var(--filter-option-count-border-color);
+  border: var(--filter-option-count-border);
   background-color: var(--filter-option-count-background-color);
 `;
 const FilterTitle = styled_components_1.default.h4 `

package/lib/components/Filter/styledVariables.js

@@ -22,14 +22,14 @@ exports.filter = (0, styled_components_1.css) `
   --filter-option-label-margin: 0 var(--spacing-xs) 0 0;
   --filter-option-label-color: var(--text-secondary);
 
-  --filter-option-count-height: 14px;
-  --filter-option-count-color: var(--text-description);
-  --filter-option-count-font-size: var(--spacing-sm);
+  --filter-option-count-height: 17px;
+  --filter-option-count-color: var(--text-secondary);
+  --filter-option-count-font-size: var(--font-size-sm);
   --filter-option-count-font-weight: var(--font-weight-regular);
   --filter-option-count-padding: 0px var(--spacing-xxs);
   --filter-option-count-border-radius: var(--spacing-sm);
-  --filter-option-count-border-color: 1px solid var(--border-secondary);
-  --filter-option-count-background-color: var(--bg-raised);
+  --filter-option-count-border: 1px solid var(--border-primary);
+  --filter-option-count-background-color: var(--bg-overlay);
 
   --filter-content-border-color: var(--border-secondary);
   --filter-content-items-padding: 0 var(--spacing-lg);
@@ -49,7 +49,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-popover-header-button-font-size: var(--font-size-base);
   --filter-popover-header-button-font-weight: var(--font-weight-regular);
 
-  --filter-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) var(--spacing-base);
+  --filter-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) 0;
   --filter-tag-color: var(--text-primary);
   --filter-tag-border-radius: var(--spacing-sm);
   --filter-tag-border-color: var(--border-primary);

package/lib/components/Footer/FooterColumn.js

@@ -10,6 +10,7 @@ const Link_1 = require("../../mocks/Link");
 const hooks_1 = require("../../mocks/hooks");
 const Image_1 = require("../../components/Image/Image");
 const telemetry_1 = require("../../mocks/telemetry");
+const icons_1 = require("../../icons");
 function FooterColumn({ column, className }) {
     const { translate } = (0, hooks_1.useTranslate)();
     const { items = [] } = column;
@@ -23,7 +24,8 @@ function FooterColumn({ column, className }) {
             return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label, iconsOnly: iconsOnly, onClick: () => telemetry_1.telemetry.send('footer_item_clicked', {}) },
                 columnItem.icon || columnItem.srcSet ? (react_1.default.createElement(exports.FooterLinkIcon, null,
                     react_1.default.createElement(Image_1.Image, { src: columnItem.icon, srcSet: columnItem.srcSet }))) : null,
-                !iconsOnly && translate(columnItem.labelTranslationKey, columnItem.label)));
+                !iconsOnly && translate(columnItem.labelTranslationKey, columnItem.label),
+                columnItem.external ? react_1.default.createElement(icons_1.ExternalIcon, null) : null));
         }))));
 }
 exports.FooterColumn = FooterColumn;

package/lib/components/Markdown/MarkdownLayout.d.ts

@@ -6,8 +6,6 @@ type MarkdownLayoutProps = {
     feedback: React.ReactNode;
     editPage?: {
         to: string;
-        text: string;
-        icon?: string;
     };
     /** String in ISO format */
     lastModified?: string | null;

package/lib/components/Markdown/MarkdownLayout.js

@@ -12,14 +12,9 @@ const PageNavigation_1 = require("../../components/PageNavigation/PageNavigation
 const EditPageButton_1 = require("../../components/EditPageButton");
 const LastUpdated_1 = require("../../components/LastUpdated/LastUpdated");
 const hooks_1 = require("../../hooks");
-const hooks_2 = require("../../mocks/hooks");
 const Breadcrumbs_1 = require("../../components/Breadcrumbs");
 function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, lastModified, nextPage, prevPage, className, }) {
     const { markdown } = (0, hooks_1.useThemeConfig)();
-    const { translate } = (0, hooks_2.useTranslate)();
-    const translationKeys = {
-        text: 'theme.markdown.editPage.text',
-    };
     const { editPage: themeEditPage } = markdown || {};
     const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
     return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout", className: className },
@@ -27,7 +22,7 @@ function MarkdownLayout({ tableOfContent, markdownWrapper, feedback, editPage, l
             react_1.default.createElement(Breadcrumbs, null),
             react_1.default.createElement(LayoutTop, null,
                 lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
-                mergedConf && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: translate(translationKeys.text, mergedConf.text), to: mergedConf.to, icon: mergedConf.icon, "data-translation-key": translationKeys.text }))),
+                mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to })),
             markdownWrapper,
             react_1.default.createElement(LayoutBottom, null, feedback),
             react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })),

package/lib/components/Menu/MenuItem.js

@@ -19,7 +19,7 @@ function MenuItem({ item, className }) {
             react_1.default.createElement(Label, { active: item.active },
                 item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
                 translate(item.labelTranslationKey, item.label),
-                item.external ? react_1.default.createElement(ExternalIcon_1.ExternalIcon, { dataComponentName: "Sidebar/ExternalIcon" }) : null)),
+                item.external ? react_1.default.createElement(ExternalIcon_1.ExternalIcon, null) : null)),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
 exports.MenuItem = MenuItem;

package/lib/components/Menu/styledVariables.js

@@ -28,7 +28,7 @@ exports.mobileMenu = (0, styled_components_1.css) `
   --mobile-menu-line-height: var(--line-height-base); // @presenter LineHeight
   --mobile-menu-padding-top: var(--spacing-sm); // @presenter Spacing
   --mobile-menu-items-margin-top: var(--spacing-xxs); // @presenter Spacing
-  --mobile-menu-burger-button-margin: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-burger-button-margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0; // @presenter Spacing
   --mobile-menu-background: var(--bg-base); // @presenter Color
   --mobile-menu-profile-background: var(--bg-base); // @presenter Color
   --mobile-menu-profile-border-color: var(--border-secondary); // @presenter Color

package/lib/components/Navbar/Navbar.js

@@ -38,7 +38,7 @@ const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Search_1 = require("../../components/Search/Search");
 const AuthUserProfile_1 = require("../../components/Profile/AuthUserProfile");
 const hooks_1 = require("../../mocks/hooks");
-const LanguagePicker_1 = require("../../I18n/LanguagePicker");
+const LanguagePicker_1 = require("../../i18n/LanguagePicker");
 const Product_1 = require("../../components/Product");
 const BurgerButton_1 = require("../../components/Navbar/BurgerButton");
 const EmptyNavbarHack = (0, styled_components_1.createGlobalStyle) `
@@ -124,7 +124,7 @@ exports.NavbarContainer = styled_components_1.default.nav `
   position: sticky;
   top: 0;
   z-index: var(--z-index-raised);
-  padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal);
+  padding: 0;
   background: var(--navbar-background-color);
   font-family: var(--navbar-font-family);
 
@@ -139,13 +139,21 @@ exports.NavbarContainer = styled_components_1.default.nav `
       margin: 0;
     }
   }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    padding: var(--navbar-padding);
+  }
 `;
 exports.NavbarRow = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 0 auto;
-  width: 100%;
+  width: 90%;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 100%;
+  }
 
   gap: var(--navbar-menu-items-gap);
   max-width: var(--navbar-container-max-width);

package/lib/components/Navbar/NavbarItem.js

@@ -36,6 +36,7 @@ const hooks_1 = require("../../mocks/hooks");
 const utils_2 = require("../../utils");
 const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
+const icons_1 = require("../../icons");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { translate } = (0, hooks_1.useTranslate)();
@@ -47,7 +48,8 @@ function NavbarItem({ navItem, className }) {
         return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'link' }) },
             react_1.default.createElement(exports.NavbarLink, { to: item.link, external: item.external, target: item.target, active: isActive },
                 item.icon ? react_1.default.createElement(exports.NavbarIcon, { url: item.icon }) : null,
-                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
+                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)),
+                item.external ? react_1.default.createElement(icons_1.ExternalIcon, null) : null)));
     }
     if (navItem.items) {
         const item = navItem;
@@ -56,7 +58,8 @@ function NavbarItem({ navItem, className }) {
         return (react_1.default.createElement(exports.NavbarMenuItemDropdown, { items: groupItemsComponents, triggerEvent: "hover" },
             react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className, onClick: () => telemetry_1.telemetry.send('navbar_menu_item_clicked', { type: 'group' }) },
                 react_1.default.createElement(exports.NavbarIcon, { url: item.icon }),
-                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)))));
+                react_1.default.createElement(NavbarLabel, null, translate(item.labelTranslationKey, item.label)),
+                item.external ? react_1.default.createElement(icons_1.ExternalIcon, null) : null)));
     }
     return null;
 }
@@ -72,6 +75,8 @@ exports.NavbarMenuItemDropdown = (0, styled_components_1.default)(Dropdown_1.Dro
   }
 `;
 exports.NavbarLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: flex;
+  align-items: center;
   color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) => active ? 'var(--navbar-item-active-text-decoration)' : 'none'};
 `;

package/lib/components/Navbar/styledVariables.js

@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.navbar = void 0;
 const styled_components_1 = require("styled-components");
 exports.navbar = (0, styled_components_1.css) `
-  --navbar-background-color: var(--bg-raised); // @presenter Color
+  --navbar-background-color: var(--bg-base); // @presenter Color
   --navbar-border-color: var(--border-secondary);
   --navbar-border: 1px solid var(--navbar-border-color);
 
   --navbar-text-color: var(--text-secondary); // @presenter Color
   --navbar-height: 64px; // @presenter Spacing
   --navbar-font-size: var(--font-size-base);
-  --navbar-padding-horizontal: var(--spacing-xl); // @presenter Spacing
-  --navbar-padding-vertical: 0;
+  --navbar-padding: 0 var(--spacing-xl); // @presenter Spacing
   --navbar-font-family: var(--font-family-base);
   --navbar-container-max-width: 100%;
 

package/lib/components/PageNavigation/NextButton.js

@@ -43,7 +43,7 @@ function NextButton({ nextPage, className }) {
     const defaultText = (((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next to {label}').replace('{label}', nextPageText);
     const translationKey = 'theme.page.nextButton';
     const text = translate(translationKey, { label: nextPageText, defaultValue: defaultText });
-    return (React.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink", "data-translation-key": translationKey, extraClass: className }, text));
+    return (React.createElement(StyledButton, { size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink", "data-translation-key": translationKey, extraClass: className }, text));
 }
 exports.NextButton = NextButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/PageNavigation/PreviousButton.js

@@ -23,7 +23,7 @@ function PreviousButton({ prevPage, className }) {
         label: prevPageText,
         defaultValue: defaultText,
     });
-    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink", "data-translation-key": translationKey, extraClass: className }, text));
+    return (react_1.default.createElement(StyledButton, { size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink", "data-translation-key": translationKey, extraClass: className }, text));
 }
 exports.PreviousButton = PreviousButton;
 const StyledButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/Product/ProductPicker.js

@@ -39,6 +39,11 @@ const ProductSelect = (0, styled_components_1.default)(Select_1.Select).attrs(()
         'data-component-name': 'Product/ProductPicker',
     },
 })) `
+  --select-list-item-active-background-color: var(
+    --product-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(--product-picker-list-item-hover-background-color);
+
   display: none;
   font-size: var(--product-picker-font-size);
   font-weight: var(--product-picker-font-weight);
@@ -73,10 +78,6 @@ const ProductSelect = (0, styled_components_1.default)(Select_1.Select).attrs(()
       padding: var(--product-picker-list-item-vertical-padding)
         var(--product-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--product-picker-list-item-active-background-color);
-    }
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/lib/components/Product/styledVariables.js

@@ -37,5 +37,6 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --product-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --product-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --product-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
 `;
 //# sourceMappingURL=styledVariables.js.map

package/lib/components/Select/Select.js

@@ -98,7 +98,6 @@ exports.SelectList = styled_components_1.default.ul `
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
-  width: 100%;
   max-width: var(--select-list-max-width);
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);

package/lib/components/Select/styledVariables.js

@@ -26,7 +26,7 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
   --select-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
-  --select-list-item-active-background-color: var(--color-primary-bg); // @presenter Color
+  --select-list-item-active-background-color: var(--bg-overlay); // @presenter Color
   --select-list-item-hover-background-color: var(--bg-raised); // @presenter Color
 
   // @tokens End

package/lib/components/Sidebar/HeaderWrapper.js

@@ -11,6 +11,6 @@ exports.HeaderWrapper = styled_components_1.default.div.attrs(({ className }) =>
 })) `
   margin: var(--sidebar-offset-top) 0 0 0;
   padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
-  border-bottom: solid 1px var(--border-secondary);
+  border-bottom: solid 1px var(--border-primary);
 `;
 //# sourceMappingURL=HeaderWrapper.js.map

package/lib/components/Sidebar/VersionPicker.js

@@ -32,6 +32,7 @@ exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(
 
   ${Select_1.SelectList} {
     right: 0;
+    width: 100%;
     min-width: var(--version-picker-list-min-width);
     max-width: var(--version-picker-list-max-width);
     padding: var(--version-picker-list-padding);

package/lib/components/TableOfContent/TableOfContent.js

@@ -88,6 +88,8 @@ const MenuItem = styled_components_1.default.a `
   :hover,
   &.active {
     color: var(--toc-item-active-text-color);
+    background-color: var(--toc-item-active-background-color);
+    border-radius: var(--border-radius);
   }
 
   :empty {

package/lib/components/TableOfContent/styledVariables.js

@@ -17,7 +17,7 @@ exports.toc = (0, styled_components_1.css) `
      * @tokens TOC item typography
      */
   --toc-item-font-family: var(--font-family-base); // @presenter FontFamily
-  --toc-item-font-size: var(--font-size-base); // @presenter FontSize
+  --toc-item-font-size: var(--font-size-sm); // @presenter FontSize
 
   /**
     * @tokens TOC item
@@ -27,6 +27,7 @@ exports.toc = (0, styled_components_1.css) `
   --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --toc-item-active-text-color: var(--text-primary); // @presenter Color
   --toc-item-background-color: transparent; // @presenter Color
+  --toc-item-active-background-color: var(--bg-overlay); // @presenter Color
   --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
   --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing
   --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing

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

@@ -4,7 +4,7 @@ type ActionStatusColor = 'approved' | 'declined' | 'pending';
 type SubjectStatusColor = 'active' | 'draft' | 'deprecated';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
-type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magneta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
+type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
 interface TagProps {
     className?: string;
     children?: React.ReactNode;

package/lib/components/Tag/styledVariables.js

@@ -21,6 +21,15 @@ exports.tag = (0, styled_components_1.css) `
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
+  /**
+    * @tokens Tag size
+    */
+   
+  .tag-size-large {
+    --tag-padding: var(--tag-large-padding);
+    --tag-font-size: var(--font-size-base);
+  }
+
   /**
     * @tokens Tag typography
     */
@@ -41,11 +50,6 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag colors
     */
 
-  .tag-size-large {
-    --tag-padding: var(--tag-large-padding);
-    --tag-font-size: var(--font-size-regular);
-  }
-
   .tag-grey,
   .tag-draft,
   .tag-schema,
@@ -118,11 +122,11 @@ exports.tag = (0, styled_components_1.css) `
     --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
-  .tag-magneta,
+  .tag-magenta,
   .tag-hook {
-    --tag-color: var(--color-magneta-7); // @presenter Color
-    --tag-background-color: var(--color-magneta-1); // @presenter Color
-    --tag-border-color: var(--color-magneta-7); // @presenter Color
+    --tag-color: var(--color-magenta-7); // @presenter Color
+    --tag-background-color: var(--color-magenta-1); // @presenter Color
+    --tag-border-color: var(--color-magenta-7); // @presenter Color
   }
 
   .tag-lime {