DOC: Use sphinx-design's buttons

Author: QuLogic

doc/_static/mpl.css

@@ -1,3 +1,8 @@
+:root {
+    --sd-color-primary: #11557C;
+    --sd-color-primary-highlight: #003c63;
+}
+
 a {
     color: #11557C;
     text-decoration: none;
@@ -174,29 +179,6 @@ hr.box-sep {
     font-size: 1.0em;
 }
 
-
-.mpl-button {
-    background: #11557C;
-    font-weight: normal;
-    display: inline-block;
-    padding: 0 1em;
-    line-height: 2.8;
-    font-size: 16px;
-    text-align: center;
-    cursor: pointer;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 6px;
-    z-index: 1;
-    transition: background .25s ease;
-}
-
-.mpl-button:hover, .mpl-button:active, .mpl-button:focus {
-    background: #003c63;
-    outline-color: #003c63;
-}
-
-
 /* Hide red ¶ between the thumbnail and caption in gallery
 
 Due the way that sphinx-gallery floats its captions the perma-link
@@ -251,11 +233,6 @@ table.property-table td {
     margin: 2.75rem 0;
 }
 
-.sidebar-donate .mpl-button {
-    /* fix width to width of cheatsheet */
-    width: 210px;
-}
-
 /* Fix selection of parameter names; remove when fixed in the theme
  * https://github.com/sphinx-doc/sphinx/pull/9763
  */

doc/_templates/donate_sidebar.html

@@ -1,8 +1,5 @@
-
-
-
 <div class="sidebar-donate">
-  <a href="https://numfocus.org/donate-to-matplotlib" target="_blank">
-    <span class="mpl-button" >Support Matplotlib</span>
+  <a class="sd-btn sd-btn-primary sd-fs-5 sd-px-5 sd-py-2" href="https://numfocus.org/donate-to-matplotlib" target="_blank">
+    Support Matplotlib
   </a>
 </div>

doc/devel/index.rst

@@ -19,14 +19,37 @@ process or how to fix something feel free to ask on `gitter
 <https://gitter.im/matplotlib/matplotlib>`_ for short questions and on
 `discourse <https://discourse.matplotlib.org>`_ for longer questions.
 
-.. raw:: html
-
-   <div style="margin: 2em 0;">
-     <a href="contributing.html#submitting-a-bug-report"><span class="mpl-button">Report a bug</span></a>
-     <a href="contributing.html#request-a-new-feature"><span class="mpl-button">Request a feature</span></a>
-     <a href="contributing.html#contributing-code"><span class="mpl-button">Contribute code</span></a>
-     <a href="contributing.html#contributing-documentation"><span class="mpl-button">Write documentation</span></a>
-   </div>
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: submitting-a-bug-report
+        :class: sd-fs-6
+        :color: primary
+
+        Report a bug
+
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: request-a-new-feature
+        :class: sd-fs-6
+        :color: primary
+
+        Request a feature
+
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: contributing-code
+        :class: sd-fs-6
+        :color: primary
+
+        Contribute code
+
+.. rst-class:: sd-d-inline-block
+
+    .. button-ref:: contributing_documentation
+        :class: sd-fs-6
+        :color: primary
+
+        Write documentation
 
 .. toctree::
    :maxdepth: 2