@redocly/theme 0.7.4 → 0.7.5

package/src/ui/Highlight.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { findAll } from 'highlight-words-core';
+
+export const HighlightContext = React.createContext<string[]>([]);
+
+export function Highlight(props: { children: React.ReactChildren | string }): JSX.Element {
+  const { children } = props;
+  const searchWords = React.useContext(HighlightContext);
+
+  if (!searchWords.length) {
+    return <>children</> || null;
+  }
+
+  function highlight(str: string, childIdx: number = 0) {
+    const chunks = findAll({
+      searchWords,
+      textToHighlight: str,
+    });
+
+    return (
+      <React.Fragment key={childIdx}>
+        {chunks.map((chunk, idx) => {
+          const { end, highlight, start } = chunk;
+          const text = str.substr(start, end - start);
+          if (highlight) {
+            return <mark key={idx}>{text}</mark>;
+          } else {
+            return text;
+          }
+        })}
+      </React.Fragment>
+    );
+  }
+
+  if (typeof children === 'string') {
+    return highlight(children);
+  } else if (Array.isArray(children)) {
+    return (
+      <>
+        {children.map((child, idx) =>
+          typeof children === 'string' ? highlight(child, idx) : child || null,
+        )}
+      </>
+    );
+  } else {
+    return <>children</> || null;
+  }
+}

package/src/ui/darkColors.tsx

@@ -60,12 +60,14 @@ export const darkMode = css`
   --tooltip-text-color: #fff;
   --md-table-head-background-color: var(--color-secondary-300);
   --md-tabs-hover-tab-border-color: var(--color-secondary-500);
-  --wide-tile-background-color: #000000;
-  --thin-tile-background-color: #000000;
+  --thin-tile-background-color: #1d242d;
+  --wide-tile-background-color: #1d242d;
   --page-404-header-text-color: #fff;
   --page-404-description-text-color: #fff;
   --page-403-header-text-color: #fff;
   --page-403-description-text-color: #fff;
+  --checkbox-backround-color: var(--color-secondary-900);
+  --checkbox-checked-backround-color: var(--color-primary-400);
 
   background-color: var(--background-color);
   color: var(--text-color);

package/lib/hooks/useReportDialog.d.ts

@@ -1 +0,0 @@
-export declare function useReportDialog(initialState?: boolean): [boolean, () => void, () => void];

package/lib/hooks/useReportDialog.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReportDialog = void 0;
-const react_1 = require("react");
-function useReportDialog(initialState = false) {
-    const [isDialogShown, setIsShown] = (0, react_1.useState)(initialState);
-    const showDialog = () => {
-        setIsShown(true);
-    };
-    const hideDialog = () => {
-        setIsShown(false);
-    };
-    return [isDialogShown, showDialog, hideDialog];
-}
-exports.useReportDialog = useReportDialog;
-//# sourceMappingURL=useReportDialog.js.map

package/src/hooks/useReportDialog.ts

@@ -1,14 +0,0 @@
-import { useState } from 'react';
-
-export function useReportDialog(initialState = false): [boolean, () => void, () => void] {
-  const [isDialogShown, setIsShown] = useState(initialState);
-
-  const showDialog = () => {
-    setIsShown(true);
-  };
-  const hideDialog = () => {
-    setIsShown(false);
-  };
-
-  return [isDialogShown, showDialog, hideDialog];
-}