Bug 1941413 - Style moz-select button according to the design system r=reusable-components-reviewers,desktop-theme-reviewers,hjones

Differential Revision: https://phabricator.services.mozilla.com/D236738

toolkit/content/jar.mn

@@ -119,6 +119,7 @@ toolkit.jar:
    content/global/elements/moz-message-bar.css    (widgets/moz-message-bar/moz-message-bar.css)
    content/global/elements/moz-message-bar.mjs    (widgets/moz-message-bar/moz-message-bar.mjs)
    content/global/elements/moz-radio-group.mjs    (widgets/moz-radio-group/moz-radio-group.mjs)
+   content/global/elements/moz-select.css    (widgets/moz-select/moz-select.css)
    content/global/elements/moz-select.mjs    (widgets/moz-select/moz-select.mjs)
    content/global/elements/moz-support-link.mjs    (widgets/moz-support-link/moz-support-link.mjs)
    content/global/elements/moz-toggle.css      (widgets/moz-toggle/moz-toggle.css)

toolkit/content/widgets/moz-select/moz-select.css

@@ -0,0 +1,21 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+select {
+  border: var(--button-border);
+  border-radius: var(--button-border-radius);
+  font-weight: var(--button-font-weight);
+  padding-block: var(--space-xsmall);
+  padding-inline:  var(--space-large) var(--space-xxlarge);
+  min-height: var(--button-min-height);
+  font-size: var(--button-font-size);
+  appearance: none;
+  background: no-repeat url("chrome://global/skin/icons/arrow-down.svg") calc(100% - var(--space-medium)) / var(--icon-size-default) var(--icon-size-default) var(--button-background-color);
+  -moz-context-properties: fill;
+  fill: var(--icon-color);
+
+  &:dir(rtl) {
+    background-position-x: left var(--space-medium);
+  }
+}

toolkit/content/widgets/moz-select/moz-select.mjs

@@ -77,6 +77,16 @@ export default class MozSelect extends MozBaseInputElement {
     this.value = event.target.value;
   }
 
+  /**
+   * @type {MozBaseInputElement['inputStylesTemplate']}
+   */
+  inputStylesTemplate() {
+    return html` <link
+      rel="stylesheet"
+      href="chrome://global/content/elements/moz-select.css"
+    />`;
+  }
+
   inputTemplate() {
     return html`
       <select