admin777/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
t0ng7u 2026-05-08 01:50:03 +08:00
parent c19d5aa663
commit 948780e3fa
64 changed files with 193 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/default/src/assets/custom/icon-theme-system.tsx vendored
View File

@ -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
)}

4
web/default/src/components/ai-elements/branch.tsx vendored
View File

@ -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

2
web/default/src/components/ai-elements/conversation.tsx vendored
View File

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

6
web/default/src/components/ai-elements/inline-citation.tsx vendored
View File

@ -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}{' '}

2
web/default/src/components/ai-elements/prompt-input.tsx vendored
View File

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

2
web/default/src/components/ai-elements/suggestion.tsx vendored
View File

@ -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'

2
web/default/src/components/ai-elements/tool.tsx vendored
View File

@ -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>

5
web/default/src/components/auto-skeleton.tsx vendored
View File

@ -1,6 +1,7 @@
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,
}}

6
web/default/src/components/config-drawer.tsx vendored
View File

@ -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'
)}

2
web/default/src/components/data-table/bulk-actions.tsx vendored
View File

@ -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)')}
/>

2
web/default/src/components/data-table/mobile-card-list.tsx vendored
View File

@ -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'>

8
web/default/src/components/language-switcher.tsx vendored
View File

@ -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>

2
web/default/src/components/layout/components/mockup.tsx vendored
View File

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

2
web/default/src/components/layout/components/nav-group.tsx vendored
View File

@ -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>
}
/**

9
web/default/src/components/layout/components/public-header.tsx vendored
View File

@ -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>

2
web/default/src/components/learn-more.tsx vendored
View File

@ -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>

4
web/default/src/components/model-group-selector.tsx vendored
View File

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

2
web/default/src/components/multi-select.tsx vendored
View File

@ -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)

4
web/default/src/components/notification-button.tsx vendored
View File

@ -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>

7
web/default/src/components/profile-dropdown.tsx vendored
View File

@ -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

3
web/default/src/components/status-badge.tsx vendored
View File

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

14
web/default/src/components/theme-quick-switcher.tsx vendored
View File

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

8
web/default/src/components/theme-switch.tsx vendored
View File

@ -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' />

9
web/default/src/components/ui/button.tsx vendored
View File

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

4
web/default/src/components/ui/carousel.tsx vendored
View File

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

4
web/default/src/components/ui/chart.tsx vendored
View File

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

2
web/default/src/components/ui/checkbox.tsx vendored
View File

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

7
web/default/src/components/ui/input-group.tsx vendored
View File

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

2
web/default/src/components/ui/native-select.tsx vendored
View File

@ -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

2
web/default/src/components/ui/select.tsx vendored
View File

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

2
web/default/src/components/ui/toggle-group.tsx vendored
View File

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

2
web/default/src/components/ui/toggle.tsx vendored
View File

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

2
web/default/src/features/auth/components/oauth-callback-screen.tsx vendored
View File

@ -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'>

2
web/default/src/features/auth/secure-verification/components/secure-verification-dialog.tsx vendored
View File

@ -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'>

2
web/default/src/features/channels/components/channels-columns.tsx vendored
View File

@ -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' />

2
web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx vendored
View File

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

17
web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx vendored
View File

@ -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

17
web/default/src/features/dashboard/components/models/model-charts.tsx vendored
View File

@ -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]]

4
web/default/src/features/dashboard/components/overview/overview-dashboard.tsx vendored
View File

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

1
web/default/src/features/dashboard/components/users/user-charts.tsx vendored
View File

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

6
web/default/src/features/dashboard/lib/charts.ts vendored
View File

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

2
web/default/src/features/home/components/gateway-card.tsx vendored
View File

@ -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' />

2
web/default/src/features/keys/components/api-keys-table.tsx vendored
View File

@ -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' />

2
web/default/src/features/legal/legal-document.tsx vendored
View File

@ -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'>

4
web/default/src/features/models/components/deployment-access-guard.tsx vendored
View File

@ -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'>

3
web/default/src/features/models/components/deployments-columns.tsx vendored
View File

@ -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>

2
web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx vendored
View File

@ -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'
/>
}
>

13
web/default/src/features/playground/components/playground-input.tsx vendored
View File

@ -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'

2
web/default/src/features/playground/lib/message-styles.ts vendored
View File

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

4
web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx vendored
View File

@ -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>

2
web/default/src/features/pricing/components/loading-skeleton.tsx vendored
View File

@ -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` }}
/>
))}

2
web/default/src/features/pricing/components/model-details-apps.tsx vendored
View File

@ -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
)}
>

14
web/default/src/features/pricing/components/model-details-charts.tsx vendored
View File

@ -1,9 +1,11 @@
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

4
web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx vendored
View File

@ -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)
)}

2
web/default/src/features/pricing/components/pricing-sidebar.tsx vendored
View File

@ -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'

2
web/default/src/features/pricing/components/pricing-toolbar.tsx vendored
View File

@ -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>
)}

8
web/default/src/features/profile/components/checkin-calendar-card.tsx vendored
View File

@ -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...')

2
web/default/src/features/profile/components/dialogs/telegram-bind-dialog.tsx vendored
View File

@ -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>

13
web/default/src/features/rankings/components/market-share-section.tsx vendored
View File

@ -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)

13
web/default/src/features/rankings/components/models-section.tsx vendored
View File

@ -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'>

2
web/default/src/features/setup/components/complete-step.tsx vendored
View File

@ -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'>

2
web/default/src/features/setup/setup-wizard.tsx vendored
View File

@ -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

2
web/default/src/features/system-settings/integrations/amount-options-visual-editor.tsx vendored
View File

@ -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' />

33
web/default/src/lib/theme-radius.ts vendored Normal file
View File

@ -0,0 +1,33 @@
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
}