uikit-react-public 0.40.0 → 0.40.2

package/lib/components/AppHeader/AppHeader.stories.tsx

@@ -27,7 +27,7 @@ export const WithBreadcrumbs: Story = {
 
     // This ought to be done in`<Breadcrumb>`or in `<AppHeader.Bottom>`!
     const invertedTextStyle = css`
-      color: ${theme.colour.text.inverse};
+      color: ${theme.color.text.inverted};
     `;
 
     return (
@@ -60,7 +60,7 @@ export const WithMultipleBreadcrumbs: Story = {
   render: () => {
     const [theme] = useTheme();
     const invertedTextStyle = css`
-      color: ${theme.colour.text.inverse};
+      color: ${theme.color.text.inverted};
     `;
     return (
       <AppHeader>
@@ -92,7 +92,7 @@ export const WithAppMenu: Story = {
     `;
 
     const invertedTextStyle = css`
-      color: ${theme.colour.text.inverse};
+      color: ${theme.color.text.inverted};
     `;
 
     return (

package/lib/components/AppHeader/AppHeader.tsx

@@ -30,8 +30,9 @@ const AppHeader = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    background-color: ${theme.colour.surface.default};
-    color: ${theme.colour.text.default};
+    background-color: ${theme.color.neutral.white};
+    color: ${theme.color.text.primary};
+    font-family: ${theme.font.family.primary};
   `;
 
   const fixedStyle = css`

package/lib/components/AppHeader/AppHeaderBottom.tsx

@@ -24,8 +24,10 @@ const AppHeaderBottom = ({
     line-height: 48px;
     display: flex;
     align-items: center;
-    background-color: ${theme.colour.surface.inverseBrandPrimary};
-    color: ${theme.colour.text.brandInverse};
+    background-color: ${
+      theme.color.display.greenDark
+    }; // default header/logo colour
+    color: inherit;
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/AppHeader/AppHeaderTop.tsx

@@ -35,7 +35,7 @@ const AppHeaderTop = ({
     margin-left: auto;
     margin-top: 20px;
     height: 36px;
-    color: ${theme.colour.text.brandPrimary};
+    color: ${theme.color.display.greenDark}; // default header/logo colour
   `;
 
   const uclLogoStyle = cx(uclLogoBaseStyle, logoClassName);

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

@@ -2,7 +2,7 @@
 
 exports[`AppHeader > snapshot: no props 1`] = `
 <div
-  class="ucl-uikit-app-header css-1xtg6wh"
+  class="ucl-uikit-app-header css-14i4gnx"
   data-testid="ucl-uikit-app-header"
 />
 `;

package/lib/components/AppMenu/AppMenuContent.tsx

@@ -40,12 +40,12 @@ const AppMenuContent: React.FC<AppMenuContentProps> = ({
     min-width: 140px;
     white-space: nowrap;
     cursor: default;
-    background-color: ${theme.colour.surface.default};
+    background-color: white;
     box-shadow: ${theme.boxShadow.y1};
-    border: ${theme.border.b1} solid ${theme.colour.border.disabled};
+    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
     padding-left: 0;
     padding-right: 0;
-    color: ${theme.colour.text.default};
+    color: ${theme.color.text.primary};
     list-style: none;
 
     @media (max-width: ${theme.breakpoints.desktop}px) {

package/lib/components/AppMenu/AppMenuDivider.tsx

@@ -22,7 +22,7 @@ const AppMenuDivider: React.FC<AppMenuDividerProps> = ({
     margin: 0;
     height: 1px;
     border: none;
-    background-color: ${theme.colour.border.disabled};
+    background-color: ${theme.color.neutral.grey20};
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/AppMenu/AppMenuItem.tsx

@@ -59,13 +59,13 @@ const AppMenuItem: React.FC<AppMenuItemProps> = ({
     font-size: ${mdSemibold.fontSize}px;
     font-weight: ${mdSemibold.fontWeight};
     line-height: ${mdSemibold.lineHeight}%;
-    color: ${theme.colour.text.secondary};
+    color: ${theme.color.text.secondary};
   `;
 
   const clickableMenuItemStyle = css`
-    color: ${theme.colour.text.default};
+    color: ${theme.color.text.primary};
     &:hover {
-      background-color: ${theme.colour.surface.brandSecondary};
+      background-color: ${theme.color.interaction.blue5};
     }
     &:focus-visible {
       outline: none;
@@ -76,16 +76,16 @@ const AppMenuItem: React.FC<AppMenuItemProps> = ({
 
   const menuLinkStyle = css`
     text-decoration: none;
-    color: ${theme.colour.text.default};
+    color: ${theme.color.text.primary};
     display: flex;
     align-items: center;
     width: 100%;
     height: 100%;
     &:hover {
-      background-color: ${theme.colour.surface.brandSecondary};
+      background-color: ${theme.color.interaction.blue5};
     }
     &:visited {
-      color: ${theme.colour.text.default};
+      color: ${theme.color.text.primary};
     }
     &:focus-visible {
       outline: none;

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

@@ -36,7 +36,7 @@ exports[`AppMenu > snapshot: defaultOpen prop 1`] = `
   </button>
   <ul
     aria-labelledby="app-menu-button"
-    class="ucl-app-menu__content css-1r69pxi"
+    class="ucl-app-menu__content css-63xuy3"
     data-testid="ucl-app-menu__content"
     id="app-menu"
     role="menu"

package/lib/components/Footer/Footer.tsx

@@ -34,8 +34,8 @@ const Footer = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    background-color: ${theme.colour.surface.inverseBrandPrimary};
-    color: ${theme.colour.text.brandInverse};
+    background-color: ${theme.color.neutral.grey90};
+    color: ${theme.color.text.inverted};
     font-family: ${theme.font.family.primary};
     font-weight: 300;
     padding: ${theme.padding.p40} 0 ${theme.padding.p40};
@@ -70,7 +70,7 @@ const Footer = ({
 
   const uclLogoStyle = css`
     height: 32px;
-    color: ${theme.colour.icon.brandInverse};
+    color: ${theme.color.neutral.grey90};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       margin-right: auto;
@@ -91,7 +91,7 @@ const Footer = ({
 
   const contactInfoAndCopyrightStyle = css`
     padding: ${theme.padding.p12} 0;
-    color: ${theme.colour.text.brandInverseSecondary};
+    color: ${theme.color.neutral.grey20};
     display: flex;
     flex-direction: column;
     font-size: ${theme.font.size.f14};
@@ -151,7 +151,7 @@ const Footer = ({
     margin-bottom: ${theme.margin.m8};
     margin-right: ${theme.margin.m32};
     text-decoration: none;
-    color: ${theme.colour.link.inverseSecondary};
+    color: ${theme.color.neutral.grey20};
     transition: color 0.2s ease-out;
 
     &:focus-visible {

package/lib/components/Footer/FooterNavLink.tsx

@@ -21,7 +21,7 @@ const FooterNavLink = ({
   const baseStyle = css`
     margin: ${theme.margin.m8} 0;
     text-decoration: none;
-    color: ${theme.colour.text.brandInverse};
+    color: ${theme.color.text.inverted};
     transition: color 0.2s ease-out;
 
     &:focus-visible {
@@ -30,12 +30,12 @@ const FooterNavLink = ({
     }
 
     &:visited {
-      color: ${theme.colour.text.brandInverse};
+      color: ${theme.color.text.inverted};
     }
 
     &:hover {
       text-decoration: underline;
-      color: ${theme.colour.text.brandInverse};
+      color: ${theme.color.text.inverted};
     }
   `;
 

package/lib/components/Footer/SocialLink.tsx

@@ -49,7 +49,7 @@ const SocialLink = ({
     height: ${theme.height.h24};
     border-radius: ${theme.radius.r8};
     margin-left: ${theme.margin.m12};
-    color: ${theme.colour.icon.brandInverse};
+    color: ${theme.color.text.inverted};
     transition: color 0.2s ease-out;
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
@@ -58,7 +58,7 @@ const SocialLink = ({
 
     &:visited,
     &:active {
-      color: ${theme.colour.icon.brandInverse};
+      color: ${theme.color.text.inverted};
     }
 
     &:focus-visible {
@@ -67,7 +67,7 @@ const SocialLink = ({
     }
 
     &:hover {
-      color: ${theme.colour.icon.brandInverseSecondaryHover};
+      color: ${theme.color.neutral.grey20};
     }
   `;