@redocly/theme 0.18.3-patch.0 → 0.18.3

package/lib/components/Markdown/MarkdownWrapper.js

@@ -167,7 +167,7 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className })
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--text-secondary);
+  color: var(--text-color);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
@@ -223,7 +223,7 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className })
     margin: 1.125em 0;
 
     summary {
-      color: var(--text-secondary);
+      color: var(--text-color);
       font-weight: var(--font-weight-regular);
       outline: 0;
       padding: 0;
@@ -333,6 +333,8 @@ exports.MarkdownWrapper = styled_components_1.default.main.attrs(({ className })
     padding: calc(var(--spacing-unit) * 2);
     overflow-x: auto;
     line-height: normal;
+    border-radius: var(--code-block-border-radius);
+    border: 1px solid var(--code-block-border-color);
 
     code {
       background-color: transparent;

package/lib/components/Markdown/Mermaid.js

@@ -13,7 +13,7 @@ function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash
 exports.Mermaid = Mermaid;
 const Wrapper = styled_components_1.default.div `
   .mermaid > svg {
-    font-size: var(--font-size-base) !important;
+    font-size: 14px !important;
     max-width: 100%;
   }
 `;

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

@@ -7,4 +7,3 @@ export * from '../../components/Markdown/MarkdownWrapper';
 export * from '../../components/Markdown/Mermaid';
 export * from '../../components/Markdown/PageWrapper';
 export * from '../../components/Markdown/Sup';
-export * from '../../components/Markdown/styledVariables';

package/lib/components/Markdown/index.js

@@ -23,5 +23,4 @@ __exportStar(require("../../components/Markdown/MarkdownWrapper"), exports);
 __exportStar(require("../../components/Markdown/Mermaid"), exports);
 __exportStar(require("../../components/Markdown/PageWrapper"), exports);
 __exportStar(require("../../components/Markdown/Sup"), exports);
-__exportStar(require("../../components/Markdown/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Menu/Menu.js

@@ -19,10 +19,12 @@ exports.Menu = Menu;
 exports.ThemeMenu = styled_components_1.default.ul.attrs(() => ({
     'data-component-name': 'Menu/Menu',
 })) `
-  padding: var(--menu-padding);
-  margin: var(--menu-margin);
-  list-style: var(--menu-list-style);
-  color: var(--menu-text-color);
-  position: relative;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  color: var(--sidebar-item-text-color);
+  ${({ theme }) => theme.mediaQueries.medium} {
+    position: relative;
+  }
 `;
 //# sourceMappingURL=Menu.js.map

package/lib/components/Menu/MenuGroup.js

@@ -55,10 +55,10 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
     }, [isExpanded]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
-            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded },
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none' },
+                !!item.items.length && react_1.default.createElement(MenuGroupArrow, { direction: isExpanded ? 'down' : 'right' }),
                 item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
-                translate(item.labelTranslationKey, item.label),
-                !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
+                translate(item.labelTranslationKey, item.label))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
@@ -81,17 +81,12 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   text-transform: var(--sidebar-text-group-transform);
   color: var(--sidebar-item-group-text-color);
   background: var(--sidebar-item-group-background-color);
-  display: flex;
-  justify-content: space-between;
-
-  ${({ active }) => active
+  ${(props) => props.active
     ? `color: var(--sidebar-item-group-active-text-color);
         background-color: var(--sidebar-item-group-active-background-color);`
     : null};
-
-  ${({ expanded }) => expanded &&
-    `
-    color: var(--sidebar-item-group-active-text-color);
-  `}
+`;
+const MenuGroupArrow = (0, styled_components_1.default)(ArrowIcon_1.ArrowIcon) `
+  margin-right: calc(var(--sidebar-spacing-unit) / 2);
 `;
 //# sourceMappingURL=MenuGroup.js.map

package/lib/components/Menu/MenuItemLabel.js

@@ -10,23 +10,28 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(({ className }) =>
     className,
 })) `
   display: flex;
-  align-items: var(--menu-item-label-align-items);
+  align-items: center;
   cursor: pointer;
-  transition: var(--menu-item-label-transition);
-  word-break: var(--menu-item-label-word-break);
+  transition: background-color 0.3s, color 0.3s;
+  word-break: break-word;
+  margin-bottom: 1px;
 
   background-color: var(--sidebar-item-background-color);
   font-family: var(--sidebar-item-font-family);
   font-size: var(--sidebar-item-font-size);
-  font-weight: var(--sidebar-item-font-weight);
-  margin: var(--menu-item-label-margin);
-  padding: var(--menu-item-label-padding);
+  font-weight: var(--font-weight-regular);
+  margin-left: var(--sidebar-offset-left);
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  padding-left: calc(
+    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +
+      var(--sidebar-spacing-unit) * 0.5
+  );
   border-radius: var(--sidebar-item-border-radius);
 
   ${({ active, theme }) => active &&
     `
     color: var(--mobile-menu-item-active-text-color);
-    background-color: var(--mobile-menu-item-active-background-color);
+    background-color: var(--mobile-menu-item-active-color);
     
     ${theme.mediaQueries.medium} {
       color: var(--sidebar-item-active-color);
@@ -39,6 +44,7 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(({ className }) =>
 
     ${({ theme }) => theme.mediaQueries.medium} {
       color: var(--sidebar-item-hover-color);
+      background-color: var(--sidebar-item-hover-background-color);
     }
   }
 

package/lib/components/Menu/MenuLinkItem.js

@@ -7,8 +7,9 @@ exports.MenuLinkItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const MenuLink_1 = require("../../components/Menu/MenuLink");
+const telemetry_1 = require("../../mocks/telemetry");
 function MenuLinkItem({ item, children, className, }) {
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className, onClick: () => telemetry_1.telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type }) }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
 }
 exports.MenuLinkItem = MenuLinkItem;
 const Wrapper = styled_components_1.default.span ``;

package/lib/components/Menu/MobileMenu.js

@@ -32,7 +32,7 @@ const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../../components/Menu/constants");
 const index_1 = require("../../components/Menu/index");
-const MobileUserProfile_1 = require("../../components/Profile/MobileUserProfile");
+const MobileUserProfile_1 = require("../../components/Navbar/MobileUserProfile");
 const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
 const Product_1 = require("../../components/Product/Product");
@@ -69,17 +69,17 @@ function MobileMenu({ className }) {
 }
 exports.MobileMenu = MobileMenu;
 const MobileMenuWrapper = styled_components_1.default.div `
-  height: var(--mobile-menu-wrapper-height);
-  width: var(--mobile-menu-wrapper-width);
+  height: calc(100vh - var(--navbar-height));
+  width: 100%;
   position: fixed;
-  z-index: var(--mobile-menu-wrapper-z-index);
-  left: var(--mobile-menu-wrapper-left);
-  top: var(--mobile-menu-wrapper-top);
+  z-index: var(--z-index-raised);
+  left: 0;
+  top: var(--navbar-height);
   overflow-x: hidden;
-  transition: var(--mobile-menu-wrapper-transition);
+  transition: 0.5s;
   display: flex;
   flex-direction: column;
-  background: var(--mobile-menu-wrapper-background);
+  background: var(--mobile-menu-background);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
@@ -97,22 +97,26 @@ const ScrollableArea = styled_components_1.default.div `
   flex-grow: 1;
 `;
 const MenuWrapper = styled_components_1.default.div `
-  margin: var(--mobile-menu-margin);
-  line-height: var(--mobile-menu-line-height);
+  margin: 0 var(--mobile-menu-horizontal-margin);
+  margin-top: var(--mobile-menu-items-margin-top);
+  line-height: 22px;
   background: var(--mobile-menu-background);
 
   ${index_1.MenuItemLabel} {
-    margin: var(--mobile-menu-item-margin);
+    margin: 0;
     border-radius: var(--mobile-menu-item-radius);
+    padding-left: var(--sidebar-item-padding-horizontal);
   }
 `;
 exports.ControlButton = styled_components_1.default.li `
   display: inline-block;
-  padding: var(--mobile-menu-control-button-padding);
-  margin: var(--mobile-menu-control-button-margin);
-  text-align: var(--mobile-menu-control-button-text-align);
+  padding: var(--mobile-menu-control-button-padding-vertical)
+    var(--mobile-menu-control-button-padding-horizontal);
+  margin: var(--mobile-menu-control-button-margin-vertical)
+    var(--mobile-menu-control-button-margin-horizontal);
+  text-align: center;
   font-size: var(--mobile-menu-control-button-font-size);
-  line-height: var(--mobile-menu-control-button-line-height);
+  line-height: 22px;
   font-weight: var(--mobile-menu-control-button-weight);
   color: var(--mobile-menu-control-button-color);
   cursor: pointer;
@@ -135,10 +139,11 @@ const ControlButtonLabel = styled_components_1.default.span `
   ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
 `;
 const ProductNameWrapper = styled_components_1.default.div `
-  color: var(--menu-product-name-color);
-  border-radius: var(--menu-product-name-border-radius);
-  border: 1px solid var(--menu-product-name-border-color);
-  padding: var(--menu-product-name-padding);
-  margin: var(--menu-product-name-margin);
+  color: var(--mobile-menu-item-text-color);
+  border-radius: var(--mobile-menu-item-radius);
+  padding-left: var(--sidebar-item-padding-horizontal);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 8px 7px;
+  margin: 12px 8px 0 8px;
 `;
 //# sourceMappingURL=MobileMenu.js.map

package/lib/components/Menu/MobileMenuGroup.js

@@ -44,7 +44,7 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   ${({ active }) => active &&
     `
     color: var(--mobile-menu-item-active-text-color);
-    background-color: var(--mobile-menu-item-active-background-color);
+    background-color: var(--mobile-menu-item-active-color);
   `}
 
   ${({ expanded }) => expanded &&

package/lib/components/Menu/index.d.ts

@@ -6,4 +6,3 @@ export * from '../../components/Menu/MenuItemLabel';
 export * from '../../components/Menu/MenuLink';
 export * from '../../components/Menu/MenuLinkItem';
 export * from '../../components/Menu/MobileMenuGroup';
-export * from '../../components/Menu/styledVariables';

package/lib/components/Menu/index.js

@@ -22,5 +22,4 @@ __exportStar(require("../../components/Menu/MenuItemLabel"), exports);
 __exportStar(require("../../components/Menu/MenuLink"), exports);
 __exportStar(require("../../components/Menu/MenuLinkItem"), exports);
 __exportStar(require("../../components/Menu/MobileMenuGroup"), exports);
-__exportStar(require("../../components/Menu/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/{Profile → Navbar}/MobileUserProfile.js

@@ -8,9 +8,10 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useProfileProps_1 = require("../../mocks/Profile/useProfileProps");
 const LogoutIcon_1 = require("../../icons/LogoutIcon");
+const Profile_1 = require("../../components/Profile/Profile");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
-const UserProfileData_1 = require("../../components/Profile/UserProfileData");
+const telemetry_1 = require("../../mocks/telemetry");
 function MobileUserProfile() {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { userData, handleLogout, loginUrl } = (0, useProfileProps_1.useProfileProps)();
@@ -20,9 +21,15 @@ function MobileUserProfile() {
     };
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) && !loginUrl)
         return null;
-    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn" }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(UserProfileData_1.UserProfileData, { userData: userData }),
-        react_1.default.createElement(LogoutButton, { onClick: () => handleLogout() },
+    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn", onClick: () => telemetry_1.telemetry.send('login_button_clicked', {}) }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(UserDataWrapper, null,
+            react_1.default.createElement(ProfilePicture, null,
+                react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture })),
+            react_1.default.createElement(UserName, null, userData.name)),
+        react_1.default.createElement(LogoutButton, { onClick: () => {
+                handleLogout();
+                telemetry_1.telemetry.send('logout_menu_item_clicked', {});
+            } },
             react_1.default.createElement(LogoutIcon_1.LogoutIcon, null))))));
 }
 exports.MobileUserProfile = MobileUserProfile;
@@ -33,7 +40,7 @@ const LoginButton = styled_components_1.default.a `
   margin: 0;
   padding: 5px 0;
   color: var(--mobile-menu-login-button-color);
-  font-size: var(--font-size-base);
+  font-size: 14px;
   text-align: center;
   line-height: 22px;
   cursor: pointer;
@@ -49,6 +56,22 @@ const MobileProfileWrapper = styled_components_1.default.div `
   border-top: 1px solid var(--mobile-menu-profile-border-color);
   background: var(--mobile-menu-profile-background);
 `;
+const UserDataWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+const ProfilePicture = styled_components_1.default.div `
+  margin-right: 16px;
+
+  ${Profile_1.AvatarWrapper} {
+    margin: 0;
+  }
+
+  ${Profile_1.ProfileWrapper} {
+    padding: 0;
+  }
+`;
+const UserName = styled_components_1.default.div ``;
 const LogoutButton = styled_components_1.default.div `
   cursor: pointer;
   user-select: none;

package/lib/components/Navbar/Navbar.js

@@ -88,11 +88,11 @@ function NavbarPresentational(props) {
             react_1.default.createElement(Product_1.ProductPicker, null),
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
             hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
-            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, onlyIcon: true }),
-            react_1.default.createElement(ColorModeSwitcherWrapper, { isVisible: isOpen },
-                react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)),
+            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage }),
             hideUserProfile ? null : (react_1.default.createElement(AuthUserProfileWrapper, null,
-                react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null))))));
+                react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null))),
+            react_1.default.createElement(ColorModeSwitcherWrapper, { isVisible: isOpen },
+                react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)))));
 }
 exports.NavbarPresentational = NavbarPresentational;
 const ColorModeSwitcherWrapper = styled_components_1.default.div `
@@ -110,8 +110,6 @@ const AuthUserProfileWrapper = styled_components_1.default.div `
   }
 `;
 exports.NavbarContainer = styled_components_1.default.nav `
-  border: var(--navbar-border);
-
   --text-color: var(--navbar-text-color);
 
   height: var(--navbar-height);
@@ -120,13 +118,17 @@ exports.NavbarContainer = styled_components_1.default.nav `
   align-items: center;
   flex-shrink: 0;
 
-  font-size: var(--navbar-font-size);
+  font-size: 0.875rem;
   position: sticky;
   top: 0;
   z-index: var(--z-index-raised);
-  padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal);
+  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   background: var(--navbar-background-color);
-  font-family: var(--navbar-font-family);
+  font-family: var(--navbar-item-font-family);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    font-size: 1rem;
+  }
 
   ${({ theme }) => theme.mediaQueries.print} {
     background: transparent;
@@ -147,7 +149,6 @@ exports.NavbarRow = styled_components_1.default.div `
   margin: 0 auto;
   width: 100%;
 
-  gap: var(--navbar-menu-items-gap);
   max-width: var(--navbar-container-max-width);
 `;
 //# sourceMappingURL=Navbar.js.map

package/lib/components/Navbar/NavbarItem.d.ts

@@ -6,7 +6,7 @@ export interface NavbarItemProps {
     className?: string;
 }
 export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
+export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
     dataAttributes: {
         'data-component-name': string;
     };

package/lib/components/Navbar/NavbarItem.js

@@ -34,6 +34,7 @@ const Link_1 = require("../../mocks/Link");
 const utils_1 = require("../../mocks/utils");
 const hooks_1 = require("../../mocks/hooks");
 const utils_2 = require("../../utils");
+const telemetry_1 = require("../../mocks/telemetry");
 const Dropdown_1 = require("../../components/Dropdown");
 function NavbarItem({ navItem, className }) {
     const { pathname } = (0, react_router_dom_1.useLocation)();
@@ -43,7 +44,7 @@ function NavbarItem({ navItem, className }) {
         const item = navItem;
         const isActive = pathname ===
             (0, utils_2.withPathPrefix)((0, utils_1.getPathnameForLocale)(item.link, defaultLocale, currentLocale, locales));
-        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: 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)))));
@@ -53,7 +54,7 @@ function NavbarItem({ navItem, className }) {
         const groupItems = item.items;
         const groupItemsComponents = groupItems.map((item, index) => (react_1.default.createElement(Link_1.Link, { key: `${item.label}_${index}`, to: item.link }, translate(item.labelTranslationKey, item.label))));
         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 },
+            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)))));
     }
@@ -78,18 +79,16 @@ exports.NavbarMenuItem = styled_components_1.default.li `
   display: inline-block;
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   text-align: center;
-  line-height: var(--navbar-item-line-height);
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
   border-radius: var(--navbar-item-border-radius);
   font-weight: var(--navbar-item-font-weight);
-
   background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
   color: ${({ active }) => active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   &:hover {
     color: var(--navbar-item-hover-text-color);
     text-decoration: var(--navbar-item-hover-text-decoration);
-    background: ${({ active }) => active
-    ? 'var(--navbar-item-active-background-color)'
-    : 'var(--navbar-item-hover-background-color)'};
+    background: var(--navbar-item-hover-background-color);
     ${exports.NavbarLink} {
       color: var(--navbar-item-hover-text-color);
       text-decoration: var(--navbar-item-hover-text-decoration);

package/lib/components/Navbar/NavbarMenu.js

@@ -23,9 +23,9 @@ const NavItemsContainer = styled_components_1.default.ul `
   display: none;
   flex-wrap: nowrap;
   align-items: center;
-  justify-content: var(--navbar-menu-justify-content);
+  justify-content: flex-end;
   flex: 1;
-  gap: var(--navbar-menu-items-gap);
+  gap: var(--navbar-item-gap);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     display: flex;

package/lib/components/Navbar/index.d.ts

@@ -1,4 +1,3 @@
 export * from '../../components/Navbar/Navbar';
 export * from '../../components/Navbar/NavbarItem';
 export * from '../../components/Navbar/NavbarMenu';
-export * from '../../components/Navbar/styledVariables';

package/lib/components/Navbar/index.js

@@ -17,5 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Navbar/Navbar"), exports);
 __exportStar(require("../../components/Navbar/NavbarItem"), exports);
 __exportStar(require("../../components/Navbar/NavbarMenu"), exports);
-__exportStar(require("../../components/Navbar/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/NavbarLogo/NavbarLogo.d.ts

@@ -1,10 +1,7 @@
 /// <reference types="react" />
 import type { LogoConfig } from '../../types/portal';
 export type NavbarLogoProps = {
-    logo: Pick<LogoConfig, 'image' | 'link' | 'altText' | 'srcSet'>;
+    logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
     className?: string;
 };
 export declare function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null;
-export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;

package/lib/components/NavbarLogo/NavbarLogo.js

@@ -3,30 +3,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LogoContainer = exports.NavbarLogo = void 0;
+exports.NavbarLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
-const Image_1 = require("../../components/Image/Image");
+const telemetry_1 = require("../../mocks/telemetry");
 function NavbarLogo({ logo, className }) {
-    if (!logo.image && !logo.srcSet) {
+    if (!logo.image) {
         return null;
     }
-    const img = (react_1.default.createElement(Image_1.Image, { className: className, src: logo.image, srcSet: logo.srcSet, alt: logo.altText }));
-    return react_1.default.createElement(exports.LogoContainer, null, logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img);
+    const img = (react_1.default.createElement(NavLogo, { className: className, src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo", onClick: () => telemetry_1.telemetry.send('logo_clicked', {}) }));
+    return logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img;
 }
 exports.NavbarLogo = NavbarLogo;
-exports.LogoContainer = styled_components_1.default.div.attrs({
-    'data-component-name': 'NavbarLogo/NavbarLogo',
-}) `
+const NavLogo = styled_components_1.default.img `
   max-width: var(--navbar-logo-max-width);
   max-height: var(--navbar-logo-max-height);
   height: var(--navbar-logo-height);
   margin: var(--navbar-logo-margin);
-
-  img {
-    max-width: 100%;
-    max-height: 100%;
-  }
 `;
 //# sourceMappingURL=NavbarLogo.js.map

package/lib/components/OpenApiDocs/DevOnboardingTryItSecurity.js

@@ -125,7 +125,7 @@ function DevOnboardingTryItSecurity(props) {
                     setAppId(value);
                     loadAppCredentials(value);
                 } }),
-            React.createElement(UseKeyButton, { disabled: (!selectedAppSecret && hasApiAccess) || appLoading, onClick: () => {
+            React.createElement(UseKeyButton, { disabled: (!selectedAppSecret && hasApiAccess) || appLoading, color: "secondary", onClick: () => {
                     if (selectedAppSecret) {
                         props.onChange(selectedAppSecret);
                     }
@@ -165,7 +165,7 @@ const FormLabel = styled_components_1.default.label `
         display: inline-block;
         content: '*';
         margin-left: 4px;
-        color: var(--color-error);
+        color: var(--color-error-500);
       }
     `}
 `;

package/lib/components/OpenApiDocs/Dropdown.js

@@ -104,7 +104,7 @@ box-sizing: border-box;
     &,
     &:hover,
     &:focus-within {
-      border: 1px solid var(--border-primary);
+      border: 1px solid var(--border-color);
       box-shadow: none;
     }
 
@@ -122,9 +122,9 @@ box-sizing: border-box;
     appearance: none;
     cursor: pointer;
 
-    color: var(--text-secondary);
+    color: var(--text-color);
     line-height: inherit;
-    font-size: var(--font-size-base);
+    font-size: 14px;
     font-family: inherit;
     padding: var(--docs-dropdown-padding);
     ${({ variant }) => (variant === 'dark' ? darkDropdownStyle : '')};

package/lib/components/OperationBadge/OperationBadge.d.ts

@@ -0,0 +1,6 @@
+export declare const OperationBadge: import("styled-components").StyledComponent<"span", any, {
+    className: `operation-type ${string}`;
+    'data-component-name': string;
+} & {
+    type: string;
+}, "className" | "data-component-name">;

package/lib/components/OperationBadge/OperationBadge.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OperationBadge = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.OperationBadge = styled_components_1.default.span.attrs((props) => ({
+    className: `operation-type ${props.type}`,
+    'data-component-name': 'OperationBadge/OperationBadge',
+})) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--badge-http-font-size);
+  font-family: var(--badge-http-font-family);
+  font-weight: var(--badge-http-font-weight);
+  line-height: var(--badge-http-line-height);
+  color: var(--badge-http-text-color);
+  background-color: var(--badge-background-color);
+  border-radius: var(--badge-http-border-radius);
+  width: 58px;
+  text-transform: uppercase;
+  text-align: center;
+  margin-right: 6px;
+
+  &.get {
+    background-color: var(--color-http-get);
+  }
+
+  &.post {
+    background-color: var(--color-http-post);
+  }
+
+  &.put {
+    background-color: var(--color-http-put);
+  }
+
+  &.options {
+    background-color: var(--color-http-options);
+  }
+
+  &.patch {
+    background-color: var(--color-http-patch);
+  }
+
+  &.delete {
+    background-color: var(--color-http-delete);
+  }
+
+  &.basic,
+  &.schema {
+    background-color: var(--color-http-basic);
+  }
+
+  &.link {
+    background-color: var(--color-http-link);
+  }
+
+  &.head {
+    background-color: var(--color-http-head);
+  }
+
+  &.hook {
+    background-color: var(--color-http-hook);
+  }
+`;
+//# sourceMappingURL=OperationBadge.js.map