Move hardcoded colors to CSS tokens

Author: MMesch

src/components/about/styles.module.css

@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--ifm-overlay-background);
   z-index: 1000;
 }
 
@@ -15,7 +15,7 @@
   transform: translate(-50%, -50%);
   background-color: white;
   border: 1px solid #ccc;
-  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+  box-shadow: var(--ifm-shadow-dialog);
   border-radius: 20px;
   z-index: 4000;
 }
@@ -26,7 +26,7 @@
   background-color: white;
   color: var(--ifm-color-primary-p2);
   border-radius: 8px;
-  box-shadow: 0px 0px 8px 1px #c8c8c7;
+  box-shadow: var(--ifm-shadow-card);
   padding: var(--ifm-spacing-lg) var(--ifm-spacing-xs);
   margin-bottom: var(--ifm-spacing-xl);
 }
@@ -171,7 +171,7 @@ div .join_the_team_text {
     width: 264px;
     padding: var(--ifm-spacing-lg) var(--ifm-spacing-md);
     border-radius: 8px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
+    box-shadow: var(--ifm-shadow-card);
     background-color: var(--ifm-color-primary-p1);
     margin-bottom: var(--ifm-spacing-xl);
   }
@@ -239,7 +239,7 @@ div .join_the_team_text {
     width: 264px;
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
     border-radius: 8px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
+    box-shadow: var(--ifm-shadow-card);
     background-color: var(--ifm-color-primary-p1);
     margin-bottom: var(--ifm-spacing-xl);
   }

src/components/careers/styles.module.css

@@ -38,7 +38,7 @@
   height: 300px;
   background-color: var(--ifm-background-color);
   border-radius: 10px;
-  box-shadow: 0px 0px 8px 1px #c8c8c7;
+  box-shadow: var(--ifm-shadow-card);
   padding: var(--ifm-spacing-sm);
   text-align: center;
   margin-bottom: var(--ifm-spacing-xl);

src/components/fundable/styles.module.css

@@ -43,7 +43,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: var(--ifm-overlay-background);
   z-index: 1000;
 }
 

src/components/home/Hero/styles.module.css

@@ -95,7 +95,7 @@
 }
 
 .notebook_link {
-  color: #FCF12B;
+  color: var(--ifm-color-accent-yellow);
   font-weight: 700;
   font-style: bold;
   line-height: 100%;
@@ -107,8 +107,8 @@
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg,
-      #5242FF,
-      #2A2A2A);
+      var(--ifm-color-accent-indigo),
+      var(--ifm-color-accent-dark));
   color: white;
   width: 358px;
   font-weight: 700;

src/components/home/WhatWeDo/styles.module.css

@@ -65,7 +65,7 @@ div .topics_header {
     width: 350px;
     padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
     border-radius: 8px;
-    box-shadow: 0px 0px 8px 1px #c8c8c7;
+    box-shadow: var(--ifm-shadow-card);
     background-color: var(--ifm-color-primary-p0);
     margin: 0 var(--ifm-spacing-lg) var(--ifm-spacing-xl) var(--ifm-spacing-lg);
   }

src/css/custom.css

@@ -24,6 +24,15 @@
 
   --ifm-color-neutral-n1: #605e58;
   --ifm-color-neutral-n2: #371300;
+  --ifm-color-neutral-n3: #c8c8c7;
+
+  --ifm-color-accent-yellow: #FCF12B;
+  --ifm-color-accent-indigo: #5242FF;
+  --ifm-color-accent-dark: #2A2A2A;
+
+  --ifm-shadow-card: 0px 0px 8px 1px var(--ifm-color-neutral-n3);
+  --ifm-shadow-dialog: 0 8px 16px rgba(0, 0, 0, 0.2);
+  --ifm-overlay-background: rgba(0, 0, 0, 0.3);
 
   --ifm-text-color: var(--ifm-color-primary-p2);
   --ifm-background-color: white;