From 05e46b429f05ab5c6ab3e87fb72f17e92d786949 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 23 Dec 2025 09:33:50 +0100
Subject: [PATCH] Fix default background color

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/Button/Button.module.css   | 20 +++++++------------
 .../src/components/Button/Button.stories.tsx  | 14 +++++++++++++
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
index 4bd138c762..a68799ab7b 100644
--- a/packages/ui/src/components/Button/Button.module.css
+++ b/packages/ui/src/components/Button/Button.module.css
@@ -69,17 +69,15 @@
 
   .bui-Button[data-variant='secondary'] {
     color: var(--bui-fg-primary);
+    background-color: var(--bui-bg-neutral-on-surface-0);
 
-    &[data-surface='0'] {
-      background-color: var(--bui-bg-neutral-on-surface-0);
+    &:hover {
+      background-color: var(--bui-bg-neutral-on-surface-0-hover);
+      transition: background-color 150ms ease;
+    }
 
-      &:hover {
-        background-color: var(--bui-bg-neutral-on-surface-0-hover);
-      }
-
-      &:active {
-        background-color: var(--bui-bg-neutral-on-surface-0-pressed);
-      }
+    &:active {
+      background-color: var(--bui-bg-neutral-on-surface-0-pressed);
     }
 
     &[data-surface='1'] {
@@ -118,10 +116,6 @@
       }
     }
 
-    &:hover {
-      transition: background-color 150ms ease;
-    }
-
     &:focus-visible {
       outline: none;
       transition: none;
diff --git a/packages/ui/src/components/Button/Button.stories.tsx b/packages/ui/src/components/Button/Button.stories.tsx
index 9185122698..0cc2fb2be0 100644
--- a/packages/ui/src/components/Button/Button.stories.tsx
+++ b/packages/ui/src/components/Button/Button.stories.tsx
@@ -54,6 +54,20 @@ export const Variants = meta.story({
   },
   render: () => (
     <Flex direction="column" gap="4">
+      <Flex direction="column" gap="4">
+        <Text>Default</Text>
+        <Flex align="center" p="4">
+          <Button iconStart={<RiCloudLine />} variant="primary">
+            Button
+          </Button>
+          <Button iconStart={<RiCloudLine />} variant="secondary">
+            Button
+          </Button>
+          <Button iconStart={<RiCloudLine />} variant="tertiary">
+            Button
+          </Button>
+        </Flex>
+      </Flex>
       <Flex direction="column" gap="4">
         <Text>On Surface 0</Text>
         <Flex align="center" surface="0" p="4">