diff --git a/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..949eba697b --- /dev/null +++ b/assets/icons/aspectRatio11_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..50761a05c5 --- /dev/null +++ b/assets/icons/aspectRatio34_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg b/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..4ca8362e94 --- /dev/null +++ b/assets/icons/aspectRatio43_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg b/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..0d4c81d2c1 --- /dev/null +++ b/assets/icons/flipHorizontal_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/flipVertical_stroke2_corner0_rounded.svg b/assets/icons/flipVertical_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..42fca985c5 --- /dev/null +++ b/assets/icons/flipVertical_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 81717b9418..b0c3c2195e 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -247,7 +247,6 @@ /* ProseMirror */ .ProseMirror { - font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif; min-height: 140px; } .ProseMirror-dark { diff --git a/src/App.native.tsx b/src/App.native.tsx index 554d699411..2ec666e2cc 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -106,48 +106,51 @@ function InnerApp() { }, [_]) return ( - - - - - - + + + + + + - - {/* LabelDefsProvider MUST come before ModerationOptsProvider */} - - - - - - - - - - - - - - - - - - - - - - - - + + + {/* LabelDefsProvider MUST come before ModerationOptsProvider */} + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + ) } diff --git a/src/App.web.tsx b/src/App.web.tsx index a3e0f9869f..fa5f1de934 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -96,48 +96,50 @@ function InnerApp() { return ( - - - - - - + + + + + + - - {/* LabelDefsProvider MUST come before ModerationOptsProvider */} - - - - - - - - - - - - - - - - - - - - - - - + + + {/* LabelDefsProvider MUST come before ModerationOptsProvider */} + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + + + + ) } diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts index 43265d9ae4..7f6bde5fa0 100644 --- a/src/alf/fonts.ts +++ b/src/alf/fonts.ts @@ -109,4 +109,10 @@ export function applyFonts( style.fontFamily = style.fontFamily || FAMILIES } } + + /** + * Disable contextual ligatures + * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant} + */ + style.fontVariant = ['no-contextual'] } diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx index f33cea8e78..fa3936d259 100644 --- a/src/components/dialogs/nuxs/NeueTypography.tsx +++ b/src/components/dialogs/nuxs/NeueTypography.tsx @@ -49,19 +49,18 @@ export function NeueTypography() { - Introducing new font settings ✨ + New font settings ✨ - + - To the ensure the best possible experience, we're introducing a - new theme font, along with adjustable font sizing settings. + We're introducing a new theme font, along with adjustable font + sizing. - Defaults are shown below. You can edit these in your Appearance - Settings later. + You can adjust these in your Appearance Settings later. diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index 391b1c8b70..6dc387b239 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -351,8 +351,8 @@ export function Checkbox() { t.atoms.border_contrast_high, { borderWidth: 1, - height: 20, - width: 20, + height: 24, + width: 24, }, baseStyles, hovered ? baseHoverStyles : {}, @@ -383,9 +383,9 @@ export function Switch() { t.atoms.border_contrast_high, { borderWidth: 1, - height: 20, - width: 32, - padding: 2, + height: 24, + width: 36, + padding: 3, }, baseStyles, hovered ? baseHoverStyles : {}, @@ -395,8 +395,8 @@ export function Switch() { style={[ a.rounded_full, { - height: 14, - width: 14, + height: 16, + width: 16, }, selected ? { @@ -436,8 +436,8 @@ export function Radio() { t.atoms.border_contrast_high, { borderWidth: 1, - height: 20, - width: 20, + height: 24, + width: 24, }, baseStyles, hovered ? baseHoverStyles : {}, @@ -447,7 +447,7 @@ export function Radio() { style={[ a.absolute, a.rounded_full, - {height: 12, width: 12}, + {height: 16, width: 16}, selected ? { backgroundColor: t.palette.primary_500, diff --git a/src/components/icons/AspectRatio.tsx b/src/components/icons/AspectRatio.tsx new file mode 100644 index 0000000000..b59c1680ef --- /dev/null +++ b/src/components/icons/AspectRatio.tsx @@ -0,0 +1,13 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const AspectRatio11_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Z', +}) + +export const AspectRatio43_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M2 20.5c-.552 0-1-.41-1-.917V4.917C1 4.41 1.448 4 2 4h20c.552 0 1 .41 1 .917v14.666c0 .507-.448.917-1 .917H2Zm1-1.833h18V5.833H3v12.834Z', +}) + +export const AspectRatio34_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4 2c0-.552.41-1 .917-1h14.666c.507 0 .917.448.917 1v20c0 .552-.41 1-.917 1H4.917C4.41 23 4 22.552 4 22V2Zm1.833 1v18h12.834V3H5.833Z', +}) diff --git a/src/components/icons/FlipImage.tsx b/src/components/icons/FlipImage.tsx new file mode 100644 index 0000000000..deb133a5e1 --- /dev/null +++ b/src/components/icons/FlipImage.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const FlipVertical_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v5h-2V5H5v4H3V4Zm20 9H1v-2h22v2Zm-2.293 7.707A1 1 0 0 1 20 21h-1v-2h2v1a1 1 0 0 1-.293.707ZM17 19v2h-2v-2h2Zm-4 0v2h-2v-2h2Zm-4 0v2H7v-2h2Zm-4 0v2H4a1 1 0 0 1-1-1v-1h2Zm0-2H3v-2h2v2Zm14-2v2h2v-2h-2Z', +}) + +export const FlipHorizontal_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4 21a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5v2H5v14h4v2H4Zm9-20v22h-2V1h2Zm7.707 2.293A1 1 0 0 1 21 4v1h-2V3h1a1 1 0 0 1 .707.293ZM19 7h2v2h-2V7Zm0 4h2v2h-2v-2Zm0 4h2v2h-2v-2Zm0 4h2v1a1 1 0 0 1-1 1h-1v-2Zm-2 0v2h-2v-2h2ZM15 5h2V3h-2v2Z', +}) diff --git a/src/lib/embeds.ts b/src/lib/embeds.ts index a758987b20..2904f1cc36 100644 --- a/src/lib/embeds.ts +++ b/src/lib/embeds.ts @@ -1,7 +1,7 @@ import { - AppBskyFeedDefs, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, + AppBskyFeedDefs, } from '@atproto/api' export function isEmbedByEmbedder( diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index d675fb38ed..69e04f4af1 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -205,7 +205,7 @@ export function AppearanceToggleButtonGroup({ }) { const t = useTheme() return ( - + diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index f69c895693..778439259e 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -19,6 +19,7 @@ import PasteInput, { PasteInputRef, } from '@mattermost/react-native-paste-input' +import {isAndroid} from '#/platform/detection' import {POST_IMG_MAX} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {downloadAndResize} from 'lib/media/manip' @@ -26,12 +27,13 @@ import {isUriImage} from 'lib/media/util' import {cleanError} from 'lib/strings/errors' import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' import {useTheme} from 'lib/ThemeContext' -import {isIOS} from 'platform/detection' import { LinkFacetMatch, suggestLinkCardUri, } from 'view/com/composer/text-input/text-input-util' import {Text} from 'view/com/util/text/Text' +import {atoms as a, useAlf} from '#/alf' +import {normalizeTextStyles} from '#/components/Typography' import {Autocomplete} from './mobile/Autocomplete' export interface TextInputRef { @@ -67,6 +69,7 @@ export const TextInput = forwardRef(function TextInputImpl( }: TextInputProps, ref, ) { + const {theme: t, fonts} = useAlf() const pal = usePalette('default') const textInput = useRef(null) const textInputSelection = useRef({start: 0, end: 0}) @@ -180,6 +183,33 @@ export const TextInput = forwardRef(function TextInputImpl( [onChangeText, richtext, setAutocompletePrefix], ) + const inputTextStyle = React.useMemo(() => { + const style = normalizeTextStyles( + [a.text_xl, a.leading_snug, t.atoms.text], + { + fontScale: fonts.scaleMultiplier, + fontFamily: fonts.family, + flags: {}, + }, + ) + + /* + * `PasteInput` appears to prefer no `lineHeight` + */ + style.lineHeight = undefined + + /* + * Android impl of `PasteInput` doesn't support the array syntax for `fontVariant` + */ + if (isAndroid) { + // @ts-ignore + style.fontVariant = style.fontVariant + ? style.fontVariant.join(' ') + : undefined + } + return style + }, [t, fonts]) + const textDecorated = useMemo(() => { let i = 0 @@ -187,15 +217,12 @@ export const TextInput = forwardRef(function TextInputImpl( return ( + style={[inputTextStyle, segment.facet ? pal.link : pal.text]}> {segment.text} ) }) - }, [richtext, pal.link, pal.text]) + }, [richtext, pal.link, pal.text, inputTextStyle]) return ( @@ -213,12 +240,7 @@ export const TextInput = forwardRef(function TextInputImpl( multiline scrollEnabled={false} numberOfLines={4} - style={[ - pal.text, - styles.textInput, - styles.textInputFormatting, - {textAlignVertical: 'top'}, - ]} + style={[inputTextStyle, styles.textInput, {textAlignVertical: 'top'}]} {...props}> {textDecorated} @@ -242,11 +264,4 @@ const styles = StyleSheet.create({ marginLeft: 8, alignSelf: 'flex-start', }, - textInputFormatting: { - fontSize: 18, - letterSpacing: 0.2, - fontWeight: '400', - // This is broken on ios right now, so don't set it there. - lineHeight: isIOS ? undefined : 23.4, // 1.3*16 - }, }) diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index 3db25746f3..acec61516a 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -22,7 +22,9 @@ import { LinkFacetMatch, suggestLinkCardUri, } from 'view/com/composer/text-input/text-input-util' +import {atoms as a, useAlf} from '#/alf' import {Portal} from '#/components/Portal' +import {normalizeTextStyles} from '#/components/Typography' import {Text} from '../../util/text/Text' import {createSuggestion} from './web/Autocomplete' import {Emoji} from './web/EmojiPicker.web' @@ -58,6 +60,7 @@ export const TextInput = React.forwardRef(function TextInputImpl( TextInputProps, ref, ) { + const {theme: t, fonts} = useAlf() const autocomplete = useActorAutocompleteFn() const pal = usePalette('default') const modeClass = useColorSchemeStyle('ProseMirror-light', 'ProseMirror-dark') @@ -247,13 +250,32 @@ export const TextInput = React.forwardRef(function TextInputImpl( }, })) + const inputStyle = React.useMemo(() => { + const style = normalizeTextStyles( + [a.text_lg, a.leading_snug, t.atoms.text], + { + fontScale: fonts.scaleMultiplier, + fontFamily: fonts.family, + flags: {}, + }, + ) + /* + * TipTap component isn't a RN View and while it seems to convert + * `fontSize` to `px`, it doesn't convert `lineHeight`. + * + * `lineHeight` should always be defined here, this is defensive. + */ + style.lineHeight = style.lineHeight + ? ((style.lineHeight + 'px') as unknown as number) + : undefined + return style + }, [t, fonts]) + return ( <> - + {/* @ts-ignore inputStyle is fine */} + {isDropping && ( diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx index b39dcd9364..e3a770db07 100644 --- a/src/view/com/modals/EditImage.tsx +++ b/src/view/com/modals/EditImage.tsx @@ -2,7 +2,6 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' import {Pressable, StyleSheet, View} from 'react-native' import {useWindowDimensions} from 'react-native' import {LinearGradient} from 'expo-linear-gradient' -import {MaterialIcons} from '@expo/vector-icons' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {Slider} from '@miblanchard/react-native-slider' @@ -13,13 +12,24 @@ import {useModalControls} from '#/state/modals' import {MAX_ALT_TEXT} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' import {enforceLen} from 'lib/strings/helpers' import {gradients, s} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' import {getKeys} from 'lib/type-assertions' import {GalleryModel} from 'state/models/media/gallery' import {ImageModel} from 'state/models/media/image' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import { + AspectRatio11_Stroke2_Corner0_Rounded as A11, + AspectRatio34_Stroke2_Corner0_Rounded as A34, + AspectRatio43_Stroke2_Corner0_Rounded as A43, +} from '#/components/icons/AspectRatio' +import {CircleBanSign_Stroke2_Corner0_Rounded as Ban} from '#/components/icons/CircleBanSign' +import { + FlipHorizontal_Stroke2_Corner0_Rounded as FlipHorizontal, + FlipVertical_Stroke2_Corner0_Rounded as FlipVertical, +} from '#/components/icons/FlipImage' import {Text} from '../util/text/Text' import {TextInput} from './util' @@ -27,18 +37,16 @@ export const snapPoints = ['80%'] const RATIOS = { '4:3': { - Icon: RectWideIcon, + icon: A43, }, '1:1': { - Icon: SquareIcon, + icon: A11, }, '3:4': { - Icon: RectTallIcon, + icon: A34, }, None: { - label: 'None', - Icon: MaterialIcons, - name: 'do-not-disturb-alt', + icon: Ban, }, } as const @@ -112,12 +120,12 @@ export const Component = observer(function EditImageImpl({ // }, // }, { - name: 'flip' as const, + icon: FlipHorizontal, label: _(msg`Flip horizontal`), onPress: onFlipHorizontal, }, { - name: 'flip' as const, + icon: FlipVertical, label: _(msg`Flip vertically`), onPress: onFlipVertical, }, @@ -165,17 +173,6 @@ export const Component = observer(function EditImageImpl({ onCloseModal() }, [altText, image, position, scale, onCloseModal]) - const getLabelIconSize = useCallback((as: AspectRatio) => { - switch (as) { - case 'None': - return 22 - case '1:1': - return 32 - default: - return 26 - } - }, []) - if (image.cropped === undefined) { return null } @@ -231,7 +228,7 @@ export const Component = observer(function EditImageImpl({ maximumValue={3} /> - + {!isMobile ? ( Ratios @@ -239,31 +236,25 @@ export const Component = observer(function EditImageImpl({ ) : null} {getKeys(RATIOS).map(ratio => { - const {Icon, ...props} = RATIOS[ratio] - const labelIconSize = getLabelIconSize(ratio) + const {icon} = RATIOS[ratio] const isSelected = aspectRatio === ratio return ( - { onSetRatio(ratio) - }} - accessibilityLabel={ratio} - accessibilityHint=""> - - - - {ratio} - - + }}> + + + {ratio} + + ) })} @@ -273,24 +264,17 @@ export const Component = observer(function EditImageImpl({ ) : null} - {adjustments.map(({label, name, onPress}) => ( - ( + ))} @@ -362,12 +346,6 @@ const styles = StyleSheet.create({ paddingVertical: 8, paddingHorizontal: 24, }, - imgControl: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - height: 40, - }, imgEditor: { maxWidth: '100%', }, diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index e6ab86f9c5..2fc53a4df9 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -59,7 +59,7 @@ export const ExternalLinkEmbed = ({ } return ( - + {imageUri && !embedPlayerParams ? ( diff --git a/web/index.html b/web/index.html index 9253484338..6e1fa9061b 100644 --- a/web/index.html +++ b/web/index.html @@ -252,7 +252,6 @@ /* ProseMirror */ .ProseMirror { - font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif; min-height: 140px; } .ProseMirror-dark {