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

Button tweaks, some theme diffs

Browse Source
This commit is contained in:
Eric Bailey
2024-07-11 13:52:37 -05:00
parent 03e0a44b09
commit 414167c3cb
2 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Button.tsx
+22 -6
View File
@@ -13,7 +13,7 @@ import {
} from 'react-native'
import {LinearGradient} from 'expo-linear-gradient'
import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'
import {android, atoms as a, flatten, select, tokens, useTheme} from '#/alf'
import {Props as SVGIconProps} from '#/components/icons/common'
import {normalizeTextStyles} from '#/components/Typography'
@@ -164,7 +164,11 @@ export const Button = React.forwardRef<View, ButtonProps>(
})
} else {
baseStyles.push({
backgroundColor: t.palette.primary_300,
backgroundColor: select(t.name, {
light: t.palette.primary_700,
dim: t.palette.primary_300,
dark: t.palette.primary_300,
}),
})
}
} else if (variant === 'outline') {
@@ -196,14 +200,26 @@ export const Button = React.forwardRef<View, ButtonProps>(
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.contrast_100,
backgroundColor: select(t.name, {
light: t.palette.contrast_25,
dim: t.palette.contrast_100,
dark: t.palette.contrast_100,
}),
})
hoverStyles.push({
backgroundColor: t.palette.contrast_200,
backgroundColor: select(t.name, {
light: t.palette.contrast_50,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
})
} else {
baseStyles.push({
backgroundColor: t.palette.contrast_25,
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_25,
dark: t.palette.contrast_25,
}),
})
}
} else if (variant === 'outline') {
@@ -240,7 +256,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
})
} else {
baseStyles.push({
backgroundColor: t.palette.contrast_700,
backgroundColor: t.palette.contrast_600,
})
}
} else if (variant === 'outline') {
src/view/screens/Storybook/Buttons.tsx
+27 -23
View File
@@ -20,29 +20,31 @@ export function Buttons() {
<H1>Buttons</H1>
<View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
{['primary', 'secondary', 'secondary_inverted'].map(color => (
<View key={color} style={[a.gap_md, a.align_start]}>
{['solid', 'outline', 'ghost'].map(variant => (
<React.Fragment key={variant}>
<Button
variant={variant as ButtonVariant}
color={color as ButtonColor}
size="large"
label="Click here">
<ButtonText>Button</ButtonText>
</Button>
<Button
disabled
variant={variant as ButtonVariant}
color={color as ButtonColor}
size="large"
label="Click here">
<ButtonText>Button</ButtonText>
</Button>
</React.Fragment>
))}
</View>
))}
{['primary', 'secondary', 'secondary_inverted', 'negative'].map(
color => (
<View key={color} style={[a.gap_md, a.align_start]}>
{['solid', 'outline', 'ghost'].map(variant => (
<React.Fragment key={variant}>
<Button
variant={variant as ButtonVariant}
color={color as ButtonColor}
size="large"
label="Click here">
<ButtonText>Button</ButtonText>
</Button>
<Button
disabled
variant={variant as ButtonVariant}
color={color as ButtonColor}
size="large"
label="Click here">
<ButtonText>Button</ButtonText>
</Button>
</React.Fragment>
))}
</View>
),
)}
<View style={[a.flex_row, a.gap_md, a.align_start]}>
<View style={[a.gap_md, a.align_start]}>
@@ -68,6 +70,7 @@ export function Buttons() {
),
)}
</View>
{/*
<View style={[a.gap_md, a.align_start]}>
{['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map(
name => (
@@ -91,6 +94,7 @@ export function Buttons() {
),
)}
</View>
*/}
</View>
</View>