chaos/chaos-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
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/components/ai-elements/branch.tsx
Vendored
+2 -2
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
web/default/src/components/ai-elements/conversation.tsx
Vendored
+1 -1
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}
web/default/src/components/ai-elements/inline-citation.tsx
Vendored
+1 -5
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}{' '}
web/default/src/components/ai-elements/prompt-input.tsx
Vendored
+1 -1
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
}
web/default/src/components/ai-elements/suggestion.tsx
Vendored
+1 -1
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'
web/default/src/components/ai-elements/tool.tsx
Vendored
+1 -1
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>
web/default/src/components/auto-skeleton.tsx
Vendored
+4 -1
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,
}}
web/default/src/components/config-drawer.tsx
Vendored
+3 -3
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'
)}
web/default/src/components/data-table/bulk-actions.tsx
Vendored
+1 -1
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)')}
/>
web/default/src/components/data-table/mobile-card-list.tsx
Vendored
+1 -1
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'>
web/default/src/components/language-switcher.tsx
Vendored
+1 -7
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>
web/default/src/components/layout/components/mockup.tsx
Vendored
+1 -1
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',
},
},
web/default/src/components/layout/components/nav-group.tsx
Vendored
+1 -1
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>
}
/**
web/default/src/components/layout/components/public-header.tsx
Vendored
+6 -3
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>
web/default/src/components/learn-more.tsx
Vendored
+1 -1
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>
web/default/src/components/model-group-selector.tsx
Vendored
+2 -2
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',
web/default/src/components/multi-select.tsx
Vendored
+1 -1
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)
web/default/src/components/notification-button.tsx
Vendored
+2 -2
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>
web/default/src/components/profile-dropdown.tsx
Vendored
+1 -6
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
web/default/src/components/status-badge.tsx
Vendored
-3
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,
web/default/src/components/theme-quick-switcher.tsx
Vendored
+7 -7
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,
web/default/src/components/theme-switch.tsx
Vendored
+1 -7
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' />
web/default/src/components/ui/button.tsx
Vendored
+4 -5
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',
},
},
web/default/src/components/ui/carousel.tsx
Vendored
+2 -2
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',
web/default/src/components/ui/chart.tsx
Vendored
+2 -2
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,
}}
web/default/src/components/ui/checkbox.tsx
Vendored
+1 -1
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}
web/default/src/components/ui/input-group.tsx
Vendored
+3 -4
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',
},
},
web/default/src/components/ui/native-select.tsx
Vendored
+1 -1
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
web/default/src/components/ui/select.tsx
Vendored
+1 -1
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}
web/default/src/components/ui/toggle-group.tsx
Vendored
+1 -1
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}
web/default/src/components/ui/toggle.tsx
Vendored
+1 -1
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',
},
},