From 0fe8352ab057dfbbf690a723b2ccfc15b9977f4a Mon Sep 17 00:00:00 2001
From: Marcin Aman <marcin.aman@gmail.com>
Date: Wed, 4 Aug 2021 17:02:31 +0200
Subject: Webhelp-like frontend

---
 .../frontend/src/main/components/app/index.scss    |  7 +-
 .../src/main/components/search/search.scss         | 90 ++++++++++++++++------
 2 files changed, 71 insertions(+), 26 deletions(-)

(limited to 'plugins/base/frontend/src')

diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss
index 97f91292..e78edf81 100644
--- a/plugins/base/frontend/src/main/components/app/index.scss
+++ b/plugins/base/frontend/src/main/components/app/index.scss
@@ -18,10 +18,9 @@ html,
 
 .search-content {
   z-index: 8;
-  background-color: #f4f4f4;
 }
 
-@media screen and (max-width: 759px){
-    .search-content {
-    }
+@media screen and (max-width: 759px) {
+  .search-content {
+  }
 }
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 8965c5ea..0ea6da19 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -1,11 +1,16 @@
+$font-color: hsla(0, 0%, 100%, 0.8);
+$secondary-font-color: hsla(0, 0%, 100%, 0.6);
+
 .search {
   button {
-    border: none;
-    fill: #637282;
-    background: #F4F4F4;
-    cursor: pointer;
     margin-top: 3px;
 
+    cursor: pointer;
+
+    border: none;
+    background: var(--color-dark);
+    fill: var(--background-color);
+
     &:focus {
       outline: none;
     }
@@ -13,40 +18,81 @@
 }
 
 .popup-wrapper {
-    min-width: calc(100% - 360px) !important;
+  min-width: calc(100% - 322px) !important;
+
+  border: 1px solid hsla(0, 0%, 100%, 0.2) !important;
+
+  background-color: #27282c !important;
+
+  [class^="filterWrapper"] {
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
+  }
+
+  input {
+    color: $font-color !important;
+
+    font-weight: normal !important;
+  }
+
+  span[data-test-custom="ring-select-popup-filter-icon"] {
+    color: #fff;
+  }
+
+  button[data-test="ring-input-clear"] {
+    color: #fff !important;
+  }
 }
 
-@media screen and (max-width: 759px){
-    .popup-wrapper {
-      min-width: 100% !important;
-    }
+@media screen and (max-width: 759px) {
+  .popup-wrapper {
+    min-width: 100% !important;
+  }
 }
 
 .template-wrapper {
-  height: 32px;
   display: grid;
+
+  height: 32px;
   grid-template-columns: auto auto;
+
+  strong {
+    color: $font-color;
+  }
+
   span {
-    line-height: 32px;  
+    color: $font-color;
+
+    line-height: 32px;
+
+    &.template-description {
+      color: $secondary-font-color;
+      justify-self: end;
+    }
   }
 }
 
-@media screen and (max-width: 759px){
-    .template-wrapper {
-        display: flex;
-        height: auto;
-        flex-direction: column;
-        span {
-            line-height: unset;
-        }
+@media screen and (max-width: 759px) {
+  .template-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    height: auto;
+
+    span {
+      line-height: unset;
     }
+  }
 }
 
 .template-name {
   justify-self: start;
 }
 
-.template-description {
-  color: gray;
-  justify-self: end;
+/* remove fade at the bottom */
+[class^="fade"] {
+  display: none;
+}
+
+[class*="hover"] {
+  background-color: hsla(0, 0%, 100%, 0.1) !important;
 }
-- 
cgit 


From 79463f06a953de2f2c2ec877f34deaed658b3471 Mon Sep 17 00:00:00 2001
From: Marcin Aman <marcin.aman@gmail.com>
Date: Thu, 12 Aug 2021 14:49:26 +0200
Subject: Remove unused components, docs, change icon to new kotlin logo and
 add hamburger for mobile

---
 .../doc/docs/user_guide/base-specific/frontend.md  | 14 +----
 .../main/components/navigationPaneSearch/clear.svg |  3 -
 .../navigationPaneSearch/navigationPaneSearch.scss | 37 -----------
 .../navigationPaneSearch/navigationPaneSearch.tsx  | 71 ----------------------
 .../main/components/pageSummary/pageSummary.scss   | 71 ----------------------
 .../main/components/pageSummary/pageSummary.tsx    | 65 --------------------
 plugins/base/frontend/src/main/components/root.tsx | 37 ++---------
 .../src/main/kotlin/renderers/html/HtmlRenderer.kt |  8 +--
 .../kotlin/renderers/html/htmlPreprocessors.kt     |  2 -
 .../src/main/resources/dokka/images/docs_logo.svg  |  7 ---
 .../src/main/resources/dokka/images/logo-icon.svg  | 13 +++-
 .../main/resources/dokka/styles/logo-styles.css    |  3 -
 .../base/src/main/resources/dokka/styles/style.css | 18 ++----
 13 files changed, 24 insertions(+), 325 deletions(-)
 delete mode 100644 plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg
 delete mode 100644 plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
 delete mode 100644 plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
 delete mode 100644 plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
 delete mode 100644 plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
 delete mode 100644 plugins/base/src/main/resources/dokka/images/docs_logo.svg
 delete mode 100644 plugins/base/src/main/resources/dokka/styles/logo-styles.css

(limited to 'plugins/base/frontend/src')

diff --git a/docs/src/doc/docs/user_guide/base-specific/frontend.md b/docs/src/doc/docs/user_guide/base-specific/frontend.md
index 62f72af1..dc1b0c2e 100644
--- a/docs/src/doc/docs/user_guide/base-specific/frontend.md
+++ b/docs/src/doc/docs/user_guide/base-specific/frontend.md
@@ -24,7 +24,6 @@ Dokka uses 3 stylesheets:
 
 * `style.css` - main css file responsible for styling the page
 * `jetbrains-mono.css` - fonts used across dokka
-* `logo-styles.css` - logo styling
 
 User can choose to add or override those files. 
 Resources will be overridden when in `pluginConfiguration` block there is a resource with the same name.
@@ -37,15 +36,4 @@ Keep in mind that this value will be pased exactly to the output html, so it has
 ## Separating inherited members
 
 By setting a boolean property `separateInheritedMembers` dokka will split inherited members (like functions, properties etc.) 
-from ones declared in viewed class. Separated members will have it's own tabs on the page.
-
-### Examples
-In order to override a logo and style it accordingly a simple css file named `logo-styles.css` is needed:
-```css
-#logo {
-    background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Ubuntu_logo.svg');
-    /* other styles required to make your page pretty */
-}
-```
-
-For build system specific instructions please visit dedicated pages: [gradle](../gradle/usage.md#Applying plugins), [maven](../maven/usage.md#Applying plugins) and [cli](../cli/usage.md#Configuration options)
+from ones declared in viewed class. Separated members will have it's own tabs on the page.
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg b/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg
deleted file mode 100644
index ad6a2026..00000000
--- a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.1374 1.80464L6.94205 5.99996L11.1374 10.1953L10.1947 11.138L5.99935 6.94267L1.80403 11.138L0.861328 10.1953L5.05664 5.99996L0.861328 1.80464L1.80403 0.861938L5.99935 5.05725L10.1947 0.861938L11.1374 1.80464Z" fill="#637282"/>
-</svg>
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
deleted file mode 100644
index 1a61e90f..00000000
--- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "src/main/scss/index.scss";
-
-$defaultHeight: 40px;
-
-div#paneSearch {
-
-    width: 248px;
-    margin: 0 auto;
-
-    input#navigation-pane-search {
-        background: $white;
-        border: 1px solid $grey-border;
-        box-sizing: border-box;
-        border-radius: 4px;
-        padding: 8px;
-        height: $defaultHeight;
-    }
-    
-    .navigation-pane-search {
-        padding-top: 16px;
-        width: 100%;
-    }
-
-    div.paneSearchInputWrapper {
-        position: relative;
-        span.paneSearchInputClearIcon {
-            position: absolute;
-            top: calc(50% + 2px); //Just to include a border
-            right: 8px;
-            cursor: pointer;
-        }
-    }
-}
-
-.navigation-pane-popup {
-    margin-top: 1.2em;
-}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
deleted file mode 100644
index 152e7719..00000000
--- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import {Select, List } from '@jetbrains/ring-ui';
-import { DokkaFuzzyFilterComponent } from '../search/dokkaFuzzyFilter';
-import { IWindow, Option } from '../search/types';
-import './navigationPaneSearch.scss';
-import ClearIcon from 'react-svg-loader!./clear.svg';
-import { relativizeUrlForRequest } from '../utils/requests';
-
-export const NavigationPaneSearch = () => {
-    const [navigationList, setNavigationList] = useState<Option[]>([]);
-    const [selected, onSelected] = useState<Option | null>(null);
-    const [filterValue, setFilterValue] = useState<string>('')
-    
-    const onChangeSelected = useCallback(
-        (element: Option) => {
-            window.location.replace(`${(window as IWindow).pathToRoot}${element.location}`)
-            onSelected(element);
-        },
-        [selected]
-    );
-
-    const onFilter = (filterValue: string) => {
-        setFilterValue(filterValue)
-    }
-
-    const onClearClick = () => {
-        setFilterValue('')
-    }
-
-    const shouldShowPopup = (filterState: string): boolean => {
-        return filterState.trim().length !== 0
-    }
-
-    useEffect(() => {
-        fetch(relativizeUrlForRequest('scripts/navigation-pane.json'))
-            .then(response => response.json())
-            .then((result) => {
-                setNavigationList(result.map((record: Option, idx: number) => {
-                    return {
-                        ...record,
-                        key: idx,
-                        rgItemType: List.ListProps.Type.CUSTOM
-                    }
-                }))
-            },
-            (error) => {
-                console.error('failed to fetch navigationPane data', error)
-                setNavigationList([])
-            })
-    }, [])
-  
-
-    return <div className={"paneSearchInputWrapper"}>
-            <DokkaFuzzyFilterComponent
-                    id="navigation-pane-search"
-                    className="navigation-pane-search"
-                    inputPlaceholder="Title filter"
-                    clear={true}
-                    type={Select.Type.INPUT_WITHOUT_CONTROLS}
-                    filter={{fuzzy:true, value: filterValue}}
-                    selected={selected}
-                    data={navigationList}
-                    popupClassName={"navigation-pane-popup"}
-                    onSelect={onChangeSelected}
-                    onFilter={onFilter}
-                    shouldShowPopup={shouldShowPopup}
-                    renderOptimization={false}
-                />
-                <span className={"paneSearchInputClearIcon"} onClick={onClearClick}><ClearIcon /></span>
-        </div>
-}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
deleted file mode 100644
index aaa897a8..00000000
--- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-@import "src/main/scss/index.scss";
-
-.page-summary {
-    background: $white;
-    border: 1px solid $grey-border;
-    position: fixed;
-    top: 25%;
-    max-height: 70vh;
-    right: -2px;
-    width: 250px;
-    z-index: 8;
-    transition: width .2s;
-
-    &.hidden {
-        width: 3em;
-        writing-mode: vertical-rl;
-        text-orientation: mixed;
-
-        .content-wrapper {
-            h4 {
-                margin: 0;
-                padding: 8px;
-            }
-        }
-    }
-
-    .content-wrapper {
-        padding: 0.5em 0 1em 0;
-        letter-spacing: 0.2px;
-
-        h4 {
-            margin: 0 2em;
-            font-weight: 600;
-        }
-
-        ul {
-            list-style-type: none;
-            width: 100%;
-            padding: 0;
-            margin: 1em 0;
-            overflow-x: hidden;
-            overflow-y: auto;
-            max-height: 60vh;
-
-            li {
-                width: 100%;
-                padding: 4px 0;
-
-                &:hover {
-                    background: $list-background-hover;
-                }
-
-                &>a {
-                    margin: 0 2em;
-                    cursor: pointer;
-                }
-
-                &.selected {
-                    border-left: 4px solid $hover-link-color;
-                }
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 759px){
-    /* hide it on smaller screens since it looks super weird when displayed with hidden menu */
-    .page-summary {
-        display: none;
-    }
-}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
deleted file mode 100644
index c5a8344f..00000000
--- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { useState, useEffect } from "react";
-import './pageSummary.scss'
-import _ from "lodash";
-import Scrollspy from 'react-scrollspy'
-
-type PageSummaryProps = {
-    entries: PageSummaryEntry[],
-    containerId: string, //Id of a container that has scroll enabled 
-    offsetComponentId: string, //Id of a top navbar component
-}
-
-type PageSummaryEntry = {
-    location: string,
-    label: string,
-    sourceSets: SourceSetFilterKey[]
-}
-
-type SourceSetFilterKey = string
-
-const getElementHeightFromDom = (elementId: string): number => document.getElementById(elementId).offsetHeight
-
-export const PageSummary: React.FC<PageSummaryProps> = ({ entries, containerId, offsetComponentId }: PageSummaryProps) => {
-    const [hidden, setHidden] = useState<Boolean>(true);
-    const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries)
-    const topOffset = getElementHeightFromDom(offsetComponentId)
-
-    useEffect(() => {
-        const handeEvent = (event: CustomEvent<SourceSetFilterKey[]>) => {
-            const displayable = entries.filter((entry) => entry.sourceSets.some((sourceset) => event.detail.includes(sourceset)))
-            setDisplayableEntries(displayable)
-        }
-
-        window.addEventListener('sourceset-filter-change', handeEvent)
-        return () => window.removeEventListener('sourceset-filter-change', handeEvent)
-    }, [entries])
-
-    const handleMouseHover = () => {
-        setHidden(!hidden)
-    }
-
-    const handleClick = (entry: PageSummaryEntry) => {
-        document.getElementById(containerId).scrollTo({
-            top: document.getElementById(entry.location).offsetTop - topOffset,
-            behavior: 'smooth'
-        })
-    }
-
-    let classnames = "page-summary"
-    if (hidden) classnames += " hidden"
-
-    return (
-        <div
-            className={classnames}
-            onMouseEnter={handleMouseHover}
-            onMouseLeave={handleMouseHover}
-        >
-            <div className={"content-wrapper"}>
-                <h4>On this page</h4>
-                {!hidden && <Scrollspy items={displayableEntries.map((e) => e.location)} currentClassName="selected">
-                    {displayableEntries.map((item) => <li><a onClick={() => handleClick(item)}>{item.label}</a></li>)}
-                </Scrollspy>}
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx
index 4161a4c1..9efbfdd0 100644
--- a/plugins/base/frontend/src/main/components/root.tsx
+++ b/plugins/base/frontend/src/main/components/root.tsx
@@ -1,47 +1,18 @@
 import React from 'react';
-import { render } from 'react-dom';
-import _ from "lodash";
+import {render} from 'react-dom';
 
 import App from "./app";
 import './app/index.scss';
-import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch';
-import { PageSummary } from './pageSummary/pageSummary';
 
-const renderNavigationPane = () => {
-  render(
-    <NavigationPaneSearch />,
-    document.getElementById('paneSearch')
-  )
-}
-
-const renderOnThisPage = () => {
-  for (const e of document.querySelectorAll('.tabs-section-body > div[data-togglable]')) {
-    const entries = Array.from(e.querySelectorAll('a[anchor-label]')).map((element: HTMLElement) => {
-      return {
-        location: element.getAttribute('data-name'),
-        label: element.getAttribute('anchor-label'),
-        sourceSets: _.sortBy(element.getAttribute('data-filterable-set').split(' '))
-      }
-    })
-    const unique = _.uniqBy(entries, ({label}) => label)
-    if (unique.length) {
-      const element = document.createElement('div')
-      render(<PageSummary entries={unique} containerId={'main'} offsetComponentId={'navigation-wrapper'}/>, element)
-      e.appendChild(element)
-    }
-  }
-}
 
 const renderMainSearch = () => {
-  render(<App />, document.getElementById('searchBar'));
+    render(<App/>, document.getElementById('searchBar'));
 }
 
 let renderApp = () => {
-  renderMainSearch();
-  renderNavigationPane();
-  renderOnThisPage();
+    renderMainSearch();
 
-  document.removeEventListener('DOMContentLoaded', renderApp);
+    document.removeEventListener('DOMContentLoaded', renderApp);
 };
 
 document.addEventListener('DOMContentLoaded', renderApp);
\ No newline at end of file
diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index 77086695..362447d1 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -798,6 +798,10 @@ open class HtmlRenderer(
             body {
                 div("navigation-wrapper") {
                     id = "navigation-wrapper"
+                    div {
+                        id = "leftToggler"
+                        span("icon-toggler")
+                    }
                     div("library-name") {
                         clickableLogo(page, pathToRoot)
                     }
@@ -821,10 +825,6 @@ open class HtmlRenderer(
                     }
                     div {
                         id = "main"
-                        div {
-                            id = "leftToggler"
-                            span("icon-toggler")
-                        }
                         templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) {
                             script(type = ScriptType.textJavaScript, src = "###scripts/main.js") {}
                         }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index 70f1c1d6..992c5eba 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
@@ -134,7 +134,6 @@ class ScriptsInstaller(private val dokkaContext: DokkaContext) : PageTransformer
 class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer {
     private val stylesPages = listOf(
         "styles/style.css",
-        "styles/logo-styles.css",
         "styles/jetbrains-mono.css",
         "styles/main.css"
     )
@@ -154,7 +153,6 @@ object AssetsInstaller : PageTransformer {
     private val imagesPages = listOf(
         "images/arrow_down.svg",
         "images/arrow_down_white.svg",
-        "images/docs_logo.svg",
         "images/logo-icon.svg",
         "images/go-to-top-icon.svg",
         "images/footer-go-to-link.svg",
diff --git a/plugins/base/src/main/resources/dokka/images/docs_logo.svg b/plugins/base/src/main/resources/dokka/images/docs_logo.svg
deleted file mode 100644
index 7c1e3ae8..00000000
--- a/plugins/base/src/main/resources/dokka/images/docs_logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="125" height="27" viewBox="0 0 125 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M89.1611 7.6297V25.6345V25.6867H103.843V21.8039H93.3589V10.3852H103.843V6.50244H89.1611V7.6297Z" fill="#27282C"/>
-<path d="M124.989 21.8039L114.778 10.3852H124.905V6.50244H109.059V10.3852L119.459 21.8039H109.059V25.6867H125V21.8039H124.989Z" fill="#27282C"/>
-<path d="M58.2978 7.76556C56.5872 6.46086 54.4463 5.67804 52.1271 5.67804C46.5336 5.67804 42 10.1871 42 15.7503C42 21.3135 46.5336 25.8226 52.1271 25.8226C54.4463 25.8226 56.5872 25.0502 58.2978 23.735V25.7182H62.4955V0H58.2978V7.76556ZM52.1271 21.8041C48.7584 21.8041 46.0298 19.0903 46.0298 15.7399C46.0298 12.3894 48.7584 9.67563 52.1271 9.67563C55.4958 9.67563 58.2243 12.3894 58.2243 15.7399C58.2138 19.0903 55.4853 21.8041 52.1271 21.8041Z" fill="#27282C"/>
-<path d="M75.9698 5.8656C70.3763 5.8656 65.8428 10.3746 65.8428 15.9379C65.8428 21.5011 70.3763 26.0101 75.9698 26.0101C81.5633 26.0101 86.0969 21.5011 86.0969 15.9379C86.0969 10.3746 81.5633 5.8656 75.9698 5.8656ZM75.9698 21.9916C72.6012 21.9916 69.8726 19.2779 69.8726 15.9274C69.8726 12.577 72.6012 9.86319 75.9698 9.86319C79.3385 9.86319 82.0671 12.577 82.0671 15.9274C82.0671 19.2779 79.3385 21.9916 75.9698 21.9916Z" fill="#27282C"/>
-<path d="M26 26H0V0H26L12.9243 12.9747L26 26Z" fill="#F8873C"/>
-</svg>
diff --git a/plugins/base/src/main/resources/dokka/images/logo-icon.svg b/plugins/base/src/main/resources/dokka/images/logo-icon.svg
index 1b3b3670..1fea0877 100755
--- a/plugins/base/src/main/resources/dokka/images/logo-icon.svg
+++ b/plugins/base/src/main/resources/dokka/images/logo-icon.svg
@@ -1,3 +1,10 @@
-<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26 26H0V0H26L12.9243 12.9747L26 26Z" fill="#F8873C"/>
-</svg>
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M64 64H0V0H64L31.3373 31.5369L64 64Z" fill="url(#paint0_radial)"/>
+    <defs>
+        <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(61.8732 2.63097) scale(73.3111)">
+            <stop offset="0.00343514" stop-color="#EF4857"/>
+            <stop offset="0.4689" stop-color="#D211EC"/>
+            <stop offset="1" stop-color="#7F52FF"/>
+        </radialGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/logo-styles.css b/plugins/base/src/main/resources/dokka/styles/logo-styles.css
deleted file mode 100644
index a3a07d75..00000000
--- a/plugins/base/src/main/resources/dokka/styles/logo-styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-#logo {
-    background-image: url(../images/docs_logo.svg);
-}
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 248bb531..d16b420d 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -694,6 +694,7 @@ small {
     align-self: flex-end;
     min-height: 30px;
     z-index: 0;
+    flex-wrap: wrap;
 }
 
 .platform-selector:hover {
@@ -1110,21 +1111,12 @@ div.runnablesample {
     }
 
     #leftToggler {
-        display: unset;
-        position: fixed;
-        top: 50%;
-        transform: translateY(-50%);
         z-index: 5;
         font-size: 20px;
         transition: margin .2s ease-out;
+        margin-right: 16px;
 
-        color: var(--average-color);
-        border: 1px solid var(--average-color);
-        border-left: 0;
-        border-top-right-radius: 1em;
-        border-bottom-right-radius: 1em;
-        padding: 8px 4px 8px 8px;
-        background-color: white;
+        color: var(--background-color);
     }
 
     #leftToggler .icon-toggler:hover {
@@ -1136,11 +1128,11 @@ div.runnablesample {
     }
 
     .icon-toggler::before {
-        content: "\232A";
+        content: "\2630";
     }
 
     #leftColumn.open ~ #main .icon-toggler::before {
-        content: "\2329";
+        content: "\2630";
         padding-right: 0.5em;
         margin-left: -0.5em;
     }
-- 
cgit 


From 742f96bdf5c0b842e68dfaf43f4ab3446e87e3df Mon Sep 17 00:00:00 2001
From: Marcin Aman <marcin.aman@gmail.com>
Date: Wed, 25 Aug 2021 14:54:34 +0200
Subject: Dark mode (#2081)

---
 plugins/base/api/base.api                          |   8 -
 .../src/main/components/assets/searchIcon.svg      |   2 +-
 .../src/main/components/search/search.scss         |   3 +-
 plugins/base/src/main/kotlin/DokkaBase.kt          |   4 -
 .../src/main/kotlin/renderers/html/HtmlRenderer.kt |  14 ++
 .../kotlin/renderers/html/htmlPreprocessors.kt     |  33 +---
 .../src/main/resources/dokka/images/arrow_down.svg |   2 +-
 .../resources/dokka/images/arrow_down_white.svg    |   3 -
 .../main/resources/dokka/images/theme-toggle.svg   |   4 +
 .../dokka/scripts/platform-content-handler.js      |  13 ++
 .../base/src/main/resources/dokka/styles/style.css | 192 ++++++++++-----------
 plugins/templating/api/templating.api              |   8 -
 .../JsonElementBasedTemplateProcessingStrategy.kt  |   6 -
 .../src/main/kotlin/templates/TemplatingPlugin.kt  |   6 -
 .../templates/AddToSearchCommandResolutionTest.kt  |   2 +-
 15 files changed, 124 insertions(+), 176 deletions(-)
 delete mode 100644 plugins/base/src/main/resources/dokka/images/arrow_down_white.svg
 create mode 100644 plugins/base/src/main/resources/dokka/images/theme-toggle.svg

(limited to 'plugins/base/frontend/src')

diff --git a/plugins/base/api/base.api b/plugins/base/api/base.api
index e7280cee..d4e2d067 100644
--- a/plugins/base/api/base.api
+++ b/plugins/base/api/base.api
@@ -33,7 +33,6 @@ public final class org/jetbrains/dokka/base/DokkaBase : org/jetbrains/dokka/plug
 	public final fun getLocationProviderFactory ()Lorg/jetbrains/dokka/plugability/ExtensionPoint;
 	public final fun getModulesAndPackagesDocumentation ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getNavigationPageInstaller ()Lorg/jetbrains/dokka/plugability/Extension;
-	public final fun getNavigationSearchInstaller ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getObviousFunctionsVisbilityFilter ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getOutputWriter ()Lorg/jetbrains/dokka/plugability/ExtensionPoint;
 	public final fun getPackageListCreator ()Lorg/jetbrains/dokka/plugability/Extension;
@@ -423,13 +422,6 @@ public final class org/jetbrains/dokka/base/renderers/html/NavigationPageKt {
 	public static final fun transform (Lorg/jetbrains/dokka/base/renderers/html/NavigationPage;Lkotlin/jvm/functions/Function1;)Lorg/jetbrains/dokka/base/renderers/html/NavigationPage;
 }
 
-public class org/jetbrains/dokka/base/renderers/html/NavigationSearchInstaller : org/jetbrains/dokka/base/renderers/html/NavigationDataProvider, org/jetbrains/dokka/transformers/pages/PageTransformer {
-	public fun <init> (Lorg/jetbrains/dokka/plugability/DokkaContext;)V
-	public fun createSearchRecordFromNode (Lorg/jetbrains/dokka/base/renderers/html/NavigationNode;Ljava/lang/String;)Lorg/jetbrains/dokka/base/renderers/html/SearchRecord;
-	public final fun getContext ()Lorg/jetbrains/dokka/plugability/DokkaContext;
-	public fun invoke (Lorg/jetbrains/dokka/pages/RootPageNode;)Lorg/jetbrains/dokka/pages/RootPageNode;
-}
-
 public class org/jetbrains/dokka/base/renderers/html/STRIKE : kotlinx/html/HTMLTag, kotlinx/html/HtmlBlockInlineTag {
 	public fun <init> (Ljava/util/Map;Lkotlinx/html/TagConsumer;)V
 	public fun getConsumer ()Lkotlinx/html/TagConsumer;
diff --git a/plugins/base/frontend/src/main/components/assets/searchIcon.svg b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
index 391b1cab..159f2578 100644
--- a/plugins/base/frontend/src/main/components/assets/searchIcon.svg
+++ b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/>
 </svg>
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 0ea6da19..b18af04e 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -9,7 +9,8 @@ $secondary-font-color: hsla(0, 0%, 100%, 0.6);
 
     border: none;
     background: var(--color-dark);
-    fill: var(--background-color);
+    fill: #fff;
+    fill: var(--dark-mode-and-search-icon-color);
 
     &:focus {
       outline: none;
diff --git a/plugins/base/src/main/kotlin/DokkaBase.kt b/plugins/base/src/main/kotlin/DokkaBase.kt
index c0e512c5..7bc2912c 100644
--- a/plugins/base/src/main/kotlin/DokkaBase.kt
+++ b/plugins/base/src/main/kotlin/DokkaBase.kt
@@ -205,10 +205,6 @@ class DokkaBase : DokkaPlugin() {
         htmlPreprocessors providing ::NavigationPageInstaller order { after(rootCreator) }
     }
 
-    val navigationSearchInstaller by extending {
-        htmlPreprocessors providing ::NavigationSearchInstaller order { after(rootCreator) }
-    }
-
     val scriptsInstaller by extending {
         htmlPreprocessors providing ::ScriptsInstaller order { after(rootCreator) }
     }
diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index 3086b82d..3cf914ce 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -758,6 +758,14 @@ open class HtmlRenderer(
                 templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) {
                     script { unsafe { +"""var pathToRoot = "###";""" } }
                 }
+                // This script doesn't need to be there but it is nice to have since app in dark mode doesn't 'blink' (class is added before it is rendered)
+                script { unsafe { +"""
+                    const storage = localStorage.getItem("dokka-dark-mode")
+                    const savedDarkMode = storage ? JSON.parse(storage) : false
+                    if(savedDarkMode === true){
+                        document.getElementsByTagName("html")[0].classList.add("theme-dark")
+                    }
+                """.trimIndent() } }
                 resources.forEach {
                     when {
                         it.substringBefore('?').substringAfterLast('.') == "css" ->
@@ -808,6 +816,12 @@ open class HtmlRenderer(
                     }
                     div("pull-right d-flex") {
                         filterButtons(page)
+                        button {
+                            id = "theme-toggle-button"
+                            span {
+                                id = "theme-toggle"
+                            }
+                        }
                         div {
                             id = "searchBar"
                         }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index 992c5eba..9faf4d17 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
@@ -49,37 +49,6 @@ abstract class NavigationDataProvider {
         }
 }
 
-open class NavigationSearchInstaller(val context: DokkaContext) : NavigationDataProvider(), PageTransformer {
-    private val mapper = jacksonObjectMapper()
-
-    open fun createSearchRecordFromNode(node: NavigationNode, location: String): SearchRecord =
-        SearchRecord(name = node.name, location = location)
-
-    override fun invoke(input: RootPageNode): RootPageNode {
-        val page = RendererSpecificResourcePage(
-            name = "scripts/navigation-pane.json",
-            children = emptyList(),
-            strategy = RenderingStrategy.DriLocationResolvableWrite { resolver ->
-                val content = navigableChildren(input).withDescendants().map {
-                    createSearchRecordFromNode(it, resolveLocation(resolver, it.dri, it.sourceSets).orEmpty())
-                }
-                if (context.configuration.delayTemplateSubstitution) {
-                    mapper.writeValueAsString(AddToSearch(context.configuration.moduleName, content.toList()))
-                } else {
-                    mapper.writeValueAsString(content)
-                }
-            })
-
-        return input.modified(children = input.children + page)
-    }
-
-    private fun resolveLocation(locationResolver: DriResolver, dri: DRI, sourceSets: Set<DisplaySourceSet>): String? =
-        locationResolver(dri, sourceSets).also { location ->
-            if (location.isNullOrBlank()) context.logger.warn("Cannot resolve path for $dri and sourceSets: ${sourceSets.joinToString { it.name }}")
-        }
-
-}
-
 open class NavigationPageInstaller(val context: DokkaContext) : NavigationDataProvider(), PageTransformer {
 
     override fun invoke(input: RootPageNode): RootPageNode =
@@ -152,13 +121,13 @@ class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer
 object AssetsInstaller : PageTransformer {
     private val imagesPages = listOf(
         "images/arrow_down.svg",
-        "images/arrow_down_white.svg",
         "images/logo-icon.svg",
         "images/go-to-top-icon.svg",
         "images/footer-go-to-link.svg",
         "images/anchor-copy-button.svg",
         "images/copy-icon.svg",
         "images/copy-successful-icon.svg",
+        "images/theme-toggle.svg",
     )
 
     override fun invoke(input: RootPageNode) = input.modified(
diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down.svg b/plugins/base/src/main/resources/dokka/images/arrow_down.svg
index 0d8eb3b4..c0388dee 100755
--- a/plugins/base/src/main/resources/dokka/images/arrow_down.svg
+++ b/plugins/base/src/main/resources/dokka/images/arrow_down.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="-5 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11 9l-6 5.25V3.75z" fill="black"/>
+    <path d="M11 9l-6 5.25V3.75z" fill="currentColor"/>
 </svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg
deleted file mode 100644
index 41bda9bf..00000000
--- a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="-5 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M11 9l-6 5.25V3.75z" fill="#fff"/>
-</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/theme-toggle.svg b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg
new file mode 100644
index 00000000..2a8d750e
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/theme-toggle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+    <path fill="white" fill-rule="evenodd" clip-rule="evenodd"
+          d="M0 9a9 9 0 1018 0A9 9 0 000 9zm16 0a7 7 0 01-7 7V2a7 7 0 017 7z" transform="translate(3, 3)"></path>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
index 05ec7377..ae838d6f 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
+++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
@@ -20,8 +20,21 @@ window.addEventListener('load', () => {
     handleAnchor()
     initHidingLeftNavigation()
     topNavbarOffset = document.getElementById('navigation-wrapper')
+    darkModeSwitch()
 })
 
+const darkModeSwitch = () => {
+    const localStorageKey = "dokka-dark-mode"
+    const storage = localStorage.getItem(localStorageKey)
+    const savedDarkMode = storage ? JSON.parse(storage) : false
+    const element = document.getElementById("theme-toggle-button")
+
+    element.addEventListener('click', () => {
+        document.getElementsByTagName("html")[0].classList.toggle("theme-dark")
+        localStorage.setItem(localStorageKey, JSON.stringify(!savedDarkMode))
+    })
+}
+
 const initHidingLeftNavigation = () => {
     document.getElementById("leftToggler").onclick = function(event) {
         //Events need to be prevented from bubbling since they will trigger next handler
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 8530b514..b9d22c3d 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -4,12 +4,19 @@
 
 :root {
     --default-gray: #f4f4f4;
+    --default-font-color: black;
+    --header-font-color: var(--default-font-color);
+
     --breadcrumb-font-color: #637282;
     --breadcrumb-margin: 24px;
     --hover-link-color: #5B5DEF;
+
     --footer-height: 64px;
     --footer-padding-top: 48px;
     --footer-background: var(--default-gray);
+    --footer-font-color: var(--average-color);
+    --footer-go-to-top-color: white;
+
     --horizontal-spacing-for-content: 16px;
     --mobile-horizontal-spacing-for-content: 8px;
     --bottom-spacing: 16px;
@@ -17,16 +24,38 @@
     --color-scrollbar-track: var(--default-gray);
     --default-white: #fff;
     --background-color: var(--default-white);
+    --dark-mode-and-search-icon-color: var(--default-white);
     --color-dark: #27282c;
     --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
-    --default-monospace-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+    --default-monospace-font-family: JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
     --default-font-size: 15px;
     --average-color: var(--color-dark);
+    --brief-color: var(--average-color);
     --secondary-text-color: rgba(39, 40, 44, .7);
     --code-background: rgba(39, 40, 44, .05);
     --border-color: rgba(39, 40, 44, .2);
-    --top-navigation-height: 67px;
+    --top-navigation-height: 73px;
     --max-width: 1160px;
+    --white-10: hsla(0,0%,100%,.1);
+
+    --active-tab-border-color: var(--hover-link-color);
+    --inactive-tab-border-color: #DADFE6;
+}
+
+:root.theme-dark {
+    --background-color: #27282c;
+    --color-dark: #3d3d41;
+    --default-font-color: hsla(0,0%,100%,0.8);
+    --border-color: hsla(0,0%,100%,0.2);
+    --code-background: hsla(0,0%,100%,0.05);
+    --breadcrumb-font-color: #8c8c8e;
+    --brief-color: hsla(0,0%,100%,0.4);
+
+    --active-tab-border-color: var(--default-font-color);
+    --inactive-tab-border-color: var(--border-color);
+    --footer-background: hsla(0,0%,100%,0.05);
+    --footer-font-color: hsla(0,0%,100%,0.6);
+    --footer-go-to-top-color: var(--footer-font-color);
 }
 
 html {
@@ -36,6 +65,7 @@ html {
     scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
+    color: var(--default-font-color);
 }
 
 html ::-webkit-scrollbar {
@@ -79,6 +109,7 @@ html ::-webkit-scrollbar-thumb {
     color: #fff;
     font-family: var(--default-font-family);
     letter-spacing: -0.1px;
+    align-items: center;
 
     /* Reset margin and use padding for border */
     margin-left: 0;
@@ -97,6 +128,11 @@ html ::-webkit-scrollbar-thumb {
 
 #searchBar {
     margin-left: 16px;
+    display: inline-flex;
+    align-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
 }
 
 .breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover {
@@ -113,7 +149,7 @@ html ::-webkit-scrollbar-thumb {
 .section-tab {
     border: 0;
     background-color: transparent;
-    border-bottom: 1px solid #DADFE6;
+    border-bottom: 1px solid var(--inactive-tab-border-color);
 }
 
 .platform-hinted > .platform-bookmarks-row {
@@ -126,21 +162,15 @@ html ::-webkit-scrollbar-thumb {
     cursor: pointer;
     outline: none;
     font-size: var(--default-font-size);
-    color: var(--average-color);
+    color: inherit;
 }
 
 .section-tab:hover {
-    color: #282E34;
-    border-bottom: 2px solid var(--hover-link-color);
+    border-bottom: 2px solid var(--active-tab-border-color);
 }
 
 .section-tab[data-active=''] {
-    color: #282E34;
-    border-bottom: 2px solid var(--hover-link-color);
-}
-
-.tabs-section-body {
-    background-color: white;
+    border-bottom: 2px solid var(--active-tab-border-color);
 }
 
 .tabs-section-body > div {
@@ -382,14 +412,14 @@ code.paragraph {
 .sideMenuPart a {
     display: block;
     align-items: center;
-    color: var(--average-color);
+    color: var(--default-font-color);
     overflow: hidden;
 }
 
 
 .sideMenuPart a:hover {
     text-decoration: none;
-    color: var(--average-color);
+    color: var(--default-font-color);
 }
 
 .sideMenuPart > .overview:before {
@@ -421,18 +451,25 @@ code.paragraph {
 }
 
 .sideMenuPart > .overview .navButtonContent::before {
-    content: url("../images/arrow_down.svg");
+    content: '';
+
+    -webkit-mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
+    mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    background-color: var(--default-font-color);
+
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     transform: rotate(90deg);
-    width: 12px;
-    height: 12px;
+    width: 16px;
+    height: 16px;
 }
 
 .sideMenuPart[data-active] > .overview .navButtonContent::before {
-    content: url("../images/arrow_down_white.svg");;
+    background-color: var(--default-white);
 }
 
 .sideMenuPart.hidden > .navButton .navButtonContent::after {
@@ -460,7 +497,6 @@ body, table {
 table {
     width: 100%;
     border-collapse: collapse;
-    background-color: #ffffff;
     padding: 5px;
 }
 
@@ -472,34 +508,16 @@ td:first-child {
     width: 20vw;
 }
 
-.keyword {
-    color: black;
-    font-family: var(--default-monospace-font-family);
-    font-size: 12px;
-}
-
-.identifier {
-    color: darkblue;
-    font-size: 12px;
-    font-family: var(--default-monospace-font-family);
-}
-
 .brief {
     white-space: pre-wrap;
     overflow: hidden;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    color: #222;
-    font-weight: bold;
-}
-
 p, ul, ol, table, pre, dl {
     margin: 0;
 }
 
 h1 {
-    font-weight: bold;
     font-size: 40px;
     line-height: 48px;
     letter-spacing: -1px;
@@ -516,7 +534,6 @@ h1.cover {
 }
 
 h2 {
-    color: #393939;
     font-size: 31px;
     line-height: 40px;
     letter-spacing: -0.5px;
@@ -528,14 +545,6 @@ h3 {
     letter-spacing: -0.2px;
 }
 
-h4 {
-    margin: 0;
-}
-
-h3, h4, h5, h6 {
-    color: #494949;
-}
-
 .UnderCoverText {
     font-size: 16px;
     line-height: 28px;
@@ -573,16 +582,10 @@ a {
 
 a small {
     font-size: 11px;
-    color: #555;
     margin-top: -0.6em;
     display: block;
 }
 
-.wrapper {
-    width: 860px;
-    margin: 0 auto;
-}
-
 blockquote {
     border-left: 1px solid #e5e5e5;
     margin: 0;
@@ -590,11 +593,6 @@ blockquote {
     font-style: italic;
 }
 
-code, pre {
-    color: #333;
-    font-size: var(--default-font-size);
-}
-
 pre {
     display: block;
     overflow-x: auto;
@@ -611,10 +609,6 @@ dt {
     font-weight: 700;
 }
 
-th {
-    color: #444;
-}
-
 p.paragraph img {
     display: block;
 }
@@ -623,11 +617,6 @@ img {
     max-width: 100%;
 }
 
-strong {
-    color: #222;
-    font-weight: 700;
-}
-
 small {
     font-size: 11px;
 }
@@ -691,9 +680,10 @@ small {
     display: flex;
     flex-direction: row;
     align-self: flex-end;
-    min-height: 30px;
+    min-height: 36px;
     z-index: 0;
     flex-wrap: wrap;
+    align-items: center;
 }
 
 .platform-selector:hover {
@@ -854,14 +844,12 @@ td.content {
 }
 
 .cover .with-platform-tabs {
-    background-color: white;
     font-size: var(--default-font-size);
 }
 
 .cover > .with-platform-tabs > .content {
-    background-color: var(--background-color);
     padding: 8px 16px;
-    border: 1px solid rgba(39, 40, 44, 0.20);
+    border: 1px solid var(--border-color);
 }
 
 .cover > .block {
@@ -877,7 +865,6 @@ td.content {
 
 .table-row .with-platform-tabs .sourceset-depenent-content .brief {
     padding: 8px;
-    background-color: var(--background-color);
 }
 
 .sideMenuPart[data-active] > .overview:before {
@@ -898,6 +885,7 @@ td.content {
     flex-direction: column;
     border-bottom: 1px solid var(--border-color);
     padding: 11px 0 12px 0;
+    background-color: var(--background-color);
 }
 
 .table-row:last-of-type {
@@ -905,7 +893,7 @@ td.content {
 }
 
 .table-row .brief-comment {
-    color: var(--average-color);
+    color: var(--brief-color);
 }
 
 .platform-dependent-row {
@@ -968,37 +956,6 @@ td.content {
     }
 }
 
-@media print, screen and (max-width: 720px) {
-    body {
-        word-wrap: break-word;
-    }
-
-    header {
-        padding: 0;
-    }
-
-    header ul, header p.view {
-        position: static;
-    }
-
-    pre, code {
-        word-wrap: normal;
-    }
-}
-
-@media print, screen and (max-width: 480px) {
-    header ul {
-        display: none;
-    }
-}
-
-@media print {
-    body {
-        padding: 0.4in;
-        font-size: 12pt;
-        color: #444;
-    }
-}
 
 .footer {
     clear: both;
@@ -1009,7 +966,7 @@ td.content {
     font-size: 12px;
     line-height: 16px;
     letter-spacing: 0.2px;
-    color: var(--average-color);
+    color: var(--footer-font-color);
     margin-top: auto;
     background-color: var(--footer-background);
 }
@@ -1017,7 +974,7 @@ td.content {
 .footer span.go-to-top-icon {
     border-radius: 2em;
     padding: 11px 10px !important;
-    background-color: white;
+    background-color: var(--footer-go-to-top-color);
 }
 
 .footer span.go-to-top-icon > a::before {
@@ -1079,6 +1036,27 @@ div.runnablesample {
     display: flex;
 }
 
+#theme-toggle {
+    content: url("../images/theme-toggle.svg");
+}
+
+#theme-toggle-button {
+    width: 36px;
+    height: 36px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 24px;
+    margin-left: 16px;
+    background-color: inherit;
+    border: none;
+    cursor: pointer;
+}
+
+#theme-toggle-button:hover {
+    background: var(--white-10);
+}
+
 @media screen and (max-width: 1119px) {
     h1.cover {
         font-size: 48px;
@@ -1155,4 +1133,8 @@ div.runnablesample {
         font-size: 32px;
         line-height: 32px;
     }
+
+    #theme-toggle-button {
+        display: none;
+    }
 }
diff --git a/plugins/templating/api/templating.api b/plugins/templating/api/templating.api
index 83b8e945..0965020b 100644
--- a/plugins/templating/api/templating.api
+++ b/plugins/templating/api/templating.api
@@ -8,13 +8,6 @@ public abstract class org/jetbrains/dokka/allModulesPage/templates/BaseJsonNavig
 	public fun process (Ljava/io/File;Ljava/io/File;Lorg/jetbrains/dokka/DokkaConfiguration$DokkaModuleDescription;)Z
 }
 
-public final class org/jetbrains/dokka/allModulesPage/templates/NavigationSearchTemplateStrategy : org/jetbrains/dokka/allModulesPage/templates/BaseJsonNavigationTemplateProcessingStrategy {
-	public fun <init> (Lorg/jetbrains/dokka/plugability/DokkaContext;)V
-	public final fun getDokkaContext ()Lorg/jetbrains/dokka/plugability/DokkaContext;
-	public fun getNavigationFileNameWithoutExtension ()Ljava/lang/String;
-	public fun getPath ()Ljava/lang/String;
-}
-
 public final class org/jetbrains/dokka/allModulesPage/templates/PackageListProcessingStrategy : org/jetbrains/dokka/templates/TemplateProcessingStrategy {
 	public fun <init> (Lorg/jetbrains/dokka/plugability/DokkaContext;)V
 	public fun finish (Ljava/io/File;)V
@@ -133,7 +126,6 @@ public final class org/jetbrains/dokka/templates/TemplatingPlugin : org/jetbrain
 	public final fun getDirectiveBasedHtmlTemplateProcessingStrategy ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getFallbackProcessingStrategy ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getMultimoduleTemplateProcessor ()Lorg/jetbrains/dokka/plugability/ExtensionPoint;
-	public final fun getNavigationSearchTemplateStrategy ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getPackageListProcessingStrategy ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getPagesSearchTemplateStrategy ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getPathToRootSubstitutor ()Lorg/jetbrains/dokka/plugability/Extension;
diff --git a/plugins/templating/src/main/kotlin/templates/JsonElementBasedTemplateProcessingStrategy.kt b/plugins/templating/src/main/kotlin/templates/JsonElementBasedTemplateProcessingStrategy.kt
index 9e064a6a..533c12f6 100644
--- a/plugins/templating/src/main/kotlin/templates/JsonElementBasedTemplateProcessingStrategy.kt
+++ b/plugins/templating/src/main/kotlin/templates/JsonElementBasedTemplateProcessingStrategy.kt
@@ -53,12 +53,6 @@ abstract class BaseJsonNavigationTemplateProcessingStrategy(val context: DokkaCo
 
 }
 
-class NavigationSearchTemplateStrategy(val dokkaContext: DokkaContext) :
-    BaseJsonNavigationTemplateProcessingStrategy(dokkaContext) {
-    override val navigationFileNameWithoutExtension: String = "navigation-pane"
-    override val path: String = "scripts"
-}
-
 class PagesSearchTemplateStrategy(val dokkaContext: DokkaContext) :
     BaseJsonNavigationTemplateProcessingStrategy(dokkaContext) {
     override val navigationFileNameWithoutExtension: String = "pages"
diff --git a/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt b/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt
index 418edcbf..1a02d41f 100644
--- a/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt
+++ b/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt
@@ -1,6 +1,5 @@
 package org.jetbrains.dokka.templates
 
-import org.jetbrains.dokka.allModulesPage.templates.NavigationSearchTemplateStrategy
 import org.jetbrains.dokka.allModulesPage.templates.PackageListProcessingStrategy
 import org.jetbrains.dokka.allModulesPage.templates.PagesSearchTemplateStrategy
 import org.jetbrains.dokka.plugability.DokkaPlugin
@@ -29,11 +28,6 @@ class TemplatingPlugin : DokkaPlugin() {
             before(fallbackProcessingStrategy)
         }
     }
-    val navigationSearchTemplateStrategy by extending {
-        templateProcessingStrategy providing ::NavigationSearchTemplateStrategy order {
-            before(fallbackProcessingStrategy)
-        }
-    }
 
     val sourcesetDependencyProcessingStrategy by extending {
         templateProcessingStrategy providing ::SourcesetDependencyProcessingStrategy order {
diff --git a/plugins/templating/src/test/kotlin/templates/AddToSearchCommandResolutionTest.kt b/plugins/templating/src/test/kotlin/templates/AddToSearchCommandResolutionTest.kt
index aba668f7..96fcc8dd 100644
--- a/plugins/templating/src/test/kotlin/templates/AddToSearchCommandResolutionTest.kt
+++ b/plugins/templating/src/test/kotlin/templates/AddToSearchCommandResolutionTest.kt
@@ -32,7 +32,7 @@ class AddToSearchCommandResolutionTest : TemplatingAbstractTest() {
     val folder: TemporaryFolder = TemporaryFolder()
 
     @ParameterizedTest
-    @ValueSource(strings = ["navigation-pane.json", "pages.json"])
+    @ValueSource(strings = ["pages.json"])
     fun `should merge navigation templates`(fileName: String) {
         val (module1Navigation, module2Navigation) = setupTestDirectoriesWithContent(fileName)
 
-- 
cgit