Fork base styles codepath to make variant deprecation more obvious

src/components/Button.tsx

@@ -205,8 +205,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
       const baseStyles: ViewStyle[] = []
       const hoverStyles: ViewStyle[] = []
 
-      if (color === 'primary') {
+      /*
+       * This is the happy path for new button styles, following the
+       * deprecation of `variant` prop. This redundant `variant` check is here
+       * just to make this handling easier to understand.
+       */
       if (variant === 'solid') {
+        if (color === 'primary') {
           if (!disabled) {
             baseStyles.push({
               backgroundColor: t.palette.primary_500,
@@ -223,7 +228,75 @@ export const Button = React.forwardRef<View, ButtonProps>(
               }),
             })
           }
-        } else if (variant === 'outline') {
+        } else if (color === 'secondary') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg_contrast_25)
+            hoverStyles.push(t.atoms.bg_contrast_50)
+          } else {
+            baseStyles.push(t.atoms.bg_contrast_100)
+          }
+        } else if (color === 'secondary_inverted') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_900,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.contrast_950,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_600,
+            })
+          }
+        } else if (color === 'negative') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.negative_500,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.negative_600,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: select(t.name, {
+                light: t.palette.negative_700,
+                dim: t.palette.negative_300,
+                dark: t.palette.negative_300,
+              }),
+            })
+          }
+        } else if (color === 'negative_secondary') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: select(t.name, {
+                light: t.palette.negative_50,
+                dim: t.palette.negative_100,
+                dark: t.palette.negative_100,
+              }),
+            })
+            hoverStyles.push({
+              backgroundColor: select(t.name, {
+                light: t.palette.negative_100,
+                dim: t.palette.negative_200,
+                dark: t.palette.negative_200,
+              }),
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: select(t.name, {
+                light: t.palette.negative_100,
+                dim: t.palette.negative_50,
+                dark: t.palette.negative_50,
+              }),
+            })
+          }
+        }
+      } else {
+        /*
+         * BEGIN DEPRECATED STYLES
+         */
+        if (color === 'primary') {
+          if (variant === 'outline') {
             baseStyles.push(a.border, t.atoms.bg, {
               borderWidth: 1,
             })
@@ -249,14 +322,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
             }
           }
         } else if (color === 'secondary') {
-        if (variant === 'solid') {
+          if (variant === 'outline') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg_contrast_25)
-            hoverStyles.push(t.atoms.bg_contrast_50)
-          } else {
-            baseStyles.push(t.atoms.bg_contrast_100)
-          }
-        } else if (variant === 'outline') {
             baseStyles.push(a.border, t.atoms.bg, {
               borderWidth: 1,
             })
@@ -280,20 +346,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
             }
           }
         } else if (color === 'secondary_inverted') {
-        if (variant === 'solid') {
+          if (variant === 'outline') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: t.palette.contrast_900,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.contrast_950,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: t.palette.contrast_600,
-            })
-          }
-        } else if (variant === 'outline') {
             baseStyles.push(a.border, t.atoms.bg, {
               borderWidth: 1,
             })
@@ -317,24 +370,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
             }
           }
         } else if (color === 'negative') {
-        if (variant === 'solid') {
+          if (variant === 'outline') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: t.palette.negative_500,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.negative_600,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.negative_700,
-                dim: t.palette.negative_300,
-                dark: t.palette.negative_300,
-              }),
-            })
-          }
-        } else if (variant === 'outline') {
             baseStyles.push(a.border, t.atoms.bg, {
               borderWidth: 1,
             })
@@ -360,32 +396,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
             }
           }
         } else if (color === 'negative_secondary') {
-        if (variant === 'solid') {
+          if (variant === 'outline') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.negative_50,
-                dim: t.palette.negative_100,
-                dark: t.palette.negative_100,
-              }),
-            })
-            hoverStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.negative_100,
-                dim: t.palette.negative_200,
-                dark: t.palette.negative_200,
-              }),
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.negative_100,
-                dim: t.palette.negative_50,
-                dark: t.palette.negative_50,
-              }),
-            })
-          }
-        } else if (variant === 'outline') {
             baseStyles.push(a.border, t.atoms.bg, {
               borderWidth: 1,
             })
@@ -411,6 +422,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
             }
           }
         }
+        /*
+         * END DEPRECATED STYLES
+         */
+      }
 
       if (shape === 'default') {
         if (size === 'large') {