@redocly/theme 0.18.3-patch.2 → 0.18.3-patch.6

package/src/components/Sidebar/styledVariables.ts

@@ -75,7 +75,7 @@ export const sidebar = css`
     */
   --sidebar-item-border-radius: 6px; // @presenter BorderRadius
 
-  /** 
+  /**
     * @tokens Sidebar item icon
     */
   --sidebar-item-icon-size: var(--spacing-xl);
@@ -161,7 +161,7 @@ export const sidebar = css`
   --sidebar-back-padding-left: var(--spacing-xs); // @presenter Spacing
   --sidebar-back-button-icon: none;
 
-  /** 
+  /**
   * @tokens Sidebar footer
   */
   --sidebar-footer-padding-vertical: var(--spacing-sm); // @presenter Spacing
@@ -175,7 +175,7 @@ export const sidebar = css`
   --sidebar-controls-collapsed-gap: var(--spacing-xs); // @presenter Spacing
   --sidebar-controls-collapsed-padding-vertical: var(--spacing-xs); // @presenter Spacing
   --sidebar-controls-collapsed-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
- 
+
   // @tokens End
 `;
 
@@ -208,6 +208,7 @@ export const versionPicker = css`
   --version-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --version-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --version-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
-  
+  --version-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
+
   // @tokens End
 `;

package/src/components/Tag/styledVariables.ts

@@ -15,6 +15,7 @@ export const tag = css`
     */
 
   --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-large-padding: 4px 16px; //@presenter Spacing
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -39,7 +40,7 @@ export const tag = css`
     */
 
   .tag-size-large {
-    --tag-padding: 4px 16px;
+    --tag-padding: var(--tag-large-padding);
     --tag-font-size: var(--font-size-regular);
   }
 
@@ -57,7 +58,7 @@ export const tag = css`
   .tag-approved,
   .tag-get {
     --tag-color: var(--color-success-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
@@ -75,7 +76,7 @@ export const tag = css`
   .tag-deprecated,
   .tag-put {
     --tag-color: var(--color-warning-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
@@ -83,42 +84,42 @@ export const tag = css`
   .tag-processing,
   .tag-post {
     --tag-color: var(--color-info-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
     --tag-color: var(--color-cyan-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-cyan-1); // @presenter Color
     --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
     --tag-color: var(--color-yellow-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-yellow-1); // @presenter Color
     --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
     --tag-color: var(--color-geekblue-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-geekblue-1); // @presenter Color
     --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
     --tag-color: var(--color-magneta-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-magneta-1); // @presenter Color
     --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 

package/src/components/Tiles/TileHeader.ts

@@ -9,6 +9,6 @@ export const TileHeader = styled.h3.attrs<{ className?: string }>(({ className }
   color: ${(props) => props.color || 'var(--h3-color)'};
   font-family: var(--h3-font-family);
   && {
-    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
+    margin: 0 0 var(--h3-margin-bottom);
   }
 `;

package/src/config.ts

@@ -373,7 +373,10 @@ const catalogSchema = {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },
     groupByFirstFilter: { type: 'boolean' },
-    filterValuesCasing: { type: 'string', enum: ['sentence'] },
+    filterValuesCasing: {
+      type: 'string',
+      enum: ['sentence', 'original', 'lowercase', 'uppercase'],
+    },
     items: navItemsSchema,
     requiredPermission: { type: 'string' },
     separateVersions: { type: 'boolean' },
@@ -417,6 +420,7 @@ export const themeConfigSchema = {
       properties: {
         items: navItemsSchema,
         copyrightText: { type: 'string' },
+        logo: hideConfigSchema,
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
@@ -721,3 +725,9 @@ export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchem
 export type CatalogConfig = FromSchema<typeof catalogSchema>;
 export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
 export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;
+
+export enum ScorecardStatus {
+  BelowMinimum = 'Below minimum',
+  Highest = 'Highest',
+  Minimum = 'Minimum',
+}

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
 
@@ -267,13 +268,13 @@ const typography = css`
    * @presenter LineHeight
    */
 
-  --line-height-base: 22px;
-  --line-height-xsm: 18px;
-  --line-height-sm: 20px;
-  --line-height-md: 24px;
-  --line-height-lg: 26px;
-  --line-height-xlg: 28px;
-  --line-height-xxlg: 30px;
+  --line-height-base: 24px;
+  --line-height-xsm: 20px;
+  --line-height-sm: 22px;
+  --line-height-md: 26px;
+  --line-height-lg: 28px;
+  --line-height-xlg: 30px;
+  --line-height-xxlg: 32px;
 
   /**
     * @tokens Font Sizes
@@ -419,7 +420,7 @@ const headingsTypography = css`
   --h3-font-family: var(--heading-font-family); // @presenter FontFamily
   --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h3-font-size: 18px; // @presenter FontSize
-  --h3-line-height: 18px; // @presenter LineHeight
+  --h3-line-height: 22px; // @presenter LineHeight
   --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h3-text-color: var(--heading-text-color); // @presenter Color
@@ -593,9 +594,9 @@ const apiReferenceDocs = css`
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--color-warning); // @presenter Color
+  --schema-recursive-text-color: var(--color-warning-active); // @presenter Color
   --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
-  --schema-recursive-border-color: var(--color-warning-border); // @presenter Color
+  --schema-recursive-border-color: var(--color-warning-active); // @presenter Color
 
   /**
     * @tokens GraphQL Docs Reference Schema Non null label
@@ -701,9 +702,9 @@ const badges = css`
     * @tokens Deprecated Badge
     */
 
-  --badge-deprecated-text-color: var(--color-warning); // @presenter Color
+  --badge-deprecated-text-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-background-color: var(--color-warning-bg); // @presenter Color
-  --badge-deprecated-border-color: var(--color-warning-border); // @presenter Color
+  --badge-deprecated-border-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
@@ -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);