diff --git a/src/stories/button.css b/src/stories/button.css index 57f1bc9..6a1e34f 100644 --- a/src/stories/button.css +++ b/src/stories/button.css @@ -117,21 +117,54 @@ button { } -/*DESTRUCTIVE*/ +/* DESTRUCTIVE CONTAINED */ .storybook-button--destructive-contained { - background-color:var(--color-button-background-destructive); - border: 1px solid var(--color-button-border-destructive); - color: var(--color-button-text-destructive); + background-color:var(--color-button-background-destructive-contained); + border: 1px solid var(--color-button-border-destructive-contained); + color: var(--color-button-text-destructive-contained); } .storybook-button--destructive-contained:hover { - background-color: var(--color-button-background-destructive); - border-color: var(--color-button-shadow-destructive); - box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-destructive) r g b / 30%); + background-color: var(--color-button-background-destructive-contained); + border-color: var(--color-button-shadow-destructive-contained); + box-shadow: 2px 4px 7px 2px rgb(from var(--color-button-shadow-destructive-contained) r g b / 30%); } .storybook-button--destructive-contained:active { - box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-destructive-active) r g b / 60%); + box-shadow: 0px 2px 3px 1px rgb(from var(--color-button-shadow-destructive-contained-active) r g b / 60%); +} + +/* DESTRUCTIVE SUBTLE */ + +.storybook-button--destructive-subtle { + color: var(--color-button-text-destructive-subtle); + background-color: transparent; + border: none; +} + +.storybook-button--destructive-subtle:hover { + color: var(--color-button-text-destructive-subtle-hover); + background-color:var(--color-button-background-destructive-subtle-hover); + border: none; +} + +.storybook-button--destructive-subtle:active { + color: var(--color-button-text-destructive-subtle-active); + background-color:var(--color-button-background-destructive-subtle-active); +} + +.storybook-button--destructive-subtle[disabled] { + background-color: transparent; + border: none; + color: var(--color-button-text-destructive-subtle-disabled); +} + +.storybook-button--destructive-subtle:hover[disabled] { + box-shadow: none; +} + +.storybook-button--destructive-subtle:active[disabled] { + box-shadow: none; } /* BUTTON SIZES*/ diff --git a/src/tokens/colors.css b/src/tokens/colors.css index 21d0a53..96ca65d 100644 --- a/src/tokens/colors.css +++ b/src/tokens/colors.css @@ -54,6 +54,9 @@ --color-white-100: #E2E4E7; --color-white-200: #A7AFB8; --color-white-300: #8995A1; + --color-white-500: #414952; + --color-white-900: #16181B; + /*TOKENS*/ --color-button-text-primary-contained: white; @@ -90,14 +93,19 @@ --color-button-border-primary-subtle-active:var(--color-navy-500); --color-button-text-primary-subtle-disabled: var(--color-white-300); + --color-button-text-destructive-contained: white; + --color-button-background-destructive-contained:var(--color-red-600); + --color-button-border-destructive-contained:var(--color-red-500); + --color-button-shadow-destructive-contained:var(--color-red-500); + --color-button-shadow-destructive-contained-active:var(--color-red-200); + --color-button-text-destructive-subtle:var(--color-white-500); + --color-button-text-destructive-subtle-hover:var(--color-blue-800); + --color-button-background-destructive-subtle-hover:var(--color-navy-050); + --color-button-text-destructive-subtle-active: white; + --color-button-background-destructive-subtle-active:var(--color-white-900); + --color-button-text-destructive-subtle-disabled: var(--color-white-300); - --color-button-text-destructive: white; - --color-button-background-destructive:var(--color-red-600); - --color-button-border-destructive:var(--color-red-500); - --color-button-shadow-destructive:var(--color-red-500); - --color-button-shadow-destructive-active:var(--color-red-200); -/*TODO* variablisier les couleurs primary*/ }