Adds study category colors for the first study

CHANGELOG.md

@@ -9,6 +9,7 @@
 * [#443](https://github.com/mozilla-rally/rally-core-addon/pull/443): Prepare for release:
   * enable data submission;
   * change the website URL to `rally.mozilla.org`;
+* [#457](https://github.com/mozilla-rally/rally-core-addon/pull/457): Integrate color palette for study categories.
 
 # v0.10.0 (2021-02-19)
 

public/locally-available-studies.json

@@ -19,8 +19,7 @@
     "privacyPolicyLink": "https://addons.mozilla.org/en-US/firefox/addon/ion-basic-study/",
     "joinStudyConsent": "This study will send an encrypted ping, only when the toolbar icon is clicked.",
     "leaveStudyConsent": "This study cannot be re-joined.",
-    "dataCollectionDetails": [
-      "The date and time"
-    ]
+    "dataCollectionDetails": ["The date and time"],
+    "tags": ["misinformation", "social media", "demo"]
   }
 ]

public/rally.css

@@ -1,3 +1,14 @@
+/* vendored font faces not included in Protocol */
+/* Inter SemiBold 3.15 (https://github.com/rsms/inter/releases/download/v3.15/Inter-3.15.zip) */
+@font-face {
+  font-display: swap;
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 600;
+  src: url("./vendored-fonts/Inter-SemiBold.woff2") format("woff2"),
+    url("./vendored-fonts/Inter-SemiBold.woff") format("woff");
+}
+
 :root {
   --content-width: 700px;
   --onboarding-cta-height: 434px;

src/components/study-card/StudyCard.svelte

@@ -9,6 +9,7 @@
   import CheckCircle from "../icons/CheckCircle.svelte";
   import ExternalLink from '../icons/ExternalLink.svelte';
   import niceDate from "./nice-date";
+  import studyCategories from "./study-categories";
 
   import AccordionButton from "../accordion/AccordionButton.svelte";
 
@@ -109,10 +110,11 @@
   .tag {
     background-color: var(--background, var(--color-marketing-gray-80));
     color: var(--text, var(--color-white));
-    padding: 2px 6px 1px 6px;
+    padding: 0 4px;
     font-size: 12px;
-    line-height: 18px;
-    height: 18px;
+    line-height: 21px;
+    height: 20px;
+    font-weight: 600;
     display: grid;
     place-items: center;
     text-transform: uppercase;
@@ -226,7 +228,12 @@
       <div class="study-card-footer">
         <div class="study-card-tags">
           {#each tags as tag}
-            <div class="tag radius-sm">{tag}</div>
+            <div 
+              class="tag radius-sm" 
+              style={`
+                color: ${(studyCategories[tag] && studyCategories[tag].color) || "var(--color-marketing-gray-100)"}; 
+                background: ${(studyCategories[tag] && studyCategories[tag].background) || "white"};
+                `}>{tag}</div>
           {/each}
         </div>
 

src/components/study-card/study-categories.js

@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+export default {
+    "social media": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#F5F1BA"
+    },
+    "misinformation": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#FFD5B2"
+    },
+    "artificial intelligence": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#D98FFF"
+    },
+    "devices": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#FFB4DC"
+    },
+    "data & privacy": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#B6F4F7"
+    },
+    "accessibility": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#E0ECEC"
+    },
+}

stories/studies/StudySet.svelte

@@ -33,7 +33,7 @@
     endDate={new Date(2020, 11, 5)}
     joinedDate={new Date(2021, 8, 9)}
     dataCollectionDetails={['the date and time', 'number of browser tabs open', 'the time of day when the browser is first used, additional thoughts', 'the temperature outside near the data center where their data will be stored', 'the date and time', 'number of browser tabs open', 'the time of day when the browser is first used, additional thoughts']}
-    tags={['artificial intelligence', 'misinformation', 'quantified self', 'ad trackers', 'facebook', 'another label']}
+    tags={['social media', 'misinformation', 'data & privacy', 'devices', 'accessibility', 'other']}
     privacyPolicyLink={'/'}>
     <span slot="name">Very, very long Study 1a.05 (long title, and also this doesn't have study icon)</span>
     <span slot="author">The Mozilla Foundation, The Mozilla Corporation, and