Alter pill button additional colours as per new design

vanda · Nov 13, 2024 · 1cb031a · 1cb031a
1 parent f59c725
commit 1cb031a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/src/components/units/button/_button.scss b/src/components/units/button/_button.scss
@@ -131,6 +131,15 @@
       background: base.sitecolors-siteColor("vam-grey-5");
     }
 
+    &-light {
+      background: base.sitecolors-siteColor("vam-grey-6");
+      color: base.sitecolors-siteColor("vam-black");
+
+      &:hover {
+        background: base.sitecolors-siteColor("vam-grey-4");
+      }
+    }
+
     &-dark {
       background: base.sitecolors-siteColor("vam-grey-2");
       color: base.sitecolors-siteColor("vam-white");
@@ -140,6 +149,15 @@
       }
     }
 
+    &-darkest {
+      background: base.sitecolors-siteColor("vam-black");
+      color: base.sitecolors-siteColor("vam-white");
+
+      &:hover {
+        background: base.sitecolors-siteColor("vam-grey-0");
+      }
+    }
+
     &-close {
       display: inline-flex;
       gap: 10px;

diff --git a/src/components/units/button/button.config.js b/src/components/units/button/button.config.js
@@ -87,8 +87,12 @@ module.exports = {
         modifiers: ['pill'],
         variants: [
           ['pill', 'pill-close'],
+          ['pill', 'pill-light'],
+          ['pill', 'pill-light', 'pill-close'],
           ['pill', 'pill-dark'],
-          ['pill', 'pill-dark', 'pill-close']
+          ['pill', 'pill-dark', 'pill-close'],
+          ['pill', 'pill-darkest'],
+          ['pill', 'pill-darkest', 'pill-close']
         ]
       }
     }