fix: stop using squared icon for github and twitter (#1250)

* fix: use the python icon

* fix: use custom icons for icon_links

* change icon colors

* remove coloring of the icons

* use custom icon for pypi

* Update docs/_static/custom.js

Co-authored-by: Daniel McCloy <dan@mccloy.info>

* update icon name

* resize icons

* cleaning

* cleaning

* update tests

* merge typo

* Update docs/_static/custom-icon.js

* Update docs/_static/custom-icon.js

---------

Co-authored-by: Daniel McCloy <dan@mccloy.info>

docs/conf.py

@@ -128,14 +128,22 @@
             "name": "Donate to NumFocus",
         },
     ],
-    "github_url": "https://github.com/pydata/pydata-sphinx-theme",
-    "twitter_url": "https://twitter.com/PyData",
     "header_links_before_dropdown": 4,
     "icon_links": [
+        {
+            "name": "Twitter",
+            "url": "https://twitter.com/PyData",
+            "icon": "fa-brands fa-twitter",
+        },
+        {
+            "name": "GitHub",
+            "url": "https://github.com/pydata/pydata-sphinx-theme",
+            "icon": "fa-brands fa-github",
+        },
         {
             "name": "PyPI",
             "url": "https://pypi.org/project/pydata-sphinx-theme",
-            "icon": "fa-solid fa-box",
+            "icon": "fa-custom fa-pypi",
         },
         {
             "name": "PyData",
@@ -145,6 +153,9 @@
             "attributes": {"target": "_blank"},
         },
     ],
+    # alternative way to set twitter and github header icons
+    # "github_url": "https://github.com/pydata/pydata-sphinx-theme",
+    # "twitter_url": "https://twitter.com/PyData",
     "logo": {
         "text": "PyData Theme",
         "image_dark": "_static/logo-dark.svg",
@@ -208,6 +219,7 @@
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
 html_css_files = ["custom.css"]
+html_js_files = ["custom-icon.js"]
 todo_include_todos = True
 
 # -- favicon options ---------------------------------------------------------

src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss

@@ -1,43 +1,21 @@
 // the icons for theme change
 .theme-switch-button {
-  // override bootstrap settings
-  border-color: var(--pst-color-on-background);
-  // Size is a bit smaller because the background shadow is bigger
-  font-size: calc(var(--pst-font-size-icon) - 0.1rem);
+  // overide bootstrap settings
   margin: 0 -0.5rem;
   padding: 0; // We pad the `span` not the container
+  color: var(--pst-color-text-muted);
 
   span {
     display: none;
-    color: var(--pst-color-text-muted);
-    padding: 0.5rem;
+    padding: 0.5em;
+
     &:hover,
     &:active,
     &:focus {
       text-decoration: none;
+      color: var(--pst-color-primary);
     }
   }
-
-  &:hover,
-  &:active {
-    // override bootstrap settings
-    background-color: var(--pst-color-on-surface) !important;
-    border-color: var(--pst-color-on-background) !important;
-    a {
-      color: var(--pst-color-text-muted);
-    }
-  }
-}
-
-// specific border color when the button is nested in the navbar
-// as it's color is different from the header
-.bd-sidebar-primary .theme-switch-button {
-  border-color: var(--pst-color-background);
-
-  &:hover,
-  &:active {
-    border-color: var(--pst-color-background) !important;
-  }
 }
 
 html[data-mode="auto"] .theme-switch-button span[data-mode="auto"] {

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html

@@ -12,7 +12,7 @@
           {% set attributeString = attributeString | join(" ") -%}
           <a {{ attributeString }}>
             {%- if type == "fontawesome" -%}
-            <span><i class="{{ icon }}"></i></span>
+            <span><i class="{{ icon }} fa-lg"></i></span>
             <label class="sr-only">{{ name }}</label>
             {%- elif type == "local" -%}
             <img src="{{ pathto(icon, 1) }}" class="icon-link-image" alt="{{ name }}"/>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button.html

@@ -5,7 +5,7 @@
 <script>
 document.write(`
   <button class="btn btn-sm navbar-btn search-button search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <i class="fa-solid fa-magnifying-glass"></i>
+    <i class="fa-solid fa-magnifying-glass fa-lg"></i>
   </button>
 `);
 </script>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/theme-switcher.html

@@ -2,10 +2,10 @@
  #}
 <script>
 document.write(`
-  <button class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <span class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></span>
-    <span class="theme-switch" data-mode="dark"><i class="fa-solid fa-moon"></i></span>
-    <span class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></span>
+  <button class="btn btn-sm navbar-btn theme-switch-button" title="{{ _('light/dark') }}" aria-label="{{ _('light/dark') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+    <span class="theme-switch nav-link" data-mode="light"><i class="fa-solid fa-sun fa-lg"></i></span>
+    <span class="theme-switch nav-link" data-mode="dark"><i class="fa-solid fa-moon fa-lg"></i></span>
+    <span class="theme-switch nav-link" data-mode="auto"><i class="fa-solid fa-circle-half-stroke fa-lg"></i></span>
   </button>
 `);
 </script>

tests/test_build/navbar_icon_links.html

@@ -2,7 +2,7 @@
  <li class="nav-item">
   <a class="nav-link" data-bs-placement="bottom" data-bs-toggle="tooltip" href="https://site1.org" rel="noopener" target="_blank" title="FONTAWESOME">
    <span>
-    <i class="FACLASS">
+    <i class="FACLASS fa-lg">
     </i>
    </span>
    <label class="sr-only">
@@ -13,7 +13,7 @@
  <li class="nav-item">
   <a class="nav-link" data-bs-placement="bottom" data-bs-toggle="tooltip" href="https://site2.org" rel="noopener" target="_blank" title="FONTAWESOME DEFAULT">
    <span>
-    <i class="FADEFAULTCLASS">
+    <i class="FADEFAULTCLASS fa-lg">
     </i>
    </span>
    <label class="sr-only">
@@ -41,7 +41,7 @@
  <li class="nav-item">
   <a class="overridden classes" data-bs-placement="bottom" data-bs-toggle="tooltip" foo="bar" href="https://override.com" rel="noopener" target="_blank" title="FONTAWESOME">
    <span>
-    <i class="FACLASS">
+    <i class="FACLASS fa-lg">
     </i>
    </span>
    <label class="sr-only">

tests/test_build/navbar_theme.html

@@ -1,9 +1,9 @@
 <script>
  document.write(`
-  <button class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <span class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></span>
-    <span class="theme-switch" data-mode="dark"><i class="fa-solid fa-moon"></i></span>
-    <span class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></span>
+  <button class="btn btn-sm navbar-btn theme-switch-button" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
+    <span class="theme-switch nav-link" data-mode="light"><i class="fa-solid fa-sun fa-lg"></i></span>
+    <span class="theme-switch nav-link" data-mode="dark"><i class="fa-solid fa-moon fa-lg"></i></span>
+    <span class="theme-switch nav-link" data-mode="auto"><i class="fa-solid fa-circle-half-stroke fa-lg"></i></span>
   </button>
 `);
 </script>

tests/test_build/sidebar_subpage.html

@@ -38,10 +38,10 @@
    <div class="navbar-item">
     <script>
      document.write(`
-  <button class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
-    <span class="theme-switch" data-mode="light"><i class="fa-solid fa-sun"></i></span>
-    <span class="theme-switch" data-mode="dark"><i class="fa-solid fa-moon"></i></span>
-    <span class="theme-switch" data-mode="auto"><i class="fa-solid fa-circle-half-stroke"></i></span>
+  <button class="btn btn-sm navbar-btn theme-switch-button" title="light/dark" aria-label="light/dark" data-bs-placement="bottom" data-bs-toggle="tooltip">
+    <span class="theme-switch nav-link" data-mode="light"><i class="fa-solid fa-sun fa-lg"></i></span>
+    <span class="theme-switch nav-link" data-mode="dark"><i class="fa-solid fa-moon fa-lg"></i></span>
+    <span class="theme-switch nav-link" data-mode="auto"><i class="fa-solid fa-circle-half-stroke fa-lg"></i></span>
   </button>
 `);
     </script>

webpack.config.js

@@ -62,6 +62,9 @@ const theme_scripts = [
 const fa_stylesheets = [
   `vendor/fontawesome/${vendorVersions.fontAwesome}/css/all.min.css`,
 ];
+const fa_scripts = [
+  `vendor/fontawesome/${vendorVersions.fontAwesome}/js/all.min.js`,
+];
 const fa_fonts = [
   `vendor/fontawesome/${vendorVersions.fontAwesome}/webfonts/fa-solid-900.woff2`,
   `vendor/fontawesome/${vendorVersions.fontAwesome}/webfonts/fa-brands-400.woff2`,
@@ -95,6 +98,7 @@ function macroTemplate({ compilation }) {
     {% macro head_js_preload() %}
       <!-- Pre-loaded scripts that we'll load fully later -->
       ${theme_scripts.map(preload.bind(compilation)).join("\n")}
+      ${fa_scripts.map(script.bind(compilation)).join("\n")}
     {% endmacro %}
 
     {% macro body_post() %}
@@ -128,6 +132,11 @@ const copyPlugin = new CopyPlugin({ // fontawesome
       from: "all.min.css",
       to: resolve(faPath.fontAwesome, "css"),
     },
+    {
+      context: "./node_modules/@fortawesome/fontawesome-free/js",
+      from: "all.min.js",
+      to: resolve(faPath.fontAwesome, "js"),
+    },
     {
       context: "./node_modules/@fortawesome/fontawesome-free",
       from: "webfonts",