♻️(frontend) replace Arial font-family with token font

In some components, the Arial font was still used
because of a centering problem.
We removed all instances of Arial and replaced them
with the current font token, the centering problems
were fixed by adding "contain: content;" to the css.

CHANGELOG.md

@@ -10,8 +10,10 @@ and this project adheres to
 
 ### Changed
 
+- ♻️(frontend) replace Arial font-family with token font #1411
 - ♿(frontend) improve accessibility:
   - #1354
+  - #1349
   - ♿ improve accessibility by adding landmark roles to layout #1394
   - ♿ add document visible in list and openable via enter key #1365
   - ♿ add pdf outline property to enable bookmarks display #1368
@@ -29,8 +31,6 @@ and this project adheres to
 ### Added
 
 - ✨(api) add API route to fetch document content #1206
-- ♿(frontend) improve accessibility:
-  - #1349
 
 ### Changed
 

src/frontend/apps/impress/src/components/Text.tsx

@@ -13,6 +13,7 @@ export interface TextProps extends BoxProps {
   $ellipsis?: boolean;
   $weight?: CSSProperties['fontWeight'];
   $textAlign?: CSSProperties['textAlign'];
+  $textTransform?: CSSProperties['textTransform'];
   $size?: TextSizes | (string & {});
   $theme?:
     | 'primary'
@@ -43,6 +44,8 @@ export type TextType = ComponentPropsWithRef<typeof Text>;
 
 export const TextStyled = styled(Box)<TextProps>`
   ${({ $textAlign }) => $textAlign && `text-align: ${$textAlign};`}
+  ${({ $textTransform }) =>
+    $textTransform && `text-transform: ${$textTransform};`}
   ${({ $weight }) => $weight && `font-weight: ${$weight};`}
   ${({ $size }) =>
     $size &&

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -38,6 +38,13 @@
   );
 }
 
+/**
+ * Button
+*/
+.c__button {
+  contain: content;
+}
+
 /**
  * Modal
 */

src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx

@@ -125,13 +125,7 @@ export const DocRoleDropdown = ({
         },
       ]}
     >
-      <Text
+      <Text $theme="primary" $variation="800">
-        $theme="primary"
-        $variation="800"
-        $css={css`
-          font-family: Arial, Helvetica, sans-serif;
-        `}
-      >
         {transRole(currentRole)}
       </Text>
     </DropdownMenu>

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx

@@ -151,12 +151,12 @@ export const DocShareModalInviteUserRow = ({
             $direction="row"
             $align="center"
             $css={css`
-              font-family: Arial, Helvetica, sans-serif;
+              contain: content;
-              font-size: var(--c--theme--font--sizes--sm);
-              color: var(--c--theme--colors--greyscale-400);
             `}
+            $color="var(--c--theme--colors--greyscale-400)"
+            $cursor="pointer"
           >
-            <Text $theme="primary" $variation="800">
+            <Text $theme="primary" $variation="800" $size="sm">
               {t('Add')}
             </Text>
             <Icon

src/frontend/apps/impress/src/features/docs/doc-share/components/UserAvatar.tsx

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import { Box } from '@/components';
+import { Text } from '@/components';
 import { tokens } from '@/cunningham';
 import { User } from '@/features/auth';
 
@@ -37,35 +37,26 @@ export const UserAvatar = ({ user, background }: Props) => {
   const splitName = name?.split(' ');
 
   return (
-    <Box
+    <Text
+      className="--docs--user-avatar"
+      $align="center"
+      $color="rgba(255, 255, 255, 0.9)"
+      $justify="center"
       $background={background || getColorFromName(name)}
       $width="24px"
       $height="24px"
-      $direction="row"
-      $align="center"
-      $justify="center"
       $radius="50%"
+      $size="10px"
+      $textAlign="center"
+      $textTransform="uppercase"
+      $weight={600}
       $css={css`
-        color: rgba(255, 255, 255, 0.9);
         border: 1px solid rgba(255, 255, 255, 0.5);
+        contain: content;
       `}
-      className="--docs--user-avatar"
     >
-      <Box
+      {splitName[0]?.charAt(0)}
-        $direction="row"
+      {splitName?.[1]?.charAt(0)}
-        $css={css`
+    </Text>
-          text-align: center;
-          font-style: normal;
-          font-weight: 600;
-          font-family:
-            Arial, Helvetica, sans-serif; // Can't use marianne font because it's impossible to center with this font
-          font-size: 10px;
-          text-transform: uppercase;
-        `}
-      >
-        {splitName[0]?.charAt(0)}
-        {splitName?.[1]?.charAt(0)}
-      </Box>
-    </Box>
   );
 };