feat: Use CSS variables instead of SASS variables

In preparation for theming with #142

Author: sman591

app/assets/stylesheets/application.sass

@@ -12,6 +12,7 @@
  */
 
 @import general/variables
+@import general/css4
 
 // general styles
 @import general/mixins

app/assets/stylesheets/forms/_confirmation.sass

@@ -5,8 +5,10 @@
   padding: 30px 0
 
   .success_message
-    background: $primary
-    color: $white_pure
+    @include css4
+      background: var(--primary)
+    @include css4
+      color: var(--white-pure)
     margin: 0 auto 25px auto
     padding: 10px 30px
     a

app/assets/stylesheets/forms/_forms.sass

@@ -1,12 +1,13 @@
 $form-spacing-horizontal: 9px
 
 #disclaimer, .alert
-  background: $alert--background
-  color: $alert--text
+  @include css4
+    background: var(--alert--background)
+    color: var(--alert--text)
+    border: 1px solid var(--alert--border)
   margin: 5px auto 55px auto
   padding: 18px 35px
   line-height: 1.4
-  border: 1px solid $alert--border
   border-radius: 3px
   box-shadow: 0 6px 35px rgba(0, 0, 0, .1)
 
@@ -28,22 +29,25 @@ fieldset
     margin-right: -10px
 
   legend
-    background: $black
-    color: $white
+    @include css4
+      background: var(--black)
+      color: var(--white)
     width: 100%
     text-align: center
     padding: 0.5em
 
 hr
   border: none
-  border-top: 1px solid $input--border-color
+  @include css4
+    border-top: 1px solid var(--input--border-color)
   margin: 35px 0 40px
   width: 80px
 
 .alert
-  color: $alert--text--error
-  background: $alert--background--error
-  border-color: $alert--border--error
+  @include css4
+    color: var(--alert--text--error)
+    background: var(--alert--background--error)
+    border-color: var(--alert--border--error)
 
 .form-container, .cancel_btn_wrap
   margin: 0 auto
@@ -58,18 +62,21 @@ hr
     margin-bottom: 30px
 
 .simple_form
-  color: $grey
+  @include css4
+    color: var(--grey)
   .error
-    background: $input--error--background
-    color: $input--error--text
+    @include css4
+      background: var(--input--error--background)
+      color: var(--input--error--text)
     font-size: 0.74rem
     padding: 6px 9px
     flex: 1 1 100%
   abbr
     text-decoration: none
     position: absolute
     margin-left: -16px
-    color: $input--required-star
+    @include css4
+      color: var(--input--required-star)
     align-self: flex-start
 
 .form-inputs
@@ -99,36 +106,41 @@ label
   align-items: center
   width: 100%
   flex-shrink: 0
-  font-weight: $font-light
+  @include css4
+    font-weight: var(--font-light)
   padding-top: 5px
   padding-bottom: 8px
   text-align: left
 
 // all form input types
 input[type=text], input[type=email], input[type=tel], input[type=date], input[type="url"], input[type=password], input[type=file], input[type=checkbox], input[type=radio], textarea, select
-  background: $input--background
-  color: $input--text
-  font-family: $font-body-family
-  font-weight: $font-reg
+  @include css4
+    background: var(--input--background)
+    color: var(--input--text)
+    font-family: var(--font-body-family)
+    font-weight: var(--font-reg)
+    border: 1px solid var(--input--border-color)
   font-size: 100%
-  border: 1px solid $input--border-color
   margin-bottom: 5px
   outline: none
   padding: 9px 14px
   width: 100%
   @include transition(150ms, border-color, ease-out, 0ms)
-  @include placeholder-color($input--text--placeholder)
+  @include css4
+    @include placeholder-color(var(--input--text--placeholder))
   &:focus
-    color: $input--text--focus
-    background-color: $input--background--focus
-    border-color: $input--border-color--focus
+    @include css4
+      color: var(--input--text--focus)
+      background-color: var(--input--background--focus)
+      border-color: var(--input--border-color--focus)
     border-width: 2px
     padding: 8px 13px
 
 // just selects
 select
   @include appearance (none)
-  background: asset-url("arrow_down_hover.svg"), $input--background
+  @include css4
+    background: asset-url("arrow_down_hover.svg"), var(--input--background)
   background-repeat: no-repeat
   background-position: right
   background-size: auto 100%
@@ -162,7 +174,8 @@ input[type=checkbox]
     -moz-osx-font-smoothing: grayscale
     // end .fa
     content: ""
-    color: $primary
+    @include css4
+      color: var(--primary)
     font-size: 25px
     margin-left: 2px
     margin-top: -4px
@@ -196,7 +209,8 @@ input[type=radio]
   &:checked
     &::after
       content: ""
-      background: $primary
+      @include css4
+        background: var(--primary)
       display: block
       width: 100%
       height: 100%
@@ -221,15 +235,18 @@ input[type=submit]
   margin-top: 20px
 
 .field_with_errors
-  color: $red !important
+  @include css4
+    color: var(--red) !important
 
 .hint
-  color: $input--hint
+  @include css4
+    color: var(--input--hint)
   font-style: italic
   width: 100%
 
 .supporting-text
-  color: $input--hint
+  @include css4
+    color: var(--input--hint)
   line-height: 1.5
   margin-left: $form-spacing-horizontal
   margin-right: $form-spacing-horizontal
@@ -238,17 +255,20 @@ input[type=submit]
 
 // jquery ui override
 .ui-autocomplete
-  background: $input--background--focus
-  border: 1px solid $input--border-color--focus
-  color: $input--text--focus
+  @include css4
+    background: var(--input--background--focus)
+    border: 1px solid var(--input--border-color--focus)
+    color: var(--input--text--focus)
   list-style: none
   padding: 0
   .ui-menu-item a
     padding: 2px 5px
     display: block
     &:hover, &.ui-state-focus
-      background: $primary
-      color: $white
+      @include css4
+        background: var(--primary)
+      @include css4
+        color: var(--white)
 
 // form wizard
 .wizard-stage

app/assets/stylesheets/general/_base.sass

@@ -6,41 +6,49 @@ body, html
   min-height: 250px
 
 body
-  background: $white_pure
-  color: $grey-med
-  font-family: $font-body-family
+  @include css4
+    background: var(--white-pure)
+    color: var(--grey-med)
+    font-family: var(--font-body-family)
+    font-weight: var(--font-light)
   font-size: 16px
-  font-weight: $font-light
   margin: 0
   padding: 0
   overflow-x: hidden
 
 h1, h2, h3
-  font-family: $font-headlines-family
+  @include css4
+    font-family: var(--font-headlines-family)
   margin-top: 0
 h1
   font-size: 2.250rem
-  font-weight: $font-light
+  @include css4
+    font-weight: var(--font-light)
 h2
   font-size: 2rem
-  font-weight: $font-bold
+  @include css4
+    font-weight: var(--font-bold)
 h3
   font-size: 1.750rem
-  font-weight: $font-reg
+  @include css4
+    font-weight: var(--font-reg)
   margin-top: 0px
 h4
-  font-weight: $font-light
+  @include css4
+    font-weight: var(--font-light)
 
 img
   max-width: 100%
   width: 100%
 
 a
-  color: $link--text
+  @include css4
+    color: var(--link--text)
   text-decoration: none
   @include transition(100ms, color, ease-out, 0ms)
   &:hover
-    color: $link--text--hover
+    @include css4
+      color: var(--link--text--hover)
 
 a.underline
   text-decoration: underline
@@ -52,14 +60,17 @@ a.underline
   position: relative
 
 .section-title
-  color: $section-title--text
+  @include css4
+    color: var(--section-title--text)
   font-size: 2.1rem
   line-height: 1.2
   text-align: left
   &.white
-    color: $white
+    @include css4
+      color: var(--white)
   .emphasized
-    color: $section-title--text--emphasized
+    @include css4
+      color: var(--section-title--text--emphasized)
 
 .section-title--actions
   display: flex

app/assets/stylesheets/general/_button.sass

@@ -3,21 +3,23 @@
  */
 
 .button, input[type=submit]
-  background: $button--background
-  border: 1px solid $button--border
+  @include css4
+    color: var(--button--text)
+    background: var(--button--background)
+    border: 1px solid var(--button--border)
   cursor: pointer
   display: inline-block
   padding: 0.6em 1.3em
   font-size: 15px
   text-transform: uppercase
-  color: $button--text
   font-weight: 600
   text-align: center
   text-decoration: none
   -webkit-appearance: none
   @include transition(150ms, all, ease-in-out, 0ms)
-  @include box-shadow(0 2px 15px rgba($button--background, 0.3))
   @include border-radius(3px)
+  @include css4
+    @include box-shadow(0 2px 15px rgba(var(--button--background), 0.3))
 
   &.button--with-margin
     margin: 0.5em 0.5em 0.5em 0
@@ -27,27 +29,31 @@
     min-width: initial
     padding: 3px 5px
   &:hover, &:focus
-    background: $button--background--hover
-    border-color: $button--border--hover
-    color: $button--text--hover
-    outline-color: $button--background--hover
+    @include css4
+      background: var(--button--background--hover)
+      border-color: var(--button--border--hover)
+      color: var(--button--text--hover)
+      outline-color: var(--button--background--hover)
   &:disabled
-    color: lighten($secondary, 40%)
+    @include css4
+      color: var(--primary-lightest)
+      border: 1px solid var(--primary-lightest)
+      @include box-shadow(inset 0 0 0 0 var(--primary-light))
     background: transparent
-    border: 1px solid lighten($secondary, 35%)
     cursor: default
-    @include box-shadow(inset 0 0 0 0 lighten($secondary, 5%))
 
 .button-center
   margin-left: auto
   margin-right: auto
 
 .button-outline
   background: transparent
-  border: 1px solid $white_pure
+  @include css4
+    border: 1px solid var(--white-pure)
   &:hover
-    outline-color: lighten($secondary, 5%)
-    border-color: lighten($secondary, 5%)
+    @include css4
+      outline-color: var(--primary-light)
+      border-color: var(--primary-light)
 
 .button-clean
   background: transparent
@@ -72,8 +78,9 @@
 
   &:hover
     transform: scale(1.04)
-    background: $button--background
-    @include box-shadow(0 4px 18px rgba($button--background, 0.35))
+    @include css4
+      background: var(--button--background)
+      @include box-shadow(0 4px 18px rgba(var(--button--background), 0.35))
 
 .my-mlh-cta__text
   flex: 1
@@ -85,7 +92,8 @@
   display: flex
   align-items: center
   flex-flow: row nowrap
-  color: $button--background
+  @include css4
+    color: var(--button--background)
   padding: 0px 9px
   justify-content: center
   border-radius: 0 2px 2px 0