Code Navigation: adjust global styling for kbd element (#60320)

* adjust global styling for kbd element

* design tweaks from Taiyab

Author: jasonhawkharris

client/branded/src/search-ui/results/filters/NewSearchFilters.module.scss

@@ -94,13 +94,6 @@
     }
 }
 
-// @TODO: Jason Harris: <kbd> element is unuseable unless the following CSS selectors are present.
-// We should use these as a base for adjusting the default styling of <kbd> elements.
 .keybind {
-    font-family: var(--font-family-base);
-    color: var(--text-muted);
-    background: var(--color-bg-1);
-    border: 1px solid var(--border-color-2);
     margin-left: 0.5rem;
-    padding: 0 0.25rem;
 }

client/wildcard/src/global-styles/code.scss

@@ -34,18 +34,19 @@ code,
 }
 
 kbd {
-    font-family: var(--code-font-family);
-    font-size: var(--code-font-size);
+    background-color: var(--color-bg-1);
+    border-radius: 4px;
+    border: 1px solid var(--border-color-2);
+    box-shadow: inset 0 -2px 0 var(--color-bg-2);
+    color: var(--text-muted);
     display: inline-block;
-    line-height: (16/12);
+    font-family: var(--monospace-font-family);
+    font-size: var(--code-font-size);
     height: 1.125rem;
-    padding: 0 0.25rem;
+    line-height: (16/12);
     margin: 0 0.125rem;
+    padding: 0 0.25rem;
     vertical-align: middle;
-    border-radius: 3px;
-    color: var(--body-color);
-    background-color: var(--color-bg-2);
-    box-shadow: inset 0 -2px 0 var(--color-bg-3);
 }
 
 // Search examples that link to the results page should use this class.