feat(buttons): quartenary variant

thelia · Jun 26, 2024 · 399232b · 399232b
1 parent ed0dd1b
commit 399232b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git 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
@@ -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);