Import Dropdown component; add dark variants for dropdown and text fields

docs/content/components/dropdown.md

@@ -28,7 +28,7 @@ symbols:
   ]
 ---
 
-Dropdowns are lightweight, JavaScript-powered context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
+Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.
 
 ## Basic examples
 
@@ -205,3 +205,29 @@ Align the direction of dropdown menus and their arrows with modifier classes.
   </div>
 </details>
 ```
+
+### Dark
+
+```html live
+<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3" style="min-height: 240px;">
+  <details class="dropdown details-reset details-overlay d-inline-block">
+    <summary class="btn" aria-haspopup="true">
+      Dropdown
+      <div class="dropdown-caret"></div>
+    </summary>
+
+    <div class="dropdown-menu dropdown-menu-se dropdown-menu-dark">
+      <div class="dropdown-header">
+        Dropdown header
+      </div>
+      <ul>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li class="dropdown-divider" role="separator"></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+        <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
+      </ul>
+    </div>
+  </details>
+</div>
+```

docs/content/components/forms.md

@@ -111,6 +111,15 @@ Make inputs smaller, larger, or full-width with an additional class.
 </form>
 ```
 
+##### Dark
+
+```html live
+<div class="bg-gray-dark p-3 mt-n3 ml-n3 mr-n3">
+  <input class="form-control input-dark" type="text" placeholder="Dark input" aria-label="Dark input">
+  <input class="form-control input-dark input-sm" type="text" placeholder="Dark input small" aria-label="Dark input">
+</div>
+```
+
 ##### Hide webkit's contact info autofill icon
 
 Webkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.

src/core/index.scss

@@ -21,6 +21,7 @@
 @import "../box/index.scss";
 @import "../breadcrumb/index.scss";
 @import "../buttons/index.scss";
+@import "../dropdowns/index.scss";
 @import "../table-object/index.scss";
 @import "../forms/index.scss";
 @import "../layout/index.scss";

src/dropdowns/README.md

@@ -0,0 +1,25 @@
+---
+bundle: "dropdowns"
+generated: true
+---
+
+# Primer CSS: `dropdowns` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/dropdowns/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/dropdowns.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) © [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss