🎨 fix(theme): align UI controls with global radius tokens

Remove hard-coded and capped border radius overrides so shared controls and feature actions consistently follow the active theme radius.

- Replace fixed radius utilities with semantic theme-aware radius tokens
- Remove redundant `rounded-full` and pixel-based overrides from header, toolbar, Playground, and utility actions
- Drop unused `StatusBadge` rounded prop usage
- Keep existing component behavior intact while improving global theme consistency

web/default/src/assets/custom/icon-theme-system.tsx

@@ -11,7 +11,7 @@ export function IconThemeSystem({
       xmlns='http://www.w3.org/2000/svg'
       viewBox='0 0 79.86 51.14'
       className={cn(
-        'overflow-hidden rounded-[6px]',
+        'overflow-hidden rounded-md',
         'stroke-primary fill-primary group-data-unchecked:stroke-muted-foreground group-data-unchecked:fill-muted-foreground',
         className
       )}

web/default/src/components/ai-elements/branch.tsx

@@ -159,7 +159,7 @@ export const BranchPrevious = ({
     <Button
       aria-label={t('Previous branch')}
       className={cn(
-        'text-muted-foreground size-7 shrink-0 rounded-full transition-colors',
+        'text-muted-foreground size-7 shrink-0 transition-colors',
         'hover:bg-accent hover:text-foreground',
         'disabled:pointer-events-none disabled:opacity-50',
         className
@@ -190,7 +190,7 @@ export const BranchNext = ({
     <Button
       aria-label={t('Next branch')}
       className={cn(
-        'text-muted-foreground size-7 shrink-0 rounded-full transition-colors',
+        'text-muted-foreground size-7 shrink-0 transition-colors',
         'hover:bg-accent hover:text-foreground',
         'disabled:pointer-events-none disabled:opacity-50',
         className

web/default/src/components/ai-elements/conversation.tsx

@@ -90,7 +90,7 @@ export const ConversationScrollButton = ({
     !isAtBottom && (
       <Button
         className={cn(
-          'absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full',
+          'absolute bottom-4 left-[50%] translate-x-[-50%]',
           className
         )}
         onClick={handleScrollToBottom}

web/default/src/components/ai-elements/inline-citation.tsx

@@ -68,11 +68,7 @@ export const InlineCitationCardTrigger = ({
     delay={0}
     closeDelay={0}
     render={
-      <Badge
-        className={cn('ml-1 rounded-full', className)}
-        variant='secondary'
-        {...props}
-      >
+      <Badge className={cn('ml-1', className)} variant='secondary' {...props}>
         {sources[0] ? (
           <>
             {new URL(sources[0]).hostname}{' '}

web/default/src/components/ai-elements/prompt-input.tsx

@@ -429,7 +429,7 @@ export type PromptInputProps = Omit<
   ) => void | Promise<void>
   /**
    * Optional className applied to the inner InputGroup wrapper
-   * (useful for customizing rounded corners, e.g., rounded-[20px]).
+   * (useful for layout or semantic radius utilities such as rounded-xl).
    */
   groupClassName?: string
 }

web/default/src/components/ai-elements/suggestion.tsx

@@ -40,7 +40,7 @@ export const Suggestion = ({
 
   return (
     <Button
-      className={cn('cursor-pointer rounded-full px-4', className)}
+      className={cn('cursor-pointer px-4', className)}
       onClick={handleClick}
       size={size}
       type='button'

web/default/src/components/ai-elements/tool.tsx

@@ -65,7 +65,7 @@ const getStatusBadge = (status: ExtendedToolState) => {
   }
 
   return (
-    <Badge className='gap-1.5 rounded-full text-xs' variant='secondary'>
+    <Badge className='gap-1.5 text-xs' variant='secondary'>
       {icons[status]}
       {labels[status]}
     </Badge>

web/default/src/components/auto-skeleton.tsx

 import type { ReactNode } from 'react'
 import type { UseQueryResult } from '@tanstack/react-query'
 import { AutoSkeleton } from 'auto-skeleton-react'
+import { useThemeRadiusPx } from '@/lib/theme-radius'
 import { ErrorState } from '@/components/error-state'
 
 interface ContentSkeletonProps {
@@ -13,6 +14,8 @@ interface ContentSkeletonProps {
 }
 
 export function ContentSkeleton(props: ContentSkeletonProps) {
+  const themeRadius = useThemeRadiusPx()
+
   return (
     <div className={props.className}>
       <AutoSkeleton
@@ -21,7 +24,7 @@ export function ContentSkeleton(props: ContentSkeletonProps) {
           animation: 'none',
           baseColor: 'var(--skeleton-base)',
           highlightColor: 'var(--skeleton-highlight)',
-          borderRadius: props.borderRadius ?? 6,
+          borderRadius: props.borderRadius ?? themeRadius,
           minTextHeight: props.minTextHeight ?? 14,
           maxDepth: props.maxDepth ?? 10,
         }}

web/default/src/components/config-drawer.tsx

@@ -64,7 +64,7 @@ export function ConfigDrawer() {
             variant='ghost'
             aria-label={t('Open theme settings')}
             aria-describedby='config-drawer-description'
-            className='rounded-full max-md:hidden'
+            className='max-md:hidden'
           />
         }
       >
@@ -119,7 +119,7 @@ function SectionTitle(props: {
         <Button
           size='icon'
           variant='secondary'
-          className='size-4 rounded-full'
+          className='size-4'
           onClick={props.onReset}
           aria-label='Reset'
         >
@@ -148,7 +148,7 @@ function RadioGroupItem(props: {
     >
       <div
         className={cn(
-          'ring-border relative rounded-[6px] ring-[1px]',
+          'ring-border relative rounded-md ring-[1px]',
           'group-data-checked:ring-primary group-data-checked:shadow-2xl',
           'group-focus-visible:ring-2'
         )}

web/default/src/components/data-table/bulk-actions.tsx

@@ -162,7 +162,7 @@ export function DataTableBulkActions<TData>({
                   variant='outline'
                   size='icon'
                   onClick={handleClearSelection}
-                  className='size-6 rounded-full'
+                  className='size-6'
                   aria-label={t('Clear selection')}
                   title={t('Clear selection (Escape)')}
                 />

web/default/src/components/data-table/mobile-card-list.tsx

@@ -60,7 +60,7 @@ function ListSkeleton() {
         <div key={i} className='px-3 py-2.5'>
           <div className='flex items-center justify-between'>
             <Skeleton className='h-4 w-32' />
-            <Skeleton className='h-5 w-16 rounded-full' />
+            <Skeleton className='h-5 w-16 rounded-md' />
           </div>
           <div className='mt-1.5 grid grid-cols-2 gap-2'>
             <div className='flex-1'>

web/default/src/components/language-switcher.tsx

@@ -42,13 +42,7 @@ export function LanguageSwitcher() {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger
-        render={
-          <Button
-            variant='ghost'
-            size='icon'
-            className='h-9 w-9 rounded-full'
-          />
-        }
+        render={<Button variant='ghost' size='icon' className='h-9 w-9' />}
       >
         <Languages className='size-[1.2rem]' />
         <span className='sr-only'>{t('Change language')}</span>

web/default/src/components/layout/components/mockup.tsx

@@ -7,7 +7,7 @@ const mockupVariants = cva(
   {
     variants: {
       type: {
-        mobile: 'rounded-[48px] max-w-[350px]',
+        mobile: 'rounded-4xl max-w-[350px]',
         responsive: 'rounded-md',
       },
     },

web/default/src/components/layout/components/nav-group.tsx

@@ -94,7 +94,7 @@ export function NavGroup({ title, items }: NavGroupProps) {
  * Navigation badge component
  */
 function NavBadge({ children }: { children: ReactNode }) {
-  return <Badge className='rounded-full px-1 py-0 text-xs'>{children}</Badge>
+  return <Badge className='px-1 py-0 text-xs'>{children}</Badge>
 }
 
 /**

web/default/src/components/layout/components/public-header.tsx

@@ -195,8 +195,11 @@ export function PublicHeader(props: PublicHeaderProps) {
               {showAuthButtons && !loading && isAuthenticated && (
                 <ProfileDropdown />
               )}
-              <button
-                className='hover:bg-muted/40 flex size-9 items-center justify-center rounded-lg transition-colors'
+              <Button
+                type='button'
+                variant='ghost'
+                size='icon'
+                className='size-9'
                 onClick={() => setMobileOpen((v) => !v)}
                 aria-label={t('Toggle navigation menu')}
               >
@@ -220,7 +223,7 @@ export function PublicHeader(props: PublicHeaderProps) {
                     )}
                   />
                 </div>
-              </button>
+              </Button>
             </div>
           </nav>
         </div>

web/default/src/components/learn-more.tsx

@@ -25,7 +25,7 @@ export function LearnMore({
     <Popover {...props}>
       <PopoverTrigger
         {...triggerProps}
-        className={cn('size-5 rounded-full', triggerProps?.className)}
+        className={cn('size-5', triggerProps?.className)}
         render={<Button variant='outline' size='icon' />}
       >
         <span className='sr-only'>{t('Learn more')}</span>

web/default/src/components/model-group-selector.tsx

@@ -71,7 +71,7 @@ const ModelTriggerButton = React.forwardRef<
     size='sm'
     disabled={isDisabled}
     className={cn(
-      'flex h-8 items-center gap-2 rounded-full border px-3 font-medium',
+      'flex h-8 items-center gap-2 border px-3 font-medium',
       'justify-center p-0 sm:w-auto sm:justify-start sm:px-3',
       'w-8',
       'bg-background text-foreground',
@@ -107,7 +107,7 @@ const GroupTriggerButton = React.forwardRef<
     size='sm'
     disabled={isDisabled}
     className={cn(
-      'flex h-8 items-center gap-2 rounded-full border px-3 font-medium',
+      'flex h-8 items-center gap-2 border px-3 font-medium',
       'justify-center p-0 sm:w-auto sm:justify-start sm:px-3',
       'w-8',
       'bg-background text-foreground',

web/default/src/components/multi-select.tsx

@@ -70,7 +70,7 @@ export function MultiSelect({
                   variant='ghost'
                   size='icon-sm'
                   aria-label='Remove'
-                  className='ml-1 size-auto rounded-full p-0'
+                  className='ml-1 size-auto p-0'
                   onKeyDown={(e) => {
                     if (e.key === 'Enter') {
                       handleUnselect(value)

web/default/src/components/notification-button.tsx

@@ -26,7 +26,7 @@ export function NotificationButton({
         variant='ghost'
         size='icon'
         onClick={onClick}
-        className={cn('h-9 w-9 rounded-full', className)}
+        className={cn('h-9 w-9', className)}
         aria-label={t('Notifications')}
       >
         <Bell className='size-[1.2rem]' />
@@ -35,7 +35,7 @@ export function NotificationButton({
       {unreadCount > 0 && (
         <Badge
           variant='destructive'
-          className='absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums'
+          className='absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center px-1 text-[10px] font-semibold tabular-nums'
         >
           {unreadCount > 99 ? '99+' : unreadCount}
         </Badge>

web/default/src/components/profile-dropdown.tsx

@@ -38,12 +38,7 @@ export function ProfileDropdown() {
     <>
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger
-          render={
-            <Button
-              variant='ghost'
-              className='relative size-6 rounded-full p-0'
-            />
-          }
+          render={<Button variant='ghost' className='relative size-6 p-0' />}
         >
           <Avatar className='size-6'>
             <AvatarFallback

web/default/src/components/status-badge.tsx

@@ -73,8 +73,6 @@ export interface StatusBadgeProps extends Omit<
   showDot?: boolean
   variant?: StatusVariant | null
   size?: 'sm' | 'md' | 'lg' | null
-  /** @deprecated No longer applicable in flat design */
-  rounded?: 'full' | 'md' | 'sm' | 'lg'
   copyable?: boolean
   copyText?: string
   autoColor?: string
@@ -88,7 +86,6 @@ export function StatusBadge({
   size = 'sm',
   pulse = false,
   showDot = true,
-  rounded: _rounded,
   copyable = true,
   copyText,
   autoColor,

web/default/src/components/theme-quick-switcher.tsx

@@ -21,7 +21,7 @@ export function ThemeQuickSwitcher() {
         <div
           role='radiogroup'
           aria-labelledby='theme-switcher-label'
-          className='border-muted/50 bg-muted/40 inline-flex w-auto items-center gap-1.5 rounded-full border px-1.5 py-1'
+          className='border-muted/50 bg-muted/40 inline-flex w-auto items-center gap-1.5 rounded-lg border px-1.5 py-1'
         >
           <Button
             variant='ghost'
@@ -31,14 +31,14 @@ export function ThemeQuickSwitcher() {
             aria-checked={theme === 'system'}
             onClick={() => setTheme('system')}
             className={cn(
-              'relative size-7 rounded-full',
+              'relative size-7',
               theme === 'system' && 'text-accent-foreground'
             )}
           >
             {theme === 'system' && (
               <motion.span
                 layoutId='theme-switcher-active'
-                className='bg-accent ring-border absolute inset-0 rounded-full ring-1'
+                className='bg-accent ring-border absolute inset-0 rounded-md ring-1'
                 transition={{
                   type: 'spring',
                   stiffness: 500,
@@ -58,14 +58,14 @@ export function ThemeQuickSwitcher() {
             aria-checked={theme === 'light'}
             onClick={() => setTheme('light')}
             className={cn(
-              'relative size-7 rounded-full',
+              'relative size-7',
               theme === 'light' && 'text-accent-foreground'
             )}
           >
             {theme === 'light' && (
               <motion.span
                 layoutId='theme-switcher-active'
-                className='bg-accent ring-border absolute inset-0 rounded-full ring-1'
+                className='bg-accent ring-border absolute inset-0 rounded-md ring-1'
                 transition={{
                   type: 'spring',
                   stiffness: 500,
@@ -85,14 +85,14 @@ export function ThemeQuickSwitcher() {
             aria-checked={theme === 'dark'}
             onClick={() => setTheme('dark')}
             className={cn(
-              'relative size-7 rounded-full',
+              'relative size-7',
               theme === 'dark' && 'text-accent-foreground'
             )}
           >
             {theme === 'dark' && (
               <motion.span
                 layoutId='theme-switcher-active'
-                className='bg-accent ring-border absolute inset-0 rounded-full ring-1'
+                className='bg-accent ring-border absolute inset-0 rounded-md ring-1'
                 transition={{
                   type: 'spring',
                   stiffness: 500,

web/default/src/components/theme-switch.tsx

@@ -26,13 +26,7 @@ export function ThemeSwitch() {
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger
-        render={
-          <Button
-            variant='ghost'
-            size='icon'
-            className='h-9 w-9 rounded-full'
-          />
-        }
+        render={<Button variant='ghost' size='icon' className='h-9 w-9' />}
       >
         <Sun className='size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />
         <Moon className='absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />

web/default/src/components/ui/button.tsx

@@ -22,14 +22,13 @@ const buttonVariants = cva(
       size: {
         default:
           'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-md px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
         icon: 'size-8',
         'icon-xs':
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm':
-          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+          "size-6 rounded-md in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-7 rounded-md in-data-[slot=button-group]:rounded-lg',
         'icon-lg': 'size-9',
       },
     },

web/default/src/components/ui/carousel.tsx

@@ -185,7 +185,7 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        'absolute touch-manipulation rounded-full',
+        'absolute touch-manipulation',
         orientation === 'horizontal'
           ? 'top-1/2 -left-12 -translate-y-1/2'
           : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -215,7 +215,7 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        'absolute touch-manipulation rounded-full',
+        'absolute touch-manipulation',
         orientation === 'horizontal'
           ? 'top-1/2 -right-12 -translate-y-1/2'
           : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',

web/default/src/components/ui/chart.tsx

@@ -219,7 +219,7 @@ function ChartTooltipContent({
                       !hideIndicator && (
                         <div
                           className={cn(
-                            'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                            'shrink-0 rounded-sm border-(--color-border) bg-(--color-bg)',
                             {
                               'h-2.5 w-2.5': indicator === 'dot',
                               'w-1': indicator === 'line',
@@ -310,7 +310,7 @@ function ChartLegendContent({
                 <itemConfig.icon />
               ) : (
                 <div
-                  className='h-2 w-2 shrink-0 rounded-[2px]'
+                  className='h-2 w-2 shrink-0 rounded-sm'
                   style={{
                     backgroundColor: item.color,
                   }}

web/default/src/components/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot='checkbox'
       className={cn(
-        'peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
+        'peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-sm border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
         className
       )}
       {...props}

web/default/src/components/ui/input-group.tsx

@@ -22,7 +22,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -69,10 +69,9 @@ const inputGroupButtonVariants = cva(
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
         sm: '',
-        'icon-xs':
-          'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+        'icon-xs': 'size-6 rounded-md p-0 has-[>svg]:p-0',
         'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
       },
     },

web/default/src/components/ui/native-select.tsx

@@ -24,7 +24,7 @@ function NativeSelect({
       <select
         data-slot='native-select'
         data-size={size}
-        className='border-input selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5'
+        className='border-input selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-md data-[size=sm]:py-0.5'
         {...props}
       />
       <HugeiconsIcon

web/default/src/components/ui/select.tsx

@@ -46,7 +46,7 @@ function SelectTrigger({
       data-slot='select-trigger'
       data-size={size}
       className={cn(
-        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-md *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

web/default/src/components/ui/toggle-group.tsx

@@ -39,7 +39,7 @@ function ToggleGroup({
       data-orientation={orientation}
       style={{ '--gap': spacing } as React.CSSProperties}
       className={cn(
-        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]',
+        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-md',
         className
       )}
       {...props}

web/default/src/components/ui/toggle.tsx

@@ -15,7 +15,7 @@ const toggleVariants = cva(
       size: {
         default:
           'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        sm: "h-7 min-w-7 rounded-md px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
       },
     },

web/default/src/features/auth/components/oauth-callback-screen.tsx

@@ -75,7 +75,7 @@ export function OAuthCallbackScreen({
     <AuthLayout>
       <div className='w-full space-y-8'>
         <div className='flex flex-col items-center space-y-4 text-center'>
-          <div className='bg-muted flex h-16 w-16 items-center justify-center rounded-full'>
+          <div className='bg-muted flex h-16 w-16 items-center justify-center rounded-2xl'>
             <Icon className='h-8 w-8' />
           </div>
           <div className='space-y-2'>

web/default/src/features/auth/secure-verification/components/secure-verification-dialog.tsx

@@ -92,7 +92,7 @@ export function SecureVerificationDialog({
           <div className='flex-1 overflow-y-auto px-6 py-5'>
             {availableTabs.length === 0 ? (
               <div className='grid place-items-center gap-4 text-center'>
-                <div className='bg-muted flex h-16 w-16 items-center justify-center rounded-full'>
+                <div className='bg-muted flex h-16 w-16 items-center justify-center rounded-2xl'>
                   <ShieldCheck className='text-muted-foreground h-8 w-8' />
                 </div>
                 <p className='text-muted-foreground text-sm'>

web/default/src/features/channels/components/channels-columns.tsx

@@ -637,7 +637,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
                   <Tooltip>
                     <TooltipTrigger
                       render={
-                        <span className='border-border bg-muted text-primary inline-flex h-6 w-6 items-center justify-center rounded-full border' />
+                        <span className='border-border bg-muted text-primary inline-flex h-6 w-6 items-center justify-center rounded-md border' />
                       }
                     >
                       <MultiKeyModeIcon className='h-3.5 w-3.5' />

web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx

@@ -264,7 +264,7 @@ function RateLimitGroupSection(props: RateLimitGroupSectionProps) {
           <div className='text-muted-foreground flex flex-wrap items-center gap-2 text-xs'>
             {props.description && <span>{props.description}</span>}
             {props.meteredFeature && (
-              <span className='bg-muted/60 inline-flex max-w-full items-center gap-2 rounded-full px-2 py-0.5'>
+              <span className='bg-muted/60 inline-flex max-w-full items-center gap-2 rounded-md px-2 py-0.5'>
                 <span className='text-[11px]'>metered_feature</span>
                 <span className='min-w-0 font-mono text-xs break-all'>
                   {props.meteredFeature}

web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { VChart } from '@visactor/react-vchart'
 import { AreaChart, BarChart3, WalletCards } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useThemeRadiusPx } from '@/lib/theme-radius'
 import type { TimeGranularity } from '@/lib/time'
 import { VCHART_OPTION } from '@/lib/vchart'
 import { useThemeCustomization } from '@/context/theme-customization-provider'
@@ -41,6 +42,10 @@ export function ConsumptionDistributionChart(
   const { t } = useTranslation()
   const { resolvedTheme } = useTheme()
   const { customization } = useThemeCustomization()
+  const chartRadius = useThemeRadiusPx(
+    '--radius-md',
+    `${customization.preset}:${customization.radius}`
+  )
   const [chartType, setChartType] = useState<ConsumptionDistributionChartType>(
     props.defaultChartType ?? 'bar'
   )
@@ -79,9 +84,17 @@ export function ConsumptionDistributionChart(
         props.loading ? [] : props.data,
         timeGranularity,
         t,
-        customization.preset
+        customization.preset,
+        chartRadius
       ),
-    [props.data, props.loading, timeGranularity, t, customization.preset]
+    [
+      props.data,
+      props.loading,
+      timeGranularity,
+      t,
+      customization.preset,
+      chartRadius,
+    ]
   )
   const spec = chartType === 'bar' ? chartData.spec_line : chartData.spec_area
 

web/default/src/features/dashboard/components/models/model-charts.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState, useRef } from 'react'
 import { VChart } from '@visactor/react-vchart'
 import { PieChart as PieChartIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useThemeRadiusPx } from '@/lib/theme-radius'
 import type { TimeGranularity } from '@/lib/time'
 import { VCHART_OPTION } from '@/lib/vchart'
 import { useThemeCustomization } from '@/context/theme-customization-provider'
@@ -39,6 +40,10 @@ export function ModelCharts(props: ModelChartsProps) {
   const { t } = useTranslation()
   const { resolvedTheme } = useTheme()
   const { customization } = useThemeCustomization()
+  const chartRadius = useThemeRadiusPx(
+    '--radius-md',
+    `${customization.preset}:${customization.radius}`
+  )
   const [activeTab, setActiveTab] = useState<ModelAnalyticsChartTab>(
     props.defaultChartTab ?? 'trend'
   )
@@ -77,9 +82,17 @@ export function ModelCharts(props: ModelChartsProps) {
         props.loading ? [] : props.data,
         timeGranularity,
         t,
-        customization.preset
+        customization.preset,
+        chartRadius
       ),
-    [props.data, props.loading, timeGranularity, t, customization.preset]
+    [
+      props.data,
+      props.loading,
+      timeGranularity,
+      t,
+      customization.preset,
+      chartRadius,
+    ]
   )
 
   const spec = chartData[CHART_SPEC_KEYS[activeTab]]

web/default/src/features/dashboard/components/overview/overview-dashboard.tsx

@@ -209,7 +209,7 @@ function StartStepItem(props: {
       )}
       <span
         className={cn(
-          'bg-background relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full border shadow-xs',
+          'bg-background relative z-10 flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs',
           props.step.completed && 'border-success/30 bg-success/10'
         )}
       >
@@ -657,7 +657,7 @@ export function OverviewDashboard() {
                           ? t('Setup guide complete')
                           : t('Setup guide')}
                       </h3>
-                      <span className='text-muted-foreground bg-background/60 rounded-full border px-2 py-0.5 text-xs'>
+                      <span className='text-muted-foreground bg-background/60 rounded-md border px-2 py-0.5 text-xs'>
                         {t('Setup progress: {{completed}}/{{total}}', {
                           completed: completedStepCount,
                           total: startSteps.length,

web/default/src/features/dashboard/components/users/user-charts.tsx

@@ -129,6 +129,7 @@ export function UserCharts() {
       t,
       topUserLimit,
       customization.preset,
+      customization.radius,
     ]
   )
 

web/default/src/features/dashboard/lib/charts.ts

@@ -80,7 +80,8 @@ export function processChartData(
   data: QuotaDataItem[],
   timeGranularity: TimeGranularity = 'day',
   t?: TFunction,
-  themeKey?: string
+  themeKey?: string,
+  chartCornerRadius?: number
 ): ProcessedChartData {
   const tt: TFunction = t ?? ((x) => x)
   const otherLabel = tt('Other')
@@ -472,7 +473,8 @@ export function processChartData(
       valueField: 'value',
       categoryField: 'type',
       pie: {
-        style: { cornerRadius: 10 },
+        style:
+          chartCornerRadius == null ? {} : { cornerRadius: chartCornerRadius },
         state: {
           hover: { outerRadius: 0.85, stroke: '#000', lineWidth: 1 },
           selected: { outerRadius: 0.85, stroke: '#000', lineWidth: 1 },

web/default/src/features/home/components/gateway-card.tsx

@@ -15,7 +15,7 @@ export function GatewayCard({ logo, systemName }: GatewayCardProps) {
   const features = getGatewayFeatures(t)
 
   return (
-    <div className='glass-3 group border-border/50 dark:border-border/20 relative overflow-hidden rounded-[32px] border p-10 shadow-2xl transition-all duration-500 sm:p-12 dark:shadow-[0_25px_80px_-15px_rgba(0,0,0,0.4)]'>
+    <div className='glass-3 group border-border/50 dark:border-border/20 relative overflow-hidden rounded-4xl border p-10 shadow-2xl transition-all duration-500 sm:p-12 dark:shadow-[0_25px_80px_-15px_rgba(0,0,0,0.4)]'>
       {/* Top gradient border effect */}
       <Separator className='absolute top-0 left-[10%] h-[2px] w-[80%] bg-gradient-to-r from-transparent via-amber-500/80 to-transparent' />
 

web/default/src/features/keys/components/api-keys-table.tsx

@@ -62,7 +62,7 @@ function ApiKeysMobileSkeleton() {
         >
           <div className='flex items-center justify-between'>
             <Skeleton className='h-4 w-32' />
-            <Skeleton className='h-5 w-16 rounded-full' />
+            <Skeleton className='h-5 w-16 rounded-md' />
           </div>
           <div className='flex items-center justify-between gap-3'>
             <Skeleton className='h-7 w-44' />

web/default/src/features/legal/legal-document.tsx

@@ -66,7 +66,7 @@ export function LegalDocument({
         <div className='mx-auto max-w-2xl py-12'>
           <Card className='border-dashed'>
             <CardHeader className='flex flex-row items-center gap-4'>
-              <div className='bg-muted rounded-full p-2'>
+              <div className='bg-muted rounded-lg p-2'>
                 <FileWarning className='text-muted-foreground h-5 w-5' />
               </div>
               <div className='space-y-1'>

web/default/src/features/models/components/deployment-access-guard.tsx

@@ -122,7 +122,7 @@ export function DeploymentAccessGuard({
     return (
       <div className='mx-auto mt-8 max-w-md'>
         <div className='text-center'>
-          <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/20'>
+          <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-amber-100 dark:bg-amber-900/20'>
             <Server className='h-8 w-8 text-amber-600 dark:text-amber-400' />
           </div>
           <h3 className='mb-6 text-xl font-semibold'>
@@ -153,7 +153,7 @@ export function DeploymentAccessGuard({
     return (
       <div className='mx-auto mt-8 max-w-md'>
         <div className='text-center'>
-          <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20'>
+          <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100 dark:bg-red-900/20'>
             <WifiOff className='h-8 w-8 text-red-600 dark:text-red-400' />
           </div>
           <h3 className='mb-6 text-xl font-semibold'>

web/default/src/features/models/components/deployments-columns.tsx

@@ -85,7 +85,6 @@ export function useDeploymentsColumns(opts: {
             showDot={config.showDot}
             size='sm'
             copyable={false}
-            rounded='full'
           />
         )
       },
@@ -117,7 +116,6 @@ export function useDeploymentsColumns(opts: {
             autoColor={String(provider)}
             size='sm'
             copyable={false}
-            rounded='full'
           />
         )
       },
@@ -161,7 +159,6 @@ export function useDeploymentsColumns(opts: {
                   variant='info'
                   size='sm'
                   copyable={false}
-                  rounded='full'
                 />
               ) : null}
             </div>

web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx

@@ -188,7 +188,7 @@ export function PrefillGroupManagementDialog({
                   <Button
                     variant='ghost'
                     size='icon'
-                    className='text-muted-foreground hover:text-foreground absolute top-4 right-4 rounded-full border border-transparent sm:top-5 sm:right-6'
+                    className='text-muted-foreground hover:text-foreground absolute top-4 right-4 border border-transparent sm:top-5 sm:right-6'
                   />
                 }
               >

web/default/src/features/playground/components/playground-input.tsx

@@ -95,10 +95,7 @@ export function PlaygroundInput({
 
   return (
     <div className='grid shrink-0 gap-4 px-1 md:pb-4'>
-      <PromptInput
-        groupClassName='rounded-[20px] [--radius:20px]'
-        onSubmit={handleSubmit}
-      >
+      <PromptInput groupClassName='rounded-xl' onSubmit={handleSubmit}>
         <PromptInputTextarea
           autoComplete='off'
           autoCorrect='off'
@@ -117,7 +114,7 @@ export function PlaygroundInput({
               <DropdownMenuTrigger
                 render={
                   <PromptInputButton
-                    className='!rounded-full border font-medium'
+                    className='border font-medium'
                     disabled={disabled}
                     variant='outline'
                   />
@@ -156,7 +153,7 @@ export function PlaygroundInput({
             </DropdownMenu>
 
             <PromptInputButton
-              className='rounded-full border font-medium'
+              className='border font-medium'
               disabled={disabled}
               onClick={() => toast.info(t('Search feature in development'))}
               variant='outline'
@@ -180,7 +177,7 @@ export function PlaygroundInput({
 
             {isGenerating && onStop ? (
               <PromptInputButton
-                className='text-foreground rounded-full font-medium'
+                className='text-foreground font-medium'
                 onClick={onStop}
                 variant='secondary'
               >
@@ -190,7 +187,7 @@ export function PlaygroundInput({
               </PromptInputButton>
             ) : (
               <PromptInputButton
-                className='text-foreground rounded-full font-medium'
+                className='text-foreground font-medium'
                 disabled={disabled || !text.trim()}
                 type='submit'
                 variant='secondary'

web/default/src/features/playground/lib/message-styles.ts

@@ -12,7 +12,7 @@ export function getMessageContentStyles() {
     'group-[.is-user]:text-foreground',
     'group-[.is-user]:bg-secondary',
     'dark:group-[.is-user]:bg-muted',
-    'group-[.is-user]:rounded-[24px]',
+    'group-[.is-user]:rounded-3xl',
     // Assistant bubble: flat serif style (one-sided style)
     'group-[.is-assistant]:text-foreground',
     'group-[.is-assistant]:bg-transparent',

web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx

@@ -179,7 +179,7 @@ export function DynamicPricingBreakdown({
     return (
       <section className='min-w-0 py-4'>
         <div className='mb-3 flex items-center gap-2'>
-          <span className='inline-flex size-6 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
+          <span className='inline-flex size-6 items-center justify-center rounded-lg bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
             <TagIcon className='size-3.5' />
           </span>
           <div>
@@ -212,7 +212,7 @@ export function DynamicPricingBreakdown({
   return (
     <section className='min-w-0 py-3 sm:py-4'>
       <div className='mb-3 flex items-start gap-2 sm:mb-4'>
-        <span className='mt-0.5 inline-flex size-6 items-center justify-center rounded-full bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
+        <span className='mt-0.5 inline-flex size-6 items-center justify-center rounded-lg bg-amber-100 text-amber-700 shadow-sm dark:bg-amber-500/20 dark:text-amber-300'>
           <TagIcon className='size-3.5' />
         </span>
         <div>

web/default/src/features/pricing/components/loading-skeleton.tsx

@@ -67,7 +67,7 @@ function FilterBarSkeleton() {
           {[80, 90, 75, 85, 70].map((width, i) => (
             <Skeleton
               key={i}
-              className='h-8 rounded-full'
+              className='h-8 rounded-lg'
               style={{ width: `${width}px` }}
             />
           ))}

web/default/src/features/pricing/components/model-details-apps.tsx

@@ -41,7 +41,7 @@ function RankBadge(props: { rank: number }) {
   return (
     <span
       className={cn(
-        'inline-flex size-7 shrink-0 items-center justify-center rounded-full font-mono text-xs font-bold tabular-nums',
+        'inline-flex size-7 shrink-0 items-center justify-center rounded-md font-mono text-xs font-bold tabular-nums',
         palette
       )}
     >

web/default/src/features/pricing/components/model-details-charts.tsx

 import { useMemo } from 'react'
 import { VChart } from '@visactor/react-vchart'
 import { useTranslation } from 'react-i18next'
+import { useThemeRadiusPx } from '@/lib/theme-radius'
 import { useChartTheme } from '@/lib/use-chart-theme'
 import { cn } from '@/lib/utils'
 import { VCHART_OPTION } from '@/lib/vchart'
+import { useThemeCustomization } from '@/context/theme-customization-provider'
 import type { LatencyTimePoint, UptimeDayPoint } from '../lib/mock-stats'
 
 function formatHourLabel(iso: string): string {
@@ -246,6 +248,11 @@ export function ThroughputBarChart(props: {
 }) {
   const { t } = useTranslation()
   const { resolvedTheme, themeReady } = useChartTheme()
+  const { customization } = useThemeCustomization()
+  const barRadius = useThemeRadiusPx(
+    '--radius-sm',
+    `${customization.preset}:${customization.radius}`
+  )
 
   const filtered = useMemo(
     () => props.rows.filter((r) => r.throughput_tps > 0),
@@ -261,7 +268,10 @@ export function ThroughputBarChart(props: {
       xField: 'throughput_tps',
       yField: 'group',
       bar: {
-        style: { fill: '#6366f1', cornerRadius: 2 },
+        style: {
+          fill: '#6366f1',
+          ...(barRadius == null ? {} : { cornerRadius: barRadius }),
+        },
       },
       label: {
         visible: true,
@@ -294,7 +304,7 @@ export function ThroughputBarChart(props: {
         },
       },
     }
-  }, [filtered, t])
+  }, [barRadius, filtered, t])
 
   if (filtered.length === 0) {
     return null

web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx

@@ -87,7 +87,7 @@ export function UptimeSparkline(props: UptimeSparklineProps) {
               render={
                 <div
                   className={cn(
-                    'rounded-[1px] transition-opacity hover:opacity-80',
+                    'rounded-sm transition-opacity hover:opacity-80',
                     barWidth,
                     containerHeight,
                     'flex items-end'
@@ -97,7 +97,7 @@ export function UptimeSparkline(props: UptimeSparklineProps) {
             >
               <div
                 className={cn(
-                  'w-full rounded-[1px]',
+                  'w-full rounded-sm',
                   colourFor(day.uptime_pct),
                   heightFor(day.uptime_pct)
                 )}

web/default/src/features/pricing/components/pricing-sidebar.tsx

@@ -95,7 +95,7 @@ function FilterChip(props: {
       {(props.option.suffix || props.option.count != null) && (
         <span
           className={cn(
-            'rounded-full px-1.5 py-0.5 text-[10px]',
+            'rounded-md px-1.5 py-0.5 text-[10px]',
             props.active
               ? 'bg-background text-foreground'
               : 'bg-muted text-muted-foreground'

web/default/src/features/pricing/components/pricing-toolbar.tsx

@@ -154,7 +154,7 @@ export function PricingToolbar(props: PricingToolbarProps) {
             <Filter className='size-4' />
             {t('Filter')}
             {props.activeFilterCount > 0 && (
-              <Badge className='ml-0.5 size-5 justify-center rounded-full p-0 text-[10px]'>
+              <Badge className='ml-0.5 size-5 justify-center p-0 text-[10px]'>
                 {props.activeFilterCount}
               </Badge>
             )}

web/default/src/features/profile/components/checkin-calendar-card.tsx

@@ -212,13 +212,13 @@ export function CheckinCalendarCard({
         <div className='p-6'>
           <div className='flex items-start justify-between gap-4'>
             <div className='flex items-center gap-3'>
-              <Skeleton className='h-10 w-10 rounded-full' />
+              <Skeleton className='h-10 w-10 rounded-xl' />
               <div className='space-y-2'>
                 <Skeleton className='h-5 w-32' />
                 <Skeleton className='h-3 w-56' />
               </div>
             </div>
-            <Skeleton className='h-9 w-28 rounded-full' />
+            <Skeleton className='h-9 w-28 rounded-md' />
           </div>
         </div>
       </div>
@@ -280,7 +280,7 @@ export function CheckinCalendarCard({
                     {t('Daily Check-in')}
                   </h3>
                   {checkedToday && (
-                    <div className='inline-flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-600 sm:gap-1.5 sm:px-2.5 sm:text-xs dark:text-emerald-400'>
+                    <div className='inline-flex items-center gap-1 rounded-md bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-600 sm:gap-1.5 sm:px-2.5 sm:text-xs dark:text-emerald-400'>
                       <Sparkles className='h-2.5 w-2.5 sm:h-3 sm:w-3' />
                       {t('Checked in')}
                     </div>
@@ -304,7 +304,7 @@ export function CheckinCalendarCard({
               onClick={() => doCheckin()}
               disabled={checkinLoading || checkedToday}
               size='sm'
-              className='w-full shrink-0 rounded-full sm:w-auto'
+              className='w-full shrink-0 sm:w-auto'
             >
               {checkinLoading
                 ? t('Loading...')

web/default/src/features/profile/components/dialogs/telegram-bind-dialog.tsx

@@ -47,7 +47,7 @@ export function TelegramBindDialog({
           </Alert>
 
           <div className='flex flex-col items-center justify-center gap-4 rounded-lg border p-6'>
-            <div className='flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900'>
+            <div className='flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-900'>
               <Send className='h-6 w-6 text-blue-600 dark:text-blue-400' />
             </div>
 

web/default/src/features/rankings/components/market-share-section.tsx

@@ -2,8 +2,10 @@ import { useMemo } from 'react'
 import { VChart } from '@visactor/react-vchart'
 import { PieChart } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useThemeRadiusPx } from '@/lib/theme-radius'
 import { useChartTheme } from '@/lib/use-chart-theme'
 import { VCHART_OPTION } from '@/lib/vchart'
+import { useThemeCustomization } from '@/context/theme-customization-provider'
 import { formatShare, formatTokens } from '../lib/format'
 import type { RankingPeriod, VendorRanking, VendorShareSeries } from '../types'
 import { VendorLink } from './entity-links'
@@ -84,6 +86,11 @@ type MarketShareSectionProps = {
 export function MarketShareSection(props: MarketShareSectionProps) {
   const { t } = useTranslation()
   const { resolvedTheme, themeReady } = useChartTheme()
+  const { customization } = useThemeCustomization()
+  const barRadius = useThemeRadiusPx(
+    '--radius-sm',
+    `${customization.preset}:${customization.radius}`
+  )
 
   const colourMap = useMemo(
     () => buildVendorColourMap(props.history.vendors.map((v) => v.name)),
@@ -112,7 +119,9 @@ export function MarketShareSection(props: MarketShareSectionProps) {
       stack: true,
       paddingInner: 0.12,
       legends: { visible: false },
-      bar: { style: { cornerRadius: 1 } },
+      bar: {
+        style: barRadius == null ? {} : { cornerRadius: barRadius },
+      },
       color: { specified: colourMap },
       axes: [
         {
@@ -175,7 +184,7 @@ export function MarketShareSection(props: MarketShareSectionProps) {
       },
       animationAppear: { duration: 500 },
     }
-  }, [colourMap, orderedPoints])
+  }, [barRadius, colourMap, orderedPoints])
 
   const visible = props.rows.slice(0, MAX_VENDORS_IN_LIST)
   const half = Math.ceil(visible.length / 2)

web/default/src/features/rankings/components/models-section.tsx

@@ -2,8 +2,10 @@ import { useMemo } from 'react'
 import { VChart } from '@visactor/react-vchart'
 import { BarChart3, Trophy } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useThemeRadiusPx } from '@/lib/theme-radius'
 import { useChartTheme } from '@/lib/use-chart-theme'
 import { VCHART_OPTION } from '@/lib/vchart'
+import { useThemeCustomization } from '@/context/theme-customization-provider'
 import { formatTokens } from '../lib/format'
 import type { ModelHistorySeries, ModelRanking, RankingPeriod } from '../types'
 import { ModelLeaderboard } from './model-leaderboard'
@@ -32,6 +34,11 @@ type ModelsSectionProps = {
 export function ModelsSection(props: ModelsSectionProps) {
   const { t } = useTranslation()
   const { resolvedTheme, themeReady } = useChartTheme()
+  const { customization } = useThemeCustomization()
+  const barRadius = useThemeRadiusPx(
+    '--radius-sm',
+    `${customization.preset}:${customization.radius}`
+  )
 
   // Order points so the largest model appears at the bottom of every stack.
   const orderedPoints = useMemo(() => {
@@ -59,7 +66,9 @@ export function ModelsSection(props: ModelsSectionProps) {
       yField: 'tokens',
       seriesField: 'model',
       stack: true,
-      bar: { style: { cornerRadius: 1 } },
+      bar: {
+        style: barRadius == null ? {} : { cornerRadius: barRadius },
+      },
       legends: { visible: false },
       axes: [
         {
@@ -132,7 +141,7 @@ export function ModelsSection(props: ModelsSectionProps) {
       },
       animationAppear: { duration: 500 },
     }
-  }, [orderedPoints, t])
+  }, [barRadius, orderedPoints, t])
 
   return (
     <section className='bg-card overflow-hidden rounded-lg border'>

web/default/src/features/setup/components/complete-step.tsx

@@ -32,7 +32,7 @@ export function CompleteStep({ status, values }: CompleteStepProps) {
 
   return (
     <div className='flex flex-col items-center gap-6 text-center'>
-      <div className='rounded-full bg-emerald-500/10 p-4 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-300'>
+      <div className='rounded-2xl bg-emerald-500/10 p-4 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-300'>
         <CheckCircle2 className='size-8' />
       </div>
       <div className='space-y-2'>

web/default/src/features/setup/setup-wizard.tsx

@@ -320,7 +320,7 @@ export function SetupWizard() {
                     <div className='flex items-start gap-3'>
                       <span
                         className={cn(
-                          'flex size-6 items-center justify-center rounded-full border text-xs font-semibold',
+                          'flex size-6 items-center justify-center rounded-md border text-xs font-semibold',
                           isActive
                             ? 'border-primary bg-primary text-primary-foreground'
                             : isCompleted

web/default/src/features/system-settings/integrations/amount-options-visual-editor.tsx

@@ -102,7 +102,7 @@ export function AmountOptionsVisualEditor({
                     e.stopPropagation()
                     handleRemove(amount)
                   }}
-                  className='hover:bg-muted-foreground/20 size-auto rounded-full p-0.5'
+                  className='hover:bg-muted-foreground/20 size-auto p-0.5'
                   aria-label={t('Remove ${{amount}}', { amount })}
                 >
                   <X className='h-3.5 w-3.5' />

web/default/src/lib/theme-radius.ts

+import { useEffect, useState } from 'react'
+
+export function resolveThemeRadiusPx(
+  cssVariable = '--radius-md'
+): number | undefined {
+  if (typeof document === 'undefined') return undefined
+
+  const probe = document.createElement('div')
+  probe.style.borderRadius = `var(${cssVariable})`
+  probe.style.pointerEvents = 'none'
+  probe.style.position = 'absolute'
+  probe.style.visibility = 'hidden'
+
+  document.documentElement.appendChild(probe)
+  const resolvedRadius = getComputedStyle(probe).borderTopLeftRadius
+  probe.remove()
+
+  const parsedRadius = Number.parseFloat(resolvedRadius)
+  return Number.isFinite(parsedRadius) ? parsedRadius : undefined
+}
+
+export function useThemeRadiusPx(
+  cssVariable = '--radius-md',
+  refreshKey?: string
+): number | undefined {
+  const [radius, setRadius] = useState<number | undefined>()
+
+  useEffect(() => {
+    setRadius(resolveThemeRadiusPx(cssVariable))
+  }, [cssVariable, refreshKey])
+
+  return radius
+}