chore: update breadcrumbs styles KTL-1706

dokka-subprojects/plugin-base-frontend/src/main/ui-kit/breadcrumbs/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';

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

@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2014-2025  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
+ */
+@import '../_tokens/index';
+
+.breadcrumbs {
+  --breadcrumb-size: 24px;
+  margin-top: var(--breadcrumb-size);
+  min-height: var(--breadcrumb-size);
+  overflow-wrap: break-word;
+}
+
+.breadcrumbs .delimiter {
+  margin: 0 2px;
+  color: var(--text-outline);
+}

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

@@ -17,6 +17,7 @@ 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 * as breadcrumbs from './breadcrumbs/index';
 import { removeBackwardCompatibilityStyles } from './utils';
 import './helpers.scss';
 import './global.scss';
@@ -38,6 +39,7 @@ export {
   tabs,
   tocTree,
   link,
+  breadcrumbs,
 };
 
 document.addEventListener('DOMContentLoaded', () => {

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

@@ -11,7 +11,6 @@
     --default-font-color: rgb(0, 0, 0);
     --header-font-color: var(--default-font-color);
 
-    --breadcrumb-margin: 24px;
     --hover-link-color: #5B5DEF;
 
     --color-scrollbar: rgba(39, 40, 44, 0.40);
@@ -224,21 +223,7 @@ td:first-child {
     font-weight: 530;
 }
 
-/* /--- Breadcrumbs styles --- */
-.breadcrumbs, .breadcrumbs a, .breadcrumbs a:hover {
-    margin-top: var(--breadcrumb-margin);
-    overflow-wrap: break-word;
-}
-
-.breadcrumbs .delimiter {
-    margin: auto 2px;
-}
-
-.breadcrumbs .current {
-    color: var(--default-font-color);
-}
 
-/* /--- Breadcrumbs styles --- */
 
 .cover > .platform-hinted {
     padding-bottom: 12px;

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

@@ -2585,6 +2585,86 @@ a {
   --rotate-transition:transform 200ms ease-in-out;
 }
 
+.breadcrumbs {
+  --breadcrumb-size:24px;
+  margin-top: var(--breadcrumb-size);
+  min-height: var(--breadcrumb-size);
+  word-wrap: break-word;
+}
+
+.breadcrumbs .delimiter {
+  color: var(--text-outline);
+  margin: 0 2px;
+}
+: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;
+}
+
 @media (max-width: 899px) {
   .ui-kit_desktop-only {
     display: none;