@redocly/theme 0.18.3-patch.1 → 0.18.3-patch.5

package/src/globalStyle.ts

@@ -20,7 +20,7 @@ import { languagePicker } from '@theme/I18n';
 import { select } from '@theme/components/Select';
 import { userProfile, userProfileDropdown } from '@theme/components/Profile';
 import { dropdown } from '@theme/components/Dropdown';
-import { admonition, markdown } from '@theme/components/Markdown';
+import { admonition, markdown, mermaid } from '@theme/components/Markdown';
 import { tooltip } from '@theme/components/Tooltip';
 import { lastUpdated } from '@theme/components/LastUpdated';
 import { logo } from '@theme/components/NavbarLogo';
@@ -87,16 +87,16 @@ const themeColors = css`
   --color-purple-9: #22075e;
   --color-purple-10: #120338;
 
-  --color-magneta-1: #fff0f6;
-  --color-magneta-2: #ffd6e7;
-  --color-magneta-3: #ffadd2;
-  --color-magneta-4: #ff85c0;
-  --color-magneta-5: #f759ab;
-  --color-magneta-6: #eb2f96;
-  --color-magneta-7: #c41d7f;
-  --color-magneta-8: #9e1068;
-  --color-magneta-9: #780650;
-  --color-magneta-10: #520339;
+  --color-magenta-1: #fff0f6;
+  --color-magenta-2: #ffd6e7;
+  --color-magenta-3: #ffadd2;
+  --color-magenta-4: #ff85c0;
+  --color-magenta-5: #f759ab;
+  --color-magenta-6: #eb2f96;
+  --color-magenta-7: #c41d7f;
+  --color-magenta-8: #9e1068;
+  --color-magenta-9: #780650;
+  --color-magenta-10: #520339;
 
   --color-cyan-1: #e6fffb;
   --color-cyan-2: #b5f5ec;
@@ -153,16 +153,16 @@ const themeColors = css`
   --color-primary-text: #161087;
   --color-primary-text-active: #0d086e;
 
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-5);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-7);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
+  --color-success-bg: var(--color-cyan-1);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-5);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
 
   --color-warning-bg: var(--color-gold-1);
   --color-warning-bg-hover: var(--color-gold-2);
@@ -177,7 +177,7 @@ const themeColors = css`
 
   --color-error-bg: var(--color-red-1);
   --color-error-bg-hover: var(--color-red-2);
-  --color-error-border: var(--color-red-3);
+  --color-error-border: var(--color-red-7);
   --color-error-border-hover: var(--color-red-4);
   --color-error-hover: var(--color-red-5);
   --color-error-base: var(--color-red-6);
@@ -216,6 +216,7 @@ const themeColors = css`
   --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
   --bg-sunken: #f1f1f1; // Sunken is the lowest elevation available.
   --bg-raised: #fafafa; // Cards, elements, inputs
+  --bg-raised-light: #fafafa; // Always light
   --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
   --bg-modal-overlay: #f2f2f2c2; // Overlay is the highest elevation available. Use for hovers
 
@@ -949,6 +950,7 @@ export const styles = css`
     ${loadProgressBar}
     ${logo}
     ${markdown}
+    ${mermaid}
     ${menu}
     ${mobileMenu}
     ${modal}

package/src/hooks/useMobileMenu.ts

@@ -3,15 +3,14 @@ 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]);
-  useEffect(() => {
-    if (isOpen) document.body.classList.add('overflow-hidden');
-    else document.body.classList.remove('overflow-hidden');
-  }, [isOpen]);
+  useModalScrollLock(isOpen);
 
   return [isOpen, setIsOpen];
 }

package/src/hooks/useModalScrollLock.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+
+export default function useModalScrollLock(isOpen: boolean) {
+  useEffect(() => {
+    if (isOpen) document.body.classList.add('overflow-hidden');
+    else document.body.classList.remove('overflow-hidden');
+  }, [isOpen]);
+
+  return () => {
+    document.body.classList.remove('overflow-hidden');
+  };
+}

package/src/icons/AlertIcon/AlertIcon.tsx

@@ -98,13 +98,8 @@ 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/types/portal/src/shared/types/catalog.ts

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

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 {
+export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element | null {
   const { children } = props;
   const searchWords = React.useContext(HighlightContext);
 
   if (!searchWords.length) {
-    return <>children</> || null;
+    return children ? <>{children}</> : null;
   }
 
   function highlight(str: string, childIdx: number = 0) {

package/src/ui/darkColors.tsx

@@ -63,16 +63,16 @@ export const darkMode = css`
   --color-purple-9: #cda8f0;
   --color-purple-10: #ebd7fa;
 
-  --color-magneta-1: #291321;
-  --color-magneta-2: #40162f;
-  --color-magneta-3: #551c3b;
-  --color-magneta-4: #75204f;
-  --color-magneta-5: #a02669;
-  --color-magneta-6: #cb2b83;
-  --color-magneta-7: #e0529c;
-  --color-magneta-8: #f37fb7;
-  --color-magneta-9: #f8a8cc;
-  --color-magneta-10: #fad2e3;
+  --color-magenta-1: #291321;
+  --color-magenta-2: #40162f;
+  --color-magenta-3: #551c3b;
+  --color-magenta-4: #75204f;
+  --color-magenta-5: #a02669;
+  --color-magenta-6: #cb2b83;
+  --color-magenta-7: #e0529c;
+  --color-magenta-8: #f37fb7;
+  --color-magenta-9: #f8a8cc;
+  --color-magenta-10: #fad2e3;
 
   --color-cyan-1: #112123;
   --color-cyan-2: #113536;
@@ -129,35 +129,35 @@ export const darkMode = css`
   --color-primary-text: #d6dfff;
   --color-primary-text-active: #ebf0ff;
 
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-7);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-5);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
-
-  --color-warning-bg: var(--color-gold-1);
+  --color-success-bg: var(--color-cyan-3);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-7);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
+
+  --color-warning-bg: var(--color-gold-3);
   --color-warning-bg-hover: var(--color-gold-2);
   --color-warning-border: var(--color-gold-3);
   --color-warning-border-hover: var(--color-gold-4);
   --color-warning-hover: var(--color-gold-7);
   --color-warning-base: var(--color-gold-6);
-  --color-warning-active: var(--color-gold-5);
+  --color-warning-active: var(--color-gold-7);
   --color-warning-text-hover: var(--color-gold-8);
   --color-warning-text: var(--color-gold-9);
   --color-warning-text-active: var(--color-gold-10);
 
-  --color-error-bg: var(--color-red-1);
+  --color-error-bg: var(--color-red-3);
   --color-error-bg-hover: var(--color-red-2);
   --color-error-border: var(--color-red-3);
   --color-error-border-hover: var(--color-red-4);
   --color-error-hover: var(--color-red-7);
   --color-error-base: var(--color-red-6);
-  --color-error-active: var(--color-red-5);
+  --color-error-active: var(--color-red-7);
   --color-error-text-hover: var(--color-red-8);
   --color-error-text: var(--color-red-9);
   --color-error-text-active: var(--color-red-10);
@@ -168,7 +168,7 @@ export const darkMode = css`
   --color-info-border-hover: var(--color-blue-4);
   --color-info-hover: var(--color-blue-7);
   --color-info-base: var(--color-blue-6);
-  --color-info-active: var(--color-blue-5);
+  --color-info-active: var(--color-blue-7);
   --color-info-text-hover: var(--color-blue-8);
   --color-info-text: var(--color-blue-9);
   --color-info-text-active: var(--color-blue-10);

package/src/utils/css-variables.ts

@@ -1,2 +1,4 @@
-export const getCssColorVariable = (color: string | undefined, defaultValue = 'inherit'): string =>
-  color?.startsWith('--') ? `var(${color})` : color || defaultValue;
+export const getCssColorVariable = (
+  color: string | undefined,
+  defaultValue = 'currentColor',
+): string => (color?.startsWith('--') ? `var(${color})` : color || defaultValue);