feat(08-03): 将产物列表/详情中的硬编码颜色字面量迁移至工作区主题令牌
- 将产物列表中的图标/下载按钮的硬编码颜色工具类替换为工作区主题令牌类 - 将产物详情中的 SVG 描边/填充色以及关键状态转换为主题令牌/currentColor
This commit is contained in:
parent
287d45bb48
commit
bceea21f9b
|
|
@ -448,19 +448,19 @@ export function ArtifactFileDetail({
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M5 6L2 9L5 12"
|
d="M5 6L2 9L5 12"
|
||||||
stroke="#150033"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M11 3L7 15"
|
d="M11 3L7 15"
|
||||||
stroke="#150033"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M13 6L16 9L13 12"
|
d="M13 6L16 9L13 12"
|
||||||
stroke="#150033"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|
@ -476,9 +476,9 @@ export function ArtifactFileDetail({
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M8 0.5C10.4943 0.5 12.8473 1.84466 14.792 4.21973C15.1644 4.67466 15.1644 5.32534 14.792 5.78027C12.8473 8.15534 10.4943 9.5 8 9.5C5.50561 9.49989 3.15269 8.15543 1.20801 5.78027C0.835561 5.32534 0.835562 4.67466 1.20801 4.21973C3.15269 1.84457 5.50561 0.500106 8 0.5Z"
|
d="M8 0.5C10.4943 0.5 12.8473 1.84466 14.792 4.21973C15.1644 4.67466 15.1644 5.32534 14.792 5.78027C12.8473 8.15534 10.4943 9.5 8 9.5C5.50561 9.49989 3.15269 8.15543 1.20801 5.78027C0.835561 5.32534 0.835562 4.67466 1.20801 4.21973C3.15269 1.84457 5.50561 0.500106 8 0.5Z"
|
||||||
stroke="#666666"
|
stroke="currentColor"
|
||||||
/>
|
/>
|
||||||
<circle cx="8" cy="5" r="1.5" stroke="#666666" />
|
<circle cx="8" cy="5" r="1.5" stroke="currentColor" />
|
||||||
</svg>
|
</svg>
|
||||||
</ToggleGroupItem>
|
</ToggleGroupItem>
|
||||||
</ToggleGroup>
|
</ToggleGroup>
|
||||||
|
|
@ -530,7 +530,7 @@ export function ArtifactFileDetail({
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M6 2H13C14.1046 2 15 2.89543 15 4V13"
|
d="M6 2H13C14.1046 2 15 2.89543 15 4V13"
|
||||||
stroke="#666666"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|
@ -540,7 +540,7 @@ export function ArtifactFileDetail({
|
||||||
width="10"
|
width="10"
|
||||||
height="11"
|
height="11"
|
||||||
rx="1.5"
|
rx="1.5"
|
||||||
stroke="#666666"
|
stroke="currentColor"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</ArtifactAction>
|
</ArtifactAction>
|
||||||
|
|
@ -564,12 +564,12 @@ export function ArtifactFileDetail({
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M16 9V14C16 15.1046 15.1046 16 14 16H4C2.89543 16 2 15.1046 2 14V9"
|
d="M16 9V14C16 15.1046 15.1046 16 14 16H4C2.89543 16 2 15.1046 2 14V9"
|
||||||
stroke="#666666"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M9 2V13M9 13L5 9M9 13L13 9"
|
d="M9 2V13M9 13L5 9M9 13L13 9"
|
||||||
stroke="#666666"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|
@ -710,7 +710,7 @@ export function ArtifactFileDetail({
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
d="M4 14L14 4M4 4L14 14"
|
d="M4 14L14 4M4 4L14 14"
|
||||||
stroke="#666666"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -1046,7 +1046,7 @@ function ArtifactPdfPreview({
|
||||||
|
|
||||||
const pageWrapper = document.createElement("div");
|
const pageWrapper = document.createElement("div");
|
||||||
pageWrapper.className =
|
pageWrapper.className =
|
||||||
"mx-auto mb-4 w-fit rounded-md border border-[#e4e7ec] bg-white p-2 shadow-sm";
|
"mx-auto mb-4 w-fit rounded-md border border-ws-e4e7ec bg-white p-2 shadow-sm";
|
||||||
|
|
||||||
const canvas = document.createElement("canvas");
|
const canvas = document.createElement("canvas");
|
||||||
canvas.style.width = `${viewport.width}px`;
|
canvas.style.width = `${viewport.width}px`;
|
||||||
|
|
@ -1089,8 +1089,8 @@ function ArtifactPdfPreview({
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<div className={cn("relative overflow-auto bg-[#f8f9fb] p-4", className)}>
|
<div className={cn("relative overflow-auto bg-ws-f9f8fa p-4", className)}>
|
||||||
<div className="mx-auto grid max-w-xl gap-3 rounded-md border border-[#e4e7ec] bg-white p-5 text-center">
|
<div className="mx-auto grid max-w-xl gap-3 rounded-md border border-ws-e4e7ec bg-white p-5 text-center">
|
||||||
<p className="text-sm font-medium break-all">{fileName}</p>
|
<p className="text-sm font-medium break-all">{fileName}</p>
|
||||||
<p className="text-muted-foreground text-sm">{error}</p>
|
<p className="text-muted-foreground text-sm">{error}</p>
|
||||||
<a
|
<a
|
||||||
|
|
@ -1107,8 +1107,8 @@ function ArtifactPdfPreview({
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cn("relative overflow-auto bg-[#f8f9fb] p-4", className)}>
|
<div className={cn("relative overflow-auto bg-ws-f9f8fa p-4", className)}>
|
||||||
<div className="mb-3 text-center text-xs text-[#667085]">
|
<div className="mb-3 text-center text-xs text-ws-667085">
|
||||||
{pageCount > 0
|
{pageCount > 0
|
||||||
? t.artifactPreview.pageCountLabel(fileName, pageCount)
|
? t.artifactPreview.pageCountLabel(fileName, pageCount)
|
||||||
: fileName}
|
: fileName}
|
||||||
|
|
@ -1323,7 +1323,7 @@ function ArtifactOfficePreview({
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded px-4 py-3 text-xs whitespace-nowrap",
|
"rounded px-4 py-3 text-xs whitespace-nowrap",
|
||||||
activeSheet === sheetName
|
activeSheet === sheetName
|
||||||
? "bg-[#1500331a] text-[#000000]"
|
? "bg-ws-1500331a text-foreground"
|
||||||
: "text-muted-foreground hover:text-foreground",
|
: "text-muted-foreground hover:text-foreground",
|
||||||
)}
|
)}
|
||||||
onClick={() => setActiveSheet(sheetName)}
|
onClick={() => setActiveSheet(sheetName)}
|
||||||
|
|
@ -1713,14 +1713,14 @@ export const ArtifactZoomSelector = ({
|
||||||
viewBox="0 0 16 16"
|
viewBox="0 0 16 16"
|
||||||
fill="none"
|
fill="none"
|
||||||
>
|
>
|
||||||
<circle cx="7.55558" cy="7.55534" r="6.16667" stroke="#666666" />
|
<circle cx="7.55558" cy="7.55534" r="6.16667" stroke="currentColor" />
|
||||||
<path
|
<path
|
||||||
d="M13.8688 15.4646C14.064 15.6598 14.3806 15.6598 14.5759 15.4646C14.7711 15.2693 14.7711 14.9527 14.5759 14.7574L14.2223 15.111L13.8688 15.4646ZM14.2223 15.111L14.5759 14.7574L11.9092 12.0908L11.5557 12.4443L11.2021 12.7979L13.8688 15.4646L14.2223 15.111Z"
|
d="M13.8688 15.4646C14.064 15.6598 14.3806 15.6598 14.5759 15.4646C14.7711 15.2693 14.7711 14.9527 14.5759 14.7574L14.2223 15.111L13.8688 15.4646ZM14.2223 15.111L14.5759 14.7574L11.9092 12.0908L11.5557 12.4443L11.2021 12.7979L13.8688 15.4646L14.2223 15.111Z"
|
||||||
fill="#666666"
|
fill="currentColor"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M5.33325 7.5H9.7777M7.55547 5V10"
|
d="M5.33325 7.5H9.7777M7.55547 5V10"
|
||||||
stroke="#666666"
|
stroke="currentColor"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -102,7 +102,10 @@ export function ArtifactFileList({
|
||||||
</div>
|
</div>
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<div className="absolute top-5 left-4">
|
<div className="absolute top-5 left-4">
|
||||||
{getFileIcon(file, "size-9 stroke-[1px] stroke-[#333333]")}
|
{getFileIcon(
|
||||||
|
file,
|
||||||
|
"size-9 stroke-1 text-ws-333333 stroke-current",
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<CardDescription className="pl-10 text-xs">
|
<CardDescription className="pl-10 text-xs">
|
||||||
{getFileExtensionDisplayName(file)} file
|
{getFileExtensionDisplayName(file)} file
|
||||||
|
|
@ -134,7 +137,7 @@ export function ArtifactFileList({
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="h-full! text-[var(--muted-foreground)]! hover:bg-transparent! hover:text-[#333333]!"
|
className="text-muted-foreground h-full! hover:bg-transparent! hover:text-ws-333333!"
|
||||||
>
|
>
|
||||||
<DownloadIcon className="size-4" />
|
<DownloadIcon className="size-4" />
|
||||||
{t.common.download}
|
{t.common.download}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue