[Neue] Font weights (#5442)
* Align all font weights * Only load necessary fonts * Also comment out from hook
This commit is contained in:
Eric Bailey
@@ -86,7 +86,7 @@ export function LikeCount({count}: {count: number}) {
|
||||
a.mt_sm,
|
||||
a.text_sm,
|
||||
t.atoms.text_contrast_medium,
|
||||
{fontWeight: '500'},
|
||||
{fontWeight: '600'},
|
||||
]}>
|
||||
<Plural value={count} one="Liked by # user" other="Liked by # users" />
|
||||
</Text>
|
||||
|
||||
@@ -170,6 +170,6 @@ const styles = StyleSheet.create({
|
||||
alt: {
|
||||
color: 'white',
|
||||
fontSize: 7,
|
||||
fontWeight: 'bold',
|
||||
fontWeight: '600',
|
||||
},
|
||||
})
|
||||
|
||||
@@ -132,7 +132,7 @@ export function Label({
|
||||
<Text
|
||||
style={[
|
||||
text,
|
||||
a.font_semibold,
|
||||
a.font_bold,
|
||||
a.leading_tight,
|
||||
t.atoms.text_contrast_medium,
|
||||
{paddingRight: 3},
|
||||
|
||||
@@ -26,7 +26,7 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
|
||||
<Text
|
||||
style={[
|
||||
t.atoms.text_contrast_medium,
|
||||
a.font_semibold,
|
||||
a.font_bold,
|
||||
a.text_sm,
|
||||
{textTransform: 'uppercase'},
|
||||
]}>
|
||||
|
||||
@@ -35,9 +35,7 @@ export function ProgressGuideTask({
|
||||
)}
|
||||
|
||||
<View style={[a.flex_col, a.gap_2xs, {marginTop: -2}]}>
|
||||
<Text style={[a.text_sm, a.font_semibold, a.leading_tight]}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text style={[a.text_sm, a.font_bold, a.leading_tight]}>{title}</Text>
|
||||
{subtitle && (
|
||||
<Text
|
||||
style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}>
|
||||
|
||||
@@ -154,7 +154,7 @@ export const ProgressGuideToast = React.forwardRef<
|
||||
ref={animatedCheckRef}
|
||||
/>
|
||||
<View>
|
||||
<Text style={[a.text_md, a.font_semibold]}>{title}</Text>
|
||||
<Text style={[a.text_md, a.font_bold]}>{title}</Text>
|
||||
{subtitle && (
|
||||
<Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
|
||||
{subtitle}
|
||||
|
||||
@@ -77,8 +77,7 @@ function LabelerButton({
|
||||
handle: labeler.creator.handle,
|
||||
})}
|
||||
/>
|
||||
<Text
|
||||
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semibold]}>
|
||||
<Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
|
||||
@{labeler.creator.handle}
|
||||
</Text>
|
||||
</LabelingServiceCard.Content>
|
||||
|
||||
@@ -491,9 +491,7 @@ function Selectable({
|
||||
},
|
||||
style,
|
||||
]}>
|
||||
<Text style={[a.text_sm, isSelected && a.font_semibold]}>
|
||||
{label}
|
||||
</Text>
|
||||
<Text style={[a.text_sm, isSelected && a.font_bold]}>{label}</Text>
|
||||
{isSelected ? (
|
||||
<Check size="sm" fill={t.palette.primary_500} />
|
||||
) : (
|
||||
|
||||
@@ -48,7 +48,7 @@ export function NeueTypography() {
|
||||
<Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
|
||||
<View style={[a.gap_xl]}>
|
||||
<View style={[a.gap_md]}>
|
||||
<Text style={[a.text_3xl, {fontWeight: '900'}]}>
|
||||
<Text style={[a.text_3xl, a.font_heavy]}>
|
||||
<Trans>New font settings ✨</Trans>
|
||||
</Text>
|
||||
<Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}>
|
||||
|
||||
@@ -19,10 +19,10 @@ import {isIOS, isNative} from '#/platform/detection'
|
||||
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
||||
import {useProfileQuery} from '#/state/queries/profile'
|
||||
import {useAgent, useSession} from '#/state/session'
|
||||
import {useComposerControls} from 'state/shell'
|
||||
import {useComposerControls} from '#/state/shell'
|
||||
import {formatCount} from '#/view/com/util/numeric/format'
|
||||
import * as Toast from '#/view/com/util/Toast'
|
||||
import {Logomark} from '#/view/icons/Logomark'
|
||||
import * as Toast from 'view/com/util/Toast'
|
||||
import {
|
||||
atoms as a,
|
||||
ThemeProvider,
|
||||
@@ -441,10 +441,10 @@ export function TenMillionInner({
|
||||
allowFontScaling={false}
|
||||
style={[
|
||||
a.absolute,
|
||||
a.font_heavy,
|
||||
{
|
||||
color: t.palette.primary_500,
|
||||
fontSize: 32,
|
||||
fontWeight: '900',
|
||||
width: 32,
|
||||
top: isNative ? -10 : 0,
|
||||
left: 0,
|
||||
@@ -462,11 +462,11 @@ export function TenMillionInner({
|
||||
style={[
|
||||
a.relative,
|
||||
a.text_center,
|
||||
a.font_heavy,
|
||||
{
|
||||
fontStyle: 'italic',
|
||||
fontSize: getFontSize(userNumber),
|
||||
lineHeight: getFontSize(userNumber),
|
||||
fontWeight: '900',
|
||||
letterSpacing: -2,
|
||||
},
|
||||
]}>
|
||||
@@ -536,7 +536,7 @@ export function TenMillionInner({
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.text_sm,
|
||||
a.font_semibold,
|
||||
a.font_bold,
|
||||
a.leading_snug,
|
||||
lightTheme.atoms.text_contrast_medium,
|
||||
]}>
|
||||
@@ -551,7 +551,7 @@ export function TenMillionInner({
|
||||
style={[
|
||||
a.flex_1,
|
||||
a.text_sm,
|
||||
a.font_semibold,
|
||||
a.font_bold,
|
||||
a.leading_snug,
|
||||
a.text_right,
|
||||
lightTheme.atoms.text_contrast_low,
|
||||
@@ -643,14 +643,7 @@ export function TenMillionInner({
|
||||
<View style={[gtMobile ? a.p_2xl : a.p_xl]}>
|
||||
<Text
|
||||
allowFontScaling={false}
|
||||
style={[
|
||||
a.text_5xl,
|
||||
a.leading_tight,
|
||||
a.pb_lg,
|
||||
{
|
||||
fontWeight: '900',
|
||||
},
|
||||
]}>
|
||||
style={[a.text_5xl, a.leading_tight, a.pb_lg, a.font_heavy]}>
|
||||
<Trans>Thanks for being one of our first 10 million users.</Trans>
|
||||
</Text>
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@ export function ContentHider({
|
||||
a.text_left,
|
||||
a.font_bold,
|
||||
a.leading_snug,
|
||||
gtMobile && [a.font_semibold],
|
||||
gtMobile && [a.font_bold],
|
||||
t.atoms.text_contrast_medium,
|
||||
web({
|
||||
marginBottom: 1,
|
||||
@@ -107,7 +107,7 @@ export function ContentHider({
|
||||
style={[
|
||||
a.font_bold,
|
||||
a.leading_snug,
|
||||
gtMobile && [a.font_semibold],
|
||||
gtMobile && [a.font_bold],
|
||||
t.atoms.text_contrast_high,
|
||||
web({
|
||||
marginBottom: 1,
|
||||
|
||||
@@ -236,8 +236,7 @@ export function LabelerLabelPreference({
|
||||
<View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}>
|
||||
<CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} />
|
||||
|
||||
<Text
|
||||
style={[t.atoms.text_contrast_medium, a.font_semibold, a.italic]}>
|
||||
<Text style={[t.atoms.text_contrast_medium, a.font_bold, a.italic]}>
|
||||
{adultDisabled ? (
|
||||
<Trans>Adult content is disabled.</Trans>
|
||||
) : isGlobalLabel ? (
|
||||
|
||||
@@ -10,9 +10,9 @@ import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {useNavigation} from '@react-navigation/native'
|
||||
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
|
||||
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
||||
import {NavigationProp} from 'lib/routes/types'
|
||||
import {NavigationProp} from '#/lib/routes/types'
|
||||
import {CenteredView} from '#/view/com/util/Views'
|
||||
import {atoms as a, useTheme, web} from '#/alf'
|
||||
import {Button, ButtonText} from '#/components/Button'
|
||||
@@ -86,13 +86,7 @@ export function ScreenHider({
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={[
|
||||
a.text_4xl,
|
||||
a.font_semibold,
|
||||
a.text_center,
|
||||
a.mb_md,
|
||||
t.atoms.text,
|
||||
]}>
|
||||
style={[a.text_4xl, a.font_bold, a.text_center, a.mb_md, t.atoms.text]}>
|
||||
{isNoPwi ? (
|
||||
<Trans>Sign-in Required</Trans>
|
||||
) : (
|
||||
@@ -118,7 +112,7 @@ export function ScreenHider({
|
||||
<Text
|
||||
style={[
|
||||
a.text_lg,
|
||||
a.font_semibold,
|
||||
a.font_bold,
|
||||
a.leading_snug,
|
||||
t.atoms.text,
|
||||
a.ml_xs,
|
||||
|
||||
Reference in New Issue
Block a user