update token color

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

@@ -12,12 +12,12 @@
 
 		.circleBackground {
 			fill: none;
-			stroke: var(--background-elevation-2);
+			stroke: var(--progress-circle-background);
 		}
 
 		.circleProgress {
 			fill: none;
-			stroke: var(--color-secondary-500);
+			stroke: var(--progress-circle-contrast);
 			transition: stroke-dashoffset 0.35s;
 		}
 	}

src/front/Components/DesignSystem/Table/MuiTable/classes.module.scss

@@ -15,7 +15,7 @@
 		svg {
 			cursor: pointer;
 			min-width: 21px;
-			fill: var(--color-neutral-600);
+			fill: var(--table-header-contrast);
 		}
 	}
 
@@ -36,7 +36,7 @@
 
 	.row {
 		&:hover {
-			background-color: var(--background-elevation-1);
+			background-color: var(--table-background-hovered);
 		}
 	}
 }

src/front/Components/DesignSystem/Table/MuiTable/index.tsx

@@ -51,10 +51,11 @@ export default function MuiTable(props: IProps) {
 
 	return (
 		<InfiniteScroll orientation="vertical" onNext={props.onNext} offset={0}>
-			<TableContainer className={classes["root"]} sx={{ maxHeight: "80vh", overflowY: "auto", overflowX: "hidden" }}>
+			<TableContainer
+				className={classes["root"]}
+				sx={{ maxHeight: "80vh", overflowY: "auto", overflowX: "hidden", backgroundColor: "var(--table-background-default)" }}>
 				<Table aria-label="simple table" sx={{ border: "0" }}>
-					<TableHead
-						sx={{ position: "sticky", top: "0", borderBottom: "1px solid var(--color-neutral-200)" }}>
+					<TableHead sx={{ position: "sticky", top: "0", borderBottom: "1px solid var(--table-header-border)" }}>
 						<TableRow>
 							{props.header.map((column) => (
 								<TableCell key={column.key} align={"left"} sx={{ border: 0, padding: "4px 8px" }}>

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

@@ -9,18 +9,18 @@
 	justify-content: center;
 
 	&.info {
-		background-color: var(--color-info-50);
+		background-color: var(--tag-info-background);
 	}
 
 	&.success {
-		background-color: var(--color-success-50);
-	}
-
-	&.error {
-		background-color: var(--color-error-50);
+		background-color: var(--tag-success-background);
 	}
 
 	&.warning {
-		background-color: var(--color-warning-50);
+		background-color: var(--tag-warning-background);
+	}
+
+	&.error {
+		background-color: var(--tag-error-background);
 	}
 }

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

@@ -1,12 +1,12 @@
 @import "@Themes/constants.scss";
 
 .root {
-	margin: var(--root-margin);
-	max-width: var(--root-max-width);
+	margin: auto;
+	max-width: 1440px;
 	min-width: 100%;
 
 	&.padding {
-		padding: var(--root-padding);
+		padding: 80px 24px;
 
 		@media screen and (max-width: $screen-m) {
 			padding: 0 24px;