feat: reworked footer

Author: berezinant

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_assets/go-to-top-icon.svg

@@ -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/index.ts

@@ -0,0 +1,10 @@
+/*!
+ * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../_tokens/index';
+
+.footer {
+  &--button_go-to-top {
+    background-image: url('../_assets/go-to-top-icon.svg');
+  }
+}

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

@@ -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/index.ts

@@ -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-frontend/src/main/ui-kit/navbar-button/styles.scss

@@ -116,6 +116,7 @@ public object AssetsInstaller : PageTransformer {
         "ui-kit/assets/class-kotlin.svg",
         "ui-kit/assets/class.svg",
         "ui-kit/assets/cross.svg",
+        "ui-kit/assets/go-to-top-icon.svg",
         "ui-kit/assets/enum-kotlin.svg",
         "ui-kit/assets/enum.svg",
         "ui-kit/assets/exception-class.svg",
@@ -136,7 +137,6 @@ public object AssetsInstaller : PageTransformer {
         "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/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt

@@ -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/images/go-to-top-icon.svg

@@ -750,6 +750,78 @@
   --rotate-transition:transform 200ms ease-in-out;
 }
 
+.footer--button_go-to-top {
+  background-image: url(assets/go-to-top-icon.svg);
+}
+: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 +1307,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;