From 07d1e1ff9287f8baad75b8fd54405e5d39bcee71 Mon Sep 17 00:00:00 2001
From: "Dan O. Williams" <thisisdano@users.noreply.github.com>
Date: Fri, 1 Feb 2019 11:49:31 -0800
Subject: [PATCH 1/2] Expose custom component vars in component settings

---
 src/stylesheets/components/_accordions.scss   |  2 +-
 src/stylesheets/components/_alerts.scss       | 25 ++++++-------
 src/stylesheets/elements/_buttons.scss        |  2 +-
 src/stylesheets/elements/_inputs.scss         | 35 +++++++++----------
 .../settings/_settings-components.scss        |  9 +++++
 .../theme/_uswds-theme-components.scss        |  9 +++++
 6 files changed, 47 insertions(+), 35 deletions(-)

diff --git a/src/stylesheets/components/_accordions.scss b/src/stylesheets/components/_accordions.scss
index 2771908a67..ef441574ea 100644
--- a/src/stylesheets/components/_accordions.scss
+++ b/src/stylesheets/components/_accordions.scss
@@ -1,6 +1,6 @@
 // Variables
 
-$accordion-border: units(0.5) solid color('base-lightest');
+$accordion-border: units($theme-accordion-border-width) solid color($theme-accordion-border-color);
 
 // Accordion Styles
 
diff --git a/src/stylesheets/components/_alerts.scss b/src/stylesheets/components/_alerts.scss
index 3e1ba2cac2..89db91ae0b 100644
--- a/src/stylesheets/components/_alerts.scss
+++ b/src/stylesheets/components/_alerts.scss
@@ -21,23 +21,20 @@ $usa-alerts-bar: (
 $alerts: map-merge($usa-alerts, $usa-custom-alerts);
 $alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
 
-$h-padding: units(2.5);
-$bar-size: units(1);
-$left-padding: $h-padding + $bar-size;
-$icon-size: units(4);
+$left-padding: $theme-alert-padding-x + $theme-alert-bar-width;
 
 .usa-alert {
   @include typeset($theme-alert-font-family);
   @include border-box-sizing;
 
   background-color: color('base-lightest');
-  background-position: $h-padding $h-padding;
+  background-position: $theme-alert-padding-x $theme-alert-padding-x;
   background-repeat: no-repeat;
   background-size: units(7);
   padding-bottom: units(2);
   padding-left: $left-padding;
-  padding-right: $h-padding;
-  padding-top: $h-padding;
+  padding-right: $theme-alert-padding-x;
+  padding-top: $theme-alert-padding-x;
   position: relative;
 
   * + & {
@@ -52,7 +49,7 @@ $icon-size: units(4);
     left: 0;
     position: absolute;
     top: 0;
-    width: $bar-size;
+    width: $theme-alert-bar-width;
   }
 
   a {
@@ -76,9 +73,9 @@ $icon-size: units(4);
 }
 
 .usa-alert-slim {
-  background-position: $h-padding center;
-  padding-bottom: $bar-size;
-  padding-top: $bar-size;
+  background-position: $theme-alert-padding-x center;
+  padding-bottom: $theme-alert-bar-width;
+  padding-top: $theme-alert-bar-width;
 
   .usa-alert-text:only-child {
     margin-bottom: units(0.5);
@@ -88,7 +85,7 @@ $icon-size: units(4);
 
 .usa-alert-icon {
   display: table-cell;
-  padding-right: $bar-size;
+  padding-right: $theme-alert-bar-width;
 }
 
 .usa-alert-body {
@@ -107,7 +104,7 @@ $icon-size: units(4);
 }
 
 .usa-alert-text:only-child {
-  margin-bottom: $bar-size;
+  margin-bottom: $theme-alert-bar-width;
   padding-top: units(0.5);
 }
 
@@ -121,7 +118,7 @@ $icon-size: units(4);
     }
 
     .usa-alert-body {
-      padding-left: $icon-size + $h-padding;
+      padding-left: $theme-alert-icon-size + $theme-alert-padding-x;
     }
   }
 }
diff --git a/src/stylesheets/elements/_buttons.scss b/src/stylesheets/elements/_buttons.scss
index cbae489376..b10bdebaa3 100644
--- a/src/stylesheets/elements/_buttons.scss
+++ b/src/stylesheets/elements/_buttons.scss
@@ -1,6 +1,6 @@
 // Buttons variables
 
-$button-stroke: inset 0 0 0 units(2px);
+$button-stroke: inset 0 0 0 units($theme-button-stroke-width);
 
 // Buttons
 
diff --git a/src/stylesheets/elements/_inputs.scss b/src/stylesheets/elements/_inputs.scss
index 9db1d04897..ee0ad9d187 100644
--- a/src/stylesheets/elements/_inputs.scss
+++ b/src/stylesheets/elements/_inputs.scss
@@ -1,9 +1,6 @@
 // Helpers
 
-$box-input-size: 2.5;
-$box-input-border-width: 2px;
-$box-input-margin-right: 1.5;
-$input-state-border-width: 0.5;
+$input-select-margin-right: 1.5;
 
 @mixin range-focus {
   background-color: color('white');
@@ -20,10 +17,10 @@ $input-state-border-width: 0.5;
 }
 
 @mixin range-thumb {
-  @include u-circle($box-input-size);
+  @include u-circle($theme-input-select-size);
   background: color('base-lightest');
   border: none;
-  box-shadow: 0 0 0 units($box-input-border-width) color('base');
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color('base');
   cursor: pointer;
 }
 
@@ -64,7 +61,7 @@ $input-state-border-width: 0.5;
   width: 100%;
 
   &.usa-input-success {
-    @include u-border($input-state-border-width, 'success');
+    @include u-border($theme-input-state-border-width, 'success');
   }
 }
 
@@ -86,7 +83,7 @@ $input-state-border-width: 0.5;
 }
 
 .usa-input-error {
-  @include u-border($input-state-border-width, 'error-dark');
+  @include u-border($theme-input-state-border-width, 'error-dark');
 }
 
 .usa-input-error-label {
@@ -190,9 +187,9 @@ $input-state-border-width: 0.5;
   display: inherit;
   font-weight: font-weight('normal');
   margin-bottom: units(1.5);
-  padding-left: units($box-input-margin-right + $box-input-size);
+  padding-left: units($input-select-margin-right + $theme-input-select-size);
   position: relative;
-  text-indent: units(-$box-input-margin-right - $box-input-size);
+  text-indent: units(-$input-select-margin-right - $theme-input-select-size);
 }
 
 .usa-checkbox-label::before,
@@ -200,35 +197,35 @@ $input-state-border-width: 0.5;
   background: color('white');
   content: '\a0';
   display: inline-block;
-  left: units($box-input-border-width);
+  left: units($theme-input-select-border-width);
   position: relative;
   vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
 }
 
 .usa-checkbox-label::before {
-  @include u-square($box-input-size);
+  @include u-square($theme-input-select-size);
   border-radius: radius($theme-checkbox-border-radius);
 }
 
 .usa-radio-label::before {
-  @include u-circle($box-input-size);
+  @include u-circle($theme-input-select-size);
 }
 
 .usa-checkbox-label::before,
 .usa-radio-label::before {
-  box-shadow: 0 0 0 units($box-input-border-width) color('base');
-  line-height: units($box-input-size);
-  margin-right: units($box-input-margin-right);
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color('base');
+  line-height: units($theme-input-select-size);
+  margin-right: units($input-select-margin-right);
 }
 
 .usa-checkbox-input:checked + .usa-checkbox-label::before,
 .usa-radio-input:checked + .usa-radio-label::before {
   background-color: color('primary');
-  box-shadow: 0 0 0 units($box-input-border-width) color('primary');
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color('primary');
 }
 
 .usa-radio-input:checked + .usa-radio-label::before {
-  box-shadow: 0 0 0 units($box-input-border-width) color('primary'), inset 0 0 0 units($box-input-border-width) color('white');
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color('primary'), inset 0 0 0 units($theme-input-select-border-width) color('white');
 }
 
 .usa-checkbox-input:checked + .usa-checkbox-label::before,
@@ -260,7 +257,7 @@ $input-state-border-width: 0.5;
 .usa-checkbox-input:disabled + .usa-checkbox-label::before,
 .usa-radio-input:disabled + .usa-radio-label::before {
   background: color('disabled-light');
-  box-shadow: 0 0 0 units($box-input-border-width) color('disabled');
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color('disabled');
   cursor: not-allowed;
 }
 
diff --git a/src/stylesheets/settings/_settings-components.scss b/src/stylesheets/settings/_settings-components.scss
index 526a1c3eb7..472cae59d4 100644
--- a/src/stylesheets/settings/_settings-components.scss
+++ b/src/stylesheets/settings/_settings-components.scss
@@ -18,11 +18,16 @@ https://v2.designsystem.digital.gov/style-tokens
 */
 
 // Accordion
+$theme-accordion-border-width:        0.5 !default;
+$theme-accordion-border-color:        'base-lightest' !default;
 $theme-accordion-font-family:         'body' !default;
 
 // Alert
+$theme-alert-bar-width:               1 !default;
 $theme-alert-font-family:             'ui' !default;
+$theme-alert-icon-size:               4 !default;
 $theme-alert-measure:                 3 !default;
+$theme-alert-padding-x:               2.5 !default;
 
 // Banner
 $theme-banner-font-family:            'ui' !default;
@@ -31,6 +36,7 @@ $theme-banner-font-family:            'ui' !default;
 $theme-button-font-family:            'ui' !default;
 $theme-button-border-radius:          'md' !default;
 $theme-button-small-width:            6 !default;
+$theme-button-stroke-width:           2px !default;
 
 // Footer
 $theme-footer-font-family:            'body' !default;
@@ -40,6 +46,9 @@ $theme-checkbox-border-radius:        'sm' !default;
 $theme-form-font-family:              'ui' !default;
 $theme-input-line-height:             3 !default;
 $theme-input-max-width:               'mobile-lg' !default;
+$theme-input-select-border-width:     2px !default;
+$theme-input-select-size:             2.5 !default;
+$theme-input-state-border-width:      0.5 !default;
 
 // Header
 $theme-header-font-family:            'ui' !default;
diff --git a/src/stylesheets/theme/_uswds-theme-components.scss b/src/stylesheets/theme/_uswds-theme-components.scss
index eea618dc75..39f39cf003 100644
--- a/src/stylesheets/theme/_uswds-theme-components.scss
+++ b/src/stylesheets/theme/_uswds-theme-components.scss
@@ -18,11 +18,16 @@ https://v2.designsystem.digital.gov/style-tokens
 */
 
 // Accordion
+$theme-accordion-border-width:        0.5;
+$theme-accordion-border-color:        'base-lightest';
 $theme-accordion-font-family:         'body';
 
 // Alert
+$theme-alert-bar-width:               1;
 $theme-alert-font-family:             'ui';
+$theme-alert-icon-size:               4;
 $theme-alert-measure:                 3;
+$theme-alert-padding-x:               2.5;
 
 // Banner
 $theme-banner-font-family:            'ui';
@@ -31,6 +36,7 @@ $theme-banner-font-family:            'ui';
 $theme-button-font-family:            'ui';
 $theme-button-border-radius:          'md';
 $theme-button-small-width:            6;
+$theme-button-stroke-width:           2px;
 
 // Footer
 $theme-footer-font-family:            'body';
@@ -40,6 +46,9 @@ $theme-checkbox-border-radius:        'sm';
 $theme-form-font-family:              'ui';
 $theme-input-line-height:             3;
 $theme-input-max-width:               'mobile-lg';
+$theme-input-select-border-width:     2px;
+$theme-input-select-size:             2.5;
+$theme-input-state-border-width:      0.5;
 
 // Header
 $theme-header-font-family:            'ui';

From 15bff38009dc3e4ff6cbb7ff55754d8bb0faf451 Mon Sep 17 00:00:00 2001
From: "Dan O. Williams" <thisisdano@users.noreply.github.com>
Date: Fri, 1 Feb 2019 11:58:17 -0800
Subject: [PATCH 2/2] Use proper units() formate for alerts vars

---
 src/stylesheets/components/_alerts.scss | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/stylesheets/components/_alerts.scss b/src/stylesheets/components/_alerts.scss
index 89db91ae0b..e62cd79f31 100644
--- a/src/stylesheets/components/_alerts.scss
+++ b/src/stylesheets/components/_alerts.scss
@@ -20,21 +20,20 @@ $usa-alerts-bar: (
 
 $alerts: map-merge($usa-alerts, $usa-custom-alerts);
 $alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);
-
-$left-padding: $theme-alert-padding-x + $theme-alert-bar-width;
+$padding-left: units($theme-alert-padding-x) + units($theme-alert-bar-width);
 
 .usa-alert {
   @include typeset($theme-alert-font-family);
   @include border-box-sizing;
 
   background-color: color('base-lightest');
-  background-position: $theme-alert-padding-x $theme-alert-padding-x;
+  background-position: units($theme-alert-padding-x) units($theme-alert-padding-x);
   background-repeat: no-repeat;
   background-size: units(7);
   padding-bottom: units(2);
-  padding-left: $left-padding;
-  padding-right: $theme-alert-padding-x;
-  padding-top: $theme-alert-padding-x;
+  padding-left: $padding-left;
+  padding-right: units($theme-alert-padding-x);
+  padding-top: units($theme-alert-padding-x);
   position: relative;
 
   * + & {
@@ -49,7 +48,7 @@ $left-padding: $theme-alert-padding-x + $theme-alert-bar-width;
     left: 0;
     position: absolute;
     top: 0;
-    width: $theme-alert-bar-width;
+    width: units($theme-alert-bar-width);
   }
 
   a {
@@ -73,9 +72,9 @@ $left-padding: $theme-alert-padding-x + $theme-alert-bar-width;
 }
 
 .usa-alert-slim {
-  background-position: $theme-alert-padding-x center;
-  padding-bottom: $theme-alert-bar-width;
-  padding-top: $theme-alert-bar-width;
+  background-position: units($theme-alert-padding-x) center;
+  padding-bottom: units($theme-alert-bar-width);
+  padding-top: units($theme-alert-bar-width);
 
   .usa-alert-text:only-child {
     margin-bottom: units(0.5);
@@ -85,7 +84,7 @@ $left-padding: $theme-alert-padding-x + $theme-alert-bar-width;
 
 .usa-alert-icon {
   display: table-cell;
-  padding-right: $theme-alert-bar-width;
+  padding-right: units($theme-alert-bar-width);
 }
 
 .usa-alert-body {
@@ -104,7 +103,7 @@ $left-padding: $theme-alert-padding-x + $theme-alert-bar-width;
 }
 
 .usa-alert-text:only-child {
-  margin-bottom: $theme-alert-bar-width;
+  margin-bottom: units($theme-alert-bar-width);
   padding-top: units(0.5);
 }
 
@@ -118,7 +117,7 @@ $left-padding: $theme-alert-padding-x + $theme-alert-bar-width;
     }
 
     .usa-alert-body {
-      padding-left: $theme-alert-icon-size + $theme-alert-padding-x;
+      padding-left: units($theme-alert-icon-size) + units($theme-alert-padding-x);
     }
   }
 }