Migrate to border radius tokens (#365)

* fix border radius tokens across components + fix counter structure

* adjust border radius

* adjust highest token

* temporary hardcode values for blur view and image

* remove accordion

* fix new tokens

* remove unused import

---------

Co-authored-by: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>

packages/components/src/avatar/avatar.tsx

@@ -88,10 +88,10 @@ const Base = styled(Stack, {
 
     shape: {
       circle: {
-        borderRadius: 80, // big enough to cover all sizes
+        borderRadius: '$full',
       },
       rounded: {
-        borderRadius: 16,
+        borderRadius: '$16',
       },
     },
 
@@ -115,10 +115,10 @@ const Shape = styled(Stack, {
   variants: {
     shape: {
       circle: {
-        borderRadius: 80, // big enough to cover all sizes
+        borderRadius: '$full',
       },
       rounded: {
-        borderRadius: 16,
+        borderRadius: '$16',
       },
     },
   },
@@ -131,7 +131,7 @@ const Indicator = styled(Stack, {
   zIndex: 2,
   borderWidth: 2,
   borderColor: '$white-100',
-  borderRadius: 10,
+  borderRadius: '$10',
 
   variants: {
     size: {

packages/components/src/avatar/channel-avatar.tsx

@@ -60,7 +60,7 @@ const LockBase = styled(Stack, {
   height: 16,
   backgroundColor: '$white-100',
   position: 'absolute',
-  borderRadius: 16,
+  borderRadius: '$16',
 
   variants: {
     variant: {

packages/components/src/avatar/icon-avatar.tsx

@@ -24,7 +24,7 @@ const IconAvatar = (props: Props) => {
 }
 
 const Base = styled(Stack, {
-  borderRadius: 80,
+  borderRadius: '$full',
   justifyContent: 'center',
   alignItems: 'center',
 

packages/components/src/button/button.tsx

@@ -162,16 +162,16 @@ const Base = styled(Stack, {
 
     radius: {
       full: {
-        borderRadius: 40,
+        borderRadius: '$full',
       },
       40: {
-        borderRadius: 12,
+        borderRadius: '$12',
       },
       32: {
-        borderRadius: 10,
+        borderRadius: '$10',
       },
       24: {
-        borderRadius: 8,
+        borderRadius: '$8',
       },
     },
 

packages/components/src/channel/channel.tsx

@@ -114,7 +114,7 @@ const Base = styled(Stack, {
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: 8,
-  borderRadius: 12,
+  borderRadius: '$12',
   userSelect: 'none',
 
   variants: {

packages/components/src/composer/composer.tsx

@@ -50,7 +50,7 @@ const Composer = (props: Props) => {
     <BlurView
       intensity={40}
       style={{
-        borderRadius: 20,
+        borderRadius: 20, // hardcoded, once blur view is hooked up to theme, this should be changed to token
         width: '100%',
       }}
     >
@@ -143,7 +143,7 @@ const Composer = (props: Props) => {
                       backgroundColor="$background"
                       width={15}
                       height={15}
-                      borderRadius={7}
+                      borderRadius="$8"
                       position="absolute"
                       zIndex={1}
                     />

packages/components/src/context-tag/context-tag.tsx

@@ -98,7 +98,7 @@ export type { Props as ContextTagProps }
 const Base = styled(View, {
   backgroundColor: '$neutral-10',
   paddingVertical: 1,
-  borderRadius: 20,
+  borderRadius: '$20',
   display: 'inline-flex',
   flexDirection: 'row',
   alignItems: 'center',

packages/components/src/counter/counter.tsx

@@ -16,10 +16,12 @@ const Counter = (props: Props) => {
   const { value, type = 'default' } = props
 
   return (
-    <Base type={type}>
+    <Base>
+      <Content type={type}>
         <Text size={11} weight="medium" color={textColors[type]}>
           {value > 99 ? '99+' : value}
         </Text>
+      </Content>
     </Base>
   )
 }
@@ -28,17 +30,24 @@ export { Counter }
 export type { Props as CounterProps }
 
 const Base = styled(View, {
-  backgroundColor: '$primary-50',
+  padding: 2,
-  paddingHorizontal: 3,
-  paddingVertical: 0,
-  borderRadius: 6, // TODO: use tokens when fixed its definition
-  height: 16,
-  minWidth: 16,
-  maxWidth: 28,
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',
   flexBasis: 'fit-content',
+})
+
+const Content = styled(View, {
+  backgroundColor: '$primary-50',
+  paddingHorizontal: 3,
+  paddingVertical: 0,
+  borderRadius: '$6',
+  minHeight: 16,
+  maxHeight: 16,
+  minWidth: 16,
+  maxWidth: 28,
+  justifyContent: 'center',
+  alignItems: 'center',
   borderWidth: 1,
   borderColor: 'transparent',
 

packages/components/src/dialog/dialog.stories.tsx

@@ -25,7 +25,7 @@ export const Default: Story = {
     <Dialog>
       <Button>Trigger</Button>
 
-      <Dialog.Content borderRadius={16} width={400}>
+      <Dialog.Content borderRadius="$16" width={400}>
         test
       </Dialog.Content>
     </Dialog>

packages/components/src/dialog/dialog.tsx

@@ -73,7 +73,7 @@ const PressableTrigger = forwardRef(function _PressableTrigger(
 
 interface DialogContentProps {
   children: React.ReactNode
-  borderRadius: 8 | 12 | 16
+  borderRadius: '$8' | '$12' | '$16'
   width: number
   initialFocusRef?: React.RefObject<HTMLElement>
 }

packages/components/src/dropdown-menu/dropdown-menu.tsx

@@ -60,7 +60,7 @@ const Content = styled(DropdownMenuContent, {
 
   width: 256,
   padding: 4,
-  borderRadius: 12,
+  borderRadius: '$12',
   backgroundColor: '$white-100',
 
   shadowRadius: 30,
@@ -76,7 +76,7 @@ const ItemBase = styled(DropdownMenuItem, {
   alignItems: 'center',
   height: 32,
   paddingHorizontal: 8,
-  borderRadius: 10,
+  borderRadius: '$10',
   cursor: 'pointer',
   userSelect: 'none',
   gap: 8,

packages/components/src/dynamic-button/dynamic-button.tsx

@@ -24,7 +24,7 @@ const DynamicButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
   const showCount = Boolean(count)
 
   return (
-    <Shadow variant="$2" borderRadius={999}>
+    <Shadow variant="$2" borderRadius="$full">
       <Button
         {...(pressableProps as unknown as object)} // TODO: Tamagui has incorrect types for PressableProps
         ref={ref}
@@ -60,7 +60,7 @@ const Button = styled(Stack, {
   justifyContent: 'center',
   flexShrink: 0,
   height: 24,
-  borderRadius: 999,
+  borderRadius: '$full',
   animation: 'fast',
   space: 3,
 

packages/components/src/gap-messages/gap-messages.tsx

@@ -84,7 +84,7 @@ const Circle = styled(Stack, {
   name: 'Circle',
   width: 8,
   height: 8,
-  borderRadius: 4,
+  borderRadius: '$4',
   backgroundColor: '$neutral-5',
   marginRight: 7,
 })
@@ -93,7 +93,7 @@ const EmptyCircle = styled(Stack, {
   name: 'EmptyCircle',
   width: 8,
   height: 8,
-  borderRadius: 4,
+  borderRadius: '$4',
   backgroundColor: 'transparent',
   borderWidth: 1,
   borderColor: '$neutral-40',

packages/components/src/icon-button/icon-button.tsx

@@ -68,7 +68,7 @@ const Base = styled(Stack, {
 
   cursor: 'pointer',
   userSelect: 'none',
-  borderRadius: 10,
+  borderRadius: '$10',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',

packages/components/src/image/image.tsx

@@ -60,10 +60,10 @@ const Base = styled(RNImage, {
     radius: {
       none: {},
       12: {
-        borderRadius: 12,
+        borderRadius: 12, // fix this once Image is migrated to tamagui image
       },
       full: {
-        borderRadius: 9999,
+        borderRadius: 999, // fix this once Image is migrated to tamagui image
       },
     },
   },

packages/components/src/information-box/information-box.tsx

@@ -113,7 +113,7 @@ const Base = styled(Stack, {
 
   py: 11,
   px: 16,
-  borderRadius: 12,
+  borderRadius: '$12',
 
   variants: {
     variant: {

packages/components/src/input/input.tsx

@@ -25,7 +25,7 @@ export const InputFrame = styled(
     backgroundColor: 'transparent',
 
     height: 32,
-    borderRadius: 12,
+    borderRadius: '$12',
 
     animation: 'fast',
 

packages/components/src/messages/components/actions.tsx

@@ -42,7 +42,7 @@ export const Actions = (props: Props) => {
       position="absolute"
       top={-8}
       right={8}
-      borderRadius={12}
+      borderRadius="$12"
       borderWidth={1}
       borderColor="$neutral-10"
       backgroundColor="$white-100"

packages/components/src/messages/components/reactions-dialog.tsx

@@ -60,7 +60,7 @@ export const ReactionsDialog = (props: Props) => {
   }, [reactions])
 
   return (
-    <Dialog.Content width={352} borderRadius={12}>
+    <Dialog.Content width={352} borderRadius="$12">
       <Tabs defaultValue={initialReactionType}>
         <Stack padding={16}>
           <Tabs.List size={24}>

packages/components/src/messages/components/reactions.tsx

@@ -80,7 +80,7 @@ const Reaction = (props: ReactionProps) => {
               </Text>
               <Stack
                 backgroundColor="$turquoise-50-opa-10"
-                borderRadius={6}
+                borderRadius="$6"
                 paddingHorizontal={4}
               >
                 <Text size={13} weight="medium" color="$turquoise-50">

packages/components/src/messages/message.tsx

@@ -27,7 +27,7 @@ const Base = styled(Stack, {
   position: 'relative',
   paddingHorizontal: 8,
   paddingVertical: 8,
-  borderRadius: 16,
+  borderRadius: '$16',
   alignItems: 'flex-start',
 
   variants: {

packages/components/src/pinned-message/pinned-message.tsx

@@ -26,7 +26,7 @@ const PinnedMessage = (props: Props) => {
         </Banner>
       </Pressable>
 
-      <Dialog.Content width={480} borderRadius={16}>
+      <Dialog.Content width={480} borderRadius="$16">
         <Stack padding={16} alignItems="flex-start">
           <Close asChild>
             <Button variant="grey" size={32} icon={<CloseIcon />} />

packages/components/src/popover/popover.tsx

@@ -38,7 +38,7 @@ const PopoverContent = (props: ContentProps) => {
   return (
     <Stack
       backgroundColor="$white-100"
-      borderRadius={12}
+      borderRadius="$12"
       shadowRadius={30}
       shadowOffset="0px 8px"
       shadowColor="rgba(9, 16, 28, 0.12)"

packages/components/src/react-button/react-button.tsx

@@ -81,7 +81,7 @@ const Button = styled(Stack, {
   animation: 'fast',
   space: 4,
 
-  borderRadius: 8,
+  borderRadius: '$8',
   minWidth: 36,
   height: 24,
   paddingHorizontal: 8,

packages/components/src/shadow/shadow.stories.tsx

@@ -30,7 +30,7 @@ export const Default: Story = {
         height={50}
         borderWidth={1}
         borderColor="$neutral-20"
-        borderRadius={12}
+        borderRadius="$12"
       />
       <Shadow
         variant="$2"
@@ -38,7 +38,7 @@ export const Default: Story = {
         height={50}
         borderWidth={1}
         borderColor="$neutral-20"
-        borderRadius={12}
+        borderRadius="$12"
       />
       <Shadow
         variant="$3"
@@ -46,7 +46,7 @@ export const Default: Story = {
         height={50}
         borderWidth={1}
         borderColor="$neutral-20"
-        borderRadius={12}
+        borderRadius="$12"
       />
       <Shadow
         variant="$4"
@@ -54,7 +54,7 @@ export const Default: Story = {
         height={50}
         borderWidth={1}
         borderColor="$neutral-20"
-        borderRadius={12}
+        borderRadius="$12"
       />
     </Stack>
   ),

packages/components/src/skeleton/sidebar-skeleton.tsx

@@ -26,7 +26,7 @@ const SidebarSkeleton = () => {
             <Skeleton
               height={80}
               width={80}
-              borderRadius={40}
+              borderRadius="$full"
               borderWidth={2}
               borderColor="$white-100"
               variant="secondary"
@@ -35,21 +35,21 @@ const SidebarSkeleton = () => {
           <Skeleton
             height={24}
             width={104}
-            borderRadius={8}
+            borderRadius="$8"
             mb={14}
             variant="secondary"
           />
           <Skeleton
             height={16}
             width={312}
-            borderRadius={8}
+            borderRadius="$8"
             mb={8}
             variant="secondary"
           />
           <Skeleton
             height={16}
             width={272}
-            borderRadius={8}
+            borderRadius="$8"
             mb={12}
             variant="secondary"
           />
@@ -58,30 +58,30 @@ const SidebarSkeleton = () => {
             <Skeleton
               height={12}
               width={50}
-              borderRadius={5}
+              borderRadius="$6"
               variant="secondary"
             />
             <Skeleton height={14} width={14} ml={12} mr={4} />
             <Skeleton
               height={12}
               width={50}
-              borderRadius={5}
+              borderRadius="$6"
               variant="secondary"
             />
           </Stack>
           <Stack flexDirection="row" alignItems="center" mb={27} gap={8}>
-            <Skeleton height={24} width={76} borderRadius={20} />
+            <Skeleton height={24} width={76} borderRadius="$20" />
-            <Skeleton height={24} width={76} borderRadius={20} />
+            <Skeleton height={24} width={76} borderRadius="$20" />
-            <Skeleton height={24} width={76} borderRadius={20} />
+            <Skeleton height={24} width={76} borderRadius="$20" />
           </Stack>
           <Stack mb={27}>
-            <Skeleton height={12} width={50} borderRadius={5} mb={19} />
+            <Skeleton height={12} width={50} borderRadius="$6" mb={19} />
             <Stack flexDirection="row" alignItems="center" mb={16}>
               <Skeleton height={24} width={24} mr={8} />
               <Skeleton
                 height={12}
                 width={80}
-                borderRadius={5}
+                borderRadius="$6"
                 variant="secondary"
               />
             </Stack>
@@ -90,7 +90,7 @@ const SidebarSkeleton = () => {
               <Skeleton
                 height={12}
                 width={100}
-                borderRadius={5}
+                borderRadius="$6"
                 variant="secondary"
               />
             </Stack>
@@ -99,7 +99,7 @@ const SidebarSkeleton = () => {
               <Skeleton
                 height={12}
                 width={70}
-                borderRadius={5}
+                borderRadius="$6"
                 variant="secondary"
               />
             </Stack>
@@ -108,7 +108,7 @@ const SidebarSkeleton = () => {
               <Skeleton
                 height={12}
                 width={90}
-                borderRadius={5}
+                borderRadius="$6"
                 variant="secondary"
               />
             </Stack>
@@ -120,7 +120,7 @@ const SidebarSkeleton = () => {
               <Skeleton
                 height={12}
                 width={80}
-                borderRadius={5}
+                borderRadius="$6"
                 variant="secondary"
               />
             </Stack>
@@ -129,7 +129,7 @@ const SidebarSkeleton = () => {
               <Skeleton
                 height={12}
                 width={100}
-                borderRadius={5}
+                borderRadius="$6"
                 variant="secondary"
               />
             </Stack>
@@ -138,7 +138,7 @@ const SidebarSkeleton = () => {
               <Skeleton
                 height={12}
                 width={70}
-                borderRadius={5}
+                borderRadius="$6"
                 variant="secondary"
               />
             </Stack>

packages/components/src/skeleton/skeleton.tsx

@@ -1,11 +1,12 @@
 import { Stack, useTheme } from '@tamagui/core'
 
+import type { RadiusTokens } from '../tokens'
 import type { ColorTokens, StackProps } from '@tamagui/core'
 
 type Props = StackProps & {
   width?: number | string
   height?: number | string
-  borderRadius?: number
+  borderRadius?: RadiusTokens
   variant?: 'primary' | 'secondary'
 }
 
@@ -18,7 +19,7 @@ const Skeleton = (props: Props) => {
   const {
     width = 32,
     height = 32,
-    borderRadius = 16,
+    borderRadius = '$16',
     variant = 'primary',
     ...rest
   } = props

packages/components/src/skeleton/topbar-skeleton.tsx

@@ -30,7 +30,7 @@ const TopbarSkeleton = () => {
             <Skeleton
               height={16}
               width={92}
-              borderRadius={5}
+              borderRadius="$6"
               variant="secondary"
             />
           </Stack>
@@ -42,8 +42,8 @@ const TopbarSkeleton = () => {
             flexGrow={1}
             flexShrink={1}
           >
-            <Skeleton height={32} width={32} borderRadius={10} />
+            <Skeleton height={32} width={32} borderRadius="$10" />
-            <Skeleton height={32} width={32} borderRadius={10} />
+            <Skeleton height={32} width={32} borderRadius="$10" />
           </Stack>
         </Stack>
       </Stack>

packages/components/src/tabs/tabs.tsx

@@ -127,13 +127,13 @@ const TriggerBase = styled(Stack, {
     size: {
       32: {
         height: 32,
-        borderRadius: 10,
+        borderRadius: '$10',
         paddingHorizontal: 12,
         gap: 6,
       },
       24: {
         height: 24,
-        borderRadius: 8,
+        borderRadius: '$8',
         paddingHorizontal: 8,
         gap: 4,
       },

packages/components/src/toast/toast.tsx

@@ -75,7 +75,7 @@ const Base = styled(Stack, {
   width: 351,
   minHeight: 40,
   backgroundColor: '$neutral-80-opa-70',
-  borderRadius: 12,
+  borderRadius: '$12',
   justifyContent: 'space-between',
 
   variants: {

packages/components/src/tokens.ts

@@ -1,5 +1,5 @@
 import { createTokens } from '@tamagui/core'
-import { radius, size, space, zIndex } from '@tamagui/theme-base'
+import { size, space, zIndex } from '@tamagui/theme-base'
 
 export const tokens = createTokens({
   color: {
@@ -184,5 +184,20 @@ export const tokens = createTokens({
   size,
   space,
   zIndex,
-  radius,
+  radius: {
+    0: 0,
+    4: 4,
+    6: 6,
+    8: 8,
+    10: 10,
+    12: 12,
+    16: 16,
+    20: 20,
+    full: 1000,
+  },
 })
+
+type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`
+type RadiusTokens = GetTokenString<keyof typeof tokens.radius> | number
+
+export { type RadiusTokens }

packages/components/src/tooltip/tooltip.tsx

@@ -60,7 +60,7 @@ const Tooltip = (props: Props, ref: Ref<HTMLButtonElement>) => {
               backgroundColor="$white-100"
               paddingVertical={6}
               paddingHorizontal={12}
-              borderRadius={8}
+              borderRadius="$8"
             >
               {typeof content === 'string' ? (
                 <Text size={13} weight="medium" color="$neutral-100">

packages/components/src/user-list/user-list.tsx

@@ -24,7 +24,7 @@ const UserList = (props: Props) => {
             key={user.address! + index}
             padding={8}
             gap={8}
-            borderRadius={12}
+            borderRadius="$12"
             alignItems="center"
             cursor="pointer"
             hoverStyle={{