4nk/lecoffre-back
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

typography component

Browse Source
This commit is contained in:
Hugo Lextrait 2023-02-17 16:17:51 +01:00
parent 04c235c1ed
commit 57930a5304
12 changed files with 234 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/front/components/DesignSystem/Typography/classes.module.scss Normal file
View File

@ -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;
}
}

51
src/front/components/DesignSystem/Typography/index.tsx Normal file
View File

@ -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>
);
}
}

4
src/front/components/DesignSystem/_Template/classes.module.scss Normal file
View File

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

11
src/front/components/DesignSystem/_Template/index.tsx Normal file
View File

@ -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>;
}
}

4
src/front/components/Elements/Burger/classes.module.scss
View File

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

4
src/front/components/LayoutTemplates/DefaultTemplate/index.tsx
View File

@ -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>

10
src/front/components/Layouts/Home/classes.module.scss
View File

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

22
src/front/components/Layouts/Home/index.tsx
View File

@ -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 {
return (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
</div>
</DefaultTemplate>
);
}
public override render(): JSX.Element {
return (
<DefaultTemplate title={"HomePage"}>
<div className={classes["root"]}>
<div style={{ fontSize: "20px" }}>JDJADJIZDIAZN?DIAZ?</div>
<Typography typo={ITypo.H1}>COUCOU JE SUIS UNE TYPO</Typography>
<Typography typo={ITypo.H1Bis}>COUCOU JE SUIS UNE TYPO</Typography>
</div>
</DefaultTemplate>
);
}
}

4
src/front/index.scss
View File

@ -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;

38
src/front/themes/constants.scss
View File

@ -6,16 +6,28 @@ $screen-xs: 424px;
$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
$backgroundColor: #2B2E44;
$backgroundColor2: #2E3247;
$backgroundColor3: #202230;
$borderColor: #272B40;
$shadowColor: #272B40;
$textColor: #FFF;
$subTextColor: #778699;
$placeholderColor: #778699;
$primaryColor: #42E8E0;
$secondaryColor: #324859;
$tertiaryColor: #788fa1;
$upColor: #42E8E0;
$downColor: #ED1D25;
// Colors
$black: #000000;
$green-flash: #12BF4D;
$blue-flash: #005176;
$turquoise-flash: #3fa79e;
$purple-flash: #320756;
$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;

45
src/front/themes/modes.scss
View File

@ -1,25 +1,28 @@
// NO LIGHT / DARK THEME
@import "@Themes/constants.scss";
[theme-mode] {
--color-neutral-0: #fdfdfd;
--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;
body.body{
// --black: #000000;
--color-button-primary: #320756;
--color-button-hover: #49097e;
--color-button-active: #280544;
--color-button-disabled: #c5b2d4;
--color-button-secondary: #bd4b91;
--green-flash: #{green-flash};
// --blue-flash: #005176;
// --turquoise-flash: #3fa79e;
// --purple-flash: #320756;
// --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"] {
// }

4
src/pages/index.tsx
View File

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