From 16e915a67c2625842b0d078571162badf5184e78 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 30 Jul 2025 15:36:15 -0500
Subject: [PATCH] Deprecate 'variant' in favor of 'color'

---
 src/components/Button.tsx            | 10 ++++++++++
 src/view/screens/Storybook/index.tsx |  7 -------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 921bf93701..6f07a8b26d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -31,6 +31,7 @@ export type ButtonShape = 'round' | 'square' | 'default'
 export type VariantProps = {
   /**
    * The style variation of the button
+   * @deprecated Use `color` instead.
    */
   variant?: ButtonVariant
   /**
@@ -123,6 +124,15 @@ export const Button = React.forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
+    /**
+     * The `variant` prop is deprecated in favor of simply specifying `color`.
+     * If a `color` is set, then we want to use the existing codepaths for
+     * "solid" buttons. This is to maintain backwards compatibility.
+     */
+    if (!variant && color) {
+      variant = 'solid'
+    }
+
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index 68432e9c63..1f11748f41 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -52,7 +52,6 @@ function StorybookInner() {
           <>
             <View style={[a.flex_row, a.align_start, a.gap_md]}>
               <Button
-                variant="outline"
                 color="primary"
                 size="small"
                 label='Set theme to "system"'
@@ -60,7 +59,6 @@ function StorybookInner() {
                 <ButtonText>System</ButtonText>
               </Button>
               <Button
-                variant="solid"
                 color="secondary"
                 size="small"
                 label='Set theme to "light"'
@@ -68,7 +66,6 @@ function StorybookInner() {
                 <ButtonText>Light</ButtonText>
               </Button>
               <Button
-                variant="solid"
                 color="secondary"
                 size="small"
                 label='Set theme to "dim"'
@@ -79,7 +76,6 @@ function StorybookInner() {
                 <ButtonText>Dim</ButtonText>
               </Button>
               <Button
-                variant="solid"
                 color="secondary"
                 size="small"
                 label='Set theme to "dark"'
@@ -94,7 +90,6 @@ function StorybookInner() {
             <Buttons />
 
             <Button
-              variant="solid"
               color="primary"
               size="small"
               onPress={() => navigation.navigate('SharedPreferencesTester')}
@@ -129,7 +124,6 @@ function StorybookInner() {
             <Settings />
 
             <Button
-              variant="solid"
               color="primary"
               size="large"
               label="Switch to Contained List"
@@ -140,7 +134,6 @@ function StorybookInner() {
         ) : (
           <>
             <Button
-              variant="solid"
               color="primary"
               size="large"
               label="Switch to Storybook"