From 558faa97254c1bb2b1778f00b90cc54ba376733e Mon Sep 17 00:00:00 2001
From: Jakub Kotula <520927+jkbktl@users.noreply.github.com>
Date: Tue, 11 Apr 2023 12:30:25 +0200
Subject: [PATCH] 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     | 10 +++---
 .../components/src/avatar/channel-avatar.tsx  |  2 +-
 .../components/src/avatar/icon-avatar.tsx     |  2 +-
 packages/components/src/button/button.tsx     |  8 ++---
 packages/components/src/channel/channel.tsx   |  2 +-
 packages/components/src/composer/composer.tsx |  4 +--
 .../src/context-tag/context-tag.tsx           |  2 +-
 packages/components/src/counter/counter.tsx   | 31 +++++++++++------
 .../components/src/dialog/dialog.stories.tsx  |  2 +-
 packages/components/src/dialog/dialog.tsx     |  2 +-
 .../src/dropdown-menu/dropdown-menu.tsx       |  4 +--
 .../src/dynamic-button/dynamic-button.tsx     |  4 +--
 .../src/gap-messages/gap-messages.tsx         |  4 +--
 .../src/icon-button/icon-button.tsx           |  2 +-
 packages/components/src/image/image.tsx       |  4 +--
 .../src/information-box/information-box.tsx   |  2 +-
 packages/components/src/input/input.tsx       |  2 +-
 .../src/messages/components/actions.tsx       |  2 +-
 .../messages/components/reactions-dialog.tsx  |  2 +-
 .../src/messages/components/reactions.tsx     |  2 +-
 packages/components/src/messages/message.tsx  |  2 +-
 .../src/pinned-message/pinned-message.tsx     |  2 +-
 packages/components/src/popover/popover.tsx   |  2 +-
 .../src/react-button/react-button.tsx         |  2 +-
 .../components/src/shadow/shadow.stories.tsx  |  8 ++---
 .../src/skeleton/sidebar-skeleton.tsx         | 34 +++++++++----------
 packages/components/src/skeleton/skeleton.tsx |  5 +--
 .../src/skeleton/topbar-skeleton.tsx          |  6 ++--
 packages/components/src/tabs/tabs.tsx         |  4 +--
 packages/components/src/toast/toast.tsx       |  2 +-
 packages/components/src/tokens.ts             | 19 +++++++++--
 packages/components/src/tooltip/tooltip.tsx   |  2 +-
 .../components/src/user-list/user-list.tsx    |  2 +-
 33 files changed, 104 insertions(+), 79 deletions(-)

diff --git a/packages/components/src/avatar/avatar.tsx b/packages/components/src/avatar/avatar.tsx
index 5cb8fa4c..b679eeb9 100644
--- a/packages/components/src/avatar/avatar.tsx
+++ b/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: {
diff --git a/packages/components/src/avatar/channel-avatar.tsx b/packages/components/src/avatar/channel-avatar.tsx
index 377d452e..c8ad96b4 100644
--- a/packages/components/src/avatar/channel-avatar.tsx
+++ b/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: {
diff --git a/packages/components/src/avatar/icon-avatar.tsx b/packages/components/src/avatar/icon-avatar.tsx
index 945617d2..e972d577 100644
--- a/packages/components/src/avatar/icon-avatar.tsx
+++ b/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',
 
diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
index 27d3cb9c..7f5f82b0 100644
--- a/packages/components/src/button/button.tsx
+++ b/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',
       },
     },
 
diff --git a/packages/components/src/channel/channel.tsx b/packages/components/src/channel/channel.tsx
index 9af9a530..dc8382fc 100644
--- a/packages/components/src/channel/channel.tsx
+++ b/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: {
diff --git a/packages/components/src/composer/composer.tsx b/packages/components/src/composer/composer.tsx
index 9e52862c..ac1c847b 100644
--- a/packages/components/src/composer/composer.tsx
+++ b/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}
                     />
diff --git a/packages/components/src/context-tag/context-tag.tsx b/packages/components/src/context-tag/context-tag.tsx
index 3eee5430..2aa3520d 100644
--- a/packages/components/src/context-tag/context-tag.tsx
+++ b/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',
diff --git a/packages/components/src/counter/counter.tsx b/packages/components/src/counter/counter.tsx
index a5965555..840b4d7f 100644
--- a/packages/components/src/counter/counter.tsx
+++ b/packages/components/src/counter/counter.tsx
@@ -16,10 +16,12 @@ const Counter = (props: Props) => {
   const { value, type = 'default' } = props
 
   return (
-    <Base type={type}>
-      <Text size={11} weight="medium" color={textColors[type]}>
-        {value > 99 ? '99+' : value}
-      </Text>
+    <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',
-  paddingHorizontal: 3,
-  paddingVertical: 0,
-  borderRadius: 6, // TODO: use tokens when fixed its definition
-  height: 16,
-  minWidth: 16,
-  maxWidth: 28,
+  padding: 2,
   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',
 
diff --git a/packages/components/src/dialog/dialog.stories.tsx b/packages/components/src/dialog/dialog.stories.tsx
index b616533f..7f8ed71e 100644
--- a/packages/components/src/dialog/dialog.stories.tsx
+++ b/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>
diff --git a/packages/components/src/dialog/dialog.tsx b/packages/components/src/dialog/dialog.tsx
index 306dda0f..82b5c4c8 100644
--- a/packages/components/src/dialog/dialog.tsx
+++ b/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>
 }
diff --git a/packages/components/src/dropdown-menu/dropdown-menu.tsx b/packages/components/src/dropdown-menu/dropdown-menu.tsx
index 8621706e..53e5b511 100644
--- a/packages/components/src/dropdown-menu/dropdown-menu.tsx
+++ b/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,
diff --git a/packages/components/src/dynamic-button/dynamic-button.tsx b/packages/components/src/dynamic-button/dynamic-button.tsx
index 090feb40..bf7a4e28 100644
--- a/packages/components/src/dynamic-button/dynamic-button.tsx
+++ b/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,
 
diff --git a/packages/components/src/gap-messages/gap-messages.tsx b/packages/components/src/gap-messages/gap-messages.tsx
index cae477cc..e02663bf 100644
--- a/packages/components/src/gap-messages/gap-messages.tsx
+++ b/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',
diff --git a/packages/components/src/icon-button/icon-button.tsx b/packages/components/src/icon-button/icon-button.tsx
index 810b4fc5..bd58de10 100644
--- a/packages/components/src/icon-button/icon-button.tsx
+++ b/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',
diff --git a/packages/components/src/image/image.tsx b/packages/components/src/image/image.tsx
index b1541339..56e8471e 100644
--- a/packages/components/src/image/image.tsx
+++ b/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
       },
     },
   },
diff --git a/packages/components/src/information-box/information-box.tsx b/packages/components/src/information-box/information-box.tsx
index 98fd291e..522e35a7 100644
--- a/packages/components/src/information-box/information-box.tsx
+++ b/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: {
diff --git a/packages/components/src/input/input.tsx b/packages/components/src/input/input.tsx
index 6b5b8a64..54034d72 100644
--- a/packages/components/src/input/input.tsx
+++ b/packages/components/src/input/input.tsx
@@ -25,7 +25,7 @@ export const InputFrame = styled(
     backgroundColor: 'transparent',
 
     height: 32,
-    borderRadius: 12,
+    borderRadius: '$12',
 
     animation: 'fast',
 
diff --git a/packages/components/src/messages/components/actions.tsx b/packages/components/src/messages/components/actions.tsx
index e79086aa..ef49f6ab 100644
--- a/packages/components/src/messages/components/actions.tsx
+++ b/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"
diff --git a/packages/components/src/messages/components/reactions-dialog.tsx b/packages/components/src/messages/components/reactions-dialog.tsx
index ad6670f0..26253c23 100644
--- a/packages/components/src/messages/components/reactions-dialog.tsx
+++ b/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}>
diff --git a/packages/components/src/messages/components/reactions.tsx b/packages/components/src/messages/components/reactions.tsx
index 8de1bf3b..a0048a6d 100644
--- a/packages/components/src/messages/components/reactions.tsx
+++ b/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">
diff --git a/packages/components/src/messages/message.tsx b/packages/components/src/messages/message.tsx
index beb6f09f..ff70a6d9 100644
--- a/packages/components/src/messages/message.tsx
+++ b/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: {
diff --git a/packages/components/src/pinned-message/pinned-message.tsx b/packages/components/src/pinned-message/pinned-message.tsx
index 6903be37..1cc32cf3 100644
--- a/packages/components/src/pinned-message/pinned-message.tsx
+++ b/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 />} />
diff --git a/packages/components/src/popover/popover.tsx b/packages/components/src/popover/popover.tsx
index b054f7fb..592f1430 100644
--- a/packages/components/src/popover/popover.tsx
+++ b/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)"
diff --git a/packages/components/src/react-button/react-button.tsx b/packages/components/src/react-button/react-button.tsx
index 2c2ebcfe..1b8f3528 100644
--- a/packages/components/src/react-button/react-button.tsx
+++ b/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,
diff --git a/packages/components/src/shadow/shadow.stories.tsx b/packages/components/src/shadow/shadow.stories.tsx
index af40ade8..a4b11eeb 100644
--- a/packages/components/src/shadow/shadow.stories.tsx
+++ b/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>
   ),
diff --git a/packages/components/src/skeleton/sidebar-skeleton.tsx b/packages/components/src/skeleton/sidebar-skeleton.tsx
index d77124c1..b009c469 100644
--- a/packages/components/src/skeleton/sidebar-skeleton.tsx
+++ b/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>
diff --git a/packages/components/src/skeleton/skeleton.tsx b/packages/components/src/skeleton/skeleton.tsx
index ef3d3a5d..b96a4064 100644
--- a/packages/components/src/skeleton/skeleton.tsx
+++ b/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
diff --git a/packages/components/src/skeleton/topbar-skeleton.tsx b/packages/components/src/skeleton/topbar-skeleton.tsx
index 5905e0bb..fd3cf799 100644
--- a/packages/components/src/skeleton/topbar-skeleton.tsx
+++ b/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>
diff --git a/packages/components/src/tabs/tabs.tsx b/packages/components/src/tabs/tabs.tsx
index b8c3ecca..fe374f0d 100644
--- a/packages/components/src/tabs/tabs.tsx
+++ b/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,
       },
diff --git a/packages/components/src/toast/toast.tsx b/packages/components/src/toast/toast.tsx
index 7361e23b..74b957a8 100644
--- a/packages/components/src/toast/toast.tsx
+++ b/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: {
diff --git a/packages/components/src/tokens.ts b/packages/components/src/tokens.ts
index 63e37e63..812453e4 100644
--- a/packages/components/src/tokens.ts
+++ b/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 }
diff --git a/packages/components/src/tooltip/tooltip.tsx b/packages/components/src/tooltip/tooltip.tsx
index 889ab69a..d7370282 100644
--- a/packages/components/src/tooltip/tooltip.tsx
+++ b/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">
diff --git a/packages/components/src/user-list/user-list.tsx b/packages/components/src/user-list/user-list.tsx
index f41a7bd3..71d4dac4 100644
--- a/packages/components/src/user-list/user-list.tsx
+++ b/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={{