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/button/button.stories.ftl

@@ -0,0 +1,33 @@
+<#macro display>
+    <div id="storybook">
+        <p>Just icon</p>
+        <button class="button">
+            <div class="ui-kit-icon ui-kit-icon_placeholder"></div>
+        </button>
+        <p>Just label</p>
+        <button class="button">
+            Label
+        </button>
+        <p>Icon and background</p>
+        <button class="button button_background">
+            <div class="ui-kit-icon ui-kit-icon_placeholder"></div>
+        </button>
+        <p>Icon and label</p>
+        <button class="button">
+            <div class="ui-kit-icon ui-kit-icon_placeholder"></div>
+            Label
+        </button>
+        <p>Icon, background and label</p>
+        <button class="button button_background">
+            <div class="ui-kit-icon ui-kit-icon_placeholder"></div>
+            Label
+        </button>
+        <p>dropdown</p>
+        <button class="button button_dropdown" onclick="onToggleDropdown(event)">
+        </button>
+        <p>label with dropdown</p>
+        <button class="button button_dropdown" onclick="onToggleDropdown(event)">
+            Label
+        </button>
+    </div>
+</#macro>

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+
+import './styles.scss';
+
+function onToggleDropdown(event: PointerEvent): void {
+  (event.target as HTMLButtonElement).classList.toggle('button_dropdown_active');
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).onToggleDropdown = onToggleDropdown;

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss

@@ -0,0 +1,107 @@
+/*!
+ * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../tokens/index';
+
+.button {
+  display: flex;
+  align-items: center;
+
+  height: 40px;
+
+  padding: var(--size-s2) 12px;
+
+  cursor: pointer;
+
+  letter-spacing: 0.045em;
+
+  color: var(--color-text);
+
+  border: none;
+  border-radius: var(--size-s1);
+
+  background-color: transparent;
+
+  &:has(:first-child) {
+    gap: var(--size-s2);
+
+    padding: var(--size-s2);
+  }
+
+  &:hover {
+    background-color: var(--color-b08);
+  }
+
+  &:active {
+    background-color: var(--color-key-blue);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+
+    opacity: 0.5;
+  }
+
+  &:focus-visible {
+    outline: 4px solid var(--color-key-blue-05);
+  }
+
+  .theme-dark & {
+    color: var(--color-text-dt);
+  }
+
+  .theme-dark &:hover {
+    background-color: var(--color-w10);
+  }
+
+  &_background {
+    background-color: var(--color-w100);
+
+    .theme-dark & {
+      background-color: var(--color-w10);
+
+      &:hover {
+        background-color: var(--color-w05);
+      }
+    }
+  }
+
+  &_dropdown {
+    padding: var(--size-s2);
+
+    &::after {
+      display: block;
+
+      width: var(--size-m1);
+      height: var(--size-m1);
+
+      content: '';
+      transform: rotate(0);
+
+      background-image: url('./assets/arrow-down.svg');
+      background-repeat: no-repeat;
+      will-change: transform;
+
+      filter: invert(1);
+
+      .theme-dark & {
+        filter: none;
+      }
+    }
+  }
+
+  &_dropdown_active {
+    color: var(--color-text-dt);
+    background-color: var(--color-key-blue);
+
+    &:hover,
+    .theme-dark &:hover {
+      background-color: lighten(rgb(48, 127, 255), 10%);
+    }
+
+    &::after {
+      transform: rotate(-180deg);
+      filter: invert(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/icon/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/icon/styles.scss

@@ -0,0 +1,32 @@
+/*!
+ * 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-icon {
+  width: var(--size-m1);
+  height: var(--size-m1);
+
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 24px 24px;
+
+  font-size: 0;
+  line-height: 0;
+  will-change: background-color;
+
+  filter: invert(1);
+
+  .theme-dark & {
+    filter: none;
+  }
+}
+
+.ui-kit-icon_arrow-down {
+  background-image: url('./assets/arrow-down.svg');
+}
+
+.ui-kit-icon_placeholder {
+  background-image: url('./assets/placeholder.svg');
+}

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts

@@ -1,6 +1,28 @@
 /*
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
+import * as button from './button/index';
+import * as filterSection from './filter-section/index';
+import * as icon from './icon/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 {
+  button,
+  filterSection,
+  icon,
+  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';