Cambiado los colores a variables para no tener nada hardcoded

Author: enric4000

src/app/genericComponents/DepartmentInfoCard.tsx

@@ -6,6 +6,7 @@ import {
   BodyTextMedium,
   MobileBreakpoint,
   Primary100,
+  QuestionBoxBackgroundColor,
   SpacingS,
   SpacingXS,
   TitleS,
@@ -56,7 +57,7 @@ const Answer = styled.p<{ isVisible: boolean }>`
 
 const QuestionBox = styled.div`
   border-radius: ${SpacingS};
-  background-color: #304697;
+  background-color: ${QuestionBoxBackgroundColor};
   padding: ${SpacingS};
   cursor: pointer;
 

src/app/genericComponents/General.ts

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import {
+  BackgroundAccent,
   BodyText,
   BodyTextMedium,
   MaxElement,
@@ -35,7 +36,7 @@ export const TransparentBackground = styled.div`
 `;
 
 export const Background = styled(TransparentBackground)`
-  background: #1d1e3b;
+  background: ${BackgroundAccent};
 `;
 
 export const CardWithBorder = styled.div`

src/app/genericComponents/tokens.ts

@@ -36,7 +36,8 @@ export const Neutral300: string = "#88A7B7";
 export const Neutral200: string = "#EAF7FF";
 export const Neutral100: string = "#F9FDFF";
 
-export const BackgroundAccent: string = "#1f2424";
+export const BackgroundAccent: string = "#1d1e3b";
+export const QuestionBoxBackgroundColor: string = "#304697";
 
 // Responsive breakpoints
 export const MobilePixels: number = 640;

src/app/globals.css

@@ -1,3 +1,9 @@
+:root {
+  --body-color: #1c1e3b;
+  --webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
+  --embla-button-disabled-color: rgb(255, 255, 255);
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -9,7 +15,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden; /* Prevents horizontal scrollbar */
-  background-color: #1c1e3b;
+  background-color: var(--body-color);
 }
 
 .embla {
@@ -58,7 +64,7 @@ body {
   align-items: center;
 }
 .embla__button {
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
+  -webkit-tap-highlight-color: var(--webkit-tap-highlight-color);
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
@@ -79,7 +85,7 @@ body {
   justify-content: center;
 }
 .embla__button:disabled {
-  color: rgb(255, 255, 255);
+  color: var(--embla-button-disabled-color);
 }
 .embla__button__svg {
   width: 35%;