@redocly/theme 0.18.3 → 0.18.4-patch.1

package/src/components/Menu/styledVariables.ts

@@ -0,0 +1,99 @@
+import { css } from 'styled-components';
+
+export const mobileMenu = css`
+  /**
+      * @tokens Mobile Menu icons
+      */
+  --mobile-menu-icons-size: var(--spacing-md); // @presenter Spacing
+  --mobile-menu-search-icon-size: var(--spacing-md); // @presenter Spacing
+
+  /**
+      * @tokens Mobile Menu wrapper
+      * */
+  --mobile-menu-wrapper-height: calc(100vh - var(--navbar-height));
+  --mobile-menu-wrapper-width: 100%;
+  --mobile-menu-wrapper-z-index: var(--z-index-raised);
+  --mobile-menu-wrapper-left: 0;
+  --mobile-menu-wrapper-top: var(--navbar-height);
+  --mobile-menu-wrapper-transition: 0.5s;
+  --mobile-menu-wrapper-background: var(--bg-base); // @presenter Color
+
+  /**
+      * @tokens Mobile Menu
+      * */
+  --mobile-menu-margin: var(--mobile-menu-items-margin-top) var(--mobile-menu-horizontal-margin) 0
+    var(--mobile-menu-horizontal-margin);
+  --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) 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
+  --mobile-menu-group-padding-right: var(--spacing-base); // @presenter Spacing
+  --mobile-menu-horizontal-margin: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-margin: 0; // @presenter Spacing
+  --mobile-menu-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
+  --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
+  --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+
+  /**
+      * @tokens Mobile Menu control button
+      * */
+  --mobile-menu-control-button-padding-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+  --mobile-menu-control-button-padding: var(--mobile-menu-control-button-padding-vertical) var(--mobile-menu-control-button-padding-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-margin-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-margin-horizontal: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-control-button-margin: var(--mobile-menu-control-button-margin-vertical) var(--mobile-menu-control-button-margin-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-control-button-weight: var(--font-weight-regular); // @presenter FontWeight
+  --mobile-menu-control-button-color: var(--mobile-menu-item-text-color); // @presenter Color
+  --mobile-menu-control-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-control-button-text-align: center;
+  --mobile-menu-control-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Login button
+      * */
+  --mobile-menu-login-button-background: var(--color-primary-bg); // @presenter Color
+  --mobile-menu-login-button-color: var(--color-primary-text); // @presenter Color
+  --mobile-menu-login-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-login-button-border-color: var(--color-primary-border); // @presenter Color
+  --mobile-menu-login-button-border-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-login-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-login-button-font-family: inherit; // @presenter FontFamily
+  --mobile-menu-login-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --mobile-menu-login-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Product
+      * */
+  --mobile-menu-product-name-color: var(--mobile-menu-item-text-color);
+  --mobile-menu-product-name-border-radius: var(--mobile-menu-item-radius);
+  --mobile-menu-product-name-border: 1px solid var(--border-secondary);
+  --mobile-menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  --mobile-menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
+  
+  // @tokens End
+`;
+
+export const menu = css`
+  /**
+    * @tokens Menu
+    */
+  --menu-padding: 0;
+  --menu-margin: 0;
+  --menu-list-style: none;
+  --menu-text-color: var(--sidebar-item-text-color);
+
+  --menu-item-label-align-items: center;
+  --menu-item-label-transition: background-color 0.3s, color 0.3s;
+  --menu-item-label-word-break: break-word;
+  --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
+  --menu-item-label-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+
+  // @tokens End
+`;

package/src/components/Navbar/Navbar.tsx

@@ -12,7 +12,7 @@ import { Search } from '@theme/components/Search/Search';
 import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
 import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
 import { useI18n } from '@portal/hooks';
-import { LanguagePicker } from '@theme/I18n/LanguagePicker';
+import { LanguagePicker } from '@theme/i18n/LanguagePicker';
 import { ProductPicker } from '@theme/components/Product';
 import { BurgerButton } from '@theme/components/Navbar/BurgerButton';
 
@@ -96,15 +96,15 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
         <ProductPicker />
         <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
         {hideSearch ? null : <Search />}
-        <LanguagePicker onChangeLanguage={changeLanguage} />
+        <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+        <ColorModeSwitcherWrapper isVisible={isOpen}>
+          <ColorModeSwitcher />
+        </ColorModeSwitcherWrapper>
         {hideUserProfile ? null : (
           <AuthUserProfileWrapper>
             <AuthUserProfile />
           </AuthUserProfileWrapper>
         )}
-        <ColorModeSwitcherWrapper isVisible={isOpen}>
-          <ColorModeSwitcher />
-        </ColorModeSwitcherWrapper>
       </NavbarRow>
     </NavbarContainer>
   );
@@ -127,6 +127,8 @@ const AuthUserProfileWrapper = styled.div`
 `;
 
 export const NavbarContainer = styled.nav`
+  border: var(--navbar-border);
+
   --text-color: var(--navbar-text-color);
 
   height: var(--navbar-height);
@@ -135,17 +137,13 @@ export const NavbarContainer = styled.nav`
   align-items: center;
   flex-shrink: 0;
 
-  font-size: 0.875rem;
+  font-size: var(--navbar-font-size);
   position: sticky;
   top: 0;
   z-index: var(--z-index-raised);
-  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
+  padding: 0;
   background: var(--navbar-background-color);
-  font-family: var(--navbar-item-font-family);
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    font-size: 1rem;
-  }
+  font-family: var(--navbar-font-family);
 
   ${({ theme }) => theme.mediaQueries.print} {
     background: transparent;
@@ -158,6 +156,10 @@ export const NavbarContainer = styled.nav`
       margin: 0;
     }
   }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    padding: var(--navbar-padding);
+  }
 `;
 
 export const NavbarRow = styled.div`
@@ -165,7 +167,12 @@ export const NavbarRow = styled.div`
   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/src/components/Navbar/NavbarItem.tsx

@@ -13,6 +13,7 @@ import { useI18nConfig, useTranslate } from '@portal/hooks';
 import { withPathPrefix } from '@theme/utils';
 import { telemetry } from '@portal/telemetry';
 import { Dropdown } from '@theme/components/Dropdown';
+import { ExternalIcon } from '@theme/icons';
 
 export interface NavbarItemProps {
   navItem: ResolvedNavItem;
@@ -40,6 +41,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           {item.icon ? <NavbarIcon url={item.icon} /> : null}
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
+          {item.external ? <ExternalIcon /> : null}
         </NavbarLink>
       </NavbarMenuItem>
     );
@@ -64,6 +66,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         >
           <NavbarIcon url={item.icon} />
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
+          {item.external ? <ExternalIcon /> : null}
         </NavbarMenuItem>
       </NavbarMenuItemDropdown>
     );
@@ -84,6 +87,8 @@ export const NavbarMenuItemDropdown = styled(Dropdown).attrs(() => ({
 `;
 
 export const NavbarLink = styled(Link)`
+  display: flex;
+  align-items: center;
   color: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
   text-decoration: ${({ active }) =>
@@ -94,17 +99,26 @@ 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: 1;
-  font-size: var(--navbar-item-font-size);
-  border-radius: var(--navbar-item-border-radius);
+  line-height: var(--navbar-item-line-height);
   font-weight: var(--navbar-item-font-weight);
+
+  border-radius: var(--navbar-item-border-radius);
+  border-bottom: ${({ active }) =>
+    active ? 'var(--navbar-item-active-bottom-border)' : 'var(--navbar-item-bottom-border)'};
+
   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: var(--navbar-item-hover-background-color);
+    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)'};
+
     ${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: flex-end;
+  justify-content: var(--navbar-menu-justify-content);
   flex: 1;
-  gap: var(--navbar-item-gap);
+  gap: var(--navbar-menu-items-gap);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     display: flex;

package/src/components/Navbar/index.ts

@@ -1,3 +1,4 @@
 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/Navbar/styledVariables.ts

@@ -0,0 +1,39 @@
+import { css } from 'styled-components';
+
+export const navbar = css`
+  --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: 0 var(--spacing-xl); // @presenter Spacing
+  --navbar-font-family: var(--font-family-base);
+  --navbar-container-max-width: 100%;
+
+  --navbar-menu-items-gap: var(--spacing-base);
+  --navbar-menu-justify-content: flex-start;
+
+  --navbar-item-font-weight: var(--font-weight-regular);
+
+  --navbar-item-active-text-color: var(--text-primary);
+  --navbar-item-active-text-decoration: none;
+  --navbar-item-active-bottom-border: 2px solid var(--navbar-item-active-text-color);
+
+  --navbar-item-padding-vertical: var(--spacing-xxs);
+  --navbar-item-padding-horizontal: var(--spacing-sm);
+  --navbar-item-line-height: var(--line-height-base);
+  --navbar-item-active-background-color: none;
+  --navbar-item-border-radius: 0;
+  --navbar-item-bottom-border: 2px solid transparent;
+
+  --navbar-item-hover-text-color: var(--text-primary);
+  --navbar-item-hover-text-decoration: none;
+  --navbar-item-hover-background-color: none;
+  --navbar-item-hover-bottom-border: 2px solid var(--border-primary);
+
+  --navbar-item-icon-width: 1.5em; // @presenter Spacing
+  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
+`;

package/src/components/NavbarLogo/NavbarLogo.tsx

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

package/src/components/NavbarLogo/styledVariables.ts

@@ -0,0 +1,15 @@
+import { css } from "styled-components";
+
+export const logo = css`
+  /**
+    * @tokens Logo
+    */
+
+  --navbar-logo-height: 2rem; // @presenter Spacing
+  --navbar-logo-width: auto;
+  --navbar-logo-margin: 16px; // @presenter Spacing
+  --navbar-logo-max-width: 285px; // @presenter Spacing
+  --navbar-logo-max-height: 285px; // @presenter Spacing
+
+  // @tokens End
+`;

package/src/components/OpenApiDocs/DevOnboardingTryItSecurity.tsx

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

package/src/components/OpenApiDocs/Dropdown.tsx

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

package/src/components/PageNavigation/NextButton.tsx

@@ -29,7 +29,6 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
 
   return (
     <StyledButton
-      variant="outlined"
       size="large"
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"

package/src/components/PageNavigation/PreviousButton.tsx

@@ -32,7 +32,6 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
 
   return (
     <StyledButton
-      variant="outlined"
       size="large"
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"

package/src/components/Panel/PanelHeader.ts

@@ -16,7 +16,9 @@ export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 40px;
   white-space: var(--panel-heading-white-space-local);
+  color: var(--panel-heading-text-color);
 
   cursor: pointer;
 

package/src/components/Panel/PanelHeaderTitle.ts

@@ -8,9 +8,5 @@ export const PanelHeaderTitle = styled.span.attrs<{ className?: string }>(({ cla
   font-weight: var(--panel-heading-font-weight-local);
   overflow: hidden;
   text-overflow: ellipsis;
-
-  /* changed from var(--text-color-inverse) to var(--text-color)
-     should change several components in openapi/graphql reference-docs to use inverse color
-   */
   color: var(--panel-heading-text-color);
 `;

package/src/components/Panel/index.ts

@@ -3,3 +3,4 @@ export * from '@theme/components/Panel/PanelBody';
 export * from '@theme/components/Panel/PanelComponent';
 export * from '@theme/components/Panel/PanelHeader';
 export * from '@theme/components/Panel/PanelHeaderTitle';
+export * from '@theme/components/Panel/styledVariables';