// ==========================================================================
// 2. Semantic 語意層
// ==========================================================================
// ---- Primitive palettes — 對應 Figma 的色票結構 ----
// Each palette: { key, label, swatch, stops: [{name, hex, mui?, dark?}, ...] }
const PRIMITIVE_PALETTES = [
{
key: "blue-1", label: "Blue-1", zh: "品牌主藍", swatch: "#2492ff",
desc: "品牌主色 (Brand) — 用於 CTA、互動、主要連結",
stops: [
{ name: "Blue-1/50", hex: "#f0f7ff" },
{ name: "Blue-1/100", hex: "#e6f1ff" },
{ name: "Blue-1/200", hex: "#bae0ff" },
{ name: "Blue-1/300", hex: "#91caff" },
{ name: "Blue-1/400", hex: "#69b1ff" },
{ name: "Blue-1/500", hex: "#2492ff", primary: true, dark: true },
{ name: "Blue-1/600", hex: "#1d75cc", dark: true },
{ name: "Blue-1/700", hex: "#165699", dark: true },
{ name: "Blue-1/800", hex: "#0e3866", dark: true },
{ name: "Blue-1/900", hex: "#071c33", dark: true },
],
},
{
key: "blue-2", label: "Blue-2", zh: "輔助灰藍", swatch: "#475569",
desc: "Functional 輔助色 — 取消、匯入、查重等中性動作",
stops: [
{ name: "Blue-2/50", hex: "#f8fafc" },
{ name: "Blue-2/100", hex: "#f1f5f9" },
{ name: "Blue-2/200", hex: "#e2e8f0" },
{ name: "Blue-2/300", hex: "#cbd5e1" },
{ name: "Blue-2/400", hex: "#94a3b8" },
{ name: "Blue-2/500", hex: "#64748b", primary: true, dark: true },
{ name: "Blue-2/600", hex: "#475569", dark: true },
{ name: "Blue-2/700", hex: "#334155", dark: true },
{ name: "Blue-2/800", hex: "#1e293b", dark: true },
{ name: "Blue-2/900", hex: "#0f172a", dark: true },
],
},
{
key: "blue-3", label: "Blue-3", zh: "資訊藍", swatch: "#0ea5e9",
desc: "Info / Accent — 系統提示、導引資訊",
stops: [
{ name: "Blue-3/50", hex: "#f0f9ff" },
{ name: "Blue-3/100", hex: "#e0f2fe" },
{ name: "Blue-3/200", hex: "#bae6fd" },
{ name: "Blue-3/300", hex: "#7dd3fc" },
{ name: "Blue-3/400", hex: "#38bdf8" },
{ name: "Blue-3/500", hex: "#0ea5e9", primary: true, dark: true },
{ name: "Blue-3/600", hex: "#0284c7", dark: true },
{ name: "Blue-3/700", hex: "#0369a1", dark: true },
{ name: "Blue-3/800", hex: "#075985", dark: true },
{ name: "Blue-3/900", hex: "#0c4a6e", dark: true },
],
},
{
key: "grey", label: "Grey", zh: "中性灰", swatch: "#9e9e9e",
desc: "Neutral — 背景、字色、分隔線、overlay 遮罩 (對齊 MUI grey)",
stops: [
{ name: "Grey/50", hex: "#fafafa" },
{ name: "Grey/100", hex: "#f5f5f5" },
{ name: "Grey/200", hex: "#eeeeee" },
{ name: "Grey/300", hex: "#e0e0e0" },
{ name: "Grey/400", hex: "#bdbdbd" },
{ name: "Grey/500", hex: "#9e9e9e", primary: true, dark: true },
{ name: "Grey/600", hex: "#757575", dark: true },
{ name: "Grey/700", hex: "#616161", dark: true },
{ name: "Grey/800", hex: "#424242", dark: true },
{ name: "Grey/900", hex: "#212121", dark: true },
],
},
{
key: "red", label: "Red", zh: "錯誤紅", swatch: "#e43131",
desc: "Negative / Error — 系統報錯、欄位驗證失敗、破壞性動作",
stops: [
{ name: "Red/50", hex: "#fff1f0" },
{ name: "Red/100", hex: "#ffe2e0" },
{ name: "Red/200", hex: "#ffc4c2" },
{ name: "Red/300", hex: "#ff9794" },
{ name: "Red/400", hex: "#ff5f5b" },
{ name: "Red/500", hex: "#e43131", primary: true, dark: true },
{ name: "Red/600", hex: "#b81f1f", dark: true },
{ name: "Red/700", hex: "#871414", dark: true },
{ name: "Red/800", hex: "#5a0c0c", dark: true },
{ name: "Red/900", hex: "#2c0505", dark: true },
],
},
{
key: "orange", label: "Orange", zh: "強調橘", swatch: "#ed6c02",
desc: "Warning / Highlight — 強調行動、推銷、警告 (對齊 MUI warning.main)",
stops: [
{ name: "Orange/50", hex: "#fff7ed" },
{ name: "Orange/100", hex: "#ffedd5" },
{ name: "Orange/200", hex: "#fed7aa" },
{ name: "Orange/300", hex: "#fdba74" },
{ name: "Orange/400", hex: "#fb923c" },
{ name: "Orange/500", hex: "#ed6c02", primary: true, dark: true },
{ name: "Orange/600", hex: "#e65100", dark: true },
{ name: "Orange/700", hex: "#c2410c", dark: true },
{ name: "Orange/800", hex: "#9a3412", dark: true },
{ name: "Orange/900", hex: "#7c2d12", dark: true },
],
},
{
key: "yellow", label: "Yellow", zh: "提醒黃", swatch: "#f59e0b",
desc: "Notice / Attention — 溫馨提醒、需要留意",
stops: [
{ name: "Yellow/50", hex: "#fffbeb" },
{ name: "Yellow/100", hex: "#fef3c7" },
{ name: "Yellow/200", hex: "#fde68a" },
{ name: "Yellow/300", hex: "#fcd34d" },
{ name: "Yellow/400", hex: "#fbbf24" },
{ name: "Yellow/500", hex: "#f59e0b", primary: true, dark: true },
{ name: "Yellow/600", hex: "#d97706", dark: true },
{ name: "Yellow/700", hex: "#b45309", dark: true },
{ name: "Yellow/800", hex: "#92400e", dark: true },
{ name: "Yellow/900", hex: "#78350f", dark: true },
],
},
{
key: "green", label: "Green", zh: "正向綠", swatch: "#22c55e",
desc: "Positive / Success — 驗證通過、數值增加、正向進度",
stops: [
{ name: "Green/50", hex: "#f0fdf4" },
{ name: "Green/100", hex: "#dcfce7" },
{ name: "Green/200", hex: "#bbf7d0" },
{ name: "Green/300", hex: "#86efac" },
{ name: "Green/400", hex: "#4ade80" },
{ name: "Green/500", hex: "#22c55e", primary: true, dark: true },
{ name: "Green/600", hex: "#16a34a", dark: true },
{ name: "Green/700", hex: "#15803d", dark: true },
{ name: "Green/800", hex: "#166534", dark: true },
{ name: "Green/900", hex: "#14532d", dark: true },
],
},
];
// ---- Tab strip: 可切換的色組 ----
// DB（後台編輯）優先 → ds-palette-default.js → 此檔內定 (fallback)
// 後台儲存格式：{ primitive: [...], semantic: [...] }；舊格式 { groups: [...] } 也相容。
// 只有 default 專案才用寫死的 fallback；其他專案空白（避免新專案長得跟金門一樣）
const isDefaultProject = () => window.dsBootData?.project?.slug === "default";
const getPalettes = () => {
const db = window.dsBootData?.pageData?.["s-palette"]?.primitive
|| window.dsBootData?.pageData?.["s-palette"]?.groups;
if (db) return db;
return isDefaultProject() ? (window.DS_DEFAULT_PALETTE || PRIMITIVE_PALETTES) : [];
};
const getSemantic = () => {
const db = window.dsBootData?.pageData?.["s-palette"]?.semantic;
if (db) return db;
return isDefaultProject() ? (window.DS_DEFAULT_SEMANTIC || SEMANTIC_GROUPS) : [];
};
// 依背景顏色自動決定文字色（亮底用深字、暗底用白字）
const isDarkBg = (hex) => {
if (!hex || typeof hex !== "string") return false;
const h = hex.replace("#", "");
if (h.length !== 6) return false;
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
return lum < 0.55;
};
const PalettePrimitiveTabs = () => {
const palettes = getPalettes();
const gradients = window.dsBootData?.pageData?.["s-palette"]?.gradients || [];
// 色組各自一個 tab；漸層全部合成「漸層 Gradient」單一 tab
const items = [
...palettes.map((p) => ({ type: "color", key: `c-${p.key}`, data: p })),
...(gradients.length > 0 ? [{ type: "gradient-all", key: "gradient-all" }] : []),
];
const [active, setActive] = React.useState(items[0]?.key);
const current = items.find((it) => it.key === active) || items[0];
if (!current) return null;
// 漸層 tab 的小預覽：用第一個漸層
const firstGrad = gradients[0];
const firstGradBg = firstGrad
? `linear-gradient(${firstGrad.direction || "135deg"}, ${(firstGrad.colors || []).join(", ")})`
: "linear-gradient(135deg,#bae0ff,#2492ff)";
return (
<>
{/* Tab strip — 色組 + 漸層 */}
{items.map((it) => {
const on = it.key === active;
let swatchBg, label, sub;
if (it.type === "color") {
swatchBg = it.data.swatch;
label = it.data.label;
sub = it.data.zh;
} else {
swatchBg = firstGradBg;
label = "漸層";
sub = `Gradient (${gradients.length})`;
}
return (
setActive(it.key)}
style={{
padding: "10px 16px",
cursor: "pointer",
fontSize: 13,
fontWeight: on ? 600 : 400,
color: on ? "var(--n-900)" : "var(--n-600)",
borderBottom: on ? "2px solid var(--n-900)" : "2px solid transparent",
marginBottom: -1,
display: "flex", alignItems: "center", gap: 8,
whiteSpace: "nowrap",
transition: "all var(--dur-fast) var(--ease)",
}}>
{label}
{sub}
);
})}
{gradients.map((g, i) => )}
)}
);
};
// 點擊複製 hex 的色塊（hover 顯示複製 icon，點下變成 ✓ 已複製）
const SwatchStop = ({ stop }) => {
const [copied, setCopied] = React.useState(false);
const [hovered, setHovered] = React.useState(false);
const dark = isDarkBg(stop.hex);
const hex = (stop.hex || "").toUpperCase();
const copy = async () => {
try {
await navigator.clipboard.writeText(hex);
setCopied(true);
setTimeout(() => setCopied(false), 1200);
} catch (e) {}
};
return (
setHovered(true)}
onMouseLeave={() => setHovered(false)}
title={`點擊複製 ${hex}`}
style={{
background: stop.hex, height: 140, padding: "14px 14px",
color: dark ? "#fff" : "var(--n-900)",
fontFamily: "var(--ff-en)", fontSize: 12,
display: "flex", flexDirection: "column", justifyContent: "space-between",
position: "relative",
cursor: "pointer",
userSelect: "none",
}}>
{(stop.name || "").split("/")[1] || stop.name}
{copied ? "✓ 已複製" : hex}
{/* Copy icon top-right */}
{copied ? (
) : (
)}
{/* Header card */}
{pal.label}
{pal.zh}
{pal.desc}
{/* Big stops strip */}
{pal.stops.map((s, i) => )}
{/* Token table */}
({
name: s.name,
v: (s.hex || "").toUpperCase(),
d: s.desc || "",
}))}
/>
{anchor && (
)}
{g.label}
{g.desc && (
{g.desc}
)}
);
};
// Tab 切換版（同 Primitive 風格）
const PaletteSemanticView = () => {
const groups = getSemantic().filter((g) => g.enabled !== false);
const [active, setActive] = React.useState(groups[0]?.key);
const current = groups.find((g) => g.key === active) || groups[0];
if (!current) return (
沒有啟用的語意組。請至後台「Palette → Semantic」開啟需要的組別。
);
return (
<>
{groups.map((g) => {
const on = g.key === active;
const anchor = g.anchor || g.rows?.[0]?.v || "#888";
const isLight = anchor.startsWith("rgba") || anchor === "#FFFFFF";
return (
setActive(g.key)}
style={{
padding: "10px 16px",
cursor: "pointer",
fontSize: 13,
fontWeight: on ? 600 : 400,
color: on ? "var(--n-900)" : "var(--n-600)",
borderBottom: on ? "2px solid var(--n-900)" : "2px solid transparent",
marginBottom: -1,
display: "flex", alignItems: "center", gap: 8,
whiteSpace: "nowrap",
transition: "all var(--dur-fast) var(--ease)",
}}>
{g.label}
);
})}
{langLabel}
{block.title && (
{block.title}
)}
{!block.title && }
);
};
// ---- 漸層分頁內容（前台顯示） ----
const GradientCard = ({ g }) => {
const [copied, setCopied] = React.useState(false);
const colors = (g.colors || []).filter(Boolean);
const dir = g.direction || "135deg";
const cssValue = colors.length >= 2 ? `linear-gradient(${dir}, ${colors.join(", ")})` : "transparent";
const copy = async () => {
try {
await navigator.clipboard.writeText(`background: ${cssValue};`);
setCopied(true);
setTimeout(() => setCopied(false), 1200);
} catch (e) {}
};
return (
{g.name || "（未命名）"}
{cssValue}
);
};
// 漸層分頁（前台獨立 tab）
const PaletteGradientView = () => {
const gradients = window.dsBootData?.pageData?.["s-palette"]?.gradients || [];
if (gradients.length === 0) {
return (
🎨
尚未新增漸層
請至後台「Palette → 漸層」新增（最多 2 組）。
);
}
return {gradients.map((g, i) => )}
;
};
// ---- 全域 Token 程式碼檢視（Breadcrumb Code 按鈕觸發） ----
const TokenCodeView = () => {
const blocks = window.dsBootData?.pageData?.["s-palette"]?.code || [];
return (
Token 程式碼
整套設計系統的 Token 程式碼
{blocks.length === 0 ? (
{``}
尚未新增 Token 程式碼
請至後台「Palette → Code 程式碼」新增。
) : (
blocks.map((b, i) =>
)
)}
);
};
window.TokenCodeView = TokenCodeView;
// ---- Top-level Palette card with layer tabs ----
const PaletteCard = () => {
const [layer, setLayer] = React.useState("primitive");
return (
{/* Layer switch — Primitive / Semantic 二擇一；Code 已改為全域 Breadcrumb 按鈕 */}
{[
{ k: "primitive", label: "Primitive 基礎色" },
{ k: "semantic", label: "Semantic 語意層" },
].map((t, i, arr) => {
const on = layer === t.k;
const prevOn = i > 0 && layer === arr[i - 1].k;
return (
{i > 0 && (
)}
);
})}