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

Revert "Playing around with curves"

Browse Source 
This reverts commit 6b0e0e5c9d.
This commit is contained in:
Eric Bailey
2024-01-04 10:46:48 -06:00
parent 6b0e0e5c9d
commit 85ebfc95d3
5 changed files with 53 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/themes.ts
+11 -17
View File
@@ -10,15 +10,15 @@ export type Palette = {
}
export const lightPalette: Palette = {
primary: tokens.color.blue_600,
positive: tokens.color.green_600,
negative: tokens.color.red_600,
primary: tokens.color.blue_500,
positive: tokens.color.green_500,
negative: tokens.color.red_500,
} as const
export const darkPalette: Palette = {
primary: tokens.color.blue_600,
positive: tokens.color.green_600,
negative: tokens.color.red_600,
primary: tokens.color.blue_500,
positive: tokens.color.green_400,
negative: tokens.color.red_400,
} as const
export const light = {
@@ -30,9 +30,6 @@ export const light = {
text_contrast_700: {
color: tokens.color.gray_700,
},
text_contrast_600: {
color: tokens.color.gray_600,
},
text_contrast_500: {
color: tokens.color.gray_500,
},
@@ -52,13 +49,13 @@ export const light = {
backgroundColor: tokens.color.gray_300,
},
bg_positive: {
backgroundColor: lightPalette.positive,
backgroundColor: tokens.color.green_500,
},
bg_negative: {
backgroundColor: lightPalette.negative,
backgroundColor: tokens.color.red_400,
},
border: {
borderColor: tokens.color.gray_300,
borderColor: tokens.color.gray_200,
},
border_contrast_500: {
borderColor: tokens.color.gray_500,
@@ -75,9 +72,6 @@ export const dark: Theme = {
text_contrast_700: {
color: tokens.color.gray_300,
},
text_contrast_600: {
color: tokens.color.gray_400,
},
text_contrast_500: {
color: tokens.color.gray_500,
},
@@ -97,10 +91,10 @@ export const dark: Theme = {
backgroundColor: tokens.color.gray_700,
},
bg_positive: {
backgroundColor: darkPalette.positive,
backgroundColor: tokens.color.green_400,
},
bg_negative: {
backgroundColor: darkPalette.negative,
backgroundColor: tokens.color.red_400,
},
border: {
borderColor: tokens.color.gray_800,
src/alf/tokens.ts
+1 -22
View File
@@ -1,9 +1,7 @@
const BLUE_HUE = 211
const GRAYSCALE_SATURATION = 22
export const color: {
[key: string]: string
} = {
export const color = {
white: '#FFFFFF',
gray_0: `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, 100%)`,
@@ -55,25 +53,6 @@ export const color: {
red_1000: `hsl(349, 96%, 5%)`,
}
function bezier(time: number, start: number, end: number, duration: number) {
if ((time /= duration / 2) < 1) return (end / 2) * time * time + start
return (-end / 2) * (--time * (time - 2) - 1) + start
}
for (let i = 0; i < 11; i++) {
const slope = bezier((i / 11) * 89, 0, 100, 100)
const percent = Math.ceil(100 - slope)
color[
`gray_${i * 100}`
] = `hsl(${BLUE_HUE}, ${GRAYSCALE_SATURATION}%, ${percent}%)`
color[`blue_${i * 100}`] = `hsl(${BLUE_HUE}, 99%, ${percent}%)`
color[`green_${i * 100}`] = `hsl(130, 60%, ${percent}%)`
color[`red_${i * 100}`] = `hsl(349, 90%, ${percent}%)`
}
console.log(color)
export const space = {
xxs: 2,
xs: 4,
src/view/com/Button.tsx
+4 -8
View File
@@ -1,7 +1,7 @@
import React from 'react'
import {Pressable, Text, PressableProps, TextProps} from 'react-native'
import * as tokens from '#/alf/tokens'
import {useTheme, atoms} from '#/alf'
import {atoms} from '#/alf'
export type ButtonType =
| 'primary'
@@ -34,7 +34,6 @@ export type ButtonProps = Omit<PressableProps, 'children'> &
export type ButtonTextProps = TextProps & VariantProps
export function Button({children, style, type, size, ...rest}: ButtonProps) {
const t = useTheme()
const {baseStyles, hoverStyles} = React.useMemo(() => {
const baseStyles = []
const hoverStyles = []
@@ -42,18 +41,15 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
switch (type) {
case 'primary':
baseStyles.push({
backgroundColor: t.palette.primary,
})
hoverStyles.push({
backgroundColor: tokens.color.blue_500,
})
break
case 'secondary':
baseStyles.push({
backgroundColor: tokens.color.gray_300,
backgroundColor: tokens.color.gray_200,
})
hoverStyles.push({
backgroundColor: tokens.color.gray_200,
backgroundColor: tokens.color.gray_100,
})
break
default:
@@ -83,7 +79,7 @@ export function Button({children, style, type, size, ...rest}: ButtonProps) {
baseStyles,
hoverStyles,
}
}, [type, size, t])
}, [type, size])
const [state, setState] = React.useState({
pressed: false,
src/view/com/Typography.tsx
+30 -6
View File
@@ -15,7 +15,11 @@ export function H1({style, ...rest}: TextProps) {
'aria-level': 1,
}) || {}
return (
<RNText {...attr} {...rest} style={[atoms.text_xl, t.atoms.text, style]} />
<RNText
{...attr}
{...rest}
style={[atoms.text_xl, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -27,7 +31,11 @@ export function H2({style, ...rest}: TextProps) {
'aria-level': 2,
}) || {}
return (
<RNText {...attr} {...rest} style={[atoms.text_lg, t.atoms.text, style]} />
<RNText
{...attr}
{...rest}
style={[atoms.text_lg, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -39,7 +47,11 @@ export function H3({style, ...rest}: TextProps) {
'aria-level': 3,
}) || {}
return (
<RNText {...attr} {...rest} style={[atoms.text_md, t.atoms.text, style]} />
<RNText
{...attr}
{...rest}
style={[atoms.text_md, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -51,7 +63,11 @@ export function H4({style, ...rest}: TextProps) {
'aria-level': 4,
}) || {}
return (
<RNText {...attr} {...rest} style={[atoms.text_sm, t.atoms.text, style]} />
<RNText
{...attr}
{...rest}
style={[atoms.text_sm, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -63,7 +79,11 @@ export function H5({style, ...rest}: TextProps) {
'aria-level': 5,
}) || {}
return (
<RNText {...attr} {...rest} style={[atoms.text_xs, t.atoms.text, style]} />
<RNText
{...attr}
{...rest}
style={[atoms.text_xs, atoms.font_bold, t.atoms.text, style]}
/>
)
}
@@ -75,6 +95,10 @@ export function H6({style, ...rest}: TextProps) {
'aria-level': 6,
}) || {}
return (
<RNText {...attr} {...rest} style={[atoms.text_xxs, t.atoms.text, style]} />
<RNText
{...attr}
{...rest}
style={[atoms.text_xxs, atoms.font_bold, t.atoms.text, style]}
/>
)
}
src/view/screens/DebugNew.tsx
+7 -5
View File
@@ -61,13 +61,15 @@ function ThemedSection() {
return (
<View style={[t.atoms.bg, a.gap_md, a.p_xl]}>
<H3 style={[]}>theme.atoms.text</H3>
<H3 style={[a.font_bold]}>theme.atoms.text</H3>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<H3 style={[t.atoms.text_contrast_700]}>theme.atoms.text_contrast_700</H3>
<H3 style={[a.font_bold, t.atoms.text_contrast_700]}>
theme.atoms.text_contrast_700
</H3>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<H3 style={[t.atoms.text_contrast_600]}>theme.atoms.text_contrast_600</H3>
<View style={[a.flex_1, t.atoms.border, a.border_t]} />
<H3 style={[t.atoms.text_contrast_500]}>theme.atoms.text_contrast_500</H3>
<H3 style={[a.font_bold, t.atoms.text_contrast_500]}>
theme.atoms.text_contrast_500
</H3>
<View style={[a.flex_1, t.atoms.border_contrast_500, a.border_t]} />
<View style={[a.flex_row, a.gap_md]}>