react-mathtype-editor 1.0.5 → 1.0.6

package/README.md

@@ -77,7 +77,8 @@ const MathTypeEditor = dynamic(
 |------|------|--------|------|
 | defaultValue | string | '' | 默认的 LaTeX 公式 |
 | onChange | (value: string) => void | - | 公式变化时的回调函数 |
-| style | React.CSSProperties | - | 自定义样式 |
+| className | string | - | 附加到组件根节点的类名 |
+| style | MathTypeEditorStyle | - | 根节点样式，支持 `--mathtype-*` CSS 变量 |
 
 ## 功能说明
 
@@ -181,4 +182,50 @@ npm run build
 
 ## 许可证
 
-MIT
+MIT
+## 主题配置
+
+使用带 `--mathtype-` 前缀的 CSS 自定义属性，不依赖宿主 UI 框架或全局 `--primary`。
+默认值写在变量的回退值中，因此可以从父容器继承，也可以使用 `className` 或 `style` 为单个实例设置主题。
+不需要覆盖内部类名或使用 `!important`。主题变量只控制编辑器；弹窗和确认按钮由宿主负责。
+
+```tsx
+import MathTypeEditor, { type MathTypeEditorStyle } from 'react-mathtype-editor'
+
+const editorStyle: MathTypeEditorStyle = {
+  width: '100%',
+  '--mathtype-primary': '#00cc7e',
+  '--mathtype-primary-hover': '#00b26e',
+  '--mathtype-focus-ring': 'rgba(0, 204, 126, 0.18)',
+}
+
+<MathTypeEditor className="course-formula-editor" style={editorStyle} />
+```
+
+也可在应用样式表中设置（不同实例互不影响）：
+
+```css
+.course-formula-editor {
+  --mathtype-primary: #00cc7e;
+}
+
+/* 在父容器设置后，内部所有编辑器都会继承。 */
+.course-panel {
+  --mathtype-primary: #00cc7e;
+}
+```
+
+| 变量 | 默认值 | 用途 |
+|------|--------|------|
+| `--mathtype-primary` | `#1677ff` | 分类选中、下划线、公式 hover 和 MathLive 光标 |
+| `--mathtype-primary-hover` | 跟随 primary | 分类 hover 和 LaTeX 输入边框 |
+| `--mathtype-focus-ring` | primary 的 18% 透明色 | LaTeX 聚焦光环 |
+| `--mathtype-primary-surface` | primary 的 10% 透明色（MathLive 选择区为 18%） | 分类翻页 hover 背景和 MathLive 选择区 |
+| `--mathtype-text` | `rgba(0, 0, 0, 0.88)` | 正文文字 |
+| `--mathtype-muted` | 各控件原有次要文字颜色 | 提示和次要文字 |
+| `--mathtype-background` | `#fff` | 编辑器和输入区域背景 |
+| `--mathtype-surface` | 各控件原有浅灰色 | 模式切换和分类翻页背景 |
+| `--mathtype-border` | 各控件原有浅灰色 | 输入框边框和分类分隔线 |
+
+透明色默认使用标准 `color-mix()` 推导。需要支持不具备该 CSS 能力的旧浏览器时，请显式传入 `--mathtype-focus-ring` 和 `--mathtype-primary-surface` 的 `rgba()` 值。
+组件自身样式均限定在 `.react-mathtype-editor` 内。