Replace custom color variables with design system tokens

app/assets/stylesheets/application.css.scss

@@ -1,4 +1,3 @@
-@import 'variables/colors';
 @import 'variables/app';
 @import 'required';
 @import 'design-system-waiting-room';

app/assets/stylesheets/components/_card.scss

@@ -1,5 +1,5 @@
 .card {
-  background-color: $white;
+  background-color: color('white');
   max-width: $container-skinny-width;
 
   &-wide {

app/assets/stylesheets/components/_file-input.scss

@@ -74,7 +74,7 @@
 }
 
 .usa-file-input__input:not([disabled]):focus {
-  outline: 3px solid $blue;
+  outline: 3px solid color('primary');
   outline-offset: 6px;
 }
 

app/assets/stylesheets/components/_form.scss

@@ -27,7 +27,7 @@ textarea {
   border-width: $border-width;
   border-color: $border-color;
   border-radius: $border-radius;
-  color: $gray;
+  color: color('ink');
   font-weight: $bold-font-weight;
 
   &[type='number'],
@@ -36,8 +36,8 @@ textarea {
   }
 
   &:focus {
-    border-color: $field-focus-color;
-    box-shadow: 0 0 0 2px rgba($field-focus-color, 0.5);
+    border-color: color('primary');
+    box-shadow: 0 0 0 2px rgba(color('primary'), 0.5);
     outline: none;
   }
 

app/assets/stylesheets/components/_i18n-dropdown.scss

@@ -16,7 +16,7 @@
 }
 
 .i18n-mobile-dropdown {
-  background-color: $blue-light;
+  background-color: color('primary-lighter');
   bottom: 100%;
   left: 0;
   position: absolute;
@@ -27,7 +27,7 @@
   position: relative;
 
   &.focused {
-    background-color: $blue;
+    background-color: color('primary');
     border-radius: 0;
     margin-bottom: 0;
     margin-top: 0;
@@ -46,6 +46,6 @@
 }
 
 .language-mobile-button {
-  background-color: $blue-light;
+  background-color: color('primary-lighter');
   border: 0;
 }

app/assets/stylesheets/components/_list.scss

@@ -1,22 +1,3 @@
-@mixin color-list($color: $yellow) {
-  list-style: none;
-  padding: 0;
-
-  li {
-    padding-left: 1rem;
-    text-indent: -1rem;
-
-    &::before {
-      color: $color;
-      content: '•';
-      font-size: 2rem;
-      line-height: 1.5rem;
-      padding-right: 0.5rem;
-      vertical-align: -3px;
-    }
-  }
-}
-
 .success-bullets {
   .success-bullet {
     padding: 1rem 1rem 1rem 0;
@@ -35,15 +16,3 @@
     }
   }
 }
-
-.red-dots {
-  @include color-list($red);
-}
-
-.teal-dots {
-  @include color-list($teal);
-}
-
-.yellow-dots {
-  @include color-list($yellow);
-}

app/assets/stylesheets/components/_modal.scss

@@ -74,7 +74,7 @@
   }
 
   hr {
-    border-color: $teal;
+    border-color: color('info');
   }
 }
 
@@ -84,7 +84,7 @@
   }
 
   hr {
-    border-color: $yellow;
+    border-color: color('warning');
   }
 }
 

app/assets/stylesheets/email.css.scss

@@ -1,4 +1,3 @@
-@import 'variables/colors';
 @import 'variables/email';
 @import 'foundation-emails/scss/foundation-emails';
 

app/assets/stylesheets/variables/_app.scss

@@ -25,8 +25,6 @@ $border-radius-xl: 16px !default;
 $border-radius-xxl: 24px !default;
 $border-color: #cedced !default;
 
-$field-focus-color: $blue !default;
-
 $container-skinny-width: 620px !default;
 $container-xskinny-width: 416px !default;
 $container-xxskinny-width: 296px !default;

app/assets/stylesheets/variables/_email.scss

@@ -15,14 +15,20 @@
 // 1. Global
 // ---------
 
-$primary-color: $blue;
-$secondary-color: $navy;
+$primary-color: #0071bb;
+$secondary-color: #112e51;
 $success-color: #3adb76;
 $warning-color: #ffae00;
 $alert-color: #ec5840;
 $light-gray: #f3f3f3;
+$black: #111111;
+$white: #ffffff;
+$gray: #5b616a;
 $medium-gray: #cacaca;
 $dark-gray: #212121;
+$blue-light: #ebf3fa;
+$red: #e21c3d;
+$red-lightest: #fff7f8;
 $pre-color: #ff6908;
 $global-width: 580px;
 $global-width-small: 95%;

app/components/status_page_component.rb

@@ -1,7 +1,8 @@
 class StatusPageComponent < BaseComponent
   ICONS = {
-    warning: [],
-    error: [:lock],
+    info: [:question],
+    warning: [nil],
+    error: [nil, :lock],
   }.freeze
 
   renders_one :header, ::PageHeadingComponent
@@ -17,7 +18,7 @@ def initialize(status: :error, icon: nil)
       raise ArgumentError, "`status` #{status} is invalid, expected one of #{ICONS.keys}"
     end
 
-    if icon && !ICONS[status].include?(icon)
+    if !ICONS[status].include?(icon)
       raise ArgumentError, "`icon` #{icon} is invalid, expected one of #{ICONS[status]}"
     end
 
@@ -31,6 +32,7 @@ def icon_src
 
   def icon_alt
     # i18n-tasks-use t('components.status_page.icons.error')
+    # i18n-tasks-use t('components.status_page.icons.question')
     # i18n-tasks-use t('components.status_page.icons.warning')
     # i18n-tasks-use t('components.status_page.icons.lock')
     t(icon || status, scope: [:components, :status_page, :icons])

app/views/idv/cancellations/destroy.html.erb

@@ -9,7 +9,7 @@
         <p><%= t('doc_auth.instructions.switch_back') %></p>
         <%= image_tag(asset_url('idv/switch.png'), width: 193) %>
       <% else %>
-        <ul class="red-dots margin-bottom-2">
+        <ul class="usa-list">
           <li><%= t('idv.cancel.warnings.warning_2') %></li>
           <li><%= t('idv.cancel.warnings.warning_3', app_name: APP_NAME) %></li>
           <li><%= t('idv.cancel.warnings.warning_4', app_name: APP_NAME) %></li>

app/views/idv/cancellations/new.html.erb

@@ -22,7 +22,7 @@
         <p><%= t('idv.cancel.warnings.hybrid') %></p>
       <% else %>
         <p class="margin-bottom-1 text-bold"><%= t('sign_up.cancel.warning_header') %></p>
-        <ul class="yellow-dots">
+        <ul class="usa-list">
           <li><%= t('idv.cancel.warnings.warning_1') %></li>
           <li><%= t('idv.cancel.warnings.warning_2') %></li>
           <li><%= t('idv.cancel.warnings.warning_3', app_name: APP_NAME) %></li>

app/views/idv/forgot_password/new.html.erb

@@ -1,21 +1,24 @@
 <% title t('titles.idv.reset_password') %>
 
-<%= image_tag(asset_url('alert/forgot.svg'), width: 54, class: 'margin-bottom-2') %>
+<%= render StatusPageComponent.new(status: :info, icon: :question) do |c| %>
+  <% c.header { t('idv.forgot_password.modal_header') } %>
 
-<%= render PageHeadingComponent.new.with_content(t('idv.forgot_password.modal_header')) %>
+  <ul class="usa-list">
+    <% t('idv.forgot_password.warnings').each do |warning| %>
+      <li><%= warning %></li>
+    <% end %>
+  </ul>
 
-<hr>
+  <% c.action_button(
+       action: ->(**tag_options, &block) do
+         link_to(idv_review_path, **tag_options, &block)
+       end,
+     ) { t('idv.forgot_password.try_again') } %>
 
-<ul class="usa-list--unstyled teal-dots">
-  <li><%= t('idv.forgot_password.warnings.warning_1') %></li>
-  <li><%= t('idv.forgot_password.warnings.warning_2') %></li>
-</ul>
-
-<div class='margin-top-4'>
-  <%= link_to t('idv.forgot_password.try_again'), idv_review_path,
-              class: 'usa-button usa-button--big usa-button--wide' %>
-</div>
-<div class='margin-top-2'>
-  <%= button_to t('idv.forgot_password.reset_password'), idv_forgot_password_path,
-                method: :post, class: 'usa-button usa-button--big usa-button--wide usa-button--outline' %>
-</div>
+  <% c.action_button(
+       action: ->(**tag_options, &block) do
+         button_to(idv_forgot_password_path, method: :post, **tag_options, &block)
+       end,
+       outline: true,
+     ) { t('idv.forgot_password.reset_password') } %>
+<% end %>

config/locales/components/en.yml

@@ -7,6 +7,7 @@ en:
       icons:
         error: Error
         lock: Lock
+        question: Question
         warning: Warning
     troubleshooting_options:
       default_heading: 'Having trouble? Here’s what you can do:'

config/locales/components/es.yml

@@ -7,6 +7,7 @@ es:
       icons:
         error: Error
         lock: Candado
+        question: Pregunta
         warning: Advertencia
     troubleshooting_options:
       default_heading: '¿Tiene alguna dificultad? Esto es lo que puede hacer:'

config/locales/components/fr.yml

@@ -7,6 +7,7 @@ fr:
       icons:
         error: Erreur
         lock: Serrure
+        question: Question
         warning: Avertissement
     troubleshooting_options:
       default_heading: 'Des difficultés? Voici ce que vous pouvez faire:'

config/locales/idv/en.yml

@@ -69,9 +69,9 @@ en:
       reset_password: Reset password
       try_again: Try again
       warnings:
-        warning_1: If you forgot your password, you’ll need to reset it and fill out the
+        - If you forgot your password, you’ll need to reset it and fill out the
           form again.
-        warning_2: You’ll have to re-enter your personal information, like your name,
+        - You’ll have to re-enter your personal information, like your name,
           state-issued ID, etc.
     form:
       address1: Address

config/locales/idv/es.yml

@@ -76,8 +76,8 @@ es:
       reset_password: Restablecer la contraseña
       try_again: Inténtalo de nuevo
       warnings:
-        warning_1: Si olvidó su contraseña, deberá restablecerla y completarla nuevamente.
-        warning_2: Tendrá que volver a ingresar su información personal, como su nombre,
+        - Si olvidó su contraseña, deberá restablecerla y completarla nuevamente.
+        - Tendrá que volver a ingresar su información personal, como su nombre,
           documento de identidad emitido por el estado, etc.
     form:
       address1: Dirección

config/locales/idv/fr.yml

@@ -79,9 +79,9 @@ fr:
       reset_password: Réinitialiser le mot de passe
       try_again: Réessayer
       warnings:
-        warning_1: Si vous avez oublié votre mot de passe, vous devrez le réinitialiser
+        - Si vous avez oublié votre mot de passe, vous devrez le réinitialiser
           et remplir à nouveau le formulaire.
-        warning_2: Vous devrez ressaisir vos informations personnelles, comme votre nom,
+        - Vous devrez ressaisir vos informations personnelles, comme votre nom,
           pièce d’identité officielle, etc.
     form:
       address1: Adresse

spec/components/status_page_component_spec.rb

@@ -66,4 +66,10 @@
       render_inline StatusPageComponent.new(status: :warning, icon: :foo)
     end.to raise_error(ArgumentError)
   end
+
+  it 'raises error if no default icon associated with status' do
+    expect do
+      render_inline StatusPageComponent.new(status: :info)
+    end.to raise_error(ArgumentError)
+  end
 end

spec/i18n_spec.rb

@@ -16,8 +16,9 @@ class BaseTask
       ALLOWED_UNTRANSLATED_KEYS = [
         { key: 'account.navigation.menu', locales: %i[fr] }, # "Menu" is "Menu" in French
         { key: 'doc_auth.headings.photo', locales: %i[fr] }, # "Photo" is "Photo" in French
-        { key: 'errors.alt.error', locales: %i[es] }, # "Error" is "Error" in Spanish
         { key: 'components.status_page.icons.error', locales: %i[es] }, # "Error" is "Error" in Spanish
+        { key: 'components.status_page.icons.question', locales: %i[fr] }, # "Question" is "Question" in French
+        { key: 'errors.alt.error', locales: %i[es] }, # "Error" is "Error" in Spanish
         { key: /^i18n\.locale\./ }, # Show locale options translated as that language
         { key: /^countries/ }, # Some countries have the same name across languages
         { key: 'links.contact', locales: %i[fr] }, # "Contact" is "Contact" in French