Refacto color theme

src/front/Components/DesignSystem/BlockList/classes.module.scss

@@ -6,15 +6,15 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	cursor: pointer;
 
 	&:hover {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	&[data-selected="true"] {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	.left-side {

src/front/Components/DesignSystem/Button/classes.module.scss

@@ -23,51 +23,51 @@
 	}
 
 	&[variant="primary"] {
-		color: $white;
+		color: $color-generic-white;
-		background-color: $purple-flash;
+		background-color: $color-primary-500;
-		border-color: $purple-flash;
+		border-color: $color-primary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $purple-hover;
+			border-color: $color-primary-700;
-			background-color: $purple-hover;
+			background-color: $color-primary-700;
 		}
 
 		&:disabled {
-			border-color: $purple-soft;
+			border-color: $color-primary-500-soft;
-			background-color: $purple-soft;
+			background-color: $color-primary-500-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="secondary"] {
-		color: $white;
+		color: $color-generic-white;
-		background-color: $red-flash;
+		background-color: $color-error-600;
-		border-color: $red-flash;
+		border-color: $color-error-600;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $re-hover;
+			border-color: $color-error-800;
-			background-color: $re-hover;
+			background-color: $color-error-800;
 		}
 
 		&:disabled {
-			border-color: $red-soft;
+			border-color: $color-error-600-soft;
-			background-color: $red-soft;
+			background-color: $color-error-600-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="ghost"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: transparent;
-		border-color: $pink-flash;
+		border-color: $color-secondary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
@@ -75,26 +75,26 @@
 
 		svg {
 			path {
-				stroke: $white;
+				stroke: $color-generic-white;
 			}
 		}
 
 		&:hover {
-			border-color: $pink-hover;
+			border-color: $color-secondary-700;
-			color: $pink-hover;
+			color: $color-secondary-700;
 		}
 
 		&:disabled {
-			border-color: $pink-soft;
+			border-color: $color-secondary-500-soft;
-			background-color: $pink-soft;
+			background-color: $color-secondary-500-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="white"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: white;
-		border-color: $pink-flash;
+		border-color: $color-secondary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
@@ -102,18 +102,18 @@
 
 		svg {
 			path {
-				stroke: $white;
+				stroke: $color-generic-white;
 			}
 		}
 
 		&:hover {
-			border-color: $pink-hover;
+			border-color: $color-secondary-700;
-			color: $pink-hover;
+			color: $color-secondary-700;
 		}
 
 		&:disabled {
-			border-color: $pink-soft;
+			border-color: $color-secondary-500-soft;
-			background-color: $pink-soft;
+			background-color: $color-secondary-500-soft;
 			pointer-events: none;
 		}
 	}
@@ -132,7 +132,7 @@
 	}
 
 	&[variant="line"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: transparent;
 		border-color: transparent;
 		padding: 0;

src/front/Components/DesignSystem/CheckBox/classes.module.scss

@@ -13,7 +13,7 @@
 		background-color: transparent;
 		width: 16px;
 		height: 16px;
-		border: 1px solid $turquoise-flash;
+		border: 1px solid $color-secondary-500;
 		border-radius: 2px;
 		margin-right: 16px;
 		display: grid;
@@ -30,7 +30,7 @@
 		display: grid;
 		width: 16px;
 		height: 16px;
-		background-color: $turquoise-flash;
+		background-color: $color-secondary-500;
 		border-radius: 2px;
 		transform: scale(0);
 	}

src/front/Components/DesignSystem/CheckBox/index.tsx

@@ -37,7 +37,7 @@ export default class CheckBox extends React.Component<IProps, IState> {
 
 	public override render(): JSX.Element {
 		return (
-			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
 					<input
 						type="checkbox"

src/front/Components/DesignSystem/DepositDocument/classes.module.scss

@@ -1,19 +1,17 @@
 .container {
-
-
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -34,12 +32,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -102,7 +100,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
 }

src/front/Components/DesignSystem/DepositDocument/index.tsx

@@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div
 									className={
 										this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 								)}
 							</Typography>
 							{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
-								<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+								<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 									Sélectionnez des documents .jpg, .pdf ou .png
 								</Typography>
 							)}
@@ -157,7 +157,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 								<div className={classes["file-container"]} key={fileObj.name + file.index}>
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
-										<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
+										<Typography
+											typo={ITypo.P_16}
+											color={ITypoColor.COLOR_NEUTRAL_500}
+											title={file.fileName ?? fileObj.name}>
 											{this.shortName(file.fileName || fileObj.name)}
 										</Typography>
 									</div>
@@ -177,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["loader"]}>
 										<Loader />
 									</div>
-									<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Chargement...
 									</Typography>
 								</div>
@@ -188,7 +191,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
 						<div className={classes["bottom-container"]}>
 							<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
-								<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+								<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
 									Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 								</Typography>
 							</Button>
@@ -262,26 +265,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		switch (history.document_status) {
 			case EDocumentStatus.ASKED:
 				return (
-					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 						Demandé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.VALIDATED:
 				return (
-					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 						Validé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.DEPOSITED:
 				return (
-					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 						Déposé le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 
 			case EDocumentStatus.REFUSED:
 				return (
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}>
+					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_800}>
 						Document non conforme
 						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button

src/front/Components/DesignSystem/DepositOtherDocument/classes.module.scss

@@ -1,18 +1,18 @@
 .container {
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 		margin-top: 16px;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -33,12 +33,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -101,7 +101,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
 }

src/front/Components/DesignSystem/DepositOtherDocument/index.tsx

@@ -110,7 +110,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 									</div>
 									<div className={classes["separator"]} />
 									<div className={classes["right"]}>
-										<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+										<Typography
+											typo={ITypo.P_SB_16}
+											color={ITypoColor.COLOR_GENERIC_BLACK}
+											className={classes["title"]}>
 											<div
 												className={
 													this.props.document.document_status === EDocumentStatus.VALIDATED
@@ -120,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												{this.props.document.document_type?.name}
 											</div>
 										</Typography>
-										<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+										<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 											Sélectionnez des documents .jpg, .pdf ou .png
 										</Typography>
 									</div>
@@ -134,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												<div className={classes["file-container"]} key={fileObj.name}>
 													<div className={classes["left-part"]}>
 														<Image src={DocumentCheckIcon} alt="Document check" />
-														<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+														<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 															{this.shortName(fileObj.name)}
 														</Typography>
 													</div>
@@ -152,7 +155,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 								)}
 								<div className={classes["bottom-container"]}>
 									<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
-										<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+										<Typography
+											typo={ITypo.P_SB_16}
+											color={ITypoColor.COLOR_SECONDARY_500}
+											className={classes["add-document"]}>
 											Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 										</Typography>
 									</Button>

src/front/Components/DesignSystem/DepositRib/classes.module.scss

@@ -1,19 +1,17 @@
 .container {
-
-
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -34,12 +32,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -102,7 +100,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
 }

src/front/Components/DesignSystem/DepositRib/index.tsx

@@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
 						<div className={classes["separator"]} />
 
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div>Déposer un RIB</div>
 							</Typography>
-							<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+							<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 								Sélectionnez des documents .jpg, .pdf ou .png
 							</Typography>
 						</div>
@@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 								<div className={classes["file-container"]} key="0">
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
-										<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.name}>
+										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
 											{this.shortName(file.name)}
 										</Typography>
 									</div>
@@ -161,7 +161,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 
 					<div className={classes["bottom-container"]}>
 						<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
 								Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 							</Typography>
 						</Button>

src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss

@@ -1,30 +1,30 @@
 @import "@Themes/constants.scss";
 
 .root {
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	padding: 16px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	&.DEPOSITED {
 		cursor: pointer;
-		border: 1px solid $orange-soft;
+		border: 1px solid $color-warning-500-soft;
 		&:hover {
-			border: 1px solid $orange-soft;
+			border: 1px solid $color-warning-500-soft;
-			outline: 1px solid $orange-soft;
+			outline: 1px solid $color-warning-500-soft;
 		}
 	}
 	&.VALIDATED {
 		cursor: pointer;
-		border: 1px solid $green-soft;
+		border: 1px solid $color-success-600-soft;
 		&:hover {
-			border: 1px solid $green-soft;
+			border: 1px solid $color-success-600-soft;
-			outline: 1px solid $green-soft;
+			outline: 1px solid $color-success-600-soft;
 		}
 	}
 
 	.valid-radius {
-		background-color: $green-flash;
+		background-color: color-success-600;
 		padding: 6px;
 		border-radius: 20px;
 	}

src/front/Components/DesignSystem/FilePreview/index.tsx

@@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
 				{this.props.href && (
 					<>
 						{!type && (
-							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Erreur lors du chargement du fichier
 							</Typography>
 						)}

src/front/Components/DesignSystem/FolderArchivedListContainer/classes.module.scss

@@ -18,6 +18,6 @@
 		max-height: calc(100vh - 215px);
 		height: calc(100vh - 215px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss

@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	padding: 24px;
 	width: 100%;
 	display: flex;

src/front/Components/DesignSystem/FolderContainer/classes.module.scss

@@ -6,11 +6,11 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	cursor: pointer;
 
 	&:hover {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	.left-side {

src/front/Components/DesignSystem/FolderList/classes.module.scss

@@ -4,11 +4,11 @@
 	height: calc(100vh - 290px);
 	overflow-y: scroll;
 
-	&.archived{
+	&.archived {
 		height: calc(100vh - 220px);
 	}
 
 	.active {
-		background-color: var(--grey-medium);
+		background-color: var(--color-neutral-200);
 	}
 }

src/front/Components/DesignSystem/FolderListContainer/classes.module.scss

@@ -18,6 +18,6 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

src/front/Components/DesignSystem/Form/BaseField.tsx

@@ -107,7 +107,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);

src/front/Components/DesignSystem/Form/DateField/classes.module.scss

@@ -12,7 +12,7 @@
 		gap: 10px;
 		width: 100%;
 		height: 70px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		&:disabled {
 			cursor: not-allowed;
@@ -76,16 +76,16 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transition: transform 0.3s ease-in-out;
 		}
 	}
 
 	&[data-is-errored="true"] {
 		.input {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}

src/front/Components/DesignSystem/Form/DateField/index.tsx

@@ -20,7 +20,7 @@ export default class DateField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}

src/front/Components/DesignSystem/Form/SelectField/classes.module.scss

@@ -5,14 +5,14 @@
 	position: relative;
 	flex-direction: column;
 	width: 100%;
-	border: 1px solid var(--grey-medium);
+	border: 1px solid var(--color-neutral-200);
 
-	&[data-errored="true"]{
+	&[data-errored="true"] {
-		border: 1px solid var(--red-flash);
+		border: 1px solid var(--color-error-600);
 	}
 
-	&[data-disabled="true"]{
+	&[data-disabled="true"] {
-		.container-label{
+		.container-label {
 			cursor: not-allowed;
 		}
 		opacity: 0.6;
@@ -23,13 +23,11 @@
 		justify-content: space-between;
 		align-items: center;
 		width: 100%;
-		background-color: $white;
+		background-color: $color-generic-white;
 		cursor: pointer;
 		padding: 24px;
 		z-index: 1;
 
-		
-
 		&[data-border-right-collapsed="true"] {
 			border-radius: 8px 0 0 8px;
 		}
@@ -52,7 +50,7 @@
 				position: absolute;
 				top: 24px;
 				left: 8px;
-				background-color: $white;
+				background-color: $color-generic-white;
 				padding: 0 16px;
 
 				&[data-open="true"] {
@@ -64,7 +62,7 @@
 		.chevron-icon {
 			height: 24px;
 
-			fill: $grey;
+			fill: $color-neutral-500;
 			transition: all 350ms $custom-easing;
 			transform: rotate(90deg);
 
@@ -87,7 +85,7 @@
 		opacity: 1;
 		overflow: hidden;
 		top: 50px;
-		background-color: $white;
+		background-color: $color-generic-white;
 
 		&[data-open="false"] {
 			height: 0;

src/front/Components/DesignSystem/Form/SelectField/index.tsx

@@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 	private renderErrors(): JSX.Element | null {
 		if (!this.state.errors) return null;
 		return (
-			<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+			<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
 				{this.props.placeholder} ne peut pas être vide
 			</Typography>
 		);

src/front/Components/DesignSystem/Form/TextField/classes.module.scss

@@ -12,7 +12,7 @@
 		gap: 10px;
 		width: 100%;
 		height: 70px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		&:disabled {
 			cursor: not-allowed;
@@ -76,16 +76,16 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transition: transform 0.3s ease-in-out;
 		}
 	}
 
 	&[data-is-errored="true"] {
 		.input {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}

src/front/Components/DesignSystem/Form/TextField/index.tsx

@@ -21,7 +21,7 @@ export default class TextField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}

src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss

@@ -25,7 +25,7 @@
 
 		width: 100%;
 		height: 100px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		~ .fake-placeholder {
 			z-index: 2;
@@ -34,7 +34,7 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transform: translateY(35px);
 			transition: transform 0.3s ease-in-out;
 		}
@@ -54,9 +54,9 @@
 
 	&[data-is-errored="true"] {
 		.textarea {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}

src/front/Components/DesignSystem/Form/TextareaField/index.tsx

@@ -17,7 +17,7 @@ export default class TextAreaField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<textarea
 						name={this.props.name}

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss

@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -19,7 +19,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 	}
 }
 

src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss

@@ -14,13 +14,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $white;
+		background-color: $color-generic-white;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $black;
+			background-color: $color-generic-black;
 		}
 	}
 

src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss

@@ -13,13 +13,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $white;
+		background-color: $color-generic-white;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $black;
+			background-color: $color-generic-black;
 		}
 	}
 

src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss

@@ -5,7 +5,7 @@
 	flex-direction: column;
 	width: 390px;
 	max-height: 80vh;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -37,7 +37,7 @@
 		gap: 8px;
 		text-decoration: underline;
 		text-underline-offset: 2px;
-		color: var(--pink-flash);
+		color: var(--color-secondary-500);
 		cursor: pointer;
 	}
 

src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx

@@ -40,16 +40,16 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 						</div>
 					</div>
 					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}>
+						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_SECONDARY_500}>
 							Tout marquer comme lu
 						</Typography>
-						<Check color={ITypoColor.PINK_FLASH} />
+						<Check color={ITypoColor.COLOR_SECONDARY_500} />
 					</div>
 					<div className={classes["notification-body"]}>
 						<>
 							{!this.state.toastList || this.state.toastList.length === 0 ? (
 								<div className={classes["missing-notification"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Vous n'avez pas de notifications.
 									</Typography>
 								</div>

src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss

@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -27,7 +27,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 	}
 }
 

src/front/Components/DesignSystem/Header/classes.module.scss

@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	height: 83px;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 0 48px;
 	position: sticky;
@@ -81,6 +81,6 @@
 	gap: 8px;
 	justify-content: center;
 	align-items: center;
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	padding: 14px 0;
 }

src/front/Components/DesignSystem/Header/index.tsx

@@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
 				{this.state.cancelAt && (
 					<div className={classes["subscription-line"]}>
 						<InformationCircleIcon height="24" />;
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
 							{this.state.cancelAt.toLocaleDateString()}.
 						</Typography>

src/front/Components/DesignSystem/Loader/classes.module.scss

@@ -9,7 +9,7 @@
 	height: 100%;
 	border-radius: 50%;
 	border: 8px solid;
-	border-color: var(--grey-soft);
+	border-color: var(--color-neutral-50);
-	border-right-color: var(--blue-soft);
+	border-right-color: var(--color-info-500-soft);
 	animation: s2 1s infinite linear;
 }

src/front/Components/DesignSystem/Modal/classes.module.scss

@@ -51,7 +51,7 @@
 		position: relative;
 		width: 610px;
 		max-height: 90%;
-		background: $white;
+		background: $color-generic-white;
 		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
 		overflow: auto;
 		padding: 32px;

src/front/Components/DesignSystem/MultiSelect/classes.module.scss

@@ -7,7 +7,7 @@
 		flex-direction: column;
 		flex: 1;
 		position: relative;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 		background-color: transparent;
 
 		.placeholder {
@@ -69,9 +69,9 @@
 
 		&[data-is-errored="true"] {
 			.input {
-				border: 1px solid var(--red-flash);
+				border: 1px solid var(--color-error-600);
 				~ .fake-placeholder {
-					color: var(--red-flash);
+					color: var(--color-error-600);
 				}
 			}
 		}

src/front/Components/DesignSystem/MultiSelect/index.tsx

@@ -37,8 +37,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		this.state = {
 			isFocused: false,
 			selectedOptions: [],
-			validationError: this.props.validationError ?? null
+			validationError: this.props.validationError ?? null,
-
 		};
 		this.hasError = this.hasError.bind(this);
 		this.onChange = this.onChange.bind(this);
@@ -147,7 +146,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);

src/front/Components/DesignSystem/Newsletter/index.tsx

@@ -70,22 +70,22 @@ export default class Newsletter extends React.Component<IProps, IState> {
 					<div className={classes["container"]}>
 						<div className={classes["root"]}>
 							<div className={classes["text"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
+								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Restez Informé(e) avec notre Newsletter
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
 								</Typography>
 								{this.state.errorMessage && (
 									<div>
-										<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}>
+										<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_ERROR_600}>
 											{this.state.errorMessage}
 										</Typography>
 									</div>
 								)}
 								{this.state.successMessage && (
 									<div>
-										<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
+										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SUCCESS_600}>
 											{this.state.successMessage}
 										</Typography>
 									</div>

src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss

@@ -2,7 +2,7 @@
 
 .root {
 	position: relative;
-	background-color: $grey-medium;
+	background-color: $color-neutral-200;
 	box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.08);
 	height: 12px;
 	border-radius: 5px;
@@ -15,7 +15,7 @@
 	width: 100%;
 	height: 100%;
 	transition: width 300ms;
-	background-color: $turquoise-flash;
+	background-color: $color-secondary-500;
 
 	.percentage {
 		width: 0;

src/front/Components/DesignSystem/RadioBox/classes.module.scss

@@ -11,7 +11,7 @@
 		background-color: transparent;
 		width: 15px;
 		height: 15px;
-		border: 1px solid $turquoise-flash;
+		border: 1px solid $color-secondary-500;
 		border-radius: 100px;
 		margin-right: 16px;
 		display: flex;
@@ -25,7 +25,7 @@
 		content: "";
 		width: 11px;
 		height: 11px;
-		background-color: $turquoise-flash;
+		background-color: $color-secondary-500;
 		border-radius: 100px;
 		transform: scale(0);
 	}

src/front/Components/DesignSystem/RadioBox/index.tsx

@@ -21,7 +21,7 @@ export default class RadioBox extends React.Component<IProps> {
 	};
 	public override render(): JSX.Element {
 		return (
-			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				<label className={classes["root"]}>
 					<input
 						type="radio"

src/front/Components/DesignSystem/SearchBar/classes.module.scss

@@ -4,15 +4,15 @@
 	display: flex;
 	align-items: center;
 	padding-left: 24px;
-	background-color: $white;
+	background-color: $color-generic-white;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	position: relative;
 
 	.fake-placeholder {
 		position: absolute;
 		left: 47px;
 		top: 24px;
-		color: $grey;
+		color: $color-neutral-500;
 		pointer-events: none;
 	}
 
@@ -26,6 +26,6 @@
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
-		color: $grey;
+		color: $color-neutral-500;
 	}
 }

src/front/Components/DesignSystem/Switch/classes.module.scss

@@ -13,12 +13,12 @@
 		position: relative;
 		width: 46px;
 		height: 24px;
-		background-color: var(--grey-medium);
+		background-color: var(--color-neutral-200);
 		border-radius: 64px;
 
 		transition: all 200ms ease-in-out;
 		&[data-checked="true"] {
-			background-color: var(--turquoise-flash);
+			background-color: var(--color-secondary-500);
 
 			.round {
 				left: 24px;

src/front/Components/DesignSystem/Switch/index.tsx

@@ -28,7 +28,7 @@ export default function Switch({ onChange, checked, label, disabled }: IProps) {
 					<div className={classes["round"]} />
 				</div>
 			</div>
-			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{label}
 			</Typography>
 		</div>

src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss

@@ -26,7 +26,7 @@
 	pointer-events: all;
 	position: relative;
 	padding: 24px;
-	background: var(--orange-soft);
+	background: var(--color-warning-500-soft);
 	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 	border-radius: 5px;
 
@@ -45,7 +45,7 @@
 	&[data-clickable="true"] {
 		cursor: pointer;
 		&:hover {
-			background: var(--orange-soft-hover);
+			background: var(--color-warning-500-soft);
 		}
 	}
 

src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx

@@ -83,7 +83,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 		if (typeof text === "string") {
 			return (
 				<div className={classes["text-container"]}>
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{text}
 					</Typography>
 				</div>

src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss

@@ -3,7 +3,7 @@
 .root {
 	min-width: 100px;
 	max-width: 320px;
-	background: $white;
+	background: $color-generic-white;
 	border-radius: 5px !important;
 	position: fixed;
 	transition: opacity 0.2s ease-in-out;
@@ -29,5 +29,5 @@
 	position: absolute;
 	right: 20px;
 	margin-top: -4px;
-	fill: $white;
+	fill: $color-generic-white;
 }

src/front/Components/DesignSystem/ToolTip/index.tsx

@@ -19,8 +19,8 @@ type IState = {
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
 	({ theme }) => ({
 		[`& .${tooltipClasses.tooltip}`]: {
-			backgroundColor: "var(--white)",
+			backgroundColor: "var(--color-generic-white)",
-			color: "var(--black)",
+			color: "var(--color-generic-black)",
 			boxShadow: "0px 4px 24px 0px #00000026",
 			fontSize: 14,
 			fontWeight: 400,
@@ -30,7 +30,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipM
 			borderRadius: "0px",
 		},
 		[`& .${tooltipClasses.arrow}`]: {
-			color: "var(--white)",
+			color: "var(--color-generic-white)",
 		},
 	}),
 );

src/front/Components/DesignSystem/Typography/classes.module.scss

@@ -2,7 +2,7 @@
 @import "@Themes/modes.scss";
 
 .root {
-	color: $black;
+	color: $color-generic-black;
 	vertical-align: center;
 	font-family: "Inter", sans-serif;
 	&.H1-60 {
@@ -67,7 +67,7 @@
 		font-size: 18px;
 		line-height: 22px;
 		letter-spacing: 0.5px;
-		color: $grey;
+		color: $color-neutral-500;
 	}
 
 	&.Paragraphe-18-error {
@@ -92,7 +92,7 @@
 		font-size: 16px;
 		line-height: 22px;
 		letter-spacing: 0.5px;
-		color: $grey;
+		color: $color-neutral-500;
 	}
 
 	&.Paragraphe-simple-16 {
@@ -104,7 +104,7 @@
 	}
 
 	&.Paragraphe-16-error {
-		color: $re-hover;
+		color: $color-error-800;
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
@@ -128,39 +128,39 @@
 		letter-spacing: 0.5px;
 	}
 
-	&.re-hover {
+	&.color-error-800 {
-		color: $re-hover;
+		color: $color-error-800;
 	}
 
-	&.grey {
+	&.color-neutral-500 {
-		color: $grey;
+		color: $color-neutral-500;
 	}
 
-	&.black {
+	&.color-generic-black {
-		color: $black;
+		color: $color-generic-black;
 	}
 
-	&.purple-flash {
+	&.color-primary-500 {
-		color: var(--purple-flash);
+		color: var(--color-primary-500);
 	}
 
-	&.pink-flash {
+	&.color-secondary-500 {
-		color: var(--pink-flash);
+		color: var(--color-secondary-500);
 	}
 
-	&.green-flash {
+	&.color-success-600 {
-		color: var(--green-flash);
+		color: var(--color-success-600);
 	}
 
-	&.red-flash {
+	&.color-error-600 {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 	}
 
-	&.orange-flash {
+	&.color-warning-500 {
-		color: var(--orange-flash);
+		color: var(--color-warning-500);
 	}
 
 	&.white {
-		color: $white;
+		color: $color-generic-white;
 	}
 }

src/front/Components/DesignSystem/Typography/index.tsx

@@ -33,15 +33,15 @@ export enum ITypo {
 }
 
 export enum ITypoColor {
-	RE_HOVER = "re-hover",
+	COLOR_ERROR_800 = "color-error-800",
-	GREY = "grey",
+	COLOR_NEUTRAL_500 = "color-neutral-500",
-	BLACK = "black",
+	COLOR_GENERIC_BLACK = "color-generic-black",
-	PURPLE_FLASH = "purple-flash",
+	COLOR_PRIMARY_500 = "color-primary-500",
-	PINK_FLASH = "pink-flash",
+	COLOR_SECONDARY_500 = "color-secondary-500",
-	GREEN_FLASH = "green-flash",
+	COLOR_SUCCESS_600 = "color-success-600",
-	ORANGE_FLASH = "orange-flash",
+	COLOR_WARNING_500 = "color-warning-500",
-	RED_FLASH = "red-flash",
+	COLOR_ERROR_600 = "color-error-600",
-	WHITE = "white",
+	COLOR_GENERIC_WHITE = "color-generic-white",
 }
 
 export default class Typography extends React.Component<IProps, IState> {

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss

@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 24px;
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	width: 100%;
 	gap: 32px;
 	.content {

src/front/Components/DesignSystem/UserFolder/classes.module.scss

@@ -21,7 +21,7 @@
 }
 
 .root {
-	border: 1px solid $grey;
+	border: 1px solid $color-neutral-500;
 	padding: 16px;
 	transition: all 350ms $custom-easing;
 

src/front/Components/DesignSystem/Version/index.tsx

@@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+				<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 					<div>{VersionFile.version}</div>
 				</Typography>
 			</div>

src/front/Components/DesignSystem/WarningBadge/classes.module.scss

@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: $orange-flash;
+	background-color: $color-warning-500;
 	padding: 6px;
 	border-radius: 20px;
 }

src/front/Components/Elements/MessageBox/classes.module.scss

@@ -20,12 +20,12 @@
 	}
 
 	&.success {
-		border: 1px solid var(--green-flash);
+		border: 1px solid var(--color-success-600);
 		background: #12bf4d0d;
 	}
 
 	&.error {
-		border: 1px solid var(--red-soft);
+		border: 1px solid var(--color-error-600-soft);
 		background: #f087711a;
 	}
 }

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss

@@ -17,7 +17,7 @@
 	.folderlist-container {
 		max-height: calc(100vh - 215px);
 		height: 100%;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 		overflow: auto;
 	}
 }

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx

@@ -59,7 +59,7 @@ export default function CollaboratorListContainer(props: IProps) {
 											height: "12px",
 											width: "12px",
 											borderRadius: "100px",
-											backgroundColor: "var(--green-flash)",
+											backgroundColor: "var(--color-success-600)",
 										}}
 									/>
 								) : (

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss

@@ -20,7 +20,7 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {

src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss

@@ -18,7 +18,7 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {

src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss

@@ -30,7 +30,7 @@
 					display: none;
 				}
 
-				background: var(--grey-soft);
+				background: var(--color-neutral-50);
 
 				.image {
 					width: 100%;

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
@@ -93,13 +93,13 @@
 				min-width: calc(100vw - 56px);
 			}
 
-			@media(max-width: $screen-s){
+			@media (max-width: $screen-s) {
 				padding: 40px 16px 64px 16px;
 				flex: 1;
 				min-width: unset;
 			}
 
-			.back-arrow-mobile{
+			.back-arrow-mobile {
 				display: none;
 				@media (max-width: $screen-s) {
 					display: block;
@@ -107,7 +107,7 @@
 				}
 			}
 
-			.back-arrow-desktop{
+			.back-arrow-desktop {
 				@media (max-width: $screen-s) {
 					display: none;
 				}

src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss

@@ -18,6 +18,6 @@
 		max-height: 100vh;
 		height: 100vh;
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss

@@ -20,7 +20,7 @@
 		max-height: calc(100vh - 215px);
 		height: calc(100vh - 215px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {

src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss

@@ -18,6 +18,6 @@
 		max-height: 100vh;
 		height: 100vh;
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/Layouts/ClientDashboard/classes.module.scss

@@ -72,7 +72,7 @@
 	}
 
 	.sub-container {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		padding: 64px;
 
 		.content {
@@ -113,7 +113,7 @@
 		}
 
 		.component-to-replace {
-			background-color: var(--grey-soft);
+			background-color: var(--color-neutral-50);
 			height: 98px;
 			width: 100%;
 		}

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -134,11 +134,11 @@ export default function ClientDashboard(props: IProps) {
 						</Typography>
 					</div>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						Dossier {folder?.folder_number} - {folder?.name}
 					</Typography>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{folder?.office?.name}
 					</Typography>
 
@@ -153,14 +153,14 @@ export default function ClientDashboard(props: IProps) {
 						transmis à votre notaire.
 					</Typography>
 					<div className={classes["note-box"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							{note?.content}
 						</Typography>
 					</div>
 				</div>
 
 				<div className={classes["contact"]}>
-					<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						<p>
 							{contact?.first_name} {contact?.last_name}
 						</p>

src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss

@@ -12,13 +12,13 @@
 			.subscription-active-dot {
 				width: 12px;
 				height: 12px;
-				background-color: var(--green-flash);
+				background-color: var(--color-success-600);
 				border-radius: 100px;
 			}
 		}
 	}
 	.user-infos {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		display: flex;
 		justify-content: space-between;
 		padding: 24px;
@@ -44,7 +44,7 @@
 
 	.role-container {
 		padding: 32px 16px;
-		border: 1px solid var(--grey);
+		border: 1px solid var(--color-neutral-500);
 
 		margin-top: 32px;
 

src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx

@@ -153,7 +153,7 @@ export default function CollaboratorInformations(props: IProps) {
 					{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
 						<div className={classes["subscription-active"]}>
 							<div className={classes["subscription-active-dot"]} />
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
 								Abonnement actif
 							</Typography>
 						</div>
@@ -161,25 +161,25 @@ export default function CollaboratorInformations(props: IProps) {
 				</div>
 				<div className={classes["user-infos"]}>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Nom
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Prénom
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Numéro de téléphone
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Email
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>

src/front/Components/Layouts/Collaborators/index.tsx

@@ -14,7 +14,7 @@ export default class Collaborators extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du collaborateur</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un collaborateur
 							</Typography>
 						</div>

src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss

@@ -23,7 +23,7 @@
 		gap: 100px;
 		justify-content: space-between;
 		padding: 24px;
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 
 		@media (max-width: $screen-l) {
 			gap: 80px;
@@ -69,7 +69,7 @@
 		margin-top: 32px;
 		padding: 32px 16px;
 
-		border: 1px solid var(--grey);
+		border: 1px solid var(--color-neutral-500);
 
 		.container-title {
 			display: flex;

src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx

@@ -135,7 +135,7 @@ export default function DeedTypesInformations(props: IProps) {
 				<div className={classes["deed-type-container"]}>
 					<div className={classes["infos"]}>
 						<div className={classNames(classes["middle-box"], classes["box"])}>
-							<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Description
 							</Typography>
 							<Typography typo={ITypo.P_18}>{deedTypeSelected?.description}</Typography>

src/front/Components/Layouts/DeedTypes/index.tsx

@@ -14,7 +14,7 @@ export default class DeedTypes extends BasePage<IProps, IState> {
 					<div className={classes["no-role-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un type d'acte
 							</Typography>
 						</div>

src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss

@@ -20,7 +20,7 @@
 		gap: 24px;
 		padding: 24px;
 		margin-top: 32px;
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 
 		.left {
 			display: flex;
@@ -44,8 +44,5 @@
 				gap: 12px;
 			}
 		}
-
-		.right {
-		}
 	}
 }

src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx

@@ -47,19 +47,19 @@ export default function DocumentTypesInformations() {
 				<div className={classes["document-infos"]}>
 					<div className={classes["left"]}>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom du document
 							</Typography>
 							<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les collaborateurs de l'office
 							</Typography>
 							<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les clients de l'office
 							</Typography>
 							<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>

src/front/Components/Layouts/DocumentTypes/index.tsx

@@ -14,7 +14,7 @@ export default class DocumentTypes extends BasePage<IProps, IState> {
 					<div className={classes["no-role-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un document
 							</Typography>
 						</div>

src/front/Components/Layouts/Folder/AskDocuments/index.tsx

@@ -53,7 +53,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
 				<div className={classes["root"]}>
 					<BackArrow url={backUrl} />
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Demander des documents
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>

src/front/Components/Layouts/Folder/CreateFolder/index.tsx

@@ -82,10 +82,10 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 			<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
 				<div className={classes["root"]}>
 					<BackArrow />
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Créer un dossier
 					</Typography>
-					<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
+					<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
 						Informations dossier
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>
@@ -118,7 +118,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 							/>
 
 							<div className={classes["access-container"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
+								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500}>
 									Accès au dossier
 								</Typography>
 								<div className={classes["radio-container"]}>

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -50,7 +50,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 				) : (
 					<div className={classes["no-client"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun client n'est associé au dossier.
 							</Typography>
 						</div>

src/front/Components/Layouts/Folder/FolderInformation/index.tsx

@@ -237,7 +237,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							<div className={classes["no-folder-selected"]}>
 								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Sélectionnez un dossier
 									</Typography>
 								</div>
@@ -268,7 +268,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 					showButtons={!this.state.hasValidateAnchoring}>
 					<div className={classes["validate-document-container"]}>
 						{!this.state.hasValidateAnchoring && (
-							<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
 								Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
 								documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
 								de rédaction d'actes.
@@ -276,7 +276,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						)}
 						{this.state.hasValidateAnchoring && (
 							<div className={classes["document-validating-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
 									Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
 									preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.
 								</Typography>

src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss

@@ -1,37 +1,37 @@
 @import "@Themes/constants.scss";
 
-.root{
+.root {
-    background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
-    padding: 24px;
+	padding: 24px;
 
-    .result-text{
+	.result-text {
-        color: rgba(0, 0, 0, 0.4);
+		color: rgba(0, 0, 0, 0.4);
-    }
+	}
 
-    .result-container{
+	.result-container {
-        display: flex;
+		display: flex;
 
-        .percentage-container{
+		.percentage-container {
-            display: flex;
+			display: flex;
-            align-items: center;
+			align-items: center;
-            gap: 8px;
+			gap: 8px;
-            .dot{
+			.dot {
-                width: 11px;
+				width: 11px;
-                height: 11px;
+				height: 11px;
-                border-radius: 50px;
+				border-radius: 50px;
 
-                &[data-color="green-flash"]{
+				&[data-color="color-success-600"] {
-                    background-color: var(--green-flash);
+					background-color: var(--color-success-600);
-                }
+				}
 
-                &[data-color="orange-flash"]{
+				&[data-color="color-warning-500"] {
-                    background-color: var(--orange-flash);
+					background-color: var(--color-warning-500);
-                }
+				}
 
-                &[data-color="red-flash"]{
+				&[data-color="color-error-600"] {
-                    background-color: var(--red-flash);
+					background-color: var(--color-error-600);
-                }
+				}
-            }
+			}
-        }
+		}
-    }
+	}
 }

src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx

@@ -17,15 +17,15 @@ export default class OcrResult extends React.Component<IProps, IState> {
 					Résultat de l'analyse :
 				</Typography>
 				<div className={classes["result-container"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Document conforme à :&nbsp;
 					</Typography>
-                    <div className={classes["percentage-container"]}>
+					<div className={classes["percentage-container"]}>
-                        <Typography typo={ITypo.P_18} color={this.getColor()}>
+						<Typography typo={ITypo.P_18} color={this.getColor()}>
-                            {this.props.percentage}%
+							{this.props.percentage}%
-                        </Typography>
+						</Typography>
-                        <div className={classes["dot"]} data-color={this.getColor()} />
+						<div className={classes["dot"]} data-color={this.getColor()} />
-                    </div>
+					</div>
 				</div>
 			</div>
 		);
@@ -33,9 +33,9 @@ export default class OcrResult extends React.Component<IProps, IState> {
 
 	private getColor() {
 		if (this.props.percentage > 75) {
-			return ITypoColor.GREEN_FLASH;
+			return ITypoColor.COLOR_SUCCESS_600;
 		} else {
-			return ITypoColor.RED_FLASH;
+			return ITypoColor.COLOR_ERROR_600;
 		}
 	}
 }

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -73,10 +73,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
 				{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 							{this.state.document.folder?.name}
 						</Typography>
-						<Typography typo={ITypo.H3} color={ITypoColor.BLACK} className={classes["subtitle"]}>
+						<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
 							{this.state.document.document_type?.name}
 						</Typography>
 						<div className={classes["document-container"]}>
@@ -139,7 +139,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Confirmer"}>
 							<div className={classes["validate-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
 									Êtes-vous sûr de vouloir valider ce document ?
 								</Typography>
 							</div>
@@ -153,7 +153,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Refuser"}>
 							<div className={classes["refuse-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
 									Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
 									version.
 								</Typography>
@@ -164,7 +164,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 				)}
 				{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
 							Document non trouvé
 						</Typography>
 					</div>

src/front/Components/Layouts/Folder/index.tsx

@@ -29,7 +29,7 @@ export default class Folder extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un dossier
 							</Typography>
 						</div>

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx

@@ -33,7 +33,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					</>
 				) : (
 					<div className={classes["no-client"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Aucun client dans ce dossier
 						</Typography>
 					</div>

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -139,7 +139,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							<div className={classes["no-folder-selected"]}>
 								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Aucun dossier sélectionné
 									</Typography>
 								</div>

src/front/Components/Layouts/FolderArchived/index.tsx

@@ -32,7 +32,7 @@ export default class FolderArchived extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun dossier sélectionné
 							</Typography>
 						</div>

src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx

@@ -25,7 +25,7 @@ export default function PasswordForgotten(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY} className={classes["password_indication"]}>
+				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField

src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx

@@ -25,7 +25,7 @@ export default function StepNewPassword(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY} className={classes["password_indication"]}>
+				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField

src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx

@@ -65,7 +65,7 @@ export default function StepTotp(props: IProps) {
 				{secondsBeforeNewCode !== 0 && (
 					<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
 						Redemandez un code dans
-						<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
 							00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
 						</Typography>
 					</Typography>

src/front/Components/Layouts/LoginHome/classes.module.scss

@@ -14,7 +14,7 @@
 		}
 		.separator {
 			height: 1px;
-			background-color: var(--grey-medium);
+			background-color: var(--color-neutral-200);
 		}
 	}
 	.bottom {

src/front/Components/Layouts/LoginHome/index.tsx

@@ -16,7 +16,7 @@ export default function LoginHome() {
 				</Typography>
 				<div className={classes["content"]}>
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un notaire / collaborateur
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.Login.props.path}>
@@ -25,7 +25,7 @@ export default function LoginHome() {
 					</div>
 					<div className={classes["separator"]} />
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un client
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>

src/front/Components/Layouts/MyAccount/index.tsx

@@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
 		return (
 			<DefaultTemplate title={"Mon compte"}>
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Mon compte
 					</Typography>
 					<div className={classes["parts-container"]}>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mes informations
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>
@@ -69,7 +69,7 @@ export default class MyAccount extends Base<IProps, IState> {
 							</Form>
 						</div>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mon office
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>

src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss

@@ -20,14 +20,14 @@
 			.round {
 				width: 16px;
 				height: 16px;
-				background-color: var(--green-flash);
+				background-color: var(--color-success-600);
 				border-radius: 100px;
 			}
 		}
 	}
 
 	.office-infos {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		display: flex;
 		justify-content: space-between;
 		padding: 24px;
@@ -80,7 +80,7 @@
 					display: grid;
 					grid-template-columns: repeat(5, 1fr);
 					padding: 24px;
-					background-color: var(--purple-soft);
+					background-color: var(--color-primary-500-soft);
 
 					@media (max-width: $screen-l) {
 						display: none;
@@ -88,12 +88,12 @@
 				}
 
 				.user-line-desktop {
-					background-color: var(--grey-soft);
+					background-color: var(--color-neutral-50);
 				}
 
 				.user-line-desktop {
 					&:nth-child(odd) {
-						background-color: var(--grey-medium);
+						background-color: var(--color-neutral-200);
 					}
 				}
 
@@ -104,7 +104,7 @@
 						display: flex;
 						flex-direction: column;
 						gap: 24px;
-						background-color: var(--grey-soft);
+						background-color: var(--color-neutral-50);
 						padding: 24px 16px;
 					}
 				}