From 5b6890f3c220329f129d7953549a90c26669fdb8 Mon Sep 17 00:00:00 2001
From: nikpachoo <nikpachoo@gmail.com>
Date: Thu, 6 Feb 2025 10:15:50 +0100
Subject: [PATCH] feat: rewamp link styles

---
 .../src/main/ui-kit/global.scss               | 10 ++++--
 .../src/main/ui-kit/index.ts                  |  2 ++
 .../src/main/ui-kit/link/index.ts             |  4 +++
 .../src/main/ui-kit/link/styles.scss          | 36 +++++++++++++++++++
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/index.ts
 create mode 100644 dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/styles.scss

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss
index 07aed29bb0..827345d3e9 100644
--- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss
+++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss
@@ -7,13 +7,19 @@
   --color-background: var(--color-background-page);
   --focus-outline: 4px solid var(--color-key-blue-50);
   --content-max-width: 1128px;
+  --text-color: var(--color-text);
+  --text-outine: var(--color-b20);
 }
 
 .theme-dark {
   --color-background: var(--color-background-page-dt);
+  --text-color: var(--color-text-dt);
+  --text-outine: var(--color-w16);
 }
 
-body,
-table {
+body {
+  font: var(--font-text-m);
   background-color: var(--color-background);
+  color: var(--text-color);
+  margin: 0;
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts
index 5459706d86..2e86509a2e 100644
--- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts
+++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.ts
@@ -16,6 +16,7 @@ import * as platformTag from './platform-tag/index';
 import * as platformTags from './platform-tags/index';
 import * as tabs from './tabs/index';
 import * as tocTree from './toc-tree/index';
+import * as link from './link/index';
 import { removeBackwardCompatibilityStyles } from './utils';
 import './helpers.scss';
 import './global.scss';
@@ -36,6 +37,7 @@ export {
   platformTags,
   tabs,
   tocTree,
+  link,
 };
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/index.ts
new file mode 100644
index 0000000000..93e58af252
--- /dev/null
+++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/index.ts
@@ -0,0 +1,4 @@
+/*
+ * Copyright 2014-2025 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+import './styles.scss';
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/styles.scss
new file mode 100644
index 0000000000..b7238d95c5
--- /dev/null
+++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/link/styles.scss
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2014-2025  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../_tokens/index';
+
+a {
+  text-decoration: none;
+}
+
+/** [data-name] - anchor links with no size **/
+.main-content a:not([data-name]) {
+  outline: none;
+  cursor: pointer;
+  font-style: normal;
+  font-size: inherit;
+  line-height: inherit;
+  transition: color 200ms, border-color 200ms;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  padding-bottom: 1px;
+  border-bottom: 1px solid var(--text-outine);
+
+  &, &:active, &:focus, &:hover {
+    color: var(--text-color);
+    text-decoration: none;
+  }
+
+  &:hover {
+    border-bottom-color: var(--text-color);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 4px var(--color-key-blue-50);
+  }
+}
+