uikit-react-public 0.43.2 → 0.44.0

package/lib/components/Accordion/Accordion.Heading.tsx

@@ -48,8 +48,6 @@ const AccordionHeading: React.FC<AccordionHeadingProps> = ({
     text-decoration: none;
     box-sizing: border-box;
     width: 100%;
-    font-size: inherit;
-    line-height: inherit;
 
     &:hover {
       background-color: ${theme.colour.surface.brandHover};

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

@@ -8,7 +8,7 @@ exports[`Accordion > snapshot: no props 1`] = `
 >
   <h6
     aria-expanded="false"
-    class="ucl-uikit-heading ucl-uikit-accordion__heading css-db8j7j"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-spdtpe"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"
@@ -44,7 +44,7 @@ exports[`Accordion > snapshot: testId prop 1`] = `
 >
   <h6
     aria-expanded="false"
-    class="ucl-uikit-heading ucl-uikit-accordion__heading css-db8j7j"
+    class="ucl-uikit-heading ucl-uikit-accordion__heading css-spdtpe"
     data-testid="ucl-uikit-accordion__heading"
     role="button"
     tabindex="0"

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

@@ -43,7 +43,7 @@ exports[`Alert > snapshot: type=error 1`] = `
       </span>
     </h3>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       The operation failed.
@@ -84,7 +84,7 @@ exports[`Alert > snapshot: type=info, no title 1`] = `
   </svg>
   <div>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       This is an informational alert.
@@ -134,7 +134,7 @@ exports[`Alert > snapshot: type=success 1`] = `
       </span>
     </h3>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       Your operation completed successfully.
@@ -181,7 +181,7 @@ exports[`Alert > snapshot: type=warning 1`] = `
       </span>
     </h3>
     <p
-      class="ucl-uikit-paragrah ucl-uikit-alert__message css-1dosm7d"
+      class="ucl-uikit-paragraph ucl-uikit-alert__message css-1dosm7d"
       data-testid="ucl-uikit-alert__message"
     >
       This operation may have unintended consequences.

package/lib/components/Avatar/Avatar.tsx

@@ -60,6 +60,9 @@ const Avatar = forwardRef<Ref, AvatarProps>(
       console.error('Avatar image failed to load', event);
       setImageError(true);
     };
+    const { smMedium, mdMedium, lgMedium } = theme.typography.body;
+    const initialsTypography =
+      size <= 32 ? smMedium : size <= 48 ? mdMedium : lgMedium;
 
     const baseStyle = css`
       display: flex;
@@ -74,8 +77,11 @@ const Avatar = forwardRef<Ref, AvatarProps>(
       height: ${size}px;
       color: ${theme.colour.text.brandPrimary};
       background-color: ${theme.colour.fill.brandSubtle};
-      font-family: ${theme.font.family.primary};
+      font-family: ${initialsTypography.fontFamily};
+      font-feature-settings: ${initialsTypography.fontSettings};
       font-size: ${fontSize}px;
+      font-weight: ${initialsTypography.fontWeight};
+      line-height: ${initialsTypography.lineHeight}%;
       cursor: pointer;
     `;
 

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

@@ -2,7 +2,7 @@
 
 exports[`Avatar > Snapshot: Default 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg
@@ -31,7 +31,7 @@ exports[`Avatar > Snapshot: Default 1`] = `
 
 exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -61,7 +61,7 @@ exports[`Avatar > Snapshot: Default with disabled prop 1`] = `
 
 exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
 <button
-  class="ucl-uikit-avatar css-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -91,7 +91,7 @@ exports[`Avatar > Snapshot: icon variant with disabled prop 1`] = `
 
 exports[`Avatar > Snapshot: icon variant with no props 1`] = `
 <button
-  class="ucl-uikit-avatar css-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg
@@ -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-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   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-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   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-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   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-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <span
@@ -176,7 +176,7 @@ 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-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg
@@ -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-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   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-ucbqvu"
+  class="ucl-uikit-avatar css-evms17"
   data-testid="ucl-uikit-avatar"
   disabled=""
 >
@@ -232,7 +232,7 @@ 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-8z8m41"
+  class="ucl-uikit-avatar css-16zcktc"
   data-testid="ucl-uikit-avatar"
 >
   <svg

package/lib/components/Badge/Badge.tsx

@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 
 import { Icon } from '../';
+import Text from '../Text';
 import type { SpecificIconProps } from '../Icon/Icon';
 import type { ThemeType } from '../../theme';
 
@@ -127,8 +128,7 @@ const Badge = ({
 }: BadgeProps) => {
   const [theme] = useTheme();
 
-  const badgeTypography =
-    size === 'large' ? theme.typography.body.sm : theme.typography.body.xs;
+  const textLevel = size === 'large' ? 'sm' : 'xs';
 
   const iconSize = size === 'large' ? 16 : 14;
 
@@ -148,12 +148,6 @@ const Badge = ({
     background-color: ${backgroundColor};
     border: ${border ?? 'none'};
 
-    font-family: ${badgeTypography.fontFamily};
-    font-feature-settings: ${badgeTypography.fontSettings};
-    font-size: ${badgeTypography.fontSize}px;
-    font-weight: ${badgeTypography.fontWeight};
-    line-height: ${badgeTypography.lineHeight}%;
-
     border-radius: 100px;
     white-space: nowrap;
     gap: 4px;
@@ -193,8 +187,9 @@ const Badge = ({
   const VariantIcon = VARIANT_ICON_MAP[variant];
 
   return (
-    <span
-      data-testid={testId}
+    <Text
+      level={textLevel}
+      testId={testId}
       className={style}
       {...props}
     >
@@ -212,7 +207,7 @@ const Badge = ({
         />
       )}
       {children}
-    </span>
+    </Text>
   );
 };
 

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

@@ -2,7 +2,7 @@
 
 exports[`Badge > snapshot: default 1`] = `
 <span
-  class="ucl-uikit-badge css-b76pju"
+  class="ucl-uikit-text ucl-uikit-badge css-1qd9y8u"
   data-testid="ucl-uikit-badge"
 >
   Default
@@ -11,7 +11,7 @@ exports[`Badge > snapshot: default 1`] = `
 
 exports[`Badge > snapshot: size=large 1`] = `
 <span
-  class="ucl-uikit-badge css-6n39yj"
+  class="ucl-uikit-text ucl-uikit-badge css-1j13tem"
   data-testid="ucl-uikit-badge"
 >
   Large
@@ -20,7 +20,7 @@ exports[`Badge > snapshot: size=large 1`] = `
 
 exports[`Badge > snapshot: statusIndicator 1`] = `
 <span
-  class="ucl-uikit-badge css-b76pju"
+  class="ucl-uikit-text ucl-uikit-badge css-1qd9y8u"
   data-testid="ucl-uikit-badge"
 >
   <span
@@ -33,7 +33,7 @@ exports[`Badge > snapshot: statusIndicator 1`] = `
 
 exports[`Badge > snapshot: variant=critical with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-1oxz1ke"
+  class="ucl-uikit-text ucl-uikit-badge css-rkw7bu"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -66,7 +66,7 @@ exports[`Badge > snapshot: variant=critical with icon 1`] = `
 
 exports[`Badge > snapshot: variant=disabled 1`] = `
 <span
-  class="ucl-uikit-badge css-psg0dk"
+  class="ucl-uikit-text ucl-uikit-badge css-a4ty56"
   data-testid="ucl-uikit-badge"
 >
   Disabled
@@ -75,7 +75,7 @@ exports[`Badge > snapshot: variant=disabled 1`] = `
 
 exports[`Badge > snapshot: variant=info with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-37ncyr"
+  class="ucl-uikit-text ucl-uikit-badge css-9ddki6"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -108,7 +108,7 @@ exports[`Badge > snapshot: variant=info with icon 1`] = `
 
 exports[`Badge > snapshot: variant=info-subtle 1`] = `
 <span
-  class="ucl-uikit-badge css-1x6sfca"
+  class="ucl-uikit-text ucl-uikit-badge css-1mmhjpi"
   data-testid="ucl-uikit-badge"
 >
   Info subtle
@@ -117,7 +117,7 @@ exports[`Badge > snapshot: variant=info-subtle 1`] = `
 
 exports[`Badge > snapshot: variant=success with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-16a4ap6"
+  class="ucl-uikit-text ucl-uikit-badge css-1k9d7cn"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -148,7 +148,7 @@ exports[`Badge > snapshot: variant=success with icon 1`] = `
 
 exports[`Badge > snapshot: variant=warning with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-1o21lbi"
+  class="ucl-uikit-text ucl-uikit-badge css-1vsenfu"
   data-testid="ucl-uikit-badge"
 >
   <svg

package/lib/components/Button/Button.tsx

@@ -127,6 +127,12 @@ const Button = <C extends ElementType = 'button'>({
 
   const resolvedVariant = normalizeVariantProp(variant, destructive);
   const resolvedSize = normalizeSizeprop(size);
+  const buttonTypography = {
+    xsmall: theme.typography.body.smMedium,
+    small: theme.typography.body.mdMedium,
+    medium: theme.typography.body.mdMedium,
+    large: theme.typography.body.lgMedium,
+  }[resolvedSize];
 
   const baseStyle = css`
     all: unset;
@@ -138,9 +144,11 @@ const Button = <C extends ElementType = 'button'>({
     position: relative;
     box-sizing: border-box;
     border-radius: ${theme.radius.r4};
-    font-family: ${theme.typography.body.md.fontFamily};
-    font-feature-settings: ${theme.typography.body.md.fontSettings};
-    font-weight: 500;
+    font-family: ${buttonTypography.fontFamily};
+    font-feature-settings: ${buttonTypography.fontSettings};
+    font-size: ${buttonTypography.fontSize}px;
+    font-weight: ${buttonTypography.fontWeight};
+    line-height: ${buttonTypography.lineHeight}%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     outline: none;
@@ -164,25 +172,21 @@ const Button = <C extends ElementType = 'button'>({
   const sizeExtraSmallStyle = css`
     height: 32px;
     padding: 0 ${paddingPx}px;
-    font-size: 14px;
   `;
 
   const sizeSmallStyle = css`
     height: 40px;
     padding: 0 ${paddingPx}px;
-    font-size: 16px;
   `;
 
   const sizeMediumStyle = css`
     height: 48px;
     padding: 0 ${paddingPx}px;
-    font-size: 16px;
   `;
 
   const sizeLargeStyle = css`
     height: 56px;
     padding: 0 ${paddingPx}px;
-    font-size: 18px;
   `;
 
   const fullWidthStyle = css`

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

@@ -3,7 +3,7 @@
 exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-rl1hmu"
+  class="ucl-uikit-button css-thupyi"
   data-testid="ucl-uikit-button"
 >
   Delete
@@ -13,7 +13,7 @@ exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 exports[`Button > maps legacy size default to medium 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
 >
   Legacy default size
@@ -23,7 +23,7 @@ exports[`Button > maps legacy size default to medium 1`] = `
 exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 <a
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
   href="https://ucl.ac.uk"
 >
@@ -34,7 +34,7 @@ exports[`Button > snapshot: 'as' prop with 'a' 1`] = `
 exports[`Button > snapshot: loading 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-16925p4"
+  class="ucl-uikit-button css-736ss2"
   data-testid="ucl-uikit-button"
   disabled=""
 >
@@ -67,7 +67,7 @@ exports[`Button > snapshot: loading 1`] = `
 exports[`Button > snapshot: no props 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-12mlzyd"
+  class="ucl-uikit-button css-5vh71f"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -75,7 +75,7 @@ exports[`Button > snapshot: no props 1`] = `
 exports[`Button > snapshot: testId prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-12mlzyd"
+  class="ucl-uikit-button css-5vh71f"
   data-testid="test123"
 />
 `;
@@ -83,7 +83,7 @@ exports[`Button > snapshot: testId prop 1`] = `
 exports[`Button > snapshot: variant prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-ub9awk"
+  class="ucl-uikit-button css-25bhrl"
   data-testid="ucl-uikit-button"
 />
 `;
@@ -91,7 +91,7 @@ exports[`Button > snapshot: variant prop 1`] = `
 exports[`Button > snapshot: with icon 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
 >
   <svg
@@ -119,7 +119,7 @@ exports[`Button > snapshot: with icon 1`] = `
 exports[`Button > snapshot: with icon and iconPosition right 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-19pu3x7"
+  class="ucl-uikit-button css-5txlzw"
   data-testid="ucl-uikit-button"
 >
   Download

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

@@ -41,7 +41,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Month"
-        class="ucl-uikit-select css-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -88,7 +88,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Year"
-        class="ucl-uikit-select css-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -162,43 +162,43 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
       data-testid="ucl-uikit-calendar__grid"
     >
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         M
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         W
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         F
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S
@@ -795,7 +795,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Month"
-        class="ucl-uikit-select css-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -842,7 +842,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Year"
-        class="ucl-uikit-select css-10nht8r"
+        class="ucl-uikit-select css-njh36g"
         data-testid="ucl-uikit-select"
         role="combobox"
         tabindex="0"
@@ -916,43 +916,43 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
       data-testid="ucl-uikit-calendar__grid"
     >
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         M
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         W
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         T
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-76sg87"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-9cfwur"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         F
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S
       </div>
       <div
-        class="ucl-uikit-calendar__column-heading css-11w8me4"
+        class="ucl-uikit-paragraph ucl-uikit-calendar__column-heading css-1yk7pei"
         data-testid="ucl-uikit-calendar__column-heading"
       >
         S

package/lib/components/Calendar/subcomponents/AcademicWeek.tsx

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import Paragraph from '../../Paragraph';
 
 const NAME = 'ucl-uikit-calendar__academic-week';
 
@@ -16,20 +17,21 @@ const AcademicWeek = ({ weekNumber }: AcademicWeekProps) => {
     justify-content: center;
     width: 100%;
     height: 40px;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f14};
     color: ${theme.colour.text.brandPrimary};
   `;
 
   const style = cx(NAME, baseStyle);
 
   return (
-    <div
-      data-testid={NAME}
+    <Paragraph
+      as='div'
+      level='sm'
+      noMargins
+      testId={NAME}
       className={style}
     >
       {weekNumber && 'W ' + weekNumber.toString().padStart(2, '0')}
-    </div>
+    </Paragraph>
   );
 };
 

package/lib/components/Calendar/subcomponents/ColumnHeading.tsx

@@ -1,5 +1,6 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
+import Paragraph from '../../Paragraph';
 
 interface ColumnHeadingProps {
   index: number;
@@ -18,22 +19,26 @@ const ColumnHeading = ({ index, day, isWeekend }: ColumnHeadingProps) => {
     justify-content: center;
     width: 40px;
     height: 32px;
-    color: ${isWeekend
-      ? theme.colour.text.warningOnBgFill
-      : theme.colour.text.secondary};
-    font-weight: 700;
+    color: ${
+      isWeekend
+        ? theme.colour.text.warningOnBgFill
+        : theme.colour.text.secondary
+    };
   `;
 
   const style = cx(NAME, baseStyle);
 
   return (
-    <div
+    <Paragraph
+      as='div'
+      level='md-semibold'
+      noMargins
       className={style}
-      data-testid={NAME}
+      testId={NAME}
       key={index}
     >
       {day}
-    </div>
+    </Paragraph>
   );
 };