From db7befaec2b855a0e3310220d8a5420ce4fcad1f Mon Sep 17 00:00:00 2001 From: Pavel <14926950+prichodko@users.noreply.github.com> Date: Wed, 22 Mar 2023 10:57:25 +0100 Subject: [PATCH] Unify typography and enforce only valid variants (#354) * unify typography under Text component * migrate from paragraph/heading to text * update font configuration --- apps/web/index.html | 2 +- apps/web/src/app.tsx | 2 +- .../components/src/accordion/accordion.tsx | 17 +- .../src/accordion/accordionItem.tsx | 22 +-- packages/components/src/author/author.tsx | 10 +- packages/components/src/button/button.tsx | 44 ++--- .../src/divider-label/divider-label.tsx | 6 +- .../src/dropdown-menu/dropdown-menu.tsx | 6 +- .../components/src/icons/icons.stories.tsx | 10 +- packages/components/src/index.tsx | 2 +- packages/components/src/messages/message.tsx | 17 +- .../src/react-button/react-button.tsx | 6 +- packages/components/src/reply/reply.tsx | 14 +- packages/components/src/sidebar/sidebar.tsx | 14 +- packages/components/src/tamagui.config.ts | 104 ++++------- packages/components/src/text/index.tsx | 1 + packages/components/src/text/text.stories.tsx | 61 +++++++ packages/components/src/text/text.tsx | 119 ++++++++++++ packages/components/src/tooltip/tooltip.tsx | 6 +- .../components/src/topbar/topbar.stories.tsx | 2 +- packages/components/src/topbar/topbar.tsx | 39 ++-- packages/components/src/typography/index.tsx | 1 - .../src/typography/typography.stories.tsx | 60 ------ .../components/src/typography/typography.tsx | 171 ------------------ .../components/src/user-list/user-list.tsx | 6 +- 25 files changed, 315 insertions(+), 427 deletions(-) create mode 100644 packages/components/src/text/index.tsx create mode 100644 packages/components/src/text/text.stories.tsx create mode 100644 packages/components/src/text/text.tsx delete mode 100644 packages/components/src/typography/index.tsx delete mode 100644 packages/components/src/typography/typography.stories.tsx delete mode 100644 packages/components/src/typography/typography.tsx diff --git a/apps/web/index.html b/apps/web/index.html index 922831ea..29366175 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -5,7 +5,7 @@ Status diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx index 44ad28d0..b99df1e5 100644 --- a/apps/web/src/app.tsx +++ b/apps/web/src/app.tsx @@ -60,7 +60,7 @@ function App() { setShowMembers(show => !show)} /> diff --git a/packages/components/src/accordion/accordion.tsx b/packages/components/src/accordion/accordion.tsx index bf476fe4..2c42a3d7 100644 --- a/packages/components/src/accordion/accordion.tsx +++ b/packages/components/src/accordion/accordion.tsx @@ -4,7 +4,7 @@ import { ChevronRightIcon } from '@status-im/icons/20' import { Stack } from '@tamagui/core' import { AnimatePresence } from 'tamagui' -import { Label, Paragraph } from '../typography' +import { Text } from '../text' type Props = { children: React.ReactElement[] | React.ReactElement @@ -38,7 +38,7 @@ const Accordion = (props: Props) => { cursor="pointer" py={8} > - + { > - + {title} - + {!isExpanded && unreadCount !== 0 && ( @@ -90,9 +85,9 @@ const Accordion = (props: Props) => { justifyContent="center" alignItems="center" > - + )} diff --git a/packages/components/src/accordion/accordionItem.tsx b/packages/components/src/accordion/accordionItem.tsx index 8ea57a6f..ae241bed 100644 --- a/packages/components/src/accordion/accordionItem.tsx +++ b/packages/components/src/accordion/accordionItem.tsx @@ -1,9 +1,10 @@ import { MutedIcon } from '@status-im/icons/20' -import { Stack, Text } from '@tamagui/core' +import { Stack, Text as RNText } from '@tamagui/core' -import { Label, Paragraph } from '../typography' +import { Text } from '../text' import type { Channel } from '../sidebar/mock-data' +import type { ColorTokens } from '@tamagui/core' type Props = { selected?: boolean @@ -11,7 +12,7 @@ type Props = { channel: Channel } -const textColor = { +const textColors: Record, ColorTokens> = { muted: '$neutral-40', normal: '$neutral-50', withMessages: '$neutral-100', @@ -65,17 +66,14 @@ const AccordionItem = (props: Props) => { backgroundColor="$turquoise-50-opa-10" justifyContent="center" alignItems="center" + marginRight={8} > - {emoji} + {emoji} )} - + {title} - + {channelStatus !== 'normal' && ( @@ -89,9 +87,9 @@ const AccordionItem = (props: Props) => { justifyContent="center" alignItems="center" > - + )} diff --git a/packages/components/src/author/author.tsx b/packages/components/src/author/author.tsx index 280abf8c..5f250367 100644 --- a/packages/components/src/author/author.tsx +++ b/packages/components/src/author/author.tsx @@ -5,7 +5,7 @@ import { } from '@status-im/icons/12' import { XStack } from 'tamagui' -import { Paragraph } from '../typography' +import { Text } from '../text' interface Props { name: string @@ -22,19 +22,19 @@ const Author = (props: Props) => { return ( - + {name} - + {status === 'contact' && } {status === 'verified' && } {status === 'untrustworthy' && } {address && ( - + {address} {time && ` ยท ${time}`} - + )} ) diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx index b38c718b..457dfd6c 100644 --- a/packages/components/src/button/button.tsx +++ b/packages/components/src/button/button.tsx @@ -2,8 +2,9 @@ import { cloneElement, forwardRef } from 'react' import { Stack, styled } from '@tamagui/core' -import { Paragraph } from '../typography' +import { Text } from '../text' +import type { TextProps } from '../text' import type { GetVariants, MapVariant, PressableProps } from '../types' import type { StackProps } from '@tamagui/core' import type { Ref } from 'react' @@ -30,24 +31,32 @@ const textColors: MapVariant = { danger: '$white-100', } +const textSizes: Record, TextProps['size']> = { + '40': 15, + '32': 15, + '24': 13, +} + const Button = (props: Props, ref: Ref) => { const { variant = 'primary', shape = 'default', size = 40, - icon = null, - iconAfter = null, children, - ...buttonProps + icon, + iconAfter, + ...rest } = props // TODO: provider aria-label if button has only icon const iconOnly = !children && Boolean(icon) + const textColor = textColors[variant] + const textSize = textSizes[size] return ( ) => { iconOnly={iconOnly} > {icon ? cloneElement(icon, { color: textColor }) : null} - + {children} - + {iconAfter ? cloneElement(iconAfter, { color: textColor }) : null} ) @@ -174,24 +183,3 @@ const Base = styled(Stack, { }, } as const, }) - -const ButtonText = styled(Paragraph, { - display: 'flex', - alignItems: 'center', - space: 4, - weight: 'medium', - - variants: { - size: { - 40: { - variant: 'normal', - }, - 32: { - variant: 'normal', - }, - 24: { - variant: 'smaller', - }, - }, - } as const, -}) diff --git a/packages/components/src/divider-label/divider-label.tsx b/packages/components/src/divider-label/divider-label.tsx index 7ad7c884..4f4715f0 100644 --- a/packages/components/src/divider-label/divider-label.tsx +++ b/packages/components/src/divider-label/divider-label.tsx @@ -1,6 +1,6 @@ import { Stack } from '@tamagui/core' -import { Paragraph } from '../typography' +import { Text } from '../text' type Props = { label: string @@ -18,9 +18,9 @@ const DividerLabel = (props: Props) => { borderColor="$neutral-10" borderTopWidth={1} > - + {label} - + ) } diff --git a/packages/components/src/dropdown-menu/dropdown-menu.tsx b/packages/components/src/dropdown-menu/dropdown-menu.tsx index cd1280a6..fda0ee99 100644 --- a/packages/components/src/dropdown-menu/dropdown-menu.tsx +++ b/packages/components/src/dropdown-menu/dropdown-menu.tsx @@ -11,7 +11,7 @@ import { } from '@radix-ui/react-dropdown-menu' import { Stack, styled } from 'tamagui' -import { Paragraph } from '../typography' +import { Text } from '../text' const Content = styled(DropdownMenuContent, { name: 'DropdownMenuContent', @@ -93,9 +93,9 @@ const DropdownMenuItem = (props: DropdownMenuItemProps) => { return ( {cloneElement(icon, { color: iconColor })} - + {label} - + ) } diff --git a/packages/components/src/icons/icons.stories.tsx b/packages/components/src/icons/icons.stories.tsx index c0050ce6..9003f9b1 100644 --- a/packages/components/src/icons/icons.stories.tsx +++ b/packages/components/src/icons/icons.stories.tsx @@ -5,7 +5,7 @@ import * as icons16 from '@status-im/icons/16' import * as icons20 from '@status-im/icons/20' import * as reactions from '@status-im/icons/reactions' -import { Paragraph } from '../typography' +import { Text } from '../text' import type { IconProps } from '@status-im/icons/types' import type { Meta, StoryObj } from '@storybook/react' @@ -42,7 +42,7 @@ export const All: Story = { style={{ display: 'flex', flexDirection: 'column' }} > - {unpascal(name)} + {unpascal(name)} ) })} @@ -59,7 +59,7 @@ export const All: Story = { style={{ display: 'flex', flexDirection: 'column' }} > - {unpascal(name)} + {unpascal(name)} ) })} @@ -76,7 +76,7 @@ export const All: Story = { style={{ display: 'flex', flexDirection: 'column' }} > - {unpascal(name)} + {unpascal(name)} ) })} @@ -93,7 +93,7 @@ export const All: Story = { style={{ display: 'flex', flexDirection: 'column' }} > - {unpascal(name)} + {unpascal(name)} ) })} diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 4af6b94d..2cabbc44 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -9,8 +9,8 @@ export * from './messages' export * from './provider' export * from './sidebar' export * from './sidebar-members' +export * from './text' export * from './topbar' -export * from './typography' export * from './user-list' // MOCK DATA diff --git a/packages/components/src/messages/message.tsx b/packages/components/src/messages/message.tsx index 552c01f7..f098c271 100644 --- a/packages/components/src/messages/message.tsx +++ b/packages/components/src/messages/message.tsx @@ -8,7 +8,7 @@ import { Avatar } from '../avatar' import { Image } from '../image' import { useChatDispatch } from '../provider' import { Reply } from '../reply' -import { Paragraph } from '../typography' +import { Text } from '../text' import { Actions } from './components/actions' import { Reactions } from './components/reactions' @@ -92,9 +92,9 @@ const Message = (props: Props) => { space={2} > - + Steve - + )} @@ -114,14 +114,13 @@ const Message = (props: Props) => { /> {text && ( - {text} - + )} {images?.map(image => ( diff --git a/packages/components/src/react-button/react-button.tsx b/packages/components/src/react-button/react-button.tsx index 3f456da8..7dde9eb8 100644 --- a/packages/components/src/react-button/react-button.tsx +++ b/packages/components/src/react-button/react-button.tsx @@ -11,7 +11,7 @@ import { } from '@status-im/icons/reactions' import { Stack, styled } from '@tamagui/core' -import { Paragraph } from '../typography' +import { Text } from '../text' import type { GetVariants } from '../types' import type { StackProps } from '@tamagui/core' @@ -66,9 +66,9 @@ const ReactButton = (props: Props, ref: Ref) => { > {count && ( - + {count} - + )} ) diff --git a/packages/components/src/reply/reply.tsx b/packages/components/src/reply/reply.tsx index 867b89c5..9ca58bc7 100644 --- a/packages/components/src/reply/reply.tsx +++ b/packages/components/src/reply/reply.tsx @@ -5,7 +5,7 @@ import { Stack, Unspaced, XStack } from 'tamagui' import { Avatar } from '../avatar' import { Button } from '../button' -import { Paragraph } from '../typography' +import { Text } from '../text' interface Props { type: 'text' | 'gif' | 'image' | 'deleted' @@ -29,15 +29,15 @@ const Reply = (props: Props) => { - + {name} - + - + {type === 'text' && 'What is the meaning of life? '} {type === 'gif' && 'GIF'} {type === 'image' && '5 photos'} - + ) : ( @@ -49,9 +49,9 @@ const Reply = (props: Props) => { - + Message deleted - + ) diff --git a/packages/components/src/sidebar/sidebar.tsx b/packages/components/src/sidebar/sidebar.tsx index 405de6b8..e9c849d9 100644 --- a/packages/components/src/sidebar/sidebar.tsx +++ b/packages/components/src/sidebar/sidebar.tsx @@ -6,7 +6,7 @@ import { AccordionItem } from '../accordion/accordionItem' import { Avatar } from '../avatar' import { Button } from '../button' import { Image } from '../image' -import { Heading, Paragraph } from '../typography' +import { Text } from '../text' import { CHANNEL_GROUPS } from './mock-data' import type { ChannelGroup } from './mock-data' @@ -58,11 +58,15 @@ const Sidebar = (props: Props) => { size={80} /> - {name} - {description} - + + + {name} + + {description} + + - {membersCount} + {membersCount} diff --git a/packages/components/src/tamagui.config.ts b/packages/components/src/tamagui.config.ts index 8c6d5c9d..d13c01a0 100644 --- a/packages/components/src/tamagui.config.ts +++ b/packages/components/src/tamagui.config.ts @@ -7,6 +7,12 @@ import { animations } from './animations' import { themes } from './themes' import { tokens } from './tokens' +import type { + ColorTokens, + GetStyledVariants, + TamaguiComponent, +} from '@tamagui/core' + export type Conf = typeof config declare module '@tamagui/core' { @@ -14,81 +20,25 @@ declare module '@tamagui/core' { interface TamaguiCustomConfig extends Conf {} } -const interFont = createInterFont({ - size: { - 6: 11, - 7: 13, - 8: 15, - 9: 19, - 10: 27, - }, - weight: { - 6: '400', - 7: '500', - 8: '600', - }, - letterSpacing: { - 5: 2, - 6: 1, - 7: 0, - 8: -1, - 9: -2, - 10: -3, - 12: -4, - 14: -5, - 15: -6, - }, - face: { - 400: { normal: 'Inter' }, - 500: { normal: 'Inter' }, - 600: { normal: 'InterBold' }, - }, -}) - -const monoFont = createFont({ - family: 'UbuntuMono', - weight: { - 1: '500', - }, - letterSpacing: { - 5: 2, - 6: 1, - 7: 0, - 8: -1, - 9: -2, - 10: -3, - 12: -4, - 14: -5, - 15: -6, - }, - size: { - 1: 11, - 2: 12, - 3: 13, - 4: 14, - 5: 16, - 6: 18, - 7: 20, - 8: 22, - 9: 30, - 10: 42, - 11: 52, - 12: 62, - 13: 72, - 14: 92, - 15: 114, - 16: 124, - }, - lineHeight: { - 1: 14, - 2: 15, - }, -}) - export const config = createTamagui({ fonts: { - inter: interFont, - mono: monoFont, + sans: createInterFont({ + size: {}, + weight: {}, + letterSpacing: {}, + face: { + 400: { normal: 'Inter' }, + 500: { normal: 'Inter' }, + 600: { normal: 'InterBold' }, + }, + }), + mono: createFont({ + family: 'UbuntuMono', + weight: {}, + letterSpacing: {}, + size: {}, + lineHeight: {}, + }), }, themes, tokens: { @@ -117,3 +67,11 @@ export const config = createTamagui({ shorthands, animations, }) + +export type TextColor< + C extends TamaguiComponent, + K extends keyof V, + V extends GetStyledVariants = GetStyledVariants +> = { + [P in V[K] & string]: ColorTokens +} diff --git a/packages/components/src/text/index.tsx b/packages/components/src/text/index.tsx new file mode 100644 index 00000000..8134005a --- /dev/null +++ b/packages/components/src/text/index.tsx @@ -0,0 +1 @@ +export { Text, type TextProps } from './text' diff --git a/packages/components/src/text/text.stories.tsx b/packages/components/src/text/text.stories.tsx new file mode 100644 index 00000000..97a67b98 --- /dev/null +++ b/packages/components/src/text/text.stories.tsx @@ -0,0 +1,61 @@ +import { Stack } from '@tamagui/core' + +import { Text } from './text' + +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + title: 'Text', + args: { + children: 'The quick brown fox jumped over the lazy dog.', + }, + argTypes: {}, + + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=617-208&t=ppNe6QC4ntgNciqw-11', + }, + }, +} + +export const TextStory: StoryObj = { + name: 'TextNew', + render: args => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +} + +export default meta diff --git a/packages/components/src/text/text.tsx b/packages/components/src/text/text.tsx new file mode 100644 index 00000000..f57c347e --- /dev/null +++ b/packages/components/src/text/text.tsx @@ -0,0 +1,119 @@ +import { forwardRef } from 'react' + +import { styled, Text as BaseText } from '@tamagui/core' + +import type { ColorTokens, GetProps } from '@tamagui/core' +import type { Ref } from 'react' +import type { Text as RNText } from 'react-native' + +type Variants = GetProps +type Type = NonNullable +type Weight = NonNullable + +type Props = { + children: React.ReactNode + color?: ColorTokens + truncate?: boolean + wrap?: false +} & ( + | { size: 27; weight?: Weight } + | { size: 19; weight?: Weight } + | { size: 15; weight?: Weight; type?: Type } + | { size: 13; weight?: Weight; type?: Type } + | { size: 11; weight?: Weight; type?: Type; uppercase?: boolean } +) + +// TODO: monospace should be used only for variant. Extract to separate
component? +// TODO: Ubuntu Mono should be used only for code snippets. Extract to separate component? +const Text = (props: Props, ref: Ref) => { + const { color = '$neutral-100', ...rest } = props + return +} + +const Base = styled(BaseText, { + name: 'Text', + + variants: { + type: { + default: { + fontFamily: '$sans', + }, + monospace: { + fontFamily: '$mono', + }, + }, + + size: { + 27: { + fontSize: 27, + lineHeight: 32, + letterSpacing: -0.021, + }, + 19: { + fontSize: 19, + lineHeight: 26, + letterSpacing: -0.016, + }, + 15: { + fontSize: 15, + lineHeight: 22, + letterSpacing: -0.009, + }, + 13: { + fontSize: 13, + lineHeight: 18, + letterSpacing: -0.003, + }, + 11: { + fontSize: 11, + lineHeight: 18, + letterSpacing: -0.003, + }, + }, + + weight: { + regular: { + fontWeight: '400', + }, + medium: { + fontWeight: '500', + }, + semibold: { + fontWeight: '600', + }, + }, + + uppercase: { + true: { + textTransform: 'uppercase', + }, + }, + + wrap: { + false: { + whiteSpace: 'nowrap', + }, + }, + + truncate: { + true: { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + wordWrap: 'normal', + maxWidth: '100%', + minWidth: 0, + }, + }, + } as const, + + defaultVariants: { + type: 'default', + weight: 'regular', + }, +}) + +const _Text = forwardRef(Text) + +export { _Text as Text } +export type { Props as TextProps } diff --git a/packages/components/src/tooltip/tooltip.tsx b/packages/components/src/tooltip/tooltip.tsx index 7dbe1acb..f0a0b4c7 100644 --- a/packages/components/src/tooltip/tooltip.tsx +++ b/packages/components/src/tooltip/tooltip.tsx @@ -10,7 +10,7 @@ import { } from '@radix-ui/react-tooltip' import { Stack } from 'tamagui' -import { Paragraph } from '../typography' +import { Text } from '../text' import type { TooltipContentProps } from '@radix-ui/react-tooltip' import type { Ref } from 'react' @@ -62,9 +62,9 @@ const Tooltip = (props: Props, ref: Ref) => { shadowColor="rgba(9, 16, 28, 0.12)" > {typeof content === 'string' ? ( - + {content} - + ) : ( content )} diff --git a/packages/components/src/topbar/topbar.stories.tsx b/packages/components/src/topbar/topbar.stories.tsx index 8d86d578..00caec79 100644 --- a/packages/components/src/topbar/topbar.stories.tsx +++ b/packages/components/src/topbar/topbar.stories.tsx @@ -38,7 +38,7 @@ export const Default: Story = { export const WithMembersSelected: Story = { args: { ...Default.args, - membersVisisble: true, + showMembers: true, }, } diff --git a/packages/components/src/topbar/topbar.tsx b/packages/components/src/topbar/topbar.tsx index b07e8b9c..51adc21f 100644 --- a/packages/components/src/topbar/topbar.tsx +++ b/packages/components/src/topbar/topbar.tsx @@ -10,18 +10,18 @@ import { ShareIcon, UpToDateIcon, } from '@status-im/icons/20' -import { Stack, Text } from '@tamagui/core' +import { Stack, Text as RNText } from '@tamagui/core' import { BlurView } from 'expo-blur' import { Divider } from '../divider' import { DropdownMenu } from '../dropdown-menu' import { IconButton } from '../icon-button' -import { Paragraph } from '../typography' +import { Text } from '../text' import type { Channel } from '../sidebar/mock-data' type Props = { - membersVisisble: boolean + showMembers: boolean onMembersPress: () => void goBack?: () => void channel: Channel @@ -29,7 +29,7 @@ type Props = { } const Topbar = (props: Props) => { - const { membersVisisble, onMembersPress, goBack, blur, channel } = props + const { showMembers, onMembersPress, goBack, blur, channel } = props const { title, description, emoji } = channel @@ -57,14 +57,14 @@ const Topbar = (props: Props) => { {emoji && ( - {emoji} + {emoji} )} {title && ( - + {title} - + )} @@ -81,24 +81,21 @@ const Topbar = (props: Props) => { $sm={{ justifyContent: 'flex-end' }} > {description && ( - - {description} - + + + {description} + + )} } - selected={membersVisisble} + selected={showMembers} onPress={onMembersPress} blur={blur} /> diff --git a/packages/components/src/typography/index.tsx b/packages/components/src/typography/index.tsx deleted file mode 100644 index 324025ef..00000000 --- a/packages/components/src/typography/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './typography' diff --git a/packages/components/src/typography/typography.stories.tsx b/packages/components/src/typography/typography.stories.tsx deleted file mode 100644 index f645fced..00000000 --- a/packages/components/src/typography/typography.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { Stack } from '@tamagui/core' - -import { Code, Heading, Paragraph } from '.' - -import type { Meta, StoryObj } from '@storybook/react' - -const meta: Meta = { - title: 'typography', - argTypes: {}, -} - -export const HeadingStory: StoryObj = { - name: 'Heading', - args: { - children: 'The quick brown fox jumped over the lazy dog.', - }, - render: args => ( - - - - - - - - - ), -} - -export const TextStory: StoryObj = { - name: 'Text', - args: { - children: 'The quick brown fox jumped over the lazy dog.', - }, - render: args => ( - - - - - - - - - ), -} - -export const CodeStory: StoryObj = { - name: 'Code', - args: { - children: '// How to create variables:', - }, - render: () => ( - - - The quick brown fox jumped over the lazy dog. - - - ), -} - -export default meta diff --git a/packages/components/src/typography/typography.tsx b/packages/components/src/typography/typography.tsx deleted file mode 100644 index 66981cdc..00000000 --- a/packages/components/src/typography/typography.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import { styled } from '@tamagui/core' -import { SizableText } from 'tamagui' - -export const Heading = styled(SizableText, { - name: 'Heading', - fontFamily: '$inter', - color: '$textPrimary', - - variants: { - heading: { - h1: { - fontSize: 27, - lineHeight: 32, - letterSpacing: -0.021, - }, - h2: { - fontSize: 19, - lineHeight: 26, - letterSpacing: -0.016, - }, - }, - uppercase: { - true: { - textTransform: 'uppercase', - }, - }, - weight: { - regular: { - fontWeight: '400', - }, - medium: { - fontWeight: '500', - }, - semibold: { - fontWeight: '600', - }, - }, - } as const, - defaultVariants: { - // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale - size: '$true', - heading: 'h1', - }, -}) - -export const Paragraph = styled(SizableText, { - name: 'Paragraph', - fontFamily: '$inter', - color: '$textPrimary', - - variants: { - variant: { - normal: { - fontSize: 15, - lineHeight: 22, - letterSpacing: -0.009, - }, - smaller: { - fontSize: 13, - lineHeight: 18, - letterSpacing: -0.003, - }, - 11: { - fontSize: 11, - lineHeight: 18, - letterSpacing: -0.003, - }, - }, - uppercase: { - true: { - textTransform: 'uppercase', - }, - }, - weight: { - regular: { - fontWeight: '400', - }, - medium: { - fontWeight: '500', - }, - semibold: { - fontWeight: '600', - }, - }, - } as const, - defaultVariants: { - // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale - size: '$true', - variant: 'normal', - weight: 'regular', - }, -}) - -export const Label = styled(SizableText, { - name: 'Label', - fontFamily: '$inter', - color: '$textPrimary', - - fontSize: 11, - lineHeight: 16, - letterSpacing: -0.005, - - variants: { - uppercase: { - true: { - textTransform: 'uppercase', - }, - }, - weight: { - regular: { - fontWeight: '400', - }, - medium: { - fontWeight: '500', - }, - semibold: { - fontWeight: '600', - }, - }, - } as const, - defaultVariants: { - // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale - size: '$true', - weight: 'regular', - }, -}) - -export const Code = styled(SizableText, { - name: 'Code', - fontFamily: '$mono', - color: '$textPrimary', - - fontSize: 11, - lineHeight: 16, - letterSpacing: -0.005, - - variants: { - normal: { - fontSize: 15, - lineHeight: 22, - letterSpacing: -0.009, - }, - smaller: { - fontSize: 13, - lineHeight: 18, - letterSpacing: -0.003, - }, - uppercase: { - true: { - textTransform: 'uppercase', - }, - }, - weight: { - regular: { - fontWeight: '400', - }, - medium: { - fontWeight: '500', - }, - semibold: { - fontWeight: '600', - }, - }, - } as const, - defaultVariants: { - // note tamagui uses a generic "true" token that your sizes should set to be the same as the default on your scale - size: '$true', - variant: 'normal', - weight: 'regular', - }, -}) diff --git a/packages/components/src/user-list/user-list.tsx b/packages/components/src/user-list/user-list.tsx index 8196ad88..6ad97924 100644 --- a/packages/components/src/user-list/user-list.tsx +++ b/packages/components/src/user-list/user-list.tsx @@ -2,7 +2,7 @@ import { XStack, YStack } from 'tamagui' import { Author } from '../author/author' import { Avatar } from '../avatar' -import { Paragraph } from '../typography' +import { Text } from '../text' import type { AuthorProps } from '../author/author' import type { AvatarProps } from '../avatar' @@ -37,9 +37,9 @@ const UserList = (props: Props) => { status={user.status} orientation="vertical" /> - + {user.address} - + )