@redocly/theme 0.7.3 → 0.7.5

package/lib/Sidebar/ArrowBack.js

@@ -7,12 +7,12 @@ exports.ArrowBack = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Arrow = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ArrowBack" },
-    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
         react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/lib/Sidebar/SidebarLayout.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 interface SidebarLayoutProps {
     versions: React.ReactNode;
     menu: React.ReactNode;
+    backLink?: {
+        label: string;
+        slug: string;
+    };
 }
-export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu, backLink, }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -12,7 +12,9 @@ const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-function SidebarLayout({ versions, menu }) {
+const ArrowBack_1 = require("../Sidebar/ArrowBack");
+const Link_1 = require("../mocks/Link");
+function SidebarLayout({ versions, menu, backLink, }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -23,9 +25,32 @@ function SidebarLayout({ versions, menu }) {
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
+            (backLink && (react_1.default.createElement(BackLinkWrapper, null,
+                react_1.default.createElement(Link_1.Link, { to: backLink.slug },
+                    react_1.default.createElement(ArrowBack_1.ArrowBack, null),
+                    "Back to ",
+                    backLink.label)))) ||
+                null,
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));
 }
 exports.SidebarLayout = SidebarLayout;
+const BackLinkWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
+    var(--sidebar-item-padding-horizontal)
+    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
+
+  a {
+    color: var(--sidebar-back-button-text-color);
+    font-size: var(--sidebar-back-button-font-size);
+    font-family: var(--sidebar-back-button-font-family);
+    text-decoration: none;
+    &:hover {
+      color: var(--sidebar-back-button-hover-text-color);
+    }
+  }
+
+  border-bottom: 1px solid var(--sidebar-border-color);
+`;
 const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=SidebarLayout.js.map

package/lib/config.d.ts

@@ -312,6 +312,68 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             text?: string | undefined;
         } | undefined;
     }>>>;
+    codeSnippet: z.ZodOptional<z.ZodDefault<z.ZodObject<{
+        copy: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+            buttonText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+            tooltipText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+            toasterText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+            toasterDuration: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
+        }, {
+            hide: z.ZodOptional<z.ZodBoolean>;
+        }>, "strip", z.ZodTypeAny, {
+            hide?: boolean | undefined;
+            buttonText?: string | undefined;
+            tooltipText?: string | undefined;
+            toasterText?: string | undefined;
+            toasterDuration?: number | undefined;
+        }, {
+            hide?: boolean | undefined;
+            buttonText?: string | undefined;
+            tooltipText?: string | undefined;
+            toasterText?: string | undefined;
+            toasterDuration?: number | undefined;
+        }>>>;
+        report: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
+            tooltipText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
+            label: z.ZodOptional<z.ZodString>;
+        }, {
+            hide: z.ZodOptional<z.ZodBoolean>;
+        }>, "strip", z.ZodTypeAny, {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        }, {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        }>>>;
+    }, "strict", z.ZodTypeAny, {
+        copy: {
+            hide?: boolean | undefined;
+            buttonText?: string | undefined;
+            tooltipText?: string | undefined;
+            toasterText?: string | undefined;
+            toasterDuration?: number | undefined;
+        };
+        report: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        };
+    }, {
+        copy?: {
+            hide?: boolean | undefined;
+            buttonText?: string | undefined;
+            tooltipText?: string | undefined;
+            toasterText?: string | undefined;
+            toasterDuration?: number | undefined;
+        } | undefined;
+        report?: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        } | undefined;
+    }>>>;
     markdown: z.ZodOptional<z.ZodDefault<z.ZodObject<{
         frontMatterKeysToResolve: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, "many">>>;
         lastUpdatedBlock: z.ZodOptional<z.ZodDefault<z.ZodObject<z.extendShape<{
@@ -359,40 +421,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             baseUrl?: string | undefined;
             icon?: string | undefined;
         }>>>;
-        copyCodeSnippet: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
-            buttonText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-            tooltipText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-            toasterText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-            toasterDuration: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
-        }, {
-            hide: z.ZodOptional<z.ZodBoolean>;
-        }>, "strip", z.ZodTypeAny, {
-            hide?: boolean | undefined;
-            buttonText?: string | undefined;
-            tooltipText?: string | undefined;
-            toasterText?: string | undefined;
-            toasterDuration?: number | undefined;
-        }, {
-            hide?: boolean | undefined;
-            buttonText?: string | undefined;
-            tooltipText?: string | undefined;
-            toasterText?: string | undefined;
-            toasterDuration?: number | undefined;
-        }>>>;
-        reportCodeSnippet: z.ZodDefault<z.ZodOptional<z.ZodObject<z.extendShape<{
-            tooltipText: z.ZodOptional<z.ZodDefault<z.ZodString>>;
-            label: z.ZodOptional<z.ZodString>;
-        }, {
-            hide: z.ZodOptional<z.ZodBoolean>;
-        }>, "strip", z.ZodTypeAny, {
-            hide?: boolean | undefined;
-            tooltipText?: string | undefined;
-            label?: string | undefined;
-        }, {
-            hide?: boolean | undefined;
-            tooltipText?: string | undefined;
-            label?: string | undefined;
-        }>>>;
     }, "strict", z.ZodTypeAny, {
         frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
@@ -411,18 +439,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             header?: string | undefined;
             depth?: number | undefined;
         };
-        copyCodeSnippet: {
-            hide?: boolean | undefined;
-            buttonText?: string | undefined;
-            tooltipText?: string | undefined;
-            toasterText?: string | undefined;
-            toasterDuration?: number | undefined;
-        };
-        reportCodeSnippet: {
-            hide?: boolean | undefined;
-            tooltipText?: string | undefined;
-            label?: string | undefined;
-        };
     }, {
         frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
@@ -441,18 +457,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             baseUrl?: string | undefined;
             icon?: string | undefined;
         } | undefined;
-        copyCodeSnippet?: {
-            hide?: boolean | undefined;
-            buttonText?: string | undefined;
-            tooltipText?: string | undefined;
-            toasterText?: string | undefined;
-            toasterDuration?: number | undefined;
-        } | undefined;
-        reportCodeSnippet?: {
-            hide?: boolean | undefined;
-            tooltipText?: string | undefined;
-            label?: string | undefined;
-        } | undefined;
     }>>>;
     openapi: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
     graphql: z.ZodOptional<z.ZodObject<{}, "passthrough", z.ZodTypeAny, {}, {}>>;
@@ -549,6 +553,20 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
         placement?: string | undefined;
         shortcuts?: string[] | undefined;
     } | undefined;
+    codeSnippet?: {
+        copy: {
+            hide?: boolean | undefined;
+            buttonText?: string | undefined;
+            tooltipText?: string | undefined;
+            toasterText?: string | undefined;
+            toasterDuration?: number | undefined;
+        };
+        report: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        };
+    } | undefined;
     markdown?: {
         frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
@@ -567,18 +585,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             header?: string | undefined;
             depth?: number | undefined;
         };
-        copyCodeSnippet: {
-            hide?: boolean | undefined;
-            buttonText?: string | undefined;
-            tooltipText?: string | undefined;
-            toasterText?: string | undefined;
-            toasterDuration?: number | undefined;
-        };
-        reportCodeSnippet: {
-            hide?: boolean | undefined;
-            tooltipText?: string | undefined;
-            label?: string | undefined;
-        };
     } | undefined;
     openapi?: {} | undefined;
     graphql?: {} | undefined;
@@ -694,6 +700,20 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             text?: string | undefined;
         } | undefined;
     } | undefined;
+    codeSnippet?: {
+        copy?: {
+            hide?: boolean | undefined;
+            buttonText?: string | undefined;
+            tooltipText?: string | undefined;
+            toasterText?: string | undefined;
+            toasterDuration?: number | undefined;
+        } | undefined;
+        report?: {
+            hide?: boolean | undefined;
+            tooltipText?: string | undefined;
+            label?: string | undefined;
+        } | undefined;
+    } | undefined;
     markdown?: {
         frontMatterKeysToResolve?: string[] | undefined;
         lastUpdatedBlock?: {
@@ -712,18 +732,6 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
             baseUrl?: string | undefined;
             icon?: string | undefined;
         } | undefined;
-        copyCodeSnippet?: {
-            hide?: boolean | undefined;
-            buttonText?: string | undefined;
-            tooltipText?: string | undefined;
-            toasterText?: string | undefined;
-            toasterDuration?: number | undefined;
-        } | undefined;
-        reportCodeSnippet?: {
-            hide?: boolean | undefined;
-            tooltipText?: string | undefined;
-            label?: string | undefined;
-        } | undefined;
     } | undefined;
     openapi?: {} | undefined;
     graphql?: {} | undefined;

package/lib/config.js

@@ -117,6 +117,30 @@ exports.ThemeConfig = zod_1.z
         .strict()
         .optional()
         .default({}),
+    codeSnippet: zod_1.z
+        .object({
+        copy: zod_1.z
+            .object({
+            buttonText: zod_1.z.string().default('Copy').optional(),
+            tooltipText: zod_1.z.string().default('Copy to clipboard').optional(),
+            toasterText: zod_1.z.string().default('Copied!').optional(),
+            toasterDuration: zod_1.z.number().default(1500).optional(),
+        })
+            .extend(HideConfig.shape)
+            .optional()
+            .default({}),
+        report: zod_1.z
+            .object({
+            tooltipText: zod_1.z.string().default('Report a problem').optional(),
+            label: zod_1.z.string().optional(),
+        })
+            .extend(HideConfig.shape)
+            .optional()
+            .default({ hide: true }),
+    })
+        .strict()
+        .default({})
+        .optional(),
     markdown: zod_1.z
         .object({
         frontMatterKeysToResolve: zod_1.z.array(zod_1.z.string()).default(['image', 'links']).optional(),
@@ -145,24 +169,6 @@ exports.ThemeConfig = zod_1.z
             .extend(HideConfig.shape)
             .default({})
             .optional(),
-        copyCodeSnippet: zod_1.z
-            .object({
-            buttonText: zod_1.z.string().default('Copy').optional(),
-            tooltipText: zod_1.z.string().default('Copy to clipboard').optional(),
-            toasterText: zod_1.z.string().default('Copied').optional(),
-            toasterDuration: zod_1.z.number().default(1500).optional(),
-        })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({}),
-        reportCodeSnippet: zod_1.z
-            .object({
-            tooltipText: zod_1.z.string().default('Report a problem').optional(),
-            label: zod_1.z.string().optional(),
-        })
-            .extend(HideConfig.shape)
-            .optional()
-            .default({ hide: true }), // TODO: temporary disabled
     })
         .strict()
         .default({})

package/lib/globalStyle.js

@@ -512,7 +512,7 @@ const sidebar = (0, styled_components_1.css) `
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
+  --sidebar-back-button-text-color: var(--link-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;
@@ -1687,7 +1687,7 @@ const inputs = (0, styled_components_1.css) `
   --input-border: none; // @presenter Border
   --input-border-radius: var(--border-radius); // @presenter BorderRadius
   --input-font-size: var(--font-size-base); // @presenter FontSize
-  --input-font-family: var(--code-font-family); // @presenter FontFamily
+  --input-font-family: var(--font-family-base); // @presenter FontFamily
   --input-line-height: 1.15em; // @presenter LineHeight
   --input-padding: 8px;
 
@@ -1697,6 +1697,8 @@ const inputs = (0, styled_components_1.css) `
   --input-focus-text-color: var(--text-color-inverse); // @presenter Color
   --input-placeholder-text-color: var(--text-color-inverse); // @presenter Color
 
+  --checkbox-backround-color: var(--background-color);
+  --checkbox-checked-backround-color: var(--color-primary-500);
   // @tokens End
 `;
 const markdown = (0, styled_components_1.css) `
@@ -1899,7 +1901,7 @@ const pages = (0, styled_components_1.css) `
 
   --page-404-font-family: var(--font-family-base); // @presenter FontFamily
 
-  --page-404-header-text-color: #000; 
+  --page-404-header-text-color: #000;
   --page-404-header-font-size: 14em; // @presenter FontSize
   --page-404-header-font-weight: 600; // @presenter FontWeight
   --page-404-header-line-height: 1.2; // @presenter LineHeight
@@ -1919,30 +1921,30 @@ const pages = (0, styled_components_1.css) `
   * @tokens 403 Page
   * @presenter Color
   */
- 
+
    --page-403-font-family: var(--font-family-base); // @presenter FontFamily
- 
+
    --page-403-header-text-color: #000;
    --page-403-header-font-size: 14em; // @presenter FontSize
    --page-403-header-font-weight: 600; // @presenter FontWeight
    --page-403-header-line-height: 1.2; // @presenter LineHeight
    --page-403-header-margin: 0; // @presenter Spacing
- 
+
    --page-403-description-text-color: #000;
    --page-403-description-font-size: 2em; // @presenter FontSize
    --page-403-description-font-weight: 400; // @presenter FontWeight
    --page-403-description-line-height: 1; // @presenter LineHeight
    --page-403-description-margin: 0; // @presenter Spacing
- 
+
    --page-403-button-margin: 4em; // @presenter Spacing
- 
+
    // @tokens End
 `;
 const modal = (0, styled_components_1.css) `
-  body:has([id='modal']) {
+  body:has(.modal) {
     overflow: hidden;
   }
-  
+
   --modal-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
   --modal-background-color: var(--background-color);

package/lib/mocks/hooks/index.d.ts

@@ -1,4 +1,6 @@
 import type { ThemeUIConfig } from '../../config';
+import type { ResolvedNavItem } from '@theme/types/portal';
+import type { CatalogConfig, FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
     label: string;
     link: string;
@@ -9,4 +11,6 @@ export declare function useSidebarSiblingsData(): {
     nextPage: PageLink | null;
     prevPage: PageLink | null;
 };
+export declare function usePageSharedData<T = unknown>(_id: string): T;
+export declare function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog;
 export {};

package/lib/mocks/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
+exports.useCatalog = exports.usePageSharedData = exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
 function useThemeConfig() {
     return {
         search: {
@@ -8,20 +8,22 @@ function useThemeConfig() {
             placement: 'navbar',
             shortcuts: ['ctrl+f', 'cmd+k', '/'],
         },
-        markdown: {
-            toc: { depth: 3, header: 'Table of contents', hide: false },
-            lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
-            copyCodeSnippet: {
+        codeSnippet: {
+            copy: {
                 hide: false,
                 buttonText: 'Copy',
                 tooltipText: 'Copy to clipboard',
                 toasterText: 'Copied',
                 toasterDuration: 1500,
             },
-            reportCodeSnippet: {
+            report: {
                 hide: false,
                 tooltipText: 'Report a problem',
             },
+        },
+        markdown: {
+            toc: { depth: 3, header: 'Table of contents', hide: false },
+            lastUpdatedBlock: { hide: false, format: 'timeago', locale: 'en-US' },
             editPage: {
                 baseUrl: '',
                 text: 'Edit this page',
@@ -59,4 +61,12 @@ function useSidebarSiblingsData() {
     };
 }
 exports.useSidebarSiblingsData = useSidebarSiblingsData;
+function usePageSharedData(_id) {
+    throw new Error('Mock not implemented yet.');
+}
+exports.usePageSharedData = usePageSharedData;
+function useCatalog(_items, _config) {
+    throw new Error('Mock not implemented yet.');
+}
+exports.useCatalog = useCatalog;
 //# sourceMappingURL=index.js.map

package/lib/ui/Checkbox.d.ts

@@ -0,0 +1 @@
+export declare const Checkbox: import("styled-components").StyledComponent<"input", any, {}, never>;

package/lib/ui/Checkbox.js

@@ -0,0 +1,70 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Checkbox = styled_components_1.default.input `
+  position: absolute;
+  opacity: 0;
+
+  & + label {
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+
+    div {
+      margin-top: 1px;
+    }
+    p {
+      line-height: 1.2;
+    }
+
+    &::before {
+      content: '';
+      margin-right: 10px;
+      display: inline-block;
+      vertical-align: top;
+      width: 18px;
+      height: 18px;
+      background: var(--checkbox-backround-color);
+      border: 1px solid rgba(0, 0, 0, 0.23);
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+  }
+
+  &:focus + label:before {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+
+  &:checked + label {
+    &::before {
+      background: var(--checkbox-checked-backround-color);
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 5px;
+      top: 10px;
+      background: var(--checkbox-backround-color);
+      width: 2px;
+      height: 2px;
+      box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white,
+        4px -8px 0 white;
+      transform: rotate(45deg);
+    }
+  }
+
+  &:disabled + label {
+    color: #b8b8b8;
+    cursor: auto;
+    &::before {
+      box-shadow: none;
+      background: #ddd;
+    }
+  }
+`;
+//# sourceMappingURL=Checkbox.js.map

package/lib/ui/Highlight.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare const HighlightContext: React.Context<string[]>;
+export declare function Highlight(props: {
+    children: React.ReactChildren | string;
+}): JSX.Element;

package/lib/ui/Highlight.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Highlight = exports.HighlightContext = void 0;
+const React = __importStar(require("react"));
+const highlight_words_core_1 = require("highlight-words-core");
+exports.HighlightContext = React.createContext([]);
+function Highlight(props) {
+    const { children } = props;
+    const searchWords = React.useContext(exports.HighlightContext);
+    if (!searchWords.length) {
+        return React.createElement(React.Fragment, null, "children") || null;
+    }
+    function highlight(str, childIdx = 0) {
+        const chunks = (0, highlight_words_core_1.findAll)({
+            searchWords,
+            textToHighlight: str,
+        });
+        return (React.createElement(React.Fragment, { key: childIdx }, chunks.map((chunk, idx) => {
+            const { end, highlight, start } = chunk;
+            const text = str.substr(start, end - start);
+            if (highlight) {
+                return React.createElement("mark", { key: idx }, text);
+            }
+            else {
+                return text;
+            }
+        })));
+    }
+    if (typeof children === 'string') {
+        return highlight(children);
+    }
+    else if (Array.isArray(children)) {
+        return (React.createElement(React.Fragment, null, children.map((child, idx) => typeof children === 'string' ? highlight(child, idx) : child || null)));
+    }
+    else {
+        return React.createElement(React.Fragment, null, "children") || null;
+    }
+}
+exports.Highlight = Highlight;
+//# sourceMappingURL=Highlight.js.map

package/lib/ui/darkColors.js

@@ -62,12 +62,14 @@ exports.darkMode = (0, styled_components_1.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -63,6 +63,7 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
+    "@types/highlight-words-core": "^1.2.1",
     "@types/jest": "^29.2.1",
     "@types/jest-when": "^3.5.2",
     "@types/lodash.throttle": "^4.1.7",
@@ -103,7 +104,8 @@
   },
   "dependencies": {
     "hotkeys-js": "^3.10.1",
-    "timeago.js": "^4.0.2"
+    "timeago.js": "^4.0.2",
+    "highlight-words-core": "^1.2.2"
   },
   "nx": {
     "namedInputs": {