From a0f0def985332df5d52ac05a840aad1d7999fcf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20B=C3=A9gaudeau?=
 <stephane.begaudeau@obeo.fr>
Date: Wed, 12 Jun 2024 11:21:52 +0200
Subject: [PATCH] [enh] Switch to a 12px default font size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Stéphane Bégaudeau <stephane.begaudeau@obeo.fr>
---
 .../sirius-components-core/src/theme.ts         | 17 ++++++-----------
 .../ProjectTemplateCard.tsx                     | 10 ++++------
 .../images/ProjectImagesSettings.tsx            |  2 +-
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/core/frontend/sirius-components-core/src/theme.ts b/packages/core/frontend/sirius-components-core/src/theme.ts
index a885cf457f..933e0b4bad 100644
--- a/packages/core/frontend/sirius-components-core/src/theme.ts
+++ b/packages/core/frontend/sirius-components-core/src/theme.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2023 Obeo.
+ * Copyright (c) 2021, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -25,62 +25,57 @@ const fallbackTheme = createTheme({
     selected: 'gray',
   },
   typography: {
+    fontSize: 12,
     h1: {
-      fontSize: '4rem',
+      fontSize: '3.42rem',
       fontWeight: 400,
       lineHeight: 1.167,
       letterSpacing: '0em',
     },
     h2: {
-      fontSize: '3rem',
+      fontSize: '2.5rem',
       fontWeight: 400,
       lineHeight: 1.2,
       letterSpacing: '0em',
     },
     h3: {
-      fontSize: '2.5rem',
+      fontSize: '2.142rem',
       fontWeight: 400,
       lineHeight: 1.167,
       letterSpacing: '0.3px',
     },
     h4: {
-      fontSize: '2rem',
+      fontSize: '1.7rem',
       fontWeight: 400,
       lineHeight: 1.235,
       letterSpacing: '0.00735em',
     },
     h5: {
-      fontSize: '1.5rem',
       fontWeight: 700,
       lineHeight: 1.334,
       letterSpacing: '0em',
     },
     h6: {
-      fontSize: '1.25rem',
       fontWeight: 700,
       lineHeight: 1.5,
       letterSpacing: '0.0075em',
     },
     subtitle1: {
-      fontSize: '1rem',
       fontWeight: 700,
       lineHeight: 1.7,
       letterSpacing: '0.03em',
     },
     subtitle2: {
-      fontSize: '0.875rem',
       fontWeight: 700,
       lineHeight: 2,
       letterSpacing: '0.06em',
     },
     body1: {
-      fontSize: '1rem',
       fontWeight: 400,
       lineHeight: 1.5,
       letterSpacing: '0.00938em',
     },
     body2: {
-      fontSize: '0.875rem',
       fontWeight: 400,
       lineHeight: 1.43,
       letterSpacing: '0.01071em',
diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx
index aa07f9bf34..157121b190 100644
--- a/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx
+++ b/packages/sirius-web/frontend/sirius-web-application/src/views/project-browser/create-projects-area/ProjectTemplateCard.tsx
@@ -46,7 +46,6 @@ const useProjectTemplateStyles = makeStyles((theme) => ({
   projectTemplateLabel: {
     textTransform: 'none',
     fontWeight: 400,
-    fontSize: theme.spacing(2),
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
@@ -68,7 +67,7 @@ export const ProjectTemplateCard = ({ template, running, disabled, onCreateProje
         </CardContent>
         <CardActions className={classes.templateCardActions}>
           <Tooltip title={template.label}>
-            <Typography variant="h5" className={classes.projectTemplateLabel}>
+            <Typography variant="body1" className={classes.projectTemplateLabel}>
               + {template.label}
             </Typography>
           </Tooltip>
@@ -91,7 +90,6 @@ const useProjectCardStyles = makeStyles((theme) => ({
   projectCardLabel: {
     textTransform: 'none',
     fontWeight: 400,
-    fontSize: theme.spacing(2),
     textOverflow: 'ellipsis',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
@@ -129,7 +127,7 @@ export const NewProjectCard = () => {
         </CardContent>
         <CardActions className={classes.projectCardActions}>
           <Tooltip title={'Blank project'}>
-            <Typography variant="h5" className={classes.projectCardLabel}>
+            <Typography variant="body1" className={classes.projectCardLabel}>
               + Blank project
             </Typography>
           </Tooltip>
@@ -149,7 +147,7 @@ export const UploadProjectCard = () => {
         </CardContent>
         <CardActions className={classes.projectCardActions}>
           <Tooltip title={'Upload project'}>
-            <Typography variant="h5" className={classes.projectCardLabel}>
+            <Typography variant="body1" className={classes.projectCardLabel}>
               + Upload project
             </Typography>
           </Tooltip>
@@ -169,7 +167,7 @@ export const ShowAllTemplatesCard = ({ onClick }: ShowAllTemplatesCardProps) =>
         </CardContent>
         <CardActions className={classes.projectCardActions}>
           <Tooltip title={'Show all templates'}>
-            <Typography variant="h5" className={classes.projectCardLabel}>
+            <Typography variant="body1" className={classes.projectCardLabel}>
               Show all templates
             </Typography>
           </Tooltip>
diff --git a/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/images/ProjectImagesSettings.tsx b/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/images/ProjectImagesSettings.tsx
index 50abae6f50..ed9656029d 100644
--- a/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/images/ProjectImagesSettings.tsx
+++ b/packages/sirius-web/frontend/sirius-web-application/src/views/project-settings/images/ProjectImagesSettings.tsx
@@ -83,7 +83,7 @@ export const ProjectImagesSettings = () => {
     <>
       <div className={classes.imageSettingsViewContainer}>
         <div className={classes.header}>
-          <Typography variant="h3">Project Images</Typography>
+          <Typography variant="h4">Project Images</Typography>
 
           <div className={classes.actions}>
             <Button data-testid="upload-image" color="primary" variant="outlined" onClick={onTriggerUpload}>