chore[DST-119]: add active state to buttons and active tokens b2b the…

…me (#3265)
marigold-ui · Aug 14, 2023 · ad54c49 · ad54c49
1 parent fd10c29
commit ad54c49
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/itchy-teachers-argue.md 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
@@ -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
@@ -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: {