acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Ditch tertiary button color, lighten secondary button

Browse Source
This commit is contained in:
Paul Frazee
2024-03-09 15:32:44 -08:00
parent e0f93cb9e6
commit 86de3d630a
8 changed files with 13 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+3 -74
View File
@@ -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
+1 -1
View File
@@ -53,7 +53,7 @@ export function ContentHider({
<Button
variant="solid"
color="tertiary"
color="secondary"
size="large"
shape="default"
onPress={() => {
src/components/moderation/LabelsOnMe.tsx
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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}>