[APP-1310] Button cleanup (#8754)

* Rm gradient buttons from Storybook

* TEMP move storybook button section

* Remove gradient_sky

* Remove actual defs for gradient_sky and gradient_primary

* Remove other gradient defs

* Remove gradient support entirely

* Deprecate 'variant' in favor of 'color'

* Fork base styles codepath to make variant deprecation more obvious

* Remove text styles for when no color is set, never been used

* Fork text styles codepath to make variant deprecation more obvious

* Revert temp storybook commit, remove deprecated values

* Replace remaining gradient button usage

src/view/screens/Storybook/Buttons.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'
@@ -7,7 +6,6 @@ import {
   type ButtonColor,
   ButtonIcon,
   ButtonText,
-  type ButtonVariant,
 } from '#/components/Button'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
@@ -27,258 +25,136 @@ export function Buttons() {
           'negative_secondary',
         ].map(color => (
           <View key={color} style={[a.gap_md, a.align_start]}>
-            {['solid', 'outline', 'ghost'].map(variant => (
-              <React.Fragment key={variant}>
-                <Button
-                  variant={variant as ButtonVariant}
-                  color={color as ButtonColor}
-                  size="large"
-                  label="Click here">
-                  <ButtonText>Button</ButtonText>
-                </Button>
-                <Button
-                  disabled
-                  variant={variant as ButtonVariant}
-                  color={color as ButtonColor}
-                  size="large"
-                  label="Click here">
-                  <ButtonText>Button</ButtonText>
-                </Button>
-              </React.Fragment>
-            ))}
+            <Button
+              color={color as ButtonColor}
+              size="large"
+              label="Click here">
+              <ButtonText>Button</ButtonText>
+            </Button>
+            <Button
+              disabled
+              color={color as ButtonColor}
+              size="large"
+              label="Click here">
+              <ButtonText>Button</ButtonText>
+            </Button>
           </View>
         ))}
-
-        <View style={[a.flex_row, a.gap_md, a.align_start]}>
-          <View style={[a.gap_md, a.align_start]}>
-            {['gradient_sky', 'gradient_midnight', 'gradient_sunrise'].map(
-              name => (
-                <React.Fragment key={name}>
-                  <Button
-                    variant="gradient"
-                    color={name as ButtonColor}
-                    size="large"
-                    label="Click here">
-                    <ButtonText>Button</ButtonText>
-                  </Button>
-                  <Button
-                    disabled
-                    variant="gradient"
-                    color={name as ButtonColor}
-                    size="large"
-                    label="Click here">
-                    <ButtonText>Button</ButtonText>
-                  </Button>
-                </React.Fragment>
-              ),
-            )}
-          </View>
-        </View>
       </View>
 
       <View style={[a.flex_wrap, a.gap_md, a.align_start]}>
-        <Button variant="solid" color="primary" size="large" label="Link out">
+        <Button color="primary" size="large" label="Link out">
           <ButtonText>Button</ButtonText>
         </Button>
-        <Button variant="solid" color="primary" size="large" label="Link out">
+        <Button color="primary" size="large" label="Link out">
           <ButtonText>Button</ButtonText>
           <ButtonIcon icon={Globe} position="right" />
         </Button>
 
-        <Button variant="solid" color="primary" size="small" label="Link out">
+        <Button color="primary" size="small" label="Link out">
           <ButtonText>Button</ButtonText>
         </Button>
-        <Button variant="solid" color="primary" size="small" label="Link out">
+        <Button color="primary" size="small" label="Link out">
           <ButtonText>Button</ButtonText>
           <ButtonIcon icon={Globe} position="right" />
         </Button>
 
-        <Button variant="solid" color="primary" size="tiny" label="Link out">
+        <Button color="primary" size="tiny" label="Link out">
           <ButtonIcon icon={Globe} position="left" />
           <ButtonText>Button</ButtonText>
         </Button>
       </View>
 
       <View style={[a.flex_row, a.gap_md, a.align_center]}>
-        <Button variant="solid" color="primary" size="large" label="Link out">
+        <Button color="primary" size="large" label="Link out">
           <ButtonText>Button</ButtonText>
         </Button>
-        <Button variant="solid" color="primary" size="large" label="Link out">
+        <Button color="primary" size="large" label="Link out">
           <ButtonText>Button</ButtonText>
           <ButtonIcon icon={Globe} position="right" />
         </Button>
-        <Button variant="solid" color="primary" size="large" label="Link out">
+        <Button color="primary" size="large" label="Link out">
           <ButtonText>Button</ButtonText>
           <ButtonIcon icon={Globe} position="right" size="lg" />
         </Button>
-        <Button
-          variant="solid"
-          color="primary"
-          size="large"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="large" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="solid"
-          color="primary"
-          size="large"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="large" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} size="lg" />
         </Button>
       </View>
 
       <View style={[a.flex_row, a.gap_md, a.align_center]}>
-        <Button variant="solid" color="primary" size="small" label="Link out">
+        <Button color="primary" size="small" label="Link out">
           <ButtonText>Button</ButtonText>
         </Button>
-        <Button variant="solid" color="primary" size="small" label="Link out">
+        <Button color="primary" size="small" label="Link out">
           <ButtonText>Button</ButtonText>
           <ButtonIcon icon={Globe} position="right" />
         </Button>
-        <Button
-          variant="solid"
-          color="primary"
-          size="small"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="small" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="solid"
-          color="primary"
-          size="small"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="small" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} size="lg" />
         </Button>
       </View>
 
       <View style={[a.flex_row, a.gap_md, a.align_center]}>
-        <Button variant="solid" color="primary" size="tiny" label="Link out">
+        <Button color="primary" size="tiny" label="Link out">
           <ButtonText>Button</ButtonText>
         </Button>
-        <Button variant="solid" color="primary" size="tiny" label="Link out">
+        <Button color="primary" size="tiny" label="Link out">
           <ButtonText>Button</ButtonText>
           <ButtonIcon icon={Globe} position="right" />
         </Button>
-        <Button
-          variant="solid"
-          color="primary"
-          size="tiny"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="tiny" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="solid"
-          color="primary"
-          size="tiny"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="tiny" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} size="md" />
         </Button>
       </View>
 
       <View style={[a.flex_row, a.gap_md, a.align_center]}>
-        <Button
-          variant="solid"
-          color="primary"
-          size="large"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="large" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="gradient"
-          color="gradient_sunset"
-          size="small"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="small" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="gradient"
-          color="gradient_sunset"
-          size="tiny"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="tiny" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="outline"
-          color="primary"
-          size="large"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="large" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="ghost"
-          color="primary"
-          size="small"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="small" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="ghost"
-          color="primary"
-          size="tiny"
-          shape="round"
-          label="Link out">
+        <Button color="primary" size="tiny" shape="round" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
       </View>
 
       <View style={[a.flex_row, a.gap_md, a.align_start]}>
-        <Button
-          variant="solid"
-          color="primary"
-          size="large"
-          shape="square"
-          label="Link out">
+        <Button color="primary" size="large" shape="square" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="gradient"
-          color="gradient_sunset"
-          size="small"
-          shape="square"
-          label="Link out">
+        <Button color="primary" size="small" shape="square" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="gradient"
-          color="gradient_sunset"
-          size="tiny"
-          shape="square"
-          label="Link out">
+        <Button color="primary" size="tiny" shape="square" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="outline"
-          color="primary"
-          size="large"
-          shape="square"
-          label="Link out">
+        <Button color="primary" size="large" shape="square" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="ghost"
-          color="primary"
-          size="small"
-          shape="square"
-          label="Link out">
+        <Button color="primary" size="small" shape="square" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
-        <Button
-          variant="ghost"
-          color="primary"
-          size="tiny"
-          shape="square"
-          label="Link out">
+        <Button color="primary" size="tiny" shape="square" label="Link out">
           <ButtonIcon icon={ChevronLeft} />
         </Button>
       </View>

src/view/screens/Storybook/Forms.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {TextInput, View} from 'react-native'
+import {type TextInput, View} from 'react-native'
 
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -216,8 +216,8 @@ export function Forms() {
       </View>
 
       <Button
-        variant="gradient"
-        color="gradient_nordic"
+        variant="solid"
+        color="primary"
         size="small"
         label="Reset all toggles"
         onPress={() => {

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() {
             <Toasts />
 
             <Button
-              variant="solid"
               color="primary"
               size="small"
               onPress={() => navigation.navigate('SharedPreferencesTester')}
@@ -128,7 +123,6 @@ function StorybookInner() {
             <Settings />
 
             <Button
-              variant="solid"
               color="primary"
               size="large"
               label="Switch to Contained List"
@@ -139,7 +133,6 @@ function StorybookInner() {
         ) : (
           <>
             <Button
-              variant="solid"
               color="primary"
               size="large"
               label="Switch to Storybook"