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

[Neue] Font weights (#5442)

Browse Source 
* Align all font weights

* Only load necessary fonts

* Also comment out from hook
This commit is contained in:
Eric Bailey
2024-09-20 17:29:58 -05:00
committed by GitHub
parent 4161e23320
commit 7e2456b906
58 changed files with 362 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/util/forms/Button.tsx
+15 -14
View File
@@ -1,20 +1,21 @@
import React from 'react'
import {
ActivityIndicator,
GestureResponderEvent,
NativeSyntheticEvent,
NativeTouchEvent,
Pressable,
PressableStateCallbackType,
StyleProp,
StyleSheet,
TextStyle,
Pressable,
ViewStyle,
PressableStateCallbackType,
ActivityIndicator,
View,
NativeSyntheticEvent,
NativeTouchEvent,
ViewStyle,
} from 'react-native'
import {choose} from '#/lib/functions'
import {useTheme} from '#/lib/ThemeContext'
import {Text} from '../text/Text'
import {useTheme} from 'lib/ThemeContext'
import {choose} from 'lib/functions'
export type ButtonType =
| 'primary'
@@ -112,7 +113,7 @@ export function Button({
},
secondary: {
color: theme.palette.secondary.text,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
default: {
color: theme.palette.default.text,
@@ -123,23 +124,23 @@ export function Button({
},
'primary-outline': {
color: theme.palette.primary.textInverted,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
'secondary-outline': {
color: theme.palette.secondary.textInverted,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
'primary-light': {
color: theme.palette.primary.textInverted,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
'secondary-light': {
color: theme.palette.secondary.textInverted,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
'default-light': {
color: theme.palette.default.text,
fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
},
},
)
src/view/com/util/forms/DropdownButton.tsx
+6 -6
View File
@@ -17,11 +17,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {HITSLOP_10} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {colors} from 'lib/styles'
import {useTheme} from 'lib/ThemeContext'
import {isWeb} from 'platform/detection'
import {HITSLOP_10} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette'
import {colors} from '#/lib/styles'
import {useTheme} from '#/lib/ThemeContext'
import {isWeb} from '#/platform/detection'
import {native} from '#/alf'
import {FullWindowOverlay} from '#/components/FullWindowOverlay'
import {Text} from '../text/Text'
@@ -382,6 +382,6 @@ const styles = StyleSheet.create({
},
headingLabel: {
fontSize: 18,
fontWeight: '500',
fontWeight: '600',
},
})
src/view/com/util/forms/NativeDropdown.web.tsx
+4 -4
View File
@@ -5,9 +5,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import {MenuItemCommonProps} from 'zeego/lib/typescript/menu'
import {HITSLOP_10} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
import {HITSLOP_10} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette'
import {useTheme} from '#/lib/ThemeContext'
// Custom Dropdown Menu Components
// ==
@@ -267,7 +267,7 @@ const styles = StyleSheet.create({
},
itemTitle: {
fontSize: 16,
fontWeight: '500',
fontWeight: '600',
paddingRight: 10,
},
})
src/view/com/util/forms/RadioButton.tsx
+11 -11
View File
@@ -1,8 +1,8 @@
import React from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import {choose} from 'lib/functions'
import {useTheme} from 'lib/ThemeContext'
import {choose} from '#/lib/functions'
import {useTheme} from '#/lib/ThemeContext'
import {Text} from '../text/Text'
import {Button, ButtonType} from './Button'
@@ -86,39 +86,39 @@ export function RadioButton({
const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
primary: {
color: theme.palette.primary.text,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
secondary: {
color: theme.palette.secondary.text,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
inverted: {
color: theme.palette.inverted.text,
fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
},
'primary-outline': {
color: theme.palette.primary.textInverted,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
'secondary-outline': {
color: theme.palette.secondary.textInverted,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
'primary-light': {
color: theme.palette.primary.textInverted,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
'secondary-light': {
color: theme.palette.secondary.textInverted,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
default: {
color: theme.palette.default.text,
fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
},
'default-light': {
color: theme.palette.default.text,
fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
},
})
return (
src/view/com/util/forms/ToggleButton.tsx
+14 -13
View File
@@ -1,11 +1,12 @@
import React from 'react'
import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
import {choose} from '#/lib/functions'
import {colors} from '#/lib/styles'
import {useTheme} from '#/lib/ThemeContext'
import {TypographyVariant} from '#/lib/ThemeContext'
import {Text} from '../text/Text'
import {Button, ButtonType} from './Button'
import {useTheme} from 'lib/ThemeContext'
import {choose} from 'lib/functions'
import {colors} from 'lib/styles'
import {TypographyVariant} from 'lib/ThemeContext'
export function ToggleButton({
testID,
@@ -100,39 +101,39 @@ export function ToggleButton({
const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
primary: {
color: theme.palette.primary.text,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
secondary: {
color: theme.palette.secondary.text,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
inverted: {
color: theme.palette.inverted.text,
fontWeight: theme.palette.inverted.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
},
'primary-outline': {
color: theme.palette.primary.textInverted,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
'secondary-outline': {
color: theme.palette.secondary.textInverted,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
'primary-light': {
color: theme.palette.primary.textInverted,
fontWeight: theme.palette.primary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
},
'secondary-light': {
color: theme.palette.secondary.textInverted,
fontWeight: theme.palette.secondary.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
},
default: {
color: theme.palette.default.text,
fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
},
'default-light': {
color: theme.palette.default.text,
fontWeight: theme.palette.default.isLowContrast ? '500' : undefined,
fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
},
})
return (