@redocly/theme 0.18.3-patch.8 → 0.18.4

package/src/hooks/useMobileMenu.ts

@@ -3,14 +3,15 @@ import { useLocation } from 'react-router-dom';
 
 import type { Dispatch, SetStateAction } from 'react';
 
-import useModalScrollLock from '@theme/hooks/useModalScrollLock';
-
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
   const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
 
   useEffect(() => setIsOpen(false), [location.pathname, location.hash]);
-  useModalScrollLock(isOpen);
+  useEffect(() => {
+    if (isOpen) document.body.classList.add('overflow-hidden');
+    else document.body.classList.remove('overflow-hidden');
+  }, [isOpen]);
 
   return [isOpen, setIsOpen];
 }

package/src/icons/AlertIcon/AlertIcon.tsx

@@ -98,8 +98,13 @@ function Icon({ type, className }: AlertIconProps) {
 export const AlertIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/AlertIcon/AlertIcon',
 }))`
+  position: absolute;
+  left: var(--admonition-padding-horizontal);
+  top: 50%;
+  transform: translateY(-50%);
   width: var(--admonition-icon-size);
   height: var(--admonition-icon-size);
+  margin-right: var(--admonition-padding-horizontal);
   flex-shrink: 0;
 
   fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};

package/src/icons/ArrowIcon/ArrowIcon.tsx

@@ -34,7 +34,7 @@ const Icon = ({ className, weight }: ArrowIconProps) => (
       >
         <path
           d="M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z"
-          fill="currentColor"
+          fill="inherit"
         />
       </svg>
     ) : (

package/src/icons/CollapseIcon/CollapseIcon.tsx

@@ -6,7 +6,7 @@ interface IconProps {
   color?: string;
 }
 
-const Icon = ({ className }: IconProps) => (
+const Icon = ({ className, color = 'white' }: IconProps) => (
   <svg
     data-component-name="icons/CollapseIcon"
     viewBox="0 0 14 14"
@@ -18,11 +18,11 @@ const Icon = ({ className }: IconProps) => (
       <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
       <path
         d="M1.75 7.875V8.75H4.63138L0.875 12.5046L1.49363 13.125L5.25 9.36862V12.25H6.125V7.875H1.75Z"
-        fill="currentColor"
+        fill={color}
       />
       <path
         d="M13.125 1.4945L12.509 0.875L8.75 4.63138V1.75H7.875V6.125H12.25V5.25H9.36862L13.125 1.4945Z"
-        fill="currentColor"
+        fill={color}
       />
     </g>
     <defs>
@@ -34,7 +34,7 @@ const Icon = ({ className }: IconProps) => (
 );
 
 export const CollapseIcon = styled(Icon)`
-  width: 1em;
-  height: 1em;
+  width: 1.3em;
+  height: 1.3em;
   vertical-align: middle;
 `;

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -52,6 +52,6 @@ export const ColorModeIcon = styled(Icon).attrs(() => ({
   fill: var(--navbar-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
-    width: var(--navbar-font-size);
+    width: var(--navbar-item-font-size);
   }
 `;

package/src/icons/CopyIcon/CopyIcon.tsx

@@ -3,23 +3,24 @@ import styled from 'styled-components';
 
 interface IconProps {
   className?: string;
+  color?: string;
 }
 
-const Icon = ({ className }: IconProps) => (
+const Icon = ({ className, color = 'white' }: IconProps) => (
   <span data-component-name="icons/CopyIcon">
     <svg viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M3.52083 1.33333C3.52083 1.25279 3.58613 1.1875 3.66667 1.1875H9.5C9.58054 1.1875 9.64583 1.25279 9.64583 1.33333V8.33333C9.64583 8.41387 9.58054 8.47917 9.5 8.47917H7.75H3.66667C3.58613 8.47917 3.52083 8.41387 3.52083 8.33333V3.08333V1.33333ZM2.64583 2.64583V1.33333C2.64583 0.769543 3.10288 0.3125 3.66667 0.3125H9.5C10.0638 0.3125 10.5208 0.769543 10.5208 1.33333V8.33333C10.5208 8.89712 10.0638 9.35417 9.5 9.35417H8.1875V10.6667C8.1875 10.9374 8.07995 11.1971 7.8885 11.3885C7.69706 11.5799 7.43741 11.6875 7.16667 11.6875H1.33333C1.06259 11.6875 0.802939 11.5799 0.611495 11.3885C0.420051 11.1971 0.3125 10.9374 0.3125 10.6667V3.66667C0.3125 3.39592 0.420052 3.13627 0.611495 2.94483C0.802938 2.75339 1.06259 2.64583 1.33333 2.64583H2.64583ZM7.3125 9.35417V10.6667C7.3125 10.7053 7.29713 10.7424 7.26979 10.7698C7.24244 10.7971 7.20534 10.8125 7.16667 10.8125H1.33333C1.29466 10.8125 1.25756 10.7971 1.23021 10.7698C1.20286 10.7424 1.1875 10.7053 1.1875 10.6667V3.66667C1.1875 3.62799 1.20286 3.5909 1.23021 3.56355C1.25756 3.5362 1.29466 3.52083 1.33333 3.52083H2.64583V8.33333C2.64583 8.89712 3.10288 9.35417 3.66667 9.35417H7.3125Z"
-        fill="currentColor"
+        fill={color}
       />
     </svg>
   </span>
 );
 
 export const CopyIcon = styled(Icon)`
-  width: 1em;
-  height: 1em;
+  width: 1.3em;
+  height: 1.3em;
   vertical-align: middle;
 `;

package/src/icons/DeselectIcon/DeselectIcon.tsx

@@ -6,7 +6,7 @@ interface IconProps {
   color?: string;
 }
 
-const Icon = ({ className }: IconProps) => (
+const Icon = ({ className, color = 'white' }: IconProps) => (
   <svg
     data-component-name="icons/DeselectIcon"
     viewBox="0 0 16 16"
@@ -14,10 +14,10 @@ const Icon = ({ className }: IconProps) => (
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <path d="M14.4966 10.5H9.49658V11.5H14.4966V10.5Z" fill="currentColor" />
-    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill="currentColor" />
-    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill="currentColor" />
-    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill="currentColor" />
+    <path d="M14.4966 10.5H9.49658V11.5H14.4966V10.5Z" fill={color} />
+    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill={color} />
+    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill={color} />
+    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill={color} />
   </svg>
 );
 

package/src/icons/ExpandIcon/ExpandIcon.tsx

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 
 interface IconProps {
   className?: string;
+  color?: string;
 }
 
-const Icon = ({ className }: IconProps) => (
+const Icon = ({ className, color = 'white' }: IconProps) => (
   <svg
     data-component-name="icons/ExpandIcon"
     viewBox="0 0 14 14"
@@ -17,11 +18,11 @@ const Icon = ({ className }: IconProps) => (
       <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
       <path
         d="M8.75 0.875V1.75H11.6314L7.875 5.50462L8.49362 6.125L12.25 2.36863V5.25H13.125V0.875H8.75Z"
-        fill="currentColor"
+        fill={color}
       />
       <path
         d="M6.125 8.4945L5.509 7.875L1.75 11.6314V8.75H0.875V13.125H5.25V12.25H2.36863L6.125 8.4945Z"
-        fill="currentColor"
+        fill={color}
       />
     </g>
     <defs>
@@ -33,7 +34,7 @@ const Icon = ({ className }: IconProps) => (
 );
 
 export const ExpandIcon = styled(Icon)`
-  width: 1em;
-  height: 1em;
+  width: 1.3em;
+  height: 1.3em;
   vertical-align: middle;
 `;

package/src/icons/FileIcon/FileIcon.tsx

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 
 interface IconProps {
   className?: string;
+  color?: string;
 }
 
-const Icon = ({ className }: IconProps) => (
+const Icon = ({ className, color = 'white' }: IconProps) => (
   <svg
     data-component-name="icons/FileIcon"
     viewBox="0 0 16 16"
@@ -16,7 +17,7 @@ const Icon = ({ className }: IconProps) => (
     <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
     <path
       d="M12.85 4.65018L9.35 1.15018C9.30601 1.10132 9.25192 1.0626 9.19149 1.0367C9.13106 1.0108 9.06572 0.998339 9 1.00018H4C3.73502 1.00096 3.48112 1.10656 3.29375 1.29393C3.10638 1.4813 3.00078 1.7352 3 2.00018V14.0002C3.00078 14.2652 3.10638 14.5191 3.29375 14.7064C3.48112 14.8938 3.73502 14.9994 4 15.0002H12C12.265 14.9994 12.5189 14.8938 12.7062 14.7064C12.8936 14.5191 12.9992 14.2652 13 14.0002V5.00018C13.0018 4.93446 12.9894 4.86912 12.9635 4.80869C12.9376 4.74826 12.8989 4.69417 12.85 4.65018ZM9 2.20018L11.8 5.00018H9V2.20018ZM12 14.0002H4V2.00018H8V5.00018C8.00078 5.26515 8.10638 5.51906 8.29375 5.70642C8.48112 5.89379 8.73502 5.9994 9 6.00018H12V14.0002Z"
-      fill="currentColor"
+      fill={color}
     />
   </svg>
 );

package/src/icons/ReportIcon/ReportIcon.tsx

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 
 interface IconProps {
   className?: string;
+  color?: string;
 }
 
-const Icon = ({ className }: IconProps) => (
+const Icon = ({ className, color = 'white' }: IconProps) => (
   <svg
     data-component-name="icons/ReportIcon"
     viewBox="0 0 14 14"
@@ -16,13 +17,13 @@ const Icon = ({ className }: IconProps) => (
     <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
     <path
       d="M7 8.75C6.87021 8.75 6.74333 8.78849 6.63541 8.8606C6.52749 8.93271 6.44337 9.0352 6.3937 9.15511C6.34403 9.27503 6.33104 9.40698 6.35636 9.53428C6.38168 9.66158 6.44418 9.77851 6.53596 9.87029C6.62774 9.96207 6.74467 10.0246 6.87197 10.0499C6.99927 10.0752 7.13122 10.0622 7.25114 10.0125C7.37105 9.96288 7.47354 9.87876 7.54565 9.77084C7.61776 9.66292 7.65625 9.53604 7.65625 9.40625C7.65625 9.2322 7.58711 9.06528 7.46404 8.94221C7.34097 8.81914 7.17405 8.75 7 8.75Z"
-      fill="currentColor"
+      fill={color}
       fillOpacity="1"
     />
     <path d="M7.4375 3.9375H6.5625V7.875H7.4375V3.9375Z" fill="white" fillOpacity="1" />
     <path
       d="M11.375 12.25H2.625C2.39302 12.2497 2.17061 12.1575 2.00658 11.9934C1.84254 11.8294 1.75027 11.607 1.75 11.375V2.625C1.75027 2.39302 1.84254 2.17061 2.00658 2.00658C2.17061 1.84254 2.39302 1.75027 2.625 1.75H11.375C11.607 1.75027 11.8294 1.84254 11.9934 2.00658C12.1575 2.17061 12.2497 2.39302 12.25 2.625V11.375C12.2497 11.607 12.1575 11.8294 11.9934 11.9934C11.8294 12.1575 11.607 12.2497 11.375 12.25ZM2.625 2.625V11.375H11.3755L11.375 2.625H2.625Z"
-      fill="currentColor"
+      fill={color}
       fillOpacity="1"
     />
   </svg>

package/src/icons/SelectIcon/SelectIcon.tsx

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 
 interface IconProps {
   className?: string;
+  color?: string;
 }
 
-const Icon = ({ className }: IconProps) => (
+const Icon = ({ className, color = 'white' }: IconProps) => (
   <svg
     data-component-name="icons/SelectIcon"
     viewBox="0 0 16 16"
@@ -13,12 +14,12 @@ const Icon = ({ className }: IconProps) => (
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill="currentColor" />
-    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill="currentColor" />
-    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill="currentColor" />
+    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill={color} />
+    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill={color} />
+    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill={color} />
     <path
       d="M10.5 10.9425L9.205 9.64746L8.5 10.3525L10.5 12.3525L14.5 8.35246L13.795 7.64746L10.5 10.9425Z"
-      fill="currentColor"
+      fill={color}
     />
   </svg>
 );

package/src/icons/index.ts

@@ -15,7 +15,3 @@ export * from '@theme/icons/SelectIcon';
 export * from '@theme/icons/BurgerIcon';
 export * from '@theme/icons/CloseIcon';
 export * from '@theme/icons/LogoutIcon';
-export * from '@theme/icons/LanguageIcon';
-export * from '@theme/icons/PointingArrowIcon';
-export * from '@theme/icons/CheckboxIcon';
-export * from '@theme/icons/ErrorIcon';

package/src/layouts/Forbidden.tsx

@@ -30,10 +30,6 @@ export function Forbidden(): JSX.Element {
 }
 
 const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   margin: 25px auto;
   font-family: var(--page-403-font-family);
   text-align: center;

package/src/layouts/NotFound.tsx

@@ -30,10 +30,6 @@ export function NotFound(): JSX.Element {
 }
 
 const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   margin: 25px auto;
   font-family: var(--page-404-font-family);
   text-align: center;

package/src/types/portal/src/shared/types/catalog.ts

@@ -1,4 +1,4 @@
-import { CatalogFilterConfig, ScorecardStatus } from '@theme';
+import { CatalogFilterConfig } from "@theme/config";
 
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
@@ -33,11 +33,5 @@ export type CatalogItem = {
   description?: string;
   image?: string;
   docsLink?: string;
-
-  scorecardStatus?: ScorecardStatus;
-  scorecardLevel?: string;
-  scoreCardSlug?: string;
-  tags?: unknown[];
-
   [k: string]: unknown;
 };

package/src/types/portal/src/shared/types/nav.ts

@@ -22,7 +22,6 @@ export type ResolvedNavLinkItem = {
   routeSlug?: string;
   active?: boolean;
   icon?: string;
-  srcSet?: string;
   [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 
@@ -49,7 +48,6 @@ export type ResolvedNavGroupItem = {
   routeSlug?: string;
   active?: boolean;
   icon?: string;
-  srcSet?: string;
   [REDOCLY_TEAMS_RBAC]?: Rbac;
 };
 
@@ -72,7 +70,6 @@ export type ResolvedNavItem =
     items?: ResolvedNavItem[]; // for typescript
     sidebar?: ResolvedNavItem[]; // for typescript
     icon?: string;
-    srcSet?: string;
     languageInsensitive?: boolean;
     [REDOCLY_TEAMS_RBAC]?: Rbac;
   }
@@ -91,7 +88,6 @@ export type ResolvedNavItem =
     items?: ResolvedNavItem[]; // for typescript
     sidebar?: ResolvedNavItem[]; // for typescript
     icon?: string; // for typescript
-    srcSet?: string;
     languageInsensitive?: boolean; // for typescript
     [REDOCLY_TEAMS_RBAC]?: Rbac;
   };
@@ -154,7 +150,6 @@ export type NavItem = {
 };
 export interface LogoConfig {
   image?: string;
-  srcSet?: string;
   altText?: string;
   link?: string;
   favicon?: string;

package/src/ui/ArrowBack.tsx

@@ -25,6 +25,7 @@ const Arrow = ({
 
 export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-back-button-icon-color);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/src/ui/Burger.tsx

@@ -32,7 +32,7 @@ const Line = styled.div`
   margin: 4px 0;
   width: 100%;
   height: 2px;
-  background: var(--border-primary);
+  background: var(--text-color);
   border-radius: 1px;
 `;
 

package/src/ui/Dropdown.tsx

@@ -36,9 +36,9 @@ const DropDownHeader = styled.div`
   align-items: center;
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid var(--border-primary);
+  border: 1px solid var(--border-color);
   font-weight: 600;
-  color: var(--text-primary);
+  color: var(--text-color);
   background: var(--background-color);
 `;
 
@@ -48,7 +48,7 @@ const DropDownList = styled.div`
   margin: 2px 20px 0 20px;
   padding: 0;
   border-radius: 4px;
-  border: 1px solid var(--border-primary);
+  border: 1px solid var(--border-color);
   z-index: var(--z-index-popover);
   left: 0;
   right: 0;
@@ -67,20 +67,20 @@ const ListItem = styled.div`
   background-color: var(--background-color);
   padding: 0.4em 10px;
   font-size: 1em;
-  color: var(--text-secondary);
+  color: var(--text-color);
   cursor: pointer;
   &:hover {
-    background-color: var(--bg-raised);
+    background-color: var(--color-secondary-300);
   }
   &.active {
-    background-color: var(--bg-raised);
+    background-color: var(--color-secondary-300);
   }
 `;
 
 const DropDownLink = styled(Link)`
   display: block;
   text-decoration: none;
-  color: var(--text-secondary);
+  color: var(--text-color);
 `;
 
 export function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {

package/src/ui/Highlight.tsx

@@ -3,12 +3,12 @@ import { findAll } from 'highlight-words-core';
 
 export const HighlightContext = React.createContext<string[]>([]);
 
-export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element | null {
+export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element {
   const { children } = props;
   const searchWords = React.useContext(HighlightContext);
 
   if (!searchWords.length) {
-    return children ? <>{children}</> : null;
+    return <>children</> || null;
   }
 
   function highlight(str: string, childIdx: number = 0) {

package/src/ui/Jumbotron.tsx

@@ -25,7 +25,7 @@ export const Jumbotron = styled(Background).attrs(() => ({
   ${({ bgImage, bgColor }) =>
     bgImage &&
     `
-      background: ${bgColor || 'var(--text-base)'} url(${bgImage});
+      background: ${bgColor || 'var(--text-color)'} url(${bgImage});
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;