feat: rewamp link styles

Kotlin · Feb 6, 2025 · 5b6890f · 5b6890f
1 parent 0e2415c
commit 5b6890f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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);
+  }
+}
+