feat(08-02): token化 thread page 与 layout/header 颜色

- 将 page/layout/header 中指定硬编码颜色替换为 ws-* token utility
- 将返回箭头 SVG 迁移为 currentColor + token class,移除 hex 颜色字面量
- 通过 Task 1 验收扫描与 guard:colors
This commit is contained in:
肖应宇 2026-04-23 09:33:27 +08:00
parent 21dfa71e00
commit 287d45bb48
3 changed files with 14 additions and 13 deletions

View File

@ -96,7 +96,7 @@ export default function ChatPage() {
sloganIndex % motivationSlogans.length sloganIndex % motivationSlogans.length
] ?? { ] ?? {
text: t.chatPage.defaultSlogan, text: t.chatPage.defaultSlogan,
color: "#333333", color: "var(--color-ws-333333)",
}; };
const tickerCharacterList = useMemo(() => { const tickerCharacterList = useMemo(() => {
const seen = new Set<string>(); const seen = new Set<string>();
@ -357,7 +357,7 @@ export default function ChatPage() {
<Button <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
className="px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]/80" className="px-[10px] py-[5px] text-sm font-medium text-ws-150033 hover:text-ws-150033/80"
disabled={isStreaming} disabled={isStreaming}
onClick={() => setShowExitDialog(true)} onClick={() => setShowExitDialog(true)}
> >
@ -370,7 +370,8 @@ export default function ChatPage() {
> >
<path <path
d="M3.5 10H13.25H15.6875H16.5M3.5 10L7.5625 6M3.5 10L7.5625 14" d="M3.5 10H13.25H15.6875H16.5M3.5 10L7.5625 6M3.5 10L7.5625 14"
stroke="#666666" className="text-ws-667085"
stroke="currentColor"
strokeWidth="1.5" strokeWidth="1.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
@ -379,7 +380,7 @@ export default function ChatPage() {
</Button> </Button>
</div> </div>
<div <div
className="flex items-center justify-center overflow-hidden text-sm font-bold font-medium whitespace-nowrap text-[#333333]" className="flex items-center justify-center overflow-hidden text-sm font-bold font-medium whitespace-nowrap text-ws-333333"
style={{ style={{
color: currentSlogan.color, color: currentSlogan.color,
}} }}
@ -408,7 +409,7 @@ export default function ChatPage() {
<Button <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
className="h-full px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]" className="h-full px-[10px] py-[5px] text-sm font-medium text-ws-150033 hover:text-ws-150033"
> >
<ListTodoIcon className="size-4" /> To-dos <ListTodoIcon className="size-4" /> To-dos
</Button> </Button>
@ -419,7 +420,7 @@ export default function ChatPage() {
<Tooltip content={t.chatPage.viewArtifactsTooltip}> <Tooltip content={t.chatPage.viewArtifactsTooltip}>
<Button <Button
data-testid="artifacts-open-button" data-testid="artifacts-open-button"
className="text-[#150033] hover:text-[#150033]/80" className="text-ws-150033 hover:text-ws-150033/80"
variant="ghost" variant="ghost"
onClick={() => { onClick={() => {
setArtifactsOpen(true); setArtifactsOpen(true);
@ -500,7 +501,7 @@ export default function ChatPage() {
) : ( ) : (
<div className="flex size-full max-w-(--container-width-sm) flex-col justify-center"> <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center">
<header className="flex shrink-0 items-center justify-between border-b"> <header className="flex shrink-0 items-center justify-between border-b">
<h2 className="h-[58px] text-[14px] leading-[58px] font-bold text-[#333333]"> <h2 className="h-[58px] text-sm leading-[58px] font-bold text-ws-333333">
<span>{t.common.artifacts}</span> <span>{t.common.artifacts}</span>
</h2> </h2>
<Button <Button
@ -548,7 +549,7 @@ export default function ChatPage() {
{!(showWelcomeStyle && thread.isThreadLoading) ? ( {!(showWelcomeStyle && thread.isThreadLoading) ? (
<> <>
<InputBox <InputBox
className={cn("w-full rounded-[20px] bg-[#FBFAFC]")} className={cn("w-full rounded-[20px] bg-ws-fbfafc")}
threadId={threadId} threadId={threadId}
showWelcomeStyle={showWelcomeStyle} showWelcomeStyle={showWelcomeStyle}
hasSubmitted={hasSubmitted} hasSubmitted={hasSubmitted}
@ -608,14 +609,14 @@ export default function ChatPage() {
</p> </p>
<DevDialogFooter> <DevDialogFooter>
<Button <Button
className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white" className="w-full bg-ws-f9f8fa hover:bg-ws-8e47f0 hover:text-white"
variant="ghost" variant="ghost"
onClick={() => setShowExitDialog(false)} onClick={() => setShowExitDialog(false)}
> >
{t.common.cancel} {t.common.cancel}
</Button> </Button>
<Button <Button
className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white" className="w-full bg-ws-f9f8fa hover:bg-ws-8e47f0 hover:text-white"
variant="ghost" variant="ghost"
onClick={async () => { onClick={async () => {
// 如果正在生成,先终止再退出 // 如果正在生成,先终止再退出
@ -664,7 +665,7 @@ export default function ChatPage() {
</p> </p>
<DevDialogFooter singleColumn> <DevDialogFooter singleColumn>
<Button <Button
className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white" className="w-full bg-ws-f9f8fa hover:bg-ws-8e47f0 hover:text-white"
variant="ghost" variant="ghost"
onClick={clearSelectedSkillError} onClick={clearSelectedSkillError}
> >

View File

@ -130,7 +130,7 @@ export default function WorkspaceLayout({
/* 灰色圆角矩形容器 */ /* 灰色圆角矩形容器 */
"rounded-[20px] border-none", "rounded-[20px] border-none",
/* 浅灰色背景 + 轻微透明 */ /* 浅灰色背景 + 轻微透明 */
"bg-[#999999]! backdrop-blur-sm", "bg-ws-999999! backdrop-blur-sm",
/* 阴影极轻 */ /* 阴影极轻 */
"shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]", "shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]",
/* 内边距:宽松居中 */ /* 内边距:宽松居中 */

View File

@ -43,7 +43,7 @@ export function WorkspaceHeader({ className }: { className?: string }) {
) : ( ) : (
<div className="text-primary ml-2 cursor-default font-serif"> <div className="text-primary ml-2 cursor-default font-serif">
{/* TODO: 测试标识 */} {/* TODO: 测试标识 */}
XClaw <span className="text-sm text-[#000000c5]">v3.2.8</span> XClaw <span className="text-sm text-ws-000000c5">v3.2.8</span>
</div> </div>
)} )}
<SidebarTrigger /> <SidebarTrigger />