样式与令牌

包内样式是原生 CSS，作用域挂在 .prose-site 下，配色由独立命名空间 --lkes-* 控制。

九个令牌

为什么是两套字面量

一个真实踩过的坑：如果令牌写成 --lkes-bg: var(--background, #fff)，var() 会在声明处（:root）就被替换并固化。宿主之后再给 .dark 改 --background，对已经算好的值没有任何影响，于是暗色永远不生效。

现在改成包内自带亮暗两套字面量：亮色在 :root，暗色在 .dark 与 [data-theme="dark"] 祖先作用域。组件里的 var(--lkes-*) 在元素上解析，祖先一加 .dark，Callout、Tabs、Steps、Cards、Accordion、Files、TypeTable、图片、编辑器同时切暗，不需要每个组件各写一份。

覆盖

在普通样式里重新声明同名变量就行，不需要抢引入顺序——未分层声明优先级高于 @layer 内的声明。

/* 品牌色换成你家的主色 */
:root {
  --lkes-accent: #4f46e5;
  --lkes-ring: #4f46e5;
}

.dark {
  --lkes-accent: #8b8cf0;
  --lkes-ring: #8b8cf0;
}

也可以只改局部：写在正文容器上，只影响那一块。

按组件引入

不想要整包样式时，可以只取分片：

import "@heikeson/md-engine/styles/callout.css";

styles/engine.css 保留为旧路径的转发入口，升级不会断。

三条硬约束

违反任意一条即视为破坏性变更，会导致已有文章渲染走样——而这个项目不做内容迁移，所以这三条没有例外。