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

Design system tweaks (#2822)

Browse source 
* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages
This commit is contained in:
Eric Bailey 2024-02-09 11:52:32 -06:00 • committed by GitHub
parent 43b447e5f4
commit d6235453c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 276 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -241,7 +241,8 @@ export const Input = createInput(TextInput)
export function Label({children}: React.PropsWithChildren<{}>) {
const t = useTheme()
return (
<Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_600, a.mb_sm]}>
<Text
style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}>
{children}
</Text>
)
@ -315,7 +316,7 @@ export function Suffix({
a.z_20,
a.pr_sm,
a.text_md,
t.atoms.text_contrast_400,
t.atoms.text_contrast_medium,
{
pointerEvents: 'none',
},

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

@ -347,7 +347,7 @@ export function Checkbox() {
a.align_center,
a.border,
a.rounded_xs,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 20,
@ -393,7 +393,7 @@ export function Switch() {
a.border,
a.rounded_full,
t.atoms.bg,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 30,
@ -445,7 +445,7 @@ export function Radio() {
a.align_center,
a.border,
a.rounded_full,
t.atoms.border_contrast,
t.atoms.border_contrast_high,
{
height: 20,
width: 20,

6
src/components/forms/ToggleButton.tsx
View file

@ -25,7 +25,7 @@ export function Group({children, multiple, ...props}: GroupProps) {
a.border,
a.rounded_sm,
a.overflow_hidden,
t.atoms.border,
t.atoms.border_contrast_low,
]}>
{children}
</View>
@ -103,7 +103,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
}),
a.px_sm,
t.atoms.bg,
t.atoms.border,
t.atoms.border_contrast_low,
baseStyles,
activeStyles,
(state.hovered || state.focused || state.pressed) && hoverStyles,
@ -113,7 +113,7 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
style={[
a.text_center,
a.font_bold,
t.atoms.text_contrast_500,
t.atoms.text_contrast_medium,
textStyles,
]}>
{children}