Make proper extension of Button more clearly defined (#8753)

* Remove unecessary color prop from SettingsList LinkItem

* Add UninheritableButtonProps to avoid misuse

src/components/Button.tsx

@@ -20,6 +20,18 @@ import {atoms as a, flatten, select, tokens, useTheme} from '#/alf'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
 
+/**
+ * The `Button` component, and some extensions of it like `Link` are intended
+ * to be generic and therefore apply no styles by default. These `VariantProps`
+ * are what control the `Button`'s presentation, and are intended only use cases where the buttons appear as, well, buttons.
+ *
+ * If `Button` or an extension of it are used for other compound components, use this property to avoid misuse of these variant props further down the line.
+ *
+ * @example
+ * type MyComponentProps = Omit<ButtonProps, UninheritableButtonProps> & {...}
+ */
+export type UninheritableButtonProps = 'variant' | 'color' | 'size' | 'shape'
+
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
   | 'primary'

src/screens/Settings/components/SettingsList.tsx

@@ -124,7 +124,7 @@ export function LinkItem({
   contentContainerStyle,
   chevronColor,
   ...props
-}: LinkProps & {
+}: Omit<LinkProps, Button.UninheritableButtonProps> & {
   contentContainerStyle?: StyleProp<ViewStyle>
   destructive?: boolean
   chevronColor?: string
@@ -132,7 +132,7 @@ export function LinkItem({
   const t = useTheme()
 
   return (
-    <Link color="secondary" {...props}>
+    <Link {...props}>
       {args => (
         <Item
           destructive={destructive}
@@ -154,7 +154,7 @@ export function PressableItem({
   contentContainerStyle,
   hoverStyle,
   ...props
-}: Button.ButtonProps & {
+}: Omit<Button.ButtonProps, Button.UninheritableButtonProps> & {
   contentContainerStyle?: StyleProp<ViewStyle>
   destructive?: boolean
 }) {