From 29999ba061748abea5d4211cbcb35fdd81b23903 Mon Sep 17 00:00:00 2001 From: berezinant Date: Tue, 6 Aug 2024 19:19:38 +0200 Subject: [PATCH] feat: reworked navbar according to new design (#3668) --- .../src/main/components/assets/searchIcon.svg | 4 +- .../src/main/components/search/search.scss | 14 +- .../{index.scss => filter-section/index.ts} | 4 +- .../main/ui-kit/filter-section/styles.scss | 23 + .../src/main/ui-kit/global.scss | 17 + .../src/main/ui-kit/helpers.scss | 16 + .../src/main/ui-kit/index.ts | 11 +- .../src/main/ui-kit/library-name/index.ts | 5 + .../src/main/ui-kit/library-name/styles.scss | 39 + .../src/main/ui-kit/library-version/index.ts | 5 + .../main/ui-kit/library-version/styles.scss | 20 + .../ui-kit/navbar-button/assets/burger.svg | 5 + .../ui-kit/navbar-button/assets/filter.svg | 8 + .../ui-kit/navbar-button/assets/homepage.svg | 3 + .../navbar-button/assets/theme-toggle.svg | 3 + .../src/main/ui-kit/navbar-button/index.ts | 5 + .../src/main/ui-kit/navbar-button/styles.scss | 80 ++ .../src/main/ui-kit/navbar/index.ts | 5 + .../src/main/ui-kit/navbar/styles.scss | 29 + .../src/main/ui-kit/platform-tag/index.ts | 5 + .../src/main/ui-kit/platform-tag/styles.scss | 84 ++ .../src/main/ui-kit/platform-tags/index.ts | 5 + .../src/main/ui-kit/platform-tags/styles.scss | 11 + .../src/main/ui-kit/tabs/styles.scss | 2 +- .../src/main/ui-kit/tokens/colors.scss | 18 +- .../src/main/ui-kit/tokens/index.scss | 1 + .../src/main/ui-kit/tokens/transitions.scss | 7 + .../src/main/ui-kit/tokens/typography.scss | 2 +- .../base/renderers/html/htmlPreprocessors.kt | 6 + .../resources/dokka/styles/logo-styles.css | 4 +- .../src/main/resources/dokka/styles/style.css | 279 +---- .../dokka/templates/includes/header.ftl | 48 +- .../resources/dokka/ui-kit/assets/burger.svg | 5 + .../resources/dokka/ui-kit/assets/filter.svg | 8 + .../dokka/ui-kit/assets/homepage.svg | 3 + .../dokka/ui-kit/assets/theme-toggle.svg | 3 + .../main/resources/dokka/ui-kit/ui-kit.css | 972 +++++++++++++++++- .../resources/dokka/ui-kit/ui-kit.min.css | 11 +- .../main/resources/dokka/ui-kit/ui-kit.min.js | 2 +- .../resources/dokka/styles/multimodule.css | 16 + 40 files changed, 1449 insertions(+), 339 deletions(-) rename dokka-subprojects/plugin-base-frontend/src/main/ui-kit/{index.scss => filter-section/index.ts} (80%) create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/helpers.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/index.ts create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/index.ts create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/styles.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/index.ts create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/index.ts create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/index.ts create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/index.ts create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/styles.scss create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss create mode 100644 dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/burger.svg create mode 100644 dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/filter.svg create mode 100644 dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/homepage.svg create mode 100644 dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/assets/theme-toggle.svg diff --git a/dokka-subprojects/plugin-base-frontend/src/main/components/assets/searchIcon.svg b/dokka-subprojects/plugin-base-frontend/src/main/components/assets/searchIcon.svg index 3fa1f24fe8..2dd04fe621 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/components/assets/searchIcon.svg +++ b/dokka-subprojects/plugin-base-frontend/src/main/components/assets/searchIcon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss b/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss index 6a16f1f89d..d2c17c5fb9 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/components/search/search.scss @@ -2,29 +2,27 @@ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. */ +@import '../../ui-kit/tokens/index'; + $font-color: hsla(0deg, 0%, 100%, 0.8); $secondary-font-color: hsla(0deg, 0%, 100%, 0.6); #pages-search { + padding: 0; + cursor: pointer; border: none; - border-radius: 50%; background: transparent; - fill: #fff; - fill: var(--dark-mode-and-search-icon-color); - &:hover { - background: var(--white-10); - } + font-size: 0; } .search { &, [data-test='ring-select'], [data-test='ring-tooltip'], - [data-test='ring-select_focus'], - #pages-search { + [data-test='ring-select_focus'] { display: inline-block; margin: 0; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts similarity index 80% rename from dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss rename to dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts index 7f9e25ebc8..fdaa339ab4 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts @@ -1,5 +1,5 @@ -/*! +/* * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. */ -@import 'tabs/styles'; +import './styles.scss'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss new file mode 100644 index 0000000000..573a254861 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss @@ -0,0 +1,23 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import '../tokens/index'; + +.filter-section { + z-index: 0; + + display: flex; + align-items: center; + flex-wrap: wrap; + + margin-right: 12px; + gap: 2px; + + @media (width <= $breakpoint-desktop-min) { + display: none; + } +} + +.no-js .filter-section { + display: none; +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss new file mode 100644 index 0000000000..7bd55a665e --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss @@ -0,0 +1,17 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import 'tokens/index'; + +:root { + --color-background: var(--color-background-page); +} + +.theme-dark { + --color-background: var(--color-background-page-dt); +} + +body, +table { + background-color: var(--color-background); +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/helpers.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/helpers.scss new file mode 100644 index 0000000000..04bb403f47 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/helpers.scss @@ -0,0 +1,16 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import 'tokens/index'; + +.ui-kit_desktop-only { + @media (width < $breakpoint-desktop-min) { + display: none; + } +} + +.ui-kit_mobile-only { + @media (width >= $breakpoint-desktop-min) { + display: none; + } +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts index 9d1367bef1..6f54e96d70 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts @@ -1,6 +1,15 @@ /* * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. */ +import * as filterSection from './filter-section/index'; +import * as libraryName from './library-name/index'; +import * as libraryVersion from './library-version/index'; +import * as navbar from './navbar/index'; +import * as navbarButton from './navbar-button/index'; +import * as platformTag from './platform-tag/index'; +import * as platformTags from './platform-tags/index'; import * as tabs from './tabs/index'; +import './helpers.scss'; +import './global.scss'; -export { tabs }; +export { filterSection, libraryName, libraryVersion, navbar, navbarButton, platformTag, platformTags, tabs }; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/index.ts new file mode 100644 index 0000000000..fdaa339ab4 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/index.ts @@ -0,0 +1,5 @@ +/* + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +import './styles.scss'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss new file mode 100644 index 0000000000..ed15b0dc52 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss @@ -0,0 +1,39 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import '../tokens/index'; + +:root { + --dokka-logo-height: 28px; + --dokka-logo-width: 28px; +} + +.library-name--link { + display: flex; + align-items: center; + + margin-right: var(--size-s2); + + white-space: nowrap; + + color: var(--color-text-dt); + + font: var(--font-h4); + + @media (width <= $breakpoint-desktop-min) { + height: 52px; + + margin-left: 12px; + } +} + +.library-name--link::before { + width: var(--dokka-logo-height); + height: var(--dokka-logo-width); + margin-right: var(--size-s2); + + content: ''; + + background: var(--dokka-logo-image-url) center no-repeat; + background-size: var(--dokka-logo-height) var(--dokka-logo-width); +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/index.ts new file mode 100644 index 0000000000..fdaa339ab4 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/index.ts @@ -0,0 +1,5 @@ +/* + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +import './styles.scss'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/styles.scss new file mode 100644 index 0000000000..99362a57de --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-version/styles.scss @@ -0,0 +1,20 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +@import '../tokens/index'; + +.library-version { + color: var(--color-text-dt); + + font: var(--font-text-s); + + @media (width <= $breakpoint-desktop-min) { + display: flex; + align-items: center; + + height: 52px; + + background-color: var(--color-text); + } +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg new file mode 100644 index 0000000000..aa4bb06e27 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg new file mode 100644 index 0000000000..747574ed9e --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg new file mode 100644 index 0000000000..e3c83b1ce3 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg @@ -0,0 +1,3 @@ + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg new file mode 100644 index 0000000000..e2b6cb5f7f --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg @@ -0,0 +1,3 @@ + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/index.ts new file mode 100644 index 0000000000..fdaa339ab4 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/index.ts @@ -0,0 +1,5 @@ +/* + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +import './styles.scss'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss new file mode 100644 index 0000000000..187a86db9a --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss @@ -0,0 +1,80 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +@import '../tokens/index'; + +.navigation-controls { + display: flex; + align-items: center; + gap: var(--size-s1); + + margin-left: auto; + + @media (width <= $breakpoint-desktop-min) { + flex-grow: 1; + justify-content: flex-end; + + background-color: var(--color-text); + gap: 0; + } +} + +.no-js .navigation-controls { + display: none; +} + +.navigation-controls--btn { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 40px; + height: 40px; + padding: 0; + + cursor: pointer; + transition: var(--hover-transition); + + border: none; + border-radius: var(--size-s1); + background-color: inherit; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 24px 24px; + + font-size: 0; + line-height: 0; + will-change: background-color; + + &:hover { + background-color: var(--color-w10); + } + + @media (width <= $breakpoint-desktop-min) { + width: 52px; + height: 52px; + } +} + +.navigation-controls--break { + flex-basis: 100%; +} + +.navigation-controls--btn_theme { + background-image: url('./assets/theme-toggle.svg'); +} + +.navigation-controls--btn_homepage { + background-image: url('./assets/homepage.svg'); +} + +.navigation-controls--btn_menu { + margin-left: auto; + + background-image: url('./assets/burger.svg'); +} + +.navigation-controls--btn_filter { + background-image: url('./assets/filter.svg'); +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/index.ts new file mode 100644 index 0000000000..fdaa339ab4 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/index.ts @@ -0,0 +1,5 @@ +/* + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +import './styles.scss'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss new file mode 100644 index 0000000000..216622e550 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar/styles.scss @@ -0,0 +1,29 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import '../tokens/index'; + +.navigation { + z-index: 4; + + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: flex-start; + + box-sizing: border-box; + height: var(--size-l1); + padding: 12px var(--size-m1); + + color: var(--color-text-dt); + background-color: var(--color-background-nav); + + @media (width <= $breakpoint-desktop-min) { + height: auto; + padding: 0; + } + + .theme-dark & { + background-color: var(--color-background-nav-dt); + } +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/index.ts new file mode 100644 index 0000000000..fdaa339ab4 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/index.ts @@ -0,0 +1,5 @@ +/* + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +import './styles.scss'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss new file mode 100644 index 0000000000..061616dc31 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss @@ -0,0 +1,84 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import '../tokens/index'; + +.platform-tag { + --platform-tag-color: #bababb; + + padding: 10px 12px; + + cursor: pointer; + + text-transform: capitalize; + + border: 0 none; + + border-radius: var(--size-s1); + + font: var(--font-text-s); +} + +.platform-tag.js-like, +.platform-tag.jvm-like, +.platform-tag.wasm-like { + text-transform: uppercase; +} + +.platform-tags .platform-tag { + display: flex; + align-items: center; +} + +.filter-section .platform-tag[data-active] { + color: #19191c; + background-color: var(--platform-tag-color); +} + +.filter-section .platform-tag.jvm-like[data-active], +.platform-tags .platform-tag.jvm-like { + --platform-tag-color: #4dbb5f; +} + +.filter-section .platform-tag.js-like[data-active], +.platform-tags .platform-tag.js-like { + --platform-tag-color: #ffc700; +} + +.filter-section .platform-tag.native-like[data-active], +.platform-tags .platform-tag.native-like { + --platform-tag-color: #e082f3; +} + +.filter-section .platform-tag.wasm-like[data-active], +.platform-tags .platform-tag.wasm-like { + --platform-tag-color: #9585f9; +} + +.filter-section .platform-tag[data-active]:hover { + color: #fff; + background-color: rgba(186, 186, 187, 0.7); +} + +.filter-section .platform-tag:not([data-active]) { + text-decoration: line-through; + + color: var(--color-w50); + background-color: var(--color-w10); +} + +.platform-tags .platform-tag::before { + display: inline-block; + + width: 8px; + height: 8px; + margin: 0 4px 0 8px; + + content: ''; + + border-radius: 50%; + background: var(--platform-tag-color); + + font-size: 13px; + line-height: 1.6; +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/index.ts new file mode 100644 index 0000000000..fdaa339ab4 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/index.ts @@ -0,0 +1,5 @@ +/* + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +import './styles.scss'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/styles.scss new file mode 100644 index 0000000000..8547e23472 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/styles.scss @@ -0,0 +1,11 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +.platform-tags { + display: flex; + flex-wrap: wrap; + + margin-bottom: -8px; + margin-left: -4px; +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tabs/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tabs/styles.scss index 77df6345ed..e56828839c 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tabs/styles.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tabs/styles.scss @@ -66,7 +66,7 @@ flex: none; order: 5; - min-width: 64px; + min-width: var(--size-l1); background: inherit; } diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss index 8accf82ea7..a3afc50fa1 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss @@ -4,19 +4,23 @@ :root { // Interface --color-key-blue: rgb(48, 127, 255); //#307FFF; - --color-nav-bar: rgb(39, 40, 44); - --color-dark-theme-bg: rgb(38, 38, 40); + --color-background-nav: rgb(39, 40, 44); + --color-background-nav-dt: rgb(50, 50, 55); + --color-background-page: rgb(255, 255, 255); + --color-background-page-dt: rgb(38, 38, 40); + --color-background-footer: rgb(235, 235, 235); + --color-background-footer-dt: rgb(50, 50, 55); // Text colors (headings, paragraphs, labels) - --color-text-black: rgb(0, 0, 0); - --color-text-white: rgba(255, 255, 255, 0.96); - --color-text-light-black: rgba(0, 0, 0, 0.7); - --color-text-light-white: rgba(255, 255, 255, 0.7); + --color-text: rgb(0, 0, 0); + --color-text-dt: rgba(255, 255, 255, 0.96); + --color-text-light: rgba(0, 0, 0, 0.7); + --color-text-light-dt: rgba(255, 255, 255, 0.7); // Generic monochrome --color-w05: rgba(255, 255, 255, 0.05); --color-w10: rgba(255, 255, 255, 0.1); - --color-w20: rgba(255, 255, 255, 0.2); + --color-w16: rgba(255, 255, 255, 0.16); --color-w50: rgba(255, 255, 255, 0.5); --color-w70: rgba(255, 255, 255, 0.7); --color-w80: rgba(255, 255, 255, 0.8); diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/index.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/index.scss index dd082db141..2418f3e3f7 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/index.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/index.scss @@ -6,3 +6,4 @@ @import 'colors'; @import 'sizes'; @import 'typography'; +@import 'transitions'; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss new file mode 100644 index 0000000000..d59f82f1e8 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss @@ -0,0 +1,7 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +:root { + --hover-transition: background-color 200ms ease-in-out; +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/typography.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/typography.scss index 03bc6ad248..5fc2ec13c2 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/typography.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/typography.scss @@ -11,6 +11,6 @@ --font-h3: 600 24px/24px var(--font-family-default); --font-h4: 600 16px/24px var(--font-family-default); --font-text-m: 400 16px/24px var(--font-family-default); - --font-text-s: 400 13px/24px var(--font-family-default); + --font-text-s: 400 14px/20px var(--font-family-default); --font-code: 400 16px/24px var(--font-family-mono); } diff --git a/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt b/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt index d26cace190..4b78e079b9 100644 --- a/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt +++ b/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt @@ -104,6 +104,12 @@ public class StylesInstaller(private val dokkaContext: DokkaContext) : PageTrans public object AssetsInstaller : PageTransformer { private val imagesPages = listOf( + // ui-kit assets + "ui-kit/assets/burger.svg", + "ui-kit/assets/homepage.svg", + "ui-kit/assets/theme-toggle.svg", + + // images "images/arrow_down.svg", "images/logo-icon.svg", "images/go-to-top-icon.svg", diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/logo-styles.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/logo-styles.css index 988268da69..8281d5ca63 100644 --- a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/logo-styles.css +++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/logo-styles.css @@ -4,6 +4,6 @@ :root { --dokka-logo-image-url: url('../images/logo-icon.svg'); - --dokka-logo-height: 50px; - --dokka-logo-width: 50px; + --dokka-logo-height: 28px; + --dokka-logo-width: 28px; } diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css index 628d27dd02..ae091f2b51 100644 --- a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css +++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css @@ -217,7 +217,7 @@ td:first-child { /* ---dark theme --- */ .theme-dark { - --background-color: #27282c; + --background-color: #262628; --color-dark: #3d3d41; --default-font-color: hsla(0, 0%, 100%, 0.8); --border-color: hsla(0, 0%, 100%, 0.2); @@ -249,170 +249,6 @@ td:first-child { height: 100%; } -/* --- Navigation styles --- */ -.navigation { - display: flex; - justify-content: space-between; - - color: #fff; - background-color: var(--color-dark); - font-family: var(--default-font-family); - letter-spacing: -0.1px; - - /* Reset margin and use padding for border */ - margin-left: 0; - margin-right: 0; - padding: 10px var(--horizontal-spacing-for-content); - - z-index: 4; -} - -.navigation--inner { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - flex: 1 1 auto; -} - -.navigation--inner, .navigation-title { - min-height: 40px; -} - -.navigation-title, .filter-section { - align-items: center; -} - -.navigation-title { - display: flex; - align-items: center; -} - -/* --- Navigation MENU --- */ -.menu-toggle { - color: var(--background-color); - line-height: 0; - font-size: 0; - text-indent: -9999px; - - background: transparent; - border: none; - padding: 0; - margin-right: 16px; - outline: none; - - transition: margin .2s ease-out; - z-index: 5; -} - -@media (min-width: 760px) { - .menu-toggle { - display: none; - } -} - -.menu-toggle::before { - display: block; - content: ''; - background: url('../images/burger.svg') no-repeat center; - height: 28px; - width: 28px; -} - -/* /--- Navigation MENU --- */ - -.library-version { - position: relative; - top: -4px; - margin-left: 3px; - - color: rgba(255, 255, 255, .7); - font-size: 13px; - font-weight: normal; - line-height: 16px; -} - -.filter-section { - z-index: 0; -} - -.no-js .filter-section { - display: none; -} - -@media (min-width: 760px) { - .filter-section { - padding: 5px 0 5px; - } -} - -/* --- Navigation controls --- */ -.navigation-controls { - display: flex; - margin-left: 4px; -} - -@media (min-width: 760px) { - .navigation-controls { - align-items: center; - } -} - -.no-js .navigation-controls { - display: none; -} - -.navigation-controls--btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: inherit; - background-position: 50% 50%; - padding: 0; - border: none; - cursor: pointer; - font-size: 0; - line-height: 0; - transition: background-color 200ms ease-in-out; - will-change: background-color; -} - -.navigation-controls--btn:hover { - background-color: var(--white-10); -} - -.navigation-controls--theme { - background-image: url("../images/theme-toggle.svg"); - background-repeat: no-repeat; -} - -@media (max-width: 759px) { - .navigation-controls--theme { - display: none; - } -} - -.navigation-controls--homepage { - background-image: url("../images/homepage.svg"); - background-repeat: no-repeat; - background-size: 24px 24px; -} - -@media (max-width: 759px) { - .navigation-controls--homepage { - display: none; - } -} - -.navigation .platform-selector:not([data-active]) { - color: #fff; -} - -/* /--- Navigation controls --- */ -/* /--- Navigation styles --- */ - /* --- Layout styles --- */ #container { @@ -1037,88 +873,6 @@ p.paragraph img { display: none !important; } -.platform-tags, .filter-section { - display: flex; - flex-wrap: wrap; - margin-bottom: -8px; - margin-left: -4px; -} - -.platform-tag { - --platform-tag-color: #bababb; - border: 0 none; - margin-right: 4px; - margin-bottom: 8px; - - font-family: var(--default-font-family); - font-size: 13px; - line-height: 1.5; - text-transform: capitalize; -} - -.platform-tag.js-like, .platform-tag.jvm-like, .platform-tag.wasm-like { - text-transform: uppercase; -} - -.filter-section .platform-tag { - cursor: pointer; - border-radius: 4px; - padding: 2px 16px; -} - -.filter-section .platform-tag.jvm-like[data-active], .platform-tags .platform-tag.jvm-like { - --platform-tag-color: #4dbb5f; -} - -.filter-section .platform-tag.js-like[data-active], .platform-tags .platform-tag.js-like { - --platform-tag-color: #ffc700; -} - -.filter-section .platform-tag.native-like[data-active], .platform-tags .platform-tag.native-like { - --platform-tag-color: #E082F3; -} - -.filter-section .platform-tag.wasm-like[data-active], .platform-tags .platform-tag.wasm-like { - --platform-tag-color: #9585F9; -} - -.filter-section .platform-tag[data-active]:hover { - color: #fff; - background-color: rgba(186, 186, 187, .7); -} - -.filter-section .platform-tag:not([data-active]) { - color: #fff; - /* Safari doesn't work correctly for `outline` with `border-radius` */ - /* outline: 1px solid rgba(255,255,255,.6); */ - /* ...use `box-shadow` instead: */ - box-shadow: 0 0 0 1px rgb(255 255 255 / 60%); - background-color: rgba(255,255,255,.05); -} - -.filter-section .platform-tag[data-active] { - color: #19191c; - background-color: var(--platform-tag-color); -} - -.platform-tags .platform-tag { - display: flex; - align-items: center; -} - -.platform-tags .platform-tag::before { - display: inline-block; - content: ''; - border-radius: 50%; - background: var(--platform-tag-color); - margin: 0 4px 0 8px; - height: 8px; - width: 8px; - - font-size: 13px; - line-height: 1.6; -} - td.content { padding-left: 24px; padding-top: 16px; @@ -1408,34 +1162,3 @@ div.runnablesample { } /* /--- footer --- */ - -/* Logo styles */ -:root { - --dokka-logo-image-url: url('../images/logo-icon.svg'); - --dokka-logo-height: 50px; - --dokka-logo-width: 50px; -} - -.library-name--link { - display: flex; - align-items: center; - color: #fff; - font-weight: 530; -} - -.library-name--link::before { - content: ''; - background: var(--dokka-logo-image-url) center no-repeat; - background-size: var(--dokka-logo-height) var(--dokka-logo-width); - margin-right: 5px; - width: var(--dokka-logo-height); - height: var(--dokka-logo-width); -} - -@media (max-width: 759px) { - .library-name--link::before { - display: none; - } -} - -/* / Logo styles */ diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl index b55ecf8143..9e156d0207 100644 --- a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl +++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl @@ -1,31 +1,27 @@ <#import "source_set_selector.ftl" as source_set_selector> <#macro display> -