Skip to content

Commit 8d80d8e

Browse files
zaichaopanzaichaopan
committed
Improvements
1 parent 930e644 commit 8d80d8e

27 files changed

Lines changed: 523 additions & 808 deletions

‎src/avatar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ export function Avatar({
7676
}
7777
alt={alt}
7878
className={twMerge(
79-
'size-full rounded-lg object-cover in-[.rounded-full]:rounded-full',
80-
'[&:has(+[data-ui=avatar-badge])]:[mask:radial-gradient(circle_at_bottom_calc(var(--badge-size)/2)_right_calc(var(--badge-size)/2),_transparent_calc(var(--badge-size)/2_+_var(--badge-gap)_-_0.25px),_white_calc(var(--badge-size)/2_+_var(--badge-gap)_+_0.25px))]',
79+
'size-full rounded-lg object-cover in-[.rounded-full]:rounded-full',
80+
'[&:has(+[data-ui=avatar-badge])]:[mask:radial-gradient(circle_at_bottom_calc(var(--badge-size)/2)_right_calc(var(--badge-size)/2),transparent_calc(var(--badge-size)/2+var(--badge-gap)-0.25px),white_calc(var(--badge-size)/2+var(--badge-gap)+0.25px))]',
8181
)}
8282
/>
8383
{children}

‎src/button/button.styles.ts‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -53,31 +53,29 @@ export function getButtonStyles(
5353
variant: {
5454
base: [
5555
'group inline-flex gap-x-2 justify-center items-center font-semibold',
56-
'text-base/6 text-(--btn-color) sm:text-sm/6 [&_svg[data-ui=icon]:not([class*=size-])]:size-(--icon-size)',
56+
'text-base/6 text-(--btn-color) sm:text-sm/6 [&>svg[data-ui=icon]:not([class*=size-])]:size-(--icon-size)',
5757
isPressed && 'scale-[0.98]',
5858
!isIconOnly && [
59-
variant === 'solid'
60-
? '[--icon-color:var(--btn-color)]/75'
61-
: '[--icon-color:var(--btn-color)]/50',
59+
'[--icon-color:var(--btn-color)]/75'
6260
],
6361
!isHovered &&
64-
!isPressed &&
65-
'[&_svg[data-ui=icon]:not([class*=text-])]:text-(--icon-color)',
62+
!isPressed &&
63+
'[&>svg[data-ui=icon]:not([class*=text-])]:text-(--icon-color)',
6664
variant === 'solid'
6765
? [
68-
'[--btn-bg:var(--accent)] [--btn-color:lch(from_var(--btn-bg)_calc((49.44_-_l)_*_infinity)_0_0)]',
69-
color === 'red' &&
70-
'[--btn-bg:var(--color-red-600)] [--btn-color:white]',
71-
color === 'green' &&
72-
'[--btn-bg:var(--color-green-600)] [--btn-color:white]',
73-
]
66+
'[--btn-bg:var(--accent)] [--btn-color:lch(from_var(--btn-bg)_calc((49.44_-_l)_*_infinity)_0_0)]',
67+
color === 'red' &&
68+
'[--btn-bg:var(--color-red-600)] [--btn-color:white]',
69+
color === 'green' &&
70+
'[--btn-bg:var(--color-green-600)] [--btn-color:white]',
71+
]
7472
: [
75-
'[--btn-color:var(--foreground)]',
76-
color === 'accent' && '[--btn-color:var(--accent)]',
77-
color === 'red' &&
78-
'[--btn-color:var(--color-red-600)] dark:[--btn-color:var(--color-red-500)]',
79-
color === 'green' && '[--btn-color:var(--color-green-600)]',
80-
],
73+
'[--btn-color:var(--foreground)]',
74+
color === 'accent' && '[--btn-color:var(--accent)]',
75+
color === 'red' &&
76+
'[--btn-color:var(--color-red-600)] dark:[--btn-color:var(--color-red-500)]',
77+
color === 'green' && '[--btn-color:var(--color-green-600)]',
78+
],
8179
],
8280
solid: ['bg-(--btn-bg)', isHovered && !isDisabled && 'opacity-85'],
8381
outline: [
@@ -97,19 +95,19 @@ export function getButtonStyles(
9795
isIconOnly
9896
? 'size-8 sm:size-7 [--icon-size:--spacing(5)] sm:[--icon-size:--spacing(4)]'
9997
: variant !== 'link' &&
100-
'h-8 sm:h-7 [--icon-size:--spacing(3)] text-sm/6 sm:text-xs/6 px-3',
98+
'h-8 sm:h-7 [--icon-size:--spacing(3)] text-sm/6 sm:text-xs/6 px-3',
10199
],
102100
md: [
103101
'[--icon-size:--spacing(5)] sm:[--icon-size:--spacing(4)]',
104102
isIconOnly
105-
? 'p-2.5 sm:p-1.5 [&_svg[data-ui=icon]]:m-0.5 sm:[&_svg[data-ui=icon]]:m-1'
103+
? 'p-2.5 sm:p-1.5 [&>svg[data-ui=icon]]:m-0.5 sm:[&>svg[data-ui=icon]]:m-1'
106104
: variant !== 'link' && 'px-3.5 py-2.5 sm:py-1.5',
107105
],
108106
lg: [
109107
// lg: 44px,
110108
'[--icon-size:--spacing(5)]',
111109
isIconOnly
112-
? 'p-2.5 [&_svg[data-ui=icon]]:m-0.5'
110+
? 'p-2.5 [&>svg[data-ui=icon]]:m-0.5'
113111
: variant !== 'link' && 'px-3.5 py-2.5',
114112
],
115113
},
@@ -121,8 +119,8 @@ export function getButtonStyles(
121119
style.variant[variant],
122120
style.size[size],
123121
!isCustomPending &&
124-
isPending &&
125-
'text-transparent [&_svg[data-ui=icon]:not([data-spinner])]:text-transparent',
122+
isPending &&
123+
'text-transparent [&>svg[data-ui=icon]:not([data-spinner])]:text-transparent',
126124
className,
127125
]);
128126
}

‎src/calendar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export function CalendarHeader({ yearRange }: { yearRange?: YearRange }) {
123123
size="sm"
124124
isIconOnly
125125
aria-label="Previous"
126-
className="not-hover:text-muted/75 focus-visible:-outline-offset-2"
126+
className="not-hover:text-muted focus-visible:-outline-offset-2"
127127
>
128128
{direction === 'rtl' ? (
129129
<ChevronRightIcon className="size-5" />

‎src/callout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,9 @@ export default function Callout({
146146
center
147147
? [
148148
'grid-cols-[auto_auto_auto_auto]',
149-
'sm:flex sm:[&>:first-child]:ms-auto',
149+
'sm:flex sm:*:first:ms-auto',
150150
'sm:[&>:last-child:not([data-ui=callout-control])]:me-auto',
151-
'sm:[&>[data-ui=callout-control]]:ms-auto',
151+
'sm:*:data-[ui=callout-control]:ms-auto',
152152
]
153153
: 'rounded-lg border',
154154
'[&:has([data-ui=callout-heading]+[data-ui=callout-description])]:[--callout-content-row-end:3]',
@@ -176,7 +176,7 @@ export function CalloutIcon({
176176
'me-2',
177177
'[&_[data-ui=icon]:not([class*=text-])]:text-(--callout-icon)',
178178
'[&_[data-ui=icon]:not([class*=size-])]:w-5',
179-
'[&_[data-ui=icon]:not([class*=size-])]:h-[1lh]',
179+
'[&_[data-ui=icon]:not([class*=size-])]:h-lh',
180180
className,
181181
)}
182182
/>

‎src/card.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ export function Card(props: React.JSX.IntrinsicElements['div']) {
66
<div
77
{...props}
88
className={twMerge(
9-
'flex flex-col rounded-xl p-4',
10-
'shadow-xs ring ring-zinc-950/10 dark:shadow-none dark:ring-white/10',
11-
'has-data-[ui=card-body]:p-0',
9+
'flex flex-col',
10+
'[--border-radius:var(--radius-xl)] [--card-padding:--spacing(0.5)]',
11+
'rounded-(--border-radius) p-(--card-padding)',
12+
'bg-zinc-100/65 dark:bg-[oklch(from_var(--background)_calc(l*1.4)_c_h)]',
1213
props.className,
1314
)}
1415
/>
@@ -26,10 +27,7 @@ export function CardHeader({
2627
displayLevel={3}
2728
elementType="div"
2829
className={twMerge(
29-
'text-muted [&>[data-ui=icon]]:text-muted flex items-center gap-2 px-4 pt-2 pb-1 [&>[data-ui=icon]]:size-4',
30-
'bg-zinc-100 dark:bg-zinc-900',
31-
'rounded-t-xl [&+[data-ui=card-body]]:border-t',
32-
'[&+[data-ui=card-body]]:rounded-t-none',
30+
'[&>[data-ui=icon]:not([class*=text-])]:text-muted flex items-center gap-2 px-4 pt-2 pb-1 [&>[data-ui=icon]]:size-4',
3331
className,
3432
)}
3533
/>
@@ -44,11 +42,7 @@ export function CardFooter({
4442
<div
4543
{...props}
4644
data-ui="card-footer"
47-
className={twMerge(
48-
'border-t p-4 text-center text-base/6 sm:text-sm/6',
49-
'bg-zinc-100 dark:bg-zinc-900',
50-
className,
51-
)}
45+
className={twMerge('p-4 text-base/6 sm:text-sm/6', className)}
5246
/>
5347
);
5448
}
@@ -62,8 +56,11 @@ export function CardBody({
6256
{...props}
6357
data-ui="card-body"
6458
className={twMerge(
65-
'rounded-xl px-4 py-3 text-base/6 sm:text-sm/6',
66-
'has-[+[data-ui=card-footer]]:rounded-b-none',
59+
'rounded-[calc(var(--border-radius)-var(--card-padding))]',
60+
'bg-background px-4 py-3 text-base/6 sm:text-sm/6',
61+
'shadow-sm ring ring-zinc-950/4 dark:shadow-none dark:ring-white/4',
62+
63+
'dark:bg-[oklch(from_var(--background)_calc(l*1.2)_c_h)]',
6764
className,
6865
)}
6966
/>

‎src/dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ export function DialogCloseButton({
188188
size={size}
189189
className={composeRenderProps(props.className, (className) =>
190190
twMerge(
191-
'text-muted/75 hover:text-foreground absolute end-2 top-3 p-1.5',
191+
'text-muted hover:text-foreground absolute end-2 top-3 p-1.5',
192192
className,
193193
),
194194
)}

‎src/disclosure.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export function DisclosureControl(props: ButtonProps) {
5959
props.className,
6060
(className, { isFocusVisible }) => {
6161
return twMerge([
62-
'group [&_svg[data-ui=icon]:not(:hover)]:text-muted mb-2 flex items-center gap-x-2 rounded-sm outline-hidden [&_svg[data-ui=icon]:not([class*=size-])]:size-5',
62+
'group [&:not([aria-expanded=true]):not(:hover)_svg[data-ui=icon]]:text-muted mb-2 flex w-full items-center gap-x-3 rounded-sm outline-hidden [&_svg[data-ui=icon]:not([class*=size-])]:size-5',
6363
'[&[aria-expanded=true]+[data-ui=disclosure-panel]]:grid-rows-[1fr]',
6464
isFocusVisible && [
6565
'outline',

‎src/empty-state.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function EmptyStateIcon({
3535
{...props}
3636
className={twMerge(
3737
'mb-2 flex max-w-32 items-center justify-center @md:max-w-40',
38-
'[&>[data-ui=icon]:not([class*=text-])]:text-muted [&>[data-ui=icon]]:h-auto [&>[data-ui=icon]]:max-w-full [&>[data-ui=icon]:not([class*=size-])]:min-w-12',
38+
'[&>[data-ui=icon]:not([class*=text-])]:text-muted *:data-[ui=icon]:h-auto *:data-[ui=icon]:max-w-full [&>[data-ui=icon]:not([class*=size-])]:min-w-12',
3939
className,
4040
)}
4141
>

‎src/initials.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export function getFallbackAvatarDataUrl({
7070

7171
background =
7272
background ??
73-
`linear-gradient(135deg, ${getInitialsGradient(alt, colorful).join(', ')})`;
73+
`linear-gradient(to top, ${getInitialsGradient(alt, colorful).join(', ')})`;
7474

7575
return fallback === 'icon'
7676
? getFallbackIconDateUrl(background)

‎src/link.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,21 @@ import { ButtonStyleProps } from './button/button.styles';
1111

1212
export type LinkProps =
1313
| (RACLinkProps & {
14-
tooltip?: React.ReactNode;
15-
variant:
16-
| Extract<ButtonStyleProps['variant'], 'solid' | 'outline' | 'plain'>
17-
| 'text';
18-
size?: ButtonStyleProps['size'];
19-
color?: ButtonStyleProps['color'];
20-
isIconOnly?: boolean;
21-
})
14+
tooltip?: React.ReactNode;
15+
variant:
16+
| Extract<ButtonStyleProps['variant'], 'solid' | 'outline' | 'plain'>
17+
| 'text';
18+
size?: ButtonStyleProps['size'];
19+
color?: ButtonStyleProps['color'];
20+
isIconOnly?: boolean;
21+
})
2222
| (RACLinkProps & {
23-
tooltip?: React.ReactNode;
24-
variant?: never;
25-
size?: never;
26-
color?: never;
27-
isIconOnly?: never;
28-
});
23+
tooltip?: React.ReactNode;
24+
variant?: never;
25+
size?: never;
26+
color?: never;
27+
isIconOnly?: never;
28+
});
2929

3030
const linkStyle = [
3131
'relative inline-flex cursor-pointer items-center gap-1 rounded-sm outline-hidden hover:underline',
@@ -49,34 +49,34 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
4949
if (variant === 'text') {
5050
return twMerge(
5151
linkStyle,
52-
'hover:no-underline not-hover:text-muted',
52+
'hover:no-underline text-muted hover:text-foreground',
5353
isFocusVisible && 'outline-ring outline-2 outline-offset-2',
5454
className,
5555
);
5656
}
5757

5858
return variant
5959
? getButtonStyles(
60-
{
61-
variant,
62-
isDisabled,
63-
isFocusVisible,
64-
isHovered,
65-
size,
66-
color,
67-
isIconOnly,
68-
isPressed,
69-
},
70-
twMerge(
71-
'cursor-pointer data-disabled:cursor-default',
72-
className,
73-
),
74-
)
75-
: twMerge(
76-
linkStyle,
77-
isFocusVisible && 'outline-ring outline-2 outline-offset-2',
60+
{
61+
variant,
62+
isDisabled,
63+
isFocusVisible,
64+
isHovered,
65+
size,
66+
color,
67+
isIconOnly,
68+
isPressed,
69+
},
70+
twMerge(
71+
'cursor-pointer data-disabled:cursor-default',
7872
className,
79-
);
73+
),
74+
)
75+
: twMerge(
76+
linkStyle,
77+
isFocusVisible && 'outline-ring outline-2 outline-offset-2',
78+
className,
79+
);
8080
},
8181
)}
8282
/>

0 commit comments

Comments
 (0)