feat: implemented new button states (#3737)

* feat: implemented new button states

* fix: button stories

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/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,7 +1,9 @@
 /*
  * 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';
@@ -12,4 +14,15 @@ import * as tabs from './tabs/index';
 import './helpers.scss';
 import './global.scss';
 
-export { filterSection, libraryName, libraryVersion, navbar, navbarButton, platformTag, platformTags, tabs };
+export {
+  button,
+  filterSection,
+  icon,
+  libraryName,
+  libraryVersion,
+  navbar,
+  navbarButton,
+  platformTag,
+  platformTags,
+  tabs,
+};

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

@@ -9,6 +9,7 @@
   padding: 10px 12px;
 
   cursor: pointer;
+  letter-spacing: -0.03em;
 
   text-transform: capitalize;
 

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss

@@ -4,6 +4,7 @@
 :root {
   // Interface
   --color-key-blue: rgb(48, 127, 255); //#307FFF;
+  --color-key-blue-05: rgb(48, 127, 255, 0.5);
   --color-background-nav: rgb(39, 40, 44);
   --color-background-nav-dt: rgb(50, 50, 55);
   --color-background-page: rgb(255, 255, 255);
@@ -24,6 +25,7 @@
   --color-w50: rgba(255, 255, 255, 0.5);
   --color-w70: rgba(255, 255, 255, 0.7);
   --color-w80: rgba(255, 255, 255, 0.8);
+  --color-w100: rgba(255, 255, 255, 1);
   --color-b05: rgba(0, 0, 0, 0.05);
   --color-b08: rgba(0, 0, 0, 0.08);
   --color-b20: rgba(0, 0, 0, 0.2);

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss

@@ -4,4 +4,5 @@
 
 :root {
   --hover-transition: background-color 200ms ease-in-out;
+  --rotate-transition: transform 200ms ease-in-out;
 }

dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt

@@ -105,9 +105,11 @@ public class StylesInstaller(private val dokkaContext: DokkaContext) : PageTrans
 public object AssetsInstaller : PageTransformer {
     private val imagesPages = listOf(
         // ui-kit assets
+        "ui-kit/assets/arrow-down.svg",
         "ui-kit/assets/burger.svg",
         "ui-kit/assets/homepage.svg",
         "ui-kit/assets/theme-toggle.svg",
+        "ui-kit/assets/placeholder.svg",
 
         // images
         "images/arrow_down.svg",

dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css

@@ -8,7 +8,7 @@
 /* --- root styles --- */
 :root {
     --default-gray: #f4f4f4;
-    --default-font-color: black;
+    --default-font-color: rgb(0, 0, 0);
     --header-font-color: var(--default-font-color);
 
     --breadcrumb-font-color: #637282;
@@ -219,7 +219,7 @@ td:first-child {
 .theme-dark {
     --background-color: #262628;
     --color-dark: #3d3d41;
-    --default-font-color: hsla(0, 0%, 100%, 0.8);
+    --default-font-color: rgba(255, 255, 255, 0.96);
     --border-color: hsla(0, 0%, 100%, 0.2);
     --code-background: hsla(0, 0%, 100%, 0.05);
     --breadcrumb-font-color: #8c8c8e;

dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl

@@ -1,6 +1,6 @@
 <#import "source_set_selector.ftl" as source_set_selector>
 <#macro display>
-    <nav class="navigation" id="navigation-wrapper">
+    <nav class="navigation theme-dark" id="navigation-wrapper">
         <@template_cmd name="pathToRoot">
             <a class="library-name--link" href="${pathToRoot}index.html">
                 <@template_cmd name="projectName">

dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/source_set_selector.ftl

@@ -4,6 +4,7 @@
             <#list sourceSets as ss>
                 <button class="platform-tag platform-selector ${ss.platform}-like" data-active="" data-filter="${ss.filter}">${ss.name}</button>
             </#list>
+            <button class="button button_dropdown" onclick="onToggleDropdown(event)"></button>
         </div>
     </#if>
 </#macro>