zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Theme tweaks (#3004)

Browse source 
* Improve contrast using existing scale

* Make it mathy

* Tweaks

* Adjust noty

* Remove console

* Cleanup

* Match saturation

* Replace usages of tokens with correct palette

(cherry picked from commit 1d9c7079dc25dfa492bd482c1c7661ea2e822d68)

* Replace other colors, tweak usages

(cherry picked from commit df97f249b2f140bbc010449fddb011a31795919a)

* Last couple things

(cherry picked from commit 3b5cee131f68ea8f4125f2c32b9a4b20f5b91086)

* fix "Users" being the wrong color on user list about

---------

Co-authored-by: Hailey <me@haileyok.com>
This commit is contained in:
Eric Bailey 2024-03-01 18:06:59 -06:00 • committed by GitHub
parent 411061ea32
commit 2962862de2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 199 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/Button.tsx
View file

@ -165,7 +165,7 @@ export function Button({
if (!disabled) {
baseStyles.push(a.border, {
borderColor: tokens.color.blue_500,
borderColor: t.palette.primary_500,
})
hoverStyles.push(a.border, {
backgroundColor: light
@ -174,7 +174,7 @@ export function Button({
})
} else {
baseStyles.push(a.border, {
borderColor: light ? tokens.color.blue_200 : tokens.color.blue_900,
borderColor: light ? t.palette.primary_200 : t.palette.primary_900,
})
}
} else if (variant === 'ghost') {
@ -191,20 +191,14 @@ export function Button({
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: light
? tokens.color.gray_50
: tokens.color.gray_900,
backgroundColor: t.palette.contrast_50,
})
hoverStyles.push({
backgroundColor: light
? tokens.color.gray_100
: tokens.color.gray_950,
backgroundColor: t.palette.contrast_100,
})
} else {
baseStyles.push({
backgroundColor: light
? tokens.color.gray_200
: tokens.color.gray_950,
backgroundColor: t.palette.contrast_200,
})
}
} else if (variant === 'outline') {
@ -214,21 +208,19 @@ export function Button({
if (!disabled) {
baseStyles.push(a.border, {
borderColor: light ? tokens.color.gray_300 : tokens.color.gray_700,
borderColor: t.palette.contrast_300,
})
hoverStyles.push(a.border, t.atoms.bg_contrast_50)
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push(a.border, {
borderColor: light ? tokens.color.gray_200 : tokens.color.gray_800,
borderColor: t.palette.contrast_200,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push(t.atoms.bg)
hoverStyles.push({
backgroundColor: light
? tokens.color.gray_100
: tokens.color.gray_900,
backgroundColor: t.palette.contrast_100,
})
}
}
@ -236,14 +228,14 @@ export function Button({
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: t.palette.negative_400,
backgroundColor: t.palette.negative_500,
})
hoverStyles.push({
backgroundColor: t.palette.negative_500,
backgroundColor: t.palette.negative_600,
})
} else {
baseStyles.push({
backgroundColor: t.palette.negative_600,
backgroundColor: t.palette.negative_700,
})
}
} else if (variant === 'outline') {
@ -253,7 +245,7 @@ export function Button({
if (!disabled) {
baseStyles.push(a.border, {
borderColor: t.palette.negative_400,
borderColor: t.palette.negative_500,
})
hoverStyles.push(a.border, {
backgroundColor: light
@ -273,7 +265,7 @@ export function Button({
hoverStyles.push({
backgroundColor: light
? t.palette.negative_100
: t.palette.negative_950,
: t.palette.negative_975,
})
}
}
@ -461,31 +453,31 @@ export function useSharedButtonTextStyles() {
if (variant === 'solid' || variant === 'gradient') {
if (!disabled) {
baseStyles.push({
color: light ? tokens.color.gray_700 : tokens.color.gray_100,
color: t.palette.contrast_700,
})
} else {
baseStyles.push({
color: light ? tokens.color.gray_400 : tokens.color.gray_700,
color: t.palette.contrast_400,
})
}
} else if (variant === 'outline') {
if (!disabled) {
baseStyles.push({
color: light ? tokens.color.gray_600 : tokens.color.gray_300,
color: t.palette.contrast_600,
})
} else {
baseStyles.push({
color: light ? tokens.color.gray_400 : tokens.color.gray_700,
color: t.palette.contrast_300,
})
}
} else if (variant === 'ghost') {
if (!disabled) {
baseStyles.push({
color: light ? tokens.color.gray_600 : tokens.color.gray_300,
color: t.palette.contrast_600,
})
} else {
baseStyles.push({
color: light ? tokens.color.gray_400 : tokens.color.gray_600,
color: t.palette.contrast_300,
})
}
}

4
src/components/forms/TextField.tsx
View file

@ -10,7 +10,7 @@ import {
} from 'react-native'
import {HITSLOP_20} from 'lib/constants'
import {useTheme, atoms as a, web, tokens, android} from '#/alf'
import {useTheme, atoms as a, web, android} from '#/alf'
import {Text} from '#/components/Typography'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {Props as SVGIconProps} from '#/components/icons/common'
@ -110,7 +110,7 @@ export function useSharedInputStyles() {
{
backgroundColor:
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
borderColor: tokens.color.red_500,
borderColor: t.palette.negative_500,
},
]

4
src/components/forms/Toggle.tsx
View file

@ -301,7 +301,7 @@ export function createSharedToggleStyles({
if (isInvalid) {
base.push({
backgroundColor:
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_975,
borderColor:
t.name === 'light' ? t.palette.negative_300 : t.palette.negative_800,
})
@ -310,7 +310,7 @@ export function createSharedToggleStyles({
baseHover.push({
backgroundColor:
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
borderColor: t.palette.negative_500,
borderColor: t.palette.negative_600,
})
}
}