diff --git a/src/front/Components/DesignSystem/Tag/classes.module.scss b/src/front/Components/DesignSystem/Tag/classes.module.scss index 651f6877..f0dd81b3 100644 --- a/src/front/Components/DesignSystem/Tag/classes.module.scss +++ b/src/front/Components/DesignSystem/Tag/classes.module.scss @@ -24,4 +24,8 @@ &.error { background-color: var(--tag-error-background); } + + &.neutral { + background-color: var(--tag-neutral-background); + } } diff --git a/src/front/Components/DesignSystem/Tag/index.tsx b/src/front/Components/DesignSystem/Tag/index.tsx index 090a90fd..1f62074f 100644 --- a/src/front/Components/DesignSystem/Tag/index.tsx +++ b/src/front/Components/DesignSystem/Tag/index.tsx @@ -9,6 +9,7 @@ export enum ETagColor { SUCCESS = "success", ERROR = "error", WARNING = "warning", + NEUTRAL = "neutral", } export enum ETagVariant { @@ -24,10 +25,11 @@ type IProps = { }; const colorMap: Record = { - [ETagColor.INFO]: ETypoColor.COLOR_INFO_900, - [ETagColor.SUCCESS]: ETypoColor.COLOR_SUCCESS_700, - [ETagColor.ERROR]: ETypoColor.COLOR_SECONDARY_700, - [ETagColor.WARNING]: ETypoColor.COLOR_WARNING_700, + [ETagColor.INFO]: ETypoColor.TAG_INFO_CONTRAST, + [ETagColor.SUCCESS]: ETypoColor.TAG_SUCCESS_CONTRAST, + [ETagColor.ERROR]: ETypoColor.TAG_ERROR_CONTRAST, + [ETagColor.WARNING]: ETypoColor.TAG_WARNING_CONTRAST, + [ETagColor.NEUTRAL]: ETypoColor.TAG_NEUTRAL_CONTRAST, }; const typoMap: Record = { diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index 248cad65..9ceaf113 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/src/front/Components/DesignSystem/Typography/index.tsx @@ -163,6 +163,12 @@ export enum ETypoColor { DROPDOWN_CONTRAST_ACTIVE = "--dropdown-contrast-active", INPUT_CHIP_CONTRAST = "--input-chip-contrast", + + TAG_NEUTRAL_CONTRAST = "--tag-neutral-contrast", + TAG_INFO_CONTRAST = "--tag-info-contrast", + TAG_SUCCESS_CONTRAST = "--tag-success-contrast", + TAG_WARNING_CONTRAST = "--tag-warning-contrast", + TAG_ERROR_CONTRAST = "--tag-error-contrast", } export default function Typography(props: IProps) { diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx index 187dc05f..c4827956 100644 --- a/src/front/Components/Layouts/DesignSystem/index.tsx +++ b/src/front/Components/Layouts/DesignSystem/index.tsx @@ -389,6 +389,7 @@ export default function DesignSystem() { + Table Tags @@ -397,6 +398,7 @@ export default function DesignSystem() { + Table diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss index 3bcb8aaa..812dee5c 100644 --- a/src/front/Themes/variables.scss +++ b/src/front/Themes/variables.scss @@ -520,6 +520,8 @@ --tabs-contrast-warning: var(--color-warning-500); --tag-error-background: var(--error-weak-higlight); --tag-error-contrast: var(--error-weak-contrast); + --tag-neutral-background: var(--neutral-weak-higlight); + --tag-neutral-contrast: var(--neutral-weak-contrast); --tag-info-background: var(--info-weak-higlight); --tag-info-contrast: var(--info-strong-higlight); --tag-success-background: var(--success-weak-higlight);