feat: implemented new UI for platform-tags

Kotlin · berezinant · Jan 24, 2024 · Jun 7, 2024 · Jun 10, 2024 · Jun 11, 2024
commit 783d301a6e62833014f2164d678a974e00039b92
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts
@@ -0,0 1,5 @@
 /*
  * Copyright 2014-2024 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/filter-section/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/styles.scss
@@ -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';
 
 .filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/index.scss
@@ -2,6 2,8 @@
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
 
-@import 'tabs/styles';
 @import 'filter-section/styles';
 @import 'navbar/styles';
 @import 'platform-tag/styles';
 @import 'platform-tags/styles';
 @import 'tabs/styles';
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
@@ -1,8 1,10 @@
 /*
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
 import * as filterSection from './filter-section/index';
 import * as navbar from './navbar/index';
 import * as platformTag from './platform-tag/index';
 import * as platformTags from './platform-tags/index';
 import * as tabs from './tabs/index';
 
-export { navbar, tabs, platformTag };
 export { filterSection, navbar, tabs, platformTag, platformTags };
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss
@@ -1,29 1,22 @@
 /*!
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
-
-.platform-tags,
-.filter-section {
- display: flex;
- flex-wrap: wrap;
-
- margin-bottom: -8px;
- margin-left: -4px;
-}
 @import '../tokens/index';
 
 .platform-tag {
  --platform-tag-color: #bababb;
 
- margin-right: 4px;
- margin-bottom: 8px;
  padding: 10px 12px;
 
  cursor: pointer;
 
  text-transform: capitalize;
 
  border: 0 none;
 
- font-family: var(--default-font-family);
- font-size: 13px;
- line-height: 1.5;
  border-radius: var(--size-s1);
 
  font: var(--font-text-s);
 }
 
 .platform-tag.js-like,
@@ -32,14 25,6 @@
  text-transform: uppercase;
 }
 
-.filter-section .platform-tag {
- padding: 2px 16px;
-
- cursor: pointer;
-
- border-radius: 4px;
-}
-
 .platform-tags .platform-tag {
  display: flex;
  align-items: center;
@@ -76,14 61,10 @@
 }
 
 .filter-section .platform-tag:not([data-active]) {
- color: #fff;
- background-color: rgba(255, 255, 255, 0.05);
-
- /* Safari doesn't work correctly for `outline` with `border-radius` */
- /* outline: 1px solid rgba(255,255,255,.6); */
- /* ...use `box-shadow` instead: */
  text-decoration: line-through;
 
- box-shadow: 0 0 0 1px rgb(255 255 255 / 60%);
  color: var(--color-w50);
  background-color: var(--color-w10);
 }
 
 .platform-tags .platform-tag::before {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/index.ts
@@ -0,0 1,5 @@
 /*
  * Copyright 2014-2024 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/platform-tags/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tags/styles.scss
@@ -0,0 1,11 @@
 /*!
  * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
  */
 
 .platform-tags {
  display: flex;
  flex-wrap: wrap;
 
  margin-bottom: -8px;
  margin-left: -4px;
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/typography.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/typography.scss
@@ -4,13 4,13 @@
 
 :root {
  --font-family-default: JetBrains Sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
- Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
   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 13px/24px var(--font-family-default);
  --font-text-s: 400 14px/20px var(--font-family-default);
  --font-code: 400 16px/24px var(--font-family-mono);
 }
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js