Ditch tertiary button color, lighten secondary button

src/components/Button.tsx

@@ -20,7 +20,6 @@ export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
   | 'primary'
   | 'secondary'
-  | 'tertiary'
   | 'negative'
   | 'gradient_sky'
   | 'gradient_midnight'
@@ -192,14 +191,14 @@ export function Button({
       if (variant === 'solid') {
         if (!disabled) {
           baseStyles.push({
-            backgroundColor: t.palette.contrast_50,
+            backgroundColor: t.palette.contrast_25,
           })
           hoverStyles.push({
-            backgroundColor: t.palette.contrast_100,
+            backgroundColor: t.palette.contrast_50,
           })
         } else {
           baseStyles.push({
-            backgroundColor: t.palette.contrast_200,
+            backgroundColor: t.palette.contrast_100,
           })
         }
       } else if (variant === 'outline') {
@@ -225,43 +224,6 @@ export function Button({
           })
         }
       }
-    } else if (color === 'tertiary') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_25,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_200,
-          })
-          hoverStyles.push(t.atoms.bg_contrast_25)
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_100,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        }
-      }
     } else if (color === 'negative') {
       if (variant === 'solid') {
         if (!disabled) {
@@ -355,7 +317,6 @@ export function Button({
       const gradient = {
         primary: tokens.gradients.sky,
         secondary: tokens.gradients.sky,
-        tertiary: tokens.gradients.sky,
         negative: tokens.gradients.sky,
         gradient_sky: tokens.gradients.sky,
         gradient_midnight: tokens.gradients.midnight,
@@ -512,38 +473,6 @@ export function useSharedButtonTextStyles() {
           })
         }
       }
-    } else if (color === 'tertiary') {
-      if (variant === 'solid' || variant === 'gradient') {
-        if (!disabled) {
-          baseStyles.push({
-            color: t.palette.contrast_700,
-          })
-        } else {
-          baseStyles.push({
-            color: t.palette.contrast_400,
-          })
-        }
-      } else if (variant === 'outline') {
-        if (!disabled) {
-          baseStyles.push({
-            color: t.palette.contrast_500,
-          })
-        } else {
-          baseStyles.push({
-            color: t.palette.contrast_300,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push({
-            color: t.palette.contrast_400,
-          })
-        } else {
-          baseStyles.push({
-            color: t.palette.contrast_200,
-          })
-        }
-      }
     } else if (color === 'negative') {
       if (variant === 'solid' || variant === 'gradient') {
         if (!disabled) {

src/components/moderation/ContentHider.tsx

@@ -53,7 +53,7 @@ export function ContentHider({
 
       <Button
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="large"
         shape="default"
         onPress={() => {

src/components/moderation/LabelsOnMe.tsx

@@ -45,7 +45,7 @@ export function LabelsOnMe({
 
       <Button
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size={size || 'small'}
         label={_(msg`View information about these labels`)}
         onPress={() => {

src/components/moderation/LabelsOnMeDialog.tsx

@@ -149,7 +149,7 @@ function Label({
       <View>
         <Button
           variant="solid"
-          color="tertiary"
+          color="secondary"
           size="small"
           label={_(msg`Appeal`)}
           onPress={() => onPressAppeal(label)}>
@@ -245,7 +245,7 @@ function AppealForm({
         <Button
           testID="backBtn"
           variant="solid"
-          color="tertiary"
+          color="secondary"
           size="small"
           onPress={onPressBack}
           label={_(msg`Back`)}>

src/components/moderation/PostAlerts.tsx

@@ -51,7 +51,7 @@ function PostInform({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="tiny"
         shape="default"
         onPress={() => {
@@ -76,7 +76,7 @@ function PostAlert({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="small"
         shape="default"
         onPress={() => {

src/components/moderation/ProfileHeaderAlerts.tsx

@@ -51,7 +51,7 @@ function ProfileInform({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="tiny"
         shape="default"
         onPress={() => {
@@ -76,7 +76,7 @@ function ProfileAlert({cause}: {cause: ModerationCause}) {
       <Button
         label={desc.name}
         variant="solid"
-        color="tertiary"
+        color="secondary"
         size="small"
         shape="default"
         onPress={() => {

src/screens/Moderation/index.tsx

@@ -300,7 +300,7 @@ export function ModerationScreenInner({
               label={_(msg`Confirm your birthdate`)}
               size="small"
               variant="solid"
-              color="tertiary"
+              color="secondary"
               onPress={() => {
                 openModal({name: 'birth-date-settings'})
               }}

src/view/screens/Storybook/Buttons.tsx

@@ -20,7 +20,7 @@ export function Buttons() {
       <H1>Buttons</H1>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
-        {['primary', 'secondary', 'tertiary', 'negative'].map(color => (
+        {['primary', 'secondary', 'negative'].map(color => (
           <View key={color} style={[a.gap_md, a.align_start]}>
             {['solid', 'outline', 'ghost'].map(variant => (
               <React.Fragment key={variant}>