Audit and refactor the input and button components (#580)

This PR adds the missing input component README documentation and updates it's docs page to match. This also includes some major refactoring of the input component along with some minor button component consistency changes. Here are the majority of the changes made:

- Added `calc-padding(padding, border-width)`
- Added button styles to button component
- Added border width, style and color vars to button and input components
- Added example forms (`example.html`) to input component
- Refactored input component styles
- Removed `input_color_invert` modifier
- Refactored `input_state_[value]` modifier
- Refactored `input_type_textarea` modifier
- Refactor input `box-shadow()` mixin

docs/_packages/button.md

@@ -82,10 +82,10 @@ Buttons can also have a loading state by adding the `is-loading` state class. Th
 
 {% include demo_open.html %}
 <div class="level">
-  <button class="is-loading button">Button</button>
-  <button class="is-loading button button_color_subtle">Button</button>
-  <button class="is-loading button button_color_primary">Button</button>
-  <button class="is-loading button button_color_secondary">Button</button>
+  <button class="is-loading button" disabled>Button</button>
+  <button class="is-loading button button_color_subtle" disabled>Button</button>
+  <button class="is-loading button button_color_primary" disabled>Button</button>
+  <button class="is-loading button button_color_secondary" disabled>Button</button>
 </div>
 {% include demo_switch.html %}
 ```html
@@ -264,8 +264,7 @@ Outline styles usually have a more subtle appearance compared to [`button_color_
 
 ## button_size_[value]
 
-Adjust the size of a button by increasing or decreasing its padding and font-size. By default, the button scale will provide a button height of 30px (`button_size_sm`), 40px (default) and 50px (`button_size_lg`).
-
+Adjust the size of a button by increasing or decreasing its padding and font-size. By default, the button scale will provide a button height of 30px (small `button_size_sm`), 40px (default) and 50px (large `button_size_lg`).
 
 {% include demo_open.html %}
 <div class="level">
@@ -348,23 +347,33 @@ Adjust the size of a button by increasing or decreasing its padding and font-siz
         <td data-mobile-label="Desc">The default horizontal gap spacing for elements inside the button component.</td>
       </tr>
       <tr>
-        <td data-mobile-label="Var"><code class="code text-nowrap">$border</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">none</code></td>
-        <td data-mobile-label="Desc">Sets the border property.</td>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$border-width</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-width</code></td>
+        <td data-mobile-label="Desc">Sets the border-width property.</td>
+      </tr>
+      <tr>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$border-style</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-style</code></td>
+        <td data-mobile-label="Desc">Sets the border-style property.</td>
+      </tr>
+      <tr>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$border-color</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-color</code></td>
+        <td data-mobile-label="Desc">Sets the border-color property.</td>
       </tr>
       <tr>
         <td data-mobile-label="Var"><code class="code text-nowrap">$border-color-hover</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">null</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-color-dark</code></td>
         <td data-mobile-label="Desc">Sets the border-color property on <code class="code">:hover</code> state.</td>
       </tr>
       <tr>
         <td data-mobile-label="Var"><code class="code text-nowrap">$border-color-focus</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">null</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-color-dark</code></td>
         <td data-mobile-label="Desc">Sets the border-color property on <code class="code">:focus</code> state.</td>
       </tr>
       <tr>
         <td data-mobile-label="Var"><code class="code text-nowrap">$border-color-active</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">null</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$border-color-darker</code></td>
         <td data-mobile-label="Desc">Sets the border-color property on <code class="code">:active</code> state.</td>
       </tr>
       <tr>