@haklex/rich-style-token 0.0.65 → 0.0.67

package/README.md

@@ -1,181 +1,93 @@
 # @haklex/rich-style-token
 
-设计令牌和 CSS 变量，基于 Vanilla Extract 实现零运行时样式。
+Design tokens, CSS variables, and variant presets for the Haklex rich editor theme system.
 
-## 安装
+## Installation
 
 ```bash
 pnpm add @haklex/rich-style-token
 ```
 
-## 使用
+## Peer Dependencies
 
-```tsx
-import { vars } from '@haklex/rich-style-token'
-import { style } from '@vanilla-extract/css'
-
-export const container = style({
-  color: vars.color.text,
-  padding: vars.spacing.md,
-  borderRadius: vars.borderRadius.md,
-})
-```
-
-## 运行时颜色覆写
+| Package | Version |
+| --- | --- |
+| `react` | `>=19` |
 
-主题契约生成标准 CSS 自定义属性（`--rc-*`），使用方可在运行时覆写。
-
-### 方式一：`createThemeStyle`（类型安全）
+## Usage
 
 ```tsx
-import { createThemeStyle } from '@haklex/rich-style-token'
-
-const style = createThemeStyle({
-  color: {
-    accent: '#0ea5e9',
-    text: '#0c4a6e',
-    bg: '#f0f9ff',
-  },
-})
-
-// CSS 变量向下级联，所有子组件自动生效
-<div style={style}>
-  <RichEditor />
-</div>
-```
+import { createThemeStyle, articleTheme, vars } from '@haklex/rich-style-token'
+import { PortalThemeProvider } from '@haklex/rich-style-token'
 
-`ThemeTokens` 类型自动从 `vars` 契约推导，支持 `color`、`spacing`、`typography`、`borderRadius` 四组的任意子集覆写。
+// Generate inline style object from a theme
+const style = createThemeStyle(articleTheme)
 
-### 方式二：纯 CSS
+// Use CSS variables in your styles
+// vars.fontSize, vars.lineHeight, vars.fontFamily, etc.
 
-```css
-.my-theme {
-  --rc-accent: #0ea5e9;
-  --rc-text: #0c4a6e;
-  --rc-bg: #f0f9ff;
-}
+// Provide portal theme context for overlays
+<PortalThemeProvider theme="light" variant="article">
+  {children}
+</PortalThemeProvider>
 ```
 
-### 可覆写的 CSS 变量
+## Exports
 
-| 分组              | 变量                                                                                                                                                                                                                                                                                                                |
-| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **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-2xs`, `--rc-font-size-xs`, `--rc-font-size-sm`, `--rc-font-size-md`, `--rc-font-size-lg`, `--rc-font-size-base`, `--rc-font-size-small`, `--rc-line-height`, `--rc-line-height-tight`                                                                         |
-| **Border Radius** | `--rc-radius-sm`, `--rc-radius-md`, `--rc-radius-lg`                                                                                                                                                                                                                                                                |
+### Theme Construction
 
-## 导出
+| Export | Description |
+| --- | --- |
+| `createThemeStyle(tokens)` | Generate a CSS variable style object from theme tokens |
 
-```ts
-// CSS 变量契约
-export { vars } from './vars.css'
+### Context Providers
 
-// 运行时覆写工具
-export { createThemeStyle } from './create-theme-style'
-export type { ThemeTokens } from './create-theme-style'
+| Export | Description |
+| --- | --- |
+| `PortalContainerProvider` | Provide a custom portal container element |
+| `usePortalContainer()` | Access the portal container element |
+| `PortalThemeProvider` | Provide theme context for portaled overlays |
+| `PortalThemeWrapper` | Wrapper element that applies theme variables |
+| `usePortalTheme()` | Access the current portal theme |
 
-// 主题配置
-export { articleLayout, commentLayout, noteLayout } from './themes'
-export { fonts } from './themes'
-export { darkColors, lightArticleColors, lightCommentColors } from './themes'
+### Design Tokens
 
-// Portal 主题
-export {
-  PortalThemeProvider,
-  PortalThemeWrapper,
-  usePortalTheme,
-} from './portal-theme'
-```
+| Export | Description |
+| --- | --- |
+| `articleLayout` | Layout tokens for the `article` variant (sans-serif, 16px) |
+| `noteLayout` | Layout tokens for the `note` variant (CJK serif, 16px) |
+| `commentLayout` | Layout tokens for the `comment` variant (sans-serif, 14px) |
+| `darkColors` | Color tokens for dark mode |
+| `lightArticleColors` | Color tokens for light article/note mode |
+| `lightCommentColors` | Color tokens for light comment mode |
+| `fonts` | Font family definitions |
 
-## 变量结构
-
-### vars.color
-
-```ts
-vars.color.text // 主文本色
-vars.color.textSecondary // 次要文本
-vars.color.bg // 背景色
-vars.color.bgSecondary // 次要背景
-vars.color.border // 边框色
-vars.color.accent // 强调色
-vars.color.accentLight // 浅强调色
-vars.color.link // 链接色
-vars.color.codeText // 代码文本
-vars.color.codeBg // 代码背景
-vars.color.quoteBorder // 引用边框
-vars.color.quoteBg // 引用背景
-vars.color.alertInfo // 提示色
-vars.color.alertWarning // 警告色
-vars.color.alertTip // 建议色
-vars.color.alertCaution // 注意色
-vars.color.alertImportant // 重要色
-```
+### Theme Objects
 
-### vars.spacing
+| Export | Description |
+| --- | --- |
+| `articleTheme` | Complete theme for the `article` variant |
+| `noteTheme` | Complete theme for the `note` variant |
+| `commentTheme` | Complete theme for the `comment` variant |
+| `vars` | Typed CSS variable references (use in Vanilla Extract styles) |
 
-```ts
-vars.spacing.xs // article: 4px, comment: 2px
-vars.spacing.sm // article: 8px, comment: 4px
-vars.spacing.md // article: 16px, comment: 10px
-vars.spacing.lg // article: 24px, comment: 16px
-vars.spacing.xl // article: 32px, comment: 20px
-```
+### Types
 
-### vars.typography
-
-```ts
-vars.typography.fontFamily // 字体族
-vars.typography.fontMono // 等宽字体
-vars.typography.fontSize2xs // 超小字号（0.625em）
-vars.typography.fontSizeXs // 特小字号（0.75em）
-vars.typography.fontSizeSm // 小字号（0.8125em）
-vars.typography.fontSizeMd // 中字号（0.875em）
-vars.typography.fontSizeLg // 大字号（1.25em）
-vars.typography.fontSizeBase // 基础字号
-vars.typography.fontSizeSmall // 兼容小字号（px）
-vars.typography.lineHeight // 行高
-vars.typography.lineHeightTight // 紧行高
-```
+| Export | Description |
+| --- | --- |
+| `ThemeTokens` | Shape of a complete theme token set |
+| `PortalTheme` | Portal theme descriptor |
 
-### vars.borderRadius
+### Sub-path Exports
 
-```ts
-vars.borderRadius.sm // article: 4px, comment: 3px
-vars.borderRadius.md // article: 8px, comment: 6px
-vars.borderRadius.lg // article: 12px, comment: 8px
-```
-
-## 预设主题
-
-```ts
-import {
-  lightArticleColors,
-  darkColors,
-  articleLayout,
-} from '@haklex/rich-style-token'
-
-// 浅色文章主题
-lightArticleColors.text // '#1a1a1a'
-lightArticleColors.accent // '#33A6B8'
+| Import Path | Description |
+| --- | --- |
+| `@haklex/rich-style-token` | All tokens, themes, providers, and utilities |
+| `@haklex/rich-style-token/styles` | Vanilla Extract style definitions |
 
-// 深色主题
-darkColors.text // '#e5e5e5'
-darkColors.accent // '#F596AA'
+## Part of Haklex
 
-// 布局配置
-articleLayout.typography.fontSizeBase // '16px'
-articleLayout.typography.lineHeight // '1.7'
-```
-
-## 依赖
-
-```json
-{
-  "@vanilla-extract/css": "^1.17.1",
-  "react": ">=19"
-}
-```
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
 
 ## License
 

package/dist/index.mjs

@@ -26,18 +26,16 @@ function PortalThemeProvider({
 function usePortalTheme() {
   return React.useContext(PortalThemeContext);
 }
-function PortalThemeWrapper({
-  children
-}) {
+function PortalThemeWrapper({ children }) {
   const { className, theme } = usePortalTheme();
   if (!className) return children;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      style: { display: "contents" },
-      className,
       suppressHydrationWarning: true,
+      className,
       "data-theme": theme,
+      style: { display: "contents" },
       children
     }
   );

package/dist/portal-theme.d.ts

@@ -12,7 +12,7 @@ export declare function PortalThemeProvider({ className, theme, children, }: {
     children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function usePortalTheme(): PortalThemeContextType;
-export declare function PortalThemeWrapper({ children, }: {
+export declare function PortalThemeWrapper({ children }: {
     children: React.ReactNode;
 }): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/portal-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-theme.d.ts","sourceRoot":"","sources":["../src/portal-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAE1C,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAQD,eAAO,MAAM,uBAAuB,gCAAkC,CAAA;AAEtE,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,2CAQA;AAED,wBAAgB,cAAc,2BAE7B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,yTAaA"}
+{"version":3,"file":"portal-theme.d.ts","sourceRoot":"","sources":["../src/portal-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,WAAW,CAAC;CACpB,CAAC;AAQF,eAAO,MAAM,uBAAuB,gCAAkC,CAAC;AAEvE,wBAAgB,kBAAkB,IAAI,OAAO,CAE5C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAQA;AAED,wBAAgB,cAAc,2BAE7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,yTAa7E"}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@haklex/rich-style-token",
-  "type": "module",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Style tokens and CSS variables for haklex rich editor",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-style-token"
+  },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -18,9 +23,6 @@
   "files": [
     "dist"
   ],
-  "peerDependencies": {
-    "react": ">=19"
-  },
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@vanilla-extract/css": "^1.18.0",
@@ -30,6 +32,9 @@
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   },
+  "peerDependencies": {
+    "react": ">=19"
+  },
   "publishConfig": {
     "access": "public"
   },