Merge pull request #2066 from Kotlin/webhelp-like-frontend

Webhelp like frontend

47 files changed, 1126 insertions, 1005 deletions

diff --git a/plugins/base/api/base.api b/plugins/base/api/base.api
index 093f7961..10d2c564 100644
--- a/plugins/base/api/base.api
+++ b/plugins/base/api/base.api
@@ -34,7 +34,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;
@@ -322,7 +321,8 @@ public final class org/jetbrains/dokka/base/renderers/html/CustomResourceInstall
 public final class org/jetbrains/dokka/base/renderers/html/HtmlFormatingUtilsKt {
 	public static final fun buildBreakableDotSeparatedHtml (Lkotlinx/html/FlowContent;Ljava/lang/String;)V
 	public static final fun buildBreakableText (Lkotlinx/html/FlowContent;Ljava/lang/String;)V
-	public static final fun buildTextBreakableAfterCapitalLetters (Lkotlinx/html/FlowContent;Ljava/lang/String;)V
+	public static final fun buildTextBreakableAfterCapitalLetters (Lkotlinx/html/FlowContent;Ljava/lang/String;Z)V
+	public static synthetic fun buildTextBreakableAfterCapitalLetters$default (Lkotlinx/html/FlowContent;Ljava/lang/String;ZILjava/lang/Object;)V
 }
 
 public class org/jetbrains/dokka/base/renderers/html/HtmlRenderer : org/jetbrains/dokka/base/renderers/DefaultRenderer {
@@ -423,13 +423,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;
@@ -949,6 +942,19 @@ public final class org/jetbrains/dokka/base/templating/PathToRootSubstitutionCom
 	public fun toString ()Ljava/lang/String;
 }
 
+public final class org/jetbrains/dokka/base/templating/ProjectNameSubstitutionCommand : org/jetbrains/dokka/base/templating/SubstitutionCommand {
+	public fun <init> (Ljava/lang/String;Ljava/lang/String;)V
+	public final fun component1 ()Ljava/lang/String;
+	public final fun component2 ()Ljava/lang/String;
+	public final fun copy (Ljava/lang/String;Ljava/lang/String;)Lorg/jetbrains/dokka/base/templating/ProjectNameSubstitutionCommand;
+	public static synthetic fun copy$default (Lorg/jetbrains/dokka/base/templating/ProjectNameSubstitutionCommand;Ljava/lang/String;Ljava/lang/String;ILjava/lang/Object;)Lorg/jetbrains/dokka/base/templating/ProjectNameSubstitutionCommand;
+	public fun equals (Ljava/lang/Object;)Z
+	public final fun getDefault ()Ljava/lang/String;
+	public fun getPattern ()Ljava/lang/String;
+	public fun hashCode ()I
+	public fun toString ()Ljava/lang/String;
+}
+
 public final class org/jetbrains/dokka/base/templating/ResolveLinkCommand : org/jetbrains/dokka/base/templating/Command {
 	public fun <init> (Lorg/jetbrains/dokka/links/DRI;)V
 	public final fun getDri ()Lorg/jetbrains/dokka/links/DRI;
@@ -1345,12 +1351,14 @@ public class org/jetbrains/dokka/base/translators/documentables/PageContentBuild
 	public fun <init> (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder;Ljava/util/Set;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)V
 	public final fun block (Ljava/lang/String;ILorg/jetbrains/dokka/pages/Kind;Ljava/lang/Iterable;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;ZZLjava/util/List;ZLkotlin/jvm/functions/Function2;)V
 	public static synthetic fun block$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/lang/String;ILorg/jetbrains/dokka/pages/Kind;Ljava/lang/Iterable;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;ZZLjava/util/List;ZLkotlin/jvm/functions/Function2;ILjava/lang/Object;)V
+	public final fun booleanLiteral (Z)V
 	public final fun build (Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)Lorg/jetbrains/dokka/pages/ContentGroup;
 	public final fun buildGroup (Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;)Lorg/jetbrains/dokka/pages/ContentGroup;
 	public static synthetic fun buildGroup$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)Lorg/jetbrains/dokka/pages/ContentGroup;
 	public final fun buildSignature (Lorg/jetbrains/dokka/model/Documentable;)Ljava/util/List;
 	public final fun comment (Lorg/jetbrains/dokka/model/doc/DocTag;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)V
 	public static synthetic fun comment$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Lorg/jetbrains/dokka/model/doc/DocTag;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;ILjava/lang/Object;)V
+	public final fun constant (Ljava/lang/String;)V
 	public final fun cover (Ljava/lang/String;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;)V
 	public static synthetic fun cover$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/lang/String;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
 	protected final fun createText (Ljava/lang/String;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)Lorg/jetbrains/dokka/pages/ContentText;
@@ -1369,6 +1377,7 @@ public class org/jetbrains/dokka/base/translators/documentables/PageContentBuild
 	public static synthetic fun group$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
 	public final fun header (ILjava/lang/String;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;)V
 	public static synthetic fun header$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;ILjava/lang/String;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
+	public final fun keyword (Ljava/lang/String;)V
 	public final fun link (Ljava/lang/String;Ljava/lang/String;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)V
 	public final fun link (Ljava/lang/String;Lorg/jetbrains/dokka/links/DRI;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)V
 	public final fun link (Lorg/jetbrains/dokka/links/DRI;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;)V
@@ -1377,14 +1386,17 @@ public class org/jetbrains/dokka/base/translators/documentables/PageContentBuild
 	public static synthetic fun link$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Lorg/jetbrains/dokka/links/DRI;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
 	public final fun linkNode (Ljava/lang/String;Lorg/jetbrains/dokka/links/DRI;Lorg/jetbrains/dokka/pages/DCI;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)Lorg/jetbrains/dokka/pages/ContentDRILink;
 	public static synthetic fun linkNode$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/lang/String;Lorg/jetbrains/dokka/links/DRI;Lorg/jetbrains/dokka/pages/DCI;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;ILjava/lang/Object;)Lorg/jetbrains/dokka/pages/ContentDRILink;
-	public final fun list (Ljava/util/List;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/util/Set;Lkotlin/jvm/functions/Function2;)V
-	public static synthetic fun list$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/util/List;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/util/Set;Lkotlin/jvm/functions/Function2;ILjava/lang/Object;)V
+	public final fun list (Ljava/util/List;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/util/Set;Ljava/util/Set;Ljava/util/Set;Lkotlin/jvm/functions/Function2;)V
+	public static synthetic fun list$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/util/List;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/util/Set;Ljava/util/Set;Ljava/util/Set;Lkotlin/jvm/functions/Function2;ILjava/lang/Object;)V
+	public final fun operator (Ljava/lang/String;)V
+	public final fun punctuation (Ljava/lang/String;)V
 	public final fun sourceSetDependentHint (Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;)V
 	public final fun sourceSetDependentHint (Lorg/jetbrains/dokka/links/DRI;Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;)V
 	public static synthetic fun sourceSetDependentHint$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
 	public static synthetic fun sourceSetDependentHint$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Lorg/jetbrains/dokka/links/DRI;Ljava/util/Set;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
-	public final fun sourceSetDependentText (Ljava/util/Map;Ljava/util/Set;Lkotlin/jvm/functions/Function1;)V
-	public static synthetic fun sourceSetDependentText$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/util/Map;Ljava/util/Set;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
+	public final fun sourceSetDependentText (Ljava/util/Map;Ljava/util/Set;Ljava/util/Set;Lkotlin/jvm/functions/Function1;)V
+	public static synthetic fun sourceSetDependentText$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Ljava/util/Map;Ljava/util/Set;Ljava/util/Set;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
+	public final fun stringLiteral (Ljava/lang/String;)V
 	public final fun table (Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;)V
 	public static synthetic fun table$default (Lorg/jetbrains/dokka/base/translators/documentables/PageContentBuilder$DocumentableContentBuilder;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;Lkotlin/jvm/functions/Function1;ILjava/lang/Object;)V
 	public final fun text (Ljava/lang/String;Lorg/jetbrains/dokka/pages/Kind;Ljava/util/Set;Ljava/util/Set;Lorg/jetbrains/dokka/model/properties/PropertyContainer;)V
diff --git a/plugins/base/base-test-utils/api/base-test-utils.api b/plugins/base/base-test-utils/api/base-test-utils.api
index b5a9ef2f..844a1703 100644
--- a/plugins/base/base-test-utils/api/base-test-utils.api
+++ b/plugins/base/base-test-utils/api/base-test-utils.api
@@ -113,7 +113,8 @@ public final class utils/I : utils/Tag {
 }
 
 public final class utils/JsoupUtilsKt {
-	public static final fun match (Lorg/jsoup/nodes/Element;[Ljava/lang/Object;)V
+	public static final fun match (Lorg/jsoup/nodes/Element;[Ljava/lang/Object;Z)V
+	public static synthetic fun match$default (Lorg/jsoup/nodes/Element;[Ljava/lang/Object;ZILjava/lang/Object;)V
 }
 
 public final class utils/P : utils/Tag {
diff --git a/plugins/base/base-test-utils/src/main/kotlin/renderers/JsoupUtils.kt b/plugins/base/base-test-utils/src/main/kotlin/renderers/JsoupUtils.kt
index ea2d13a7..9e38df10 100644
--- a/plugins/base/base-test-utils/src/main/kotlin/renderers/JsoupUtils.kt
+++ b/plugins/base/base-test-utils/src/main/kotlin/renderers/JsoupUtils.kt
@@ -4,12 +4,22 @@ import org.jsoup.nodes.Element
 import org.jsoup.nodes.Node
 import org.jsoup.nodes.TextNode
 
-fun Element.match(vararg matchers: Any): Unit =
+fun Element.match(vararg matchers: Any, ignoreSpanWithTokenStyle:Boolean = false): Unit =
     childNodes()
-        .filter { it !is TextNode || it.text().isNotBlank() }
+        .let { list ->
+            if(ignoreSpanWithTokenStyle) {
+                list
+                    .filterNot { it is Element && it.tagName() == "span" && it.attr("class").startsWith("token ") &&  it.childNodeSize() == 0}
+                    .map { if(it is Element && it.tagName() == "span"
+                        && it.attr("class").startsWith("token ")
+                        && it.childNodeSize() == 1) it.childNode(0) else it }
+                    .uniteConsecutiveTextNodes()
+            } else list
+        }
+        .filter { (it !is TextNode || it.text().isNotBlank())}
         .let { it.drop(it.size - matchers.size) }
         .zip(matchers)
-        .forEach { (n, m) -> m.accepts(n) }
+        .forEach { (n, m) -> m.accepts(n, ignoreSpan = ignoreSpanWithTokenStyle) }
 
 open class Tag(val name: String, vararg val matchers: Any)
 class Div(vararg matchers: Any) : Tag("div", *matchers)
@@ -20,13 +30,27 @@ class B(vararg matchers: Any) : Tag("b", *matchers)
 class I(vararg matchers: Any) : Tag("i", *matchers)
 class STRIKE(vararg matchers: Any) : Tag("strike", *matchers)
 object Wbr : Tag("wbr")
-private fun Any.accepts(n: Node) {
+private fun Any.accepts(n: Node, ignoreSpan:Boolean = true) {
     when (this) {
         is String -> assert(n is TextNode && n.text().trim() == this.trim()) { "\"$this\" expected but found: $n" }
         is Tag -> {
             assert(n is Element && n.tagName() == name) { "Tag $name expected but found: $n" }
-            if (n is Element && matchers.isNotEmpty()) n.match(*matchers)
+            if (n is Element && matchers.isNotEmpty()) n.match(*matchers, ignoreSpanWithTokenStyle = ignoreSpan)
         }
         else -> throw IllegalArgumentException("$this is not proper matcher")
     }
-}
\ No newline at end of file
+}
+private fun List<Node>.uniteConsecutiveTextNodes(): MutableList<Node> {
+    val resList = mutableListOf<Node>()
+    var acc = StringBuilder()
+    forEachIndexed { index, item ->
+        if (item is TextNode) {
+            acc.append(item.text())
+            if (!(index + 1 < size && this[index + 1] is TextNode)) {
+                resList.add(TextNode(acc.toString()))
+                acc = StringBuilder()
+            }
+        } else resList.add(item)
+    }
+    return resList
+ }
\ No newline at end of file
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/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/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/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss
index 8965c5ea..b18af04e 100644
--- a/plugins/base/frontend/src/main/components/search/search.scss
+++ b/plugins/base/frontend/src/main/components/search/search.scss
@@ -1,11 +1,17 @@
+$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: #fff;
+    fill: var(--dark-mode-and-search-icon-color);
+
     &:focus {
       outline: none;
     }
@@ -13,40 +19,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;
 }
diff --git a/plugins/base/src/main/kotlin/DokkaBase.kt b/plugins/base/src/main/kotlin/DokkaBase.kt
index 4c3f35db..7e88d08f 100644
--- a/plugins/base/src/main/kotlin/DokkaBase.kt
+++ b/plugins/base/src/main/kotlin/DokkaBase.kt
@@ -209,10 +209,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 d63e8da6..31753332 100644
--- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
@@ -15,6 +15,7 @@ import org.jetbrains.dokka.base.resolvers.anchors.SymbolAnchorHint
 import org.jetbrains.dokka.base.resolvers.local.DokkaBaseLocationProvider
 import org.jetbrains.dokka.base.templating.InsertTemplateExtra
 import org.jetbrains.dokka.base.templating.PathToRootSubstitutionCommand
+import org.jetbrains.dokka.base.templating.ProjectNameSubstitutionCommand
 import org.jetbrains.dokka.base.templating.ResolveLinkCommand
 import org.jetbrains.dokka.links.DRI
 import org.jetbrains.dokka.model.DisplaySourceSet
@@ -603,22 +604,13 @@ open class HtmlRenderer(
 
 
     override fun FlowContent.buildNavigation(page: PageNode) =
-        div("navigation-wrapper") {
-            id = "navigation-wrapper"
-            div(classes = "breadcrumbs") {
-                val path = locationProvider.ancestors(page).filterNot { it is RendererSpecificPage }.asReversed()
-                if (path.isNotEmpty()) {
-                    buildNavigationElement(path.first(), page)
-                    path.drop(1).forEach { node ->
-                        text("/")
-                        buildNavigationElement(node, page)
-                    }
-                }
-            }
-            div("pull-right d-flex") {
-                filterButtons(page)
-                div {
-                    id = "searchBar"
+        div(classes = "breadcrumbs") {
+            val path = locationProvider.ancestors(page).filterNot { it is RendererSpecificPage }.asReversed()
+            if (path.size > 1) {
+                buildNavigationElement(path.first(), page)
+                path.drop(1).forEach { node ->
+                    text("/")
+                    buildNavigationElement(node, page)
                 }
             }
         }
@@ -685,12 +677,15 @@ open class HtmlRenderer(
         pageContext: ContentPage
     ) {
         div("sample-container") {
-            code(code.style.joinToString(" ") { it.toString().toLowerCase() }) {
-                attributes["theme"] = "idea"
-                pre {
+            val codeLang = "lang-" + code.language.ifEmpty { "kotlin" }
+            val stylesWithBlock = code.style + TextStyle.Block + codeLang
+            pre {
+                code(stylesWithBlock.joinToString(" ") { it.toString().toLowerCase() }) {
+                    attributes["theme"] = "idea"
                     code.children.forEach { buildContentNode(it, pageContext) }
                 }
             }
+            copyButton()
         }
     }
 
@@ -698,7 +693,9 @@ open class HtmlRenderer(
         code: ContentCodeInline,
         pageContext: ContentPage
     ) {
-        code {
+        val codeLang = "lang-" + code.language.ifEmpty { "kotlin" }
+        val stylesWithBlock = code.style + codeLang
+        code(stylesWithBlock.joinToString(" ") { it.toString().toLowerCase() }) {
             code.children.forEach { buildContentNode(it, pageContext) }
         }
     }
@@ -716,7 +713,7 @@ open class HtmlRenderer(
             }
             unappliedStyles.isNotEmpty() -> {
                 val styleToApply = unappliedStyles.first()
-                applyStyle(styleToApply){
+                applyStyle(styleToApply) {
                     buildText(textNode, unappliedStyles - styleToApply)
                 }
             }
@@ -726,12 +723,13 @@ open class HtmlRenderer(
         }
     }
 
-    private inline fun FlowContent.applyStyle(styleToApply: Style, crossinline body: FlowContent.() -> Unit){
-        when(styleToApply){
+    private inline fun FlowContent.applyStyle(styleToApply: Style, crossinline body: FlowContent.() -> Unit) {
+        when (styleToApply) {
             TextStyle.Bold -> b { body() }
             TextStyle.Italic -> i { body() }
             TextStyle.Strikethrough -> strike { body() }
             TextStyle.Strong -> strong { body() }
+            is TokenStyle -> span("token " + styleToApply.toString().toLowerCase()) { body() }
             else -> body()
         }
     }
@@ -741,8 +739,6 @@ open class HtmlRenderer(
         super.render(root)
     }
 
-    private fun PageNode.root(path: String) = locationProvider.pathToRoot(this) + path
-
     override fun buildPage(page: ContentPage, content: (FlowContent, ContentPage) -> Unit): String =
         buildHtml(page, page.embeddedResources) {
             div("main-content") {
@@ -762,11 +758,19 @@ open class HtmlRenderer(
                 meta(name = "viewport", content = "width=device-width, initial-scale=1", charset = "UTF-8")
                 title(page.name)
                 templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) {
-                    link(href = page.root("###images/logo-icon.svg"), rel = "icon", type = "image/svg")
+                    link(href = "###images/logo-icon.svg", rel = "icon", type = "image/svg")
                 }
                 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" ->
@@ -803,24 +807,41 @@ open class HtmlRenderer(
                 }
             }
             body {
-                div {
-                    id = "container"
+                div("navigation-wrapper") {
+                    id = "navigation-wrapper"
                     div {
-                        id = "leftColumn"
+                        id = "leftToggler"
+                        span("icon-toggler")
+                    }
+                    div("library-name") {
                         clickableLogo(page, pathToRoot)
+                    }
+                    context.configuration.moduleVersion?.let { moduleVersion ->
+                        div { text(moduleVersion) }
+                    }
+                    div("pull-right d-flex") {
+                        filterButtons(page)
+                        button {
+                            id = "theme-toggle-button"
+                            span {
+                                id = "theme-toggle"
+                            }
+                        }
                         div {
-                            id = "paneSearch"
+                            id = "searchBar"
                         }
+                    }
+                }
+                div {
+                    id = "container"
+                    div {
+                        id = "leftColumn"
                         div {
                             id = "sideMenu"
                         }
                     }
                     div {
                         id = "main"
-                        div {
-                            id = "leftToggler"
-                            span("icon-toggler")
-                        }
                         templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) {
                             script(type = ScriptType.textJavaScript, src = "###scripts/main.js") {}
                         }
@@ -857,15 +878,17 @@ open class HtmlRenderer(
             templateCommand(PathToRootSubstitutionCommand(pattern = "###", default = pathToRoot)) {
                 a {
                     href = "###index.html"
-                    div {
-                        id = "logo"
+                    templateCommand(ProjectNameSubstitutionCommand(pattern = "@@@", default = context.configuration.moduleName)) {
+                        span {
+                            text("@@@")
+                        }
                     }
                 }
             }
-        } else a {
-            href = pathToRoot + "index.html"
-            div {
-                id = "logo"
+        } else {
+            a {
+                href = pathToRoot + "index.html"
+                text(context.configuration.moduleName)
             }
         }
     }
diff --git a/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt b/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt
index e2953d46..e0b20f01 100644
--- a/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/NavigationPage.kt
@@ -40,13 +40,13 @@ class NavigationPage(val root: NavigationNode, val moduleName: String, val conte
                 id = navId
                 attributes["pageId"] = "${moduleName}::${node.pageId}"
                 div("overview") {
-                    buildLink(node.dri, node.sourceSets.toList()) { buildBreakableText(node.name) }
                     if (node.children.isNotEmpty()) {
-                        span("navButton pull-right") {
+                        span("navButton") {
                             onClick = """document.getElementById("$navId").classList.toggle("hidden");"""
                             span("navButtonContent")
                         }
                     }
+                    buildLink(node.dri, node.sourceSets.toList()) { buildBreakableText(node.name) }
                 }
                 node.children.withIndex().forEach { (n, p) -> visit(p, "$navId-$n", renderer) }
             }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt
index b9eab293..c77a6e94 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlFormatingUtils.kt
@@ -3,7 +3,7 @@ package org.jetbrains.dokka.base.renderers.html
 import kotlinx.html.FlowContent
 import kotlinx.html.span
 
-fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) {
+fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String, hasLastElement: Boolean = false) {
     if (name.contains(" ")) {
         val withOutSpaces = name.split(" ")
         withOutSpaces.dropLast(1).forEach {
@@ -12,8 +12,8 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) {
         }
         buildBreakableText(withOutSpaces.last())
     } else {
-        val content = name.replace(Regex("(?!^)([A-Z])"), " $1").split(" ")
-        joinToHtml(content) {
+        val content = name.replace(Regex("(?<=[a-z])([A-Z])"), " $1").split(" ")
+        joinToHtml(content, hasLastElement) {
             it
         }
     }
@@ -22,32 +22,35 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) {
 fun FlowContent.buildBreakableDotSeparatedHtml(name: String) {
     val phrases = name.split(".")
     phrases.forEachIndexed { i, e ->
+        val elementWithOptionalDot = e.takeIf { i == phrases.lastIndex } ?: "$e."
         if (e.length > 10) {
-            buildBreakableText(e)
+            buildTextBreakableAfterCapitalLetters(elementWithOptionalDot, hasLastElement = i == phrases.lastIndex)
         } else {
-            val elementWithOptionalDot =
-                if (i != phrases.lastIndex) {
-                    "$e."
-                } else {
-                    e
-                }
-            buildBreakableHtmlElement(elementWithOptionalDot)
+            buildBreakableHtmlElement(elementWithOptionalDot, i == phrases.lastIndex)
         }
     }
 }
 
-private fun FlowContent.joinToHtml(elements: List<String>, onEach: (String) -> String) {
+private fun FlowContent.joinToHtml(elements: List<String>, hasLastElement: Boolean = true, onEach: (String) -> String) {
     elements.dropLast(1).forEach {
         buildBreakableHtmlElement(onEach(it))
     }
-    span {
-        buildBreakableHtmlElement(elements.last(), last = true)
+    elements.takeIf { it.isNotEmpty() && it.last().isNotEmpty() }?.let {
+        if (hasLastElement) {
+            span {
+                buildBreakableHtmlElement(it.last(), last = true)
+            }
+        } else {
+            buildBreakableHtmlElement(it.last(), last = false)
+        }
     }
 }
 
 private fun FlowContent.buildBreakableHtmlElement(element: String, last: Boolean = false) {
-    span {
-        +element
+    element.takeIf { it.isNotBlank() }?.let {
+        span {
+            +it
+        }
     }
     if (!last) {
         wbr { }
@@ -56,4 +59,4 @@ private fun FlowContent.buildBreakableHtmlElement(element: String, last: Boolean
 
 fun FlowContent.buildBreakableText(name: String) =
     if (name.contains(".")) buildBreakableDotSeparatedHtml(name)
-    else buildTextBreakableAfterCapitalLetters(name)
\ No newline at end of file
+    else buildTextBreakableAfterCapitalLetters(name, hasLastElement = true)
\ No newline at end of file
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index b6099e21..347e16bf 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 =
@@ -118,6 +87,7 @@ class ScriptsInstaller(private val dokkaContext: DokkaContext) : PageTransformer
         "scripts/navigation-loader.js",
         "scripts/platform-content-handler.js",
         "scripts/main.js",
+        "scripts/prism.js"
     )
 
     override fun invoke(input: RootPageNode): RootPageNode =
@@ -134,9 +104,9 @@ 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"
+        "styles/main.css",
+        "styles/prism.css"
     )
 
     override fun invoke(input: RootPageNode): RootPageNode =
@@ -153,13 +123,13 @@ class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer
 object AssetsInstaller : PageTransformer {
     private val imagesPages = listOf(
         "images/arrow_down.svg",
-        "images/docs_logo.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/kotlin/signatures/JvmSignatureUtils.kt b/plugins/base/src/main/kotlin/signatures/JvmSignatureUtils.kt
index d17fa276..94af96e2 100644
--- a/plugins/base/src/main/kotlin/signatures/JvmSignatureUtils.kt
+++ b/plugins/base/src/main/kotlin/signatures/JvmSignatureUtils.kt
@@ -8,7 +8,6 @@ import org.jetbrains.dokka.pages.*
 import org.jetbrains.dokka.DokkaConfiguration.DokkaSourceSet
 import org.jetbrains.dokka.base.signatures.KotlinSignatureUtils.drisOfAllNestedBounds
 import org.jetbrains.dokka.model.AnnotationTarget
-import org.jetbrains.dokka.model.doc.DocumentationNode
 
 interface JvmSignatureUtils {
 
@@ -80,21 +79,22 @@ interface JvmSignatureUtils {
 
         when (renderAtStrategy) {
             is All, is OnlyOnce -> {
-                text("@")
                 when(a.scope) {
-                    Annotations.AnnotationScope.GETTER -> text("get:")
-                    Annotations.AnnotationScope.SETTER -> text("set:")
+                    Annotations.AnnotationScope.GETTER -> text("@get:", styles = mainStyles + TokenStyle.Annotation)
+                    Annotations.AnnotationScope.SETTER -> text("@set:", styles = mainStyles + TokenStyle.Annotation)
+                    else -> text("@", styles = mainStyles + TokenStyle.Annotation)
                 }
+                link(a.dri.classNames!!, a.dri, styles = mainStyles + TokenStyle.Annotation)
             }
-            is Never -> Unit
+            is Never -> link(a.dri.classNames!!, a.dri)
         }
-        link(a.dri.classNames!!, a.dri)
         val isNoWrappedBrackets = a.params.entries.isEmpty() && renderAtStrategy is OnlyOnce
         listParams(
             a.params.entries,
             if (isNoWrappedBrackets) null else Pair('(', ')')
         ) {
-            text(it.key + " = ")
+            text(it.key)
+            text(" = ", styles = mainStyles + TokenStyle.Operator)
             when (renderAtStrategy) {
                 is All -> All
                 is Never, is OnlyOnce -> Never
@@ -116,8 +116,9 @@ interface JvmSignatureUtils {
         }
         is EnumValue -> link(a.enumName, a.enumDri)
         is ClassValue -> link(a.className + classExtension, a.classDRI)
-        is StringValue -> group(styles = setOf(TextStyle.Breakable)) { text( "\"${a.text()}\"") }
-        is LiteralValue -> group(styles = setOf(TextStyle.Breakable)) { text(a.text()) }
+        is StringValue -> group(styles = setOf(TextStyle.Breakable)) { stringLiteral( "\"${a.text()}\"") }
+        is BooleanValue -> group(styles = setOf(TextStyle.Breakable)) { booleanLiteral(a.value) }
+        is LiteralValue -> group(styles = setOf(TextStyle.Breakable)) { constant(a.text()) }
     }
 
     private fun<T> PageContentBuilder.DocumentableContentBuilder.listParams(
@@ -125,14 +126,14 @@ interface JvmSignatureUtils {
         listBrackets: Pair<Char, Char>?,
         outFn: PageContentBuilder.DocumentableContentBuilder.(T) -> Unit
     ) {
-        listBrackets?.let{ text(it.first.toString()) }
+        listBrackets?.let{ punctuation(it.first.toString()) }
         params.forEachIndexed { i, it ->
             group(styles = setOf(TextStyle.BreakableAfter)) {
                 this.outFn(it)
-                if (i != params.size - 1) text(", ")
+                if (i != params.size - 1) punctuation(", ")
             }
         }
-        listBrackets?.let{ text(it.second.toString()) }
+        listBrackets?.let{ punctuation(it.second.toString()) }
     }
 
     fun PageContentBuilder.DocumentableContentBuilder.annotationsBlockWithIgnored(
diff --git a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
index e5f0ae97..8db37012 100644
--- a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
+++ b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
@@ -15,6 +15,7 @@ import org.jetbrains.dokka.model.properties.WithExtraProperties
 import org.jetbrains.dokka.pages.ContentKind
 import org.jetbrains.dokka.pages.ContentNode
 import org.jetbrains.dokka.pages.TextStyle
+import org.jetbrains.dokka.pages.TokenStyle
 import org.jetbrains.dokka.plugability.DokkaContext
 import org.jetbrains.dokka.plugability.plugin
 import org.jetbrains.dokka.plugability.querySingle
@@ -60,7 +61,7 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                         it !in ignoredExtraModifiers || entry.key.analysisPlatform in (platformSpecificModifiers[it]
                             ?: emptySet())
                     }
-                }
+                }, styles = mainStyles + TokenStyle.Keyword
         ) {
             it.toSignatureString()
         }
@@ -78,8 +79,15 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                     annotationsBlock(e)
                     link(e.name, e.dri, styles = emptySet())
                     e.extra[ConstructorValues]?.let { constructorValues ->
-                        constructorValues.values[it]
-                        text(constructorValues.values[it]?.joinToString(prefix = "(", postfix = ")") ?: "")
+                        constructorValues.values[it]?.let { values ->
+                            punctuation("(")
+                            list(
+                                elements = values,
+                                separator = ", ",
+                                separatorStyles = mainStyles + TokenStyle.Punctuation,
+                            ) { highlightValue(it) }
+                            punctuation(")")
+                        }
                     }
                 }
             }
@@ -93,9 +101,9 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                 ?: emptySet()),
             sourceSets = setOf(sourceSet)
         ) {
-            text("typealias ")
+            keyword("typealias ")
             link(c.name.orEmpty(), c.dri)
-            text(" = ")
+            operator(" = ")
             signatureForProjection(aliasedType)
         }
 
@@ -118,10 +126,9 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
             sourceSets = setOf(sourceSet)
         ) {
             annotationsBlock(c)
-            text(c.visibility[sourceSet]?.takeIf { it !in ignoredVisibilities }?.name?.let { "$it " } ?: "")
+            c.visibility[sourceSet]?.takeIf { it !in ignoredVisibilities }?.name?.let { keyword("$it ") }
             if (c is DClass) {
-                text(
-                    if (c.modifier[sourceSet] !in ignoredModifiers)
+               val modifier = if (c.modifier[sourceSet] !in ignoredModifiers)
                         when {
                             c.extra[AdditionalModifiers]?.content?.get(sourceSet)?.contains(ExtraModifiers.KotlinOnlyModifiers.Data) == true -> ""
                             c.modifier[sourceSet] is JavaModifier.Empty -> "${KotlinModifier.Open.name} "
@@ -129,33 +136,35 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                         }
                     else
                         ""
-                )
+                modifier.takeIf { it.isNotEmpty() }?.let { keyword(it) }
             }
             when (c) {
                 is DClass -> {
                     processExtraModifiers(c)
-                    text("class ")
+                    keyword("class ")
                 }
                 is DInterface -> {
                     processExtraModifiers(c)
-                    text("interface ")
+                    keyword("interface ")
                 }
                 is DEnum -> {
                     processExtraModifiers(c)
-                    text("enum ")
+                    keyword("enum ")
                 }
                 is DObject -> {
                     processExtraModifiers(c)
-                    text("object ")
+                    keyword("object ")
                 }
                 is DAnnotation -> {
                     processExtraModifiers(c)
-                    text("annotation class ")
+                    keyword("annotation class ")
                 }
             }
             link(c.name!!, c.dri)
             if (c is WithGenerics) {
-                list(c.generics, prefix = "<", suffix = ">") {
+                list(c.generics, prefix = "<", suffix = ">",
+                    separatorStyles = mainStyles + TokenStyle.Punctuation,
+                    surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                     annotationsInline(it)
                     +buildSignature(it)
                 }
@@ -166,18 +175,20 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                     if (pConstructor.annotations().values.any { it.isNotEmpty() }) {
                         text(nbsp.toString())
                         annotationsInline(pConstructor)
-                        text("constructor")
+                        keyword("constructor")
                     }
                     list(
-                        pConstructor.parameters,
-                        "(",
-                        ")",
-                        ", ",
-                        pConstructor.sourceSets.toSet()
+                        elements = pConstructor.parameters,
+                        prefix = "(",
+                        suffix = ")",
+                        separator = ", ",
+                        separatorStyles = mainStyles + TokenStyle.Punctuation,
+                        surroundingCharactersStyle = mainStyles + TokenStyle.Punctuation,
+                        sourceSets = pConstructor.sourceSets.toSet()
                     ) {
                         annotationsInline(it)
-                        text(it.name ?: "", styles = mainStyles.plus(TextStyle.Bold))
-                        text(": ")
+                        text(it.name.orEmpty())
+                        operator(": ")
                         signatureForProjection(it.type)
                     }
                 }
@@ -186,7 +197,9 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                 c.supertypes.filter { it.key == sourceSet }.map { (s, typeConstructors) ->
                     list(typeConstructors, prefix = " : ", sourceSets = setOf(s)) {
                         link(it.typeConstructor.dri.sureClassNames, it.typeConstructor.dri, sourceSets = setOf(s))
-                        list(it.typeConstructor.projections, prefix = "<", suffix = "> ") {
+                        list(it.typeConstructor.projections, prefix = "<", suffix = "> ",
+                            separatorStyles = mainStyles + TokenStyle.Punctuation,
+                            surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                             signatureForProjection(it)
                         }
                     }
@@ -203,31 +216,42 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                 sourceSets = setOf(it)
             ) {
                 annotationsBlock(p)
-                text(p.visibility[it].takeIf { it !in ignoredVisibilities }?.name?.let { "$it " } ?: "")
-                text(
-                    p.modifier[it].takeIf { it !in ignoredModifiers }?.let {
+                p.visibility[it].takeIf { it !in ignoredVisibilities }?.name?.let { keyword("$it ") }
+                p.modifier[it].takeIf { it !in ignoredModifiers }?.let {
                         if (it is JavaModifier.Empty) KotlinModifier.Open else it
-                    }?.name?.let { "$it " } ?: ""
-                )
-                text(p.modifiers()[it]?.toSignatureString() ?: "")
-                p.setter?.let { text("var ") } ?: text("val ")
-                list(p.generics, prefix = "<", suffix = "> ") {
+                    }?.name?.let { keyword("$it ") }
+                p.modifiers()[it]?.toSignatureString()?.let { keyword(it) }
+                p.setter?.let { keyword("var ") } ?: keyword("val ")
+                list(p.generics, prefix = "<", suffix = "> ",
+                    separatorStyles = mainStyles + TokenStyle.Punctuation,
+                    surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                     annotationsInline(it)
                     +buildSignature(it)
                 }
                 p.receiver?.also {
                     signatureForProjection(it.type)
-                    text(".")
+                    punctuation(".")
                 }
                 link(p.name, p.dri)
-                text(": ")
+                operator(": ")
                 signatureForProjection(p.type)
                 p.extra[DefaultValue]?.run {
-                    text(" = $value")
+                    operator(" = ")
+                    highlightValue(value)
                 }
             }
         }
 
+    private fun PageContentBuilder.DocumentableContentBuilder.highlightValue(expr: Expression) = when (expr) {
+        is IntegerConstant -> constant(expr.value.toString())
+        is FloatConstant -> constant(expr.value.toString() + "f")
+        is DoubleConstant -> constant(expr.value.toString())
+        is BooleanConstant -> booleanLiteral(expr.value)
+        is StringConstant -> stringLiteral("\"${expr.value}\"")
+        is ComplexExpression -> text(expr.value)
+        else ->  Unit
+    }
+
     private fun functionSignature(f: DFunction) =
         f.sourceSets.map {
             contentBuilder.contentFor(
@@ -237,37 +261,40 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                 sourceSets = setOf(it)
             ) {
                 annotationsBlock(f)
-                text(f.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.let { "$it " } ?: "")
-                text(f.modifier[it]?.takeIf { it !in ignoredModifiers }?.let {
+                f.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.let { keyword("$it ") }
+                f.modifier[it]?.takeIf { it !in ignoredModifiers }?.let {
                     if (it is JavaModifier.Empty) KotlinModifier.Open else it
-                }?.name?.let { "$it " } ?: ""
-                )
-                text(f.modifiers()[it]?.toSignatureString() ?: "")
-                text("fun ")
+                }?.name?.let { keyword("$it ") }
+                f.modifiers()[it]?.toSignatureString()?.let { keyword(it) }
+                keyword("fun ")
                 val usedGenerics = if (f.isConstructor) f.generics.filter { f uses it } else f.generics
-                list(usedGenerics, prefix = "<", suffix = "> ") {
+                list(usedGenerics, prefix = "<", suffix = "> ",
+                    separatorStyles = mainStyles + TokenStyle.Punctuation,
+                    surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                     annotationsInline(it)
                     +buildSignature(it)
                 }
                 f.receiver?.also {
                     signatureForProjection(it.type)
-                    text(".")
+                    punctuation(".")
                 }
-                link(f.name, f.dri)
-                text("(")
-                list(f.parameters) {
+                link(f.name, f.dri, styles = mainStyles + TokenStyle.Function)
+                punctuation("(")
+                list(f.parameters,
+                    separatorStyles = mainStyles + TokenStyle.Punctuation) {
                     annotationsInline(it)
                     processExtraModifiers(it)
                     text(it.name!!)
-                    text(": ")
+                    operator(": ")
                     signatureForProjection(it.type)
                     it.extra[DefaultValue]?.run {
-                        text(" = $value")
+                        operator(" = ")
+                        highlightValue(value)
                     }
                 }
-                text(")")
+                punctuation(")")
                 if (f.documentReturnType()) {
-                    text(": ")
+                    operator(": ")
                     signatureForProjection(f.type)
                 }
             }
@@ -291,11 +318,11 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                         sourceSets = platforms.toSet()
                     ) {
                         annotationsBlock(t)
-                        text(t.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.let { "$it " } ?: "")
+                        t.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.let { keyword("$it ") }
                         processExtraModifiers(t)
-                        text("typealias ")
+                        keyword("typealias ")
                         signatureForProjection(t.type)
-                        text(" = ")
+                        operator(" = ")
                         signatureForTypealiasTarget(t, type)
                     }
                 }
@@ -306,7 +333,8 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
         t.sourceSets.map {
             contentBuilder.contentFor(t, styles = t.stylesIfDeprecated(it), sourceSets = setOf(it)) {
                 signatureForProjection(t.variantTypeParameter.withDri(t.dri.withTargetToDeclaration()))
-                list(t.nontrivialBounds, prefix = " : ") { bound ->
+                list(t.nontrivialBounds, prefix = " : ",
+                surroundingCharactersStyle = mainStyles + TokenStyle.Operator) { bound ->
                     signatureForProjection(bound)
                 }
             }
@@ -338,24 +366,29 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                     val linkText = if (showFullyQualifiedName && p.dri.packageName != null) {
                         "${p.dri.packageName}.${p.dri.classNames.orEmpty()}"
                     } else p.dri.classNames.orEmpty()
-                    if (p.presentableName != null) text(p.presentableName + ": ")
+                    if (p.presentableName != null) {
+                        text(p.presentableName!!)
+                        operator(": ")
+                    }
                     annotationsInline(p)
                     link(linkText, p.dri)
-                    list(p.projections, prefix = "<", suffix = ">") {
+                    list(p.projections, prefix = "<", suffix = ">",
+                        separatorStyles = mainStyles + TokenStyle.Punctuation,
+                        surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                         signatureForProjection(it, showFullyQualifiedName)
                     }
                 }
 
             is Variance<*> -> group(styles = emptySet()) {
-                text("$p ".takeIf { it.isNotBlank() } ?: "")
+                keyword("$p ".takeIf { it.isNotBlank() } ?: "")
                 signatureForProjection(p.inner, showFullyQualifiedName)
             }
 
-            is Star -> text("*")
+            is Star -> operator("*")
 
             is Nullable -> group(styles = emptySet()) {
                 signatureForProjection(p.inner, showFullyQualifiedName)
-                text("?")
+                operator("?")
             }
 
             is TypeAliased -> signatureForProjection(p.typeAlias)
@@ -373,12 +406,15 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
     private fun funType(dri: DRI, sourceSets: Set<DokkaSourceSet>, type: FunctionalTypeConstructor) =
         contentBuilder.contentFor(dri, sourceSets, ContentKind.Main) {
 
-            if (type.presentableName != null) text(type.presentableName + ": ")
-            if (type.isSuspendable) text("suspend ")
+            if (type.presentableName != null) {
+                text(type.presentableName!!)
+                operator(": ")
+            }
+            if (type.isSuspendable) keyword("suspend ")
 
             if (type.isExtensionFunction) {
                 signatureForProjection(type.projections.first())
-                text(".")
+                punctuation(".")
             }
 
             val args = if (type.isExtensionFunction)
@@ -386,12 +422,13 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
             else
                 type.projections
 
-            text("(")
+            punctuation("(")
             args.subList(0, args.size - 1).forEachIndexed { i, arg ->
                 signatureForProjection(arg)
-                if (i < args.size - 2) text(", ")
+                if (i < args.size - 2) punctuation(", ")
             }
-            text(") -> ")
+            punctuation(")")
+            operator(" -> ")
             signatureForProjection(args.last())
         }
 }
diff --git a/plugins/base/src/main/kotlin/templating/ProjectNameSubstitutionCommand.kt b/plugins/base/src/main/kotlin/templating/ProjectNameSubstitutionCommand.kt
new file mode 100644
index 00000000..fa4ffd7b
--- /dev/null
+++ b/plugins/base/src/main/kotlin/templating/ProjectNameSubstitutionCommand.kt
@@ -0,0 +1,3 @@
+package org.jetbrains.dokka.base.templating
+
+data class ProjectNameSubstitutionCommand(override val pattern: String, val default: String): SubstitutionCommand()
\ No newline at end of file
diff --git a/plugins/base/src/main/kotlin/transformers/pages/comments/DocTagToContentConverter.kt b/plugins/base/src/main/kotlin/transformers/pages/comments/DocTagToContentConverter.kt
index a02f1b53..8c2e1c99 100644
--- a/plugins/base/src/main/kotlin/transformers/pages/comments/DocTagToContentConverter.kt
+++ b/plugins/base/src/main/kotlin/transformers/pages/comments/DocTagToContentConverter.kt
@@ -108,7 +108,7 @@ open class DocTagToContentConverter : CommentsToContentConverter {
             is BlockQuote, is Pre, is CodeBlock -> listOf(
                 ContentCodeBlock(
                     buildChildren(docTag),
-                    "",
+                    docTag.params.getOrDefault("lang", ""),
                     dci,
                     sourceSets.toDisplaySourceSets(),
                     styles
diff --git a/plugins/base/src/main/kotlin/translators/descriptors/DefaultDescriptorToDocumentableTranslator.kt b/plugins/base/src/main/kotlin/translators/descriptors/DefaultDescriptorToDocumentableTranslator.kt
index 3ff8ffc3..d986056c 100644
--- a/plugins/base/src/main/kotlin/translators/descriptors/DefaultDescriptorToDocumentableTranslator.kt
+++ b/plugins/base/src/main/kotlin/translators/descriptors/DefaultDescriptorToDocumentableTranslator.kt
@@ -1,6 +1,7 @@
 package org.jetbrains.dokka.base.translators.descriptors
 
 import com.intellij.psi.PsiNamedElement
+import com.intellij.psi.util.PsiLiteralUtil.*
 import kotlinx.coroutines.async
 import kotlinx.coroutines.coroutineScope
 import kotlinx.coroutines.runBlocking
@@ -29,6 +30,8 @@ import org.jetbrains.dokka.transformers.sources.AsyncSourceToDocumentableTransla
 import org.jetbrains.dokka.utilities.DokkaLogger
 import org.jetbrains.dokka.utilities.parallelMap
 import org.jetbrains.dokka.utilities.parallelMapNotNull
+import org.jetbrains.kotlin.KtNodeTypes
+import org.jetbrains.dokka.model.BooleanConstant
 import org.jetbrains.kotlin.builtins.functions.FunctionClassDescriptor
 import org.jetbrains.kotlin.builtins.isBuiltinExtensionFunctionalType
 import org.jetbrains.kotlin.builtins.isExtensionFunctionType
@@ -38,7 +41,6 @@ import org.jetbrains.kotlin.descriptors.*
 import org.jetbrains.kotlin.descriptors.ClassKind
 import org.jetbrains.kotlin.descriptors.annotations.Annotated
 import org.jetbrains.kotlin.descriptors.annotations.AnnotationDescriptor
-import org.jetbrains.kotlin.idea.core.getDirectlyOverriddenDeclarations
 import org.jetbrains.kotlin.idea.kdoc.findKDoc
 import org.jetbrains.kotlin.idea.kdoc.resolveKDocLink
 import org.jetbrains.kotlin.js.resolve.diagnostics.findPsi
@@ -53,7 +55,6 @@ import org.jetbrains.kotlin.resolve.constants.KClassValue.Value.LocalClass
 import org.jetbrains.kotlin.resolve.constants.KClassValue.Value.NormalClass
 import org.jetbrains.kotlin.resolve.descriptorUtil.annotationClass
 import org.jetbrains.kotlin.resolve.descriptorUtil.fqNameOrNull
-import org.jetbrains.kotlin.resolve.descriptorUtil.overriddenTreeUniqueAsSequence
 import org.jetbrains.kotlin.resolve.scopes.MemberScope
 import org.jetbrains.kotlin.resolve.source.KotlinSourceElement
 import org.jetbrains.kotlin.resolve.source.PsiSourceElement
@@ -1011,25 +1012,33 @@ private class DokkaDescriptorVisitor(
         if (kind != CallableMemberDescriptor.Kind.FAKE_OVERRIDE) this
         else overriddenDescriptors.first().getConcreteDescriptor() as T
 
-    private fun ValueParameterDescriptor.getDefaultValue(): String? =
-        (source as? KotlinSourceElement)?.psi?.children?.find { it is KtExpression }?.text
+    private fun ValueParameterDescriptor.getDefaultValue(): Expression? =
+        ((source as? KotlinSourceElement)?.psi as? KtParameter)?.defaultValue?.toDefaultValueExpression()
 
-    private suspend fun PropertyDescriptor.getDefaultValue(): String? =
-        (source as? KotlinSourceElement)?.psi?.children?.find { it is KtConstantExpression }?.text
+    private suspend fun PropertyDescriptor.getDefaultValue(): Expression? =
+        (source as? KotlinSourceElement)?.psi?.children?.filterIsInstance<KtConstantExpression>()?.firstOrNull()
+            ?.toDefaultValueExpression()
 
     private suspend fun ClassDescriptor.getAppliedConstructorParameters() =
         (source as PsiSourceElement).psi?.children?.flatMap {
-            it.safeAs<KtInitializerList>()?.initializersAsText().orEmpty()
+            it.safeAs<KtInitializerList>()?.initializersAsExpression().orEmpty()
         }.orEmpty()
 
-    private suspend fun KtInitializerList.initializersAsText() =
+    private suspend fun KtInitializerList.initializersAsExpression() =
         initializers.firstIsInstanceOrNull<KtCallElement>()
             ?.getValueArgumentsInParentheses()
-            ?.flatMap { it.childrenAsText() }
+            ?.map { it.getArgumentExpression()?.toDefaultValueExpression() ?: ComplexExpression("") }
             .orEmpty()
 
-    private fun ValueArgument.childrenAsText() =
-        this.safeAs<KtValueArgument>()?.children?.map { it.text }.orEmpty()
+    private fun KtExpression.toDefaultValueExpression(): Expression? = when (node?.elementType) {
+        KtNodeTypes.INTEGER_CONSTANT -> parseLong(node?.text)?.let { IntegerConstant(it) }
+        KtNodeTypes.FLOAT_CONSTANT -> if (node?.text?.toLowerCase()?.endsWith('f') == true)
+            parseFloat(node?.text)?.let { FloatConstant(it) }
+        else parseDouble(node?.text)?.let { DoubleConstant(it) }
+        KtNodeTypes.BOOLEAN_CONSTANT -> BooleanConstant(node?.text == "true")
+        KtNodeTypes.STRING_TEMPLATE -> StringConstant(node.findChildByType(KtNodeTypes.LITERAL_STRING_TEMPLATE_ENTRY)?.text.orEmpty())
+        else -> node?.text?.let { ComplexExpression(it) }
+    }
 
     private data class ClassInfo(val ancestry: List<AncestryLevel>, val docs: SourceSetDependent<DocumentationNode>) {
         val supertypes: List<TypeConstructorWithKind>
diff --git a/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt b/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
index 2db55d45..f9bc7e26 100644
--- a/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
+++ b/plugins/base/src/main/kotlin/translators/documentables/PageContentBuilder.kt
@@ -122,6 +122,13 @@ open class PageContentBuilder(
             header(1, text, sourceSets = sourceSets, styles = styles, extra = extra, block = block)
         }
 
+        fun constant(text: String) = text(text, styles = mainStyles + TokenStyle.Constant)
+        fun keyword(text: String) = text(text, styles = mainStyles + TokenStyle.Keyword)
+        fun stringLiteral(text: String) = text(text, styles = mainStyles + TokenStyle.String)
+        fun booleanLiteral(value: Boolean) = text(value.toString(), styles = mainStyles + TokenStyle.Boolean)
+        fun punctuation(text: String) = text(text, styles = mainStyles + TokenStyle.Punctuation)
+        fun operator(text: String) = text(text, styles = mainStyles + TokenStyle.Operator)
+
         fun text(
             text: String,
             kind: Kind = ContentKind.Main,
@@ -194,16 +201,18 @@ open class PageContentBuilder(
             suffix: String = "",
             separator: String = ", ",
             sourceSets: Set<DokkaSourceSet> = mainSourcesetData, // TODO: children should be aware of this platform data
+            surroundingCharactersStyle: Set<Style> = mainStyles,
+            separatorStyles: Set<Style> = mainStyles,
             operation: DocumentableContentBuilder.(T) -> Unit
         ) {
             if (elements.isNotEmpty()) {
-                if (prefix.isNotEmpty()) text(prefix, sourceSets = sourceSets)
+                if (prefix.isNotEmpty()) text(prefix, sourceSets = sourceSets, styles = surroundingCharactersStyle)
                 elements.dropLast(1).forEach {
                     operation(it)
-                    text(separator, sourceSets = sourceSets)
+                    text(separator, sourceSets = sourceSets, styles = separatorStyles)
                 }
                 operation(elements.last())
-                if (suffix.isNotEmpty()) text(suffix, sourceSets = sourceSets)
+                if (suffix.isNotEmpty()) text(suffix, sourceSets = sourceSets, styles = surroundingCharactersStyle)
             }
         }
 
@@ -404,11 +413,12 @@ open class PageContentBuilder(
         fun <T> sourceSetDependentText(
             value: SourceSetDependent<T>,
             sourceSets: Set<DokkaSourceSet> = value.keys,
+            styles: Set<Style> = mainStyles,
             transform: (T) -> String
         ) = value.entries.filter { it.key in sourceSets }.mapNotNull { (p, v) ->
             transform(v).takeIf { it.isNotBlank() }?.let { it to p }
         }.groupBy({ it.first }) { it.second }.forEach {
-            text(it.key, sourceSets = it.value.toSet())
+            text(it.key, sourceSets = it.value.toSet(), styles = styles)
         }
     }
 
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 89e7df47..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="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.71824 1.66658L9.01113 0.959473L5.00497 4.96447L1.00008 0.959473L0.292969 1.66658L5.01113 6.38474L9.71824 1.66658Z" fill="#A1AAB4"/>
-</svg>
+<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="currentColor"/>
+</svg>
\ No newline at end of file
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/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 4595fdec..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
@@ -19,13 +19,22 @@ window.addEventListener('load', () => {
     initTabs()
     handleAnchor()
     initHidingLeftNavigation()
-
-    document.getElementById('main').addEventListener("scroll", (e) => {
-        document.getElementsByClassName("navigation-wrapper")[0].classList.toggle("sticky-navigation", e.target.scrollTop > 0)
-    })
     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/scripts/prism.js b/plugins/base/src/main/resources/dokka/scripts/prism.js
new file mode 100644
index 00000000..88fee76e
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/scripts/prism.js
@@ -0,0 +1,13 @@
+/* PrismJS 1.24.1
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+java+javadoc+javadoclike+kotlin&plugins=keep-markup */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,e={},M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function t(e,r){var a,n;switch(r=r||{},M.util.type(e)){case"Object":if(n=M.util.objId(e),r[n])return r[n];for(var i in a={},r[n]=a,e)e.hasOwnProperty(i)&&(a[i]=t(e[i],r));return a;case"Array":return n=M.util.objId(e),r[n]?r[n]:(a=[],r[n]=a,e.forEach(function(e,n){a[n]=t(e,r)}),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var t=document.getElementsByTagName("script");for(var r in t)if(t[r].src==n)return t[r]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:e,plaintext:e,text:e,txt:e,extend:function(e,n){var t=M.util.clone(M.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(t,e,n,r){var a=(r=r||M.languages)[t],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=r[t];return r[t]=i,M.languages.DFS(M.languages,function(e,n){n===s&&e!=t&&(this[e]=i)}),i},DFS:function e(n,t,r,a){a=a||{};var i=M.util.objId;for(var l in n)if(n.hasOwnProperty(l)){t.call(n,l,n[l],r||l);var o=n[l],s=M.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,t,l,a)):(a[i(o)]=!0,e(o,t,null,a))}}},plugins:{},highlightAll:function(e,n){M.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};M.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),M.hooks.run("before-all-elements-highlight",r);for(var a,i=0;a=r.elements[i++];)M.highlightElement(a,!0===n,r.callback)},highlightElement:function(e,n,t){var r=M.util.getLanguage(e),a=M.languages[r];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+r;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+r);var l={element:e,language:r,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,M.hooks.run("after-highlight",l),M.hooks.run("complete",l),t&&t.call(l.element)}if(M.hooks.run("before-sanity-check",l),(i=l.element.parentElement)&&"pre"===i.nodeName.toLowerCase()&&!i.hasAttribute("tabindex")&&i.setAttribute("tabindex","0"),!l.code)return M.hooks.run("complete",l),void(t&&t.call(l.element));if(M.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(M.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(M.highlight(l.code,l.grammar,l.language));else o(M.util.encode(l.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};return M.hooks.run("before-tokenize",r),r.tokens=M.tokenize(r.code,r.grammar),M.hooks.run("after-tokenize",r),W.stringify(M.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new i;return I(a,a.head,e),function e(n,t,r,a,i,l){for(var o in r)if(r.hasOwnProperty(o)&&r[o]){var s=r[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=c.alias;if(h&&!c.pattern.global){var p=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,p+"g")}for(var v=c.pattern||c,m=a.next,y=i;m!==t.tail&&!(l&&y>=l.reach);y+=m.value.length,m=m.next){var b=m.value;if(t.length>n.length)return;if(!(b instanceof W)){var k,x=1;if(h){if(!(k=z(v,y,n,f)))break;var w=k.index,A=k.index+k[0].length,P=y;for(P+=m.value.length;P<=w;)m=m.next,P+=m.value.length;if(P-=m.value.length,y=P,m.value instanceof W)continue;for(var E=m;E!==t.tail&&(P<A||"string"==typeof E.value);E=E.next)x++,P+=E.value.length;x--,b=n.slice(y,P),k.index-=y}else if(!(k=z(v,0,b,f)))continue;var w=k.index,S=k[0],O=b.slice(0,w),L=b.slice(w+S.length),N=y+b.length;l&&N>l.reach&&(l.reach=N);var j=m.prev;O&&(j=I(t,j,O),y+=O.length),q(t,j,x);var C=new W(o,g?M.tokenize(S,g):S,d,S);if(m=I(t,j,C),L&&I(t,m,L),1<x){var _={cause:o+","+u,reach:N};e(n,t,r,m.prev,y,_),l&&_.reach>l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){var n=[],t=e.head.next;for(;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function z(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function q(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;(n.next=r).prev=n,e.length-=a}if(u.Prism=M,W.stringify=function n(e,t){if("string"==typeof e)return e;if(Array.isArray(e)){var r="";return e.forEach(function(e){r+=n(e,t)}),r}var a={type:e.type,content:n(e.content,t),tag:"span",classes:["token",e.type],attributes:{},language:t},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),M.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()},!1)),M;var t=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(t&&(M.filename=t.src,t.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var a=document.readyState;"loading"===a||"interactive"===a&&t&&t.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?\]\]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
+!function(e){var t=/\b(?:abstract|assert|boolean|break|byte|case|catch|char|class|const|continue|default|do|double|else|enum|exports|extends|final|finally|float|for|goto|if|implements|import|instanceof|int|interface|long|module|native|new|non-sealed|null|open|opens|package|permits|private|protected|provides|public|record|requires|return|sealed|short|static|strictfp|super|switch|synchronized|this|throw|throws|to|transient|transitive|try|uses|var|void|volatile|while|with|yield)\b/,n="(^|[^\\w.])(?:[a-z]\\w*\\s*\\.\\s*)*(?:[A-Z]\\w*\\s*\\.\\s*)*",a={pattern:RegExp(n+"[A-Z](?:[\\d_A-Z]*[a-z]\\w*)?\\b"),lookbehind:!0,inside:{namespace:{pattern:/^[a-z]\w*(?:\s*\.\s*[a-z]\w*)*(?:\s*\.)?/,inside:{punctuation:/\./}},punctuation:/\./}};e.languages.java=e.languages.extend("clike",{"class-name":[a,{pattern:RegExp(n+"[A-Z]\\w*(?=\\s+\\w+\\s*[;,=()])"),lookbehind:!0,inside:a.inside}],keyword:t,function:[e.languages.clike.function,{pattern:/(::\s*)[a-z_]\w*/,lookbehind:!0}],number:/\b0b[01][01_]*L?\b|\b0x(?:\.[\da-f_p+-]+|[\da-f_]+(?:\.[\da-f_p+-]+)?)\b|(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?\d[\d_]*)?[dfl]?/i,operator:{pattern:/(^|[^.])(?:<<=?|>>>?=?|->|--|\+\+|&&|\|\||::|[?:~]|[-+*/%&|^!=<>]=?)/m,lookbehind:!0}}),e.languages.insertBefore("java","string",{"triple-quoted-string":{pattern:/"""[ \t]*[\r\n](?:(?:"|"")?(?:\\.|[^"\\]))*"""/,greedy:!0,alias:"string"}}),e.languages.insertBefore("java","class-name",{annotation:{pattern:/(^|[^.])@\w+(?:\s*\.\s*\w+)*/,lookbehind:!0,alias:"punctuation"},generics:{pattern:/<(?:[\w\s,.?]|&(?!&)|<(?:[\w\s,.?]|&(?!&)|<(?:[\w\s,.?]|&(?!&)|<(?:[\w\s,.?]|&(?!&))*>)*>)*>)*>/,inside:{"class-name":a,keyword:t,punctuation:/[<>(),.:]/,operator:/[?&|]/}},namespace:{pattern:RegExp("(\\b(?:exports|import(?:\\s+static)?|module|open|opens|package|provides|requires|to|transitive|uses|with)\\s+)(?!<keyword>)[a-z]\\w*(?:\\.[a-z]\\w*)*\\.?".replace(/<keyword>/g,function(){return t.source})),lookbehind:!0,inside:{punctuation:/\./}}})}(Prism);
+!function(p){var a=p.languages.javadoclike={parameter:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*@(?:param|arg|arguments)\s+)\w+/m,lookbehind:!0},keyword:{pattern:/(^[\t ]*(?:\/{3}|\*|\/\*\*)\s*|\{)@[a-z][a-zA-Z-]+\b/m,lookbehind:!0},punctuation:/[{}]/};Object.defineProperty(a,"addSupport",{value:function(a,e){"string"==typeof a&&(a=[a]),a.forEach(function(a){!function(a,e){var n="doc-comment",t=p.languages[a];if(t){var r=t[n];if(!r){var o={"doc-comment":{pattern:/(^|[^\\])\/\*\*[^/][\s\S]*?(?:\*\/|$)/,lookbehind:!0,alias:"comment"}};r=(t=p.languages.insertBefore(a,"comment",o))[n]}if(r instanceof RegExp&&(r=t[n]={pattern:r}),Array.isArray(r))for(var i=0,s=r.length;i<s;i++)r[i]instanceof RegExp&&(r[i]={pattern:r[i]}),e(r[i]);else e(r)}}(a,function(a){a.inside||(a.inside={}),a.inside.rest=e})})}}),a.addSupport(["java","javascript","php"],a)}(Prism);
+!function(a){var e=/(^(?:[\t ]*(?:\*\s*)*))[^*\s].*$/m,n="(?:\\b[a-zA-Z]\\w+\\s*\\.\\s*)*\\b[A-Z]\\w*(?:\\s*<mem>)?|<mem>".replace(/<mem>/g,function(){return"#\\s*\\w+(?:\\s*\\([^()]*\\))?"});a.languages.javadoc=a.languages.extend("javadoclike",{}),a.languages.insertBefore("javadoc","keyword",{reference:{pattern:RegExp("(@(?:exception|throws|see|link|linkplain|value)\\s+(?:\\*\\s*)?)(?:"+n+")"),lookbehind:!0,inside:{function:{pattern:/(#\s*)\w+(?=\s*\()/,lookbehind:!0},field:{pattern:/(#\s*)\w+/,lookbehind:!0},namespace:{pattern:/\b(?:[a-z]\w*\s*\.\s*)+/,inside:{punctuation:/\./}},"class-name":/\b[A-Z]\w*/,keyword:a.languages.java.keyword,punctuation:/[#()[\],.]/}},"class-name":{pattern:/(@param\s+)<[A-Z]\w*>/,lookbehind:!0,inside:{punctuation:/[.<>]/}},"code-section":[{pattern:/(\{@code\s+(?!\s))(?:[^\s{}]|\s+(?![\s}])|\{(?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*\})+(?=\s*\})/,lookbehind:!0,inside:{code:{pattern:e,lookbehind:!0,inside:a.languages.java,alias:"language-java"}}},{pattern:/(<(code|pre|tt)>(?!<code>)\s*)\S(?:\S|\s+\S)*?(?=\s*<\/\2>)/,lookbehind:!0,inside:{line:{pattern:e,lookbehind:!0,inside:{tag:a.languages.markup.tag,entity:a.languages.markup.entity,code:{pattern:/.+/,inside:a.languages.java,alias:"language-java"}}}}}],tag:a.languages.markup.tag,entity:a.languages.markup.entity}),a.languages.javadoclike.addSupport("java",a.languages.javadoc)}(Prism);
+!function(e){e.languages.kotlin=e.languages.extend("clike",{keyword:{pattern:/(^|[^.])\b(?:abstract|actual|annotation|as|break|by|catch|class|companion|const|constructor|continue|crossinline|data|do|dynamic|else|enum|expect|external|final|finally|for|fun|get|if|import|in|infix|init|inline|inner|interface|internal|is|lateinit|noinline|null|object|open|operator|out|override|package|private|protected|public|reified|return|sealed|set|super|suspend|tailrec|this|throw|to|try|typealias|val|var|vararg|when|where|while)\b/,lookbehind:!0},function:[{pattern:/(?:`[^\r\n`]+`|\b\w+)(?=\s*\()/,greedy:!0},{pattern:/(\.)(?:`[^\r\n`]+`|\w+)(?=\s*\{)/,lookbehind:!0,greedy:!0}],number:/\b(?:0[xX][\da-fA-F]+(?:_[\da-fA-F]+)*|0[bB][01]+(?:_[01]+)*|\d+(?:_\d+)*(?:\.\d+(?:_\d+)*)?(?:[eE][+-]?\d+(?:_\d+)*)?[fFL]?)\b/,operator:/\+[+=]?|-[-=>]?|==?=?|!(?:!|==?)?|[\/*%<>]=?|[?:]:?|\.\.|&&|\|\||\b(?:and|inv|or|shl|shr|ushr|xor)\b/}),delete e.languages.kotlin["class-name"],e.languages.insertBefore("kotlin","string",{"raw-string":{pattern:/("""|''')[\s\S]*?\1/,alias:"string"}}),e.languages.insertBefore("kotlin","keyword",{annotation:{pattern:/\B@(?:\w+:)?(?:[A-Z]\w*|\[[^\]]+\])/,alias:"builtin"}}),e.languages.insertBefore("kotlin","function",{label:{pattern:/\b\w+@|@\w+\b/,alias:"symbol"}});var n=[{pattern:/\$\{[^}]+\}/,inside:{delimiter:{pattern:/^\$\{|\}$/,alias:"variable"},rest:e.languages.kotlin}},{pattern:/\$\w+/,alias:"variable"}];e.languages.kotlin.string.inside=e.languages.kotlin["raw-string"].inside={interpolation:n},e.languages.kt=e.languages.kotlin,e.languages.kts=e.languages.kotlin}(Prism);
+"undefined"!=typeof Prism&&"undefined"!=typeof document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var a=0,s=[],p=function(e,n){var o={};n||(o.clone=e.cloneNode(!1),o.posOpen=a,s.push(o));for(var t=0,d=e.childNodes.length;t<d;t++){var r=e.childNodes[t];1===r.nodeType?p(r):3===r.nodeType&&(a+=r.data.length)}n||(o.posClose=a)};p(e.element,!0),s&&s.length&&(e.keepMarkup=s)}}),Prism.hooks.add("after-highlight",function(n){if(n.keepMarkup&&n.keepMarkup.length){var a=function(e,n){for(var o=0,t=e.childNodes.length;o<t;o++){var d=e.childNodes[o];if(1===d.nodeType){if(!a(d,n))return!1}else 3===d.nodeType&&(!n.nodeStart&&n.pos+d.data.length>n.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.clone.appendChild(r.extractContents()),r.insertNode(n.node.clone),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){a(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}}));
+Prism.hooks.add('before-sanity-check', function (env){env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');env.code = env.element.textContent;});
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/prism.css b/plugins/base/src/main/resources/dokka/styles/prism.css
new file mode 100644
index 00000000..90c4d7a9
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/styles/prism.css
@@ -0,0 +1,104 @@
+:root {
+	--keyword-color: #07a;
+	--property-color: #905;
+	--function-color: #DD4A68;
+}
+
+:root.theme-dark {
+	--keyword-color: #cc7832;
+	--property-color: #9876aa;
+	--function-color: #ffc66d;
+}
+
+code .token {
+    white-space: pre-line;
+}
+
+/* PrismJS 1.24.1
+https://prismjs.com/download.html#themes=prism&languages=clike+java+javadoclike+kotlin&plugins=keep-markup */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: var(--property-color);
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.annotation,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	/*background: hsla(0, 0%, 100%, .5);*/
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: var(--keyword-color);
+	font-size: inherit; /* to override .keyword */
+}
+
+.token.function,
+.token.class-name {
+	color: var(--function-color);
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.annotation,.control,.field,.filename,.keyword,.menupath,.property,.string,.value {
+	color: #27282c;
+	/*color: var(--wh-color-text-bold);*/
+	font-weight: 700;
+}
\ 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 81e1012d..7a2dfae0 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -3,16 +3,59 @@
 @import url('jetbrains-mono.css');
 
 :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;
-    --average-color: #637282;
+
     --footer-height: 64px;
     --footer-padding-top: 48px;
-    --horizontal-spacing-for-content: 42px;
+    --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;
     --color-scrollbar: rgba(39, 40, 44, 0.40);
-    --color-scrollbar-track: #f4f4f4;
+    --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: 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: 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 {
@@ -20,6 +63,9 @@ html {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     scrollbar-color: rgba(39, 40, 44, 0.40) #F4F4F4;
     scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    color: var(--default-font-color);
 }
 
 html ::-webkit-scrollbar {
@@ -37,105 +83,105 @@ html ::-webkit-scrollbar-thumb {
     background: rgba(39, 40, 44, 0.40);
     background: var(--color-scrollbar);
 }
-    
+
 
 .main-content {
     padding-bottom: var(--bottom-spacing);
     z-index: 0;
+    max-width: var(--max-width);
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-.main-content>* {
+.main-content > * {
     margin-left: var(--horizontal-spacing-for-content);
     margin-right: var(--horizontal-spacing-for-content);
 }
 
 .navigation-wrapper {
     display: flex;
-    padding: 24px 0;
     flex-wrap: wrap;
     position: sticky;
     top: 0;
-    background-color: #f4f4f4;
-    padding-top: 19px;
-    padding-bottom: 18px;
-    z-index: 8;
+    background-color: var(--color-dark);
+    z-index: 4;
+    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;
     margin-right: 0;
-    padding-left: var(--horizontal-spacing-for-content);
-    padding-right: var(--horizontal-spacing-for-content);
+    padding: 19px var(--horizontal-spacing-for-content) 18px;
 }
 
-.navigation-wrapper.sticky-navigation {
-    border-bottom: 1px solid #DADFE6;
+.navigation-wrapper > .library-name {
+    font-weight: 700;
+    margin-right: 12px;
 }
 
-.breadcrumbs {
-    color: var(--breadcrumb-font-color);
-    overflow-wrap: break-word;
+.navigation-wrapper a {
+    color: #fff;
 }
 
-.breadcrumbs a {
-    color: var(--breadcrumb-font-color)
+#searchBar {
+    margin-left: 16px;
+    display: inline-flex;
+    align-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
 }
 
-.breadcrumbs a:hover {
-    color: var(--hover-link-color)
+.breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover {
+    margin-top: var(--breadcrumb-margin);
+    color: var(--breadcrumb-font-color);
+    overflow-wrap: break-word;
 }
 
-.tabs-section > .section-tab:first-child {
+.tabs-section > .section-tab:first-child,
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:first-child {
     margin-left: 0;
 }
 
 .section-tab {
     border: 0;
-    cursor: pointer;
     background-color: transparent;
-    border-bottom: 1px solid #DADFE6;
+    border-bottom: 1px solid var(--inactive-tab-border-color);
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    margin-bottom: 16px;
+}
+
+.section-tab, .platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    margin: 0 8px;
     padding: 11px 3px;
-    font-size: 14px;
-    color: var(--average-color);
+    cursor: pointer;
     outline: none;
-    margin: 0 8px;
+    font-size: var(--default-font-size);
+    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 {
     margin-top: 12px;
 }
 
-.tabs-section-body .with-platform-tabs > div {
-    margin: 0 12px;
-}
-
-.tabs-section-body .table .with-platform-tabs > div {
-    margin: 0;
-}
-
 .tabs-section-body .with-platform-tabs {
     padding-top: 12px;
     padding-bottom: 12px;
 }
 
-.tabs-section-body .with-platform-tabs .sourceset-depenent-content .table-row {
-    background-color: #f4f4f4;
-    border-bottom: 2px solid white;
-}
-
 .cover > .platform-hinted {
     padding-top: 12px;
     margin-top: 12px;
@@ -147,15 +193,6 @@ html ::-webkit-scrollbar-thumb {
     flex-direction: column;
 }
 
-.cover .platform-hinted .sourceset-depenent-content > .symbol,
-.cover > .symbol {
-    background-color: white;
-}
-
-.cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .symbol {
-    background-color: #f4f4f4;
-}
-
 .cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block ~ .symbol {
     padding-top: 16px;
     padding-left: 0;
@@ -169,7 +206,7 @@ html ::-webkit-scrollbar-thumb {
 
 .cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block {
     padding: 0;
-    font-size: 14px;
+    font-size: var(--default-font-size);
 }
 
 .cover ~ .divergent-group {
@@ -182,18 +219,21 @@ html ::-webkit-scrollbar-thumb {
 }
 
 .cover p.paragraph {
-    margin-top: 4px;
+    margin-top: 8px;
 }
 
 .divergent-group {
-    background-color: white;
-    padding: 8px 0px 8px 0;
+    background-color: var(--background-color);
+    padding: 8px 0 8px 0;
     margin-bottom: 2px;
 }
 
-.divergent-group .table-row {
-    background-color: #F4F4F4;
-    border-bottom: 2px solid white;
+.divergent-group .table-row, tbody > tr  {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.divergent-group .table-row:last-of-type, tbody > tr:last-of-type {
+    border-bottom: none;
 }
 
 .title > .divergent-group:first-of-type {
@@ -203,8 +243,13 @@ html ::-webkit-scrollbar-thumb {
 #container {
     display: flex;
     flex-direction: row;
-    min-height: 100%;
+    height: calc(100% - var(--top-navigation-height));
+}
+
+#container > div {
     height: 100%;
+    max-height: calc(100vh - var(--top-navigation-height));
+    overflow: auto;
 }
 
 #main {
@@ -212,50 +257,26 @@ html ::-webkit-scrollbar-thumb {
     max-width: calc(100% - 280px);
     display: flex;
     flex-direction: column;
-    height: auto;
-    overflow: auto;
 }
 
 #leftColumn {
     width: 280px;
-    border-right: 1px solid #DADFE6;
+    border-right: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
 }
 
 #sideMenu {
-    padding-top: 16px;
-    position: relative;
-    max-height: calc(100% - 140px);
-    height: 100%;
+    padding-top: 22px;
     overflow-y: auto;
-}
-
-#sideMenu img {
-    margin: 1em 0.25em;
-}
-
-#sideMenu hr {
-    background: #DADFE6;
-}
-
-#logo {
-    background-size: 125px 26px;
-    border-bottom: 1px solid #DADFE6;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    padding-left: 24px;
-    padding-top: 24px;
-    height: 48px;
-    cursor: pointer;
-}
-
-.monospace,
-.code {
-    font-family: monospace;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    height: 100%;
 }
 
 .sample-container, div.CodeMirror {
+    position: relative;
     display: flex;
     flex-direction: column;
 }
@@ -268,8 +289,8 @@ code.paragraph {
     align-items: center;
     display: flex;
     justify-content: flex-end;
-    padding: 10px;
-    margin-right: 14px;
+    padding: 2px 2px 2px 0;
+    margin-right: 5px;
     cursor: pointer;
 }
 
@@ -281,19 +302,21 @@ code.paragraph {
     padding: 0;
 }
 
-.symbol {
-    background-color: #F4F4F4;
+.symbol, code {
+    background-color: var(--code-background);
     align-items: center;
-    display: block;
-    padding: 8px 32px 8px 8px;
     box-sizing: border-box;
     white-space: pre-wrap;
-    font-weight: bold;
-    position: relative;
+    font-family: var(--default-monospace-font-family);
+    font-size: var(--default-font-size);
+}
+
+.symbol, code.block {
+    display: block;
+    padding: 12px 32px 12px 12px;
+    border-radius: 8px;
     line-height: 24px;
-    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size: 14px;
-    min-height: 43px;
+    position: relative;
 }
 
 .symbol > a {
@@ -304,7 +327,15 @@ code.paragraph {
     cursor: pointer;
 }
 
-.symbol span.copy-icon::before {
+.symbol span.copy-icon, .sample-container span.copy-icon {
+    display: none;
+}
+
+.symbol:hover span.copy-icon, .sample-container:hover span.copy-icon {
+    display: inline-block;
+}
+
+.symbol span.copy-icon::before, .sample-container span.copy-icon::before {
     width: 24px;
     height: 24px;
     display: inline-block;
@@ -314,11 +345,11 @@ code.paragraph {
     mask: url("../images/copy-icon.svg") no-repeat 50% 50%;
     -webkit-mask-size: cover;
     mask-size: cover;
-    background-color: var(--average-color);
+    background-color: var(--secondary-text-color);
 }
 
-.symbol span.copy-icon:hover::before {
-    background-color: black;
+.symbol span.copy-icon:hover::before, .sample-container span.copy-icon:hover::before {
+    background-color: var(--color-dark);
 }
 
 .copy-popup-wrapper {
@@ -330,7 +361,7 @@ code.paragraph {
     font-weight: normal;
     font-family: 'Inter', "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
     width: max-content;
-    font-size: 14px;
+    font-size: var(--default-font-size);
     cursor: default;
     border: 1px solid #D8DCE1;
     box-sizing: border-box;
@@ -365,7 +396,7 @@ code.paragraph {
     padding-right: 14px;
 }
 
-.symbol .top-right-position {
+.symbol .top-right-position, .sample-container .top-right-position {
     /* it is important for a parent to have a position: relative */
     position: absolute;
     top: 8px;
@@ -383,14 +414,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 {
@@ -405,7 +436,7 @@ code.paragraph {
 }
 
 .overview:hover:before {
-    background-color: #DADFE5;
+    background-color: rgba(39, 40, 44, 0.05);
 }
 
 #nav-submenu {
@@ -422,12 +453,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(180deg);
+    transform: rotate(90deg);
+    width: 16px;
+    height: 16px;
+}
+
+.sideMenuPart[data-active] > .overview .navButtonContent::before {
+    background-color: var(--default-white);
 }
 
 .sideMenuPart.hidden > .navButton .navButtonContent::after {
@@ -435,8 +479,7 @@ code.paragraph {
 }
 
 .sideMenuPart.hidden > .sideMenuPart {
-    height: 0;
-    visibility: hidden;
+    display: none;
 }
 
 .filtered > a, .filtered > .navButton {
@@ -445,10 +488,10 @@ code.paragraph {
 
 body, table {
     font-family: 'Inter', "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: #F4F4F4;
+    background: var(--background-color);
     font-style: normal;
     font-weight: normal;
-    font-size: 14px;
+    font-size: var(--default-font-size);
     line-height: 24px;
     margin: 0;
 }
@@ -456,12 +499,10 @@ body, table {
 table {
     width: 100%;
     border-collapse: collapse;
-    background-color: #ffffff;
     padding: 5px;
 }
 
 tbody > tr {
-    border-bottom: 2px solid #F4F4F4;
     min-height: 56px;
 }
 
@@ -469,34 +510,16 @@ td:first-child {
     width: 20vw;
 }
 
-.keyword {
-    color: black;
-    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-    font-size: 12px;
-}
-
-.identifier {
-    color: darkblue;
-    font-size: 12px;
-    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
-}
-
 .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;
@@ -507,16 +530,12 @@ h1.cover {
     font-size: 60px;
     line-height: 64px;
     letter-spacing: -1.5px;
-
-    border-bottom: 1px solid #DADFE6;
-
     margin-bottom: 0;
     padding-bottom: 32px;
     display: block;
 }
 
 h2 {
-    color: #393939;
     font-size: 31px;
     line-height: 40px;
     letter-spacing: -0.5px;
@@ -528,14 +547,6 @@ h3 {
     letter-spacing: -0.2px;
 }
 
-h4 {
-    margin: 0;
-}
-
-h3, h4, h5, h6 {
-    color: #494949;
-}
-
 .UnderCoverText {
     font-size: 16px;
     line-height: 28px;
@@ -552,28 +563,31 @@ h3, h4, h5, h6 {
 
 
 a {
-    color: #5B5DEF;
-    font-weight: 400;
     text-decoration: none;
 }
 
-a:hover {
-    color: #5B5DEF;
-    text-decoration: underline;
+#main a:not([data-name]) {
+    padding-bottom: 2px;
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    transition: color .1s, border-color .1s;
+}
+
+#main a:hover {
+    border-bottom-color: unset;
+    color: inherit
 }
 
 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;
@@ -581,11 +595,6 @@ blockquote {
     font-style: italic;
 }
 
-code, pre {
-    color: #333;
-    font-size: 14px;
-}
-
 pre {
     display: block;
     overflow-x: auto;
@@ -594,7 +603,7 @@ pre {
 th, td {
     text-align: left;
     vertical-align: top;
-    padding: 5px 10px;
+    padding: 12px 10px 11px;
 }
 
 dt {
@@ -602,10 +611,6 @@ dt {
     font-weight: 700;
 }
 
-th {
-    color: #444;
-}
-
 p.paragraph img {
     display: block;
 }
@@ -614,94 +619,10 @@ img {
     max-width: 100%;
 }
 
-header {
-    width: 270px;
-    float: left;
-    position: fixed;
-}
-
-header ul {
-    list-style: none;
-    height: 40px;
-
-    padding: 0;
-
-    background: #eee;
-    background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8f8f8), color-stop(100%, #dddddd));
-    background: -webkit-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-    background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-    background: -ms-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-    background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
-
-    border-radius: 5px;
-    border: 1px solid #d2d2d2;
-    box-shadow: inset #fff 0 1px 0, inset rgba(0, 0, 0, 0.03) 0 -1px 0;
-    width: 270px;
-}
-
-header li {
-    width: 89px;
-    float: left;
-    border-right: 1px solid #d2d2d2;
-    height: 40px;
-}
-
-header ul a {
-    line-height: 1;
-    font-size: 11px;
-    color: #999;
-    display: block;
-    text-align: center;
-    padding-top: 6px;
-    height: 40px;
-}
-
-strong {
-    color: #222;
-    font-weight: 700;
-}
-
-header ul li + li {
-    width: 88px;
-    border-left: 1px solid #fff;
-}
-
-header ul li + li + li {
-    border-right: none;
-    width: 89px;
-}
-
-header ul a strong {
-    font-size: 14px;
-    display: block;
-    color: #222;
-}
-
-section {
-    width: 500px;
-    float: right;
-    padding-bottom: 50px;
-}
-
 small {
     font-size: 11px;
 }
 
-hr {
-    border: 0;
-    background: #e5e5e5;
-    height: 1px;
-    margin: 0 0 20px;
-}
-
-footer {
-    width: 270px;
-    float: left;
-    position: fixed;
-    bottom: 50px;
-}
-
 .platform-tag {
     display: flex;
     flex-direction: row;
@@ -761,8 +682,10 @@ footer {
     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 {
@@ -779,6 +702,10 @@ footer {
     color: var(--average-color);
 }
 
+.navigation-wrapper .platform-selector:not([data-active]) {
+    color: #FFFFFF;
+}
+
 td.content {
     padding-left: 24px;
     padding-top: 16px;
@@ -798,19 +725,6 @@ td.content {
     position: relative;
 }
 
-.main-subrow > div > span > a, 
-.main-subrow > div > span > span[data-unresolved-link] {
-    text-decoration: none;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 14px;
-    color: #282E34;
-}
-
-.main-subrow > div > span > a:hover {
-    color: var(--hover-link-color);
-}
-
 .main-subrow:hover .anchor-icon {
     opacity: 1;
     transition: 0.2s;
@@ -836,6 +750,8 @@ td.content {
 
 .main-subrow .anchor-wrapper {
     position: relative;
+    width: 16px;
+    height: 16px;
 }
 
 .inline-flex {
@@ -850,58 +766,60 @@ td.content {
 
 .platform-hinted > .platform-bookmarks-row > .platform-bookmark {
     min-width: 64px;
-    height: 36px;
-    border: 2px solid white;
-    background: white;
+    border: 2px solid var(--background-color);
+    background: inherit;
     outline: none;
     flex: none;
     order: 5;
     align-self: flex-start;
-    margin: 0;
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like:hover {
-    border-top: 2px solid rgba(77, 187, 95, 0.3);
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like {
+    border-bottom: 2px solid rgba(77, 187, 95, 0.3);
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like:hover {
-    border-top: 2px solid rgba(254, 175, 54, 0.3);
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like {
+    border-bottom: 2px solid rgba(254, 175, 54, 0.3);
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like:hover {
-    border-top: 2px solid rgba(105, 118, 249, 0.3);
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like {
+    border-bottom: 2px solid rgba(105, 118, 249, 0.3);
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like:hover {
-    border-top: 2px solid rgba(161, 170, 180, 0.3);
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like {
+    border-bottom: 2px solid rgba(161, 170, 180, 0.3);
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like[data-active=''] {
-    border: 2px solid #F4F4F4;
-    border-top: 2px solid #4DBB5F;
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like[data-active=''],
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.jvm-like:hover {
+    border: 2px solid var(--background-color);
+    border-bottom: 2px solid #4DBB5F;
 
-    background: #F4F4F4;
+    background: var(--background-color);
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like[data-active=''] {
-    border: 2px solid #F4F4F4;
-    border-top: 2px solid #FED236;
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like[data-active=''],
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.js-like:hover {
+    border: 2px solid var(--background-color);
+    border-bottom: 2px solid #FED236;
 
-    background: #F4F4F4;
+    background: var(--background-color);
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like[data-active=''] {
-    border: 2px solid #F4F4F4;
-    border-top: 2px solid #CD74F6;
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like[data-active=''],
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.native-like:hover {
+    border: 2px solid var(--background-color);
+    border-bottom: 2px solid #CD74F6;
 
-    background: #F4F4F4;
+    background: var(--background-color);
 }
 
-.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like[data-active=''] {
-    border: 2px solid #F4F4F4;
-    border-top: 2px solid #A6AFBA;
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like[data-active=''],
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark.common-like:hover {
+    border: 2px solid var(--background-color);
+    border-bottom: 2px solid #A6AFBA;
 
-    background: #F4F4F4;
+    background: var(--background-color);
 }
 
 .platform-hinted > .content:not([data-active]),
@@ -928,18 +846,12 @@ td.content {
 }
 
 .cover .with-platform-tabs {
-    background-color: white;
-    font-size: 14px;
-}
-
-.cover > .with-platform-tabs .platform-bookmarks-row {
-    margin: 0 16px;
+    font-size: var(--default-font-size);
 }
 
 .cover > .with-platform-tabs > .content {
-    margin: 0 16px;
-    background-color: #f4f4f4;
     padding: 8px 16px;
+    border: 1px solid var(--border-color);
 }
 
 .cover > .block {
@@ -955,12 +867,14 @@ td.content {
 
 .table-row .with-platform-tabs .sourceset-depenent-content .brief {
     padding: 8px;
-    background-color: #f4f4f4;
 }
 
 .sideMenuPart[data-active] > .overview:before {
-    border-left: 4px solid var(--hover-link-color);
-    background: rgba(91, 93, 239, 0.15);
+    background: var(--color-dark);
+}
+
+.sideMenuPart[data-active] > .overview > a {
+    color: var(--default-white);
 }
 
 .table {
@@ -971,13 +885,17 @@ td.content {
 .table-row {
     display: flex;
     flex-direction: column;
-    background: white;
-    border-bottom: 2px solid #f4f4f4;
-    padding: 16px 24px 16px 24px;
+    border-bottom: 1px solid var(--border-color);
+    padding: 11px 0 12px 0;
+    background-color: var(--background-color);
+}
+
+.table-row:last-of-type {
+    border-bottom: none;
 }
 
 .table-row .brief-comment {
-    color: var(--average-color);
+    color: var(--brief-color);
 }
 
 .platform-dependent-row {
@@ -1040,37 +958,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;
@@ -1078,18 +965,18 @@ td.content {
     align-items: center;
     position: relative;
     min-height: var(--footer-height);
-    border-top: 1px solid #DADFE6;
     font-size: 12px;
     line-height: 16px;
     letter-spacing: 0.2px;
-    color: var(--breadcrumb-font-color);
-    margin-top:auto;
+    color: var(--footer-font-color);
+    margin-top: auto;
+    background-color: var(--footer-background);
 }
 
 .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 {
@@ -1119,7 +1006,7 @@ td.content {
 }
 
 .footer .padded-icon::before {
-    content: url("../images/footer-go-to-link.svg");   
+    content: url("../images/footer-go-to-link.svg");
 }
 
 .pull-right {
@@ -1151,6 +1038,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;
@@ -1163,6 +1071,7 @@ div.runnablesample {
     #main {
         max-width: 100%;
     }
+
     #leftColumn {
         position: fixed;
         margin-left: -280px;
@@ -1171,43 +1080,42 @@ div.runnablesample {
         background: white;
         height: 100%;
     }
+
     #leftColumn.open {
         margin-left: 0;
     }
+
     #leftColumn.open ~ #main #searchBar {
         display: none;
     }
+
     #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 {
         cursor: pointer;
     }
+
     #leftColumn.open ~ #main #leftToggler {
         margin-left: 280px;
     }
+
     .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;
     }
+
     .main-content > * {
         margin-left: var(--mobile-horizontal-spacing-for-content);
         margin-right: var(--mobile-horizontal-spacing-for-content);
@@ -1222,8 +1130,13 @@ div.runnablesample {
         padding-bottom: 16px;
         overflow: auto;
     }
+
     h1.cover {
         font-size: 32px;
         line-height: 32px;
     }
+
+    #theme-toggle-button {
+        display: none;
+    }
 }
diff --git a/plugins/base/src/test/kotlin/content/HighlightingTest.kt b/plugins/base/src/test/kotlin/content/HighlightingTest.kt
new file mode 100644
index 00000000..39acd2ca
--- /dev/null
+++ b/plugins/base/src/test/kotlin/content/HighlightingTest.kt
@@ -0,0 +1,79 @@
+package content
+
+import org.jetbrains.dokka.base.testApi.testRunner.BaseAbstractTest
+import org.jetbrains.dokka.model.dfs
+import org.jetbrains.dokka.pages.*
+import org.junit.jupiter.api.Test
+import kotlin.test.assertTrue
+
+class HighlightingTest : BaseAbstractTest() {
+    private val configuration = dokkaConfiguration {
+        sourceSets {
+            sourceSet {
+                sourceRoots = listOf("src/")
+                classpath = listOf(commonStdlibPath!!)
+                externalDocumentationLinks = listOf(stdlibExternalDocumentationLink)
+            }
+        }
+    }
+
+    @Test
+    fun `open suspend fun`() {
+        testInline(
+            """
+            |/src/main/kotlin/test/Test.kt
+            |package example
+            |
+            | open suspend fun simpleFun(): String = "Celebrimbor"
+            """,
+            configuration
+        ) {
+            pagesTransformationStage = { module ->
+                val symbol = (module.dfs { it.name == "simpleFun" } as MemberPageNode).content
+                    .dfs { it is ContentGroup && it.dci.kind == ContentKind.Symbol }
+                val children = symbol?.children
+
+                for (it in listOf(
+                    Pair(0, TokenStyle.Keyword), Pair(1, TokenStyle.Keyword), Pair(2, TokenStyle.Keyword),
+                    Pair(4, TokenStyle.Punctuation), Pair(5, TokenStyle.Punctuation), Pair(6, TokenStyle.Operator)
+                ))
+                    assertTrue(children?.get(it.first)?.style?.contains(it.second) == true)
+                assertTrue(children?.get(3)?.children?.first()?.style?.contains(TokenStyle.Function) == true)
+            }
+        }
+    }
+
+    @Test
+    fun `plain typealias of plain class with annotation`() {
+        testInline(
+            """
+                |/src/main/kotlin/common/Test.kt
+                |package example
+                |
+                |@MustBeDocumented
+                |@Target(AnnotationTarget.TYPEALIAS)
+                |annotation class SomeAnnotation
+                |
+                |@SomeAnnotation
+                |typealias PlainTypealias = Int
+                |
+            """.trimMargin(),
+            configuration
+        ) {
+            pagesTransformationStage = { module ->
+                val symbol = (module.dfs { it.name == "example" } as PackagePageNode).content
+                    .dfs { it is ContentGroup && it.dci.kind == ContentKind.Symbol }
+                val children = symbol?.children
+
+                for (it in listOf(
+                    Pair(1, TokenStyle.Keyword), Pair(3, TokenStyle.Operator)
+                ))
+                    assertTrue(children?.get(it.first)?.style?.contains(it.second) == true)
+                val annotation = children?.first()?.children?.first()
+
+                assertTrue(annotation?.children?.get(0)?.style?.contains(TokenStyle.Annotation) == true)
+                assertTrue(annotation?.children?.get(1)?.children?.first()?.style?.contains(TokenStyle.Annotation) == true)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/plugins/base/src/test/kotlin/enums/EnumsTest.kt b/plugins/base/src/test/kotlin/enums/EnumsTest.kt
index 2535140c..59a4c6f2 100644
--- a/plugins/base/src/test/kotlin/enums/EnumsTest.kt
+++ b/plugins/base/src/test/kotlin/enums/EnumsTest.kt
@@ -1,11 +1,9 @@
 package enums
 
 import matchers.content.*
-import org.jetbrains.dokka.model.ConstructorValues
-import org.jetbrains.dokka.model.DEnum
-import org.jetbrains.dokka.model.dfs
 import org.jetbrains.dokka.pages.*
 import org.jetbrains.dokka.base.testApi.testRunner.BaseAbstractTest
+import org.jetbrains.dokka.model.*
 import org.jetbrains.kotlin.utils.addToStdlib.firstIsInstance
 import org.junit.jupiter.api.Assertions.*
 import org.junit.jupiter.api.Test
@@ -119,8 +117,8 @@ class EnumsTest : BaseAbstractTest() {
 
                         assertEquals(1, first.extra.allOfType<ConstructorValues>().size)
                         assertEquals(1, second.extra.allOfType<ConstructorValues>().size)
-                        assertEquals(listOf("\"e1\"", "1", "true"), first.extra.allOfType<ConstructorValues>().first().values.values.first())
-                        assertEquals(listOf("\"e2\"", "2", "false"), second.extra.allOfType<ConstructorValues>().first().values.values.first())
+                        assertEquals(listOf(StringConstant("e1"), IntegerConstant(1), BooleanConstant(true)), first.extra.allOfType<ConstructorValues>().first().values.values.first())
+                        assertEquals(listOf(StringConstant("e2"), IntegerConstant(2), BooleanConstant(false)), second.extra.allOfType<ConstructorValues>().first().values.values.first())
                     }
                 }
             }
diff --git a/plugins/base/src/test/kotlin/model/FunctionsTest.kt b/plugins/base/src/test/kotlin/model/FunctionsTest.kt
index 10ff29b4..eca5daea 100644
--- a/plugins/base/src/test/kotlin/model/FunctionsTest.kt
+++ b/plugins/base/src/test/kotlin/model/FunctionsTest.kt
@@ -344,7 +344,7 @@ class FunctionTest : AbstractModelTest("/src/main/kotlin/function/Test.kt", "fun
                 parameters.forEach { p ->
                     p.name equals "x"
                     p.type.name.assertNotNull("Parameter type: ") equals "String"
-                    p.extra[DefaultValue]?.value equals "\"\""
+                    p.extra[DefaultValue]?.value equals StringConstant("")
                 }
             }
         }
@@ -363,7 +363,7 @@ class FunctionTest : AbstractModelTest("/src/main/kotlin/function/Test.kt", "fun
                 parameters.forEach { p ->
                     p.name equals "x"
                     p.type.name.assertNotNull("Parameter type: ") equals "Float"
-                    p.extra[DefaultValue]?.value equals "3.14f"
+                    p.extra[DefaultValue]?.value equals FloatConstant(3.14f)
                 }
             }
         }
diff --git a/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt b/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt
new file mode 100644
index 00000000..c77a78fb
--- /dev/null
+++ b/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt
@@ -0,0 +1,82 @@
+package renderers.html
+
+import junit.framework.Assert.assertEquals
+import kotlinx.html.body
+import kotlinx.html.html
+import kotlinx.html.stream.createHTML
+import org.jetbrains.dokka.base.renderers.html.buildBreakableText
+import org.junit.jupiter.api.Test
+
+class FormattingUtilsTest {
+    @Test
+    fun `should build breakable text`(){
+        val testedText = "kotlinx.collections.immutable"
+        val expectedHtml = """
+            <html>
+              <body><span>kotlinx.</span><wbr></wbr><span>collections.</span><wbr></wbr><span>immutable</span></body>
+            </html>
+        """.trimIndent()
+
+        val html = createHTML(prettyPrint = true).html {
+            body {
+                buildBreakableText(testedText)
+            }
+        }
+
+        assertEquals(expectedHtml.trim(), html.trim())
+    }
+
+    @Test
+    fun `should build breakable text without empty spans`(){
+        val testedText = "Package org.jetbrains.dokka.it.moduleC"
+        val expectedHtml = """
+            <html>
+              <body><span><span>Package</span></span> <span>org.</span><wbr></wbr><span>jetbrains.</span><wbr></wbr><span>dokka.</span><wbr></wbr><span>it.</span><wbr></wbr><span>moduleC</span></body>
+            </html>
+        """.trimIndent()
+
+        val html = createHTML(prettyPrint = true).html {
+            body {
+                buildBreakableText(testedText)
+            }
+        }
+
+        assertEquals(expectedHtml.trim(), html.trim())
+    }
+
+    @Test
+    fun `should build breakable text for text with braces`(){
+        val testedText = "[Common]kotlinx.collections.immutable"
+        val expectedHtml = """
+            <html>
+              <body><span>[Common]kotlinx.</span><wbr></wbr><span>collections.</span><wbr></wbr><span>immutable</span></body>
+            </html>
+        """.trimIndent()
+
+        val html = createHTML(prettyPrint = true).html {
+            body {
+                buildBreakableText(testedText)
+            }
+        }
+
+        assertEquals(expectedHtml.trim(), html.trim())
+    }
+
+    @Test
+    fun `should build breakable text for camel case notation`(){
+        val testedText = "DokkkkkkkaIsTheBest"
+        val expectedHtml = """
+            <html>
+              <body><span>Dokkkkkkka</span><wbr></wbr><span>Is</span><wbr></wbr><span>The</span><wbr></wbr><span><span>Best</span></span></body>
+            </html>
+        """.trimIndent()
+
+        val html = createHTML(prettyPrint = true).html {
+            body {
+                buildBreakableText(testedText)
+            }
+        }
+
+        assertEquals(expectedHtml.trim(), html.trim())
+    }
+}
\ No newline at end of file
diff --git a/plugins/base/src/test/kotlin/renderers/html/TextStylesTest.kt b/plugins/base/src/test/kotlin/renderers/html/TextStylesTest.kt
index 3c38e68c..d65a4f6e 100644
--- a/plugins/base/src/test/kotlin/renderers/html/TextStylesTest.kt
+++ b/plugins/base/src/test/kotlin/renderers/html/TextStylesTest.kt
@@ -2,14 +2,13 @@ package renderers.html
 
 import org.jetbrains.dokka.base.renderers.html.HtmlRenderer
 import org.jetbrains.dokka.pages.TextStyle
+import org.jetbrains.dokka.pages.TokenStyle
 import org.jsoup.Jsoup
 import org.jsoup.nodes.Element
 import org.junit.jupiter.api.Test
 import renderers.testPage
-import utils.B
-import utils.I
-import utils.STRIKE
-import utils.match
+import utils.*
+import kotlin.test.assertEquals
 
 class TextStylesTest : HtmlRenderingOnlyTestBase() {
     @Test
@@ -40,6 +39,16 @@ class TextStylesTest : HtmlRenderingOnlyTestBase() {
     }
 
     @Test
+    fun `should include token styles`(){
+        val page = testPage {
+            text("keyword", styles = setOf(TokenStyle.Keyword))
+        }
+        HtmlRenderer(context).render(page)
+        renderedContent.match(Span("keyword"))
+        assertEquals(renderedContent.children().last().attr("class"), "token keyword")
+    }
+
+    @Test
     fun `should include multiple styles at one`(){
         val page = testPage {
             text(
diff --git a/plugins/base/src/test/kotlin/signatures/FunctionalTypeConstructorsSignatureTest.kt b/plugins/base/src/test/kotlin/signatures/FunctionalTypeConstructorsSignatureTest.kt
index 35d91175..e631117f 100644
--- a/plugins/base/src/test/kotlin/signatures/FunctionalTypeConstructorsSignatureTest.kt
+++ b/plugins/base/src/test/kotlin/signatures/FunctionalTypeConstructorsSignatureTest.kt
@@ -44,7 +44,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": (", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": (", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -62,7 +63,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": (", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": (", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -80,7 +82,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": ", A("Boolean"), ".(", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": ", A("Boolean"), ".(", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -98,7 +101,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": (param: ", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": (param: ", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -117,7 +121,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": suspend (", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": suspend (", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -135,7 +140,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": suspend (", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": suspend (", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -153,7 +159,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": suspend ", A("Boolean"), ".(", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": suspend ", A("Boolean"), ".(", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -171,7 +178,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "val ", A("nF"), ": suspend (param: ", A("Int"), ") -> ", A("String"), Span()
+                    "val ", A("nF"), ": suspend (param: ", A("Int"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -202,7 +210,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
                     A("Boolean"),
                     ") -> ",
                     A("String"),
-                    Span()
+                    Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -227,7 +236,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-java-class/index.html").signature().last().match(
-                    "open val ", A("javaFunction"), ": (", A("Integer"), ") -> ", A("String"), Span()
+                    "open val ", A("javaFunction"), ": (", A("Integer"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -252,7 +262,8 @@ class FunctionalTypeConstructorsSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-java-class/index.html").signature().last().match(
-                    "open val ", A("kotlinFunction"), ": (", A("Integer"), ") -> ", A("String"), Span()
+                    "open val ", A("kotlinFunction"), ": (", A("Integer"), ") -> ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
diff --git a/plugins/base/src/test/kotlin/signatures/SignatureTest.kt b/plugins/base/src/test/kotlin/signatures/SignatureTest.kt
index a56c408b..d8b23d77 100644
--- a/plugins/base/src/test/kotlin/signatures/SignatureTest.kt
+++ b/plugins/base/src/test/kotlin/signatures/SignatureTest.kt
@@ -36,7 +36,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
-                    "fun ", A("simpleFun"), "(): ", A("String"), Span()
+                    "fun ", A("simpleFun"), "(): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -54,7 +55,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
-                    "open fun ", A("simpleFun"), "(): ", A("String"), Span()
+                    "open fun ", A("simpleFun"), "(): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -72,7 +74,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
-                    "open suspend fun ", A("simpleFun"), "(): ", A("String"), Span()
+                    "open suspend fun ", A("simpleFun"), "(): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -92,7 +95,8 @@ class SignatureTest : BaseAbstractTest() {
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
                     "fun ", A("simpleFun"), "(a: ", A("Int"),
                     ", b: ", A("Boolean"), ", c: ", A("Any"),
-                    "): ", A("String"), Span()
+                    "): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -111,7 +115,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
                     "fun ", A("simpleFun"), "(a: (", A("Int"),
-                    ") -> ", A("String"), "): ", A("String"), Span()
+                    ") -> ", A("String"), "): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -130,7 +135,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
                     "fun <", A("T"), "> ", A("simpleFun"), "(): ",
-                    A("T"), Span()
+                    A("T"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -149,7 +155,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
                     "fun <", A("T"), " : ", A("String"), "> ", A("simpleFun"),
-                    "(): ", A("T"), Span()
+                    "(): ", A("T"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -168,7 +175,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
                     "inline suspend fun <", A("T"), " : ", A("String"), "> ", A("simpleFun"),
-                    "(a: ", A("Int"), ", b: ", A("String"), "): ", A("T"), Span()
+                    "(a: ", A("Int"), ", b: ", A("String"), "): ", A("T"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -186,7 +194,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
-                    "fun ", A("simpleFun"), "(vararg params: ", A("Int"), ")", Span()
+                    "fun ", A("simpleFun"), "(vararg params: ", A("Int"), ")", Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -204,7 +213,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-simple-class/index.html").firstSignature().match(
-                    "class ", A("SimpleClass"), Span()
+                    "class ", A("SimpleClass"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -223,7 +233,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-inheriting-class-from-generic-type/index.html").firstSignature().match(
                     "class ", A("InheritingClassFromGenericType"), " <", A("T"), " : ", A("Number"), ", ", A("R"), " : ", A("CharSequence"),
-                    "> : ", A("Comparable"), "<", A("T"), "> , ", A("Collection"), "<", A("R"), ">", Span()
+                    "> : ", A("Comparable"), "<", A("T"), "> , ", A("Collection"), "<", A("R"), ">", Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -241,7 +252,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-k-runnable/index.html").firstSignature().match(
-                    "fun interface ", A("KRunnable"), Span()
+                    "fun interface ", A("KRunnable"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -273,7 +285,8 @@ class SignatureTest : BaseAbstractTest() {
                         Div("@", A("Marking"))
                     ),
                     "fun ", A("simpleFun"),
-                    "(): ", A("String"), Span()
+                    "(): ", A("String"), Span(),
+                    ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -307,7 +320,8 @@ class SignatureTest : BaseAbstractTest() {
                         Div("@set:", A("Marking"))
                     ),
                     "var ", A("str"),
-                    ": ", A("String"), Span()
+                    ": ", A("String"), Span(),
+                    ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -347,7 +361,8 @@ class SignatureTest : BaseAbstractTest() {
                            Div("@", A("Marking2"), "(", Span("int = ", Span("1")), Wbr, ")")
                         ),
                         "fun ", A("simpleFun"),
-                        "(): ", A("String"), Span()
+                        "(): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                     )
             }
         }
@@ -387,7 +402,8 @@ class SignatureTest : BaseAbstractTest() {
                         )
                     ),
                     "fun ", A("simpleFun"),
-                    "(): ", A("String"), Span()
+                    "(): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -436,7 +452,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("test/example/-foo/index.html").signature().toList()[1].match(
-                    "typealias ", A("Foo"), " = ", A("Bar"), Span()
+                    "typealias ", A("Foo"), " = ", A("Bar"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -460,7 +477,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example.html").signature().first().match(
-                    "typealias ", A("PlainTypealias"), " = ", A("Int"), Span()
+                    "typealias ", A("PlainTypealias"), " = ", A("Int"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -494,7 +512,8 @@ class SignatureTest : BaseAbstractTest() {
                             "@", A("SomeAnnotation")
                         )
                     ),
-                    "typealias ", A("PlainTypealias"), " = ", A("Int"), Span()
+                    "typealias ", A("PlainTypealias"), " = ", A("Int"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -519,7 +538,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example.html").signature().first().match(
                     "typealias ", A("PlainTypealias"), " = ", A("Comparable"),
-                    "<", A("Int"), ">", Span()
+                    "<", A("Int"), ">", Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -545,7 +565,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example.html").signature().first().match(
                     "typealias ", A("GenericTypealias"), "<", A("T"), "> = ", A("Comparable"),
-                    "<", A("T"), ">", Span()
+                    "<", A("T"), ">", Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -573,7 +594,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/kotlinAsJavaPlugin/-a-b-c/some-fun.html").signature().first().match(
                     "fun ", A("someFun"), "(xd: ", A("XD"), "<", A("Int"),
-                    ", ", A("String"), ">):", A("Int"), Span()
+                    ", ", A("String"), ">):", A("Int"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -618,7 +640,7 @@ class SignatureTest : BaseAbstractTest() {
                         arrayOf("fun ", A("GenericClass"), "(x: ", A("Int"), ")", Span()),
                     )
                 ).forEach {
-                    it.first.match(*it.second)
+                    it.first.match(*it.second, ignoreSpanWithTokenStyle = true)
                 }
             }
         }
@@ -637,7 +659,8 @@ class SignatureTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/simple-fun.html").firstSignature().match(
                     "fun", A("simpleFun"), "(int: ", A("Int"), " = 1, string: ", A("String"),
-                            " = \"string\"): ", A("String"), Span()
+                            " = \"string\"): ", A("String"), Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -655,7 +678,8 @@ class SignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/index.html").firstSignature().match(
-                    "const val ", A("simpleVal"), ": ", A("Int"), " = 1", Span()
+                    "const val ", A("simpleVal"), ": ", A("Int"), " = 1", Span(),
+                        ignoreSpanWithTokenStyle = true
                 )
             }
         }
diff --git a/plugins/base/src/test/kotlin/signatures/VarianceSignatureTest.kt b/plugins/base/src/test/kotlin/signatures/VarianceSignatureTest.kt
index d988bafe..c5d49cec 100644
--- a/plugins/base/src/test/kotlin/signatures/VarianceSignatureTest.kt
+++ b/plugins/base/src/test/kotlin/signatures/VarianceSignatureTest.kt
@@ -38,7 +38,8 @@ class VarianceSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-generic/index.html").firstSignature().match(
-                    "class ", A("Generic"), "<in ", A("T"), ">", Span()
+                    "class ", A("Generic"), "<in ", A("T"), ">", Span(),
+                    ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -56,7 +57,8 @@ class VarianceSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-generic/index.html").firstSignature().match(
-                    "class ", A("Generic"), "<out ", A("T"), ">", Span()
+                    "class ", A("Generic"), "<out ", A("T"), ">", Span(),
+                    ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -74,7 +76,8 @@ class VarianceSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-generic/index.html").firstSignature().match(
-                    "class ", A("Generic"), "<", A("T"), ">", Span()
+                    "class ", A("Generic"), "<", A("T"), ">", Span(),
+                    ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -92,7 +95,8 @@ class VarianceSignatureTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/example/-generic/index.html").firstSignature().match(
-                    "class ", A("Generic"), "<out ", A("T"), ":", A("List"), "<", A("CharSequence"), ">>", Span()
+                    "class ", A("Generic"), "<out ", A("T"), ":", A("List"), "<", A("CharSequence"), ">>", Span(),
+                    ignoreSpanWithTokenStyle = true
                 )
             }
         }
diff --git a/plugins/kotlin-as-java/src/main/kotlin/signatures/JavaSignatureProvider.kt b/plugins/kotlin-as-java/src/main/kotlin/signatures/JavaSignatureProvider.kt
index 58a3043c..65b34017 100644
--- a/plugins/kotlin-as-java/src/main/kotlin/signatures/JavaSignatureProvider.kt
+++ b/plugins/kotlin-as-java/src/main/kotlin/signatures/JavaSignatureProvider.kt
@@ -1,18 +1,17 @@
 package org.jetbrains.dokka.kotlinAsJava.signatures
 
-import org.jetbrains.dokka.DokkaConfiguration
 import org.jetbrains.dokka.base.DokkaBase
 import org.jetbrains.dokka.base.signatures.JvmSignatureUtils
 import org.jetbrains.dokka.base.signatures.SignatureProvider
 import org.jetbrains.dokka.base.transformers.pages.comments.CommentsToContentConverter
 import org.jetbrains.dokka.base.translators.documentables.PageContentBuilder
 import org.jetbrains.dokka.links.DRI
-import org.jetbrains.dokka.links.sureClassNames
 import org.jetbrains.dokka.model.*
 import org.jetbrains.dokka.model.properties.WithExtraProperties
 import org.jetbrains.dokka.pages.ContentKind
 import org.jetbrains.dokka.pages.ContentNode
 import org.jetbrains.dokka.pages.TextStyle
+import org.jetbrains.dokka.pages.TokenStyle
 import org.jetbrains.dokka.plugability.DokkaContext
 import org.jetbrains.dokka.plugability.plugin
 import org.jetbrains.dokka.plugability.querySingle
@@ -64,33 +63,39 @@ class JavaSignatureProvider internal constructor(ctcc: CommentsToContentConverte
                     ?: emptySet()),
                 sourceSets = setOf(it)
             ) {
-                text(c.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.plus(" ") ?: "")
+                c.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.plus(" ")?.let { keyword(it) }
 
                 if (c is DClass) {
-                    text(c.modifier[it]?.takeIf { it !in ignoredModifiers }?.name?.plus(" ") ?: "")
-                    text(c.modifiers()[it]?.toSignatureString() ?: "")
+                    c.modifier[it]?.takeIf { it !in ignoredModifiers }?.name?.plus(" ")?.let { keyword(it) }
+                    c.modifiers()[it]?.toSignatureString()?.let { keyword(it) }
                 }
 
                 when (c) {
-                    is DClass -> text("class ")
-                    is DInterface -> text("interface ")
-                    is DEnum -> text("enum ")
-                    is DObject -> text("class ")
-                    is DAnnotation -> text("@interface ")
+                    is DClass -> keyword("class ")
+                    is DInterface -> keyword("interface ")
+                    is DEnum -> keyword("enum ")
+                    is DObject -> keyword("class ")
+                    is DAnnotation -> keyword("@interface ")
                 }
                 link(c.name!!, c.dri)
                 if (c is WithGenerics) {
-                    list(c.generics, prefix = "<", suffix = ">") {
+                    list(c.generics, prefix = "<", suffix = ">",
+                        separatorStyles = mainStyles + TokenStyle.Punctuation,
+                        surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                         +buildSignature(it)
                     }
                 }
                 if (c is WithSupertypes) {
                     c.supertypes.map { (p, dris) ->
                         val (classes, interfaces) = dris.partition { it.kind == JavaClassKindTypes.CLASS }
-                        list(classes, prefix = " extends ", sourceSets = setOf(p)) {
+                        list(classes, prefix = " extends ", sourceSets = setOf(p),
+                            separatorStyles = mainStyles + TokenStyle.Punctuation,
+                            surroundingCharactersStyle = mainStyles + TokenStyle.Keyword) {
                             signatureForProjection(it.typeConstructor)
                         }
-                        list(interfaces, prefix = " implements ", sourceSets = setOf(p)) {
+                        list(interfaces, prefix = " implements ", sourceSets = setOf(p),
+                            separatorStyles = mainStyles + TokenStyle.Punctuation,
+                            surroundingCharactersStyle = mainStyles + TokenStyle.Keyword) {
                             signatureForProjection(it.typeConstructor)
                         }
                     }
@@ -107,9 +112,9 @@ class JavaSignatureProvider internal constructor(ctcc: CommentsToContentConverte
                 sourceSets = setOf(it)
             ) {
                 annotationsBlock(p)
-                text(p.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.plus(" ") ?: "")
-                text(p.modifier[it]?.name + " ")
-                text(p.modifiers()[it]?.toSignatureString() ?: "")
+                p.visibility[it]?.takeIf { it !in ignoredVisibilities }?.name?.let { keyword("$it ") }
+                p.modifier[it]?.name?.let { keyword("$it ") }
+                p.modifiers()[it]?.toSignatureString()?.let { keyword(it) }
                 signatureForProjection(p.type)
                 text(nbsp.toString())
                 link(p.name, p.dri)
@@ -125,25 +130,27 @@ class JavaSignatureProvider internal constructor(ctcc: CommentsToContentConverte
                 sourceSets = setOf(sourceSet)
             ) {
                 annotationsBlock(f)
-                text(f.modifier[sourceSet]?.takeIf { it !in ignoredModifiers }?.name?.plus(" ") ?: "")
-                text(f.modifiers()[sourceSet]?.toSignatureString() ?: "")
+                f.modifier[sourceSet]?.takeIf { it !in ignoredModifiers }?.name?.plus(" ")?.let { keyword(it) }
+                f.modifiers()[sourceSet]?.toSignatureString()?.let { keyword(it) }
                 val returnType = f.type
                 signatureForProjection(returnType)
                 text(nbsp.toString())
-                link(f.name, f.dri)
+                link(f.name, f.dri, styles = mainStyles + TokenStyle.Function)
                 val usedGenerics = if (f.isConstructor) f.generics.filter { f uses it } else f.generics
-                list(usedGenerics, prefix = "<", suffix = ">") {
+                list(usedGenerics, prefix = "<", suffix = ">",
+                    separatorStyles = mainStyles + TokenStyle.Punctuation,
+                    surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                     +buildSignature(it)
                 }
-                text("(")
-                list(f.parameters) {
+                punctuation("(")
+                list(f.parameters, separatorStyles = mainStyles + TokenStyle.Punctuation) {
                     annotationsInline(it)
-                    text(it.modifiers()[sourceSet]?.toSignatureString() ?: "")
+                    text(it.modifiers()[sourceSet]?.toSignatureString() ?: "", styles = mainStyles + TokenStyle.Keyword)
                     signatureForProjection(it.type)
                     text(nbsp.toString())
                     text(it.name!!)
                 }
-                text(")")
+                punctuation(")")
             }
         }
 
@@ -151,7 +158,9 @@ class JavaSignatureProvider internal constructor(ctcc: CommentsToContentConverte
         t.sourceSets.map {
             contentBuilder.contentFor(t, styles = t.stylesIfDeprecated(it), sourceSets = setOf(it)) {
                 text(t.name.substringAfterLast("."))
-                list(t.bounds, prefix = " extends ") {
+                list(t.bounds, prefix = " extends ",
+                    separatorStyles = mainStyles + TokenStyle.Punctuation,
+                    surroundingCharactersStyle = mainStyles + TokenStyle.Keyword) {
                     signatureForProjection(it)
                 }
             }
@@ -163,7 +172,9 @@ class JavaSignatureProvider internal constructor(ctcc: CommentsToContentConverte
 
         is TypeConstructor -> group(styles = emptySet()) {
             link(p.dri.classNames.orEmpty(), p.dri)
-            list(p.projections, prefix = "<", suffix = ">") {
+            list(p.projections, prefix = "<", suffix = ">",
+                separatorStyles = mainStyles + TokenStyle.Punctuation,
+                surroundingCharactersStyle = mainStyles + TokenStyle.Operator) {
                 signatureForProjection(it)
             }
         }
@@ -174,11 +185,11 @@ class JavaSignatureProvider internal constructor(ctcc: CommentsToContentConverte
                 is Contravariance<*> -> "? super "
                 is Invariance<*> -> ""
             }
-            text(variance)
+            keyword(variance)
             signatureForProjection(p.inner)
         }
 
-        is Star -> text("?")
+        is Star -> operator("?")
 
         is Nullable -> signatureForProjection(p.inner)
 
diff --git a/plugins/kotlin-as-java/src/test/kotlin/KotlinAsJavaPluginTest.kt b/plugins/kotlin-as-java/src/test/kotlin/KotlinAsJavaPluginTest.kt
index 9678d556..655405b9 100644
--- a/plugins/kotlin-as-java/src/test/kotlin/KotlinAsJavaPluginTest.kt
+++ b/plugins/kotlin-as-java/src/test/kotlin/KotlinAsJavaPluginTest.kt
@@ -330,7 +330,7 @@ class KotlinAsJavaPluginTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/kotlinAsJavaPlugin/-a-b-c/some-fun.html").signature().first().match(
-                    "final ", A("Integer"), A("someFun"), "(", A("Integer"), "xd)", Span()
+                    "final ", A("Integer"), A("someFun"), "(", A("Integer"), "xd)", Span(), ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -368,7 +368,7 @@ class KotlinAsJavaPluginTest : BaseAbstractTest() {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/kotlinAsJavaPlugin/-a-b-c/some-fun.html").signature().first().match(
                     "final ", A("Integer"), A("someFun"), "(", A("Map"), "<", A("String"),
-                    ", ", A("Integer"), "> xd)", Span()
+                    ", ", A("Integer"), "> xd)", Span(), ignoreSpanWithTokenStyle = true
                 )
             }
         }
@@ -432,7 +432,7 @@ class KotlinAsJavaPluginTest : BaseAbstractTest() {
         ) {
             renderingStage = { _, _ ->
                 writerPlugin.writer.renderedContent("root/kotlinAsJavaPlugin/-test-kt/sample.html").signature().first().match(
-                    "final static ", A("String"), A("sample"), "(", A("Integer"), "a)", Span()
+                    "final static ", A("String"), A("sample"), "(", A("Integer"), "a)", Span(), ignoreSpanWithTokenStyle = true
                 )
             }
         }
diff --git a/plugins/templating/api/templating.api b/plugins/templating/api/templating.api
index ecf4a0b6..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,10 +126,10 @@ 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;
+	public final fun getProjectNameSubstitutor ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getSourcesetDependencyProcessingStrategy ()Lorg/jetbrains/dokka/plugability/Extension;
 	public final fun getSubmoduleTemplateProcessor ()Lorg/jetbrains/dokka/plugability/ExtensionPoint;
 	public final fun getSubstitutionCommandHandler ()Lorg/jetbrains/dokka/plugability/Extension;
@@ -158,6 +151,11 @@ public final class org/jetbrains/dokka/templates/TemplatingResult {
 	public fun toString ()Ljava/lang/String;
 }
 
+public final class templates/ProjectNameSubstitutor : org/jetbrains/dokka/templates/Substitutor {
+	public fun <init> (Lorg/jetbrains/dokka/plugability/DokkaContext;)V
+	public fun trySubstitute (Lorg/jetbrains/dokka/templates/TemplatingContext;Lkotlin/text/MatchResult;)Ljava/lang/String;
+}
+
 public final class templates/SourcesetDependencyProcessingStrategy : org/jetbrains/dokka/templates/TemplateProcessingStrategy {
 	public fun <init> (Lorg/jetbrains/dokka/plugability/DokkaContext;)V
 	public fun finish (Ljava/io/File;)V
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/ProjectNameSubstitutor.kt b/plugins/templating/src/main/kotlin/templates/ProjectNameSubstitutor.kt
new file mode 100644
index 00000000..8fc12b6c
--- /dev/null
+++ b/plugins/templating/src/main/kotlin/templates/ProjectNameSubstitutor.kt
@@ -0,0 +1,13 @@
+package templates
+
+import org.jetbrains.dokka.base.templating.ProjectNameSubstitutionCommand
+import org.jetbrains.dokka.base.templating.SubstitutionCommand
+import org.jetbrains.dokka.plugability.DokkaContext
+import org.jetbrains.dokka.templates.Substitutor
+import org.jetbrains.dokka.templates.TemplatingContext
+
+class ProjectNameSubstitutor(private val dokkaContext: DokkaContext) : Substitutor {
+
+    override fun trySubstitute(context: TemplatingContext<SubstitutionCommand>, match: MatchResult): String? =
+        dokkaContext.configuration.moduleName.takeIf { context.command is ProjectNameSubstitutionCommand }
+}
\ No newline at end of file
diff --git a/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt b/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt
index 0842bb2b..1a02d41f 100644
--- a/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt
+++ b/plugins/templating/src/main/kotlin/templates/TemplatingPlugin.kt
@@ -1,9 +1,9 @@
 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
+import templates.ProjectNameSubstitutor
 import templates.SourcesetDependencyProcessingStrategy
 
 class TemplatingPlugin : DokkaPlugin() {
@@ -28,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 {
@@ -60,6 +55,10 @@ class TemplatingPlugin : DokkaPlugin() {
         substitutor providing ::PathToRootSubstitutor
     }
 
+    val projectNameSubstitutor by extending {
+        substitutor providing ::ProjectNameSubstitutor
+    }
+
     val addToNavigationCommandHandler by extending {
         directiveBasedCommandHandlers providing ::AddToNavigationCommandHandler
     }
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)