@redocly/theme 0.2.0 → 0.2.3

package/src/Markdown/MarkdownWrapper.tsx

@@ -246,6 +246,30 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     ${headingAnchor()};
   }
 
+  h1.md code {
+    font-size: var(--h1-font-size);
+  }
+
+  h2.md code {
+    font-size: var(--h2-font-size);
+  }
+
+  h3.md code {
+    font-size: var(--h3-font-size);
+  }
+
+  h4.md code {
+    font-size: var(--h4-font-size);
+  }
+
+  h5.md code {
+    font-size: var(--h5-font-size);
+  }
+
+  h6.md code {
+    font-size: var(--h6-font-size);
+  }
+
   code {
     color: var(--inline-code-color);
     background-color: var(--inline-code-background-color);

package/src/Navbar/Navbar.tsx

@@ -8,6 +8,7 @@ import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
+import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
@@ -37,6 +38,7 @@ export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Elemen
       <NavbarMenu menuItems={menu} />
       {hideSearch ? null : search}
       {profile}
+      <ColorModeSwitcher />
     </NavbarContainer>
   );
 }

package/src/SourceCode/SourceCode.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { highlight, addLineNumbers } from '@theme/utils';
 import {
@@ -72,16 +72,27 @@ export function SourceCode({
   withLineNumbers,
   startLineNumber,
 }: SourceCodeProps): JSX.Element {
-  const _source = source || externalSource?.sample?.get?.(externalSource) || '';
+  const [sourceCode, setSourceCode] = useState<string>(source ?? '');
+
+  // The same initial value should be returned for ssr and frontend to avoid issues
+  // Because we don't have session storage in ssr and can't get the security details there
+  // Issue for more details https://github.com/Redocly/reference-docs/issues/888
+  useEffect(() => {
+    const _externalSource = externalSource?.sample?.get?.(externalSource) ?? '';
+    if (_externalSource) {
+      setSourceCode(_externalSource);
+    }
+  }, [externalSource]);
+
   if (withCopyButton) {
     return (
-      <CopyButtonWrapper data={source} data-component-name="SourceCode/SourceCode">
+      <CopyButtonWrapper data={sourceCode} data-component-name="SourceCode/SourceCode">
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
             <Code
               lang={lang}
-              source={_source}
+              source={sourceCode}
               withLineNumbers={withLineNumbers}
               startLineNumber={startLineNumber}
               dataTestId={dataTestId}
@@ -96,7 +107,7 @@ export function SourceCode({
     <Code
       dataTestId={dataTestId}
       lang={lang}
-      source={_source}
+      source={sourceCode}
       withLineNumbers={withLineNumbers}
       startLineNumber={startLineNumber}
       data-component-name="SourceCode/SourceCode"

package/src/TableOfContent/TableOfContent.tsx

@@ -1,6 +1,8 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 
+import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
+
 import { useFullHeight } from '@theme/hooks/useFullHeight';
 import { useThemeSettings } from '@portal/hooks';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
@@ -20,16 +22,13 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   useFullHeight(sidebar);
   const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
 
-  const getDisplayedHeaderIds = () => {
-    if (!headings) {
-      return [];
-    }
-    return headings
-      .filter((header) => header && tocMaxDepth >= header.depth)
-      .map((header) => header?.id);
-  };
+  const displayedHeadings = getDisplayedHeadings(headings, tocMaxDepth);
+  const leastDepth = getLeastDepth(displayedHeadings);
 
-  const activeHeadingId = useActiveHeading(contentWrapper, getDisplayedHeaderIds());
+  const activeHeadingId = useActiveHeading(
+    contentWrapper,
+    getDisplayedHeadingsIds(displayedHeadings),
+  );
 
   if (toc?.hide) {
     return null;
@@ -47,23 +46,17 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
         <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
           <TableOfContentItems ref={sidebar}>
             <TocHeader>{toc?.header?.label || 'On this page'}</TocHeader>
-            {headings.map((heading: MdHeading | null, idx: number) => {
+            {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
               // TODO: not sure about !heading
               if (!heading) {
                 return null;
               }
-              if (idx === 0 && heading.depth === 1) {
-                return null;
-              }
-              if (heading.depth && heading.depth > tocMaxDepth) {
-                return null;
-              }
               const href = '#' + heading.id;
               return (
                 <MenuItem
                   key={href + idx}
                   href={href}
-                  depth={heading.depth || 0}
+                  depth={heading.depth - leastDepth + 1 || 0}
                   className={activeHeadingId === heading.id ? 'active' : ''}
                   dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                   data-cy={`toc-${heading.value}`}
@@ -90,7 +83,7 @@ const MenuItem = styled.a<{ depth: number }>`
   cursor: pointer;
   font-size: 0.8em;
   padding: 10px 15px;
-  padding-left: ${({ depth }) => (depth - 1) * 15}px;
+  padding-left: ${({ depth }) => depth * 15}px;
   transition: background-color 0.3s, color 0.3s;
   text-decoration: none;
   word-break: break-word;

package/src/TableOfContent/utils.ts

@@ -0,0 +1,45 @@
+import { MdHeading } from '@theme/types/portal';
+
+export function getDisplayedHeadings(
+  headings: Array<MdHeading | null> | null | undefined,
+  tocMaxDepth: number,
+): Array<MdHeading | null> {
+  if (!headings) {
+    return [];
+  }
+  return headings.filter((heading, idx) => {
+    if (!heading) {
+      return false;
+    }
+    if (idx === 0 && heading.depth === 1) {
+      return false;
+    }
+    if (heading.depth && heading.depth > tocMaxDepth) {
+      return false;
+    }
+    return true;
+  });
+}
+
+export function getDisplayedHeadingsIds(
+  headings: Array<MdHeading | null> | null | undefined,
+): Array<string | undefined> {
+  if (!headings) {
+    return [];
+  }
+  return headings.map((header) => header?.id);
+}
+
+export function getLeastDepth(headings: Array<MdHeading | null> | null | undefined): number {
+  if (!headings || headings.length === 0) {
+    return 1;
+  }
+  let depth = null;
+  for (const heading of headings) {
+    if (!heading) continue;
+    if (depth === null || depth > heading.depth) {
+      depth = heading.depth;
+    }
+  }
+  return depth ?? 1;
+}

package/src/globalStyle.ts

@@ -79,6 +79,23 @@ const baseColors = css`
 
   // @tokens End
 `;
+const baseDarkColors = css`
+  /* === Palette === */
+
+  /**
+          * @tokens Base Colors
+          * @presenter Color
+          */
+  --color-primary-100: #969ca6;
+  --color-primary-200: #7f8693;
+  --color-primary-300: #7d7d80;
+  --color-primary-400: #4b4f56;
+  --color-primary-500: #404042;
+  --color-primary-600: #36383d;
+  --color-primary-700: #28282a;
+  --color-primary-800: #202021;
+  --color-primary-900: #000000;
+`;
 
 const httpColors = css`
   /**
@@ -812,6 +829,14 @@ const portalSearch = css`
   // @tokens End
 `;
 
+export const lightMode = css`
+  ${baseColors};
+`;
+
+export const darkMode = css`
+  ${baseDarkColors}
+`;
+
 export const styles = css`
   :root {
     ${baseColors}
@@ -837,8 +862,12 @@ export const styles = css`
 
     ${openapiAndGraphqlDocs}
   }
+
+  :root.dark {
+    ${darkMode};
+  }
 `;
 
 export const GlobalStyle = createGlobalStyle`
-  ${styles}
+  ${styles};
 `;

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ColorModeIconProps {
+  mode?: 'dark' | 'light' | string;
+  className?: string;
+}
+
+function Icon({ mode, className }: ColorModeIconProps) {
+  switch (mode) {
+    case 'dark':
+      return (
+        <svg
+          className={className}
+          data-testid="dark"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+        </svg>
+      );
+    case 'light':
+      return (
+        <svg
+          data-testid="light"
+          className={className}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          data-testid="custom"
+          className={className}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" />
+        </svg>
+      );
+  }
+}
+
+export const ColorModeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
+}))`
+  width: var(--navbar-item-font-size);
+  box-sizing: border-box;
+  fill: var(--navbar-text-color);
+`;

package/src/icons/ColorModeIcon/index.ts

@@ -0,0 +1,2 @@
+export { ColorModeIcon } from '@theme/icons/ColorModeIcon/ColorModeIcon';
+export type { ColorModeIconProps } from '@theme/icons/ColorModeIcon/ColorModeIcon';

package/src/icons/index.ts

@@ -1,3 +1,4 @@
 export * from '@theme/icons/ShelfIcon';
 export * from '@theme/icons/AlertIcon';
 export * from '@theme/icons/ArrowIcon';
+export * from '@theme/icons/ColorModeIcon';

package/src/index.ts

@@ -15,3 +15,4 @@ export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
 export * from './Profile';
+export * from './ColorModeSwitcher';

package/src/mocks/hooks/index.ts

@@ -16,6 +16,10 @@ export function useThemeSettings(_: string): RawTheme['settings'] {
       nextPageLink: { label: 'next page theme settings label' },
       previousPageLink: { label: 'prev page theme settings label' },
     },
+    colorMode: {
+      modes: ['light', 'dark'],
+      default: 'light',
+    },
   };
 }
 

package/{settings.yaml → src/settings.yaml}

@@ -17,3 +17,9 @@ sidebar:
   hide: false
 footer:
   hide: false
+colorMode:
+  hide: false
+  detect: true
+  modes:
+    - 'light'
+    - 'dark'