fix(ui): [UI7-2] 统一全局 Design Tokens,移除冗余字体,修复异常色值引用
这个提交包含在:
@@ -33,8 +33,8 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
|
||||
return (
|
||||
<Card className="mx-auto mt-12 max-w-lg space-y-4 p-6 text-center">
|
||||
<h2 className="text-lg font-semibold text-slate-900">页面渲染出错</h2>
|
||||
<p className="text-sm text-slate-600">
|
||||
<h2 className="text-lg font-semibold text-zinc-900">页面渲染出错</h2>
|
||||
<p className="text-sm text-zinc-600">
|
||||
{this.state.error?.message ?? "发生了未知错误"}
|
||||
</p>
|
||||
<div className="flex justify-center gap-3">
|
||||
@@ -46,7 +46,7 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
重试
|
||||
</button>
|
||||
<button
|
||||
className="inline-flex h-11 items-center rounded-lg border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 hover:bg-slate-50"
|
||||
className="inline-flex h-11 items-center rounded-lg border border-zinc-200 bg-white px-4 text-sm font-medium text-zinc-700 hover:bg-zinc-50"
|
||||
onClick={() => {
|
||||
window.location.href = "/dashboard";
|
||||
}}
|
||||
|
||||
@@ -92,7 +92,7 @@ export function Topbar() {
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] translate-x-0 translate-y-0 rounded-none rounded-r-xl p-0">
|
||||
<DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] tranzinc-x-0 tranzinc-y-0 rounded-none rounded-r-xl p-0">
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="flex items-center justify-between border-b border-zinc-200 px-4 py-4">
|
||||
<div>
|
||||
|
||||
@@ -4,15 +4,15 @@ import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 disabled:pointer-events-none disabled:opacity-50",
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-white hover:bg-primary-600",
|
||||
secondary: "border border-slate-200 bg-white text-slate-700 hover:bg-slate-50",
|
||||
outline: "border border-slate-200 bg-transparent text-slate-900 hover:bg-slate-50",
|
||||
default: "bg-primary text-white hover:bg-primary-light",
|
||||
secondary: "border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50",
|
||||
outline: "border border-zinc-200 bg-transparent text-zinc-900 hover:bg-zinc-50",
|
||||
destructive: "bg-red-600 text-white hover:bg-red-700",
|
||||
ghost: "bg-transparent text-slate-700 hover:bg-slate-100",
|
||||
ghost: "bg-transparent text-zinc-700 hover:bg-zinc-100",
|
||||
link: "bg-transparent text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
|
||||
@@ -6,7 +6,7 @@ export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("rounded-xl border border-slate-200 bg-white shadow-sm", className)}
|
||||
className={cn("rounded-xl border border-zinc-200 bg-white shadow-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@@ -38,7 +38,7 @@ export const CardTitle = React.forwardRef<
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<h3 ref={ref} className={cn("text-base font-semibold text-slate-900", className)} {...props} />
|
||||
<h3 ref={ref} className={cn("text-base font-semibold text-zinc-900", className)} {...props} />
|
||||
);
|
||||
});
|
||||
|
||||
@@ -49,7 +49,7 @@ export const CardDescription = React.forwardRef<
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
return (
|
||||
<p ref={ref} className={cn("text-sm text-slate-600", className)} {...props} />
|
||||
<p ref={ref} className={cn("text-sm text-zinc-600", className)} {...props} />
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ export const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-1/2 top-1/2 z-50 w-[92vw] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl border border-slate-200 bg-white p-6 shadow-lg focus-visible:outline-none",
|
||||
"fixed left-1/2 top-1/2 z-50 w-[92vw] max-w-lg -tranzinc-x-1/2 -tranzinc-y-1/2 rounded-xl border border-zinc-200 bg-white p-6 shadow-lg focus-visible:outline-none",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -54,7 +54,7 @@ export const DialogTitle = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-slate-900", className)}
|
||||
className={cn("text-lg font-semibold text-zinc-900", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
@@ -67,7 +67,7 @@ export const DialogDescription = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-slate-600", className)}
|
||||
className={cn("text-sm text-zinc-600", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -13,7 +13,7 @@ export const DropdownMenuContent = React.forwardRef<
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[12rem] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 text-slate-900 shadow-md",
|
||||
"z-50 min-w-[12rem] overflow-hidden rounded-xl border border-zinc-200 bg-white p-1 text-zinc-900 shadow-md",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -30,7 +30,7 @@ export const DropdownMenuItem = React.forwardRef<
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-lg px-3 py-2 text-sm outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
"flex cursor-default select-none items-center rounded-lg px-3 py-2 text-sm outline-none focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -45,7 +45,7 @@ export const DropdownMenuSeparator = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-slate-200", className)}
|
||||
className={cn("-mx-1 my-1 h-px bg-zinc-200", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex h-11 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -6,7 +6,7 @@ export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
|
||||
export function Label({ className, ...props }: LabelProps) {
|
||||
return (
|
||||
<label
|
||||
className={cn("text-sm font-medium leading-none text-slate-800", className)}
|
||||
className={cn("text-sm font-medium leading-none text-zinc-800", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cn } from "../../lib/utils";
|
||||
|
||||
export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return <div className={cn("animate-pulse rounded-md bg-slate-200", className)} {...props} />;
|
||||
return <div className={cn("animate-pulse rounded-md bg-zinc-200", className)} {...props} />;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ export function Toaster() {
|
||||
duration={3000}
|
||||
toastOptions={{
|
||||
className:
|
||||
"border border-slate-200 bg-white text-slate-900 shadow-lg rounded-lg text-sm",
|
||||
"border border-zinc-200 bg-white text-zinc-900 shadow-lg rounded-lg text-sm",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -14,7 +14,7 @@ export function Spinner({
|
||||
}) {
|
||||
return (
|
||||
<svg
|
||||
className={cn("animate-spin text-slate-400", sizeMap[size], className)}
|
||||
className={cn("animate-spin text-zinc-400", sizeMap[size], className)}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
|
||||
@@ -15,7 +15,7 @@ export const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("bg-slate-50 text-slate-600", className)} {...props} />
|
||||
<thead ref={ref} className={cn("bg-zinc-50 text-zinc-600", className)} {...props} />
|
||||
));
|
||||
|
||||
TableHeader.displayName = "TableHeader";
|
||||
@@ -31,7 +31,7 @@ TableBody.displayName = "TableBody";
|
||||
|
||||
export const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tr ref={ref} className={cn("border-t border-slate-100", className)} {...props} />
|
||||
<tr ref={ref} className={cn("border-t border-zinc-100", className)} {...props} />
|
||||
),
|
||||
);
|
||||
|
||||
@@ -41,7 +41,7 @@ export const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttr
|
||||
({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn("h-10 px-3 text-left align-middle font-medium text-slate-600", className)}
|
||||
className={cn("h-10 px-3 text-left align-middle font-medium text-zinc-600", className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
|
||||
@@ -11,7 +11,7 @@ export const TabsList = React.forwardRef<
|
||||
<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-11 items-center justify-center rounded-lg border border-slate-200 bg-white p-1 text-slate-700",
|
||||
"inline-flex h-11 items-center justify-center rounded-lg border border-zinc-200 bg-white p-1 text-zinc-700",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -8,7 +8,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[120px] w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"flex min-h-[120px] w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
在新工单中引用
屏蔽一个用户