From 399232ba9037047af61bc9919cdc35a512a323be Mon Sep 17 00:00:00 2001
From: Mathis Chambon <matchambon60@gmail.com>
Date: Wed, 26 Jun 2024 12:08:57 +0200
Subject: [PATCH] feat(buttons): quartenary variant

---
 components/Molecules/Button/Button.stories.js |  2 +-
 components/Molecules/Button/button.css        | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/Molecules/Button/Button.stories.js b/components/Molecules/Button/Button.stories.js
index 037f482..b2b47e7 100644
--- a/components/Molecules/Button/Button.stories.js
+++ b/components/Molecules/Button/Button.stories.js
@@ -4,7 +4,7 @@ export default {
   title: 'Design System/Molecules/Button'
 };
 
-const types = ['primary', 'secondary', 'tertiary', 'destructive'];
+const types = ['primary', 'secondary', 'tertiary', 'quartenary', 'destructive'];
 const icons = ['copy', 'eye', 'edit', 'close'];
 
 export const classic = {
diff --git a/components/Molecules/Button/button.css b/components/Molecules/Button/button.css
index b407008..873fcf5 100644
--- a/components/Molecules/Button/button.css
+++ b/components/Molecules/Button/button.css
@@ -105,6 +105,30 @@
     }
   }
 
+  &--quartenary {
+    background: var(--grey-lightest);
+    color: var(--black);
+
+    &:hover {
+      background: var(--grey-lighter);
+    }
+
+    &:disabled {
+      background: var(--white);
+      color: var(--grey-lighter);
+    }
+
+    &:focus-visible {
+      outline: none;
+      background: var(--vermillon-lightest);
+    }
+
+    &:focus-visible:hover {
+      background: var(--vermillon-lightest);
+      color: var(--grey-dark);
+    }
+  }
+
   &--destructive {
     background: var(--error);
     color: var(--white);