Add form-control size variables to core that form-control components …

…inherit (#599)

This PR Adds globally shared form-control size variables that are now used by all 5 form-control components:

- Button
- Input
- Checkbox
- Radio
- Switch

docs/_packages/button.md

@@ -332,8 +332,8 @@ Adjust the size of a button by increasing or decreasing its padding and font-siz
         <td data-mobile-label="Desc">The breakpoints map the <code class="code">button_block_[key]</code> modifier uses to build its styles.</td>
       </tr>
       <tr>
-        <td data-mobile-label="Var"><code class="code text-nowrap">$min-size</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">2.5rem</code></td>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$size</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size</code></td>
         <td data-mobile-label="Desc">Sets the minimum size of a button using the min-height and min-width properties.</td>
       </tr>
       <tr>
@@ -507,8 +507,8 @@ Adjust the size of a button by increasing or decreasing its padding and font-siz
         <td data-mobile-label="Desc">The template for where to apply the border-color property. Takes boolean <code class="code">1</code> and <code class="code">0</code> values for top, right, bottom and left borders respectively.</td>
       </tr>
       <tr>
-        <td data-mobile-label="Var"><code class="code text-nowrap">$size-sm-min-size</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">1.875rem</code></td>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$size-sm</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size-sm</code></td>
         <td data-mobile-label="Desc">Sets the minimum size of the <code class="code">button_size_sm</code> modifier using the min-height and min-width properties.</td>
       </tr>
       <tr>
@@ -527,8 +527,8 @@ Adjust the size of a button by increasing or decreasing its padding and font-siz
         <td data-mobile-label="Desc">Sets the line-height property of the <code class="code">button_size_sm</code> modifier.</td>
       </tr>
       <tr>
-        <td data-mobile-label="Var"><code class="code text-nowrap">$size-lg-min-size</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">3.125rem</code></td>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$size-lg</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size-lg</code></td>
         <td data-mobile-label="Desc">Sets the minimum size of the <code class="code">button_size_lg</code> modifier using the min-height and min-width properties.</td>
       </tr>
       <tr>

docs/_packages/checkbox.md

@@ -120,7 +120,7 @@ For checkboxes with labels, just wrap the checkbox component along with label te
       </tr>
       <tr>
         <td data-mobile-label="Var"><code class="code text-nowrap">$size</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">2.5em</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size</code></td>
         <td data-mobile-label="Desc">Sets the width and height of the <code class="code">checkbox__background</code> element.</td>
       </tr>
       <tr>

docs/_packages/input.md

@@ -173,8 +173,8 @@ Adds unique styles for various form input types. These form controls share style
       </tr>
       <!-- General -->
       <tr>
-        <td data-mobile-label="Var"><code class="code text-nowrap">$height</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">2.5rem</code></td>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$size</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size</code></td>
         <td data-mobile-label="Desc">Sets the height property on <code class="code">input</code> and min-height property of the <code class="code">input_type_textarea</code> modifier.</td>
       </tr>
       <tr>
@@ -326,8 +326,8 @@ Adds unique styles for various form input types. These form controls share style
       </tr>
       <!-- input_size_[value] -->
       <tr>
-        <td data-mobile-label="Var"><code class="code text-nowrap">$size-sm-height</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">1.875rem</code></td>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$size-sm</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size-sm</code></td>
         <td data-mobile-label="Desc">Sets the height property on <code class="code">input</code> and min-height property of the <code class="code">input_type_textarea</code> and <code class="code">input_size_sm</code> modifier combination.</td>
       </tr>
       <tr>
@@ -346,8 +346,8 @@ Adds unique styles for various form input types. These form controls share style
         <td data-mobile-label="Desc">Sets the line-height property of the `input_size_sm` modifier.</td>
       </tr>
       <tr>
-        <td data-mobile-label="Var"><code class="code text-nowrap">$size-lg-height</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">3.125rem</code></td>
+        <td data-mobile-label="Var"><code class="code text-nowrap">$size-lg</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size-lg</code></td>
         <td data-mobile-label="Desc">Sets the height property on <code class="code">input</code> and min-height property of the <code class="code">input_type_textarea</code> and <code class="code">input_size_lg</code> modifier combination.</td>
       </tr>
       <tr>

docs/_packages/radio.md

@@ -103,7 +103,7 @@ For radio buttons with labels, just wrap the radio component along with label te
       </tr>
       <tr>
         <td data-mobile-label="Var"><code class="code text-nowrap">$size</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">2.5em</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size</code></td>
         <td data-mobile-label="Desc">Sets the width and height of the <code class="code">radio__background</code> element.</td>
       </tr>
       <tr>

docs/_packages/switch.md

@@ -103,7 +103,7 @@ For switch with labels, just wrap the switch component along with label text usi
       </tr>
       <tr>
         <td data-mobile-label="Var"><code class="code text-nowrap">$size</code></td>
-        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">2.5em</code></td>
+        <td data-mobile-label="Default"><code class="code color-secondary text-nowrap">core.$form-control-size</code></td>
         <td data-mobile-label="Desc">Sets the width and height of the <code class="code">switch__background</code> element.</td>
       </tr>
       <tr>

packages/button/README.md

@@ -164,7 +164,7 @@ Adjust the size of a button by increasing or decreasing its padding and font-siz
 | `$prefix-modifier`            | `"_"`                                          | String to prefix modifiers with.                                                                                                                  |
 | `$prefix-modifier-value`      | `"_"`                                          | String to prefix modifier values with.                                                                                                            |
 | `$breakpoints`                | [`core.$breakpoints` Ref ↓](#breakpoints) | The breakpoints map the `button_block_[key]` modifier uses to build its styles.                                                                   |
-| `$min-size`                   | `2.5rem`                                       | Sets the minimum size of a button using the min-height and min-width properties.                                                                  |
+| `$size`                       | `core.$form-control-size`                      | Sets the minimum size of a button using the min-height and min-width properties.                                                                  |
 | `$padding`                    | `core.$padding` → `0.5em 1em`             | Sets the padding property.                                                                                                                        |
 | `$gap`                        | `0.5em`                                        | The default horizontal gap spacing for elements inside the button component.                                                                      |
 | `$border-width`               | `core.$border-width`                           | Sets the border-width property.                                                                                                                   |
@@ -199,11 +199,11 @@ Adjust the size of a button by increasing or decreasing its padding and font-siz
 | `$loading-border-color`       | `$color`                                       | Sets the border-color property of the loading spinner.                                                                                            |
 | `$loading-border`             | `2px solid`                                    | Sets the border property of the loading spinner.                                                                                                  |
 | `$loading-border-tpl`         | `1 1 0 0`                                      | The template for where to apply the border-color property. Takes boolean `1` and `0` values for top, right, bottom and left borders respectively. |
-| `$size-sm-min-size`           | `1.875rem`                                     | Sets the minimum size of the `button_size_sm` modifier using the min-height and min-width properties.                                             |
+| `$size-sm`                    | `1.875rem`                                     | Sets the minimum size of the `button_size_sm` modifier using the min-height and min-width properties.                                             |
 | `$size-sm-padding`            | `core.$padding-sm` → `0.25rem 0.5rem`     | Sets the padding property of the `button_size_sm` modifier.                                                                                       |
 | `$size-sm-font-size`          | `core.$font-size-sm` → `0.875em`          | Sets the font-size property of the `button_size_sm` modifier.                                                                                     |
 | `$size-sm-line-height`        | `core.$line-height-sm` → `1.375`          | Sets the line-height property of the `button_size_sm` modifier.                                                                                   |
-| `$size-lg-min-size`           | `3.125rem`                                     | Sets the minimum size of the `button_size_lg` modifier using the min-height and min-width properties.                                             |
+| `$size-lg`                    | `3.125rem`                                     | Sets the minimum size of the `button_size_lg` modifier using the min-height and min-width properties.                                             |
 | `$size-lg-padding`            | `core.$padding-lg` → `0.648rem 1.5rem`    | Sets the padding property of the `button_size_lg` modifier.                                                                                       |
 | `$size-lg-font-size`          | `core.$font-size-lg` → `1.125em`          | Sets the font-size property of the `button_size_lg` modifier.                                                                                     |
 | `$size-lg-line-height`        | `core.$line-height-lg` → `1.625`          | Sets the line-height property of the `button_size_lg` modifier.                                                                                   |

packages/button/src/_button.scss

@@ -18,8 +18,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: var.$min-size;
-  min-height: var.$min-size;
+  min-width: var.$size;
+  min-height: var.$size;
   border-width: var.$border-width;
   border-style: var.$border-style;
   border-radius: var.$border-radius;

packages/button/src/_button_size.scss

@@ -7,8 +7,8 @@ $_v: var.$prefix-modifier-value;
 
 .#{$_b}button#{$_m}size#{$_v}sm {
   @include core.calc-padding(var.$size-sm-padding, var.$border-width);
-  min-width: var.$size-sm-min-size;
-  min-height: var.$size-sm-min-size;
+  min-width: var.$size-sm;
+  min-height: var.$size-sm;
   font-size: var.$size-sm-font-size;
   line-height: var.$size-sm-line-height;
 
@@ -19,8 +19,8 @@ $_v: var.$prefix-modifier-value;
 
 .#{$_b}button#{$_m}size#{$_v}lg {
   @include core.calc-padding(var.$size-lg-padding, var.$border-width);
-  min-width: var.$size-lg-min-size;
-  min-height: var.$size-lg-min-size;
+  min-width: var.$size-lg;
+  min-height: var.$size-lg;
   font-size: var.$size-lg-font-size;
   line-height: var.$size-lg-line-height;
 

packages/button/src/_variables.scss

@@ -6,7 +6,7 @@ $prefix-modifier: core.$prefix-modifier !default;
 $prefix-modifier-value: core.$prefix-modifier-value !default;
 
 $breakpoints: core.$breakpoints !default;
-$min-size: 2.5rem !default;
+$size: core.$form-control-size !default;
 $padding: core.$padding !default;
 $gap: 0.5em !default;
 $border-width: core.$border-width !default;
@@ -47,11 +47,11 @@ $loading-border: 2px solid !default;
 $loading-border-tpl: 1 1 0 0;
 
 // button_size_[value]
-$size-sm-min-size: 1.875rem !default;
+$size-sm: core.$form-control-size-sm !default;
 $size-sm-padding: core.$padding-sm !default;
 $size-sm-font-size: core.$font-size-sm !default;
 $size-sm-line-height: core.$line-height-sm !default;
-$size-lg-min-size: 3.125rem !default;
+$size-lg: core.$form-control-size-lg !default;
 $size-lg-padding: core.$padding-lg !default;
 $size-lg-font-size: core.$font-size-lg !default;
 $size-lg-line-height: core.$line-height-lg !default;

packages/checkbox/README.md

@@ -64,7 +64,7 @@ For checkboxes with labels, just wrap the checkbox component along with label te
 | `$prefix-modifier`            | `"_"`                                                   | String to prefix modifiers with.                                                                                              |
 | `$prefix-modifier-value`      | `"_"`                                                   | String to prefix modifier values with.                                                                                        |
 | `$color`                      | `core.$primary`                                         | Sets the base color theme for the checkbox component.                                                                         |
-| `$size`                       | `2.5em`                                                 | Sets the width and height of the `checkbox__background` element.                                                              |
+| `$size`                       | `core.$form-control-size`                               | Sets the width and height of the `checkbox__background` element.                                                              |
 | `$transition-duration`        | `core.$transition-duration-short`                       | Sets the transition-duration property for the `checkbox__icon` element.                                                       |
 | `$transition-timing-function` | `core.$transition-timing-function-sharp`                | Sets the transition-timing-function property for the `checkbox__icon` element.                                                |
 | `$background`                 | `transparent`                                           | Sets the background-color property for the `checkbox__background` element.                                                    |

packages/checkbox/src/_variables.scss

@@ -6,7 +6,7 @@ $prefix-modifier: core.$prefix-modifier !default;
 $prefix-modifier-value: core.$prefix-modifier-value !default;
 
 $color: core.$primary !default;
-$size: 2.5em !default;
+$size: core.$form-control-size !default;
 $transition-duration: core.$transition-duration-short !default;
 $transition-timing-function: core.$transition-timing-function-sharp !default;
 

packages/core/src/css/_variables.scss

@@ -126,6 +126,13 @@ $border-invert-darker: $border-width $border-style $border-color-invert-darker !
 $border-radius: 4px !default;
 $border-radius-circle: 9999px !default;
 
+// Form controls
+// ---
+
+$form-control-size: 2.5rem !default; // 40px
+$form-control-size-sm: 1.875rem !default; // 30px
+$form-control-size-lg: 3.125rem !default; // 50px
+
 // Typography
 // ---