139 lines
4.7 KiB
TypeScript
139 lines
4.7 KiB
TypeScript
export type CanvasColorTheme = "light" | "dark";
|
|
export type CanvasBackgroundMode = "dots" | "lines" | "blank";
|
|
|
|
export const canvasThemes = {
|
|
light: {
|
|
canvas: {
|
|
background: "#ffffff",
|
|
dot: "rgba(15,23,42,.30)",
|
|
line: "rgba(15,23,42,.15)",
|
|
selectionFill: "rgba(17,17,17,.10)",
|
|
},
|
|
node: {
|
|
label: "#4b5563",
|
|
fill: "#ffffff",
|
|
panel: "#ffffff",
|
|
stroke: "#e2e4e8",
|
|
edge: "rgba(15,23,42,.16)",
|
|
shadow: "0 6px 18px rgba(15,23,42,.08)",
|
|
hoverShadow: "0 10px 24px rgba(15,23,42,.12)",
|
|
activeStroke: "#111827",
|
|
placeholder: "#9ca3af",
|
|
text: "#111827",
|
|
muted: "#6b7280",
|
|
faint: "#9ca3af",
|
|
},
|
|
frame: {
|
|
fill: "rgba(17,24,39,.025)",
|
|
stroke: "rgba(17,24,39,.18)",
|
|
activeFill: "rgba(17,17,17,.05)",
|
|
activeStroke: "#171717",
|
|
preview: "rgba(255,255,255,.82)",
|
|
},
|
|
toolbar: {
|
|
panel: "rgba(255,255,255,.94)",
|
|
border: "rgba(17,24,39,.10)",
|
|
item: "#4b5563",
|
|
itemHover: "rgba(17,24,39,.06)",
|
|
activeBg: "rgba(17,24,39,.10)",
|
|
activeText: "#111827",
|
|
},
|
|
spatial: {
|
|
surface: "rgba(255,255,255,.72)",
|
|
elevated: "rgba(255,255,255,.94)",
|
|
dropzone: "rgba(248,250,252,.78)",
|
|
glow: "rgba(17,17,17,.14)",
|
|
glowStrong: "rgba(17,17,17,.42)",
|
|
shadow: "rgba(15,23,42,.18)",
|
|
},
|
|
// 时间线/字幕组件语义色：轨道底、按类型区分的片段、标尺与播放头、字幕列表条目态。
|
|
timeline: {
|
|
trackFill: "#f6f8fb",
|
|
trackBorder: "rgba(17,24,39,.08)",
|
|
clipVideo: "rgba(79,110,232,.16)",
|
|
clipAudio: "rgba(16,185,129,.14)",
|
|
clipSubtitle: "rgba(245,158,11,.16)",
|
|
clipSelectedBorder: "#171717",
|
|
handle: "rgba(255,255,255,.72)",
|
|
rulerTick: "rgba(17,24,39,.28)",
|
|
rulerLabel: "#6b7280",
|
|
playhead: "#171717",
|
|
entryActive: "rgba(17,17,17,.10)",
|
|
entryHover: "rgba(17,24,39,.05)",
|
|
},
|
|
accent: {
|
|
primary: "#171717",
|
|
primarySoft: "rgba(17,17,17,.10)",
|
|
onPrimary: "#ffffff",
|
|
danger: "#f87171",
|
|
},
|
|
},
|
|
dark: {
|
|
canvas: {
|
|
background: "#0b0b0b",
|
|
dot: "rgba(170,170,170,.22)",
|
|
line: "rgba(170,170,170,.10)",
|
|
selectionFill: "rgba(255,255,255,.12)",
|
|
},
|
|
node: {
|
|
label: "#a3a3a3",
|
|
fill: "#181818",
|
|
panel: "#141414",
|
|
stroke: "rgba(255,255,255,.12)",
|
|
edge: "rgba(255,255,255,.18)",
|
|
shadow: "0 8px 24px rgba(0,0,0,.34)",
|
|
hoverShadow: "0 12px 30px rgba(0,0,0,.46)",
|
|
activeStroke: "#f1f1f1",
|
|
placeholder: "#737373",
|
|
text: "#ededed",
|
|
muted: "#a3a3a3",
|
|
faint: "#666666",
|
|
},
|
|
frame: {
|
|
fill: "rgba(255,255,255,.025)",
|
|
stroke: "rgba(190,198,210,.15)",
|
|
activeFill: "rgba(255,255,255,.08)",
|
|
activeStroke: "#f5f5f5",
|
|
preview: "rgba(20,20,20,.94)",
|
|
},
|
|
toolbar: {
|
|
panel: "rgba(20,20,20,.97)",
|
|
border: "rgba(255,255,255,.1)",
|
|
item: "#d4d4d4",
|
|
itemHover: "rgba(255,255,255,.07)",
|
|
activeBg: "rgba(255,255,255,.10)",
|
|
activeText: "#f5f6f8",
|
|
},
|
|
spatial: {
|
|
surface: "rgba(22,22,22,.82)",
|
|
elevated: "rgba(15,15,15,.97)",
|
|
dropzone: "rgba(8,8,8,.9)",
|
|
glow: "rgba(255,255,255,.12)",
|
|
glowStrong: "rgba(255,255,255,.36)",
|
|
shadow: "rgba(0,0,0,.6)",
|
|
},
|
|
timeline: {
|
|
trackFill: "#101114",
|
|
trackBorder: "rgba(255,255,255,.08)",
|
|
clipVideo: "rgba(96,126,234,.22)",
|
|
clipAudio: "rgba(16,185,129,.20)",
|
|
clipSubtitle: "rgba(245,158,11,.20)",
|
|
clipSelectedBorder: "#f5f5f5",
|
|
handle: "rgba(255,255,255,.5)",
|
|
rulerTick: "rgba(255,255,255,.26)",
|
|
rulerLabel: "#a3a3a3",
|
|
playhead: "#f5f5f5",
|
|
entryActive: "rgba(255,255,255,.10)",
|
|
entryHover: "rgba(255,255,255,.06)",
|
|
},
|
|
accent: {
|
|
primary: "#f5f5f5",
|
|
primarySoft: "rgba(255,255,255,.11)",
|
|
onPrimary: "#131313",
|
|
danger: "#fb7185",
|
|
},
|
|
},
|
|
} as const;
|
|
|
|
export type CanvasTheme = (typeof canvasThemes)[CanvasColorTheme];
|