fix(react): fix selected Button styles (#211)

* fix(react): fix selected Button styles * chore(change): add change
jonambas · Dec 27, 2023 · 89b7341 · 89b7341
1 parent 80e8db3
commit 89b7341
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 33 deletions.
diff --git a/.changeset/mean-grapes-listen.md b/.changeset/mean-grapes-listen.md
@@ -0,0 +1,5 @@
+---
+"@sweatpants/react": patch
+---
+
+Fix selected Button styles
diff --git a/libra/components/Button.libra.tsx b/libra/components/Button.libra.tsx
@@ -14,7 +14,7 @@ directory('Button', () => {
           className={css({
             display: 'flex',
             gap: '4',
-            alignItems: 'flex-start'
+            alignItems: 'flex-start',
           })}
         >
           <Button size="xs">Click Me</Button>
@@ -107,30 +107,33 @@ directory('Button', () => {
     const [selected, setSelected] = useState(0);
 
     return (
-      <div className={css({ display: 'flex', gap: '4' })}>
-        <ButtonGroup space="none">
-          <Button selected kind="neutral">
-            Click Me
-          </Button>
-          <Button kind="neutral">Click Me</Button>
-        </ButtonGroup>
-        <ButtonGroup space="tight">
-          <Button
-            selected={selected === 0}
-            onClick={() => setSelected(0)}
-            kind="bare"
-          >
-            Click Me
-          </Button>
-          <Button
-            selected={selected === 1}
-            onClick={() => setSelected(1)}
-            kind="bare"
-          >
-            Click Me
-          </Button>
-        </ButtonGroup>
-      </div>
+      <Card>
+        <div className={css({ display: 'flex', gap: '4' })}>
+          <ButtonGroup space="none">
+            <Button selected kind="neutral">
+              Click Me
+            </Button>
+            <Button kind="neutral">Click Me</Button>
+            <Button kind="neutral">Click Me</Button>
+          </ButtonGroup>
+          <ButtonGroup space="tight">
+            <Button
+              selected={selected === 0}
+              onClick={() => setSelected(0)}
+              kind="bare"
+            >
+              Click Me
+            </Button>
+            <Button
+              selected={selected === 1}
+              onClick={() => setSelected(1)}
+              kind="bare"
+            >
+              Click Me
+            </Button>
+          </ButtonGroup>
+        </div>
+      </Card>
     );
   });
 });
diff --git a/packages/react/src/button/Button.tsx b/packages/react/src/button/Button.tsx
@@ -145,11 +145,13 @@ const styles = cva({
       kind: 'neutral',
       selected: true,
       css: {
-        base: { bg: 'blue4', color: 'blue11', borderColor: 'blue8' },
-        _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue9' },
+        bg: { base: 'blue4', _dark: 'blue7' },
+        color: { base: 'blue11', _dark: 'blue12' },
+        borderColor: { base: 'blue8', _dark: 'blue9' },
         '&:hover:not(:disabled)': {
-          base: { bg: 'blue4', color: 'blue11', borderColor: 'blue8' },
-          _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue9' },
+          bg: { base: 'blue4', _dark: 'blue7' },
+          color: { base: 'blue11', _dark: 'blue12' },
+          borderColor: { base: 'blue8', _dark: 'blue9' },
           _before: {
             opacity: '0.05',
           },
@@ -160,11 +162,13 @@ const styles = cva({
       kind: 'bare',
       selected: true,
       css: {
-        base: { bg: 'blue4', color: 'blue11', borderColor: 'blue4' },
-        _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue7' },
+        bg: { base: 'blue4', _dark: 'blue7' },
+        color: { base: 'blue11', _dark: 'blue12' },
+        borderColor: { base: 'blue4', _dark: 'blue7' },
         '&:hover:not(:disabled)': {
-          base: { bg: 'blue4', color: 'blue11', borderColor: 'blue4' },
-          _dark: { bg: 'blue7', color: 'blue12', borderColor: 'blue7' },
+          bg: { base: 'blue4', _dark: 'blue7' },
+          color: { base: 'blue11', _dark: 'blue12' },
+          borderColor: { base: 'blue4', _dark: 'blue7' },
           _before: {
             opacity: '0.05',
           },