[APP-1310] Button refresh (#8758)

* 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

* Update Buttons storybook section

* Update tiny styles

* Update small styles

* Update large sizes

* Ensure proper alignment of buttons in storybook

* Update button colors

* Rename negative_secondary to negative_subtle

* Remove unnecessary select()

* Update icon size and gap

* Update negative_subtle styles

* Custom button colors

* Add borderCurve

2 files changed, 69 insertions, 145 deletions

diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index eaf8bba7e..0db062913 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -1,3 +1,4 @@
+import {Fragment} from 'react'
 import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'
@@ -5,159 +6,82 @@ import {
   Button,
   type ButtonColor,
   ButtonIcon,
+  type ButtonSize,
   ButtonText,
 } 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'
-import {H1} from '#/components/Typography'
+import {Text} from '#/components/Typography'
 
 export function Buttons() {
   return (
     <View style={[a.gap_md]}>
-      <H1>Buttons</H1>
+      <Text style={[a.font_heavy, a.text_5xl]}>Buttons</Text>
 
-      <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
-        {[
-          'primary',
-          'secondary',
-          'secondary_inverted',
-          'negative',
-          'negative_secondary',
-        ].map(color => (
-          <View key={color} style={[a.gap_md, a.align_start]}>
-            <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>
-
-      <View style={[a.flex_wrap, a.gap_md, a.align_start]}>
-        <Button color="primary" size="large" label="Link out">
-          <ButtonText>Button</ButtonText>
-        </Button>
-        <Button color="primary" size="large" label="Link out">
-          <ButtonText>Button</ButtonText>
-          <ButtonIcon icon={Globe} position="right" />
-        </Button>
-
-        <Button color="primary" size="small" label="Link out">
-          <ButtonText>Button</ButtonText>
-        </Button>
-        <Button color="primary" size="small" label="Link out">
-          <ButtonText>Button</ButtonText>
-          <ButtonIcon icon={Globe} position="right" />
-        </Button>
-
-        <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 color="primary" size="large" label="Link out">
-          <ButtonText>Button</ButtonText>
-        </Button>
-        <Button color="primary" size="large" label="Link out">
-          <ButtonText>Button</ButtonText>
-          <ButtonIcon icon={Globe} position="right" />
-        </Button>
-        <Button color="primary" size="large" label="Link out">
-          <ButtonText>Button</ButtonText>
-          <ButtonIcon icon={Globe} position="right" size="lg" />
-        </Button>
-        <Button color="primary" size="large" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <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 color="primary" size="small" label="Link out">
-          <ButtonText>Button</ButtonText>
-        </Button>
-        <Button color="primary" size="small" label="Link out">
-          <ButtonText>Button</ButtonText>
-          <ButtonIcon icon={Globe} position="right" />
-        </Button>
-        <Button color="primary" size="small" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <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 color="primary" size="tiny" label="Link out">
-          <ButtonText>Button</ButtonText>
-        </Button>
-        <Button color="primary" size="tiny" label="Link out">
-          <ButtonText>Button</ButtonText>
-          <ButtonIcon icon={Globe} position="right" />
-        </Button>
-        <Button color="primary" size="tiny" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <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 color="primary" size="large" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="small" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="tiny" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="large" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="small" shape="round" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <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 color="primary" size="large" shape="square" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="small" shape="square" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="tiny" shape="square" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="large" shape="square" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="small" shape="square" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-        <Button color="primary" size="tiny" shape="square" label="Link out">
-          <ButtonIcon icon={ChevronLeft} />
-        </Button>
-      </View>
+      {[
+        'primary',
+        'secondary',
+        'secondary_inverted',
+        'negative',
+        'primary_subtle',
+        'negative_subtle',
+      ].map(color => (
+        <Fragment key={color}>
+          {['tiny', 'small', 'large'].map(size => (
+            <Fragment key={size}>
+              <Text style={[a.font_heavy, a.text_2xl]}>
+                color={color} size={size}
+              </Text>
+              <View style={[a.flex_row, a.align_start, a.gap_md]}>
+                <Button
+                  color={color as ButtonColor}
+                  size={size as ButtonSize}
+                  label="Click here">
+                  <ButtonText>Button</ButtonText>
+                </Button>
+                <Button
+                  disabled
+                  color={color as ButtonColor}
+                  size={size as ButtonSize}
+                  label="Click here">
+                  <ButtonText>Button</ButtonText>
+                </Button>
+                <Button
+                  color={color as ButtonColor}
+                  size={size as ButtonSize}
+                  shape="round"
+                  label="Click here">
+                  <ButtonIcon icon={ChevronLeft} />
+                </Button>
+                <Button
+                  color={color as ButtonColor}
+                  size={size as ButtonSize}
+                  shape="square"
+                  label="Click here">
+                  <ButtonIcon icon={ChevronLeft} />
+                </Button>
+              </View>
+              <View style={[a.flex_row, a.gap_md]}>
+                <Button
+                  color={color as ButtonColor}
+                  size={size as ButtonSize}
+                  label="Click here">
+                  <ButtonIcon icon={Globe} position="left" />
+                  <ButtonText>Button</ButtonText>
+                </Button>
+                <Button
+                  disabled
+                  color={color as ButtonColor}
+                  size={size as ButtonSize}
+                  label="Click here">
+                  <ButtonText>Button</ButtonText>
+                  <ButtonIcon icon={Globe} position="right" />
+                </Button>
+              </View>
+            </Fragment>
+          ))}
+        </Fragment>
+      ))}
     </View>
   )
 }
diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
index 1151d5a3c..8285b0d73 100644
--- a/src/view/screens/Storybook/index.tsx
+++ b/src/view/screens/Storybook/index.tsx
@@ -87,6 +87,7 @@ function StorybookInner() {
               </Button>
             </View>
 
+            <Buttons />
             <Toasts />
 
             <Button
@@ -109,7 +110,6 @@ function StorybookInner() {
             </ThemeProvider>
 
             <Forms />
-            <Buttons />
             <Typography />
             <Spacing />
             <Shadows />