uikit-react-public 0.37.0 → 0.38.0

package/dist/theme/dark/darkColour.d.ts

@@ -52,6 +52,7 @@ declare const colour: {
         cautionPressed: string;
         cautionSubtle: string;
         warningSubtle: string;
+        warning: string;
         success: string;
         successSubtle: string;
     };

package/dist/theme/index.d.ts

@@ -1,7 +1,7 @@
 export { default as theme } from './original/defaultTheme';
 export { default as lightTheme } from './light/lightTheme';
 export { default as darkTheme } from './dark/darkTheme';
-export type { ThemeType, DisplayColoursType, BlackAndWhiteColoursType, } from './original/defaultTheme';
+export type { ThemeType, LogoVariant, DisplayColoursType, BlackAndWhiteColoursType, } from './original/defaultTheme';
 export { default as useTheme, ThemeContextProvider, ThemeContextConsumer, ThemeConsumer, themes, } from './useTheme';
 export type { ThemeName } from './useTheme';
 export { uikitFontUrls, uikitFonts } from './fonts';

package/dist/theme/light/lightColour.d.ts

@@ -52,6 +52,7 @@ declare const colour: {
         cautionPressed: string;
         cautionSubtle: string;
         warningSubtle: string;
+        warning: string;
         success: string;
         successSubtle: string;
     };

package/dist/theme/original/defaultTheme.d.ts

@@ -1,4 +1,5 @@
 import { blackAndWhite, displayColours } from './color';
+export type LogoVariant = 'primary' | 'secondary' | 'primary-inverse' | 'secondary-inverse';
 declare const theme: {
     p0: number;
     p2: string;
@@ -752,6 +753,7 @@ declare const theme: {
             cautionPressed: string;
             cautionSubtle: string;
             warningSubtle: string;
+            warning: string;
             success: string;
             successSubtle: string;
         };
@@ -841,6 +843,11 @@ declare const theme: {
             inputDefault: string;
         };
     };
+    logo: {
+        ucl: {
+            variant: LogoVariant;
+        };
+    };
     typography: {
         heading: {
             xxl: {

package/dist/theme/original/originalColourNewStructure.d.ts

@@ -52,6 +52,7 @@ declare const colour: {
         cautionPressed: string;
         cautionSubtle: string;
         warningSubtle: string;
+        warning: string;
         success: string;
         successSubtle: string;
     };

package/dist/theme/useTheme.d.ts

@@ -764,6 +764,7 @@ declare const useTheme: () => [{
             cautionPressed: string;
             cautionSubtle: string;
             warningSubtle: string;
+            warning: string;
             success: string;
             successSubtle: string;
         };
@@ -853,6 +854,11 @@ declare const useTheme: () => [{
             inputDefault: string;
         };
     };
+    logo: {
+        ucl: {
+            variant: import('.').LogoVariant;
+        };
+    };
     typography: {
         heading: {
             xxl: {
@@ -2078,6 +2084,7 @@ declare const useTheme: () => [{
             cautionPressed: string;
             cautionSubtle: string;
             warningSubtle: string;
+            warning: string;
             success: string;
             successSubtle: string;
         };
@@ -2167,6 +2174,11 @@ declare const useTheme: () => [{
             inputDefault: string;
         };
     };
+    logo: {
+        ucl: {
+            variant: import('.').LogoVariant;
+        };
+    };
     typography: {
         heading: {
             xxl: {

package/lib/components/Alert/AlertMessage.tsx

@@ -1,11 +1,10 @@
 import { css, cx } from '@emotion/css';
-import { theme } from '../../theme';
+import { useTheme } from '../../theme';
 import { HTMLAttributes } from 'react';
 
 export const NAME = 'ucl-uikit-alert__message';
 
-export interface AlertMessageProps
-  extends HTMLAttributes<HTMLParagraphElement> {
+export interface AlertMessageProps extends HTMLAttributes<HTMLParagraphElement> {
   testId?: string;
 }
 
@@ -14,9 +13,11 @@ const AlertMessage = ({
   className,
   children,
 }: AlertMessageProps) => {
+  const [theme] = useTheme();
+
   const messageStyles = css`
     font-size: ${theme.font.size.f16};
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     margin: 0;
     line-height: 1.5;
   `;

package/lib/components/Alert/AlertTitle.tsx

@@ -1,24 +1,22 @@
 import { css } from '@emotion/css';
-import { theme } from '../../theme';
+import { useTheme } from '../../theme';
 import { HTMLAttributes } from 'react';
 
 export const NAME = 'ucl-uikit-alert__title';
 
-export interface AlertTitleProps
-  extends HTMLAttributes<HTMLHeadingElement> {
+export interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   testId?: string;
 }
 
-const AlertTitle = ({
-  children,
-  testId = NAME,
-}: AlertTitleProps) => {
+const AlertTitle = ({ children, testId = NAME }: AlertTitleProps) => {
+  const [theme] = useTheme();
+
   const titleStyles = css`
     margin: 0 0 ${theme.margin.m8} 0;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
     font-weight: 700;
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
   `;
 
   return (

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.color.text.inverted};
+      color: ${theme.colour.text.inverse};
     `;
 
     return (
@@ -60,7 +60,7 @@ export const WithMultipleBreadcrumbs: Story = {
   render: () => {
     const [theme] = useTheme();
     const invertedTextStyle = css`
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.inverse};
     `;
     return (
       <AppHeader>
@@ -92,7 +92,7 @@ export const WithAppMenu: Story = {
     `;
 
     const invertedTextStyle = css`
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.inverse};
     `;
 
     return (

package/lib/components/AppHeader/AppHeader.tsx

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

package/lib/components/AppHeader/AppHeaderBottom.tsx

@@ -24,9 +24,8 @@ const AppHeaderBottom = ({
     line-height: 48px;
     display: flex;
     align-items: center;
-    background-color: ${theme.color.display
-      .greenDark}; // default header/logo colour
-    color: inherit;
+    background-color: ${theme.colour.surface.inverseBrandPrimary};
+    color: ${theme.colour.text.brandInverse};
   `;
 
   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.color.display.greenDark}; // default header/logo colour
+    color: ${theme.colour.text.brandPrimary};
   `;
 
   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-14i4gnx"
+  class="ucl-uikit-app-header css-1seij5g"
   data-testid="ucl-uikit-app-header"
 />
 `;

package/lib/components/AppMenu/AppMenuContent.tsx

@@ -9,8 +9,7 @@ import useMediaQuery from '../../hooks/useMediaQuery';
 
 export const NAME = 'ucl-app-menu__content';
 
-export interface AppMenuContentProps
-  extends LiHTMLAttributes<HTMLUListElement> {
+export interface AppMenuContentProps extends LiHTMLAttributes<HTMLUListElement> {
   testId?: string;
 }
 
@@ -41,12 +40,12 @@ const AppMenuContent: React.FC<AppMenuContentProps> = ({
     min-width: 140px;
     white-space: nowrap;
     cursor: default;
-    background-color: white;
+    background-color: ${theme.colour.surface.default};
     box-shadow: ${theme.boxShadow.y1};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    border: ${theme.border.b1} solid ${theme.colour.border.disabled};
     padding-left: 0;
     padding-right: 0;
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     list-style: none;
 
     @media (max-width: ${theme.breakpoints.desktop}px) {

package/lib/components/AppMenu/AppMenuDivider.tsx

@@ -4,11 +4,10 @@ import useTheme from '../../theme/useTheme';
 
 export const NAME = 'ucl-app-menu__divider';
 
-export interface AppMenuDividerProps
-  extends Omit<
-    HtmlHTMLAttributes<HTMLHRElement>,
-    'children'
-  > {
+export interface AppMenuDividerProps extends Omit<
+  HtmlHTMLAttributes<HTMLHRElement>,
+  'children'
+> {
   testId?: string;
 }
 
@@ -23,7 +22,7 @@ const AppMenuDivider: React.FC<AppMenuDividerProps> = ({
     margin: 0;
     height: 1px;
     border: none;
-    background-color: ${theme.color.neutral.grey20};
+    background-color: ${theme.colour.border.disabled};
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/AppMenu/AppMenuItem.tsx

@@ -55,13 +55,13 @@ const AppMenuItem: React.FC<AppMenuItemProps> = ({
     align-items: center;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    color: ${theme.color.text.secondary};
+    color: ${theme.colour.text.secondary};
   `;
 
   const clickableMenuItemStyle = css`
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     &:hover {
-      background-color: ${theme.color.interaction.blue5};
+      background-color: ${theme.colour.surface.brandSecondary};
     }
     &:focus-visible {
       outline: none;
@@ -72,16 +72,16 @@ const AppMenuItem: React.FC<AppMenuItemProps> = ({
 
   const menuLinkStyle = css`
     text-decoration: none;
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     display: flex;
     align-items: center;
     width: 100%;
     height: 100%;
     &:hover {
-      background-color: ${theme.color.interaction.blue5};
+      background-color: ${theme.colour.surface.brandSecondary};
     }
     &:visited {
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
     }
     &: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-63xuy3"
+    class="ucl-app-menu__content css-1r69pxi"
     data-testid="ucl-app-menu__content"
     id="app-menu"
     role="menu"

package/lib/components/Avatar/Avatar.tsx

@@ -72,8 +72,8 @@ const Avatar = forwardRef<Ref, AvatarProps>(
       outline: none;
       width: ${size}px;
       height: ${size}px;
-      color: ${theme.color.neutral.grey60};
-      background-color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.text.brandPrimary};
+      background-color: ${theme.colour.fill.brandSubtle};
       font-family: ${theme.font.family.primary};
       font-size: ${fontSize}px;
       cursor: pointer;
@@ -86,8 +86,8 @@ const Avatar = forwardRef<Ref, AvatarProps>(
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.color.neutral.grey5};
-      color: ${theme.color.neutral.grey20};
+      background-color: ${theme.colour.fill.disabled};
+      color: ${theme.colour.text.disabled};
       cursor: not-allowed;
     `;
 
@@ -109,7 +109,9 @@ const Avatar = forwardRef<Ref, AvatarProps>(
     // `padding-top` to prevent a thin grey line
     // from appearing at the bottom of the icon
     const iconStyle = css`
-      color: ${theme.color.neutral.white};
+      color: ${
+        disabled ? theme.colour.icon.disabled : theme.colour.icon.brandPrimary
+      };
       width: 100%;
       height: 100%;
       padding-top: 0.1em;

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

@@ -2,11 +2,11 @@
 
 exports[`Avatar > Snapshot: Default 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1kjizvt"
+    class="ucl-uikit-icon css-1jd3cs6"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -31,12 +31,12 @@ exports[`Avatar > Snapshot: Default 1`] = `
 
 exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-x8e1am"
+  class="ucl-uikit-avatar css-ucbqvu"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
   <svg
-    class="ucl-uikit-icon css-1kjizvt"
+    class="ucl-uikit-icon css-vtowat"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -61,12 +61,12 @@ exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
 
 exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-x8e1am"
+  class="ucl-uikit-avatar css-ucbqvu"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
   <svg
-    class="ucl-uikit-icon css-1kjizvt"
+    class="ucl-uikit-icon css-vtowat"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -91,11 +91,11 @@ exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
 
 exports[`Avatar > Snapshot: icon variant with no props 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1kjizvt"
+    class="ucl-uikit-icon css-1jd3cs6"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -120,7 +120,7 @@ exports[`Avatar > Snapshot: icon variant with no props 1`] = `
 
 exports[`Avatar > Snapshot: image variant with imageUrl and name props 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <img
@@ -134,7 +134,7 @@ exports[`Avatar > Snapshot: image variant with imageUrl and name props 1`] = `
 
 exports[`Avatar > Snapshot: image variant with imageUrl prop only 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <img
@@ -148,7 +148,7 @@ exports[`Avatar > Snapshot: image variant with imageUrl prop only 1`] = `
 
 exports[`Avatar > Snapshot: image variant with imageUrl, name and disabled props 1`] = `
 <button
-  class="ucl-uikit-avatar css-x8e1am"
+  class="ucl-uikit-avatar css-ucbqvu"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -163,7 +163,7 @@ exports[`Avatar > Snapshot: image variant with imageUrl, name and disabled props
 
 exports[`Avatar > Snapshot: image variant with name prop only 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <span
@@ -176,11 +176,11 @@ exports[`Avatar > Snapshot: image variant with name prop only 1`] = `
 
 exports[`Avatar > Snapshot: image variant with no props 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1kjizvt"
+    class="ucl-uikit-icon css-1jd3cs6"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"
@@ -205,7 +205,7 @@ exports[`Avatar > Snapshot: image variant with no props 1`] = `
 
 exports[`Avatar > Snapshot: initials variant with name prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <span
@@ -218,7 +218,7 @@ exports[`Avatar > Snapshot: initials variant with name prop 1`] = `
 
 exports[`Avatar > Snapshot: initials variant with name prop and disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-x8e1am"
+  class="ucl-uikit-avatar css-ucbqvu"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -232,11 +232,11 @@ exports[`Avatar > Snapshot: initials variant with name prop and disabled prop 1`
 
 exports[`Avatar > Snapshot: initials variant with no props 1`] = `
 <button
-  class="ucl-uikit-avatar css-46vibo"
+  class="ucl-uikit-avatar css-8z8m41"
   data-testid="ucl-uikit-avatar"
 >
   <svg
-    class="ucl-uikit-icon css-1kjizvt"
+    class="ucl-uikit-icon css-1jd3cs6"
     data-testid="ucl-uikit-icon"
     fill="currentColor"
     height="24"

package/lib/components/Badge/Badge.tsx

@@ -46,12 +46,12 @@ export const getBadgeVariantColours = (
   theme: ThemeType
 ): Record<BadgeVariant, BadgeVariantStyle> => ({
   info: {
-    color: theme.colour.text.inverse,
+    color: theme.colour.text.brandInverse,
     backgroundColor: theme.colour.fill.brandPrimary,
   },
   'info-subtle': {
     color: theme.colour.text.default,
-    backgroundColor: theme.primitiveColour.brandPurple['03'].$value.hex,
+    backgroundColor: theme.colour.fill.brandSubtle,
   },
   neutral: {
     color: theme.colour.text.default,
@@ -68,31 +68,31 @@ export const getBadgeVariantColours = (
   },
   'critical-subtle': {
     color: theme.colour.text.critical,
-    backgroundColor: theme.primitiveColour.red['02'].$value.hex,
+    backgroundColor: theme.colour.fill.criticalSubtle,
   },
   caution: {
-    color: theme.primitiveColour.yellow['14'].$value.hex,
-    backgroundColor: theme.primitiveColour.yellow['08'].$value.hex,
+    color: theme.colour.text.caution,
+    backgroundColor: theme.colour.fill.caution,
   },
   'caution-subtle': {
-    color: theme.primitiveColour.yellow['12'].$value.hex,
-    backgroundColor: theme.primitiveColour.yellow['05'].$value.hex,
+    color: theme.colour.text.cautionSubtle,
+    backgroundColor: theme.colour.fill.cautionSubtle,
   },
   success: {
     color: theme.colour.text.inverse,
     backgroundColor: theme.colour.fill.success,
   },
   'success-subtle': {
-    color: theme.primitiveColour.green['11'].$value.hex,
-    backgroundColor: theme.primitiveColour.green['02'].$value.hex,
+    color: theme.colour.text.success,
+    backgroundColor: theme.colour.fill.successSubtle,
   },
   warning: {
     color: theme.colour.text.inverse,
-    backgroundColor: theme.primitiveColour.orange['11'].$value.hex,
+    backgroundColor: theme.colour.fill.warning,
   },
   'warning-subtle': {
-    color: theme.primitiveColour.orange['13'].$value.hex,
-    backgroundColor: theme.primitiveColour.orange['03'].$value.hex,
+    color: theme.colour.text.warningOnBgFill,
+    backgroundColor: theme.colour.fill.warningSubtle,
   },
   disabled: {
     color: theme.colour.text.disabled,

package/lib/components/Badge/__tests__/Badge.test.tsx

@@ -1,7 +1,9 @@
 import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import { ThemeContextProvider } from '../../../theme/useTheme';
-import Badge from '../Badge';
+import darkTheme from '../../../theme/dark/darkTheme';
+import lightTheme from '../../../theme/light/lightTheme';
+import Badge, { getBadgeVariantColours } from '../Badge';
 
 const wrap = (ui: React.ReactElement) =>
   render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
@@ -138,4 +140,85 @@ describe('Badge', () => {
     const { container } = wrap(<Badge variant='success'>Text</Badge>);
     expect(container.querySelector('svg')).toBeNull();
   });
+
+  test('uses semantic colours for caution badges in dark theme', () => {
+    const colours = getBadgeVariantColours(darkTheme);
+
+    expect(colours.caution).toMatchObject({
+      color: darkTheme.colour.text.caution,
+      backgroundColor: darkTheme.colour.fill.caution,
+    });
+    expect(colours['caution-subtle']).toMatchObject({
+      color: darkTheme.colour.text.cautionSubtle,
+      backgroundColor: darkTheme.colour.fill.cautionSubtle,
+    });
+  });
+
+  test('uses semantic colours for info badges in dark theme', () => {
+    const colours = getBadgeVariantColours(darkTheme);
+
+    expect(colours.info).toMatchObject({
+      color: darkTheme.colour.text.brandInverse,
+      backgroundColor: darkTheme.colour.fill.brandPrimary,
+    });
+    expect(colours['info-subtle']).toMatchObject({
+      color: darkTheme.colour.text.default,
+      backgroundColor: darkTheme.colour.fill.brandSubtle,
+    });
+  });
+
+  test('uses semantic colours for warning badges in dark theme', () => {
+    const colours = getBadgeVariantColours(darkTheme);
+
+    expect(colours.warning).toMatchObject({
+      color: darkTheme.colour.text.inverse,
+      backgroundColor: darkTheme.colour.fill.warning,
+    });
+    expect(colours['warning-subtle']).toMatchObject({
+      color: darkTheme.colour.text.warningOnBgFill,
+      backgroundColor: darkTheme.colour.fill.warningSubtle,
+    });
+  });
+
+  test('uses semantic colours for subtle status badges in dark theme', () => {
+    const colours = getBadgeVariantColours(darkTheme);
+
+    expect(colours['critical-subtle']).toMatchObject({
+      color: darkTheme.colour.text.critical,
+      backgroundColor: darkTheme.colour.fill.criticalSubtle,
+    });
+    expect(colours['success-subtle']).toMatchObject({
+      color: darkTheme.colour.text.success,
+      backgroundColor: darkTheme.colour.fill.successSubtle,
+    });
+  });
+
+  test('uses semantic colours for info, caution, and warning badges in light theme', () => {
+    const colours = getBadgeVariantColours(lightTheme);
+
+    expect(colours.info).toMatchObject({
+      color: lightTheme.colour.text.brandInverse,
+      backgroundColor: lightTheme.colour.fill.brandPrimary,
+    });
+    expect(colours['info-subtle']).toMatchObject({
+      color: lightTheme.colour.text.default,
+      backgroundColor: lightTheme.colour.fill.brandSubtle,
+    });
+    expect(colours.caution).toMatchObject({
+      color: lightTheme.colour.text.caution,
+      backgroundColor: lightTheme.colour.fill.caution,
+    });
+    expect(colours['caution-subtle']).toMatchObject({
+      color: lightTheme.colour.text.cautionSubtle,
+      backgroundColor: lightTheme.colour.fill.cautionSubtle,
+    });
+    expect(colours.warning).toMatchObject({
+      color: lightTheme.colour.text.inverse,
+      backgroundColor: lightTheme.colour.fill.warning,
+    });
+    expect(colours['warning-subtle']).toMatchObject({
+      color: lightTheme.colour.text.warningOnBgFill,
+      backgroundColor: lightTheme.colour.fill.warningSubtle,
+    });
+  });
 });