uikit-react-public 0.37.2 → 0.38.1

package/lib/components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Footer > snapshot: footer links provided 1`] = `
 <footer
-  class="ucl-uikit-footer css-mq639a"
+  class="ucl-uikit-footer css-aro7ng"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -15,7 +15,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       class="css-1h8jsb3"
     >
       <svg
-        class="css-2wjlk2"
+        class="css-lo1jj5"
         fill="currentColor"
         height="40"
         viewBox="0 0 157 40"
@@ -34,7 +34,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -60,7 +60,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -86,7 +86,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -112,7 +112,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -138,7 +138,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -166,7 +166,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -192,7 +192,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -222,12 +222,12 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       </div>
     </div>
     <hr
-      class="ucl-divider css-wwimuq"
+      class="ucl-divider css-syfd3l"
       data-testid="ucl-divider"
       role="separator"
     />
     <div
-      class="css-1ah386p"
+      class="css-1qgjvo4"
     >
       <span
         class="css-13yf1i2"
@@ -252,7 +252,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       class="css-1k5afze"
     >
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://dictionary.cambridge.org/dictionary/english/disclaimer"
         rel="noopener noreferrer"
         target="_blank"
@@ -260,7 +260,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Disclaimer
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.legislation.gov.uk/ukpga/2000/36/contents"
         rel="noopener noreferrer"
         target="_blank"
@@ -268,7 +268,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Freedom of Information
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://developer.mozilla.org/en-US/docs/Web/Accessibility"
         rel="noopener noreferrer"
         target="_blank"
@@ -276,7 +276,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Accessibility
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://en.wikipedia.org/wiki/HTTP_cookie"
         rel="noopener noreferrer"
         target="_blank"
@@ -284,7 +284,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Cookies
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://dictionary.cambridge.org/dictionary/english/privacy"
         rel="noopener noreferrer"
         target="_blank"
@@ -292,7 +292,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         Privacy
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://modern-slavery-statement-registry.service.gov.uk/"
         rel="noopener noreferrer"
         target="_blank"
@@ -306,7 +306,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
 
 exports[`Footer > snapshot: nav links 1`] = `
 <footer
-  class="ucl-uikit-footer css-mq639a"
+  class="ucl-uikit-footer css-aro7ng"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -325,14 +325,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 1
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1lqzzng"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1bu3np"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1lqzzng"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1bu3np"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -349,14 +349,14 @@ exports[`Footer > snapshot: nav links 1`] = `
           Category 2
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1lqzzng"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1bu3np"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
           Item 1
         </a>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1lqzzng"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-1bu3np"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -368,7 +368,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       class="css-1h8jsb3"
     >
       <svg
-        class="css-2wjlk2"
+        class="css-lo1jj5"
         fill="currentColor"
         height="40"
         viewBox="0 0 157 40"
@@ -387,7 +387,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -413,7 +413,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -439,7 +439,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -465,7 +465,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -491,7 +491,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -519,7 +519,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -545,7 +545,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -575,12 +575,12 @@ exports[`Footer > snapshot: nav links 1`] = `
       </div>
     </div>
     <hr
-      class="ucl-divider css-wwimuq"
+      class="ucl-divider css-syfd3l"
       data-testid="ucl-divider"
       role="separator"
     />
     <div
-      class="css-1ah386p"
+      class="css-1qgjvo4"
     >
       <span
         class="css-13yf1i2"
@@ -605,7 +605,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       class="css-1k5afze"
     >
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
         rel="noopener noreferrer"
         target="_blank"
@@ -613,7 +613,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Disclaimer
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/foi"
         rel="noopener noreferrer"
         target="_blank"
@@ -621,7 +621,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Freedom of Information
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/accessibility"
         rel="noopener noreferrer"
         target="_blank"
@@ -629,7 +629,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Accessibility
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
         rel="noopener noreferrer"
         target="_blank"
@@ -637,7 +637,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Cookies
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/legal-services/privacy"
         rel="noopener noreferrer"
         target="_blank"
@@ -645,7 +645,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         Privacy
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
         rel="noopener noreferrer"
         target="_blank"
@@ -659,7 +659,7 @@ exports[`Footer > snapshot: nav links 1`] = `
 
 exports[`Footer > snapshot: no nav links 1`] = `
 <footer
-  class="ucl-uikit-footer css-mq639a"
+  class="ucl-uikit-footer css-aro7ng"
   data-testid="ucl-uikit-footer"
 >
   <div
@@ -672,7 +672,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       class="css-1h8jsb3"
     >
       <svg
-        class="css-2wjlk2"
+        class="css-lo1jj5"
         fill="currentColor"
         height="40"
         viewBox="0 0 157 40"
@@ -691,7 +691,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       >
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -717,7 +717,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Flickr"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.flickr.com/groups/ucl/"
           target="_blank"
@@ -743,7 +743,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="TikTok"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -769,7 +769,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="YouTube"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -795,7 +795,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="SoundCloud"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -823,7 +823,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="X social media platform"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://x.com/ucl"
           target="_blank"
@@ -849,7 +849,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-bt3qf5"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-tc3pyp"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -879,12 +879,12 @@ exports[`Footer > snapshot: no nav links 1`] = `
       </div>
     </div>
     <hr
-      class="ucl-divider css-wwimuq"
+      class="ucl-divider css-syfd3l"
       data-testid="ucl-divider"
       role="separator"
     />
     <div
-      class="css-1ah386p"
+      class="css-1qgjvo4"
     >
       <span
         class="css-13yf1i2"
@@ -909,7 +909,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       class="css-1k5afze"
     >
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/legal-services/disclaimer"
         rel="noopener noreferrer"
         target="_blank"
@@ -917,7 +917,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Disclaimer
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/foi"
         rel="noopener noreferrer"
         target="_blank"
@@ -925,7 +925,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Freedom of Information
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/accessibility"
         rel="noopener noreferrer"
         target="_blank"
@@ -933,7 +933,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Accessibility
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/legal-services/privacy/cookie-policy"
         rel="noopener noreferrer"
         target="_blank"
@@ -941,7 +941,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Cookies
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/legal-services/privacy"
         rel="noopener noreferrer"
         target="_blank"
@@ -949,7 +949,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         Privacy
       </a>
       <a
-        class="css-16lix8i"
+        class="css-o22h86"
         href="https://www.ucl.ac.uk/commercial-procurement/modern-day-slavery-statement"
         rel="noopener noreferrer"
         target="_blank"

package/lib/components/FooterNew/BackToTop.tsx

@@ -46,7 +46,7 @@ const BackToTop = ({
     display: inline;
     background-color: transparent;
     border: none;
-    color: ${theme.colour.link.inverse};
+    color: ${theme.colour.text.brandInverse};
     font-family: ${theme.typography.body.md.fontFamily};
     font-size: 14px;
     line-height: ${theme.typography.body.md.lineHeight}%;

package/lib/components/FooterNew/FooterColumn.tsx

@@ -41,7 +41,6 @@ const FooterColumn = ({
       margin-top: 0;
       margin-bottom: 0;
       flex: 0 0 200px;
-      /* background-color: rgba(255, 255, 255, 0.1); */
 
       :not(:first-child) {
         margin-top: 0;
@@ -57,7 +56,7 @@ const FooterColumn = ({
 
   const headingStyle = css`
     margin: 0;
-    color: #fafafa;
+    color: ${theme.colour.text.brandInverse};
     font-family: ${theme.typography.body.mdSemibold.fontFamily};
     font-weight: ${theme.typography.body.mdSemibold.fontWeight};
     font-size: ${theme.typography.body.mdSemibold.fontSize}px;

package/lib/components/FooterNew/FooterNavLink.tsx

@@ -20,11 +20,12 @@ const FooterNavLink = ({
 
   const baseStyle = css`
     text-decoration: none;
-    color: #fafafa; // todo: fix ${theme.colour.text.brandInverse};
+    color: ${theme.colour.text.brandInverse};
     font-family: ${theme.typography.body.md.fontFamily};
     font-size: 14px;
-    line-height: ${theme.typography.body.md
-      .lineHeight}%; // todo: change foundations lib to use non-percent number
+    line-height: ${
+      theme.typography.body.md.lineHeight
+    }%; // todo: change foundations lib to use non-percent number
     transition: color 0.2s ease-out;
 
     &:focus-visible {
@@ -33,12 +34,12 @@ const FooterNavLink = ({
     }
 
     &:visited {
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.brandInverse};
     }
 
     &:hover {
       text-decoration: underline;
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.brandInverse};
     }
 
     @media screen and (min-width: ${theme.breakpoints.desktop}px) {

package/lib/components/FooterNew/LegalAndCopyright.tsx

@@ -78,7 +78,7 @@ const LegalAndCopyright = ({
 
   const copyrightStyle = css`
     margin-top: ${theme.margin.m24};
-    color: ${theme.colour.text.inverse};
+    color: ${theme.colour.text.brandInverse};
     opacity: 0.6; // todo
     font-family: ${theme.typography.body.md.fontFamily};
     line-height: ${theme.typography.body.md.lineHeight}%;
@@ -100,48 +100,48 @@ const LegalAndCopyright = ({
         <a
           className={linkStyle}
           href={disclaimer}
-          target="_blank"
-          rel="noopener noreferrer"
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Disclaimer
         </a>
         <a
           className={linkStyle}
           href={freedomOfInformation}
-          target="_blank"
-          rel="noopener noreferrer"
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Freedom of Information
         </a>
         <a
           className={linkStyle}
           href={accessibility}
-          target="_blank"
-          rel="noopener noreferrer"
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Accessibility
         </a>
         <a
           className={linkStyle}
           href={cookies}
-          target="_blank"
-          rel="noopener noreferrer"
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Cookies
         </a>
         <a
           className={linkStyle}
           href={privacy}
-          target="_blank"
-          rel="noopener noreferrer"
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Privacy
         </a>
         <a
           className={linkStyle}
           href={slaveryStatement}
-          target="_blank"
-          rel="noopener noreferrer"
+          target='_blank'
+          rel='noopener noreferrer'
         >
           Slavery statement
         </a>
@@ -149,8 +149,8 @@ const LegalAndCopyright = ({
           <a
             className={linkStyle}
             href={login}
-            target="_blank"
-            rel="noopener noreferrer"
+            target='_blank'
+            rel='noopener noreferrer'
           >
             Login
           </a>

package/lib/components/FooterNew/LogoAddressAndSocial.tsx

@@ -61,11 +61,12 @@ const LogoAddressAndSocial = ({
   `;
 
   const addressStyle = css`
-    color: ${theme.colour.text.inverse};
+    color: ${theme.colour.text.brandInverse};
     opacity: 0.6; // todo: use alpha white colour from theme
     font-family: ${theme.typography.body.md.fontFamily};
-    line-height: ${theme.typography.body.md
-      .lineHeight}%; // todo: change foundations lib to use non-percent number
+    line-height: ${
+      theme.typography.body.md.lineHeight
+    }%; // todo: change foundations lib to use non-percent number
   `;
 
   const telephoneStyle = css`
@@ -73,11 +74,12 @@ const LogoAddressAndSocial = ({
   `;
 
   const telephoneLinkStyle = css`
-    color: ${theme.colour.text.inverse};
+    color: ${theme.colour.text.brandInverse};
     opacity: 0.6; // todo: use alpha white colour from theme
     font-family: ${theme.typography.body.md.fontFamily};
-    line-height: ${theme.typography.body.md
-      .lineHeight}%; // todo: change foundations lib to use non-percent number
+    line-height: ${
+      theme.typography.body.md.lineHeight
+    }%; // todo: change foundations lib to use non-percent number
     text-decoration: none;
     transition: color 0.2s ease-out;
 

package/lib/components/FooterNew/SocialLink.tsx

@@ -51,7 +51,7 @@ const SocialLink = ({
     width: 36px;
     height: 36px;
     box-sizing: border-box;
-    color: ${theme.colour.icon.inverse};
+    color: ${theme.colour.icon.brandInverse};
     border: 1px solid ${theme.colour.border.brandInverseSecondary};
     transition: color 0.2s ease-out;
     display: inline-flex;
@@ -60,7 +60,7 @@ const SocialLink = ({
 
     &:visited,
     &:active {
-      color: ${theme.colour.icon.inverse};
+      color: ${theme.colour.icon.brandInverse};
     }
 
     &:focus-visible {
@@ -69,8 +69,8 @@ const SocialLink = ({
     }
 
     &:hover {
-      color: ${theme.colour.icon.inverse};
-      background-color: ${theme.colour.fill.brandInverseSecondary};
+      color: ${theme.colour.icon.brandInverse};
+      background-color: ${theme.colour.fill.inverseHover};
     }
   `;