From ad54c498e8b0e86c6de7bfaa2f72ef31bc34b2d5 Mon Sep 17 00:00:00 2001
From: sarahgm <38324334+sarahgm@users.noreply.github.com>
Date: Mon, 14 Aug 2023 11:58:40 +0200
Subject: [PATCH] chore[DST-119]: add active state to buttons and active tokens
 b2b theme (#3265)

---
 .changeset/itchy-teachers-argue.md               | 5 +++++
 themes/theme-b2b/src/components/Button.styles.ts | 7 ++++++-
 themes/theme-b2b/src/tokens.ts                   | 2 ++
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/itchy-teachers-argue.md

diff --git a/.changeset/itchy-teachers-argue.md b/.changeset/itchy-teachers-argue.md
new file mode 100644
index 0000000000..eac4659eaa
--- /dev/null
+++ b/.changeset/itchy-teachers-argue.md
@@ -0,0 +1,5 @@
+---
+"@marigold/theme-b2b": patch
+---
+
+chore[DST-119]: add active state to buttons and active tokens b2b theme
diff --git a/themes/theme-b2b/src/components/Button.styles.ts b/themes/theme-b2b/src/components/Button.styles.ts
index 0a4f4f0326..adcd1e0595 100644
--- a/themes/theme-b2b/src/components/Button.styles.ts
+++ b/themes/theme-b2b/src/components/Button.styles.ts
@@ -12,16 +12,21 @@ export const Button: ThemeComponent<'Button'> = cva(
         primary: [
           'text-text-light bg-bg-primary',
           'data-[hover]:text-text-light data-[hover]:bg-bg-primary-hover',
+          'active:hover:bg-bg-primary-active',
         ],
         secondary: [
           'text-text-light bg-bg-secondary data-[hover]:text-text-light data-[hover]:bg-bg-secondary-hover',
+          'active:hover:bg-bg-secondary-active',
         ],
         ghost: [
           'border-border-dark border border-solid',
           'text-text-body',
           'hover:bg-bg-hover',
+          'active:hover:bg-bg-secondary-active active:hover:text-text-light',
+        ],
+        text: [
+          'text-text-body data-[hover]:bg-bg-hover active:hover:bg-bg-secondary-active active:hover:text-text-light',
         ],
-        text: ['text-text-body data-[hover]:bg-bg-hover'],
         menu: [
           'text-text-body bg-bg-body hover:text-text-light hover:bg-bg-secondary-hover',
         ],
diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts
index 97d6170908..576257a87d 100644
--- a/themes/theme-b2b/src/tokens.ts
+++ b/themes/theme-b2b/src/tokens.ts
@@ -132,11 +132,13 @@ export const colors = {
       DEFAULT: brand.primary[600],
       light: brand.primary[100],
       hover: brand.primary[400],
+      active: brand.primary[700],
     },
 
     secondary: {
       DEFAULT: brand.secondary[700],
       hover: brand.secondary[600],
+      active: brand.secondary[800],
     },
 
     surface: {