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

style(ui组件): 更新UI组件颜色方案为深色主题

Browse Source 
refactor(card): 调整卡片背景色和边框颜色
refactor(badge): 修改徽章颜色变体
refactor(button): 更新按钮颜色样式
refactor(input): 调整输入框颜色方案
refactor(textarea): 修改文本区域颜色样式
refactor(header): 更新导航栏颜色
refactor(hero-section): 调整英雄区域颜色和渐变
This commit is contained in:
张翔
2026-02-23 09:18:41 +08:00
parent 9e7fb20d2a
commit 5ec2ad0043
168 changed files with 823 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/badge.tsx
+6 -6
View File
@@ -5,21 +5,21 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center justify-center rounded-full border px-3 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-[#005EB8] focus-visible:ring-2 focus-visible:ring-[#005EB8]/50 transition-all duration-300 overflow-hidden",
"inline-flex items-center justify-center rounded-full border px-3 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-[#1C1C1C] focus-visible:ring-2 focus-visible:ring-[#1C1C1C]/50 transition-all duration-300 overflow-hidden",
{
variants: {
variant: {
default: "bg-[#C41E3A] text-white border-transparent shadow-sm",
secondary:
"bg-[#005EB8] text-white border-transparent shadow-sm",
"bg-[#1C1C1C] text-white border-transparent shadow-sm",
destructive:
"bg-[#DC2626] text-white border-transparent hover:bg-[#B91C1C]",
"bg-[#C41E3A] text-white border-transparent hover:bg-[#A01830]",
outline:
"border-[#005EB8] text-[#005EB8] bg-transparent hover:bg-[#E8F4FD]",
ghost: "text-[#718096] hover:text-[#005EB8] hover:bg-[#F5F7FA]",
"border-[#1C1C1C] text-[#1C1C1C] bg-transparent hover:bg-[#F5F5F5]",
ghost: "text-[#5C5C5C] hover:text-[#1C1C1C] hover:bg-[#F5F5F5]",
success: "bg-[#16A34A] text-white border-transparent hover:bg-[#15803D]",
warning: "bg-[#D97706] text-white border-transparent hover:bg-[#B45309]",
info: "bg-[#0284C7] text-white border-transparent hover:bg-[#0369A1]",
info: "bg-[#5C5C5C] text-white border-transparent hover:bg-[#3D3D3D]",
},
},
defaultVariants: {
src/components/ui/button.tsx
+6 -6
View File
@@ -5,22 +5,22 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[#005EB8] focus-visible:ring-offset-2 focus-visible:ring-offset-white",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-[#1C1C1C] focus-visible:ring-offset-2 focus-visible:ring-offset-white",
{
variants: {
variant: {
default:
"bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-[0_4px_12px_rgba(196,30,58,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
secondary:
"bg-[#005EB8] text-white hover:bg-[#003B73] hover:shadow-[0_4px_12px_rgba(0,94,184,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
"bg-[#1C1C1C] text-white hover:bg-[#0A0A0A] hover:shadow-[0_4px_12px_rgba(28,28,28,0.25)] hover:-translate-y-0.5 active:scale-[0.98]",
destructive:
"bg-[#DC2626] text-white hover:bg-[#B91C1C] focus-visible:ring-[#DC2626]",
"bg-[#C41E3A] text-white hover:bg-[#A01830] focus-visible:ring-[#C41E3A]",
outline:
"border-2 border-[#005EB8] bg-transparent text-[#005EB8] hover:bg-[#E8F4FD] hover:shadow-[0_2px_8px_rgba(0,94,184,0.15)]",
"border-2 border-[#1C1C1C] bg-transparent text-[#1C1C1C] hover:bg-[#F5F5F5] hover:shadow-[0_2px_8px_rgba(28,28,28,0.15)]",
ghost:
"text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#1A1A2E]",
"text-[#3D3D3D] hover:bg-[#F5F5F5] hover:text-[#1C1C1C]",
link:
"text-[#005EB8] underline-offset-4 hover:underline",
"text-[#1C1C1C] underline-offset-4 hover:underline hover:text-[#C41E3A]",
},
size: {
default: "h-10 px-4 py-2",
src/components/ui/card.tsx
+4 -4
View File
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card"
className={cn(
"bg-white text-[#1A1A2E] flex flex-col gap-6 rounded-xl border border-[#E2E8F0] py-6 shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-300 hover:border-[#005EB8] hover:shadow-[0_8px_24px_rgba(0,0,0,0.06)] hover:-translate-y-1",
"bg-[#FAFAFA] text-[#1C1C1C] flex flex-col gap-6 rounded-xl border border-[#E5E5E5] py-6 shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-300 hover:border-[#1C1C1C] hover:shadow-[0_8px_24px_rgba(0,0,0,0.06)] hover:-translate-y-1",
className
)}
{...props}
@@ -32,7 +32,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold text-[#1A1A2E]", className)}
className={cn("leading-none font-semibold text-[#1C1C1C]", className)}
{...props}
/>
)
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-[#718096] text-sm", className)}
className={cn("text-[#5C5C5C] text-sm", className)}
{...props}
/>
)
@@ -75,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-[#E2E8F0]", className)}
className={cn("flex items-center px-6 [.border-t]:pt-6 border-t border-[#E5E5E5]", className)}
{...props}
/>
)
src/components/ui/input.tsx
+6 -6
View File
@@ -16,7 +16,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
{label && (
<label
htmlFor={inputId}
className="block text-sm font-medium text-[#4A5568] mb-2"
className="block text-sm font-medium text-[#3D3D3D] mb-2"
>
{label}
{props.required && <span className="text-[#C41E3A] ml-1">*</span>}
@@ -27,10 +27,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
id={inputId}
data-slot="input"
className={cn(
"file:text-foreground placeholder:text-[#A0AEC0] selection:bg-[#005EB8] selection:text-white h-10 w-full min-w-0 rounded-lg border border-[#E2E8F0] bg-white px-4 py-2 text-base text-[#1A1A2E] shadow-sm transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-[#005EB8] focus-visible:ring-2 focus-visible:ring-[#005EB8]/50 focus-visible:shadow-lg focus-visible:shadow-[#005EB8]/20",
"hover:border-[#005EB8]",
error && "border-[#DC2626] focus-visible:border-[#DC2626] focus-visible:ring-[#DC2626]/50",
"file:text-foreground placeholder:text-[#8C8C8C] selection:bg-[#1C1C1C] selection:text-white h-10 w-full min-w-0 rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] px-4 py-2 text-base text-[#1C1C1C] shadow-sm transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-[#1C1C1C] focus-visible:ring-2 focus-visible:ring-[#1C1C1C]/50 focus-visible:shadow-lg focus-visible:shadow-[#1C1C1C]/20",
"hover:border-[#3D3D3D]",
error && "border-[#C41E3A] focus-visible:border-[#C41E3A] focus-visible:ring-[#C41E3A]/50",
className
)}
ref={ref}
@@ -38,7 +38,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
{...props}
/>
{error && (
<p className="mt-1 text-sm text-[#DC2626]">{error}</p>
<p className="mt-1 text-sm text-[#C41E3A]">{error}</p>
)}
</div>
)
src/components/ui/textarea.tsx
+6 -6
View File
@@ -16,7 +16,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
{label && (
<label
htmlFor={textareaId}
className="block text-sm font-medium text-[#4A5568] mb-2"
className="block text-sm font-medium text-[#3D3D3D] mb-2"
>
{label}
{props.required && <span className="text-[#C41E3A] ml-1">*</span>}
@@ -26,10 +26,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
id={textareaId}
data-slot="textarea"
className={cn(
"placeholder:text-[#A0AEC0] selection:bg-[#005EB8] selection:text-white min-h-16 w-full rounded-lg border border-[#E2E8F0] bg-white px-4 py-3 text-base text-[#1A1A2E] shadow-sm transition-all duration-300 outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
"focus-visible:border-[#005EB8] focus-visible:ring-2 focus-visible:ring-[#005EB8]/50 focus-visible:shadow-lg focus-visible:shadow-[#005EB8]/20",
"hover:border-[#005EB8]",
error && "border-[#DC2626] focus-visible:border-[#DC2626] focus-visible:ring-[#DC2626]/50",
"placeholder:text-[#8C8C8C] selection:bg-[#1C1C1C] selection:text-white min-h-16 w-full rounded-lg border border-[#E5E5E5] bg-[#FAFAFA] px-4 py-3 text-base text-[#1C1C1C] shadow-sm transition-all duration-300 outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none",
"focus-visible:border-[#1C1C1C] focus-visible:ring-2 focus-visible:ring-[#1C1C1C]/50 focus-visible:shadow-lg focus-visible:shadow-[#1C1C1C]/20",
"hover:border-[#3D3D3D]",
error && "border-[#C41E3A] focus-visible:border-[#C41E3A] focus-visible:ring-[#C41E3A]/50",
className
)}
ref={ref}
@@ -37,7 +37,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
{...props}
/>
{error && (
<p className="mt-1 text-sm text-[#DC2626]">{error}</p>
<p className="mt-1 text-sm text-[#C41E3A]">{error}</p>
)}
</div>
)