uikit-react-public 0.14.21 → 0.21.8

package/lib/theme/light/lightColour.ts

@@ -0,0 +1,232 @@
+import { tokens } from 'design-system-foundations-public';
+import tokenToHex from '../../utils/addAlphaToHex';
+
+const { light: lightThemeTokens } = tokens;
+
+// UCL Light Theme Colours
+
+const bg = {
+  default: tokenToHex(lightThemeTokens.colour.bg.default.$value),
+  brand: tokenToHex(lightThemeTokens.colour.bg.brand.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.bg.inverse.$value),
+  inversePrimary: tokenToHex(
+    lightThemeTokens.colour.bg['inverse-primary'].$value
+  ),
+};
+
+const border = {
+  default: tokenToHex(lightThemeTokens.colour.border.default.$value),
+  brand: tokenToHex(lightThemeTokens.colour.border.brand.$value),
+  brandHover: tokenToHex(lightThemeTokens.colour.border['brand-hover'].$value),
+  brandSubtle: tokenToHex(
+    lightThemeTokens.colour.border['brand-subtle'].$value
+  ),
+  primary: tokenToHex(lightThemeTokens.colour.border.primary.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.border.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.border.tertiary.$value),
+  subtle: tokenToHex(lightThemeTokens.colour.border.subtle.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.border.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.border.inverse.$value),
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.border['brand-inverse'].$value
+  ),
+  brandInverseSecondary: tokenToHex(
+    lightThemeTokens.colour.border['brand-inverse-secondary'].$value
+  ),
+  focus: tokenToHex(lightThemeTokens.colour.border.focus.$value),
+  success: tokenToHex(lightThemeTokens.colour.border.success.$value),
+  critical: tokenToHex(lightThemeTokens.colour.border.critical.$value),
+  warning: tokenToHex(lightThemeTokens.colour.border.warning.$value),
+};
+
+const fill = {
+  default: tokenToHex(lightThemeTokens.colour.fill.default.$value),
+  hover: tokenToHex(lightThemeTokens.colour.fill.hover.$value),
+  brand: tokenToHex(lightThemeTokens.colour.fill.brand.$value),
+  brandHover: tokenToHex(lightThemeTokens.colour.fill['brand-hover'].$value),
+  brandPressed: tokenToHex(
+    lightThemeTokens.colour.fill['brand-pressed'].$value
+  ),
+  brandSubtleSelected: tokenToHex(
+    lightThemeTokens.colour.fill['brand-subtle-selected'].$value
+  ),
+  brandSubtleHover: tokenToHex(
+    lightThemeTokens.colour.fill['brand-subtle-hover'].$value
+  ),
+  brandPrimary: tokenToHex(
+    lightThemeTokens.colour.fill['brand-primary'].$value
+  ),
+  disabled: tokenToHex(lightThemeTokens.colour.fill.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.fill.inverse.$value),
+  brandInverseSecondary: tokenToHex(
+    lightThemeTokens.colour.fill['brand-inverse-secondary'].$value
+  ),
+  inverseHover: tokenToHex(
+    lightThemeTokens.colour.fill['inverse-hover'].$value
+  ),
+  critical: tokenToHex(lightThemeTokens.colour.fill.critical.$value),
+  criticalHover: tokenToHex(
+    lightThemeTokens.colour.fill['critical-hover'].$value
+  ),
+  criticalSelected: tokenToHex(
+    lightThemeTokens.colour.fill['critical-selected'].$value
+  ),
+  criticalPressed: 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
+  ),
+  success: tokenToHex(lightThemeTokens.colour.fill.success.$value),
+};
+
+const icon = {
+  default: tokenToHex(lightThemeTokens.colour.icon.default.$value),
+  hover: tokenToHex(lightThemeTokens.colour.icon.hover.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.icon.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.icon.tertiary.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.icon.disabled.$value),
+  disabledOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['disabled-on-bg-fill'].$value
+  ),
+  brand: tokenToHex(lightThemeTokens.colour.icon.brand.$value),
+  brandHover: tokenToHex(lightThemeTokens.colour.icon['brand-hover'].$value),
+  brandSelectedOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['brand-selected-on-bg-fill'].$value
+  ),
+  visited: tokenToHex(lightThemeTokens.colour.icon.visited.$value),
+  brandPrimary: tokenToHex(
+    lightThemeTokens.colour.icon['brand-primary'].$value
+  ),
+  brandInverted: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverted'].$value
+  ),
+  inverse: tokenToHex(lightThemeTokens.colour.icon.inverse.$value),
+  inverseHover: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-hover'].$value
+  ),
+  brandInverseSecondary: tokenToHex(
+    lightThemeTokens.colour.icon['brand-inverse-secondary'].$value
+  ),
+  inverseTertiary: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-tertiary'].$value
+  ),
+  inverseDisabled: tokenToHex(
+    lightThemeTokens.colour.icon['inverse-disabled'].$value
+  ),
+  critical: tokenToHex(lightThemeTokens.colour.icon.critical.$value),
+  criticalOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['critical-on-bg-fill'].$value
+  ),
+  success: tokenToHex(lightThemeTokens.colour.icon.success.$value),
+  successOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['success-on-bg-fill'].$value
+  ),
+  warning: tokenToHex(lightThemeTokens.colour.icon.warning.$value),
+  warningOnBgFill: tokenToHex(
+    lightThemeTokens.colour.icon['warning-on-bg-fill'].$value
+  ),
+};
+
+const surface = {
+  default: tokenToHex(lightThemeTokens.colour.surface.default.$value),
+  primary: tokenToHex(lightThemeTokens.colour.surface.primary.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.surface.secondary.$value),
+  brand: tokenToHex(lightThemeTokens.colour.surface.brand.$value),
+  brandHover: tokenToHex(lightThemeTokens.colour.surface['brand-hover'].$value),
+  brandSelected: tokenToHex(
+    lightThemeTokens.colour.surface['brand-selected'].$value
+  ),
+  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),
+  inverseBrand: tokenToHex(
+    lightThemeTokens.colour.surface['inverse-brand'].$value
+  ),
+  inverseBrandPrimary: tokenToHex(
+    lightThemeTokens.colour.surface['inverse-brand-primary'].$value
+  ),
+  backdrop: tokenToHex(lightThemeTokens.colour.surface.backdrop.$value),
+};
+
+const text = {
+  default: tokenToHex(lightThemeTokens.colour.text.default.$value),
+  secondary: tokenToHex(lightThemeTokens.colour.text.secondary.$value),
+  tertiary: tokenToHex(lightThemeTokens.colour.text.tertiary.$value),
+  disabled: tokenToHex(lightThemeTokens.colour.text.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.text.inverse.$value),
+  onBgFillDisabled: tokenToHex(
+    lightThemeTokens.colour.text['on-bg-fill-disabled'].$value
+  ),
+  brand: tokenToHex(lightThemeTokens.colour.text.brand.$value),
+  brandAccent: tokenToHex(lightThemeTokens.colour.text['brand-accent'].$value),
+  brandHover: tokenToHex(lightThemeTokens.colour.text['brand-hover'].$value),
+  brandInverse: tokenToHex(
+    lightThemeTokens.colour.text['brand-inverse'].$value
+  ),
+  brandInverseSecondary: tokenToHex(
+    lightThemeTokens.colour.text['brand-inverse-secondary'].$value
+  ),
+  brandPrimary: tokenToHex(
+    lightThemeTokens.colour.text['brand-primary'].$value
+  ),
+  critical: tokenToHex(lightThemeTokens.colour.text.critical.$value),
+  warningOnBgFill: tokenToHex(
+    lightThemeTokens.colour.text['warning-on-bg-fill'].$value
+  ),
+};
+
+const link = {
+  default: tokenToHex(lightThemeTokens.colour.link.default.$value),
+  brand: tokenToHex(lightThemeTokens.colour.link.brand.$value),
+  brandHover: tokenToHex(lightThemeTokens.colour.link['brand-hover'].$value),
+  visited: tokenToHex(lightThemeTokens.colour.link.visited.$value),
+  primary: tokenToHex(lightThemeTokens.colour.link.primary.$value),
+  primaryHover: tokenToHex(
+    lightThemeTokens.colour.link['primary-hover'].$value
+  ),
+  disabled: tokenToHex(lightThemeTokens.colour.link.disabled.$value),
+  inverse: tokenToHex(lightThemeTokens.colour.link.inverse.$value),
+  inverseVisited: tokenToHex(
+    lightThemeTokens.colour.link['inverse-visited'].$value
+  ),
+  inverseDisabled: tokenToHex(
+    lightThemeTokens.colour.link['inverse-disabled'].$value
+  ),
+  inverseSecondary: tokenToHex(
+    lightThemeTokens.colour.link['inverse-secondary'].$value
+  ),
+  inverseTertiary: tokenToHex(
+    lightThemeTokens.colour.link['inverse-tertiary'].$value
+  ),
+};
+
+const speciality = {
+  inputDefault: tokenToHex(
+    lightThemeTokens.colour.speciality['input-default'].$value
+  ),
+};
+
+const colour = {
+  bg,
+  border,
+  fill,
+  icon,
+  surface,
+  text,
+  link,
+  speciality,
+};
+
+export default colour;

package/lib/theme/light/lightTheme.ts

@@ -0,0 +1,37 @@
+import defaultTheme, { ThemeType } from '../original/defaultTheme';
+import { typography, primitiveColour } from '../common/themeCommon';
+import colour from './lightColour';
+
+// UCL Light Theme
+
+const lightTheme: ThemeType = {
+  // new
+  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 lightTheme;

package/lib/theme/{defaultTheme.ts → original/color.ts}

@@ -24,6 +24,10 @@ const blue5 = '#F2F8FE';
 const blue200 = '#002248'; // UCL dark blue
 const blue50 = '#34C6C6'; // UCL vibrant blue
 const blue20 = '#B6DCE5'; // UCL muted blue
+// added for interim use
+const blue15 = '#D4E6FC';
+const blue20Alt = '#C3DDFB'; // corrected (was #B6DCE5 — wrong hue, too cyan)
+const blue25 = '#B2D3FA';
 
 const yellow200 = '#504D48'; // UCL dark yellow
 const yellow50 = '#FFCA36'; // UCL vibrant yellow
@@ -39,6 +43,9 @@ const red70 = '#CA0007';
 const red50 = '#E48083';
 const red40 = '#E48083';
 const red10 = '#FAE6E7';
+// added for interim use
+const red80 = '#B1070A';
+const red90 = '#990F0E';
 
 const pink200 = '#4B0A32'; // UCL dark pink
 const pink50 = '#AC145A'; // UCL vibrant pink
@@ -80,6 +87,9 @@ const baseColour = {
   blue200,
   blue50,
   blue20,
+  blue15,
+  blue20Alt,
+  blue25,
 
   yellow200,
   yellow50,
@@ -95,6 +105,8 @@ const baseColour = {
   red50,
   red40,
   red10,
+  red80,
+  red90,
 
   pink200,
   pink50,
@@ -143,7 +155,7 @@ const interactionColours = {
   blue5: baseColour.blue5,
 };
 
-const displayColours = {
+export const displayColours = {
   purpleDark: baseColour.purple200,
   purpleVibrant: baseColour.purple50,
   purpleMuted: baseColour.purple20,
@@ -198,7 +210,7 @@ const linkColours = {
   disabled: baseColour.black20,
 };
 
-const blackAndWhite = {
+export const blackAndWhite = {
   black: baseColour.black100,
   white: baseColour.white,
 };
@@ -222,209 +234,15 @@ const overlayColours = {
 };
 
 const color = {
+  base: baseColour,
   text: textColours,
   interaction: interactionColours,
   display: displayColours,
   system: systemColours,
   link: linkColours,
   neutral: neutralColours,
+  blackAndWhite,
   overlay: overlayColours,
 };
 
-// These colour definitions will need to be refactored to match the design system.
-
-const baseSizes = {
-  s1: '1px',
-  s2: '2px',
-  s4: '4px',
-  s6: '6px',
-  s8: '8px',
-  s12: '12px',
-  s16: '16px',
-  s20: '20px',
-  s24: '24px',
-  s28: '28px',
-  s32: '32px',
-  s36: '36px',
-  s40: '40px',
-  s44: '44px',
-  s48: '48px',
-  s52: '52px',
-  s56: '56px',
-  s60: '60px',
-  s64: '64px',
-  s72: '72px',
-  s80: '80px',
-};
-
-const margin = {
-  m0: 0,
-  m2: baseSizes.s2,
-  m4: baseSizes.s4,
-  m6: baseSizes.s6,
-  m8: baseSizes.s8,
-  m12: baseSizes.s12,
-  m16: baseSizes.s16,
-  m20: baseSizes.s20,
-  m24: baseSizes.s24,
-  m32: baseSizes.s32,
-  m40: baseSizes.s40,
-  m48: baseSizes.s48,
-  m56: baseSizes.s56,
-  m64: baseSizes.s64,
-  m72: baseSizes.s72,
-  m80: baseSizes.s80,
-};
-
-const padding = {
-  p0: 0,
-  p2: baseSizes.s2,
-  p4: baseSizes.s4,
-  p6: baseSizes.s6,
-  p8: baseSizes.s8,
-  p12: baseSizes.s12,
-  p16: baseSizes.s16,
-  p20: baseSizes.s20,
-  p24: baseSizes.s24,
-  p32: baseSizes.s32,
-  p40: baseSizes.s40,
-  p48: baseSizes.s48,
-  p56: baseSizes.s56,
-  p64: baseSizes.s64,
-  p72: baseSizes.s72,
-  p80: baseSizes.s80,
-};
-
-const breakpoints = {
-  mobile: 320,
-  tablet: 672,
-  desktop: 1056,
-  desktopLarge: 1536,
-};
-
-const createMediaQuery = (breakpoint: number) =>
-  // Breakpoints apply at the specified width and above
-  `@media (min-width: ${breakpoint}px)`;
-
-const custom = (breakpoint: number) =>
-  // Fallback for edge cases
-  createMediaQuery(breakpoint);
-
-const mq = {
-  mobile: createMediaQuery(breakpoints.mobile),
-  tablet: createMediaQuery(breakpoints.tablet),
-  desktop: createMediaQuery(breakpoints.desktop),
-  desktopLarge: createMediaQuery(breakpoints.desktopLarge),
-  custom,
-};
-
-const theme = {
-  color,
-
-  thickness: {
-    t1: baseSizes.s1,
-    t2: baseSizes.s2,
-  },
-
-  width: {
-    h16: baseSizes.s16,
-    h20: baseSizes.s20,
-    h24: baseSizes.s24,
-  },
-
-  height: {
-    h16: baseSizes.s16,
-    h20: baseSizes.s20,
-    h24: baseSizes.s24,
-    h32: baseSizes.s32,
-    h36: baseSizes.s36,
-    h40: baseSizes.s40,
-    h80: baseSizes.s80,
-  },
-
-  margin,
-
-  padding,
-
-  radius: {
-    r2: baseSizes.s2,
-    r4: baseSizes.s4,
-    r8: baseSizes.s8,
-    r12: baseSizes.s12,
-    r16: baseSizes.s16,
-  },
-
-  border: {
-    b1: baseSizes.s1,
-    b2: baseSizes.s2,
-  },
-
-  outline: {
-    o2: baseSizes.s2,
-    o4: baseSizes.s4,
-  },
-
-  font: {
-    family: {
-      primary: 'Helvetica, "Helvetica Neue", Arial, sans-serif',
-      secondary:
-        'Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif',
-      fixed: 'Courier, fixed',
-    },
-    size: {
-      f12: '12px',
-      f14: '14px', // Font should be at least 14px in most cases
-      f16: '16px', // Prefer 16px to 14px in most cases
-      f18: '18px',
-      f20: '20px',
-      f22: '22px',
-      f24: '24px',
-      f26: '26px',
-      f28: '28px',
-      f30: '30px',
-      f32: '32px',
-      f36: '36px',
-      f40: '40px',
-    },
-    weight: {
-      light: 300,
-      regular: 400,
-      medium: 500,
-      semiBold: 600,
-      bold: 700,
-      extraBold: 800,
-    },
-    lineHeight: {
-      h100: '100%',
-      h110: '110%',
-      h120: '120%',
-      h130: '130%',
-      h140: '140%',
-      h150: '150%',
-    },
-  },
-
-  boxShadow: {
-    // offset-x | offset-y | blur-radius | spread-radius | color
-    y1: '0 1px 4px 1px rgba(0, 0, 0, 0.1)',
-    y2: '0 2px 4px 1px rgba(0, 0, 0, 0.1)',
-    x2y4: '2px 4px 8px 4px rgba(0, 0, 0, 0.1)',
-    focus: `0px 0px 0px 2px ${color.neutral.white}, 0px 0px 0px 4px ${color.neutral.black}, 0px 0px 0px 6px ${color.system.orange70}`,
-    active: `0px 6px 0px 0px ${color.interaction.blue80} inset`,
-    destructiveActive: `0px 6px 0px 0px ${color.system.red100} inset`,
-  },
-
-  breakpoints,
-  mq,
-
-  // For ease of use, margin and padding are added at the top level
-  // Usage: margin-top: ${theme.m16};
-  ...margin,
-  ...padding,
-};
-
-export type ThemeType = typeof theme;
-export type DisplayColoursType = typeof displayColours;
-export type BlackAndWhiteColoursType = typeof blackAndWhite;
-
-export default theme;
+export default color;