diff --git a/src/front/components/DesignSystem/Typography/classes.module.scss b/src/front/components/DesignSystem/Typography/classes.module.scss new file mode 100644 index 00000000..92927e8b --- /dev/null +++ b/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; + } +} diff --git a/src/front/components/DesignSystem/Typography/index.tsx b/src/front/components/DesignSystem/Typography/index.tsx new file mode 100644 index 00000000..e9275c5c --- /dev/null +++ b/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 { + public override render(): JSX.Element { + return ( +
+ {this.props.children} +
+ ); + } +} diff --git a/src/front/components/DesignSystem/_Template/classes.module.scss b/src/front/components/DesignSystem/_Template/classes.module.scss new file mode 100644 index 00000000..f68b3ab0 --- /dev/null +++ b/src/front/components/DesignSystem/_Template/classes.module.scss @@ -0,0 +1,4 @@ +@import "@Themes/constants.scss"; + +.root { +} diff --git a/src/front/components/DesignSystem/_Template/index.tsx b/src/front/components/DesignSystem/_Template/index.tsx new file mode 100644 index 00000000..8a4b305d --- /dev/null +++ b/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 { + public override render(): JSX.Element { + return
; + } +} diff --git a/src/front/components/Elements/Burger/classes.module.scss b/src/front/components/Elements/Burger/classes.module.scss index 925ed1b5..f7ca96fd 100644 --- a/src/front/components/Elements/Burger/classes.module.scss +++ b/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; } diff --git a/src/front/components/LayoutTemplates/DefaultTemplate/index.tsx b/src/front/components/LayoutTemplates/DefaultTemplate/index.tsx index 9440b32d..6da3ed1d 100644 --- a/src/front/components/LayoutTemplates/DefaultTemplate/index.tsx +++ b/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 { public override render(): JSX.Element { return ( <> -
+ {/*
*/}
{this.props.children}
diff --git a/src/front/components/Layouts/Home/classes.module.scss b/src/front/components/Layouts/Home/classes.module.scss index 55c9c13d..c6d429b9 100644 --- a/src/front/components/Layouts/Home/classes.module.scss +++ b/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; - } - } \ No newline at end of file diff --git a/src/front/components/Layouts/Home/index.tsx b/src/front/components/Layouts/Home/index.tsx index 5aa358da..1671ba9d 100644 --- a/src/front/components/Layouts/Home/index.tsx +++ b/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 { - return ( - -
-
- - ); - } + public override render(): JSX.Element { + return ( + +
+
JDJADJIZDIAZN?DIAZ?
+ COUCOU JE SUIS UNE TYPO + COUCOU JE SUIS UNE TYPO +
+ + ); + } } diff --git a/src/front/index.scss b/src/front/index.scss index b9486118..b36c6f92 100644 --- a/src/front/index.scss +++ b/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; diff --git a/src/front/themes/constants.scss b/src/front/themes/constants.scss index 1692a164..5ccdd307 100644 --- a/src/front/themes/constants.scss +++ b/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; -$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; diff --git a/src/front/themes/modes.scss b/src/front/themes/modes.scss index ef0535b9..3bbcb5ed 100644 --- a/src/front/themes/modes.scss +++ b/src/front/themes/modes.scss @@ -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"] { -// } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index d0794eb4..b2450ef6 100644 --- a/src/pages/index.tsx +++ b/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 -} \ No newline at end of file + return ; +}