Add style for destructive subtle

octo-technology · Sep 24, 2024 · 996e004 · 996e004
1 parent b3153d6
commit 996e004
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 14 deletions.
diff --git 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
@@ -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*/
 }