fix(#263/color-variables): Merge latest updates from main. Update any…

… new hex codes to globals.css variable names.
sfbrigade · Apr 30, 2024 · 4a5e11a · 4a5e11a
1 parent 8407c6a
commit 4a5e11a
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 25 deletions.
diff --git a/src/components/goal/Goal.module.css b/src/components/goal/Goal.module.css
@@ -25,10 +25,10 @@
 }
 
 .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
@@ -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/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/theme.ts b/src/theme.ts
@@ -23,68 +23,68 @@ 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",
       },
     },
     h2: {
       fontWeight: 600,
       fontSize: "2em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "1.5em",
       },
     },
     h3: {
       fontWeight: 600,
       fontSize: "1.5em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "1.25em",
       },
     },
     h4: {
       fontWeight: 600,
       fontSize: "1.25em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontWeight: 500,
       },
     },
     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",
     },
   },
 });