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

Gradient colors and hovers

Browse Source
This commit is contained in:
Eric Bailey
2024-01-16 10:41:35 -06:00
parent 56a139ed4b
commit ce049f1e1b
3 changed files with 154 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/tokens.ts
+50
View File
@@ -98,6 +98,56 @@ export const fontWeight = {
bold: '900',
} as const
export const gradients = {
sky: {
values: [
[0, '#0A7AFF'],
[1, '#59B9FF'],
],
hover_value: '#0A7AFF',
},
midnight: {
values: [
[0, '#022C5E'],
[1, '#4079BC'],
],
hover_value: '#022C5E',
},
sunrise: {
values: [
[0, '#4E90AE'],
[0.4, '#AEA3AB'],
[0.8, '#E6A98F'],
[1, '#F3A84C'],
],
hover_value: '#AEA3AB',
},
sunset: {
values: [
[0, '#6772AF'],
[0.6, '#B88BB6'],
[1, '#FFA6AC'],
],
hover_value: '#B88BB6',
},
nordic: {
values: [
[0, '#083367'],
[1, '#9EE8C1'],
],
hover_value: '#3A7085',
},
bonfire: {
values: [
[0, '#203E4E'],
[0.4, '#755B62'],
[0.8, '#CD7765'],
[1, '#EF956E'],
],
hover_value: '#755B62',
},
} as const
export type Color = keyof typeof color
export type Space = keyof typeof space
export type FontSize = keyof typeof fontSize
src/components/Button.tsx
+51 -5
View File
@@ -12,7 +12,16 @@ import LinearGradient from 'react-native-linear-gradient'
import {useTheme, atoms, tokens, web, native} from '#/alf'
export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
export type ButtonColor = 'primary' | 'secondary' | 'negative'
export type ButtonColor =
| 'primary'
| 'secondary'
| 'negative'
| 'gradient_sky'
| 'gradient_midnight'
| 'gradient_sunrise'
| 'gradient_sunset'
| 'gradient_nordic'
| 'gradient_bonfire'
export type ButtonSize = 'small' | 'large'
export type VariantProps = {
/**
@@ -270,6 +279,36 @@ export function Button({
}
}, [t, variant, color, size, disabled])
const {gradientColors, gradientHoverColors, gradientLocations} =
React.useMemo(() => {
const colors: string[] = []
const hoverColors: string[] = []
const locations: number[] = []
const gradient = {
primary: tokens.gradients.sky,
secondary: tokens.gradients.sky,
negative: tokens.gradients.sky,
gradient_sky: tokens.gradients.sky,
gradient_midnight: tokens.gradients.midnight,
gradient_sunrise: tokens.gradients.sunrise,
gradient_sunset: tokens.gradients.sunset,
gradient_nordic: tokens.gradients.nordic,
gradient_bonfire: tokens.gradients.bonfire,
}[color || 'primary']
if (variant === 'gradient') {
colors.push(...gradient.values.map(([_, color]) => color))
hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
locations.push(...gradient.values.map(([location, _]) => location))
}
return {
gradientColors: colors,
gradientHoverColors: hoverColors,
gradientLocations: locations,
}
}, [variant, color])
const childProps = React.useMemo(
() => ({
state,
@@ -311,10 +350,11 @@ export function Button({
{variant === 'gradient' && (
<LinearGradient
colors={
state.hovered
? [t.palette.primary_700, t.palette.primary_500]
: [t.palette.primary_600, t.palette.primary_400]
state.hovered || state.pressed || state.focused
? gradientHoverColors
: gradientColors
}
locations={gradientLocations}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[atoms.absolute, atoms.inset_0]}
@@ -353,7 +393,7 @@ export function ButtonText({
const light = t.name === 'light'
if (color === 'primary') {
if (variant === 'solid' || variant === 'gradient') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({color: t.palette.white})
} else {
@@ -426,6 +466,12 @@ export function ButtonText({
baseStyles.push({color: t.palette.negative_500, opacity: 0.5})
}
}
} else {
if (!disabled) {
baseStyles.push({color: t.palette.white})
} else {
baseStyles.push({color: t.palette.white, opacity: 0.5})
}
}
if (size === 'large') {
src/view/screens/Storybook/Buttons.tsx
+53 -9
View File
@@ -10,7 +10,7 @@ export function Buttons() {
<View style={[a.gap_md]}>
<H1>Buttons</H1>
<View style={[a.flex_row, a.gap_md, a.align_start]}>
<View style={[a.flex_row, a.flex_wrap, a.gap_md, a.align_start]}>
{['primary', 'secondary', 'negative'].map(color => (
<View key={color} style={[a.gap_md, a.align_start]}>
{['solid', 'outline', 'ghost'].map(variant => (
@@ -37,14 +37,58 @@ export function Buttons() {
</View>
))}
<Button
variant="gradient"
color="primary"
size="large"
accessibilityLabel="Click here"
accessibilityHint="Opens something">
Button
</Button>
<View style={[a.flex_row, a.gap_md, a.align_start]}>
<View style={[a.gap_md, a.align_start]}>
{['gradient_sky', 'gradient_midnight', 'gradient_sunrise'].map(
name => (
<React.Fragment key={name}>
<Button
variant="gradient"
color={name as ButtonColor}
size="large"
accessibilityLabel="Click here"
accessibilityHint="Opens something">
Button
</Button>
<Button
disabled
variant="gradient"
color={name as ButtonColor}
size="large"
accessibilityLabel="Click here"
accessibilityHint="Opens something">
Button
</Button>
</React.Fragment>
),
)}
</View>
<View style={[a.gap_md, a.align_start]}>
{['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map(
name => (
<React.Fragment key={name}>
<Button
variant="gradient"
color={name as ButtonColor}
size="large"
accessibilityLabel="Click here"
accessibilityHint="Opens something">
Button
</Button>
<Button
disabled
variant="gradient"
color={name as ButtonColor}
size="large"
accessibilityLabel="Click here"
accessibilityHint="Opens something">
Button
</Button>
</React.Fragment>
),
)}
</View>
</View>
</View>
</View>
)