@redocly/theme 0.18.3-patch.8 → 0.18.4

package/src/components/OpenApiDocs/Dropdown.tsx

@@ -154,7 +154,7 @@ box-sizing: border-box;
     &,
     &:hover,
     &:focus-within {
-      border: 1px solid var(--border-primary);
+      border: 1px solid var(--border-color);
       box-shadow: none;
     }
 
@@ -172,9 +172,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/src/components/OperationBadge/OperationBadge.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+
+export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
+  className: `operation-type ${props.type}`,
+  'data-component-name': 'OperationBadge/OperationBadge',
+}))<{ type: string }>`
+  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);
+  }
+`;

package/src/components/OperationBadge/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/OperationBadge/OperationBadge';

package/src/components/Panel/PanelHeader.ts

@@ -16,9 +16,7 @@ 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,5 +8,9 @@ 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,4 +3,3 @@ 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';

package/src/components/Product/ProductPicker.tsx

@@ -4,8 +4,7 @@ import styled from 'styled-components';
 import type { ThemeUIConfig } from '../../config';
 
 import { useCurrentProduct, useGlobalData } from '@portal/hooks';
-import { usePreloadHistory } from '@portal/usePreloadHistory';
-// import { Link } from '@portal/Link';
+import { Link } from '@portal/Link';
 import { ArrowIcon } from '@theme/icons';
 
 import { Select, SelectInput, SelectList, SelectListItem } from '../Select';
@@ -14,30 +13,26 @@ import { Product } from './Product';
 export const ProductPicker = () => {
   const globalData = useGlobalData() as { theme?: ThemeUIConfig };
   const currentProduct = useCurrentProduct();
-  // const currentProductComponent = currentProduct ? (
-  //   <Product product={currentProduct} />
-  // ) : (
-  //   'Products'
-  // );
-  const { push } = usePreloadHistory();
+  const currentProductComponent = currentProduct ? (
+    <Product product={currentProduct} />
+  ) : (
+    'Products'
+  );
 
   const products = Object.values(globalData?.theme?.products || {});
 
-  const productComponents = products.map((product) => ({
-    element: <Product product={product} />,
-    value: product,
-  }));
+  const productComponents = products.map((product) => (
+    <Link key={product.slug} to={product.link}>
+      <Product product={product} />
+    </Link>
+  ));
 
   return products.length ? (
     <ProductSelect
-      value={currentProduct}
-      placeholder="Products"
+      selected={currentProductComponent}
       options={productComponents}
+      withArrow={true}
       triggerEvent="hover"
-      onChange={(product: typeof currentProduct) => {
-        if (!product) return;
-        push(product.link);
-      }}
     />
   ) : null;
 };

package/src/components/Product/index.ts

@@ -1,3 +1,2 @@
 export * from '@theme/components/Product/ProductPicker';
 export * from '@theme/components/Product/Product';
-export * from '@theme/components/Product/styledVariables';

package/src/components/Profile/LoginLink.tsx

@@ -35,9 +35,10 @@ const StyledLink = styled.a.attrs(() => ({
   display: inline-block;
   color: var(--navbar-text-color);
   text-decoration: none;
+  padding: 0 var(--navbar-item-padding-horizontal);
   text-align: center;
   line-height: 1;
-  font-size: var(--navbar-font-size);
+  font-size: var(--navbar-item-font-size);
   font-weight: var(--navbar-item-font-weight);
   &:hover {
     color: var(--navbar-item-hover-text-color);

package/src/components/Profile/Profile.tsx

@@ -10,10 +10,13 @@ export interface ProfileProps {
   onClick?: () => void;
 }
 
-function ProfileComponent({ name = 'User', imageUrl, onClick }: ProfileProps): JSX.Element {
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }: ProfileProps): JSX.Element {
   if (imageUrl) {
     return (
       <ProfileWrapper onClick={onClick} role="link">
+        <StyledUserName data-cy="user-name" color={color}>
+          {name}
+        </StyledUserName>
         {imageUrl && (
           <AvatarWrapper>
             <img data-cy="user-avatar" src={imageUrl} alt="profile" />
@@ -29,6 +32,9 @@ function ProfileComponent({ name = 'User', imageUrl, onClick }: ProfileProps): J
 
   return (
     <ProfileWrapper onClick={onClick} role="link">
+      <StyledUserName data-cy="user-name" color={color}>
+        {name}
+      </StyledUserName>
       <AvatarWrapper background={stringToHslColor(name)}>
         <span>{avatarLetters}</span>
       </AvatarWrapper>
@@ -45,6 +51,22 @@ export const ProfileWrapper = styled.div.attrs(() => ({
   align-items: center;
   cursor: pointer;
   width: auto;
+  padding: 0 var(--navbar-item-padding-horizontal);
+`;
+
+const StyledUserName = styled.span`
+  font-family: var(--profile-name-font-family);
+  font-size: var(--profile-name-font-size);
+  font-weight: var(--profile-name-font-weight);
+  color: var(--profile-name-text-color);
+  padding: var(--profile-name-padding-vertical) var(--profile-name-padding-horizontal);
+  margin: 0 var(--profile-name-margin-horizontal);
+
+  display: none;
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
+    display: block;
+  }
 `;
 
 export const AvatarWrapper = styled.div<{ background?: string }>`
@@ -64,6 +86,7 @@ export const AvatarWrapper = styled.div<{ background?: string }>`
   font-weight: var(--profile-avatar-font-weight);
 
   border-radius: var(--profile-avatar-border-radius);
+  margin-left: var(--profile-avatar-margin-left);
 
   ${({ background }) => css`
     background-color: ${background};

package/src/components/Profile/UserProfile.tsx

@@ -9,8 +9,6 @@ import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
 import { telemetry } from '@portal/telemetry';
 import { Dropdown, DropdownList, DropdownListItem } from '@theme/components/Dropdown';
-import { UserProfileData } from '@theme/components/Profile/UserProfileData';
-import { LogoutIcon } from '@theme/icons';
 
 export function UserProfile({
   userData,
@@ -25,7 +23,7 @@ export function UserProfile({
   };
   const [isOpened, setIsOpened] = useState<boolean>(false);
 
-  const menuItems: JSX.Element[] = [<UserProfileData key={userData.name} userData={userData} />];
+  const menuItems: JSX.Element[] = [];
 
   if (hasDeveloperOnboarding) {
     menuItems.push(
@@ -59,13 +57,12 @@ export function UserProfile({
       data-translation-key={translationKeys.logout}
       role="link"
     >
-      <LogoutIcon />
       {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
     </Logout>,
   );
 
   return (
-    <ProfileDropdown items={menuItems} alignment="end">
+    <ProfileDropdown items={menuItems}>
       <Profile
         name={userData.name}
         imageUrl={userData.picture}
@@ -99,23 +96,14 @@ const ProfileDropdown = styled(Dropdown).attrs(() => ({
   ${DropdownListItem} {
     border-radius: var(--profile-dropdown-list-item-border-radius);
 
-    :hover {
-      background-color: var(--profile-dropdown-list-item-active-background-color);
+    & > * {
+      padding: var(--profile-dropdown-list-item-vertical-padding)
+        var(--profile-dropdown-list-item-horizontal-padding);
     }
 
-    :first-child {
-      cursor: default;
-      background-color: var(--profile-dropdown-list-background-color);
+    :hover {
+      background-color: var(--profile-dropdown-list-item-active-background-color);
     }
   }
 `;
-
-const Logout = styled.div`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  color: var(--profile-dropdown-logout-color);
-  fill: var(--profile-dropdown-logout-color);
-  border-top: 1px solid var(--profile-dropdown-logout-border-color);
-  padding: var(--profile-dropdown-logout-padding);
-`;
+const Logout = styled.div``;

package/src/components/Profile/index.ts

@@ -4,4 +4,3 @@ export { LoginLink } from './LoginLink';
 export type { LoginLinkProps } from './LoginLink';
 export { UserProfile } from './UserProfile';
 export type { UserProfileProps } from './types';
-export * from '@theme/components/Profile/styledVariables';

package/src/components/Search/CancelSearch.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { useTranslate } from '@theme/mocks/hooks';
-import { Button } from '@theme/components/Button';
 
 export function CancelSearch({
   onClick,
@@ -18,13 +17,27 @@ export function CancelSearch({
 
   return (
     <Wrapper data-component-name="Search/CancelSearch" onClick={onClick} className={className}>
-      <Button data-translation-keys={translationKeys.cancel} fullWidth variant="outlined">
+      <Button data-translation-keys={translationKeys.cancel}>
         {translate(translationKeys.cancel, 'Cancel')}
       </Button>
     </Wrapper>
   );
 }
 
+const Button = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+  padding: 4px 16px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 22px;
+  height: 32px;
+`;
+
 const Wrapper = styled.div`
   display: flex;
   padding: 12px 16px 16px;

package/src/components/Search/ProductTag.tsx

@@ -26,17 +26,17 @@ const Wrapper = styled.div`
   align-items: center;
   padding: 1px 8px;
   gap: 4px;
-  background: var(--bg-overlay);
-  border: 1px solid var(--border-secondary);
-  border-radius: var(--border-radius-xlg);
-  margin-right: var(--spacing-base);
+  background: #f2f2f2;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  margin-right: 16px;
 `;
 
 const Label = styled.span`
-  color: var(--text-secondary);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  color: #1f2933;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 20px;
 `;
 
 const ClearIcon = styled(ThemeClearIcon)`

package/src/components/Search/RecentSearches.tsx

@@ -65,9 +65,9 @@ const Wrapper = styled.div`
 
 const Title = styled.div`
   color: var(--search-item-title-text-color);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  font-weight: 600;
+  font-size: var(--font-size-small);
+  line-height: 20px;
   padding: 8px 24px;
 `;
 
@@ -81,7 +81,7 @@ const RecentItems = styled.div`
 const ClockBackwardsIcon = styled(ThemeClockBackwardsIcon)`
   width: 16px;
   height: 16px;
-  fill: var(--text-description);
+  fill: #8d8d8d;
 `;
 
 const ClearIcon = styled(ThemeClearIcon)`
@@ -115,7 +115,7 @@ const Item = styled.div`
   }
 
   :focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-primary-200);
     border-radius: 2px;
   }
 

package/src/components/Search/Search.tsx

@@ -56,4 +56,6 @@ export function Search({ className }: { className?: string }): JSX.Element {
 
 const Wrapper = styled.div`
   margin-left: auto;
+
+  padding: 0 var(--navbar-item-padding-horizontal);
 `;

package/src/components/Search/SearchIcon.tsx

@@ -5,20 +5,15 @@ import type { SVGProps } from 'react';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    x="0"
+    y="0"
+    viewBox="0 0 490 490"
     data-component-name="Search/SearchIcon"
     {...props}
   >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6.66667 2.5C5.84258 2.5 5.037 2.74437 4.35179 3.20221C3.66659 3.66005 3.13254 4.31079 2.81717 5.07215C2.50181 5.83351 2.41929 6.67129 2.58006 7.47954C2.74084 8.2878 3.13767 9.03023 3.72039 9.61295C4.30311 10.1957 5.04554 10.5925 5.85379 10.7533C6.66205 10.914 7.49982 10.8315 8.26118 10.5162C9.02254 10.2008 9.67329 9.66675 10.1311 8.98154C10.589 8.29634 10.8333 7.49076 10.8333 6.66667C10.8333 5.5616 10.3943 4.50179 9.61295 3.72039C8.83155 2.93899 7.77174 2.5 6.66667 2.5ZM3.79622 2.37074C4.64588 1.80302 5.6448 1.5 6.66667 1.5C8.03695 1.5 9.35112 2.04434 10.3201 3.01328C11.289 3.98222 11.8333 5.29638 11.8333 6.66667C11.8333 7.68854 11.5303 8.68746 10.9626 9.53711C10.8672 9.67996 10.7649 9.8175 10.6565 9.94935L14.3536 13.6464C14.5488 13.8417 14.5488 14.1583 14.3536 14.3536C14.1583 14.5488 13.8417 14.5488 13.6464 14.3536L9.94935 10.6565C9.55739 10.979 9.11792 11.2437 8.64387 11.44C7.69978 11.8311 6.66094 11.9334 5.6587 11.7341C4.65647 11.5347 3.73586 11.0426 3.01328 10.3201C2.29071 9.59748 1.79864 8.67687 1.59928 7.67463C1.39992 6.6724 1.50224 5.63355 1.89329 4.68947C2.28434 3.74538 2.94657 2.93846 3.79622 2.37074Z"
-      fill="#A8A8A8"
-    />
+    <path d="M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" />
   </svg>
 );
 

package/src/components/Search/SearchItem.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
-import { Tag } from '@theme/components/Tag';
+import { OperationBadge } from '@theme/components/OperationBadge';
 import { Link } from '@portal/Link';
 import { highlight } from '@theme/components/Search/utils';
 import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
@@ -28,7 +28,7 @@ export function SearchItem({ item, className, product }: SearchItemProps): JSX.E
       {product && <ProductTag label={product} />}
       {item.httpVerb ? (
         <Operation>
-          <Tag color={item.httpVerb}>{item.httpVerb.toUpperCase()}</Tag>
+          <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
           {item.pathName ? highlight(item.pathName) : null}
         </Operation>
       ) : null}
@@ -125,7 +125,7 @@ const Description = styled.div`
 `;
 
 const Path = styled.div`
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-small);
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 22px;
@@ -135,7 +135,7 @@ const Place = styled.div`
   display: flex;
   flex-direction: column;
   gap: 5px;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-small);
   overflow: hidden;
   text-overflow: ellipsis;
 

package/src/components/Search/SearchTrigger.tsx

@@ -39,9 +39,8 @@ const Wrapper = styled.div`
   background-color: var(--search-trigger-background-color);
   border: var(--search-trigger-border);
   border-radius: var(--search-trigger-border-radius);
-  padding: var(--search-trigger-padding);
+  padding: 5px 10px 5px 14px;
   user-select: none;
-  gap: var(--search-trigger-gap);
 
   :hover {
     background-color: var(--search-trigger-hover-background-color);
@@ -57,11 +56,13 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.span`
+  padding-left: 10px;
+  padding-right: 16px;
   font-size: var(--search-trigger-font-size);
 `;
 
 const SearchIconSmall = styled(SearchIcon)`
-  width: var(--search-trigger-icon-size);
-  height: var(--search-trigger-icon-size);
+  width: 13px;
+  height: 13px;
   fill: var(--search-trigger-text-color);
 `;

package/src/components/Search/ShortcutKey.tsx

@@ -23,5 +23,9 @@ export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
 }
 
 export const Wrapper = styled.div`
-  font-size: var(--search-trigger-shortcut-font-size);
+  cursor: pointer;
+  font-size: 0.75em;
+  right: 1em;
+  color: var(--search-trigger-shortcut-text-color);
+  opacity: 0.5;
 `;

package/src/components/Search/SuggestedPages.tsx

@@ -47,8 +47,8 @@ const Wrapper = styled.div`
 const Title = styled.div`
   color: var(--search-item-title-text-color);
   font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
+  font-size: var(--font-size-small);
+  line-height: 20px;
   padding: 8px 24px;
 `;
 
@@ -89,7 +89,7 @@ const PageLink = styled(Link)`
     }
   }
   :focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-primary-200);
     border-radius: 2px;
   }
 `;

package/src/components/Search/index.ts

@@ -14,4 +14,3 @@ export * from '@theme/components/Search/MobileSearchTrigger';
 export * from '@theme/components/Search/CancelSearch';
 export * from '@theme/components/Search/ProductTag';
 export * from '@theme/components/Search/utils';
-export * from '@theme/components/Search/styledVariables';