typography component

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

@@ -0,0 +1,101 @@
+@import "@Themes/constants.scss";
+@import "@Themes/modes.scss";
+.root {
+  color: $black;
+  &.H1-60 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 50px;
+    line-height: 61px;
+  }
+  &.H1-bis-40 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 40px;
+    line-height: 48px;
+  }
+  &.H2-30 {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 30px;
+    line-height: 36px;
+  }
+  &.H3-24 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 29px;
+  }
+  &.Paragraphe-semibold-18 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+    letter-spacing: 0.5px;
+  }
+  &.Paragraphe-simple-18 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 22px;
+  }
+  &.Paragraphe-MAJ-18 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 22px;
+    text-transform: uppercase;
+  }
+  &.Nav-header-off-18 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 22px;
+    letter-spacing: 0.5px;
+  }
+  &.Paragraphe-18-error {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 22px;
+    letter-spacing: 0.5px;
+  }
+  &.Paragraphe-semibold-16 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0.5px;
+  }
+  &.Nav-input-off-16 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0.5px;
+    color: $grey;
+  }
+  &.Paragraphe-16-error {
+    color: $re-hover;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0.5px;
+  }
+  &.Caption_14 {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0.5px;
+  }
+
+  &.re-hover {
+    color: $re-hover;
+  }
+
+  &.grey {
+    color: $grey;
+  }
+}

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

@@ -0,0 +1,51 @@
+import React from "react";
+import classes from "./classes.module.scss";
+import classNames from "classnames";
+
+type IProps = {
+  typo: ITypo;
+  children: React.ReactNode;
+  color?: ITypoColor;
+};
+type IState = {};
+
+export enum ITypo {
+  H1 = "H1-60",
+  H1Bis = "H1-bis-40",
+  H2 = "H2-30",
+  H3 = "H3-24",
+
+  P_SB_18 = "Paragraphe-semibold-18",
+  P_18 = "Paragraphe-simple-18",
+  P_MAJ_18 = "Paragraphe-MAJ-18",
+  NAV_HEADER_18 = "Nav-header-off-18",
+  P_ERR_18 = "Paragraphe-18-error",
+
+  P_SB_16 = "Paragraphe-semibold-16",
+  P_16 = "Paragraphe-simple-16",
+  NAV_INPUT_16 = "Nav-input-off-16",
+  P_ERR_16 = "Paragraphe-16-error",
+
+  CAPTION_14 = "Caption_14",
+}
+
+export enum ITypoColor {
+  RE_HOVER = "re-hover",
+  GREY = "grey"
+}
+
+export default class Typography extends React.Component<IProps, IState> {
+  public override render(): JSX.Element {
+    return (
+      <div
+        className={classNames(
+          classes["root"],
+          classes[this.props.typo],
+          classes[this.props.color ?? ""]
+        )}
+      >
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/front/components/DesignSystem/_Template/classes.module.scss

@@ -0,0 +1,4 @@
+@import "@Themes/constants.scss";
+
+.root {
+}

src/front/components/DesignSystem/_Template/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import classes from "./classes.module.scss";
+
+type IProps = {};
+type IState = {};
+
+export default class _Template extends React.Component<IProps, IState> {
+  public override render(): JSX.Element {
+    return <div className={classes["root"]}></div>;
+  }
+}

src/front/components/Elements/Burger/classes.module.scss

@@ -50,10 +50,6 @@
 		display: block;
 		top: calc(50% - 1px);
 
-		&.true {
-			background-color: $placeholderColor;
-		}
-
 		&.false {
 			background-color: $textColor;
 		}

src/front/components/LayoutTemplates/DefaultTemplate/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 
-import Header from "@Components/Materials/Header";
+// import Header from "@Components/Materials/Header";
 
 import classes from "./classes.module.scss";
 
@@ -22,7 +22,7 @@ export default class DefaultTemplate extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<>
-				<Header />
+				{/* <Header /> */}
 				<div className={classes["root"]}>
 					<div className={classes["content"]}>{this.props.children}</div>
 				</div>

src/front/components/Layouts/Home/classes.module.scss

@@ -1,12 +1,2 @@
 .root {
-    h1 {
-        margin: 0 auto;
-        padding: 70px 0 0 0;
-    }
-
-    h3 {
-        margin: 10px auto 30px auto;
-        padding: 0;
-    }
-
 }

src/front/components/Layouts/Home/index.tsx

@@ -1,14 +1,18 @@
 import BasePage from "@Components/Layouts/Base";
-import DefaultTemplate from "@Components/LayoutTemplates/DefaultTemplate"
+import DefaultTemplate from "@Components/LayoutTemplates/DefaultTemplate";
 import classes from "./classes.module.scss";
+import Typography, { ITypo } from "@Front/components/DesignSystem/Typography";
 
 export default class Home extends BasePage {
-	public override render(): JSX.Element {
+  public override render(): JSX.Element {
-		return (
+    return (
-			<DefaultTemplate title={"HomePage"}>
+      <DefaultTemplate title={"HomePage"}>
-				<div className={classes["root"]}>
+        <div className={classes["root"]}>
-				</div>
+          <div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div>
-			</DefaultTemplate>
+          <Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
-		);
+          <Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
-	}
+        </div>
+      </DefaultTemplate>
+    );
+  }
 }

src/front/index.scss

@@ -11,19 +11,16 @@ body {
     padding: 0;
     background-size: inherit;
     background-position: top center;
-    color: $textColor;
     font-size: 0px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
 input {
-    color: $textColor;
     font-size: 14px;
 }
 
 ::placeholder {
-    color: $placeholderColor;
     font-size: 14px;
 }
 
@@ -33,7 +30,6 @@ input {
 
 a,
 a:visited {
-    color: $textColor;
     text-decoration: none !important;
     opacity: 1;
     transition: opacity 0.15s ease-in-out;

src/front/themes/constants.scss

@@ -6,16 +6,28 @@ $screen-xs: 424px;
 
 $custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
 
-$backgroundColor: #2B2E44;
+// Colors
-$backgroundColor2: #2E3247;
+$black: #000000;
-$backgroundColor3: #202230;
+
-$borderColor: #272B40;
+$green-flash: #12BF4D;
-$shadowColor: #272B40;
+$blue-flash: #005176;
-$textColor: #FFF;
+$turquoise-flash: #3fa79e;
-$subTextColor: #778699;
+$purple-flash: #320756;
-$placeholderColor: #778699;
+$purple-hover: #4e1480;
-$primaryColor: #42E8E0;
+$orange-flash: #ffb017;
-$secondaryColor: #324859;
+$red-flash: #a63a23;
-$tertiaryColor: #788fa1;
+$re-hover: #cc4c31;
-$upColor: #42E8E0;
+$pink-flash: #bd4b91;
-$downColor: #ED1D25;
+$pink-hover: #e34ba9;
+
+$green-soft: #baf2cd;
+$blue-soft: #a7c6d4;
+$turquoise-soft: #c3eae6;
+$purple-soft: #c5b2d4;
+$orange-soft: #ffdc99;
+$red-soft: #f08771;
+$pink-soft: #f8b9df;
+
+$grey: #939393;
+$grey-medium: #e7e7e7;
+$grey-soft: #f9f9f9;

src/front/themes/modes.scss

@@ -1,25 +1,28 @@
-// NO LIGHT / DARK THEME
-
-
 @import "@Themes/constants.scss";
 
-[theme-mode] {
+body.body{
-	--color-neutral-0: #fdfdfd;
+  //   --black: #000000;
-	--color-neutral-1: #f2f2f2;
-	--color-neutral-2: #cdcdcd;
-	--color-neutral-3: #b7b7b7;
-	--color-neutral-4: #929292;
-	--color-neutral-5: #727272;
-	--color-neutral-6: #525252;
-	--color-neutral-7: #323232;
-	--color-neutral-8: #181818;
 
-	--color-button-primary: #320756;
+  --green-flash: #{green-flash};
-	--color-button-hover: #49097e;
+  //   --blue-flash: #005176;
-	--color-button-active: #280544;
+  //   --turquoise-flash: #3fa79e;
-	--color-button-disabled: #c5b2d4;
+  //   --purple-flash: #320756;
-	--color-button-secondary: #bd4b91;
+  //   --purple-hover: #4e1480;
+  //   --orange-flash: #ffb017;
+  //   --red-flash: #a63a23;
+  //   --re-hover: #cc4c31;
+  //   --pink-flash: #bd4b91;
+  //   --pink-hover: #e34ba9;
+
+  //   --green-soft: #baf2cd;
+  //   --blue-soft: #a7c6d4;
+  //   --turquoise-soft: #c3eae6;
+  //   --purple-soft: #c5b2d4;
+  //   --orange-soft: #ffdc99;
+  //   --red-soft: #f08771;
+  //   --pink-soft: #f8b9df;
+
+  //   --grey: #939393;
+  //   --grey-medium: #e7e7e7;
+  //   --grey-soft: #f9f9f9;
 }
-
-// [theme-mode="dark"] {
-// }

src/pages/index.tsx

@@ -1,5 +1,5 @@
-import Home from "@Components/Layouts/Home"
+import Home from "@Components/Layouts/Home";
 
 export default function Route() {
-    return <Home/>
+  return <Home />;
 }