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

Update button colors

Browse Source
This commit is contained in:
Eric Bailey
2025-07-30 20:29:38 -05:00
parent d197fc0935
commit 9dbfcc9901
1 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+15 -21
View File
@@ -222,18 +222,18 @@ export const Button = React.forwardRef<View, ButtonProps>(
} else { } else {
baseStyles.push({ baseStyles.push({
backgroundColor: select(t.name, { backgroundColor: select(t.name, {
light: t.palette.primary_700, light: t.palette.primary_200,
dim: t.palette.primary_300, dim: t.palette.primary_200,
dark: t.palette.primary_300, dark: t.palette.primary_200,
}), }),
}) })
} }
} else if (color === 'secondary') { } else if (color === 'secondary') {
if (!disabled) { if (!disabled) {
baseStyles.push(t.atoms.bg_contrast_25) baseStyles.push(t.atoms.bg_contrast_25)
hoverStyles.push(t.atoms.bg_contrast_50) hoverStyles.push(t.atoms.bg_contrast_100)
} else { } else {
baseStyles.push(t.atoms.bg_contrast_100) baseStyles.push(t.atoms.bg_contrast_50)
} }
} else if (color === 'secondary_inverted') { } else if (color === 'secondary_inverted') {
if (!disabled) { if (!disabled) {
@@ -241,7 +241,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
backgroundColor: t.palette.contrast_900, backgroundColor: t.palette.contrast_900,
}) })
hoverStyles.push({ hoverStyles.push({
backgroundColor: t.palette.contrast_950, backgroundColor: t.palette.contrast_975,
}) })
} else { } else {
baseStyles.push({ baseStyles.push({
@@ -260,8 +260,8 @@ export const Button = React.forwardRef<View, ButtonProps>(
baseStyles.push({ baseStyles.push({
backgroundColor: select(t.name, { backgroundColor: select(t.name, {
light: t.palette.negative_700, light: t.palette.negative_700,
dim: t.palette.negative_300, dim: t.palette.negative_700,
dark: t.palette.negative_300, dark: t.palette.negative_700,
}), }),
}) })
} }
@@ -561,33 +561,29 @@ export function useSharedButtonTextStyles() {
if (!disabled) { if (!disabled) {
baseStyles.push({color: t.palette.white}) baseStyles.push({color: t.palette.white})
} else { } else {
baseStyles.push({color: t.palette.white, opacity: 0.5}) baseStyles.push({color: t.palette.white})
} }
} else if (color === 'secondary') { } else if (color === 'secondary') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push(t.atoms.text_contrast_medium)
color: t.palette.contrast_700,
})
} else { } else {
baseStyles.push({ baseStyles.push({
color: t.palette.contrast_400, color: t.palette.contrast_300,
}) })
} }
} else if (color === 'secondary_inverted') { } else if (color === 'secondary_inverted') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push(t.atoms.text_inverted)
color: t.palette.contrast_50,
})
} else { } else {
baseStyles.push({ baseStyles.push({
color: t.palette.contrast_400, color: t.palette.contrast_300,
}) })
} }
} else if (color === 'negative') { } else if (color === 'negative') {
if (!disabled) { if (!disabled) {
baseStyles.push({color: t.palette.white}) baseStyles.push({color: t.palette.white})
} else { } else {
baseStyles.push({color: t.palette.white, opacity: 0.5}) baseStyles.push({color: t.palette.negative_300})
} }
} else if (color === 'negative_secondary') { } else if (color === 'negative_secondary') {
if (!disabled) { if (!disabled) {
@@ -605,7 +601,6 @@ export function useSharedButtonTextStyles() {
dim: t.palette.negative_700, dim: t.palette.negative_700,
dark: t.palette.negative_700, dark: t.palette.negative_700,
}), }),
opacity: 0.5,
}) })
} }
} }
@@ -740,7 +735,7 @@ export function ButtonIcon({
position?: 'left' | 'right' position?: 'left' | 'right'
size?: SVGIconProps['size'] size?: SVGIconProps['size']
}) { }) {
const {size: buttonSize, disabled} = useButtonContext() const {size: buttonSize} = useButtonContext()
const textStyles = useSharedButtonTextStyles() const textStyles = useSharedButtonTextStyles()
const {iconSize, iconContainerSize} = React.useMemo(() => { const {iconSize, iconContainerSize} = React.useMemo(() => {
/** /**
@@ -793,7 +788,6 @@ export function ButtonIcon({
{ {
width: iconContainerSize, width: iconContainerSize,
height: iconContainerSize, height: iconContainerSize,
opacity: disabled ? 0.7 : 1,
}, },
]}> ]}>
<View <View