diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/assets/arrow-down.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/assets/arrow-down.svg new file mode 100644 index 0000000000..ca54658d3c --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/assets/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/button.stories.ftl b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/button.stories.ftl new file mode 100644 index 0000000000..10471b6d32 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/button.stories.ftl @@ -0,0 +1,32 @@ +<#macro display> +
+

Just icon

+ +

Just label

+ +

Icon and background

+ +

Icon and label

+ +

Icon, background and label

+ +

dropdown

+ +

label with dropdown

+ +
+ \ No newline at end of file diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/index.ts new file mode 100644 index 0000000000..f86bc1f3bc --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/index.ts @@ -0,0 +1,12 @@ +/* + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ + +import './styles.scss'; + +function onToggleDropdown(event: PointerEvent): void { + (event.target as HTMLButtonElement).classList.toggle('button_dropdown_active'); +} + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +(window as any).onToggleDropdown = onToggleDropdown; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss new file mode 100644 index 0000000000..6ac35df513 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss @@ -0,0 +1,107 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import '../tokens/index'; + +.button { + display: flex; + align-items: center; + + height: 40px; + + padding: var(--size-s2) 12px; + + cursor: pointer; + + letter-spacing: 0.045em; + + color: var(--color-text); + + border: none; + border-radius: var(--size-s1); + + background-color: transparent; + + &:has(:first-child) { + gap: var(--size-s2); + + padding: var(--size-s2); + } + + &:hover { + background-color: var(--color-b08); + } + + &:active { + background-color: var(--color-key-blue); + } + + &:disabled { + cursor: not-allowed; + + opacity: 0.5; + } + + &:focus-visible { + outline: 4px solid var(--color-key-blue-05); + } + + .theme-dark & { + color: var(--color-text-dt); + } + + .theme-dark &:hover { + background-color: var(--color-w10); + } + + &_background { + background-color: var(--color-w100); + + .theme-dark & { + background-color: var(--color-w10); + + &:hover { + background-color: var(--color-w05); + } + } + } + + &_dropdown { + padding: var(--size-s2); + + &::after { + display: block; + + width: var(--size-m1); + height: var(--size-m1); + + content: ''; + transform: rotate(0); + + background-image: url('./assets/arrow-down.svg'); + background-repeat: no-repeat; + will-change: transform; + + filter: invert(1); + + .theme-dark & { + filter: none; + } + } + } + + &_dropdown_active { + color: var(--color-text-dt); + background-color: var(--color-key-blue); + + &:hover, + .theme-dark &:hover { + background-color: lighten(rgb(48, 127, 255), 10%); + } + + &::after { + transform: rotate(-180deg); + filter: invert(0); + } + } +} diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/arrow-down.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/arrow-down.svg new file mode 100644 index 0000000000..ca54658d3c --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/placeholder.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/placeholder.svg new file mode 100644 index 0000000000..e8129621d2 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/assets/placeholder.svg @@ -0,0 +1,3 @@ + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/index.ts new file mode 100644 index 0000000000..fdaa339ab4 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/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/icon/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/styles.scss new file mode 100644 index 0000000000..209871f621 --- /dev/null +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/icon/styles.scss @@ -0,0 +1,32 @@ +/*! + * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. + */ +@import '../tokens/index'; + +.ui-kit-icon { + width: var(--size-m1); + height: var(--size-m1); + + background-color: transparent; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 24px 24px; + + font-size: 0; + line-height: 0; + will-change: background-color; + + filter: invert(1); + + .theme-dark & { + filter: none; + } +} + +.ui-kit-icon_arrow-down { + background-image: url('./assets/arrow-down.svg'); +} + +.ui-kit-icon_placeholder { + background-image: url('./assets/placeholder.svg'); +} 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 6f54e96d70..1d910e15eb 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 @@ -1,7 +1,9 @@ /* * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license. */ +import * as button from './button/index'; import * as filterSection from './filter-section/index'; +import * as icon from './icon/index'; import * as libraryName from './library-name/index'; import * as libraryVersion from './library-version/index'; import * as navbar from './navbar/index'; @@ -12,4 +14,15 @@ import * as tabs from './tabs/index'; import './helpers.scss'; import './global.scss'; -export { filterSection, libraryName, libraryVersion, navbar, navbarButton, platformTag, platformTags, tabs }; +export { + button, + filterSection, + icon, + libraryName, + libraryVersion, + navbar, + navbarButton, + platformTag, + platformTags, + tabs, +}; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg index aa4bb06e27..a26f194dc4 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/burger.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg index 747574ed9e..be62ea5bf3 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/filter.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg index e3c83b1ce3..9a8927a40a 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/homepage.svg @@ -1,3 +1,3 @@ - + diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg index e2b6cb5f7f..490263f391 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/assets/theme-toggle.svg @@ -1,3 +1,3 @@ - + 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 index 061616dc31..ae11e5d530 100644 --- 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 @@ -9,6 +9,7 @@ padding: 10px 12px; cursor: pointer; + letter-spacing: -0.03em; text-transform: capitalize; diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss index a3afc50fa1..97e51c0a09 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/colors.scss @@ -4,6 +4,7 @@ :root { // Interface --color-key-blue: rgb(48, 127, 255); //#307FFF; + --color-key-blue-05: rgb(48, 127, 255, 0.5); --color-background-nav: rgb(39, 40, 44); --color-background-nav-dt: rgb(50, 50, 55); --color-background-page: rgb(255, 255, 255); @@ -24,6 +25,7 @@ --color-w50: rgba(255, 255, 255, 0.5); --color-w70: rgba(255, 255, 255, 0.7); --color-w80: rgba(255, 255, 255, 0.8); + --color-w100: rgba(255, 255, 255, 1); --color-b05: rgba(0, 0, 0, 0.05); --color-b08: rgba(0, 0, 0, 0.08); --color-b20: rgba(0, 0, 0, 0.2); diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss index d59f82f1e8..cd56bbd354 100644 --- a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss +++ b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/tokens/transitions.scss @@ -4,4 +4,5 @@ :root { --hover-transition: background-color 200ms ease-in-out; + --rotate-transition: transform 200ms ease-in-out; } diff --git a/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt b/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt index 4b78e079b9..fa6a4a6a45 100644 --- a/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt +++ b/dokka-subprojects/plugin-base/src/main/kotlin/org/jetbrains/dokka/base/renderers/html/htmlPreprocessors.kt @@ -105,9 +105,11 @@ public class StylesInstaller(private val dokkaContext: DokkaContext) : PageTrans public object AssetsInstaller : PageTransformer { private val imagesPages = listOf( // ui-kit assets + "ui-kit/assets/arrow-down.svg", "ui-kit/assets/burger.svg", "ui-kit/assets/homepage.svg", "ui-kit/assets/theme-toggle.svg", + "ui-kit/assets/placeholder.svg", // images "images/arrow_down.svg", diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css index ae091f2b51..8732c3fe7f 100644 --- a/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css +++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/styles/style.css @@ -8,7 +8,7 @@ /* --- root styles --- */ :root { --default-gray: #f4f4f4; - --default-font-color: black; + --default-font-color: rgb(0, 0, 0); --header-font-color: var(--default-font-color); --breadcrumb-font-color: #637282; @@ -219,7 +219,7 @@ td:first-child { .theme-dark { --background-color: #262628; --color-dark: #3d3d41; - --default-font-color: hsla(0, 0%, 100%, 0.8); + --default-font-color: rgba(255, 255, 255, 0.96); --border-color: hsla(0, 0%, 100%, 0.2); --code-background: hsla(0, 0%, 100%, 0.05); --breadcrumb-font-color: #8c8c8e; diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl index 9e156d0207..a95bce704d 100644 --- a/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl +++ b/dokka-subprojects/plugin-base/src/main/resources/dokka/templates/includes/header.ftl @@ -1,6 +1,6 @@ <#import "source_set_selector.ftl" as source_set_selector> <#macro display> -