@redocly/theme 0.18.3-patch.8 → 0.18.4

package/src/components/Footer/FooterCopyright.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { LanguagePicker } from '@theme';
 
-import { useI18n, useTranslate } from '@portal/hooks';
+import { useTranslate } from '@portal/hooks';
 
 interface FooterCopyrightProps {
   copyrightText: string;
@@ -14,8 +13,6 @@ export function FooterCopyright({
   className,
 }: FooterCopyrightProps): JSX.Element | null {
   const { translate } = useTranslate();
-  const { changeLanguage } = useI18n();
-
   const translationKeys = {
     copyrightText: 'theme.footer.copyrightText',
   };
@@ -25,24 +22,21 @@ export function FooterCopyright({
       data-component-name="Footer/FooterCopyright"
       data-translation-key={translationKeys.copyrightText}
     >
-      <Label>{translate(translationKeys.copyrightText, copyrightText)}</Label>
-      <LanguagePicker onChangeLanguage={changeLanguage} placement="top" alignment="end" />
+      {translate(translationKeys.copyrightText, copyrightText)}
     </Wrapper>
   ) : null;
 }
 
 const Wrapper = styled.section`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: var(--footer-copyright-font-size);
-  margin-top: var(--footer-copyright-margin-top);
+  justify-content: center;
+  font-size: 0.875em;
+  padding: 1.5em 3em;
+  font-weight: var(--font-weight-bold);
   background-color: var(--footer-background-color);
   color: var(--footer-text-color);
-  text-align: var(--footer-copyright-text-align);
+  text-align: center;
   span {
     max-width: var(--footer-container-max-width);
   }
 `;
-
-const Label = styled.div``;

package/src/components/Footer/index.ts

@@ -2,4 +2,3 @@ export * from '@theme/components/Footer/Footer';
 export * from '@theme/components/Footer/FooterColumn';
 export * from '@theme/components/Footer/FooterColumns';
 export * from '@theme/components/Footer/FooterCopyright';
-export * from '@theme/components/Footer/styledVariables';

package/src/components/JsonViewer/JsonViewer.tsx

@@ -108,7 +108,7 @@ export const JsonViewer = styled(Json).attrs(() => ({
 }))<JsonProps>`
   .redoc-json code {
     background-color: var(--panel-samples-code-block-background-color);
-    color: var(--text-secondary);
+    color: var(--text-color-inverse);
     padding: inherit;
     border: none;
   }
@@ -175,7 +175,7 @@ export const JsonViewer = styled(Json).attrs(() => ({
       background-color: transparent;
       border: 0;
       padding: 1px;
-      color: var(--text-secondary);
+      color: #fff;
       width: var(--size);
       height: var(--size);
       margin-left: calc((var(--size) + var(--margin-right)) * -1);

package/src/components/LastUpdated/LastUpdated.tsx

@@ -51,7 +51,8 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
-      {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
+      {text}
+      {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>
   );

package/src/components/Markdown/Admonition.tsx

@@ -31,20 +31,18 @@ export function Admonition({
       data-hash={dataHash}
     >
       <AlertIcon type={type} />
-      <TextContainer>
-        {name ? <Heading type={type}>{name}</Heading> : null}
-        <Content>{children}</Content>
-      </TextContainer>
+      {name ? <Heading type={type}>{name}</Heading> : null}
+      <Content>{children}</Content>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div<AdmonitionTypeProps>`
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-base);
+  position: relative;
+  align-items: center;
   margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
   padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
+  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -60,13 +58,10 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   `}
 `;
 
-const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-unit);
-`;
+const Heading = styled.h5<AdmonitionTypeProps>`
+  display: block;
+  margin: 0 0 10px;
 
-const Heading = styled.div<AdmonitionTypeProps>`
   letter-spacing: var(--admonition-heading-letter-spacing);
   color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 

package/src/components/Markdown/MarkdownWrapper.tsx

@@ -149,7 +149,7 @@ export const MarkdownWrapper = styled.main.attrs<{
   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);
@@ -207,7 +207,7 @@ export const MarkdownWrapper = styled.main.attrs<{
     margin: 1.125em 0;
 
     summary {
-      color: var(--text-secondary);
+      color: var(--text-color);
       font-weight: var(--font-weight-regular);
       outline: 0;
       padding: 0;
@@ -317,6 +317,8 @@ export const MarkdownWrapper = styled.main.attrs<{
     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/src/components/Markdown/Mermaid.tsx

@@ -28,11 +28,8 @@ export function Mermaid({
 }
 
 const Wrapper = styled.div`
-  background-color: var(--mermaid-background-color);
-  border-radius: var(--mermaid-border-radius);
-
   .mermaid > svg {
-    font-size: var(--font-size-base) !important;
+    font-size: 14px !important;
     max-width: 100%;
   }
 `;

package/src/components/Markdown/index.ts

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

package/src/components/Menu/Menu.tsx

@@ -39,9 +39,11 @@ export function Menu({ depth = 0, items, className, isMobile }: MenuListProps) {
 export const ThemeMenu = styled.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;
+  }
 `;

package/src/components/Menu/MenuGroup.tsx

@@ -49,13 +49,10 @@ export function MenuGroup({
           isAlwaysExpanded={item.expanded === 'always'}
           active={item.active}
           role={!item.link ? 'link' : 'none'}
-          expanded={isExpanded}
         >
+          {!!item.items.length && <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />}
           {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
           {translate(item.labelTranslationKey, item.label)}
-          {!!item.items.length && (
-            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
-          )}
         </MenuGroupLabel>
       </MenuLinkItem>
 
@@ -79,7 +76,7 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
 `;
 
-const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expanded?: boolean }>`
+const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
   padding-left: var(--sidebar-item-padding-horizontal);
   cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
   font-family: var(--sidebar-item-group-font-family);
@@ -87,18 +84,13 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expan
   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 = styled(ArrowIcon)`
+  margin-right: calc(var(--sidebar-spacing-unit) / 2);
 `;

package/src/components/Menu/MenuItemLabel.tsx

@@ -5,25 +5,29 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
   className,
 }))<{ active?: boolean }>`
   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);
-  line-height: var(--sidebar-item-line-height);
-  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);
@@ -36,7 +40,7 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
 
     ${({ theme }) => theme.mediaQueries.medium} {
       color: var(--sidebar-item-hover-color);
-      background: var(--sidebar-item-hover-background-color);
+      background-color: var(--sidebar-item-hover-background-color);
     }
   }
 

package/src/components/Menu/MobileMenu.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import type { MobileMenuProps } from '@theme/components/Menu/types';
 import { MenuType } from '@theme/components/Menu/constants';
 import { Menu, MenuItemLabel } from '@theme/components/Menu/index';
-import { MobileUserProfile } from '@theme/components/Profile/MobileUserProfile';
+import { MobileUserProfile } from '@theme/components/Navbar/MobileUserProfile';
 import { useCurrentProduct } from '@portal/hooks';
 import { ArrowIcon } from '@theme/icons';
 import { Product } from '@theme/components/Product/Product';
@@ -71,17 +71,17 @@ export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
   );
 }
 const MobileMenuWrapper = styled.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;
@@ -102,23 +102,27 @@ const ScrollableArea = styled.div`
 `;
 
 const MenuWrapper = styled.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);
 
   ${MenuItemLabel} {
-    margin: var(--mobile-menu-item-margin);
+    margin: 0;
     border-radius: var(--mobile-menu-item-radius);
+    padding-left: var(--sidebar-item-padding-horizontal);
   }
 `;
 
 export const ControlButton = styled.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;
@@ -143,9 +147,10 @@ const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
 `;
 
 const ProductNameWrapper = styled.div`
-  color: var(--mobile-menu-product-name-color);
-  border-radius: var(--mobile-menu-product-name-border-radius);
-  border: var(--mobile-menu-product-name-border);
-  padding: var(--mobile-menu-product-name-padding);
-  margin: var(--mobile-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;
 `;

package/src/components/Menu/MobileMenuGroup.tsx

@@ -66,7 +66,7 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: bool
     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 }) =>

package/src/components/Menu/index.ts

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

package/src/components/{Profile → Navbar}/MobileUserProfile.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import { useProfileProps } from '@portal/Profile/useProfileProps';
 import { LogoutIcon } from '@theme/icons/LogoutIcon';
+import { AvatarWrapper, ProfileWrapper, Profile } from '@theme/components/Profile/Profile';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
-import { UserProfileData } from '@theme/components/Profile/UserProfileData';
 import { telemetry } from '@portal/telemetry';
 
 export function MobileUserProfile() {
@@ -30,7 +30,12 @@ export function MobileUserProfile() {
         </LoginButton>
       ) : (
         <>
-          <UserProfileData userData={userData} />
+          <UserDataWrapper>
+            <ProfilePicture>
+              <Profile name={userData.name} imageUrl={userData.picture} />
+            </ProfilePicture>
+            <UserName>{userData.name}</UserName>
+          </UserDataWrapper>
           <LogoutButton
             onClick={() => {
               handleLogout();
@@ -46,23 +51,16 @@ export function MobileUserProfile() {
 }
 const LoginButton = styled.a`
   background: var(--mobile-menu-login-button-background);
-  border-radius: var(--mobile-menu-login-button-border-radius);
+  border-radius: 6px;
   width: 100%;
   margin: 0;
   padding: 5px 0;
   color: var(--mobile-menu-login-button-color);
-  border: 1px solid var(--mobile-menu-login-button-border-color);
-  font-size: var(--mobile-menu-login-button-font-size);
-  font-family: var(--mobile-menu-login-button-font-family);
-  font-weight: var(--mobile-menu-login-button-font-weight);
+  font-size: 14px;
   text-align: center;
-  line-height: var(--mobile-menu-login-button-line-height);
+  line-height: 22px;
   cursor: pointer;
   text-decoration: none;
-
-  &:hover {
-    color: var(--mobile-menu-login-button-hover-color);
-  }
 `;
 
 const MobileProfileWrapper = styled.div`
@@ -76,6 +74,25 @@ const MobileProfileWrapper = styled.div`
   background: var(--mobile-menu-profile-background);
 `;
 
+const UserDataWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ProfilePicture = styled.div`
+  margin-right: 16px;
+
+  ${AvatarWrapper} {
+    margin: 0;
+  }
+
+  ${ProfileWrapper} {
+    padding: 0;
+  }
+`;
+
+const UserName = styled.div``;
+
 const LogoutButton = styled.div`
   cursor: pointer;
   user-select: none;

package/src/components/Navbar/Navbar.tsx

@@ -96,15 +96,15 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
         <ProductPicker />
         <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
         {hideSearch ? null : <Search />}
-        <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
-        <ColorModeSwitcherWrapper isVisible={isOpen}>
-          <ColorModeSwitcher />
-        </ColorModeSwitcherWrapper>
+        <LanguagePicker onChangeLanguage={changeLanguage} />
         {hideUserProfile ? null : (
           <AuthUserProfileWrapper>
             <AuthUserProfile />
           </AuthUserProfileWrapper>
         )}
+        <ColorModeSwitcherWrapper isVisible={isOpen}>
+          <ColorModeSwitcher />
+        </ColorModeSwitcherWrapper>
       </NavbarRow>
     </NavbarContainer>
   );
@@ -127,8 +127,6 @@ const AuthUserProfileWrapper = styled.div`
 `;
 
 export const NavbarContainer = styled.nav`
-  border: var(--navbar-border);
-
   --text-color: var(--navbar-text-color);
 
   height: var(--navbar-height);
@@ -137,13 +135,17 @@ export const NavbarContainer = styled.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;
@@ -165,6 +167,5 @@ export const NavbarRow = styled.div`
   margin: 0 auto;
   width: 100%;
 
-  gap: var(--navbar-menu-items-gap);
   max-width: var(--navbar-container-max-width);
 `;

package/src/components/Navbar/NavbarItem.tsx

@@ -94,26 +94,17 @@ export const NavbarMenuItem = styled.li<{ active?: boolean }>`
   display: inline-block;
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   text-align: center;
-  line-height: var(--navbar-item-line-height);
-  font-weight: var(--navbar-item-font-weight);
-
+  line-height: 1;
+  font-size: var(--navbar-item-font-size);
   border-radius: var(--navbar-item-border-radius);
-  border-bottom: ${({ active }) =>
-    active ? 'var(--navbar-item-active-bottom-border)' : 'var(--navbar-item-bottom-border)'};
-
+  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);
-    border-bottom: ${({ active }) => !active && 'var(--navbar-item-hover-bottom-border)'};
-    background: ${({ active }) =>
-      active
-        ? 'var(--navbar-item-active-background-color)'
-        : 'var(--navbar-item-hover-background-color)'};
-
+    background: var(--navbar-item-hover-background-color);
     ${NavbarLink} {
       color: var(--navbar-item-hover-text-color);
       text-decoration: var(--navbar-item-hover-text-decoration);

package/src/components/Navbar/NavbarMenu.tsx

@@ -33,9 +33,9 @@ const NavItemsContainer = styled.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/src/components/Navbar/index.ts

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

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -3,45 +3,32 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { LogoConfig } from '@theme/types/portal';
-import { Image } from '@theme/components/Image/Image';
 import { telemetry } from '@portal/telemetry';
 
 export type NavbarLogoProps = {
-  logo: Pick<LogoConfig, 'image' | 'link' | 'altText' | 'srcSet'>;
+  logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
   className?: string;
 };
 
 export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null {
-  if (!logo.image && !logo.srcSet) {
+  if (!logo.image) {
     return null;
   }
   const img = (
-    <Image className={className} src={logo.image} srcSet={logo.srcSet} alt={logo.altText} />
-  );
-
-  return (
-    <LogoContainer>
-      {logo.link ? (
-        <Link to={logo.link} onClick={() => telemetry.send('logo_clicked', {})}>
-          {img}
-        </Link>
-      ) : (
-        img
-      )}
-    </LogoContainer>
+    <NavLogo
+      className={className}
+      src={logo.image}
+      alt={logo.altText}
+      data-component-name="NavbarLogo/NavbarLogo"
+      onClick={() => telemetry.send('logo_clicked', {})}
+    />
   );
+  return logo.link ? <Link to={logo.link}>{img}</Link> : img;
 }
 
-export const LogoContainer = styled.div.attrs({
-  'data-component-name': 'NavbarLogo/NavbarLogo',
-})`
+const NavLogo = styled.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%;
-  }
 `;

package/src/components/NavbarLogo/index.ts

@@ -1,2 +1 @@
 export * from '@theme/components/NavbarLogo/NavbarLogo';
-export * from '@theme/components/NavbarLogo/styledVariables';

package/src/components/OpenApiDocs/DevOnboardingTryItSecurity.tsx

@@ -115,6 +115,7 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
         />
         <UseKeyButton
           disabled={(!selectedAppSecret && hasApiAccess) || appLoading}
+          color="secondary"
           onClick={() => {
             if (selectedAppSecret) {
               props.onChange(selectedAppSecret);
@@ -163,7 +164,7 @@ const FormLabel = styled.label<{ required?: boolean }>`
         display: inline-block;
         content: '*';
         margin-left: 4px;
-        color: var(--color-error);
+        color: var(--color-error-500);
       }
     `}
 `;