[Feature] Use color palette

18F · Nov 19, 2024 · dd6658e · dd6658e
1 parent 6f2bbed
commit dd6658e
Show file tree

Hide file tree

Showing 29 changed files with 395 additions and 343 deletions.
diff --git a/_includes/analytics_definitions.html b/_includes/analytics_definitions.html
@@ -31,7 +31,7 @@ <h1 class="analytics-definitions__header margin-0 padding-bottom-1">
       >
         <button
           type="button"
-          class="usa-accordion__button white bg-dark-blue"
+          class="usa-accordion__button white bg-palette-color-2"
           aria-expanded="true"
           aria-controls="report-descriptions-content"
         >
@@ -179,7 +179,10 @@ <h3 id="report_realtime_top_pages" class="usa-accordion__heading">
             class="usa-accordion__content usa-prose"
           >
             <ul>
-              <li>Metric: <a href="#metric_screen_page_views">screen page views</a></li>
+              <li>
+                Metric:
+                <a href="#metric_screen_page_views">screen page views</a>
+              </li>
               <li>
                 Dimensions: <a href="#dimension_host_name">hostname</a>, full
                 page URL, <a href="#dimension_page_title">page title</a>
@@ -330,7 +333,7 @@ <h3 id="report_realtime_top_pages" class="usa-accordion__heading">
       >
         <button
           type="button"
-          class="usa-accordion__button white bg-dark-blue"
+          class="usa-accordion__button white bg-palette-color-2"
           aria-expanded="true"
           aria-controls="data-definitions-content"
         >

diff --git a/_includes/data_download.html b/_includes/data_download.html
@@ -10,7 +10,7 @@ <h1>Download the data</h1>
 
       <p>
         <a
-          class="analytics-data__historical-data-link light-blue-two"
+          class="analytics-data__historical-data-link palette-color-4"
           href="/historical-data-download"
         >
           <em

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,4 +1,7 @@
-<header id="analytics-header" class="grid-row white bg-dark-blue padding-3">
+<header
+  id="analytics-header"
+  class="grid-row white bg-palette-color-1 padding-3"
+>
   <h1 class="margin-top-0 margin-x-0 margin-bottom-1">
     <img
       src="{{ site.baseurl }}/images/analytics.svg"

diff --git a/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap b/js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
@@ -34,7 +34,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           48.5%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 49%;"
         />
       </div>
@@ -52,7 +52,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           35.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 36%;"
         />
       </div>
@@ -70,7 +70,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 9%;"
         />
       </div>
@@ -88,7 +88,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -106,7 +106,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -124,7 +124,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -142,7 +142,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -160,7 +160,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -178,7 +178,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -196,7 +196,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -227,7 +227,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           48.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 49%;"
         />
       </div>
@@ -245,7 +245,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           35.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 36%;"
         />
       </div>
@@ -263,7 +263,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 9%;"
         />
       </div>
@@ -281,7 +281,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -299,7 +299,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -317,7 +317,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -335,7 +335,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -353,7 +353,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -371,7 +371,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>

diff --git a/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
@@ -31,7 +31,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           48.7%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 49%;"
         />
       </div>
@@ -49,7 +49,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           35.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 36%;"
         />
       </div>
@@ -67,7 +67,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           8.8%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 9%;"
         />
       </div>
@@ -85,7 +85,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -103,7 +103,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1.9%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 2%;"
         />
       </div>
@@ -121,7 +121,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -139,7 +139,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -157,7 +157,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -175,7 +175,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -193,7 +193,7 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>

diff --git a/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/DevicesChart.spec.js.snap
@@ -31,7 +31,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           54.4%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 54%;"
         />
       </div>
@@ -49,7 +49,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           44%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 44%;"
         />
       </div>
@@ -67,7 +67,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           1.3%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 1%;"
         />
       </div>
@@ -85,7 +85,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           0.2%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>
@@ -103,7 +103,7 @@ exports[`DevicesChart when data is loaded renders a component with data loaded 1
           0.1%
         </div>
         <div
-          class="chart__bar-chart__item__bar bg-light-blue"
+          class="chart__bar-chart__item__bar bg-palette-color-5"
           style="width: 0%;"
         />
       </div>