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

dsmmcken · lex111 · web-flow · commit b6d0378704d6 · 2021-09-11T16:09:58.000+03:00
* 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 &lt;lex61rus@gmail.com&gt;
diff --git a/packages/docusaurus-theme-classic/codeTranslations/ar.json b/packages/docusaurus-theme-classic/codeTranslations/ar.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#1573;&#1594;&#1604;&#1575;&#1602;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#1578;&#1605; &#1575;&#1604;&#1606;&#1587;&#1582;",
   "theme.CodeBlock.copy": "&#1606;&#1587;&#1582;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#1606;&#1587;&#1582; &#1575;&#1604;&#1585;&#1605;&#1586; &#1573;&#1604;&#1609; &#1575;&#1604;&#1581;&#1575;&#1601;&#1592;&#1577;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/base.json b/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.",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/bn.json b/packages/docusaurus-theme-classic/codeTranslations/bn.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#2476;&#2472;&#2509;&#2471; &#2453;&#2480;&#2497;&#2472;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#2453;&#2474;&#2495;&#2465;",
   "theme.CodeBlock.copy": "&#2453;&#2474;&#2495;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#2453;&#2509;&#2482;&#2495;&#2474;&#2476;&#2507;&#2480;&#2509;&#2465;&#2503; &#2453;&#2507;&#2465; &#2453;&#2474;&#2495; &#2453;&#2480;&#2497;&#2472;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/cs.json b/packages/docusaurus-theme-classic/codeTranslations/cs.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Zav&#345;&iacute;t",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Zkop&iacute;rov&aacute;no",
   "theme.CodeBlock.copy": "Zkop&iacute;rovat",
   "theme.CodeBlock.copyButtonAriaLabel": "Zkop&iacute;rovat k&oacute;d do schr&aacute;nky",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/da.json b/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",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/de.json b/packages/docusaurus-theme-classic/codeTranslations/de.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "Schlie&szlig;en",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "Kopiert",
   "theme.CodeBlock.copy": "Kopieren",
   "theme.CodeBlock.copyButtonAriaLabel": "In die Zwischenablage kopieren",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/es.json b/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&oacute;digo al portapaples",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/fa.json b/packages/docusaurus-theme-classic/codeTranslations/fa.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#1576;&#1587;&#1578;&#1606;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#1705;&#1662;&#1740; &#1588;&#1583;",
   "theme.CodeBlock.copy": "&#1705;&#1662;&#1740;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#1705;&#1662;&#1740; &#1576;&#1607; &#1705;&#1604;&#1740;&#1662; &#1576;&#1608;&#1585;&#1583;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/fil.json b/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",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/fr.json b/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&eacute;",
   "theme.CodeBlock.copy": "Copier",
   "theme.CodeBlock.copyButtonAriaLabel": "Copier le code",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/he.json b/packages/docusaurus-theme-classic/codeTranslations/he.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#1505;&#1490;&#1493;&#1512;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#1492;&#1493;&#1506;&#1514;&#1511;",
   "theme.CodeBlock.copy": "&#1492;&#1506;&#1514;&#1511;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#1492;&#1506;&#1514;&#1511; &#1511;&#1493;&#1491; &#1500;&#1500;&#1493;&#1495; &#1492;&#1506;&#1512;&#1497;&#1499;&#1492;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/hi.json b/packages/docusaurus-theme-classic/codeTranslations/hi.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#2348;&#2306;&#2342; &#2325;&#2352;&#2375;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#2325;&#2377;&#2346;&#2368;&#2337;",
   "theme.CodeBlock.copy": "&#2325;&#2377;&#2346;&#2368;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#2325;&#2381;&#2354;&#2367;&#2346;&#2348;&#2379;&#2352;&#2381;&#2337; &#2346;&#2352; &#2325;&#2379;&#2337; &#2325;&#2377;&#2346;&#2368; &#2325;&#2352;&#2375;&#2306;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/ja.json b/packages/docusaurus-theme-classic/codeTranslations/ja.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#38281;&#12376;&#12427;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#12467;&#12500;&#12540;&#12375;&#12414;&#12375;&#12383;",
   "theme.CodeBlock.copy": "&#12467;&#12500;&#12540;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#12463;&#12522;&#12483;&#12503;&#12508;&#12540;&#12489;&#12395;&#12467;&#12540;&#12489;&#12434;&#12467;&#12500;&#12540;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/ko.json b/packages/docusaurus-theme-classic/codeTranslations/ko.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#45803;&#44592;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#48373;&#49324;&#54664;&#49845;&#45768;&#45796;",
   "theme.CodeBlock.copy": "&#48373;&#49324;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#53364;&#47549;&#48372;&#46300;&#50640; &#53076;&#46300; &#48373;&#49324;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/pl.json b/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",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/pt-BR.json b/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&oacute;digo para a &aacute;rea de transfer&ecirc;ncia",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/pt-PT.json b/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&oacute;digo para a &aacute;rea de transfer&ecirc;ncia",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/ru.json b/packages/docusaurus-theme-classic/codeTranslations/ru.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#1047;&#1072;&#1082;&#1088;&#1099;&#1090;&#1100;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#1057;&#1082;&#1086;&#1087;&#1080;&#1088;&#1086;&#1074;&#1072;&#1085;&#1086;",
   "theme.CodeBlock.copy": "&#1057;&#1082;&#1086;&#1087;&#1080;&#1088;&#1086;&#1074;&#1072;&#1090;&#1100;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#1057;&#1082;&#1086;&#1087;&#1080;&#1088;&#1086;&#1074;&#1072;&#1090;&#1100; &#1074; &#1073;&#1091;&#1092;&#1077;&#1088; &#1086;&#1073;&#1084;&#1077;&#1085;&#1072;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/tr.json b/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&#305;",
   "theme.CodeBlock.copy": "Kopyala",
   "theme.CodeBlock.copyButtonAriaLabel": "Kodu panoya kopyala",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/vi.json b/packages/docusaurus-theme-classic/codeTranslations/vi.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#272;&oacute;ng",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#272;&atilde; sao ch&eacute;p",
   "theme.CodeBlock.copy": "Sao ch&eacute;p",
   "theme.CodeBlock.copyButtonAriaLabel": "Sao ch&eacute;p code v&agrave;o b&#7897; nh&#7899; t&#7841;m",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/zh-Hans.json b/packages/docusaurus-theme-classic/codeTranslations/zh-Hans.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#20851;&#38381;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#22797;&#21046;&#25104;&#21151;",
   "theme.CodeBlock.copy": "&#22797;&#21046;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#22797;&#21046;&#20195;&#30721;&#21040;&#21098;&#36148;&#26495;",
diff --git a/packages/docusaurus-theme-classic/codeTranslations/zh-Hant.json b/packages/docusaurus-theme-classic/codeTranslations/zh-Hant.json
@@ -1,5 +1,6 @@
 {
   "theme.AnnouncementBar.closeButtonAriaLabel": "&#38364;&#38281;",
+  "theme.BackToTopButton.buttonAriaLabel": "Scroll back to top",
   "theme.CodeBlock.copied": "&#35079;&#35069;&#25104;&#21151;",
   "theme.CodeBlock.copy": "&#35079;&#35069;",
   "theme.CodeBlock.copyButtonAriaLabel": "&#35079;&#35069;&#20195;&#30908;&#33267;&#21098;&#36028;&#31807;",
diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx b/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, {
-        [styles.backToTopButtonShow]: show,
+      aria-label={translate({
+        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()}>
-      <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>
+      onClick={() => smoothScrollTop()}
+    />
   );
 }
 
diff --git a/packages/docusaurus-theme-classic/src/theme/BackToTopButton/styles.module.css b/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);
-  color: var(--docusaurus-btt-color);
+  background-color: var(--ifm-color-emphasis-200);
   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);
-  transition: all var(--ifm-transition-fast) ease-in-out;
+  box-shadow: var(--ifm-global-shadow-lw);
+  transition: all var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
   opacity: 0;
   transform: scale(0);
 }
 
-.backToTopButton:not(:focus):hover {
-  opacity: 0.8;
+.backToTopButton:after {
+  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 {
diff --git a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts b/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

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