uikit-react-public 0.37.2 → 0.38.0

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};
     }
   `;
 

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

@@ -29,7 +29,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         class="css-x7g5ai"
       >
         <div
-          class="css-hv3fjn"
+          class="css-zrpfhw"
         >
           University College London
           <br />
@@ -39,7 +39,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
           class="css-ems5xl"
         >
           <a
-            class="css-1elkdu3"
+            class="css-iyfaeh"
             href="tel:+4402076792000"
           >
             Tel: +44 (0) 20 7679 2000
@@ -51,7 +51,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       >
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -80,7 +80,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="LinkedIn"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.linkedin.com/school/university-college-london/"
           target="_blank"
@@ -108,7 +108,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -134,7 +134,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -160,7 +160,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -186,7 +186,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Bluesky"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://bsky.app/profile/ucl.ac.uk"
           target="_blank"
@@ -212,7 +212,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
         </a>
         <a
           aria-label="Threads"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.threads.com/@ucl"
           target="_blank"
@@ -239,7 +239,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -273,7 +273,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
     data-testid="ucl-uikit-footer__back-to-top"
   >
     <button
-      class="css-zla959"
+      class="css-18idfzv"
     >
       Back to top 
       <svg
@@ -353,7 +353,7 @@ exports[`Footer > snapshot: footer links provided 1`] = `
       </a>
     </div>
     <div
-      class="css-4n563l"
+      class="css-i2x11w"
     >
       © 
       2026
@@ -376,23 +376,23 @@ exports[`Footer > snapshot: nav links 1`] = `
       data-testid="ucl-uikit-footer__links"
     >
       <div
-        class="ucl-uikit-footer__column css-1jpmiw0"
+        class="ucl-uikit-footer__column css-1qdqdud"
         data-testid="ucl-uikit-footer__column"
       >
         <h3
-          class="css-fab13s"
+          class="css-18ul2r4"
         >
           Category 1
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-55xi1m"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-138c06l"
           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-55xi1m"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-138c06l"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -400,23 +400,23 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
       </div>
       <div
-        class="ucl-uikit-footer__column css-1jpmiw0"
+        class="ucl-uikit-footer__column css-1qdqdud"
         data-testid="ucl-uikit-footer__column"
       >
         <h3
-          class="css-fab13s"
+          class="css-18ul2r4"
         >
           Category 2
         </h3>
         <a
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-55xi1m"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-138c06l"
           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-55xi1m"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__nav-link css-138c06l"
           data-testid="ucl-uikit-footer__nav-link"
           href="#"
         >
@@ -445,7 +445,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         class="css-x7g5ai"
       >
         <div
-          class="css-hv3fjn"
+          class="css-zrpfhw"
         >
           University College London
           <br />
@@ -455,7 +455,7 @@ exports[`Footer > snapshot: nav links 1`] = `
           class="css-ems5xl"
         >
           <a
-            class="css-1elkdu3"
+            class="css-iyfaeh"
             href="tel:+4402076792000"
           >
             Tel: +44 (0) 20 7679 2000
@@ -467,7 +467,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       >
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -496,7 +496,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="LinkedIn"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.linkedin.com/school/university-college-london/"
           target="_blank"
@@ -524,7 +524,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -550,7 +550,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -576,7 +576,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -602,7 +602,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Bluesky"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://bsky.app/profile/ucl.ac.uk"
           target="_blank"
@@ -628,7 +628,7 @@ exports[`Footer > snapshot: nav links 1`] = `
         </a>
         <a
           aria-label="Threads"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.threads.com/@ucl"
           target="_blank"
@@ -655,7 +655,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -689,7 +689,7 @@ exports[`Footer > snapshot: nav links 1`] = `
     data-testid="ucl-uikit-footer__back-to-top"
   >
     <button
-      class="css-zla959"
+      class="css-18idfzv"
     >
       Back to top 
       <svg
@@ -769,7 +769,7 @@ exports[`Footer > snapshot: nav links 1`] = `
       </a>
     </div>
     <div
-      class="css-4n563l"
+      class="css-i2x11w"
     >
       © 
       2026
@@ -808,7 +808,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         class="css-x7g5ai"
       >
         <div
-          class="css-hv3fjn"
+          class="css-zrpfhw"
         >
           University College London
           <br />
@@ -818,7 +818,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
           class="css-ems5xl"
         >
           <a
-            class="css-1elkdu3"
+            class="css-iyfaeh"
             href="tel:+4402076792000"
           >
             Tel: +44 (0) 20 7679 2000
@@ -830,7 +830,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       >
         <a
           aria-label="Instagram"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.instagram.com/ucl/"
           target="_blank"
@@ -859,7 +859,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="LinkedIn"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.linkedin.com/school/university-college-london/"
           target="_blank"
@@ -887,7 +887,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.youtube.com/ucltv"
           target="_blank"
@@ -913,7 +913,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.tiktok.com/@uclofficial"
           target="_blank"
@@ -939,7 +939,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Facebook"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.facebook.com/uclofficial/"
           target="_blank"
@@ -965,7 +965,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Bluesky"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://bsky.app/profile/ucl.ac.uk"
           target="_blank"
@@ -991,7 +991,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
         </a>
         <a
           aria-label="Threads"
-          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://www.threads.com/@ucl"
           target="_blank"
@@ -1018,7 +1018,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-41h657"
+          class="ucl-uikit-base-link ucl-uikit-link ucl-uikit-footer__social-link css-1x2yumo"
           data-testid="ucl-uikit-footer__social-link"
           href="https://soundcloud.com/uclsound"
           target="_blank"
@@ -1052,7 +1052,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
     data-testid="ucl-uikit-footer__back-to-top"
   >
     <button
-      class="css-zla959"
+      class="css-18idfzv"
     >
       Back to top 
       <svg
@@ -1132,7 +1132,7 @@ exports[`Footer > snapshot: no nav links 1`] = `
       </a>
     </div>
     <div
-      class="css-4n563l"
+      class="css-i2x11w"
     >
       © 
       2026

package/lib/components/Header/Header.tsx

@@ -39,15 +39,15 @@ const Header = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.surface.default};
     font-family: ${theme.font.family.primary};
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     position: relative;
-    background-color: ${theme.color.neutral.grey90};
-    color: ${theme.color.text.inverted};
+    background-color: ${theme.colour.surface.inverseBrandPrimary};
+    color: ${theme.colour.text.brandInverse};
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-bvzw7v"
+  class="ucl-uikit-header css-u33frp"
   data-testid="ucl-uikit-header"
 >
   <svg
@@ -30,7 +30,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-bvzw7v"
+  class="ucl-uikit-header css-u33frp"
   data-testid="ucl-uikit-header"
 >
   <svg

package/lib/components/HeaderDraft/HeaderBottomBreadcrumbs.tsx

@@ -4,8 +4,7 @@ import { useTheme } from '../..';
 
 export const NAME = 'ucl-uikit-header__bottom--breadcrumbs';
 
-export interface HeaderBottomBreadcrumbsProps
-  extends HTMLAttributes<HTMLElement> {
+export interface HeaderBottomBreadcrumbsProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
@@ -18,10 +17,10 @@ const HeaderBottomBreadcrumbs = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     padding: ${theme.padding.p16} 60px;
     box-sizing: border-box;
-    border-bottom: 1px solid ${theme.color.neutral.grey15};
+    border-bottom: 1px solid ${theme.colour.border.subtle};
     font-size: ${theme.font.size.f14};
   `;
 

package/lib/components/HeaderDraft/HeaderBottomHeadingAndAvatar.tsx

@@ -30,10 +30,10 @@ const Header = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     padding: ${theme.padding.p20} 60px;
     box-sizing: border-box;
-    border-bottom: 1px solid ${theme.color.neutral.grey15};
+    border-bottom: 1px solid ${theme.colour.border.subtle};
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -54,7 +54,7 @@ const Header = ({
 
   const subheadingStyle = css`
     margin: ${theme.margin.m8} 0 0 0;
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     font-size: ${theme.font.size.f16};
     font-weight: 400;
     line-height: 16px;
@@ -65,7 +65,7 @@ const Header = ({
     margin-bottom: -4px;
     margin-right: -${theme.padding.p8}; // subtract padding-right
     padding: ${theme.padding.p8} ${theme.padding.p8};
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -73,7 +73,7 @@ const Header = ({
     transition: background-color 0.15s ease-out;
 
     &:hover {
-      background-color: ${theme.color.neutral.grey5};
+      background-color: ${theme.colour.fill.brandSubtleHover};
     }
   `;
 
@@ -92,7 +92,7 @@ const Header = ({
   const nameAndRoleStyle = css`
     flex: 1;
     font-size: ${theme.font.size.f14};
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
   `;
 
   const nameStyle = css`
@@ -100,7 +100,7 @@ const Header = ({
   `;
 
   const roleStyle = css`
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
   `;
 
   const chevronStyle = css`