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>
2023-04-11 12:30:25 +02:00 · 2023-04-11 12:30:25 +02:00 · 558faa9725
parent a0406e834a
commit 558faa9725
33 changed files with 104 additions and 79 deletions
--- 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: {
--- 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: {
--- 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',

--- 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',
      },
    },

--- 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: {
--- 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}
                    />
--- 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',
--- 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}>
+    <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',

--- 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>
--- 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>
 }
--- 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,
--- 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,

--- 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',
--- 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',
--- 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
      },
    },
  },
--- 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: {
--- 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',

--- 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"
--- 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}>
--- 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">
--- 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: {
--- 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 />} />
--- 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)"
--- 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,
--- 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>
  ),
--- 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>
--- 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
--- 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>
--- 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,
      },
--- 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: {
--- 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 }
--- 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">
--- 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={{