Webhelp-like frontend

11 files changed, 315 insertions, 308 deletions

diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
index d63e8da6..77086695 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,7 +677,8 @@ open class HtmlRenderer(
         pageContext: ContentPage
     ) {
         div("sample-container") {
-            code(code.style.joinToString(" ") { it.toString().toLowerCase() }) {
+            val stylesWithBlock = code.style + TextStyle.Block
+            code(stylesWithBlock.joinToString(" ") { it.toString().toLowerCase() }) {
                 attributes["theme"] = "idea"
                 pre {
                     code.children.forEach { buildContentNode(it, pageContext) }
@@ -716,7 +709,7 @@ open class HtmlRenderer(
             }
             unappliedStyles.isNotEmpty() -> {
                 val styleToApply = unappliedStyles.first()
-                applyStyle(styleToApply){
+                applyStyle(styleToApply) {
                     buildText(textNode, unappliedStyles - styleToApply)
                 }
             }
@@ -726,8 +719,8 @@ 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() }
@@ -803,14 +796,25 @@ open class HtmlRenderer(
                 }
             }
             body {
+                div("navigation-wrapper") {
+                    id = "navigation-wrapper"
+                    div("library-name") {
+                        clickableLogo(page, pathToRoot)
+                    }
+                    context.configuration.moduleVersion?.let { moduleVersion ->
+                        div { text(moduleVersion) }
+                    }
+                    div("pull-right d-flex") {
+                        filterButtons(page)
+                        div {
+                            id = "searchBar"
+                        }
+                    }
+                }
                 div {
                     id = "container"
                     div {
                         id = "leftColumn"
-                        clickableLogo(page, pathToRoot)
-                        div {
-                            id = "paneSearch"
-                        }
                         div {
                             id = "sideMenu"
                         }
@@ -857,15 +861,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..19079241 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 {
@@ -13,7 +13,7 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) {
         buildBreakableText(withOutSpaces.last())
     } else {
         val content = name.replace(Regex("(?!^)([A-Z])"), " $1").split(" ")
-        joinToHtml(content) {
+        joinToHtml(content, hasLastElement) {
             it
         }
     }
@@ -22,32 +22,41 @@ fun FlowContent.buildTextBreakableAfterCapitalLetters(name: String) {
 fun FlowContent.buildBreakableDotSeparatedHtml(name: String) {
     val phrases = name.split(".")
     phrases.forEachIndexed { i, e ->
+        val elementWithOptionalDot =
+            if (i != phrases.lastIndex) {
+                "$e."
+            } else {
+                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.last().takeIf { it.isNotBlank() }?.let {
+        if (hasLastElement) {
+            span {
+                buildBreakableHtmlElement(it, last = true)
+            }
+        } else {
+            buildBreakableHtmlElement(it, last = false)
+        }
     }
 }
 
 private fun FlowContent.buildBreakableHtmlElement(element: String, last: Boolean = false) {
-    span {
-        +element
+    element.takeIf { it.isNotBlank() }?.let {
+        span {
+            +it
+        }
     }
     if (!last) {
         wbr { }
diff --git a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
index b6099e21..70f1c1d6 100644
--- a/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
+++ b/plugins/base/src/main/kotlin/renderers/html/htmlPreprocessors.kt
@@ -153,6 +153,7 @@ class StylesInstaller(private val dokkaContext: DokkaContext) : PageTransformer
 object AssetsInstaller : PageTransformer {
     private val imagesPages = listOf(
         "images/arrow_down.svg",
+        "images/arrow_down_white.svg",
         "images/docs_logo.svg",
         "images/logo-icon.svg",
         "images/go-to-top-icon.svg",
diff --git a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
index e5f0ae97..a3770ca2 100644
--- a/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
+++ b/plugins/base/src/main/kotlin/signatures/KotlinSignatureProvider.kt
@@ -176,7 +176,7 @@ class KotlinSignatureProvider(ctcc: CommentsToContentConverter, logger: DokkaLog
                         pConstructor.sourceSets.toSet()
                     ) {
                         annotationsInline(it)
-                        text(it.name ?: "", styles = mainStyles.plus(TextStyle.Bold))
+                        text(it.name ?: "")
                         text(": ")
                         signatureForProjection(it.type)
                     }
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/resources/dokka/images/arrow_down.svg b/plugins/base/src/main/resources/dokka/images/arrow_down.svg
index 89e7df47..0d8eb3b4 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="black"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg
new file mode 100644
index 00000000..41bda9bf
--- /dev/null
+++ b/plugins/base/src/main/resources/dokka/images/arrow_down_white.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="-5 -3 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11 9l-6 5.25V3.75z" fill="#fff"/>
+</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..05ec7377 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,10 +19,6 @@ 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')
 })
 
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 81e1012d..24d950b4 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -3,16 +3,30 @@
 @import url('jetbrains-mono.css');
 
 :root {
+    --default-gray: #f4f4f4;
     --breadcrumb-font-color: #637282;
+    --breadcrumb-margin: 24px;
     --hover-link-color: #5B5DEF;
-    --average-color: #637282;
+    /*--average-color: #637282;*/
     --footer-height: 64px;
     --footer-padding-top: 48px;
-    --horizontal-spacing-for-content: 42px;
+    --footer-background: var(--default-gray);
+    --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);
+    --color-dark: #27282c;
+    --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
+    --default-monospace-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+    --default-font-size: 15px;
+    --average-color: var(--color-dark);
+    --secondary-text-color: rgba(39, 40, 44, .7);
+    --code-background: rgba(39, 40, 44, .05);
+    --border-color: rgba(39, 40, 44, .2);
+    --top-navigation-height: 67px;
 }
 
 html {
@@ -20,6 +34,8 @@ 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;
 }
 
 html ::-webkit-scrollbar {
@@ -37,67 +53,76 @@ 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;
 }
 
-.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;
 
     /* 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;
 }
 
-.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;
+}
+
+.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: var(--average-color);
 }
 
 .section-tab:hover {
@@ -118,24 +143,11 @@ html ::-webkit-scrollbar-thumb {
     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,14 +159,14 @@ html ::-webkit-scrollbar-thumb {
     flex-direction: column;
 }
 
-.cover .platform-hinted .sourceset-depenent-content > .symbol,
-.cover > .symbol {
-    background-color: white;
-}
+/*.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 > .symbol {*/
+/*    background-color: var(--background-color);*/
+/*}*/
 
 .cover .platform-hinted.with-platform-tabs .sourceset-depenent-content > .block ~ .symbol {
     padding-top: 16px;
@@ -169,7 +181,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 +194,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 +218,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,47 +232,22 @@ 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 {
@@ -268,8 +263,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 +276,20 @@ 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;
 }
 
 .symbol > a {
@@ -304,6 +300,14 @@ code.paragraph {
     cursor: pointer;
 }
 
+.symbol span.copy-icon {
+    display: none;
+}
+
+.symbol:hover span.copy-icon {
+    display: inline-block;
+}
+
 .symbol span.copy-icon::before {
     width: 24px;
     height: 24px;
@@ -314,11 +318,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;
+    background-color: var(--color-dark);
 }
 
 .copy-popup-wrapper {
@@ -330,7 +334,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;
@@ -405,7 +409,7 @@ code.paragraph {
 }
 
 .overview:hover:before {
-    background-color: #DADFE5;
+    background-color: rgba(39, 40, 44, 0.05);
 }
 
 #nav-submenu {
@@ -427,7 +431,13 @@ code.paragraph {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    transform: rotate(180deg);
+    transform: rotate(90deg);
+    width: 12px;
+    height: 12px;
+}
+
+.sideMenuPart[data-active] > .overview .navButtonContent::before {
+    content: url("../images/arrow_down_white.svg");;
 }
 
 .sideMenuPart.hidden > .navButton .navButtonContent::after {
@@ -445,10 +455,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;
 }
@@ -461,7 +471,6 @@ table {
 }
 
 tbody > tr {
-    border-bottom: 2px solid #F4F4F4;
     min-height: 56px;
 }
 
@@ -471,14 +480,14 @@ td:first-child {
 
 .keyword {
     color: black;
-    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-family: var(--default-monospace-font-family);
     font-size: 12px;
 }
 
 .identifier {
     color: darkblue;
     font-size: 12px;
-    font-family: JetBrains Mono, Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
+    font-family: var(--default-monospace-font-family);
 }
 
 .brief {
@@ -507,9 +516,6 @@ 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;
@@ -552,14 +558,23 @@ 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 {
@@ -583,7 +598,7 @@ blockquote {
 
 code, pre {
     color: #333;
-    font-size: 14px;
+    font-size: var(--default-font-size);
 }
 
 pre {
@@ -594,7 +609,7 @@ pre {
 th, td {
     text-align: left;
     vertical-align: top;
-    padding: 5px 10px;
+    padding: 12px 10px 11px;
 }
 
 dt {
@@ -614,94 +629,15 @@ 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;
@@ -779,6 +715,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 +738,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 +763,8 @@ td.content {
 
 .main-subrow .anchor-wrapper {
     position: relative;
+    width: 16px;
+    height: 16px;
 }
 
 .inline-flex {
@@ -850,58 +779,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]),
@@ -929,17 +860,13 @@ 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;
+    background-color: var(--background-color);
     padding: 8px 16px;
+    border: 1px solid rgba(39, 40, 44, 0.20);
 }
 
 .cover > .block {
@@ -955,12 +882,15 @@ td.content {
 
 .table-row .with-platform-tabs .sourceset-depenent-content .brief {
     padding: 8px;
-    background-color: #f4f4f4;
+    background-color: var(--background-color);
 }
 
 .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,9 +901,12 @@ 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;
+}
+
+.table-row:last-of-type {
+    border-bottom: none;
 }
 
 .table-row .brief-comment {
@@ -1078,12 +1011,12 @@ 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(--average-color);
+    margin-top: auto;
+    background-color: var(--footer-background);
 }
 
 .footer span.go-to-top-icon {
@@ -1119,7 +1052,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 {
@@ -1163,6 +1096,7 @@ div.runnablesample {
     #main {
         max-width: 100%;
     }
+
     #leftColumn {
         position: fixed;
         margin-left: -280px;
@@ -1171,12 +1105,15 @@ div.runnablesample {
         background: white;
         height: 100%;
     }
+
     #leftColumn.open {
         margin-left: 0;
     }
+
     #leftColumn.open ~ #main #searchBar {
         display: none;
     }
+
     #leftToggler {
         display: unset;
         position: fixed;
@@ -1194,20 +1131,25 @@ div.runnablesample {
         padding: 8px 4px 8px 8px;
         background-color: white;
     }
+
     #leftToggler .icon-toggler:hover {
         cursor: pointer;
     }
+
     #leftColumn.open ~ #main #leftToggler {
         margin-left: 280px;
     }
+
     .icon-toggler::before {
         content: "\232A";
     }
+
     #leftColumn.open ~ #main .icon-toggler::before {
         content: "\2329";
         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,6 +1164,7 @@ div.runnablesample {
         padding-bottom: 16px;
         overflow: auto;
     }
+
     h1.cover {
         font-size: 32px;
         line-height: 32px;
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..fa1e30f6
--- /dev/null
+++ b/plugins/base/src/test/kotlin/renderers/html/FormattingUtilsTest.kt
@@ -0,0 +1,46 @@
+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>Package</span><wbr></wbr> <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())
+    }
+}
\ No newline at end of file