feat: reworked footer

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

@@ -0,0 +1,4 @@
+/*
+ * 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/footer/styles.scss

@@ -0,0 +1,77 @@
+/*!
+ * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../_tokens/index';
+
+.footer {
+  position: relative;
+
+  display: flex;
+  clear: both;
+  align-items: center;
+
+  min-height: var(--footer-height);
+  margin-top: auto;
+
+  padding: 0 var(--size-m3);
+
+  letter-spacing: 0.2px;
+
+  color: var(--footer-font-color);
+  background-color: var(--footer-background);
+
+  font-size: 12px;
+  line-height: 16px;
+
+  &--button_go-to-top {
+    background-image: url('../_assets/go-to-top-icon.svg');
+  }
+
+  &--button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 40px;
+    height: 40px;
+    padding: 0;
+
+    cursor: pointer;
+    transition: background-color 200ms ease-in-out;
+
+    border: none;
+    border-radius: 50%;
+    background-color: var(--footer-go-to-top-color);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+
+    font-size: 0;
+    line-height: 0;
+    will-change: background-color;
+  }
+
+  &--button:hover {
+    opacity: 0.9;
+  }
+
+  &--link {
+    display: inline-flex;
+    align-items: center;
+
+    color: var(--breadcrumb-font-color);
+  }
+
+  &--link_external::after {
+    width: 12px;
+    height: 12px;
+    margin-right: var(--horizontal-spacing-for-content);
+    margin-left: 4px;
+
+    content: '';
+
+    background-image: url('../_assets/external-link.svg');
+
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+  }
+}

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

@@ -5,6 +5,7 @@ import * as button from './button/index';
 import * as checkbox from './checkbox/index';
 import * as dropdown from './dropdown/index';
 import * as filterSection from './filter-section/index';
+import * as footer from './footer/index';
 import * as icon from './icon/index';
 import * as libraryName from './library-name/index';
 import * as libraryVersion from './library-version/index';
@@ -23,6 +24,7 @@ export {
   checkbox,
   dropdown,
   filterSection,
+  footer,
   icon,
   libraryName,
   libraryVersion,

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

@@ -85,3 +85,7 @@
 
   background-image: url('../_assets/burger.svg');
 }
+
+.navigation-controls--btn_go-to-top {
+  background-image: url('../_assets/go-to-top-icon.svg');
+}

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

@@ -119,10 +119,12 @@ public object AssetsInstaller : PageTransformer {
         "ui-kit/assets/enum-kotlin.svg",
         "ui-kit/assets/enum.svg",
         "ui-kit/assets/exception-class.svg",
+        "ui-kit/assets/external-link.svg",
         "ui-kit/assets/field-value.svg",
         "ui-kit/assets/field-variable.svg",
         "ui-kit/assets/filter.svg",
         "ui-kit/assets/function.svg",
+        "ui-kit/assets/go-to-top-icon.svg",
         "ui-kit/assets/homepage.svg",
         "ui-kit/assets/interface-kotlin.svg",
         "ui-kit/assets/interface.svg",
@@ -135,8 +137,6 @@ public object AssetsInstaller : PageTransformer {
         "images/anchor-copy-button.svg",
         "images/copy-icon.svg",
         "images/copy-successful-icon.svg",
-        "images/footer-go-to-link.svg",
-        "images/go-to-top-icon.svg",
         "images/logo-icon.svg",
     )
 

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

@@ -872,66 +872,3 @@ Just in case of possible performance degradation it excluding tabs with briefs o
 div.runnablesample {
     height: fit-content;
 }
-
-/* --- footer --- */
-.footer {
-    clear: both;
-    display: flex;
-    align-items: center;
-    position: relative;
-    min-height: var(--footer-height);
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.2px;
-    color: var(--footer-font-color);
-    margin-top: auto;
-    background-color: var(--footer-background);
-}
-
-.footer--button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: var(--footer-go-to-top-color);
-    background-repeat: no-repeat;
-    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;
-}
-
-.footer--button:hover {
-    opacity: 0.9;
-}
-
-.footer--button_go-to-top {
-    background-image: url("../images/go-to-top-icon.svg");
-    margin-left: var(--horizontal-spacing-for-content);
-    margin-right: 8px;
-}
-
-.footer--link {
-    display: inline-flex;
-    align-items: center;
-    color: var(--breadcrumb-font-color);
-}
-
-.footer--link_external:after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    margin-left: 4px;
-    margin-right: var(--horizontal-spacing-for-content);
-    background-image: url("../images/footer-go-to-link.svg");
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-}
-
-/* /--- footer --- */

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

@@ -1,6 +1,6 @@
 <#macro display>
     <div class="footer">
-        <a href="#content" id="go-to-top-link" class="footer--button footer--button_go-to-top"></a>
+        <a href="#content" id="go-to-top-link" class="navigation-controls--btn navigation-controls--btn_go-to-top"></a>
         <span>${footerMessage}</span>
         <span class="pull-right">
             <span>Generated by </span>

dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css

@@ -750,6 +750,133 @@
   --rotate-transition:transform 200ms ease-in-out;
 }
 
+.footer {
+  align-items: center;
+  background-color: var(--footer-background);
+  clear: both;
+  color: var(--footer-font-color);
+  display: flex;
+  font-size: 12px;
+  letter-spacing: 0.2px;
+  line-height: 16px;
+  margin-top: auto;
+  min-height: var(--footer-height);
+  padding: 0 48px;
+  padding: 0 var(--size-m3);
+  position: relative;
+}
+
+.footer--button_go-to-top {
+  background-image: url(assets/go-to-top-icon.svg);
+}
+
+.footer--button {
+  align-items: center;
+  background-color: var(--footer-go-to-top-color);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  font-size: 0;
+  height: 40px;
+  justify-content: center;
+  line-height: 0;
+  padding: 0;
+  transition: background-color 0.2s ease-in-out;
+  width: 40px;
+  will-change: background-color;
+}
+
+.footer--button:hover {
+  opacity: 0.9;
+}
+
+.footer--link {
+  align-items: center;
+  color: var(--breadcrumb-font-color);
+  display: inline-flex;
+}
+
+.footer--link_external:after {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  content: "";
+  height: 12px;
+  margin-left: 4px;
+  margin-right: var(--horizontal-spacing-for-content);
+  width: 12px;
+}
+:root {
+  --breakpoint-desktop-min:900px;
+  --breakpoint-tablet-max:899px;
+  --breakpoint-tablet-min:440px;
+  --breakpoint-mobile-max:439px;
+  --breakpoint-mobile-min:360px;
+  --color-key-blue:#307fff;
+  --color-key-blue-50:rgba(48,127,255,.5);
+  --color-background-nav:#27282c;
+  --color-background-nav-dt:#323237;
+  --color-background-page:#fff;
+  --color-background-page-dt:#262628;
+  --color-background-footer:#ebebeb;
+  --color-background-footer-dt:#323237;
+  --color-text:#000;
+  --color-text-dt:hsla(0,0%,100%,.96);
+  --color-text-light:rgba(0,0,0,.7);
+  --color-text-light-dt:hsla(0,0%,100%,.7);
+  --color-w05:hsla(0,0%,100%,.05);
+  --color-w08:hsla(0,0%,100%,.08);
+  --color-w10:hsla(0,0%,100%,.1);
+  --color-w16:hsla(0,0%,100%,.16);
+  --color-w50:hsla(0,0%,100%,.5);
+  --color-w70:hsla(0,0%,100%,.7);
+  --color-w80:hsla(0,0%,100%,.8);
+  --color-w100:#fff;
+  --color-b05:rgba(0,0,0,.05);
+  --color-b08:rgba(0,0,0,.08);
+  --color-b20:rgba(0,0,0,.2);
+  --color-b50:rgba(0,0,0,.5);
+  --color-b70:rgba(0,0,0,.7);
+  --color-cd-punctuation:#999;
+  --color-cd-keyword:#0033b3;
+  --color-cd-keyword-alternative:#cc7832;
+  --color-cd-builtin:#067d17;
+  --color-cd-builtin-alternative:#e7bf6a;
+  --color-cd-function:#00627a;
+  --color-cd-function-alternative:#ffc66d;
+  --color-cd-operator:#9a6e3a;
+  --color-cd-operator-alternative:#a9b7c6;
+  --color-cd-body:#000;
+  --color-cd-body-alternative:#a9b7c6;
+  --color-generic:#539df3;
+  --color-jvm:#4dbb5f;
+  --color-js:#ffc700;
+  --color-wasm:#fff;
+  --size-s1:4px;
+  --size-s2:8px;
+  --size-s3:16px;
+  --size-m1:24px;
+  --size-m2:32px;
+  --size-m3:48px;
+  --size-l1:64px;
+  --size-l2:72px;
+  --size-ta1:40px;
+  --size-ta2:52px;
+  --font-family-default:JetBrains Sans,Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Arial,sans-serif;
+  --font-family-mono:JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+  --font-h1:600 44px/44px var(--font-family-default);
+  --font-h2:600 32px/32px var(--font-family-default);
+  --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 14px/20px var(--font-family-default);
+  --font-code:400 16px/24px var(--font-family-mono);
+  --hover-transition:background-color 200ms ease-in-out;
+  --rotate-transition:transform 200ms ease-in-out;
+}
+
 .ui-kit-icon {
   background-color: transparent;
   background-position: 50% 50%;
@@ -1235,6 +1362,10 @@
   background-image: url(assets/burger.svg);
   margin-left: auto;
 }
+
+.navigation-controls--btn_go-to-top {
+  background-image: url(assets/go-to-top-icon.svg);
+}
 :root {
   --breakpoint-desktop-min:900px;
   --breakpoint-tablet-max:899px;