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

Added all new colors / typo

Browse Source
This commit is contained in:
Vins 2024-07-02 16:57:41 +02:00
parent 5918fa38ff
commit 0a08ded804
32 changed files with 560 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/front/Components/DesignSystem/CheckBox/index.tsx
View File

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

30
src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
View File

@ -6,7 +6,7 @@ import Image from "next/image";
import Link from "next/link";
import React from "react";
import Typography, { ITypo } from "../Typography";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
import Note from "le-coffre-resources/dist/Customer/Note";
@ -70,21 +70,27 @@ export default function FolderBoxInformation(props: IProps) {
case EFolderBoxInformationType.DESCRIPTION:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Note dossier</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Note dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.NOTE:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Note client</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Note client
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
</div>
);
case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
return (
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Note archive</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Note archive
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
</div>
);
@ -92,19 +98,27 @@ export default function FolderBoxInformation(props: IProps) {
return (
<>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Intitulé du dossier</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Intitulé du dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Numéro de dossier</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Numéro de dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Type d'acte</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Type d'acte
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
</div>
<div className={classes["text-container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Ouverture du dossier</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Ouverture du dossier
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
</div>
</>

2
src/front/Components/DesignSystem/Form/DateField/index.tsx
View File

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

2
src/front/Components/DesignSystem/Form/SelectField/index.tsx
View File

@ -88,7 +88,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
)}
{!selectedOption && (
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
<Typography typo={ITypo.TEXT_MD_GREY}>
<Typography typo={ITypo.TEXT_MD_REGULAR}>
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</Typography>
</div>

2
src/front/Components/DesignSystem/Form/TextField/index.tsx
View File

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

2
src/front/Components/DesignSystem/Form/TextareaField/index.tsx
View File

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

6
src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
View File

@ -5,7 +5,7 @@ import classes from "./classes.module.scss";
import { IAppRule } from "@Front/Api/Entities/rule";
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
import { IHeaderLinkProps } from "../../../HeaderLink";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink";
import useToggle from "@Front/Hooks/useToggle";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
@ -34,7 +34,9 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classes["container"]}>
<div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
<div className={classes["content"]} onClick={toggle}>
<Typography typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>
<Typography
typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isSubmenuOpened ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}

12
src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
View File

@ -3,7 +3,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import Typography, { ITypo } from "../../Typography";
import Typography, { ITypo, ITypoColor } from "../../Typography";
import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable";
@ -37,7 +37,11 @@ export default function HeaderLink(props: IHeaderLinkProps) {
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}>
<div className={classes["content"]}>
<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
<Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div>
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
</Link>
@ -46,7 +50,9 @@ export default function HeaderLink(props: IHeaderLinkProps) {
return (
<div className={classNames(classes["root"], classes["desactivated"])}>
<div className={classes["content"]}>
<Typography typo={ITypo.TEXT_LG_GREY}>{props.text}</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div>
</div>
);

8
src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
View File

@ -2,7 +2,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import useHoverable from "@Front/Hooks/useHoverable";
type IHeaderLinkProps = {
@ -29,7 +29,11 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
return (
<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
<Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</Link>
);
}

8
src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
View File

@ -3,7 +3,7 @@ import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { IHeaderLinkProps } from "../HeaderLink";
import Typography, { ITypo } from "../../Typography";
import Typography, { ITypo, ITypoColor } from "../../Typography";
import classes from "./classes.module.scss";
import useHoverable from "@Front/Hooks/useHoverable";
import HeaderSubmenuLink from "./HeaderSubmenuLink";
@ -34,7 +34,11 @@ export default function HeaderSubmenu(props: IProps) {
<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
<div className={classes["content"]}>
<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
<Typography
typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{props.text}
</Typography>
</div>
<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
{isHovered && (

8
src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
View File

@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
import Link from "next/link";
import classNames from "classnames";
import { useRouter } from "next/router";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
type IProps = {
text: string | JSX.Element;
@ -29,7 +29,11 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
onClick={this.props.onClick}
target={this.props.target}>
<div className={classes["content"]}>
<Typography typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{this.props.text}</Typography>
<Typography
typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
color={this.props.isActive ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
{this.props.text}
</Typography>
</div>
</Link>
);

6
src/front/Components/DesignSystem/LogOutButton/index.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import Image from "next/image";
import DisconnectIcon from "@Assets/Icons/disconnect.svg";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "../Typography";
import Typography, { ITypo, ITypoColor } from "../Typography";
import { useRouter } from "next/router";
import UserStore from "@Front/Stores/UserStore";
import { FrontendVariables } from "@Front/Config/VariablesFront";
@ -18,7 +18,9 @@ export default function LogOut() {
return (
<div className={classes["root"]} onClick={disconnect}>
<Typography typo={ITypo.TEXT_LG_GREY}>Déconnexion</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Déconnexion
</Typography>
<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
</div>
);

4
src/front/Components/DesignSystem/MultiSelect/index.tsx
View File

@ -55,7 +55,9 @@ export default class MultiSelect extends React.Component<IProps, IState> {
<div
className={classes["placeholder"]}
data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
<Typography typo={ITypo.TEXT_MD_GREY}>{this.props.placeholder}</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
{this.props.placeholder}
</Typography>
</div>
)}
<div className={classes["input-container"]}>

2
src/front/Components/DesignSystem/Newsletter/index.tsx
View File

@ -78,7 +78,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
</Typography>
{this.state.errorMessage && (
<div>
<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_ERROR_600}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
{this.state.errorMessage}
</Typography>
</div>

2
src/front/Components/DesignSystem/RadioBox/index.tsx
View File

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

4
src/front/Components/DesignSystem/SearchBar/index.tsx
View File

@ -2,7 +2,7 @@ import LoopIcon from "@Assets/Icons/loop.svg";
import Image from "next/image";
import React from "react";
import Typography, { ITypo } from "../Typography";
import Typography, { ITypo, ITypoColor } from "../Typography";
import classes from "./classes.module.scss";
type IProps = {
@ -32,7 +32,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
<div className={classes["root"]}>
<Image src={LoopIcon} alt="Loop icon" />
{!this.state.hasValue && (
<Typography typo={ITypo.TEXT_LG_ERROR}>
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
</Typography>
)}

2
src/front/Components/DesignSystem/Switch/index.tsx
View File

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

244
src/front/Components/DesignSystem/Typography/classes.module.scss
View File

@ -2,14 +2,41 @@
@import "@Themes/modes.scss";
.root {
color: $color-generic-black;
color: $color-neutral-950;
vertical-align: center;
font-family: "Poppins", sans-serif;
//Displays
&.display-large {
font-style: normal;
font-weight: 600;
font-size: 50px;
line-height: 75px;
letter-spacing: -2%;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 72px;
}
}
&.display-medium {
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 72px;
letter-spacing: -2%;
@media (max-width: $screen-m) {
font-size: 48px;
line-height: 72px;
}
}
&.display-small {
font-style: normal;
font-weight: 600;
font-size: 44px;
line-height: 66px;
letter-spacing: -2%;
@media (max-width: $screen-m) {
font-size: 48px;
@ -17,170 +44,237 @@
}
}
//Titles
&.title-h1 {
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 60px;
letter-spacing: -2%;
}
&.title-h2 {
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 54px;
letter-spacing: -2%;
}
&.title-h3 {
font-style: normal;
font-weight: 300;
font-size: 32px;
line-height: 48px;
letter-spacing: -2%;
}
&.title-h4 {
font-style: normal;
font-weight: 600;
font-size: 28px;
line-height: 42px;
letter-spacing: -2%;
}
&.title-h5 {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 36px;
color: var(--color-primary-500);
letter-spacing: -2%;
}
&.title-h6 {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 30px;
letter-spacing: -2%;
}
//Text large
&.text-lg-bold {
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5%;
}
&.text-lg-semibold {
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.5px;
line-height: 27px;
letter-spacing: 0.5%;
}
&.text-lg-regular {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-lg-uppercase {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-lg-grey {
color: $color-neutral-500;
&.text-lg-light {
font-style: normal;
font-weight: 400;
font-weight: 300;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-lg-error {
color: $color-error-600;
//Text medium
&.text-md-bold {
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 27px;
letter-spacing: 0.5px;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5%;
}
&.text-md-semibold {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
line-height: 24px;
letter-spacing: 0.5%;
}
&.text-md-regular {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-md-grey {
color: $color-neutral-500;
&.text-md-uppercase {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-md-error {
color: $color-error-600;
&.text-md-light {
font-style: normal;
font-weight: 400;
font-weight: 300;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-sm-regular {
//Text small
&.text-sm-bold {
font-style: normal;
font-weight: 400;
font-weight: 700;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-sm-semibold {
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-sm-bold {
&.text-sm-regular {
font-style: normal;
font-weight: 600;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-sm-uppercase {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-sm-light {
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 21px;
letter-spacing: 0.5%;
}
//Text extra small
&.text-xs-bold {
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-semibold {
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.text-xs-regular {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5px;
letter-spacing: 0.5%;
}
&.text-xs-uppercase {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
text-transform: uppercase;
}
&.text-xs-light {
font-style: normal;
font-weight: 300;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.5%;
}
&.color-error-800 {
color: $color-error-800;
//Caption
&.caption-bold {
font-style: normal;
font-weight: 700;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
}
&.color-neutral-500 {
color: $color-neutral-500;
&.caption-semibold {
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
}
&.color-generic-black {
color: $color-generic-black;
&.caption-regular {
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
}
&.color-primary-500 {
color: $color-primary-500;
&.caption-uppercase {
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
text-transform: uppercase;
}
&.color-secondary-500 {
color: $color-secondary-500;
}
&.color-success-600 {
color: $color-success-600;
}
&.color-error-600 {
color: $color-error-600;
}
&.color-warning-500 {
color: $color-warning-500;
}
&.white {
color: $color-generic-white;
&.caption-light {
font-style: normal;
font-weight: 300;
font-size: 10px;
line-height: 15px;
letter-spacing: -2%;
}
}

122
src/front/Components/DesignSystem/Typography/index.tsx
View File

@ -13,39 +13,133 @@ type IState = {};
export enum ITypo {
DISPLAY_LARGE = "display-large",
DISPLAY_MEDIUM = "display-medium",
DISPLAY_SMALL = "display-small",
TITLE_H1 = "title-h1",
TITLE_H2 = "title-h2",
TITLE_H3 = "title-h3",
TITLE_H4 = "title-h4",
TITLE_H5 = "title-h5",
TITLE_H6 = "title-h6",
TEXT_LG_BOLD = "text-lg-bold",
TEXT_LG_SEMIBOLD = "text-lg-semibold",
TEXT_LG_REGULAR = "text-lg-regular",
TEXT_LG_UPPERCASE = "text-lg-regular-uppercase",
TEXT_LG_GREY = "text-lg-grey",
TEXT_LG_ERROR = "text-lg-error",
TEXT_LG_UPPERCASE = "text-lg-uppercase",
TEXT_LG_light = "text-lg-light",
TEXT_MD_BOLD = "text-md-bold",
TEXT_MD_SEMIBOLD = "text-md-semibold",
TEXT_MD_REGULAR = "text-md-regular",
TEXT_MD_GREY = "text-md-grey",
TEXT_MD_ERROR = "text-md-error",
TEXT_MD_UPPERCASE = "text-md-uppercase",
TEXT_MD_light = "text-md-light",
TEXT_SM_REGULAR = "text-sm-regular",
TEXT_SM_SEMIBOLD = "text-sm-semibold",
TEXT_SM_BOLD = "text-sm-bold",
TEXT_SM_SEMIBOLD = "text-sm-semibold",
TEXT_SM_REGULAR = "text-sm-regular",
TEXT_SM_UPPERCASE = "text-sm-uppercase",
TEXT_SM_light = "text-sm-light",
TEXT_XS_BOLD = "text-xs-bold",
TEXT_XS_SEMIBOLD = "text-xs-semibold",
TEXT_XS_REGULAR = "text-xs-regular",
TEXT_XS_UPPERCASE = "text-xs-uppercase",
TEXT_XS_light = "text-xs-light",
CAPTION_BOLD = "caption-bold",
CAPTION_SEMIBOLD = "caption-semibold",
CAPTION_REGULAR = "caption-regular",
CAPTION_UPPERCASE = "caption-uppercase",
CAPTION_LIGHT = "caption-light",
}
export enum ITypoColor {
COLOR_ERROR_800 = "color-error-800",
COLOR_NEUTRAL_500 = "color-neutral-500",
COLOR_GENERIC_BLACK = "color-generic-black",
COLOR_PRIMARY_500 = "color-primary-500",
COLOR_SECONDARY_500 = "color-secondary-500",
COLOR_SUCCESS_600 = "color-success-600",
COLOR_WARNING_500 = "color-warning-500",
COLOR_ERROR_600 = "color-error-600",
COLOR_GENERIC_WHITE = "color-generic-white",
COLOR_GENERIC_NONE = "color-generic-none",
COLOR_NEUTRAL_50 = "color-neutral-50",
COLOR_NEUTRAL_100 = "color-neutral-100",
COLOR_NEUTRAL_200 = "color-neutral-200",
COLOR_NEUTRAL_300 = "color-neutral-300",
COLOR_NEUTRAL_400 = "color-neutral-400",
COLOR_NEUTRAL_500 = "color-neutral-500",
COLOR_NEUTRAL_600 = "color-neutral-600",
COLOR_NEUTRAL_700 = "color-neutral-700",
COLOR_NEUTRAL_800 = "color-neutral-800",
COLOR_NEUTRAL_900 = "color-neutral-900",
COLOR_NEUTRAL_950 = "color-neutral-950",
COLOR_PRIMARY_50 = "color-primary-50",
COLOR_PRIMARY_100 = "color-primary-100",
COLOR_PRIMARY_200 = "color-primary-200",
COLOR_PRIMARY_300 = "color-primary-300",
COLOR_PRIMARY_400 = "color-primary-400",
COLOR_PRIMARY_500 = "color-primary-500",
COLOR_PRIMARY_600 = "color-primary-600",
COLOR_PRIMARY_700 = "color-primary-700",
COLOR_PRIMARY_800 = "color-primary-800",
COLOR_PRIMARY_900 = "color-primary-900",
COLOR_PRIMARY_950 = "color-primary-950",
COLOR_SECONDARY_50 = "color-secondary-50",
COLOR_SECONDARY_100 = "color-secondary-100",
COLOR_SECONDARY_200 = "color-secondary-200",
COLOR_SECONDARY_300 = "color-secondary-300",
COLOR_SECONDARY_400 = "color-secondary-400",
COLOR_SECONDARY_500 = "color-secondary-500",
COLOR_SECONDARY_600 = "color-secondary-600",
COLOR_SECONDARY_700 = "color-secondary-700",
COLOR_SECONDARY_800 = "color-secondary-800",
COLOR_SECONDARY_900 = "color-secondary-900",
COLOR_SECONDARY_950 = "color-secondary-950",
COLOR_ERROR_50 = "color-error-50",
COLOR_ERROR_100 = "color-error-100",
COLOR_ERROR_200 = "color-error-200",
COLOR_ERROR_300 = "color-error-300",
COLOR_ERROR_400 = "color-error-400",
COLOR_ERROR_500 = "color-error-500",
COLOR_ERROR_600 = "color-error-600",
COLOR_ERROR_700 = "color-error-700",
COLOR_ERROR_800 = "color-error-800",
COLOR_ERROR_900 = "color-error-900",
COLOR_ERROR_950 = "color-error-950",
COLOR_WARNING_50 = "color-warning-50",
COLOR_WARNING_100 = "color-warning-100",
COLOR_WARNING_200 = "color-warning-200",
COLOR_WARNING_300 = "color-warning-300",
COLOR_WARNING_400 = "color-warning-400",
COLOR_WARNING_500 = "color-warning-500",
COLOR_WARNING_700 = "color-warning-700",
COLOR_WARNING_800 = "color-warning-800",
COLOR_WARNING_900 = "color-warning-900",
COLOR_WARNING_950 = "color-warning-950",
COLOR_SUCCESS_50 = "color-success-50",
COLOR_SUCCESS_100 = "color-success-100",
COLOR_SUCCESS_200 = "color-success-200",
COLOR_SUCCESS_300 = "color-success-300",
COLOR_SUCCESS_400 = "color-success-400",
COLOR_SUCCESS_500 = "color-success-500",
COLOR_SUCCESS_600 = "color-success-600",
COLOR_SUCCESS_700 = "color-success-700",
COLOR_SUCCESS_800 = "color-success-800",
COLOR_SUCCESS_900 = "color-success-900",
COLOR_SUCCESS_950 = "color-success-950",
COLOR_INFO_50 = "color-info-50",
COLOR_INFO_100 = "color-info-100",
COLOR_INFO_200 = "color-info-200",
COLOR_INFO_300 = "color-info-300",
COLOR_INFO_400 = "color-info-400",
COLOR_INFO_500 = "color-info-500",
COLOR_INFO_700 = "color-info-700",
COLOR_INFO_800 = "color-info-800",
COLOR_INFO_900 = "color-info-900",
COLOR_INFO_950 = "color-info-950",
}
export default class Typography extends React.Component<IProps, IState> {

18
src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
View File

@ -8,7 +8,7 @@ import Image from "next/image";
import Link from "next/link";
import React from "react";
import Typography, { ITypo } from "../../Typography";
import Typography, { ITypo, ITypoColor } from "../../Typography";
import WarningBadge from "../../WarningBadge";
import classes from "./classes.module.scss";
import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
@ -38,17 +38,23 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
<div className={classes["root"]}>
<div className={classes["content"]}>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Nom</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Prénom</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Prénom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>Numéro de téléphone</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>
{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number!) ??
this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
@ -56,7 +62,9 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
</div>
<div className={classes["container"]}>
<Typography typo={ITypo.TEXT_MD_GREY}>E-mail</Typography>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
E-mail
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
</div>
</div>

8
src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
View File

@ -163,25 +163,25 @@ export default function CollaboratorInformations(props: IProps) {
</div>
<div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Prénom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Email
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>

5
src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
View File

@ -135,7 +135,10 @@ 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.TEXT_MD_GREY} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
<Typography
typo={ITypo.TEXT_MD_REGULAR}
className={classes["box-title"]}
color={ITypoColor.COLOR_GENERIC_BLACK}>
Description
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>

6
src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
View File

@ -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.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom du document
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Description visible par les collaborateurs de l'office
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
</div>
<div className={classes["document-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Description visible par les clients de l'office
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>

4
src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
View File

@ -75,7 +75,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
onChange={this.onExistingClientSelected}
checked={this.state.selectedOption === "existing_customer"}
value={"existing client"}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Client existant</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Client existant</Typography>
</RadioBox>
)}
@ -84,7 +84,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
onChange={this.onNewClientSelected}
checked={this.state.selectedOption === "new_customer"}
value={"new client"}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Nouveau client</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
</RadioBox>
</div>

4
src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
View File

@ -129,11 +129,11 @@ export default function ParameterDocuments(props: IProps) {
<div className={classes["add-document-form-container"]}>
<div className={classes["radiobox-container"]}>
<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Document existant</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Document existant</Typography>
</RadioBox>
<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Créer un document</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Créer un document</Typography>
</RadioBox>
</div>
{addOrEditDocument === "add" && (

6
src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
View File

@ -128,19 +128,19 @@ export default function OfficeInformations(props: IProps) {
</div>
<div className={classes["office-infos"]}>
<div className={classes["office-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
CRPCEN
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
</div>
<div className={classes["office-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Dénomination
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
</div>
<div className={classes["office-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Addresse
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>

4
src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
View File

@ -84,7 +84,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
disabled={props.disableInputs}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequency"
@ -92,7 +92,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
disabled={props.disableInputs}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />

4
src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
View File

@ -114,14 +114,14 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />

4
src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
View File

@ -105,14 +105,14 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequencyInSubscription"
value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
</RadioBox>
</div>
<div className={classes["separator"]} />

8
src/front/Components/Layouts/Users/UserInformations/index.tsx
View File

@ -223,25 +223,25 @@ export default function UserInformations(props: IProps) {
</div>
<div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Nom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Prénom
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Numéro de téléphone
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
</div>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
Email
</Typography>
<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>

93
src/front/Themes/constants.scss
View File

@ -10,23 +10,100 @@ $custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
// Generic colors
$color-generic-black: #000000;
$color-generic-white: #ffffff;
$color-generic-none: #00000000;
// Flash colors
$color-neutral-500: #6d7e8a;
$color-neutral-200: #d7dce0;
// Neutral colors
$color-neutral-50: #f7f8f8;
$color-neutral-100: #edeff1;
$color-neutral-200: #d7dce0;
$color-neutral-300: #b4bec5;
$color-neutral-400: #8b9aa5;
$color-neutral-500: #6d7e8a;
$color-neutral-600: #576672;
$color-neutral-700: #47535d;
$color-neutral-800: #3e474e;
$color-neutral-900: #373e44;
$color-neutral-950: #24282e;
// Primary colors
$color-primary-50: #e5eefa;
$color-primary-100: #b7d1f1;
$color-primary-200: #89b3e7;
$color-primary-300: #5c96de;
$color-primary-400: #2e78d4;
$color-primary-500: #005bcb;
$color-primary-600: #004eb8;
$color-primary-700: #0040a4;
$color-primary-800: #013391;
$color-primary-900: #01257d;
$color-primary-950: #01186a;
// Secondary colors
$color-secondary-50: #fff3ed;
$color-secondary-100: #ffe4d4;
$color-secondary-200: #ffc5a8;
$color-secondary-300: #ff9c70;
$color-secondary-400: #ff6737;
$color-secondary-500: #ff4617;
$color-secondary-600: #f02505;
$color-secondary-700: #c71707;
$color-info-500: #29a6ff;
$color-success-600: #15a450;
$color-secondary-800: #9e150e;
$color-secondary-900: #7f140f;
$color-secondary-950: #450605;
// Error colors
$color-error-50: #fef2f2;
$color-error-100: #fee2e1;
$color-error-200: #fecaca;
$color-error-300: #fda5a5;
$color-error-400: #f87172;
$color-error-500: #ef4444;
$color-error-600: #dc2625;
$color-error-700: #b91c1d;
$color-error-800: #991b1c;
$color-error-900: #7f1c1d;
$color-error-950: #450a0a;
// Warning colors
$color-warning-50: #fffbeb;
$color-warning-100: #fff4c6;
$color-warning-200: #ffe788;
$color-warning-300: #ffd54a;
$color-warning-400: #ffbd12;
$color-warning-500: #f99f09;
$color-warning-600: #de7702;
$color-error-600: #dc2625;
$color-error-800: #991b1c;
$color-warning-700: #b75306;
$color-warning-800: #943f0d;
$color-warning-900: #7a340e;
$color-warning-950: #461a02;
// Soft colors
// Sucess colors
$color-success-50: #effdf4;
$color-success-100: #dcfce8;
$color-success-200: #bbf7d2;
$color-success-300: #87efb0;
$color-success-400: #49de86;
$color-success-500: #22c564;
$color-success-600: #15a450;
$color-success-700: #178040;
$color-success-800: #166437;
$color-success-900: #14532f;
$color-success-950: #052e18;
// Info colors
$color-info-50: #edf9ff;
$color-info-100: #d8f1ff;
$color-info-200: #b9e7ff;
$color-info-300: #8adaff;
$color-info-400: #51c3fe;
$color-info-500: #29a6ff;
$color-info-600: #1088fe;
$color-info-700: #0b71ef;
$color-info-800: #0e58bc;
$color-info-900: #134d95;
$color-info-950: #11305a;
// Soft colors (TO DELETE AFTER)
$color-primary-500-soft: #005bcb4d;
$color-secondary-500-soft: #ff46174d;
$color-info-500-soft: #29a6ff4d;

94
src/front/Themes/variables.scss
View File

@ -5,25 +5,105 @@
--root-margin: auto;
--root-padding: 64px 120px;
--font-primary: "Inter", sans-serif;
--font-primary: "Poppins", sans-serif;
// Generic colors
--color-generic-black: #{$color-generic-black};
--color-generic-white: #{$color-generic-white};
--color-generic-none: #{$color-generic-none};
--color-neutral-500: #{$color-neutral-500};
--color-neutral-200: #{$color-neutral-200};
// Neutral colors
--color-neutral-50: #{$color-neutral-50};
--color-neutral-100: #{$color-neutral-100};
--color-neutral-200: #{$color-neutral-200};
--color-neutral-300: #{$color-neutral-300};
--color-neutral-400: #{$color-neutral-400};
--color-neutral-500: #{$color-neutral-500};
--color-neutral-600: #{$color-neutral-600};
--color-neutral-700: #{$color-neutral-700};
--color-neutral-800: #{$color-neutral-800};
--color-neutral-900: #{$color-neutral-900};
--color-neutral-950: #{$color-neutral-950};
// Primary colors
--color-primary-50: #{$color-primary-50};
--color-primary-100: #{$color-primary-100};
--color-primary-200: #{$color-primary-200};
--color-primary-300: #{$color-primary-300};
--color-primary-400: #{$color-primary-400};
--color-primary-500: #{$color-primary-500};
--color-primary-600: #{$color-primary-600};
--color-primary-700: #{$color-primary-700};
--color-primary-800: #{$color-primary-800};
--color-primary-900: #{$color-primary-900};
--color-primary-950: #{$color-primary-950};
// Secondary colors
--color-secondary-50: #{$color-secondary-50};
--color-secondary-100: #{$color-secondary-100};
--color-secondary-200: #{$color-secondary-200};
--color-secondary-300: #{$color-secondary-300};
--color-secondary-400: #{$color-secondary-400};
--color-secondary-500: #{$color-secondary-500};
--color-secondary-600: #{$color-secondary-600};
--color-secondary-700: #{$color-secondary-700};
--color-info-500: #{$color-info-500};
--color-success-600: #{$color-success-600};
--color-secondary-800: #{$color-secondary-800};
--color-secondary-900: #{$color-secondary-900};
--color-secondary-950: #{$color-secondary-950};
// Error colors
--color-error-50: #{$color-error-50};
--color-error-100: #{$color-error-100};
--color-error-200: #{$color-error-200};
--color-error-300: #{$color-error-300};
--color-error-400: #{$color-error-400};
--color-error-500: #{$color-error-500};
--color-error-600: #{$color-error-600};
--color-error-700: #{$color-error-700};
--color-error-800: #{$color-error-800};
--color-error-900: #{$color-error-900};
--color-error-950: #{$color-error-950};
// Warning colors
--color-warning-50: #{$color-warning-50};
--color-warning-100: #{$color-warning-100};
--color-warning-200: #{$color-warning-200};
--color-warning-300: #{$color-warning-300};
--color-warning-400: #{$color-warning-400};
--color-warning-500: #{$color-warning-500};
--color-warning-600: #{$color-warning-600};
--color-error-600: #{$color-error-600};
--color-error-800: #{$color-error-800};
--color-warning-700: #{$color-warning-700};
--color-warning-800: #{$color-warning-800};
--color-warning-900: #{$color-warning-900};
--color-warning-950: #{$color-warning-950};
// Success colors
--color-success-50: #{$color-success-50};
--color-success-100: #{$color-success-100};
--color-success-200: #{$color-success-200};
--color-success-300: #{$color-success-300};
--color-success-400: #{$color-success-400};
--color-success-500: #{$color-success-500};
--color-success-600: #{$color-success-600};
--color-success-700: #{$color-success-700};
--color-success-800: #{$color-success-800};
--color-success-900: #{$color-success-900};
--color-success-950: #{$color-success-950};
// Info colors
--color-info-50: #{$color-info-50};
--color-info-100: #{$color-info-100};
--color-info-200: #{$color-info-200};
--color-info-300: #{$color-info-300};
--color-info-400: #{$color-info-400};
--color-info-500: #{$color-info-500};
--color-info-600: #{$color-info-600};
--color-info-700: #{$color-info-700};
--color-info-800: #{$color-info-800};
--color-info-900: #{$color-info-900};
--color-info-950: #{$color-info-950};
// Soft colors (TO DELETE AFTER)
--color-primary-500-soft: #{$color-primary-500-soft};
--color-secondary-500-soft: #{$color-secondary-500-soft};
--color-info-500-soft: #{$color-info-500-soft};