1 files changed, 34 insertions, 34 deletions

diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index 20d28acb6..d66359943 100644
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -16,7 +16,7 @@ code {
 
   span.hint {
     display: block;
-    color: $color3;
+    color: $ui-primary-color;
     font-size: 12px;
     margin-top: 4px;
   }
@@ -51,7 +51,7 @@ code {
     label {
       font-family: inherit;
       font-size: 16px;
-      color: $color5;
+      color: $primary-text-color;
       display: block;
       padding-top: 5px;
     }
@@ -65,7 +65,7 @@ code {
     margin-bottom: 5px;
     font-family: inherit;
     font-size: 14px;
-    color: $color5;
+    color: $primary-text-color;
     display: block;
     width: auto;
   }
@@ -76,7 +76,7 @@ code {
     label {
       font-family: inherit;
       font-size: 14px;
-      color: $color5;
+      color: $primary-text-color;
       display: block;
       width: auto;
     }
@@ -108,11 +108,11 @@ code {
     background: transparent;
     box-sizing: border-box;
     border: 0;
-    border-bottom: 2px solid $color3;
+    border-bottom: 2px solid $ui-primary-color;
     border-radius: 2px 2px 0 0;
     padding: 7px 4px;
     font-size: 16px;
-    color: $color5;
+    color: $primary-text-color;
     display: block;
     width: 100%;
     outline: 0;
@@ -124,35 +124,35 @@ code {
     }
 
     &:focus:invalid {
-      border-bottom-color: $color6;
+      border-bottom-color: $error-value-color;
     }
 
     &:required:valid {
-      border-bottom-color: $color7;
+      border-bottom-color: $valid-value-color;
     }
 
     &:active,
     &:focus {
-      border-bottom-color: $color4;
-      background: rgba($color8, 0.1);
+      border-bottom-color: $ui-highlight-color;
+      background: rgba($base-overlay-background, 0.1);
     }
   }
 
   .input.field_with_errors {
     label {
-      color: $color6;
+      color: $error-value-color;
     }
 
     input[type=text],
     input[type=email],
     input[type=password] {
-      border-bottom-color: $color6;
+      border-bottom-color: $error-value-color;
     }
 
     .error {
       display: block;
       font-weight: 500;
-      color: $color6;
+      color: $error-value-color;
       margin-top: 4px;
     }
   }
@@ -167,8 +167,8 @@ code {
     width: 100%;
     border: 0;
     border-radius: 4px;
-    background: $color4;
-    color: $color5;
+    background: $ui-highlight-color;
+    color: $primary-text-color;
     font-size: 18px;
     padding: 10px;
     text-transform: uppercase;
@@ -181,26 +181,26 @@ code {
     margin-bottom: 10px;
 
     &:hover {
-      background-color: lighten($color4, 5%);
+      background-color: lighten($ui-highlight-color, 5%);
     }
 
     &:active,
     &:focus {
       position: relative;
       top: 1px;
-      background-color: darken($color4, 5%);
+      background-color: darken($ui-highlight-color, 5%);
     }
 
     &.negative {
-      background: $color6;
+      background: $error-value-color;
 
       &:hover {
-        background-color: lighten($color6, 5%);
+        background-color: lighten($error-value-color, 5%);
       }
 
       &:active,
       &:focus {
-        background-color: darken($color6, 5%);
+        background-color: darken($error-value-color, 5%);
       }
     }
   }
@@ -211,12 +211,12 @@ code {
 }
 
 .flash-message {
-  background: $color1;
-  color: $color3;
+  background: $ui-base-color;
+  color: $ui-primary-color;
   border-radius: 4px;
   padding: 15px 10px;
   margin-bottom: 30px;
-  box-shadow: 0 0 5px rgba($color8, 0.2);
+  box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
   text-align: center;
 
   strong {
@@ -229,7 +229,7 @@ code {
   text-align: center;
 
   a {
-    color: $color5;
+    color: $primary-text-color;
     text-decoration: none;
 
     &:hover {
@@ -242,7 +242,7 @@ code {
 .follow-prompt {
   margin-bottom: 30px;
   text-align: center;
-  color: $color3;
+  color: $ui-primary-color;
 
   h2 {
     font-size: 16px;
@@ -250,7 +250,7 @@ code {
   }
 
   strong {
-    color: $color2;
+    color: $ui-secondary-color;
     font-weight: 500;
   }
 }
@@ -261,10 +261,10 @@ code {
 
 .qr-code {
   flex: 0 0 auto;
-  background: $color5;
+  background: $simple-background-color;
   padding: 4px;
   margin-bottom: 20px;
-  box-shadow: 0 0 15px rgba($color8, 0.2);
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   display: inline-block;
 
   svg {
@@ -275,7 +275,7 @@ code {
 
 .qr-alternative {
   margin-left: 10px;
-  color: $color3;
+  color: $ui-primary-color;
 
   samp {
     display: block;
@@ -296,16 +296,16 @@ code {
   .warning {
     max-width: 400px;
     box-sizing: border-box;
-    background: rgba($color6, 0.5);
-    color: $color5;
-    text-shadow: 1px 1px 0 rgba($color8, 0.3);
-    box-shadow: 0 2px 6px rgba($color8, 0.4);
+    background: rgba($error-value-color, 0.5);
+    color: $primary-text-color;
+    text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
+    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
     border-radius: 4px;
     padding: 10px;
     margin-bottom: 15px;
 
     a {
-      color: $color5;
+      color: $primary-text-color;
       text-decoration: underline;
 
       &:hover,