rootandClaude Opus 5.5
09a2adb637
- 材质统一边光:slab / float / pill / pill-selected / seg-thumb / chrome-side 改为左上亮右下暗的 1px 边光 + 外侧暗线;新增 lens / field / chip 参数与 pg-float-modal - 主按钮:转动光谱环改为静态左上光谱高光,悬停沿边扫过一小段;次按钮同为 lens 玻璃 - Input / Textarea / SelectTrigger 挂 .field-glass,原生下拉与实体选择器同步;对话框按钮行 gap-3 - 提示条改 pg-float(状态色只在图标、展开不叠放);新增 GlassTooltip 接管 title 提示 - 触屏判断 input-modality.ts、touch / hover 自定义变体;animate-pg-pop 改 backwards;scroll-fade-end - 控制台外壳:侧栏无硬分隔线、折叠开关进标志行;顶栏去磨砂,右侧控件收进玻璃胶囊 - 登录页居中单卡 auth-card;详情头图「订阅」改回普通主按钮,删除 pill-solid;发现页海报角标改 glass-chip-media - 引入 simple-liquid-glass(liquid-surface.tsx);更新 docs/design 三份规范与 CHANGELOG Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01Cxwgnn2pbzQ7rXv3rq7fei
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
|
|
import { useTheme } from "next-themes";
|
|
import { Toaster as Sonner, type ToasterProps } from "sonner";
|
|
import { buttonVariants } from "~/components/ui/button.tsx";
|
|
|
|
const Toaster = ({ ...props }: ToasterProps) => {
|
|
const { theme = "system" } = useTheme();
|
|
|
|
return (
|
|
<Sonner
|
|
theme={theme as ToasterProps["theme"]}
|
|
className="toaster group"
|
|
icons={{
|
|
success: <CircleCheckIcon className="size-4" />,
|
|
info: <InfoIcon className="size-4" />,
|
|
warning: <TriangleAlertIcon className="size-4" />,
|
|
error: <OctagonXIcon className="size-4" />,
|
|
loading: <Loader2Icon className="size-4 animate-spin" />,
|
|
}}
|
|
style={
|
|
{
|
|
"--normal-bg": "var(--popover)",
|
|
"--normal-text": "var(--popover-foreground)",
|
|
"--normal-border": "var(--border)",
|
|
"--border-radius": "var(--radius)",
|
|
pointerEvents: "none",
|
|
} as React.CSSProperties
|
|
}
|
|
toastOptions={{
|
|
// 提示条是 pg-float 玻璃,状态色只在图标上(不开 richColors)
|
|
unstyled: true,
|
|
classNames: {
|
|
toast:
|
|
"pg-float rounded-2xl w-full flex items-start gap-2.5 px-3.5 py-2.5 text-caption text-popover-foreground",
|
|
title: "font-medium leading-relaxed",
|
|
description: "mt-1 text-caption text-muted-foreground",
|
|
content: "min-w-0 flex-1",
|
|
icon: "mt-0.5 shrink-0 flex items-center justify-center",
|
|
error: "[&_[data-icon]]:text-destructive",
|
|
warning: "[&_[data-icon]]:text-warning",
|
|
success: "[&_[data-icon]]:text-success",
|
|
actionButton: buttonVariants({ size: "sm" }),
|
|
cancelButton: buttonVariants({ variant: "outline", size: "sm" }),
|
|
},
|
|
style: { pointerEvents: "auto" },
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export { Toaster };
|