@haklex/rich-style-token 0.0.10 → 0.0.12

package/README.md

@@ -21,12 +21,60 @@ export const container = style({
 })
 ```
 
+## 运行时颜色覆写
+
+主题契约生成标准 CSS 自定义属性（`--rc-*`），使用方可在运行时覆写。
+
+### 方式一：`createThemeStyle`（类型安全）
+
+```tsx
+import { createThemeStyle } from '@haklex/rich-style-token'
+
+const style = createThemeStyle({
+  color: {
+    accent: '#0ea5e9',
+    text: '#0c4a6e',
+    bg: '#f0f9ff',
+  },
+})
+
+// CSS 变量向下级联，所有子组件自动生效
+<div style={style}>
+  <RichEditor />
+</div>
+```
+
+`ThemeTokens` 类型自动从 `vars` 契约推导，支持 `color`、`spacing`、`typography`、`borderRadius` 四组的任意子集覆写。
+
+### 方式二：纯 CSS
+
+```css
+.my-theme {
+  --rc-accent: #0ea5e9;
+  --rc-text: #0c4a6e;
+  --rc-bg: #f0f9ff;
+}
+```
+
+### 可覆写的 CSS 变量
+
+| 分组 | 变量 |
+|------|------|
+| **Color** | `--rc-text`, `--rc-text-secondary`, `--rc-bg`, `--rc-bg-secondary`, `--rc-border`, `--rc-accent`, `--rc-accent-light`, `--rc-link`, `--rc-code-text`, `--rc-code-bg`, `--rc-quote-border`, `--rc-quote-bg`, `--rc-alert-info`, `--rc-alert-warning`, `--rc-alert-tip`, `--rc-alert-caution`, `--rc-alert-important` |
+| **Spacing** | `--rc-space-xs`, `--rc-space-sm`, `--rc-space-md`, `--rc-space-lg`, `--rc-space-xl` |
+| **Typography** | `--rc-font-family`, `--rc-font-mono`, `--rc-font-size-base`, `--rc-font-size-small`, `--rc-font-size-large`, `--rc-line-height`, `--rc-line-height-tight` |
+| **Border Radius** | `--rc-radius-sm`, `--rc-radius-md`, `--rc-radius-lg` |
+
 ## 导出
 
 ```ts
 // CSS 变量契约
 export { vars } from './vars.css'
 
+// 运行时覆写工具
+export { createThemeStyle } from './create-theme-style'
+export type { ThemeTokens } from './create-theme-style'
+
 // 主题配置
 export { articleLayout, commentLayout, noteLayout } from './themes'
 export { serifFonts, sharedFonts } from './themes'
@@ -93,10 +141,10 @@ vars.borderRadius.lg  // article: 12px, comment: 8px
 ## 预设主题
 
 ```ts
-import { 
-  lightArticleColors, 
-  darkColors, 
-  articleLayout 
+import {
+  lightArticleColors,
+  darkColors,
+  articleLayout
 } from '@haklex/rich-style-token'
 
 // 浅色文章主题

package/dist/create-theme-style.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { vars } from './vars.css';
+type VarsContract = typeof vars;
+export type ThemeTokens = {
+    [K in keyof VarsContract]?: Partial<Record<keyof VarsContract[K], string>>;
+};
+export declare function createThemeStyle(tokens: ThemeTokens): CSSProperties;
+export {};
+//# sourceMappingURL=create-theme-style.d.ts.map

package/dist/create-theme-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme-style.d.ts","sourceRoot":"","sources":["../src/create-theme-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,KAAK,YAAY,GAAG,OAAO,IAAI,CAAA;AAE/B,MAAM,MAAM,WAAW,GAAG;KACvB,CAAC,IAAI,MAAM,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,YAAY,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAC3E,CAAA;AAOD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,aAAa,CAoBnE"}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export type { ThemeTokens } from './create-theme-style';
+export { createThemeStyle } from './create-theme-style';
 export { PortalThemeProvider, PortalThemeWrapper, usePortalTheme, } from './portal-theme';
 export { articleLayout, commentLayout, darkColors, lightArticleColors, lightCommentColors, noteLayout, serifFonts, sharedFonts, } from './themes';
 export { vars } from './vars.css';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,WAAW,GACZ,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,aAAa,EACb,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,WAAW,GACZ,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.mjs

@@ -1,5 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useMemo, use } from "react";
+var vars = { color: { text: "var(--rc-text)", textSecondary: "var(--rc-text-secondary)", bg: "var(--rc-bg)", bgSecondary: "var(--rc-bg-secondary)", border: "var(--rc-border)", accent: "var(--rc-accent)", accentLight: "var(--rc-accent-light)", link: "var(--rc-link)", codeText: "var(--rc-code-text)", codeBg: "var(--rc-code-bg)", quoteBorder: "var(--rc-quote-border)", quoteBg: "var(--rc-quote-bg)", alertInfo: "var(--rc-alert-info)", alertWarning: "var(--rc-alert-warning)", alertTip: "var(--rc-alert-tip)", alertCaution: "var(--rc-alert-caution)", alertImportant: "var(--rc-alert-important)" }, spacing: { xs: "var(--rc-space-xs)", sm: "var(--rc-space-sm)", md: "var(--rc-space-md)", lg: "var(--rc-space-lg)", xl: "var(--rc-space-xl)" }, typography: { fontFamily: "var(--rc-font-family)", fontMono: "var(--rc-font-mono)", fontSizeBase: "var(--rc-font-size-base)", fontSizeSmall: "var(--rc-font-size-small)", fontSizeLarge: "var(--rc-font-size-large)", lineHeight: "var(--rc-line-height)", lineHeightTight: "var(--rc-line-height-tight)" }, borderRadius: { sm: "var(--rc-radius-sm)", md: "var(--rc-radius-md)", lg: "var(--rc-radius-lg)" } };
+function extractVarName(cssVarRef) {
+  const match = cssVarRef.match(/^var\((.+)\)$/);
+  return match ? match[1] : cssVarRef;
+}
+function createThemeStyle(tokens) {
+  const style = {};
+  for (const [group, values] of Object.entries(tokens)) {
+    if (!values) continue;
+    const contractGroup = vars[group];
+    if (!contractGroup) continue;
+    for (const [key, value] of Object.entries(values)) {
+      if (value == null) continue;
+      const cssVarRef = contractGroup[key];
+      if (cssVarRef) {
+        style[extractVarName(cssVarRef)] = value;
+      }
+    }
+  }
+  return style;
+}
 const PortalThemeContext = createContext({
   className: ""
 });
@@ -110,12 +131,12 @@ const commentLayout = {
   },
   borderRadius: { sm: "3px", md: "6px", lg: "8px" }
 };
-var vars = { color: { text: "var(--rc-text)", textSecondary: "var(--rc-text-secondary)", bg: "var(--rc-bg)", bgSecondary: "var(--rc-bg-secondary)", border: "var(--rc-border)", accent: "var(--rc-accent)", accentLight: "var(--rc-accent-light)", link: "var(--rc-link)", codeText: "var(--rc-code-text)", codeBg: "var(--rc-code-bg)", quoteBorder: "var(--rc-quote-border)", quoteBg: "var(--rc-quote-bg)", alertInfo: "var(--rc-alert-info)", alertWarning: "var(--rc-alert-warning)", alertTip: "var(--rc-alert-tip)", alertCaution: "var(--rc-alert-caution)", alertImportant: "var(--rc-alert-important)" }, spacing: { xs: "var(--rc-space-xs)", sm: "var(--rc-space-sm)", md: "var(--rc-space-md)", lg: "var(--rc-space-lg)", xl: "var(--rc-space-xl)" }, typography: { fontFamily: "var(--rc-font-family)", fontMono: "var(--rc-font-mono)", fontSizeBase: "var(--rc-font-size-base)", fontSizeSmall: "var(--rc-font-size-small)", fontSizeLarge: "var(--rc-font-size-large)", lineHeight: "var(--rc-line-height)", lineHeightTight: "var(--rc-line-height-tight)" }, borderRadius: { sm: "var(--rc-radius-sm)", md: "var(--rc-radius-md)", lg: "var(--rc-radius-lg)" } };
 export {
   PortalThemeProvider,
   PortalThemeWrapper,
   articleLayout,
   commentLayout,
+  createThemeStyle,
   darkColors,
   lightArticleColors,
   lightCommentColors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-style-token",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Style tokens and CSS variables for haklex rich editor",
   "license": "MIT",
   "type": "module",