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

Remove theme specific colors from Button, improves secondary solid on dark mode

Browse Source
This commit is contained in:
Eric Bailey
2024-07-11 09:37:24 -05:00
parent 6d4b6787b3
commit 7fdbe5cc85
1 changed files with 11 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+11 -25
View File
@@ -152,7 +152,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
const {baseStyles, hoverStyles} = React.useMemo(() => {
const baseStyles: ViewStyle[] = []
const hoverStyles: ViewStyle[] = []
const light = t.name === 'light'
if (color === 'primary') {
if (variant === 'solid') {
@@ -165,7 +164,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
})
} else {
baseStyles.push({
backgroundColor: t.palette.primary_700,
backgroundColor: t.palette.primary_300,
})
}
} else if (variant === 'outline') {
@@ -178,24 +177,18 @@ export const Button = React.forwardRef<View, ButtonProps>(
borderColor: t.palette.primary_500,
})
hoverStyles.push(a.border, {
backgroundColor: light
? t.palette.primary_50
: t.palette.primary_950,
backgroundColor: t.palette.primary_50,
})
} else {
baseStyles.push(a.border, {
borderColor: light
? t.palette.primary_200
: t.palette.primary_900,
borderColor: t.palette.primary_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: light
? t.palette.primary_100
: t.palette.primary_900,
backgroundColor: t.palette.primary_100,
})
}
}
@@ -203,14 +196,14 @@ export const Button = React.forwardRef<View, ButtonProps>(
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.contrast_25,
backgroundColor: t.palette.contrast_100,
})
hoverStyles.push({
backgroundColor: t.palette.contrast_50,
backgroundColor: t.palette.contrast_200,
})
} else {
baseStyles.push({
backgroundColor: t.palette.contrast_100,
backgroundColor: t.palette.contrast_25,
})
}
} else if (variant === 'outline') {
@@ -297,24 +290,18 @@ export const Button = React.forwardRef<View, ButtonProps>(
borderColor: t.palette.negative_500,
})
hoverStyles.push(a.border, {
backgroundColor: light
? t.palette.negative_50
: t.palette.negative_975,
backgroundColor: t.palette.negative_50,
})
} else {
baseStyles.push(a.border, {
borderColor: light
? t.palette.negative_200
: t.palette.negative_900,
borderColor: t.palette.negative_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: light
? t.palette.negative_100
: t.palette.negative_975,
backgroundColor: t.palette.negative_100,
})
}
}
@@ -482,7 +469,6 @@ export function useSharedButtonTextStyles() {
const {color, variant, disabled, size} = useButtonContext()
return React.useMemo(() => {
const baseStyles: TextStyle[] = []
const light = t.name === 'light'
if (color === 'primary') {
if (variant === 'solid') {
@@ -494,7 +480,7 @@ export function useSharedButtonTextStyles() {
} else if (variant === 'outline') {
if (!disabled) {
baseStyles.push({
color: light ? t.palette.primary_600 : t.palette.primary_500,
color: t.palette.primary_600,
})
} else {
baseStyles.push({color: t.palette.primary_600, opacity: 0.5})