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:
parent
21dfa71e00
commit
287d45bb48
|
|
@ -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}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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)]",
|
||||||
/* 内边距:宽松居中 */
|
/* 内边距:宽松居中 */
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue