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

Fork text styles codepath to make variant deprecation more obvious

Browse Source
This commit is contained in:
Eric Bailey
2025-07-30 16:11:54 -05:00
parent 224d5dd72d
commit 4d1e8f7860
1 changed files with 105 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+66 -51
View File
@@ -545,14 +545,70 @@ export function useSharedButtonTextStyles() {
return React.useMemo(() => { return React.useMemo(() => {
const baseStyles: TextStyle[] = [] const baseStyles: TextStyle[] = []
if (color === 'primary') { /*
* This is the happy path for new button styles, following the
* deprecation of `variant` prop. This redundant `variant` check is here
* just to make this handling easier to understand.
*/
if (variant === 'solid') { if (variant === 'solid') {
if (color === 'primary') {
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, opacity: 0.5})
} }
} else if (variant === 'outline') { } else if (color === 'secondary') {
if (!disabled) {
baseStyles.push({
color: t.palette.contrast_700,
})
} else {
baseStyles.push({
color: t.palette.contrast_400,
})
}
} else if (color === 'secondary_inverted') {
if (!disabled) {
baseStyles.push({
color: t.palette.contrast_50,
})
} else {
baseStyles.push({
color: t.palette.contrast_400,
})
}
} else if (color === 'negative') {
if (!disabled) {
baseStyles.push({color: t.palette.white})
} else {
baseStyles.push({color: t.palette.white, opacity: 0.5})
}
} else if (color === 'negative_secondary') {
if (!disabled) {
baseStyles.push({
color: select(t.name, {
light: t.palette.negative_500,
dim: t.palette.negative_950,
dark: t.palette.negative_900,
}),
})
} else {
baseStyles.push({
color: select(t.name, {
light: t.palette.negative_500,
dim: t.palette.negative_700,
dark: t.palette.negative_700,
}),
opacity: 0.5,
})
}
}
} else {
/*
* BEGIN DEPRECATED STYLES
*/
if (color === 'primary') {
if (variant === 'outline') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
color: t.palette.primary_600, color: t.palette.primary_600,
@@ -568,17 +624,7 @@ export function useSharedButtonTextStyles() {
} }
} }
} else if (color === 'secondary') { } else if (color === 'secondary') {
if (variant === 'solid') { if (variant === 'outline') {
if (!disabled) {
baseStyles.push({
color: t.palette.contrast_700,
})
} else {
baseStyles.push({
color: t.palette.contrast_400,
})
}
} else if (variant === 'outline') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
color: t.palette.contrast_600, color: t.palette.contrast_600,
@@ -600,17 +646,7 @@ export function useSharedButtonTextStyles() {
} }
} }
} else if (color === 'secondary_inverted') { } else if (color === 'secondary_inverted') {
if (variant === 'solid') { if (variant === 'outline') {
if (!disabled) {
baseStyles.push({
color: t.palette.contrast_50,
})
} else {
baseStyles.push({
color: t.palette.contrast_400,
})
}
} else if (variant === 'outline') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
color: t.palette.contrast_600, color: t.palette.contrast_600,
@@ -632,13 +668,7 @@ export function useSharedButtonTextStyles() {
} }
} }
} else if (color === 'negative') { } else if (color === 'negative') {
if (variant === 'solid') { if (variant === 'outline') {
if (!disabled) {
baseStyles.push({color: t.palette.white})
} else {
baseStyles.push({color: t.palette.white, opacity: 0.5})
}
} else if (variant === 'outline') {
if (!disabled) { if (!disabled) {
baseStyles.push({color: t.palette.negative_400}) baseStyles.push({color: t.palette.negative_400})
} else { } else {
@@ -652,26 +682,7 @@ export function useSharedButtonTextStyles() {
} }
} }
} else if (color === 'negative_secondary') { } else if (color === 'negative_secondary') {
if (variant === 'solid') { if (variant === 'outline') {
if (!disabled) {
baseStyles.push({
color: select(t.name, {
light: t.palette.negative_500,
dim: t.palette.negative_950,
dark: t.palette.negative_900,
}),
})
} else {
baseStyles.push({
color: select(t.name, {
light: t.palette.negative_500,
dim: t.palette.negative_700,
dark: t.palette.negative_700,
}),
opacity: 0.5,
})
}
} else if (variant === 'outline') {
if (!disabled) { if (!disabled) {
baseStyles.push({color: t.palette.negative_400}) baseStyles.push({color: t.palette.negative_400})
} else { } else {
@@ -685,6 +696,10 @@ export function useSharedButtonTextStyles() {
} }
} }
} }
/*
* END DEPRECATED STYLES
*/
}
if (size === 'large') { if (size === 'large') {
baseStyles.push(a.text_md, a.leading_tight) baseStyles.push(a.text_md, a.leading_tight)