Blizzard
760ca06667
react-flow 此前 colorMode 写死 dark、背景/连线/控件全用库默认，换肤下不协调。改为： - colorMode 绑定当前主题 → 控件/连线/手柄/选区自动随亮暗切换。 - Background 点阵色、MiniMap 遮罩随主题；隐藏库水印（proOptions.hideAttribution，更干净）。 - index.css 精修 react-flow：控件(细边/圆角/themed hover)、连线(中性描边+选中紫)、迷你图边框，对齐设计系统。 - TypedNode：卡面落到表面色(ink-850)、选中环用 brand 令牌(替硬编码紫)、加 hover 描边、手柄themed。 - 工具栏/调色板/检查器已用新 Button + 令牌类，自动一致。 tsc + 生产构建通过；桌面端已 HMR。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
123 lines
3.2 KiB
CSS
123 lines
3.2 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* 主题令牌：:root=亮色，.dark=暗色。值为 RGB 三元组，供 tailwind 的 rgb(var() / α) 取用。
|
||
亮色走 shadcn 中性灰(zinc)，暗色为精炼中性暗(zinc 系，替代原偏蓝的 ink)。 */
|
||
:root {
|
||
--ink-950: 249 249 250; /* 页面底 */
|
||
--ink-900: 255 255 255; /* 顶栏/面板 */
|
||
--ink-850: 255 255 255; /* 卡片 */
|
||
--ink-800: 244 244 245; /* hover/抬升 */
|
||
--ink-700: 228 228 231;
|
||
--ink-600: 212 212 216;
|
||
--line: 228 228 231; /* 边框 zinc-200 */
|
||
--slate-100: 24 24 27; /* 最强文字 */
|
||
--slate-200: 24 24 27; /* 主文字 */
|
||
--slate-300: 63 63 70;
|
||
--slate-400: 82 82 91;
|
||
--slate-500: 113 113 122; /* 次要 */
|
||
--slate-600: 161 161 170; /* 弱 */
|
||
--slate-700: 212 212 216;
|
||
--sb-thumb: 212 212 216;
|
||
--sb-thumb-hover: 161 161 170;
|
||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
|
||
color-scheme: light;
|
||
}
|
||
|
||
.dark {
|
||
--ink-950: 10 10 12;
|
||
--ink-900: 20 20 24;
|
||
--ink-850: 24 24 27;
|
||
--ink-800: 31 31 35;
|
||
--ink-700: 38 38 43;
|
||
--ink-600: 50 50 56;
|
||
--line: 39 39 42; /* zinc-800 */
|
||
--slate-100: 244 244 245;
|
||
--slate-200: 228 228 231;
|
||
--slate-300: 212 212 216;
|
||
--slate-400: 161 161 170;
|
||
--slate-500: 138 138 147;
|
||
--slate-600: 113 113 122;
|
||
--slate-700: 82 82 91;
|
||
--sb-thumb: 39 39 42;
|
||
--sb-thumb-hover: 63 63 70;
|
||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||
color-scheme: dark;
|
||
}
|
||
|
||
html,
|
||
body,
|
||
#root {
|
||
height: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
body {
|
||
background: rgb(var(--ink-950));
|
||
color: rgb(var(--slate-300));
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
/* 滚动条随主题 */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgb(var(--sb-thumb));
|
||
border-radius: 8px;
|
||
border: 2px solid transparent;
|
||
background-clip: padding-box;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgb(var(--sb-thumb-hover));
|
||
background-clip: padding-box;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
/* 紫→青品牌渐变文字 */
|
||
.brand-gradient {
|
||
background: linear-gradient(90deg, #a78bfa, #22d3ee);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
}
|
||
|
||
/* 输入控件随主题（color-scheme 由 :root/.dark 设定，控件自动继承） */
|
||
|
||
/* react-flow 画布主题化：控件/连线/迷你图与设计系统对齐（colorMode 已处理大半，此处精修） */
|
||
.react-flow__controls {
|
||
box-shadow: none;
|
||
border: 1px solid rgb(var(--line));
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
.react-flow__controls-button {
|
||
background: rgb(var(--ink-900));
|
||
border-bottom: 1px solid rgb(var(--line));
|
||
color: rgb(var(--slate-400));
|
||
}
|
||
.react-flow__controls-button:hover {
|
||
background: rgb(var(--ink-800));
|
||
}
|
||
.react-flow__controls-button svg {
|
||
fill: currentColor;
|
||
}
|
||
.react-flow__edge-path {
|
||
stroke: rgb(var(--slate-600));
|
||
stroke-width: 1.5;
|
||
}
|
||
.react-flow__edge.selected .react-flow__edge-path,
|
||
.react-flow__edge:focus .react-flow__edge-path {
|
||
stroke: #8b5cf6;
|
||
}
|
||
.react-flow__minimap {
|
||
border: 1px solid rgb(var(--line));
|
||
border-radius: 8px;
|
||
}
|