uikit-react-public 0.32.4 → 0.36.0

package/lib/theme/dark/darkColour.ts

@@ -0,0 +1,260 @@
+import { tokens } from 'design-system-foundations-public';
+import tokenToHex from '../../utils/addAlphaToHex';
+
+const { dark: darkThemeTokens } = tokens;
+
+// UCL Dark Theme Colours
+
+const bg = {
+  default: tokenToHex(darkThemeTokens.colour.bg.default.$value),
+  brand: tokenToHex(darkThemeTokens.colour.bg.brand.$value),
+  inverse: tokenToHex(darkThemeTokens.colour.bg.inverse.$value),
+  inversePrimary: tokenToHex(
+    darkThemeTokens.colour.bg['inverse-primary'].$value
+  ),
+};
+
+const border = {
+  default: tokenToHex(darkThemeTokens.colour.border.default.$value),
+  brand: tokenToHex(darkThemeTokens.colour.border.brand.$value),
+  brandPrimary: tokenToHex(
+    darkThemeTokens.colour.border['brand-primary'].$value
+  ),
+  brandHover: tokenToHex(darkThemeTokens.colour.border['brand-hover'].$value),
+  brandSubtle: tokenToHex(darkThemeTokens.colour.border['brand-subtle'].$value),
+  primary: tokenToHex(darkThemeTokens.colour.border.primary.$value),
+  secondary: tokenToHex(darkThemeTokens.colour.border.secondary.$value),
+  tertiary: tokenToHex(darkThemeTokens.colour.border.tertiary.$value),
+  subtle: tokenToHex(darkThemeTokens.colour.border.subtle.$value),
+  disabled: tokenToHex(darkThemeTokens.colour.border.disabled.$value),
+  inverse: tokenToHex(darkThemeTokens.colour.border.inverse.$value),
+  brandInverse: tokenToHex(
+    darkThemeTokens.colour.border['brand-inverse'].$value
+  ),
+  brandInverseSecondary: tokenToHex(
+    darkThemeTokens.colour.border['brand-inverse-secondary'].$value
+  ),
+  brandInverseSecondaryHover: tokenToHex(
+    darkThemeTokens.colour.border['brand-inverse-secondary-hover'].$value
+  ),
+  brandInverseSecondarySelected: tokenToHex(
+    darkThemeTokens.colour.border['brand-inverse-secondary-selected'].$value
+  ),
+  focus: tokenToHex(darkThemeTokens.colour.border.focus.$value),
+  success: tokenToHex(darkThemeTokens.colour.border.success.$value),
+  critical: tokenToHex(darkThemeTokens.colour.border.critical.$value),
+  warning: tokenToHex(darkThemeTokens.colour.border.warning.$value),
+};
+
+const fill = {
+  default: tokenToHex(darkThemeTokens.colour.fill.default.$value),
+  primary: tokenToHex(darkThemeTokens.colour.fill.primary.$value),
+  subtle: tokenToHex(darkThemeTokens.colour.fill.subtle.$value),
+  brand: tokenToHex(darkThemeTokens.colour.fill.brand.$value),
+  brandSubtle: tokenToHex(darkThemeTokens.colour.fill['brand-subtle'].$value),
+  brandHover: tokenToHex(darkThemeTokens.colour.fill['brand-hover'].$value),
+  brandPressed: tokenToHex(darkThemeTokens.colour.fill['brand-pressed'].$value),
+  brandSubtleSelected: tokenToHex(
+    darkThemeTokens.colour.fill['brand-subtle-selected'].$value
+  ),
+  brandSubtleHover: tokenToHex(
+    darkThemeTokens.colour.fill['brand-subtle-hover'].$value
+  ),
+  brandPrimary: tokenToHex(darkThemeTokens.colour.fill['brand-primary'].$value),
+  disabled: tokenToHex(darkThemeTokens.colour.fill.disabled.$value),
+  inverse: tokenToHex(darkThemeTokens.colour.fill.inverse.$value),
+  brandInverseSecondary: tokenToHex(
+    darkThemeTokens.colour.fill['brand-inverse-secondary'].$value
+  ),
+  inverseHover: tokenToHex(darkThemeTokens.colour.fill['inverse-hover'].$value),
+  critical: tokenToHex(darkThemeTokens.colour.fill.critical.$value),
+  criticalHover: tokenToHex(
+    darkThemeTokens.colour.fill['critical-hover'].$value
+  ),
+  criticalSelected: tokenToHex(
+    darkThemeTokens.colour.fill['critical-selected'].$value
+  ),
+  criticalPressed: tokenToHex(
+    darkThemeTokens.colour.fill['critical-pressed'].$value
+  ),
+  criticalSubtle: tokenToHex(
+    darkThemeTokens.colour.fill['critical-subtle'].$value
+  ),
+  caution: tokenToHex(darkThemeTokens.colour.fill.caution.$value),
+  cautionHover: tokenToHex(darkThemeTokens.colour.fill['caution-hover'].$value),
+  cautionSelected: tokenToHex(
+    darkThemeTokens.colour.fill['caution-selected'].$value
+  ),
+  cautionPressed: tokenToHex(
+    darkThemeTokens.colour.fill['caution-pressed'].$value
+  ),
+  cautionSubtle: tokenToHex(
+    darkThemeTokens.colour.fill['caution-subtle'].$value
+  ),
+  warningSubtle: tokenToHex(
+    darkThemeTokens.colour.fill['warning-subtle'].$value
+  ),
+  success: tokenToHex(darkThemeTokens.colour.fill.success.$value),
+  successSubtle: tokenToHex(
+    darkThemeTokens.colour.fill['success-subtle'].$value
+  ),
+};
+
+const icon = {
+  default: tokenToHex(darkThemeTokens.colour.icon.default.$value),
+  hover: tokenToHex(darkThemeTokens.colour.icon.hover.$value),
+  secondary: tokenToHex(darkThemeTokens.colour.icon.secondary.$value),
+  tertiary: tokenToHex(darkThemeTokens.colour.icon.tertiary.$value),
+  disabled: tokenToHex(darkThemeTokens.colour.icon.disabled.$value),
+  disabledOnBgFill: tokenToHex(
+    darkThemeTokens.colour.icon['disabled-on-bg-fill'].$value
+  ),
+  brand: tokenToHex(darkThemeTokens.colour.icon.brand.$value),
+  brandHover: tokenToHex(darkThemeTokens.colour.icon['brand-hover'].$value),
+  brandPressed: tokenToHex(darkThemeTokens.colour.icon['brand-pressed'].$value),
+  brandSelectedOnBgFill: tokenToHex(
+    darkThemeTokens.colour.icon['brand-selected-on-bg-fill'].$value
+  ),
+  visited: tokenToHex(darkThemeTokens.colour.icon.visited.$value),
+  brandPrimary: tokenToHex(darkThemeTokens.colour.icon['brand-primary'].$value),
+  brandInverse: tokenToHex(darkThemeTokens.colour.icon['brand-inverse'].$value),
+  inverse: tokenToHex(darkThemeTokens.colour.icon.inverse.$value),
+  brandInverseSecondary: tokenToHex(
+    darkThemeTokens.colour.icon['brand-inverse-secondary'].$value
+  ),
+  brandInverseSecondaryHover: tokenToHex(
+    darkThemeTokens.colour.icon['brand-inverse-secondary-hover'].$value
+  ),
+  brandInverseSecondarySelected: tokenToHex(
+    darkThemeTokens.colour.icon['brand-inverse-secondary-selected'].$value
+  ),
+  inverseTertiary: tokenToHex(
+    darkThemeTokens.colour.icon['inverse-tertiary'].$value
+  ),
+  inverseDisabled: tokenToHex(
+    darkThemeTokens.colour.icon['inverse-disabled'].$value
+  ),
+  critical: tokenToHex(darkThemeTokens.colour.icon.critical.$value),
+  criticalOnBgFill: tokenToHex(
+    darkThemeTokens.colour.icon['critical-on-bg-fill'].$value
+  ),
+  success: tokenToHex(darkThemeTokens.colour.icon.success.$value),
+  successOnBgFill: tokenToHex(
+    darkThemeTokens.colour.icon['success-on-bg-fill'].$value
+  ),
+  caution: tokenToHex(darkThemeTokens.colour.icon.caution.$value),
+  cautionSubtle: tokenToHex(
+    darkThemeTokens.colour.icon['caution-subtle'].$value
+  ),
+  warning: tokenToHex(darkThemeTokens.colour.icon.warning.$value),
+  warningOnBgFill: tokenToHex(
+    darkThemeTokens.colour.icon['warning-on-bg-fill'].$value
+  ),
+};
+
+const surface = {
+  default: tokenToHex(darkThemeTokens.colour.surface.default.$value),
+  primary: tokenToHex(darkThemeTokens.colour.surface.primary.$value),
+  secondary: tokenToHex(darkThemeTokens.colour.surface.secondary.$value),
+  brand: tokenToHex(darkThemeTokens.colour.surface.brand.$value),
+  brandHover: tokenToHex(darkThemeTokens.colour.surface['brand-hover'].$value),
+  brandSelected: tokenToHex(
+    darkThemeTokens.colour.surface['brand-selected'].$value
+  ),
+  brandSecondary: tokenToHex(
+    darkThemeTokens.colour.surface['brand-secondary'].$value
+  ),
+  brandTertiary: tokenToHex(
+    darkThemeTokens.colour.surface['brand-tertiary'].$value
+  ),
+  warning: tokenToHex(darkThemeTokens.colour.surface.warning.$value),
+  success: tokenToHex(darkThemeTokens.colour.surface.success.$value),
+  critical: tokenToHex(darkThemeTokens.colour.surface.critical.$value),
+  inverseBrand: tokenToHex(
+    darkThemeTokens.colour.surface['inverse-brand'].$value
+  ),
+  inverseBrandPrimary: tokenToHex(
+    darkThemeTokens.colour.surface['inverse-brand-primary'].$value
+  ),
+  backdrop: tokenToHex(darkThemeTokens.colour.surface.backdrop.$value),
+};
+
+const text = {
+  default: tokenToHex(darkThemeTokens.colour.text.default.$value),
+  secondary: tokenToHex(darkThemeTokens.colour.text.secondary.$value),
+  tertiary: tokenToHex(darkThemeTokens.colour.text.tertiary.$value),
+  disabled: tokenToHex(darkThemeTokens.colour.text.disabled.$value),
+  inverse: tokenToHex(darkThemeTokens.colour.text.inverse.$value),
+  onBgFillDisabled: tokenToHex(
+    darkThemeTokens.colour.text['on-bg-fill-disabled'].$value
+  ),
+  brand: tokenToHex(darkThemeTokens.colour.text.brand.$value),
+  brandOnLight: tokenToHex(
+    darkThemeTokens.colour.text['brand-on-light'].$value
+  ),
+  brandAccent: tokenToHex(darkThemeTokens.colour.text['brand-accent'].$value),
+  brandHover: tokenToHex(darkThemeTokens.colour.text['brand-hover'].$value),
+  brandPressed: tokenToHex(darkThemeTokens.colour.text['brand-pressed'].$value),
+  brandInverse: tokenToHex(darkThemeTokens.colour.text['brand-inverse'].$value),
+  brandInverseSecondary: tokenToHex(
+    darkThemeTokens.colour.text['brand-inverse-secondary'].$value
+  ),
+  brandInverseSecondaryHover: tokenToHex(
+    darkThemeTokens.colour.text['brand-inverse-secondary-hover'].$value
+  ),
+  brandInverseSecondarySelected: tokenToHex(
+    darkThemeTokens.colour.text['brand-inverse-secondary-selected'].$value
+  ),
+  brandPrimary: tokenToHex(darkThemeTokens.colour.text['brand-primary'].$value),
+  critical: tokenToHex(darkThemeTokens.colour.text.critical.$value),
+  cautionSubtle: tokenToHex(
+    darkThemeTokens.colour.text['caution-subtle'].$value
+  ),
+  caution: tokenToHex(darkThemeTokens.colour.text.caution.$value),
+  success: tokenToHex(darkThemeTokens.colour.text.success.$value),
+  warningOnBgFill: tokenToHex(
+    darkThemeTokens.colour.text['warning-on-bg-fill'].$value
+  ),
+};
+
+const link = {
+  default: tokenToHex(darkThemeTokens.colour.link.default.$value),
+  brand: tokenToHex(darkThemeTokens.colour.link.brand.$value),
+  brandHover: tokenToHex(darkThemeTokens.colour.link['brand-hover'].$value),
+  visited: tokenToHex(darkThemeTokens.colour.link.visited.$value),
+  primary: tokenToHex(darkThemeTokens.colour.link.primary.$value),
+  primaryHover: tokenToHex(darkThemeTokens.colour.link['primary-hover'].$value),
+  disabled: tokenToHex(darkThemeTokens.colour.link.disabled.$value),
+  inverse: tokenToHex(darkThemeTokens.colour.link.inverse.$value),
+  inverseVisited: tokenToHex(
+    darkThemeTokens.colour.link['inverse-visited'].$value
+  ),
+  inverseDisabled: tokenToHex(
+    darkThemeTokens.colour.link['inverse-disabled'].$value
+  ),
+  inverseSecondary: tokenToHex(
+    darkThemeTokens.colour.link['inverse-secondary'].$value
+  ),
+  inverseTertiary: tokenToHex(
+    darkThemeTokens.colour.link['inverse-tertiary'].$value
+  ),
+};
+
+const speciality = {
+  inputDefault: tokenToHex(
+    darkThemeTokens.colour.speciality['input-default'].$value
+  ),
+};
+
+const colour = {
+  bg,
+  border,
+  fill,
+  icon,
+  surface,
+  text,
+  link,
+  speciality,
+};
+
+export default colour;

package/lib/theme/dark/darkTheme.ts

@@ -0,0 +1,38 @@
+import defaultTheme, { ThemeType } from '../original/defaultTheme';
+import { typography, darkPrimitiveColour } from '../common/themeCommon';
+import colour from './darkColour';
+
+// UCL Dark Theme
+
+const darkTheme: ThemeType = {
+  // new
+  primitiveColour:
+    darkPrimitiveColour as unknown as ThemeType['primitiveColour'],
+  colour,
+  typography,
+
+  // todo: depcrecate
+  color: defaultTheme.color,
+  thickness: defaultTheme.thickness,
+  width: defaultTheme.width,
+  height: defaultTheme.height,
+  margin: defaultTheme.margin,
+  padding: defaultTheme.padding,
+  radius: defaultTheme.radius,
+  border: defaultTheme.border,
+  outline: defaultTheme.outline,
+  font: defaultTheme.font,
+  boxShadow: {
+    ...defaultTheme.boxShadow,
+    focus: `0 0 0 2px ${colour.border.inverse}, 0 0 0 4px ${colour.border.brand}`,
+  },
+  breakpoints: defaultTheme.breakpoints,
+  mq: defaultTheme.mq,
+
+  // For ease of use, margin and padding are added at the top level
+  // Usage: margin-top: ${theme.m16};
+  ...defaultTheme.margin,
+  ...defaultTheme.padding,
+};
+
+export default darkTheme;

package/lib/theme/index.ts

@@ -1,5 +1,6 @@
 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,

package/lib/theme/light/lightColour.ts

@@ -17,6 +17,9 @@ const bg = {
 const border = {
   default: tokenToHex(lightThemeTokens.colour.border.default.$value),
   brand: tokenToHex(lightThemeTokens.colour.border.brand.$value),
+  brandPrimary: tokenToHex(
+    lightThemeTokens.colour.border['brand-primary'].$value
+  ), // added - commit a6fc429 - 14 Jul 2026
   brandHover: tokenToHex(lightThemeTokens.colour.border['brand-hover'].$value),
   brandSubtle: tokenToHex(
     lightThemeTokens.colour.border['brand-subtle'].$value
@@ -33,6 +36,12 @@ const border = {
   brandInverseSecondary: tokenToHex(
     lightThemeTokens.colour.border['brand-inverse-secondary'].$value
   ),
+  brandInverseSecondaryHover: tokenToHex(
+    lightThemeTokens.colour.border['brand-inverse-secondary-hover'].$value // added - commit a6fc429 - 14 Jul 2026
+  ),
+  brandInverseSecondarySelected: tokenToHex(
+    lightThemeTokens.colour.border['brand-inverse-secondary-selected'].$value // added - commit a6fc429 - 14 Jul 2026
+  ),
   focus: tokenToHex(lightThemeTokens.colour.border.focus.$value),
   success: tokenToHex(lightThemeTokens.colour.border.success.$value),
   critical: tokenToHex(lightThemeTokens.colour.border.critical.$value),
@@ -41,8 +50,10 @@ const border = {
 
 const fill = {
   default: tokenToHex(lightThemeTokens.colour.fill.default.$value),
-  hover: tokenToHex(lightThemeTokens.colour.fill.hover.$value),
+  primary: tokenToHex(lightThemeTokens.colour.fill.primary.$value), // replace hover (with colour change) - commit 1504e2b - 14 Jul 2026
+  subtle: tokenToHex(lightThemeTokens.colour.fill.subtle.$value), // added - commit 1504e2b - 14 Jul 2026
   brand: tokenToHex(lightThemeTokens.colour.fill.brand.$value),
+  brandSubtle: tokenToHex(lightThemeTokens.colour.fill['brand-subtle'].$value), // replace brandSubtleSelected - commit 1504e2b - 14 Jul 2026
   brandHover: tokenToHex(lightThemeTokens.colour.fill['brand-hover'].$value),
   brandPressed: tokenToHex(
     lightThemeTokens.colour.fill['brand-pressed'].$value
@@ -74,17 +85,29 @@ const fill = {
   criticalPressed: tokenToHex(
     lightThemeTokens.colour.fill['critical-pressed'].$value
   ),
-  warning: tokenToHex(lightThemeTokens.colour.fill.warning.$value),
-  warningHover: tokenToHex(
-    lightThemeTokens.colour.fill['warning-hover'].$value
+  criticalSubtle: tokenToHex(
+    lightThemeTokens.colour.fill['critical-subtle'].$value
+  ), // replace warning - commit 1504e2b - 14 Jul 2026
+  caution: tokenToHex(lightThemeTokens.colour.fill.caution.$value), // added - commit 1504e2b - 14 Jul 2026
+  cautionHover: tokenToHex(
+    lightThemeTokens.colour.fill['caution-hover'].$value // replace cautionHover - commit 1504e2b - 14 Jul 2026
+  ),
+  cautionSelected: tokenToHex(
+    lightThemeTokens.colour.fill['caution-selected'].$value // replace warningSelected - commit 1504e2b - 14 Jul 2026
   ),
-  warningSelected: tokenToHex(
-    lightThemeTokens.colour.fill['warning-selected'].$value
+  cautionPressed: tokenToHex(
+    lightThemeTokens.colour.fill['caution-pressed'].$value // replace warningPressed - commit 1504e2b - 14 Jul 2026
   ),
-  warningPressed: tokenToHex(
-    lightThemeTokens.colour.fill['warning-pressed'].$value
+  cautionSubtle: tokenToHex(
+    lightThemeTokens.colour.fill['caution-subtle'].$value
+  ),
+  warningSubtle: tokenToHex(
+    lightThemeTokens.colour.fill['warning-subtle'].$value
   ),
   success: tokenToHex(lightThemeTokens.colour.fill.success.$value),
+  successSubtle: tokenToHex(
+    lightThemeTokens.colour.fill['success-subtle'].$value
+  ),
 };
 
 const icon = {
@@ -98,6 +121,9 @@ const icon = {
   ),
   brand: tokenToHex(lightThemeTokens.colour.icon.brand.$value),
   brandHover: tokenToHex(lightThemeTokens.colour.icon['brand-hover'].$value),
+  brandPressed: tokenToHex(
+    lightThemeTokens.colour.icon['brand-pressed'].$value
+  ), // added - commit 8458667 - 14 Jul 2026
   brandSelectedOnBgFill: tokenToHex(
     lightThemeTokens.colour.icon['brand-selected-on-bg-fill'].$value
   ),
@@ -105,16 +131,22 @@ const icon = {
   brandPrimary: tokenToHex(
     lightThemeTokens.colour.icon['brand-primary'].$value
   ),
-  brandInverted: tokenToHex(
-    lightThemeTokens.colour.icon['brand-inverted'].$value
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverse'].$value // renamed from brandInverted - commit 8458667 - 14 Jul 2026
   ),
   inverse: tokenToHex(lightThemeTokens.colour.icon.inverse.$value),
-  inverseHover: tokenToHex(
-    lightThemeTokens.colour.icon['inverse-hover'].$value
-  ),
+  // inverseHover: tokenToHex(
+  //   lightThemeTokens.colour.icon['inverse-hover'].$value // deleted - commit 8458667 - 14 Jul 2026
+  // ),
   brandInverseSecondary: tokenToHex(
     lightThemeTokens.colour.icon['brand-inverse-secondary'].$value
   ),
+  brandInverseSecondaryHover: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverse-secondary-hover'].$value // added - commit 8458667 - 14 Jul 2026
+  ),
+  brandInverseSecondarySelected: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverse-secondary-selected'].$value // added - commit 8458667 - 14 Jul 2026
+  ),
   inverseTertiary: tokenToHex(
     lightThemeTokens.colour.icon['inverse-tertiary'].$value
   ),
@@ -129,6 +161,10 @@ const icon = {
   successOnBgFill: tokenToHex(
     lightThemeTokens.colour.icon['success-on-bg-fill'].$value
   ),
+  caution: tokenToHex(lightThemeTokens.colour.icon.caution.$value), // added - commit 8458667 - 14 Jul 2026
+  cautionSubtle: tokenToHex(
+    lightThemeTokens.colour.icon['caution-subtle'].$value
+  ), // added - commit 8458667 - 14 Jul 2026
   warning: tokenToHex(lightThemeTokens.colour.icon.warning.$value),
   warningOnBgFill: tokenToHex(
     lightThemeTokens.colour.icon['warning-on-bg-fill'].$value
@@ -144,13 +180,19 @@ const surface = {
   brandSelected: tokenToHex(
     lightThemeTokens.colour.surface['brand-selected'].$value
   ),
+  brandSecondary: tokenToHex(
+    lightThemeTokens.colour.surface['brand-secondary'].$value
+  ), // added - commit c830d07 - 14 Jul 2026
+  brandTertiary: tokenToHex(
+    lightThemeTokens.colour.surface['brand-tertiary'].$value
+  ), // added - commit c830d07 - 14 Jul 2026
   warning: tokenToHex(lightThemeTokens.colour.surface.warning.$value),
   success: tokenToHex(lightThemeTokens.colour.surface.success.$value),
   critical: tokenToHex(lightThemeTokens.colour.surface.critical.$value),
-  hover: tokenToHex(lightThemeTokens.colour.surface.hover.$value),
-  selected: tokenToHex(lightThemeTokens.colour.surface.selected.$value),
-  disabled: tokenToHex(lightThemeTokens.colour.surface.disabled.$value),
-  tertiary: tokenToHex(lightThemeTokens.colour.surface.tertiary.$value),
+  // hover: tokenToHex(lightThemeTokens.colour.surface.hover.$value), // deleted - commit c830d07 - 14 Jul 2026
+  // selected: tokenToHex(lightThemeTokens.colour.surface.selected.$value), // deleted - commit c830d07 - 14 Jul 2026
+  // disabled: tokenToHex(lightThemeTokens.colour.surface.disabled.$value), // deleted - commit c830d07 - 14 Jul 2026
+  // tertiary: tokenToHex(lightThemeTokens.colour.surface.tertiary.$value), // deleted - commit c830d07 - 14 Jul 2026
   inverseBrand: tokenToHex(
     lightThemeTokens.colour.surface['inverse-brand'].$value
   ),
@@ -170,18 +212,35 @@ const text = {
     lightThemeTokens.colour.text['on-bg-fill-disabled'].$value
   ),
   brand: tokenToHex(lightThemeTokens.colour.text.brand.$value),
+  brandOnLight: tokenToHex(
+    lightThemeTokens.colour.text['brand-on-light'].$value
+  ), // added - commit 331e537 - 14 Jul 2026
   brandAccent: tokenToHex(lightThemeTokens.colour.text['brand-accent'].$value),
   brandHover: tokenToHex(lightThemeTokens.colour.text['brand-hover'].$value),
+  brandPressed: tokenToHex(
+    lightThemeTokens.colour.text['brand-pressed'].$value
+  ), // added - commit 331e537 - 14 Jul 2026
   brandInverse: tokenToHex(
     lightThemeTokens.colour.text['brand-inverse'].$value
   ),
   brandInverseSecondary: tokenToHex(
     lightThemeTokens.colour.text['brand-inverse-secondary'].$value
   ),
+  brandInverseSecondaryHover: tokenToHex(
+    lightThemeTokens.colour.text['brand-inverse-secondary-hover'].$value // added - commit 331e537 - 14 Jul 2026
+  ),
+  brandInverseSecondarySelected: tokenToHex(
+    lightThemeTokens.colour.text['brand-inverse-secondary-selected'].$value // added - commit 331e537 - 14 Jul 2026
+  ),
   brandPrimary: tokenToHex(
     lightThemeTokens.colour.text['brand-primary'].$value
   ),
   critical: tokenToHex(lightThemeTokens.colour.text.critical.$value),
+  cautionSubtle: tokenToHex(
+    lightThemeTokens.colour.text['caution-subtle'].$value
+  ), // added - commit 331e537 - 14 Jul 2026
+  caution: tokenToHex(lightThemeTokens.colour.text.caution.$value), // added - commit 331e537 - 14 Jul 2026§
+  success: tokenToHex(lightThemeTokens.colour.text.success.$value), // added - commit 331e537 - 14 Jul 2026
   warningOnBgFill: tokenToHex(
     lightThemeTokens.colour.text['warning-on-bg-fill'].$value
   ),

package/lib/theme/light/lightTheme.ts

@@ -1,12 +1,12 @@
 import defaultTheme, { ThemeType } from '../original/defaultTheme';
-import { typography, primitiveColour } from '../common/themeCommon';
+import { typography, lightPrimitiveColour } from '../common/themeCommon';
 import colour from './lightColour';
 
 // UCL Light Theme
 
 const lightTheme: ThemeType = {
   // new
-  primitiveColour,
+  primitiveColour: lightPrimitiveColour,
   colour,
   typography,
 

package/lib/theme/original/defaultTheme.ts

@@ -1,4 +1,4 @@
-import { typography, primitiveColour } from '../common/themeCommon';
+import { typography, lightPrimitiveColour } from '../common/themeCommon';
 import color, { blackAndWhite, displayColours } from './color';
 import originalColour from './originalColourNewStructure';
 
@@ -91,7 +91,7 @@ const mq = {
 
 const theme = {
   // new
-  primitiveColour,
+  primitiveColour: lightPrimitiveColour,
   colour: originalColour,
   typography,
 

package/lib/theme/original/originalColourNewStructure.ts

@@ -16,6 +16,7 @@ const bg = {
 const border = {
   default: tokenToHex(lightThemeTokens.colour.border.default.$value),
   brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.border.brand.$value),
+  brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.border['brand-primary'].$value),
   brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.border['brand-hover'].$value),
   brandSubtle: color.base.blue20Alt, // tokenToHex(lightThemeTokens.colour.border['brand-subtle'].$value),
   primary: tokenToHex(lightThemeTokens.colour.border.primary.$value),
@@ -28,6 +29,8 @@ const border = {
     lightThemeTokens.colour.border['brand-inverse'].$value
   ),
   brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.border['brand-inverse-secondary'].$value),
+  brandInverseSecondaryHover: color.base.blue25, // tokenToHex(lightThemeTokens.colour.border['brand-inverse-secondary-hover'].$value),
+  brandInverseSecondarySelected: color.base.blue25, // tokenToHex(lightThemeTokens.colour.border['brand-inverse-secondary-selected'].$value),
   focus: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.border.focus.$value),
   success: color.system.green70, // tokenToHex(lightThemeTokens.colour.border.success.$value),
   critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.border.critical.$value),
@@ -36,8 +39,10 @@ const border = {
 
 const fill = {
   default: tokenToHex(lightThemeTokens.colour.fill.default.$value),
-  hover: tokenToHex(lightThemeTokens.colour.fill.hover.$value),
+  primary: tokenToHex(lightThemeTokens.colour.fill.primary.$value),
+  subtle: tokenToHex(lightThemeTokens.colour.fill.subtle.$value),
   brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.fill.brand.$value),
+  brandSubtle: color.base.blue15, // tokenToHex(lightThemeTokens.colour.fill['brand-subtle'].$value),
   brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.fill['brand-hover'].$value),
   brandPressed: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.fill['brand-pressed'].$value),
   brandSubtleSelected: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.fill['brand-subtle-selected'].$value),
@@ -51,17 +56,15 @@ const fill = {
   criticalHover: color.base.red80, // tokenToHex(lightThemeTokens.colour.fill['critical-hover'].$value),
   criticalSelected: color.base.red80, // tokenToHex(lightThemeTokens.colour.fill['critical-selected'].$value),
   criticalPressed: color.base.red90, // tokenToHex(lightThemeTokens.colour.fill['critical-pressed'].$value),
-  warning: tokenToHex(lightThemeTokens.colour.fill.warning.$value),
-  warningHover: tokenToHex(
-    lightThemeTokens.colour.fill['warning-hover'].$value
-  ),
-  warningSelected: tokenToHex(
-    lightThemeTokens.colour.fill['warning-selected'].$value
-  ),
-  warningPressed: tokenToHex(
-    lightThemeTokens.colour.fill['warning-pressed'].$value
-  ),
+  criticalSubtle: color.system.red10, // tokenToHex(lightThemeTokens.colour.fill['critical-subtle'].$value),
+  caution: color.system.orange70, // tokenToHex(lightThemeTokens.colour.fill.caution.$value),
+  cautionHover: color.system.orange100, // tokenToHex(lightThemeTokens.colour.fill['caution-hover'].$value),
+  cautionSelected: color.system.orange100, // tokenToHex(lightThemeTokens.colour.fill['caution-selected'].$value),
+  cautionPressed: color.system.orange100, // tokenToHex(lightThemeTokens.colour.fill['caution-pressed'].$value),
+  cautionSubtle: color.system.orange10, // tokenToHex(lightThemeTokens.colour.fill['caution-subtle'].$value),
+  warningSubtle: color.system.orange10, // tokenToHex(lightThemeTokens.colour.fill['warning-subtle'].$value),
   success: color.system.green70, // tokenToHex(lightThemeTokens.colour.fill.success.$value),
+  successSubtle: color.system.green10, // tokenToHex(lightThemeTokens.colour.fill['success-subtle'].$value),
 };
 
 const icon = {
@@ -75,17 +78,17 @@ const icon = {
   ),
   brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.icon.brand.$value),
   brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon['brand-hover'].$value),
+  brandPressed: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon['brand-pressed'].$value),
   brandSelectedOnBgFill: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon['brand-selected-on-bg-fill'].$value),
   visited: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.icon.visited.$value),
   brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.icon['brand-primary'].$value),
-  brandInverted: tokenToHex(
-    lightThemeTokens.colour.icon['brand-inverted'].$value
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverse'].$value
   ),
   inverse: tokenToHex(lightThemeTokens.colour.icon.inverse.$value),
-  inverseHover: tokenToHex(
-    lightThemeTokens.colour.icon['inverse-hover'].$value
-  ),
   brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.icon['brand-inverse-secondary'].$value),
+  brandInverseSecondaryHover: color.base.blue25, // tokenToHex(lightThemeTokens.colour.icon['brand-inverse-secondary-hover'].$value),
+  brandInverseSecondarySelected: color.base.blue25, // tokenToHex(lightThemeTokens.colour.icon['brand-inverse-secondary-selected'].$value),
   inverseTertiary: tokenToHex(
     lightThemeTokens.colour.icon['inverse-tertiary'].$value
   ),
@@ -98,6 +101,10 @@ const icon = {
   successOnBgFill: tokenToHex(
     lightThemeTokens.colour.icon['success-on-bg-fill'].$value
   ),
+  caution: tokenToHex(lightThemeTokens.colour.icon.caution.$value),
+  cautionSubtle: tokenToHex(
+    lightThemeTokens.colour.icon['caution-subtle'].$value
+  ),
   warning: tokenToHex(lightThemeTokens.colour.icon.warning.$value),
   warningOnBgFill: tokenToHex(
     lightThemeTokens.colour.icon['warning-on-bg-fill'].$value
@@ -111,13 +118,11 @@ const surface = {
   brand: color.base.blue15, // tokenToHex(lightThemeTokens.colour.surface.brand.$value),
   brandHover: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.surface['brand-hover'].$value),
   brandSelected: color.interaction.blue10, // tokenToHex(lightThemeTokens.colour.surface['brand-selected'].$value),
+  brandSecondary: color.interaction.blue5, // tokenToHex(lightThemeTokens.colour.surface['brand-secondary'].$value),
+  brandTertiary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.surface['brand-tertiary'].$value),
   warning: color.system.orange10, // tokenToHex(lightThemeTokens.colour.surface.warning.$value),
   success: color.system.green10, // tokenToHex(lightThemeTokens.colour.surface.success.$value),
   critical: color.system.red10, // tokenToHex(lightThemeTokens.colour.surface.critical.$value),
-  hover: tokenToHex(lightThemeTokens.colour.surface.hover.$value),
-  selected: tokenToHex(lightThemeTokens.colour.surface.selected.$value),
-  disabled: tokenToHex(lightThemeTokens.colour.surface.disabled.$value),
-  tertiary: tokenToHex(lightThemeTokens.colour.surface.tertiary.$value),
   inverseBrand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.surface['inverse-brand'].$value),
   inverseBrandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.surface['inverse-brand-primary'].$value),
   backdrop: tokenToHex(lightThemeTokens.colour.surface.backdrop.$value),
@@ -133,14 +138,23 @@ const text = {
     lightThemeTokens.colour.text['on-bg-fill-disabled'].$value
   ),
   brand: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.text.brand.$value),
+  brandOnLight: color.interaction.blue70, // tokenToHex(lightThemeTokens.colour.text['brand-on-light'].$value),
   brandAccent: tokenToHex(lightThemeTokens.colour.text['brand-accent'].$value),
   brandHover: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.text['brand-hover'].$value),
+  brandPressed: color.interaction.blue80, // tokenToHex(lightThemeTokens.colour.text['brand-pressed'].$value),
   brandInverse: tokenToHex(
     lightThemeTokens.colour.text['brand-inverse'].$value
   ),
   brandInverseSecondary: color.base.blue40, // tokenToHex(lightThemeTokens.colour.text['brand-inverse-secondary'].$value),
+  brandInverseSecondaryHover: color.base.blue25, // tokenToHex(lightThemeTokens.colour.text['brand-inverse-secondary-hover'].$value),
+  brandInverseSecondarySelected: color.base.blue25, // tokenToHex(lightThemeTokens.colour.text['brand-inverse-secondary-selected'].$value),
   brandPrimary: color.interaction.blue100, // tokenToHex(lightThemeTokens.colour.text['brand-primary'].$value),
   critical: color.system.red70, // tokenToHex(lightThemeTokens.colour.text.critical.$value),
+  cautionSubtle: tokenToHex(
+    lightThemeTokens.colour.text['caution-subtle'].$value
+  ),
+  caution: tokenToHex(lightThemeTokens.colour.text.caution.$value),
+  success: color.system.green70, // tokenToHex(lightThemeTokens.colour.text.success.$value),
   warningOnBgFill: tokenToHex(
     lightThemeTokens.colour.text['warning-on-bg-fill'].$value
   ),