Document button dark theme

canonical · Jun 30, 2021 · f7636b8 · f7636b8
1 parent 764cc41
commit f7636b8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/templates/docs/component-status.md b/templates/docs/component-status.md
@@ -23,6 +23,12 @@ When we add, make significant updates, or deprecate a component we update their
   </thead>
   <tbody>
     <!-- 2.32 -->
+    <tr>
+      <th><a href="/docs/patterns/buttons#dark">Button / Dark</a></th>
+      <td><div class="p-label--new">New</div></td>
+      <td>2.32.0</td>
+      <td>We added the dark theme to the buttons.</td>
+    </tr>
     <tr>
       <th><a href="/docs/patterns/buttons#neutral">Button / Neutral</a></th>
       <td><div class="p-label--deprecated">Deprecated</div></td>

diff --git a/templates/docs/examples/patterns/buttons/dark.html b/templates/docs/examples/patterns/buttons/dark.html
@@ -1,29 +1,14 @@
 {% extends "_layouts/examples.html" %}
-{% block title %}Buttons / Default{% endblock %}
+{% block title %}Buttons / Dark{% endblock %}
 
 {% block standalone_css %}patterns_buttons{% endblock %}
 
 {% block content %}
 <div class="p-strip--dark is-shallow" style="background: #111">
-    <p>
-        <button class="p-button is-dark">Default button</button>
-        <button class="p-button is-dark" disabled>Default button disabled</button>
-    </p>
-    <p>
-        <button class="p-button--base is-dark">Base button</button>
-        <button class="p-button--base is-dark" disabled>Base button disabled</button>
-    </p>
-    <p>
-        <button class="p-button--positive is-dark">Positive button</button>
-        <button class="p-button--positive is-dark" disabled>Positive button disabled</button>
-    </p>
-    <p>
-        <button class="p-button--negative is-dark">Negative button</button>
-        <button class="p-button--negative is-dark" disabled>Negative button disabled</button>
-    </p>
-    <p>
-        <button class="p-button--brand is-dark">Brand button</button>
-        <button class="p-button--brand is-dark" disabled>Brand button disabled</button>
-    </p>
+    <button class="p-button is-dark">Default button</button>
+    <button class="p-button--base is-dark">Base button</button>
+    <button class="p-button--positive is-dark">Positive button</button>
+    <button class="p-button--negative is-dark">Negative button</button>
+    <button class="p-button--brand is-dark">Brand button</button>
 </div>
 {% endblock %}
diff --git a/templates/docs/patterns/buttons.md b/templates/docs/patterns/buttons.md
@@ -118,6 +118,17 @@ View example of the processing button pattern
 
 The `is-active` utility class was renamed to the more appropriate `is-processing`, as mentioned above.
 
+### Theming
+
+The buttons use Vanilla's light theme by default. There are two ways to switch between the light and the dark themes:
+
+- Override the default by adding a state to `p-putton`: `is-dark` when the default navigation is light, or `is-light` when the default has been changed to dark:
+- Change the default: go to `_settings_themes.scss` and set `$theme-default-p-button` to `dark`
+
+<div class="embedded-example"><a href="/docs/examples/patterns/buttons/dark" class="js-example">
+View example of the buttons with an is-dark class
+</a></div>
+
 ### Accessibility
 
 In some contexts, it may be necessary to indicate to the user that a button is in a pressed state, such as when a button opens a contextual menu. This can be done by adding `aria-pressed="true"` to the button with JavaScript when the button is clicked, and removed when necessary.