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
sfbrigade · May 7, 2024 · fe6e1f1 · fe6e1f1
1 parent 619dac8
commit fe6e1f1
Show file tree

Hide file tree

Showing 20 changed files with 57 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -22,15 +22,15 @@ 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,
 };
 
 // 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;