refactor: adjust styling of back top top button (#5469)

* refactor: css variables for back to top button

* refactor: adjust back to top button styling

* Update from PR feedback

* err... darker.

* swap secondary color for emphasis scale

* reduce contrast further

* Add new translations

* Cleanup CSS

* Remove active state

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

packages/docusaurus-theme-classic/codeTranslations/ar.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "إغلاق",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "تم النسخ",
   "theme.CodeBlock.copy": "نسخ",
   "theme.CodeBlock.copyButtonAriaLabel": "نسخ الرمز إلى الحافظة",

packages/docusaurus-theme-classic/codeTranslations/base.json

@@ -1,6 +1,7 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Close",
   "theme.AnnouncementBar.closeButtonAriaLabel___DESCRIPTION": "The ARIA label for close button of announcement bar",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Copied",
   "theme.CodeBlock.copied___DESCRIPTION": "The copied button label on code blocks",
   "theme.CodeBlock.copy": "Copy",
@@ -96,7 +97,7 @@
   "theme.docs.versions.latestVersionLinkLabel": "latest version",
   "theme.docs.versions.latestVersionLinkLabel___DESCRIPTION": "The label used for the latest version suggestion link label",
   "theme.docs.versions.latestVersionSuggestionLabel": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).",
-  "theme.docs.versions.latestVersionSuggestionLabel___DESCRIPTION": "The label used to tell the user to check the latest version",
+  "theme.docs.versions.latestVersionSuggestionLabel___DESCRIPTION": "The label userd to tell the user that he's browsing an unmaintained doc version",
   "theme.docs.versions.unmaintainedVersionLabel": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.",
   "theme.docs.versions.unmaintainedVersionLabel___DESCRIPTION": "The label used to tell the user that he's browsing an unmaintained doc version",
   "theme.docs.versions.unreleasedVersionLabel": "This is unreleased documentation for {siteTitle} {versionLabel} version.",

packages/docusaurus-theme-classic/codeTranslations/bn.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "বন্ধ করুন",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "কপিড",
   "theme.CodeBlock.copy": "কপি",
   "theme.CodeBlock.copyButtonAriaLabel": "ক্লিপবোর্ডে কোড কপি করুন",

packages/docusaurus-theme-classic/codeTranslations/cs.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Zavřít",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Zkopírováno",
   "theme.CodeBlock.copy": "Zkopírovat",
   "theme.CodeBlock.copyButtonAriaLabel": "Zkopírovat kód do schránky",

packages/docusaurus-theme-classic/codeTranslations/da.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Luk",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Kopieret",
   "theme.CodeBlock.copy": "Kopier",
   "theme.CodeBlock.copyButtonAriaLabel": "Kopier kode til udklipsholder",

packages/docusaurus-theme-classic/codeTranslations/de.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Schließen",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Kopiert",
   "theme.CodeBlock.copy": "Kopieren",
   "theme.CodeBlock.copyButtonAriaLabel": "In die Zwischenablage kopieren",

packages/docusaurus-theme-classic/codeTranslations/es.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Cerrar",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Copiado",
   "theme.CodeBlock.copy": "Copiar",
   "theme.CodeBlock.copyButtonAriaLabel": "Copiar código al portapaples",

packages/docusaurus-theme-classic/codeTranslations/fa.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "بستن",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "کپی شد",
   "theme.CodeBlock.copy": "کپی",
   "theme.CodeBlock.copyButtonAriaLabel": "کپی به کلیپ بورد",

packages/docusaurus-theme-classic/codeTranslations/fil.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Isara",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Kinopya",
   "theme.CodeBlock.copy": "Kopyahin",
   "theme.CodeBlock.copyButtonAriaLabel": "Kopyahin ang code sa clipboard",

packages/docusaurus-theme-classic/codeTranslations/fr.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Fermer",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Copié",
   "theme.CodeBlock.copy": "Copier",
   "theme.CodeBlock.copyButtonAriaLabel": "Copier le code",

packages/docusaurus-theme-classic/codeTranslations/he.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "סגור",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "הועתק",
   "theme.CodeBlock.copy": "העתק",
   "theme.CodeBlock.copyButtonAriaLabel": "העתק קוד ללוח העריכה",

packages/docusaurus-theme-classic/codeTranslations/hi.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "बंद करे",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "कॉपीड",
   "theme.CodeBlock.copy": "कॉपी",
   "theme.CodeBlock.copyButtonAriaLabel": "क्लिपबोर्ड पर कोड कॉपी करें",

packages/docusaurus-theme-classic/codeTranslations/ja.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "閉じる",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "コピーしました",
   "theme.CodeBlock.copy": "コピー",
   "theme.CodeBlock.copyButtonAriaLabel": "クリップボードにコードをコピー",

packages/docusaurus-theme-classic/codeTranslations/ko.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "닫기",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "복사했습니다",
   "theme.CodeBlock.copy": "복사",
   "theme.CodeBlock.copyButtonAriaLabel": "클립보드에 코드 복사",

packages/docusaurus-theme-classic/codeTranslations/pl.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Zamknij",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Skopiowano!",
   "theme.CodeBlock.copy": "Kopiuj",
   "theme.CodeBlock.copyButtonAriaLabel": "Kopiuj do schowka",

packages/docusaurus-theme-classic/codeTranslations/pt-BR.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Fechar",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Copiado",
   "theme.CodeBlock.copy": "Copiar",
   "theme.CodeBlock.copyButtonAriaLabel": "Copiar código para a área de transferência",

packages/docusaurus-theme-classic/codeTranslations/pt-PT.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Fechar",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Copiado",
   "theme.CodeBlock.copy": "Copiar",
   "theme.CodeBlock.copyButtonAriaLabel": "Copiar código para a área de transferência",

packages/docusaurus-theme-classic/codeTranslations/ru.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Закрыть",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Скопировано",
   "theme.CodeBlock.copy": "Скопировать",
   "theme.CodeBlock.copyButtonAriaLabel": "Скопировать в буфер обмена",

packages/docusaurus-theme-classic/codeTranslations/tr.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Kapat",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Kopyalandı",
   "theme.CodeBlock.copy": "Kopyala",
   "theme.CodeBlock.copyButtonAriaLabel": "Kodu panoya kopyala",

packages/docusaurus-theme-classic/codeTranslations/vi.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Đóng",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Đã sao chép",
   "theme.CodeBlock.copy": "Sao chép",
   "theme.CodeBlock.copyButtonAriaLabel": "Sao chép code vào bộ nhớ tạm",

packages/docusaurus-theme-classic/codeTranslations/zh-Hans.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "关闭",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "复制成功",
   "theme.CodeBlock.copy": "复制",
   "theme.CodeBlock.copyButtonAriaLabel": "复制代码到剪贴板",

packages/docusaurus-theme-classic/codeTranslations/zh-Hant.json

@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "關閉",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "複製成功",
   "theme.CodeBlock.copy": "複製",
   "theme.CodeBlock.copyButtonAriaLabel": "複製代碼至剪貼簿",

packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx

@@ -8,9 +8,11 @@
 import React, {useRef, useState} from 'react';
 import clsx from 'clsx';
 import {useLocation} from '@docusaurus/router';
+import {translate} from '@docusaurus/Translate';
 import useScrollPosition from '@theme/hooks/useScrollPosition';
 
 import styles from './styles.module.css';
+import {ThemeClassNames} from '@docusaurus/theme-common';
 
 const threshold = 300;
 
@@ -106,18 +108,22 @@ function BackToTopButton(): JSX.Element {
 
   return (
     <button
-      className={clsx('clean-btn', styles.backToTopButton, {
+      aria-label={translate({
-        [styles.backToTopButtonShow]: show,
+        id: 'theme.BackToTopButton.buttonAriaLabel',
+        message: 'Scroll back to top',
+        description: 'The ARIA label for the back to top button',
       })}
+      className={clsx(
+        'clean-btn',
+        ThemeClassNames.common.backToTopButton,
+        styles.backToTopButton,
+        {
+          [styles.backToTopButtonShow]: show,
+        },
+      )}
       type="button"
-      onClick={() => smoothScrollTop()}>
+      onClick={() => smoothScrollTop()}
-      <svg viewBox="0 0 24 24" width="28">
+    />
-        <path
-          d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-          fill="currentColor"
-        />
-      </svg>
-    </button>
   );
 }
 

packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css

@@ -5,32 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-:root {
-  --docusaurus-btt-background: var(--ifm-color-primary);
-  --docusaurus-btt-color: #fff;
-}
-
 .backToTopButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: fixed;
   right: 1.3rem;
   bottom: 1.3rem;
   border-radius: 50%;
-  background: var(--docusaurus-btt-background);
+  background-color: var(--ifm-color-emphasis-200);
-  color: var(--docusaurus-btt-color);
   width: 3rem;
   height: 3rem;
   z-index: var(--ifm-z-index-fixed);
-  box-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.3);
+  box-shadow: var(--ifm-global-shadow-lw);
-  transition: all var(--ifm-transition-fast) ease-in-out;
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
   opacity: 0;
   transform: scale(0);
 }
 
-.backToTopButton:not(:focus):hover {
+.backToTopButton:after {
-  opacity: 0.8;
+  content: ' ';
+  display: inline-block;
+  mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;
+  background-color: var(--ifm-color-emphasis-1000);
+  width: 100%;
+  height: 100%;
+}
+
+@media (hover: hover) {
+  .backToTopButton:hover {
+    background-color: var(--ifm-color-emphasis-300);
+  }
 }
 
 .backToTopButtonShow {

packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts

@@ -33,6 +33,7 @@ export const ThemeClassNames = {
   common: {
     editThisPage: 'theme-edit-this-page',
     lastUpdated: 'theme-last-updated',
+    backToTopButton: 'theme-back-to-top-button',
   },
   layout: {
     // TODO add other stable classNames here