feat: add color variables for the surface

Author: mhenriette

src/components/layout/Footer.tsx

@@ -75,7 +75,7 @@ export default function Footer({ backgroundColor = false }: FooterProps): ReactE
 
   return (
     <Section padding="pt-20" type={backgroundColor ? "secondary-light" : "default"}>
-      <div className="py-8 text-base text-center text-gray-400 border-t border-gray-200 border-t-solid lg:flex md:flex lg:text-left">
+      <div className="py-8 text-surface-text-tertiary text-base text-center border-t border-gray-200 border-surface-border-primary border-t-solid lg:flex md:flex lg:text-left">
         <div className="w-full border-b border-gray-200 lg:w-1/2 lg:border-none md:border-none border-b-solid">
           <p className="block text-with-links" dangerouslySetInnerHTML={{ __html: t("footer.text") }} />
           <div className="flex items-center justify-center mt-8 mb-12 lg:mb-0 lg:justify-start space-x-9">

src/components/ui/SocialLink.tsx

@@ -47,7 +47,7 @@ export default function SocialLink({ link, testId = "socialLink", socialLinkIcon
       href={link.url}
       target="_blank"
       title={link.title}
-      className="h-14 w-14 border border-solid bg-gray-50 border-gray-200 box-border inline-flex items-center justify-center text-lg rounded-full"
+      className="h-14 w-14 border border-solid bg-surface-bg-secondary border-surface-border-primary box-border inline-flex items-center justify-center text-lg rounded-full"
     >
       {icon && (
         <div title={link.title} className="w-4.5 inline-block" data-testid={socialLinkIconTestId}>

src/styles/globals.css

@@ -2,6 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --surface-text-primary: #271f11;
+  --surface-text-secondary: #4B5563;
+  --surface-text-tertiary: #9CA3AF;
+  --surface-text-label: var(--surface-text-tertiary);
+  --surface-text-disabled: #D1D5D8;
+  --surface-text-invert: #FFFFFF;
+  --surface-text-brand: #1B66F8;
+  --surface-icon-primary: var(--surface-text-primary);
+  --surface-icon-disabled: var(--surface-text-disabled);
+  --surface-icon-invert: var(--surface-text-invert);
+  --surface-bg-primary: var(--surface-text-invert);
+  --surface-bg-secondary:#F9FAFB;
+  --surface-bg-tertiary: #F3F4F6;
+  --surface-bg-disabled: var(--surface-bg-secondary);
+  --surface-bg-highlight: #F5F9FF;
+  --surface-border-primary: #E5E7E8;
+  --surface-border-secondary: var(--surface-text-disabled);
+  --surface-border-inverted: var(--surface-text-invert);
+  --surface-border-brand: #DBEAFE;
+}
+
+
 @font-face {
   font-family: "Graphik";
   src: url("/fonts/Graphik-Medium-Web.woff2") format("woff2"), url("/fonts/Graphik-Medium-Web.woff") format("woff");

tailwind.config.js

@@ -29,6 +29,35 @@ module.exports = {
           accent: "var(--tm-accent)",
           muted: "var(--tm-muted)",
         },
+        surface: {
+          text: {
+            primary: "var(--surface-text-primary)",
+            secondary: "var(--surface-text-secondary)",
+            tertiary: "var(--surface-text-tertiary)",
+            label: "var(--surface-text-label)",
+            disabled: "var(--surface-text-disabled)",
+            invert: "var(--surface-text-invert)",
+            brand: "var(--surface-text-brand)",
+          },
+          icon: {
+            primary: "var(--surface-icon-primary)",
+            disabled: "var--surface-icon-disabled)",
+            invert: "var(--surface-icon-invert)",
+          },
+          bg: {
+            primary: "var(--surface-bg-primary)",
+            secondary: "var(--surface-bg-secondary)",
+            tertiary: "var(--surface-bg-tertiary)",
+            disabled: "var(--surface-bg-disabled)",
+            highlight: "var(--surface-bg-highlight)",
+          },
+          border: {
+            primary: "var(--surface-border-primary)",
+            secondary: "var(--surface-border-secondary)",
+            inverted: "var(--surface-border-inverted)",
+            brand: "var(--surface-border-brand)",
+          },
+        },
       },
       spacing: {
         3.75: "0.9375rem",