feat: reworked navbar according to new design (#3668)

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;

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss → 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';

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;
+}

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);
+}

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;
+  }
+}

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 };

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';

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);
+}

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';

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);
+  }
+}

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';

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');
+}

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';

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);
+  }
+}

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';