Stylize the matplotlib widgets toolbar

Add style to matplotlib widgets
Add Color Change on Hover Functionality
Apply System Fonts to buttons with text

packages/matplotlib/src/wasm_backend.py

@@ -27,7 +27,6 @@ from js import ImageData
 
 interactive(True)
 
-
 class FigureCanvasWasm(backend_agg.FigureCanvasAgg):
     supports_blit = False
 
@@ -38,6 +37,41 @@ class FigureCanvasWasm(backend_agg.FigureCanvasAgg):
         self._id = "matplotlib_" + hex(id(self))[2:]
         self._title = ''
         self._ratio = 1
+        matplotlib_figure_styles = self._add_matplotlib_styles()
+        if document.getElementById('matplotlib-figure-styles') is None:
+            document.head.appendChild(matplotlib_figure_styles)
+
+    def _add_matplotlib_styles(self):
+        toolbar_buttons_css_content = """
+            button.matplotlib-toolbar-button {
+                font-size: 14px;
+                color: #495057;
+                text-transform: uppercase;
+                background: #e9ecef;
+                padding: 9px 18px;
+                border: 1px solid #fff;
+                border-radius: 4px;
+                transition-duration: 0.4s;
+            }
+
+            button.matplotlib-toolbar-button#text {
+                font-family: -apple-system, BlinkMacSystemFont, 
+                "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, 
+                "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, 
+                sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
+                "Segoe UI Symbol";
+            }
+
+            button.matplotlib-toolbar-button:hover {
+                color: #fff;
+                background: #495057;
+            }
+        """
+        toolbar_buttons_style_element = document.createElement('style')
+        toolbar_buttons_style_element.id = 'matplotlib-figure-styles'
+        toolbar_buttons_css = document.createTextNode(toolbar_buttons_css_content)
+        toolbar_buttons_style_element.appendChild(toolbar_buttons_css)
+        return toolbar_buttons_style_element
 
     def get_element(self, name):
         """
@@ -449,6 +483,7 @@ class NavigationToolbar2Wasm(backend_bases.NavigationToolbar2):
                     button = document.createElement('button')
                     button.classList.add('fa')
                     button.classList.add(_FONTAWESOME_ICONS[image_file])
+                    button.classList.add('matplotlib-toolbar-button')
                     button.addEventListener(
                         'click', getattr(self, name_of_method))
                     div.appendChild(button)
@@ -457,6 +492,8 @@ class NavigationToolbar2Wasm(backend_bases.NavigationToolbar2):
             button = document.createElement('button')
             button.classList.add('fa')
             button.textContent = format
+            button.classList.add('matplotlib-toolbar-button')
+            button.id = 'text'
             button.addEventListener(
                 'click', self.ondownload)
             div.appendChild(button)