fix: visual defects following theme change

src/Alert/Alert.tsx

@@ -81,9 +81,7 @@ const Alert = ({
   return (
     <Flex
       bg={alertColours[type].backgroundColor}
-      py="x2"
-      paddingLeft="x2"
-      paddingRight="x1_5"
+      p="x2"
       borderRadius="medium"
       borderLeftWidth="4px"
       borderLeftColor={alertColours[type].borderColor}

src/BrandedNavBar/MobileMenu.tsx

@@ -195,7 +195,7 @@ const Menu = styled.ul(({ theme }) => ({
   zIndex: theme.zIndices.content,
   width: "100%",
   color: theme.colors.white,
-  [`${Heading3}`]: {
+  [`${TopLevelText}`]: {
     padding: `${theme.space.x1} 0 ${theme.space.x1} ${theme.space.x3}`,
   },
 }));
@@ -226,14 +226,14 @@ type BaseMobileMenuProps = {
   showNulogyLogo?: boolean;
 };
 
-const BaseMobileMenu: React.FC<React.PropsWithChildren<BaseMobileMenuProps>> = ({
+const BaseMobileMenu = ({
   menuData,
   closeMenu,
   subtext,
   themeColorObject,
   showNulogyLogo,
   ...props
-}) => (
+}: BaseMobileMenuProps) => (
   <Nav backgroundColor={themeColorObject && themeColorObject.background} {...props}>
     <BrandingWrap>
       <BrandingText logoColor={themeColorObject?.logoColor} />

src/Breadcrumbs/BreadcrumbsListItem.tsx

@@ -39,6 +39,7 @@ export const BreadcrumbsListItem = styled.li<{ variant: ComponentVariant }>(
     "a, p": {
       padding: theme.space.none,
       fontSize: theme.fontSizes.small,
+      lineHeight: theme.lineHeights.smallTextBase,
     },
   }),
   variant({

src/Button/ControlIcon.tsx

@@ -52,16 +52,7 @@ const StyledButton = styled.button<{
 
 const ControlIcon = React.forwardRef<HTMLButtonElement, ControlIconProps>(
   ({ icon, toggled, disabled, label, size = "x4", type = "button", ...props }, ref) => (
-    <StyledButton
-      height={size}
-      width={size}
-      aria-label={label}
-      ref={ref}
-      disabled={disabled}
-      toggled={toggled}
-      type={type}
-      {...props}
-    >
+    <StyledButton aria-label={label} ref={ref} disabled={disabled} toggled={toggled} type={type} {...props}>
       <Icon size={size} icon={icon} />
     </StyledButton>
   )

src/Icon/Icon.tsx

@@ -75,7 +75,7 @@ const Svg = React.forwardRef<SVGSVGElement, IconProps>(
 );
 
 const Icon = styled(Svg)<IconProps>(space, ({ theme, color = "currentColor", size }) => ({
-  minWidth: theme.sizes[size] ?? theme.sizes.x3,
+  minWidth: theme.sizes[size] ?? size ?? theme.sizes.x3,
   color: color,
 }));
 

src/utils/subPx.ts

@@ -0,0 +1,11 @@
+type CSSUnit = string;
+/**
+ * Subtracts two CSS measurements using calc()
+ * @param baseValue The starting CSS measurement
+ * @param subtractValue The value to subtract (defaults to '1px')
+ * @returns A CSS calc() expression
+ */
+export default function subPx(baseValue: CSSUnit, subtractValue?: CSSUnit): string {
+  const valueToSubtract: CSSUnit = subtractValue ?? "1px";
+  return `calc(${baseValue} - ${valueToSubtract})`;
+}