Fix default background color

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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;

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">