uikit-react-public 0.37.2 → 0.38.1

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`

package/lib/components/HeaderDraft/HeaderBreadcrumb.tsx

@@ -19,7 +19,7 @@ const HeaderBreadcrumb = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     font-size: ${theme.font.size.f14};
   `;
 
@@ -32,14 +32,14 @@ const HeaderBreadcrumb = ({
       }
 
       &:hover {
-        color: ${theme.color.neutral.black};
+        color: ${theme.colour.text.default};
         text-decoration: underline;
       }
     }
   `;
 
   const nonLinkStyle = css`
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
     font-weight: 700;
   `;
 
@@ -48,7 +48,7 @@ const HeaderBreadcrumb = ({
   const chevronIconStyle = css`
     margin-left: ${theme.margin.m8};
     vertical-align: middle;
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/HeaderDraft/HeaderDraft.tsx

@@ -56,7 +56,7 @@ const HeaderDraft = ({
   });
 
   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;
@@ -88,8 +88,8 @@ const HeaderDraft = ({
   const topStyle = css`
     position: relative;
     height: ${HEADER_TOP_HEIGHT}px;
-    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;
@@ -115,8 +115,8 @@ const HeaderDraft = ({
     right: 60px;
     height: 40px;
     padding: 0 ${theme.padding.p16};
-    background-color: ${theme.color.neutral.white};
-    color: ${theme.color.text.primary};
+    background-color: ${theme.colour.surface.default};
+    color: ${theme.colour.text.default};
     font-size: ${theme.font.size.f16};
     font-weight: 700;
     border: none;
@@ -128,8 +128,8 @@ const HeaderDraft = ({
       color 0.15s ease-out;
 
     &:hover {
-      color: ${theme.color.text.primary};
-      background-color: ${theme.color.neutral.grey5};
+      color: ${theme.colour.text.default};
+      background-color: ${theme.colour.fill.brandSubtleHover};
     }
   `;
 

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

@@ -2,11 +2,11 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-1crtzt6"
+  class="ucl-uikit-header css-16ajjjr"
   data-testid="ucl-uikit-header"
 >
   <div
-    class="css-1gacr1v"
+    class="css-1w82olg"
   >
     <svg
       class="css-y3m4z0"
@@ -43,7 +43,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
       </h2>
     </div>
     <div
-      class="css-cgj2nd"
+      class="css-1ptdzcv"
     >
       <div
         class="css-se18zh"
@@ -93,11 +93,11 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-1crtzt6"
+  class="ucl-uikit-header css-16ajjjr"
   data-testid="ucl-uikit-header"
 >
   <div
-    class="css-1gacr1v"
+    class="css-1w82olg"
   >
     <svg
       class="css-y3m4z0"

package/lib/components/HeaderNew/Header.tsx

@@ -42,7 +42,7 @@ const Header = ({
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    color: ${theme.color.text.inverted};
+    color: ${theme.colour.text.brandPrimary};
     display: flex;
     align-items: center;
     height: ${HEADER_MOBILE_HEIGHT_PX}px;
@@ -52,7 +52,7 @@ const Header = ({
     @media (min-width: ${theme.breakpoints.desktop}px) {
       height: ${HEADER_TABLET_HEIGHT_PX}px;
       padding: 0 ${theme.padding.p48} 0 ${theme.padding.p64};
-      border-bottom: 1px solid ${theme.colour.border.default};
+      border-bottom: 1px solid ${theme.colour.border.subtle};
     }
   `;
 

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

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-11a9sn4"
+  class="ucl-uikit-header css-1nmwv3y"
   data-testid="ucl-uikit-header"
 >
   <div
@@ -41,7 +41,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-11a9sn4"
+  class="ucl-uikit-header css-1nmwv3y"
   data-testid="ucl-uikit-header"
 >
   <div

package/lib/components/Input/Input.tsx

@@ -54,13 +54,13 @@ const Input = forwardRef<Ref, InputProps>(
       box-sizing: border-box;
       font-family: ${theme.font.family.primary};
       font-size: ${theme.font.size.f16};
-      color: ${theme.color.text.primary};
-      background-color: ${theme.color.neutral.white};
-      border: ${theme.border.b1} solid ${theme.color.neutral.grey60};
+      color: ${theme.colour.text.default};
+      background-color: ${theme.colour.fill.inverse};
+      border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
       outline: none;
 
       &::placeholder {
-        color: ${theme.color.text.muted};
+        color: ${theme.colour.text.tertiary};
       }
     `;
 
@@ -71,8 +71,8 @@ const Input = forwardRef<Ref, InputProps>(
     `;
 
     const disabledStyle = css`
-      color: ${theme.color.text.disabled};
-      border-color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.text.disabled};
+      border-color: ${theme.colour.border.disabled};
       cursor: not-allowed;
     `;