novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): 无障碍与 lint 修复（对比度/alt 属性/触控目标收窄）+ Geist 本地字体系统

Browse Source
This commit is contained in:
zhangxiang
2026-08-31 12:03:32 +08:00
parent 0786af3db9
commit b65ddd1ff7
20 changed files with 125 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/alert.tsx
+4 -3
View File
@@ -14,11 +14,12 @@ const alertVariants = cva(
default: 'bg-bg-primary text-text-primary border-border-primary',
destructive:
'text-error bg-error-bg border-error [&>svg]:text-current',
/* 状态色 DEFAULT 仅 3.2-3.7:1，作文字不达 AA，故统一用 -text 变体 */
success:
'text-success bg-success-bg border-success [&>svg]:text-current',
'text-success-text bg-success-bg border-success [&>svg]:text-current',
warning:
'text-warning bg-warning-bg border-warning [&>svg]:text-current',
info: 'text-info bg-info-bg border-info [&>svg]:text-current',
'text-warning-text bg-warning-bg border-warning [&>svg]:text-current',
info: 'text-info-text bg-info-bg border-info [&>svg]:text-current',
},
},
defaultVariants: {
src/components/ui/badge.tsx
+4 -3
View File
@@ -16,10 +16,11 @@ const badgeVariants = cva(
outline:
'border-border-accent text-text-primary bg-transparent',
ghost: 'text-text-muted hover:text-text-primary hover:bg-bg-secondary',
success: 'bg-success/10 text-success border-transparent',
warning: 'bg-warning/10 text-warning border-transparent',
/* 状态色 DEFAULT 仅 3.2-3.7:1，作文字不达 AA，故统一用 -text 变体 */
success: 'bg-success/10 text-success-text border-transparent',
warning: 'bg-warning/10 text-warning-text border-transparent',
error: 'bg-error/10 text-error border-transparent',
info: 'bg-info/10 text-info border-transparent',
info: 'bg-info/10 text-info-text border-transparent',
},
size: {
sm: 'px-2 py-0.5 text-[10px]',
src/components/ui/flip-clock.tsx
+8 -8
View File
@@ -18,13 +18,13 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
return (
<div className="relative w-14 h-20 sm:w-16 sm:h-24 md:w-20 md:h-28 perspective-1000">
{/* 背景卡片 - 静态显示当前数字 */}
<div className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] via-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-lg shadow-xl overflow-hidden border border-[var(--color-flip-card-border)]">
<div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] border-b border-[var(--color-flip-card-border)] overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] via-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-lg shadow-xl overflow-hidden border border-[var(--color-border-primary)]">
<div className="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
{digit}
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] overflow-hidden">
<div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center text-4xl sm:text-5xl md:text-6xl font-bold text-[var(--color-brand)]">
{digit}
</div>
@@ -40,7 +40,7 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
animate={{ rotateX: -180 }}
exit={{ rotateX: -180 }}
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-t-lg overflow-hidden border-t border-l border-r border-[var(--color-flip-card-border)]"
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-t-lg overflow-hidden border-t border-l border-r border-[var(--color-border-primary)]"
style={{
transformOrigin: 'bottom',
backfaceVisibility: 'hidden',
@@ -58,7 +58,7 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
animate={{ rotateX: 0 }}
exit={{ rotateX: 0 }}
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-flip-card-bg)] rounded-b-lg overflow-hidden border-b border-l border-r border-[var(--color-flip-card-border)]"
className="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-primary)] to-[var(--color-bg-secondary)] rounded-b-lg overflow-hidden border-b border-l border-r border-[var(--color-border-primary)]"
style={{
transformOrigin: 'top',
backfaceVisibility: 'hidden',
@@ -70,9 +70,9 @@ function FlipDigit({ digit, prevDigit }: FlipDigitProps) {
</motion.div>
</AnimatePresence>
<div className="absolute top-1/2 left-0 right-0 h-px bg-[var(--color-flip-card-divider)] transform -translate-y-1/2" />
<div className="absolute top-0 left-0 right-0 h-px bg-[var(--color-flip-card-divider-subtle)]/50" />
<div className="absolute bottom-0 left-0 right-0 h-px bg-[var(--color-flip-card-divider-subtle)]/50" />
<div className="absolute top-1/2 left-0 right-0 h-px bg-[var(--color-border-primary)] transform -translate-y-1/2" />
<div className="absolute top-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
<div className="absolute bottom-0 left-0 right-0 h-px bg-[var(--color-border-light)]/50" />
{/* 侧面阴影增强立体感 */}
<div className="absolute inset-0 rounded-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] pointer-events-none" />
src/components/ui/input.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
data-slot="input"
ref={ref}
className={cn(
'file:text-foreground placeholder:text-text-hint selection:bg-brand selection:text-white',
'file:text-foreground placeholder:text-text-placeholder selection:bg-brand selection:text-white',
'flex h-11 w-full min-w-0 rounded-md border border-border-primary bg-bg-primary px-3 py-1 text-base',
'transition-all duration-fast outline-none',
'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium',
src/components/ui/select.tsx
+2 -2
View File
@@ -22,10 +22,10 @@ const SelectTrigger = React.forwardRef<
data-slot="select-trigger"
className={cn(
'flex h-11 w-full items-center justify-between rounded-md border border-border-primary bg-bg-primary px-3 py-2 text-sm shadow-sm',
'placeholder:text-text-hint',
'placeholder:text-text-placeholder',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2',
'disabled:cursor-not-allowed disabled:opacity-50',
'data-[placeholder]:text-text-hint',
'data-[placeholder]:text-text-placeholder',
'transition-colors duration-fast hover:border-border-secondary',
'[&>span]:line-clamp-1',
className
src/components/ui/sonner.tsx
+2 -2
View File
@@ -27,9 +27,9 @@ const Toaster = ({ ...props }: ToasterProviderProps) => {
} as React.CSSProperties
}
icons={{
success: <CheckCircle2 className="size-4 text-success" />,
success: <CheckCircle2 className="size-4 text-success-text" />,
error: <AlertCircle className="size-4 text-error" />,
info: <Info className="size-4 text-info" />,
info: <Info className="size-4 text-info-text" />,
close: <X className="size-4" />,
}}
{...props}
src/components/ui/textarea.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'tex
data-slot="textarea"
ref={ref}
className={cn(
'placeholder:text-text-hint selection:bg-brand selection:text-white',
'placeholder:text-text-placeholder selection:bg-brand selection:text-white',
'flex min-h-[80px] w-full rounded-md border border-border-primary bg-bg-primary px-3 py-2 text-base',
'transition-all duration-fast outline-none',
'disabled:cursor-not-allowed disabled:opacity-50',