From fe6e1f11f0bbc427a43d48ac580879f400f243a2 Mon Sep 17 00:00:00 2001
From: Brett Austin Eastman <76603041+BrettEastman@users.noreply.github.com>
Date: Mon, 6 May 2024 23:29:08 -0700
Subject: [PATCH] Update global color variables #263 (#279)

* Check all css variables in globals.css to make sure they represent Figma design system colors. Go through all instances of each hex code and change to color variable, making educated guesses when coming across a hex color value not in the design system.

* Convert rgb colors to css variables, again taking an educated guess at one purple color in uploadImage.module.css file that was not in the design system.

* fix(#263/color-variables): Merge latest updates from main. Update any new hex codes to globals.css variable names.

* fix(263/color-variables): remove duplicate Button.module.css file
---
 src/components/goal/Goal.module.css           | 12 +++++------
 src/components/goal/Goal.tsx                  |  2 +-
 src/components/iep/Iep.module.css             | 12 +++++------
 src/components/iep/Iep.tsx                    |  4 ++--
 .../paraTrials/Paratrials.module.css          |  4 ++--
 src/components/progressBar/progressBar.tsx    |  4 ++--
 src/components/styles/Toast.module.css        |  6 +++---
 .../Subgoal-Assignment-Modal.module.css       |  4 ++--
 .../subgoal/Subgoal-Assignment-Modal.tsx      |  2 +-
 src/components/subgoal/Subgoal.tsx            |  4 ++--
 src/components/table/table.tsx                |  2 +-
 src/components/taskCard/TaskCard.module.css   |  6 +++---
 .../uploadPicture/uploadImage.module.css      |  8 ++++----
 src/pages/students/[student_id].tsx           |  4 ++--
 src/styles/GoalPage.module.css                |  2 +-
 src/styles/Input.module.css                   |  2 +-
 src/styles/Modal.module.css                   |  4 ++--
 src/styles/StaffPage.module.css               |  6 +++---
 src/styles/StudentPage.module.css             |  6 +++---
 src/theme.ts                                  | 20 +++++++++----------
 20 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/components/goal/Goal.module.css b/src/components/goal/Goal.module.css
index b3e1f74d..60a2b460 100644
--- a/src/components/goal/Goal.module.css
+++ b/src/components/goal/Goal.module.css
@@ -19,16 +19,16 @@
 
 .createInput input {
   border-radius: 2px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--outline);
   margin: 2px 4px;
   padding: 4px 2px;
 }
 
 .description {
-  color: var(--grey-202-a-333-c, #2a333c);
+  color: var(--grey-20);
 
   /* Body 1 */
-  font-family: var(--font-inter);
+  font-family: var(--inter);
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -61,14 +61,14 @@
   gap: 10px;
 
   border-radius: 16px;
-  background: var(--grey-80-f-4-f-6-f-7, #f4f6f7);
+  background: var(--grey-80);
 }
 
 .subgoalCount {
-  color: var(--grey-30586874, #586874);
+  color: var(--grey-30);
 
   /* Body 2 */
-  font-family: var(--font-inter);
+  font-family: var(--inter);
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
diff --git a/src/components/goal/Goal.tsx b/src/components/goal/Goal.tsx
index 16d3a475..f8115f3d 100644
--- a/src/components/goal/Goal.tsx
+++ b/src/components/goal/Goal.tsx
@@ -64,7 +64,7 @@ const Goals = ({ goal }: GoalProps) => {
                 fontSize: "14px",
                 borderRadius: "8px",
                 backgroundColor: "white",
-                color: "#20159E",
+                color: "var(--primary-40)",
                 border: "none",
               }}
               onClick={async (e) => {
diff --git a/src/components/iep/Iep.module.css b/src/components/iep/Iep.module.css
index 3afb9033..d29acabf 100644
--- a/src/components/iep/Iep.module.css
+++ b/src/components/iep/Iep.module.css
@@ -5,11 +5,11 @@
   align-items: center;
   gap: 8px;
   border-radius: 8px 8px 0px 0px;
-  background: #fff;
+  background: var(--grey-100);
 }
 
 .goalsContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   padding-bottom: 2rem;
   min-height: 50vh;
   max-height: 70vh;
@@ -41,12 +41,12 @@
 }
 
 .addGoalFormContainer {
-  border-left: 1px #d6dde1 solid;
+  border-left: 1px var(--outline) solid;
   padding: 2rem;
 }
 
 .addGoalFormHeading {
-  color: #021426;
+  color: var(--on-background);
   font-size: 24px;
   font-family: var(--font-quicksand);
   font-weight: 600;
@@ -64,12 +64,12 @@
   gap: 8px;
   align-self: stretch;
   border-radius: 8px;
-  background: #f5f5f5;
+  background: var(--grey-80);
   resize: none;
 }
 
 .listGoal {
-  border-bottom: 1px solid #d6dde1;
+  border-bottom: 1px solid var(--outline);
 }
 
 .listGoal :hover {
diff --git a/src/components/iep/Iep.tsx b/src/components/iep/Iep.tsx
index b2677cab..440577dc 100644
--- a/src/components/iep/Iep.tsx
+++ b/src/components/iep/Iep.tsx
@@ -88,13 +88,13 @@ const Iep = ({ iep_id }: IepProps) => {
               {showAddGoalForm && (
                 <ListItem
                   key="adding-goal"
-                  style={{ borderBottom: "1px solid #D6DDE1" }}
+                  style={{ borderBottom: "1px solid var(--outline)" }}
                 >
                   <div
                     style={{
                       padding: "24px",
                       fontStyle: "italic",
-                      color: "#788591",
+                      color: "var(--grey-40)",
                     }}
                   >
                     Adding new goal...
diff --git a/src/components/paraTrials/Paratrials.module.css b/src/components/paraTrials/Paratrials.module.css
index a4b2dce7..5c7b1e6c 100644
--- a/src/components/paraTrials/Paratrials.module.css
+++ b/src/components/paraTrials/Paratrials.module.css
@@ -46,7 +46,7 @@
   background-color: var(--accent);
 }
 .counterNumberDisplay-blue {
-  background-color: #1680a133;
+  background-color: var(--accent);
 }
 .counterButton-green {
   background-color: var(--success);
@@ -58,7 +58,7 @@
   background-color: var(--warning-container);
 }
 .counterNumberDisplay-yellow {
-  background-color: #ffaa4433;
+  background-color: var(--warning-state);
 }
 .counterButton-red {
   background-color: var(--error);
diff --git a/src/components/progressBar/progressBar.tsx b/src/components/progressBar/progressBar.tsx
index 1a3c8640..ac59304e 100644
--- a/src/components/progressBar/progressBar.tsx
+++ b/src/components/progressBar/progressBar.tsx
@@ -12,8 +12,8 @@ const ProgressBar = ({ fillPercent }: ProgressBarProps) => {
         height: "5px",
         background:
           fillPercent === 100
-            ? "#788591"
-            : `linear-gradient(to right, #3023B8 0%, #3023B8 ${fillPercent}%, #9B93F1 ${fillPercent}%, #9B93F1 100%`,
+            ? "var(--grey-40)"
+            : `linear-gradient(to right, var(--primary-50) 0%, var(--primary-50) ${fillPercent}%, var(--primary-80) ${fillPercent}%, var(--primary-80) 100%`,
       }}
     ></div>
   );
diff --git a/src/components/styles/Toast.module.css b/src/components/styles/Toast.module.css
index f12d2a1d..33aa4e5a 100644
--- a/src/components/styles/Toast.module.css
+++ b/src/components/styles/Toast.module.css
@@ -14,8 +14,8 @@
   row-gap: 8px;
   flex-wrap: wrap;
   border-radius: 4px;
-  background: #fef1f0;
-  font-family: var(--font-inter);
+  background: var(--error-container);
+  font-family: var(--inter);
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -24,5 +24,5 @@
 
 .closeButton {
   border: none;
-  background: #fef1f0;
+  background: var(--error-container);
 }
diff --git a/src/components/subgoal/Subgoal-Assignment-Modal.module.css b/src/components/subgoal/Subgoal-Assignment-Modal.module.css
index b0967909..57da82c7 100644
--- a/src/components/subgoal/Subgoal-Assignment-Modal.module.css
+++ b/src/components/subgoal/Subgoal-Assignment-Modal.module.css
@@ -11,7 +11,7 @@
 
 .subgoalDescriptionBox {
   border-radius: 8px;
-  background-color: #f6f5ff;
+  background-color: var(--primary-container);
   padding: 8px 16px;
 }
 
@@ -26,5 +26,5 @@
 
 /* We may have to set up a theme to override the MUI styles so we can achieve our design systems setups since this does not work, or build our own global buttons and use those */
 .button {
-  background-color: #20159e;
+  background-color: var(--primary-40);
 }
diff --git a/src/components/subgoal/Subgoal-Assignment-Modal.tsx b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
index ec56898d..d357039c 100644
--- a/src/components/subgoal/Subgoal-Assignment-Modal.tsx
+++ b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
@@ -139,7 +139,7 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
                 my: 2,
                 maxHeight: "10rem",
                 overflow: "auto",
-                border: "1px solid #d6dde1",
+                border: "1px solid var(--grey-70)",
                 borderRadius: 1,
               }}
             >
diff --git a/src/components/subgoal/Subgoal.tsx b/src/components/subgoal/Subgoal.tsx
index 671cd8ea..2ee57690 100644
--- a/src/components/subgoal/Subgoal.tsx
+++ b/src/components/subgoal/Subgoal.tsx
@@ -14,12 +14,12 @@ const Subgoals = ({ subgoal }: SubgoalProps) => {
   const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false);
 
   return (
-    <Box sx={{ border: "1px solid #B9C1C6" }}>
+    <Box sx={{ border: "1px solid var(--grey-60)" }}>
       <Box
         sx={{
           display: "flex-col",
           justifyContent: "space-between",
-          backgroundColor: "#fff",
+          backgroundColor: "var(--grey-100)",
           padding: "1rem",
         }}
       >
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index b935dc87..563cd371 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -238,7 +238,7 @@ function EnhancedTableInput<Column extends HeadCell>({
 
 const StyledTableRow = styled(TableRow)(() => ({
   "&:nth-of-type(odd)": {
-    backgroundColor: "#F8F9FA",
+    backgroundColor: "var(--grey-90)",
   },
   "&.MuiTableRow-hover:hover": {
     backgroundColor: "lightgray",
diff --git a/src/components/taskCard/TaskCard.module.css b/src/components/taskCard/TaskCard.module.css
index 1b96cf21..1aa349b7 100644
--- a/src/components/taskCard/TaskCard.module.css
+++ b/src/components/taskCard/TaskCard.module.css
@@ -8,12 +8,12 @@
 }
 .dateFloaterRed {
   composes: dateFloater;
-  color: #b3261e;
+  color: var(--error);
 }
 
 .dateFloaterGreen {
   composes: dateFloater;
-  color: #167841;
+  color: var(--success);
 }
 
 .profile {
@@ -35,7 +35,7 @@
   border-radius: 50%;
   height: 50px;
   width: 50px;
-  background-color: cadetblue;
+  background-color: var(--primary-80);
 }
 
 .imageDone {
diff --git a/src/components/uploadPicture/uploadImage.module.css b/src/components/uploadPicture/uploadImage.module.css
index e53800d9..ae07641c 100644
--- a/src/components/uploadPicture/uploadImage.module.css
+++ b/src/components/uploadPicture/uploadImage.module.css
@@ -9,10 +9,10 @@
   padding: 10px;
   display: block;
   margin-bottom: 20px;
-  background-color: white;
-  color: rgb(131, 23, 202);
-  border: 1px solid #ffffffee;
-  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
+  background-color: var(--grey-100);
+  color: var(--primary-70);
+  border: 1px solid var(--outline);
+  box-shadow: 0px 0px 1px 2px var(--grey-10);
   font-size: 14px;
   font-family: "Lucida Grande", "Arial", sans-serif;
   align-items: center;
diff --git a/src/pages/students/[student_id].tsx b/src/pages/students/[student_id].tsx
index 672a9ef3..f55b6c36 100644
--- a/src/pages/students/[student_id].tsx
+++ b/src/pages/students/[student_id].tsx
@@ -22,7 +22,7 @@ const style = {
   left: "50%",
   transform: "translate(-50%, -50%)",
   bgcolor: "background.paper",
-  border: "2px solid #000",
+  border: "2px solid var(--grey-10)",
   boxShadow: 24,
 
   p: 4,
@@ -30,7 +30,7 @@ const style = {
 
 // uncomment and edit to apply design systems styling
 // const textfieldstyle = {
-//   border: "1px solid #20159E",
+//   border: "1px solid var(--grey-10)",
 //   width: "100%",
 // };
 
diff --git a/src/styles/GoalPage.module.css b/src/styles/GoalPage.module.css
index 724687d8..7915c351 100644
--- a/src/styles/GoalPage.module.css
+++ b/src/styles/GoalPage.module.css
@@ -25,7 +25,7 @@
   align-items: center;
   gap: 8px;
   border-radius: 8px 8px 0px 0px;
-  background-color: #e0e0e0;
+  background-color: var(--grey-70);
   color: var(--grey-30);
 }
 
diff --git a/src/styles/Input.module.css b/src/styles/Input.module.css
index 541b26ec..b81b2807 100644
--- a/src/styles/Input.module.css
+++ b/src/styles/Input.module.css
@@ -1,7 +1,7 @@
 /* TODO: Might use MUI for all inputs for consistency */
 .default {
   border-radius: 2px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--outline);
   margin: 2px 4px;
   padding: 4px 2px;
 }
diff --git a/src/styles/Modal.module.css b/src/styles/Modal.module.css
index 741d0bbe..c8b5c5dc 100644
--- a/src/styles/Modal.module.css
+++ b/src/styles/Modal.module.css
@@ -4,8 +4,8 @@
   left: 50%;
   transform: translate(-50%);
   width: 400;
-  background-color: white;
-  border: 1px solid #000;
+  background-color: var(--grey-100);
+  border: 1px solid var(--grey-10);
   border-radius: 10px;
   box-shadow: 24;
   padding: 3rem;
diff --git a/src/styles/StaffPage.module.css b/src/styles/StaffPage.module.css
index 073df368..4f643bb5 100644
--- a/src/styles/StaffPage.module.css
+++ b/src/styles/StaffPage.module.css
@@ -1,11 +1,11 @@
 .staffInfoContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 0.5rem;
 }
 
 .staffEditContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 20px 50px;
 }
@@ -47,7 +47,7 @@
 }
 
 .noStaffContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   margin-top: 2rem;
   min-height: 50vh;
diff --git a/src/styles/StudentPage.module.css b/src/styles/StudentPage.module.css
index b93896a8..1b91abaa 100644
--- a/src/styles/StudentPage.module.css
+++ b/src/styles/StudentPage.module.css
@@ -1,11 +1,11 @@
 .studentInfoContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 0.5rem;
 }
 
 .studentEditContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 20px 50px;
 }
@@ -54,7 +54,7 @@
 }
 
 .noIepContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   margin-top: 2rem;
   min-height: 50vh;
diff --git a/src/theme.ts b/src/theme.ts
index a0741ac8..f464320a 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -23,7 +23,7 @@ export const theme = createTheme({
     h1: {
       fontWeight: 600,
       fontSize: "2.5em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "2em",
       },
@@ -31,7 +31,7 @@ export const theme = createTheme({
     h2: {
       fontWeight: 600,
       fontSize: "2em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "1.5em",
       },
@@ -39,7 +39,7 @@ export const theme = createTheme({
     h3: {
       fontWeight: 600,
       fontSize: "1.5em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "1.25em",
       },
@@ -47,7 +47,7 @@ export const theme = createTheme({
     h4: {
       fontWeight: 600,
       fontSize: "1.25em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontWeight: 500,
       },
@@ -55,36 +55,36 @@ export const theme = createTheme({
     h5: {
       fontWeight: 700,
       fontSize: "1em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
     },
     body1: {
       fontWeight: 400,
       fontSize: "1em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
       lineHeight: "150%",
     },
     body2: {
       fontWeight: 500,
       fontSize: "0.875em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
       lineHeight: "150%",
     },
     button: {
       fontWeight: 600,
       fontSize: "1em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       lineHeight: "150%",
     },
     caption: {
       fontWeight: 400,
       fontSize: "0.75em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
       lineHeight: "150%",
     },
     overline: {
       fontWeight: 600,
       fontSize: "0.75em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
     },
   },
 });