From 6acedb5d1ae8f53128137f501428ceba78b3c23a Mon Sep 17 00:00:00 2001
From: Laurie Reynolds <lauriesreynolds@gmail.com>
Date: Fri, 22 Nov 2024 19:38:46 -0800
Subject: [PATCH] fix(arpa reporter): update colors to fix color contrast

---
 .../components/PageNavigation.vue             |  10 +-
 .../scss/colors-base-tokens.scss              |  77 +++++++++++
 .../scss/colors-semantic-tokens.scss          |  75 +++++++++++
 .../client/src/arpa_reporter/scss/fonts.scss  |  61 +++++++++
 .../client/src/arpa_reporter/scss/index.scss  | 127 ++++++++++++++++--
 .../src/arpa_reporter/views/HomeView.vue      |   6 +-
 6 files changed, 335 insertions(+), 21 deletions(-)
 create mode 100644 packages/client/src/arpa_reporter/scss/colors-base-tokens.scss
 create mode 100644 packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss
 create mode 100644 packages/client/src/arpa_reporter/scss/fonts.scss

diff --git a/packages/client/src/arpa_reporter/components/PageNavigation.vue b/packages/client/src/arpa_reporter/components/PageNavigation.vue
index 9183ea91c..7dbbc2ef2 100644
--- a/packages/client/src/arpa_reporter/components/PageNavigation.vue
+++ b/packages/client/src/arpa_reporter/components/PageNavigation.vue
@@ -14,7 +14,7 @@
 
       <span
         v-if="viewPeriod"
-        class="navbar-text"
+        class="usdr-navbar-text"
       >Reporting Period Ending:</span>
 
       <div
@@ -54,7 +54,7 @@
           </li>
         </ul>
 
-        <span class="navbar-text">{{ email }}</span>
+        <span class="usdr-navbar-text">{{ email }}</span>
 
         <ul class="navbar-nav">
           <li
@@ -63,7 +63,7 @@
           >
             <a
               href="#"
-              class="nav-link"
+              class="usdr-nav-link"
               @click="logout"
             >Logout</a>
           </li>
@@ -222,9 +222,9 @@ export default {
     },
     navLinkClass(to) {
       if (this.$route.path === to) {
-        return 'nav-link active';
+        return 'nav-link usdr-tab-nav-link active';
       }
-      return 'nav-link';
+      return 'nav-link usdr-tab-nav-link';
     },
     dateFormat(d) {
       return moment(d)
diff --git a/packages/client/src/arpa_reporter/scss/colors-base-tokens.scss b/packages/client/src/arpa_reporter/scss/colors-base-tokens.scss
new file mode 100644
index 000000000..8c9b09fdd
--- /dev/null
+++ b/packages/client/src/arpa_reporter/scss/colors-base-tokens.scss
@@ -0,0 +1,77 @@
+/**
+ * colors-base-tokens.scss
+ * 
+ * Color base token definition file, based on USDR style guide.
+ *
+ * Please refer to USDR style guide definition in Figma:
+ *   https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1
+ */
+
+// USDR BRAND
+$usdr-brand-primary: #305CE0;
+$usdr-brand-secondary: #071A51;
+
+// BLUE
+$raw-blue-50: #EAF5FE;
+$raw-blue-100: #D8ECFE;
+$raw-blue-200: #B3DAFF;
+$raw-blue-300: #8EC5FF;
+$raw-blue-400: #61A6FF;
+$raw-blue-500: #3D80FB;
+$raw-blue-600: #305CE0;
+$raw-blue-700: #2348C2;
+$raw-blue-800: #0D2F81;
+$raw-blue-900: #0D2F81;
+
+// GRAY
+$raw-gray-50: #F4F7F9;
+$raw-gray-100: #ECF0F3;
+$raw-gray-200: #DAE0E5;
+$raw-gray-300: #B1B8BE;
+$raw-gray-400: #879097;
+$raw-gray-500: #6D7278;
+$raw-gray-600: #43464A;
+$raw-gray-700: #1F2123;
+$raw-gray-800: #121212;
+$raw-gray-900: #0A0A0A;
+$raw-black-alpha-600: rgba(0, 0, 0, 48);
+
+// GREEN
+$raw-green-50: #DAFCE4;
+$raw-green-100: #C5F6D4;
+$raw-green-200: #9FE6B7;
+$raw-green-300: #77D498;
+$raw-green-400: #43B874;
+$raw-green-500: #20975A;
+$raw-green-600: #107747;
+$raw-green-700: #15603F;
+$raw-green-800: #173D2B;
+$raw-green-900: #142B20;
+
+// YELLOW
+$raw-yellow-50: #FEF5CD;
+$raw-yellow-100: #FBEBA7;
+$raw-yellow-200: #F2D564;
+$raw-yellow-300: #E2BE3C;
+$raw-yellow-400: #C69F20;
+$raw-yellow-500: #A67F12;
+$raw-yellow-550: #956F0D;
+$raw-yellow-600: #85620B;
+$raw-yellow-700: #6F4F0B;
+$raw-yellow-800: #493109;
+$raw-yellow-900: #362305;
+
+// RED
+$raw-red-50: #FEF0EF;
+$raw-red-100: #FDE5E3;
+$raw-red-200: #FCCAC7;
+$raw-red-300: #F8AFA9;
+$raw-red-400: #ED8780;
+$raw-red-500: #DC5B56;
+$raw-red-600: #C22E31;
+$raw-red-700: #A8161E;
+$raw-red-800: #6D1210;
+$raw-red-900: #4C110B;
+
+// WHITE
+$raw-white: #FFFFFF;
diff --git a/packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss b/packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss
new file mode 100644
index 000000000..7dd8603c3
--- /dev/null
+++ b/packages/client/src/arpa_reporter/scss/colors-semantic-tokens.scss
@@ -0,0 +1,75 @@
+/**
+ * colors-semantic-tokens.scss
+ * 
+ * Semantic token definition for USDR style guide.
+ *
+ * Please refer to USDR style guide definition in Figma:
+ *   https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1
+ */
+
+@import './colors-base-tokens.scss';
+
+// USDR BRAND
+$brand-primary: $usdr-brand-primary;
+$brand-hover: $raw-blue-700;
+$brand-active: $raw-blue-800;
+$brand-content: $raw-white;
+$brand-accent: $raw-blue-100;
+$brand-accentContent: $raw-gray-700;
+
+// POSITIVE
+$positive-default: $raw-green-600;
+$positive-hover: $raw-green-700;
+$positive-active: $raw-green-800;
+$positive-content: $raw-white;
+$positive-accent: $raw-green-100;
+$positive-accentContent: $raw-gray-700;
+
+// NEGATIVE 
+$negative-default: $raw-red-600;
+$negative-hover: $raw-red-700;
+$negative-active: $raw-red-800;
+$negative-content: $raw-white;
+$negative-accent: $raw-red-100;
+$negative-accentContent: $raw-gray-700;
+
+// WARNING
+$warning-default: $raw-yellow-550;
+$warning-hover: $raw-yellow-600;
+$warning-active: $raw-yellow-700;
+$warning-content: $raw-white;
+$warning-accent: $raw-yellow-50;
+$warning-accentContent: $raw-gray-700;
+
+// INFO
+$info-default: $raw-blue-600;
+$info-hover: $raw-blue-700;
+$info-active: $raw-blue-800;
+$info-content: $raw-white;
+$info-accent: $raw-blue-100;
+$info-accentContent: $raw-gray-700;
+
+// SURFACE 
+$surface-foreground: $raw-white;
+$surface-background: $raw-white;
+$surface-accent: $raw-gray-50;
+$surface-canvas: $raw-gray-50;
+$surface-overlay: $raw-black-alpha-600;
+
+// BORDER
+$border: $raw-gray-300;
+$border-hover: $raw-gray-400;
+
+// ICON 
+$icon-default: $raw-gray-600;
+
+// INTERACTIVE
+$interactive-active: $raw-blue-50;
+
+// TEXT
+$text-primary: $raw-gray-700;
+$text-secondary: $raw-gray-600;
+$text-placeholder: $raw-gray-500;
+
+// LINKS
+$link-back: $raw-gray-500;
\ No newline at end of file
diff --git a/packages/client/src/arpa_reporter/scss/fonts.scss b/packages/client/src/arpa_reporter/scss/fonts.scss
new file mode 100644
index 000000000..4b2664462
--- /dev/null
+++ b/packages/client/src/arpa_reporter/scss/fonts.scss
@@ -0,0 +1,61 @@
+/**
+ * fonts.scss
+ *
+ * Set font styles across GOST frontend.
+ */
+
+// IMPORT FONTS FROM GOOGLE FONTS:
+// INTER MEDIUM 500 (BODY FONT)
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
+
+// SET BODY FONTS TO INTER
+body {
+  font-family: Inter, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 500;
+  color: $text-primary;
+}
+
+// Setting the same styles for heading elements and heading classes so there's flexibility in separating semantic headings from visual heading style
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+  font-weight: 700;
+  line-height: 120%;
+}
+
+h1, .h1 { // called 'headingXL' in USDR Design System
+  font-size: 2.375rem; // 38px
+}
+
+h2, .h2 { // 'headingLarge'
+  font-size: 1.875rem; // 30px
+}
+
+h3, .h3 { // 'headingMedium'
+  font-size: 1.25rem;
+}
+
+h4, .h4 { // 'headingSmall'
+  font-size: 1rem;
+}
+
+h5, .h5, p { // 'headingXS' and 'body'
+  font-size: 0.875rem; // 14px
+}
+
+h6, .h6, .caption { // 'caption'
+  font-size: 0.8125rem; // 13px
+}
+
+// SET BODY FONTS TO INTER
+body {
+  font-family: Inter, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 150%;
+  font-weight: 500;
+}
+
+/* Bold text of active tabs and grant detail labels */
+.nav-tabs .nav-link.active, .data-label {
+  font-weight: 700;
+}
\ No newline at end of file
diff --git a/packages/client/src/arpa_reporter/scss/index.scss b/packages/client/src/arpa_reporter/scss/index.scss
index 6724c32f3..d99010632 100644
--- a/packages/client/src/arpa_reporter/scss/index.scss
+++ b/packages/client/src/arpa_reporter/scss/index.scss
@@ -1,22 +1,123 @@
-// override theme variables here
+/**
+ * custom.scss
+ * 
+ * Theme definition file, based on USDR style guide.
+ * Imports sub-files:
+ * - ./fonts.scss
+ * - ./colors-semantic-tokens.scss
+ *   - ./colors-base-tokens.scss
+ *
+ * Please refer to USDR style guide definition in Figma:
+ *   https://www.figma.com/file/HWu4iIjcoX2txuN543qzIB/USDR-Design-System?type=design&node-id=8%3A2&mode=design&t=8mml86X91f9FzVAE-1
+ */
 
-$theme-colors: (
-  "primary": #1565c0,
-  "secondary": #607d8b,
-);
+// IMPORT USDR DESIGN SYSTEM SEMANTIC TOKENS
+@import './colors-semantic-tokens.scss';
 
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
+// LIGHT THEME (SEMANTIC TOKEN) DEFINITION - SASS MAP
+$theme-colors: (
+  ) !default;
+$theme-colors: map-merge(( // DEFAULT BOOTSTRAP COLORS
+      "blue": #007bff,
+      "indigo": #6610f2,
+      "purple": #6f42c1,
+      "pink": #e83e8c,
+      "red": #dc3545,
+      "orange": #fd7e14,
+      "yellow": #ffc107,
+      "green": #28a745,
+      "teal": #20c997,
+      "cyan": #17a2b8,
+      "white": #fff,
+      "gray": #6c757d,
+      "gray-dark": #343a40,
 
+      // USDR BRAND COLORS
+      "primary": $usdr-brand-primary,
+      "secondary": $usdr-brand-secondary,
+      "success": $positive-default,
+      "info": $info-default,
+      "warning": $warning-default,
+      "danger": $negative-default,
+      "light": $raw-gray-100,
+      "dark": $raw-gray-800,
+    ),
+    $theme-colors
+);
 
 @import 'bootstrap/scss/bootstrap.scss';
 @import 'bootstrap-vue/src/index.scss';
 @import 'vue-select/src/scss/vue-select.scss';
-// @import '@braid/vue-formulate/themes/snow/snow.scss';
 
+// SET USDR FONTS
+@import './fonts.scss';
+
+/* Dropshadow for the header */
+.header-dropshadow {
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Card with dropshadow - used on login screen */
+.dropshadow-card {
+  box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid #DFE1E6, 1px solid white;
+  border-radius: 16px;
+}
+
+hr {
+  border-color: $border;
+}
+
+/* Dashboard colors */
+.color-gray {
+  color: $text-placeholder;
+}
+
+.color-yellow {
+  color: $warning-default;
+}
+
+.color-red {
+  color: $negative-default;
+}
+
+.color-green {
+  color: $positive-default;
+}
+
+.usdr-tab-nav-link {
+  color: #305CE0;
+}
+
+.usdr-nav-link {
+  color: rgba(0,0,0);
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.usdr-navbar-text {
+  color: rgba(0,0,0)
+}
+
+.btn.usdr-btn-primary,
+.btn-usdr-btn-primary:hover {
+  color: #ffff;
+  background-color: $usdr-brand-primary;
+  border-color: $usdr-brand-primary;
+}
+
+.btn.usdr-btn-info,
+.btn.usdr-btn-info:hover {
+  color: #ffffff;
+  background-color: #045D6A;
+  border-color: #045D6A;
+}
 
-/* NOTE: This file was copied from scss/index.scss (git @ ada8bfdc98) in the arpa-reporter repo on 2022-09-23T20:05:47.735Z */
\ No newline at end of file
+/* Allows truncation (text-truncate) for flex items */
+.has-flexi-truncate {
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 0%;
+  flex: 1 1 0%;
+  min-width: 0;
+}
\ No newline at end of file
diff --git a/packages/client/src/arpa_reporter/views/HomeView.vue b/packages/client/src/arpa_reporter/views/HomeView.vue
index 19dfdee74..f3f5db118 100644
--- a/packages/client/src/arpa_reporter/views/HomeView.vue
+++ b/packages/client/src/arpa_reporter/views/HomeView.vue
@@ -32,7 +32,7 @@
       >
         <button
           id="sendTreasuryReportButton"
-          class="btn btn-primary btn-block"
+          class="btn usdr-btn-primary btn-block"
           :disabled="sending"
           @click="sendTreasuryReport"
         >
@@ -47,7 +47,7 @@
       >
         <button
           id="sendAuditReportButton"
-          class="btn btn-info btn-block"
+          class="btn usdr-btn-info btn-block"
           :disabled="sending"
           @click="sendAuditReport"
         >
@@ -62,7 +62,7 @@
       >
         <button
           id="submitWorkbookButton"
-          class="btn btn-primary btn-block"
+          class="btn usdr-btn-primary btn-block"
           :disabled="!viewingOpenPeriod"
           @click.prevent="startUpload"
         >