@haklex/rich-style-token 0.0.20 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +51 -42
  2. package/dist/index.mjs +16 -1
  3. package/dist/themes.d.ts +15 -0
  4. package/dist/themes.d.ts.map +1 -1
  5. package/dist/vars.css.d.ts +5 -0
  6. package/dist/vars.css.d.ts.map +1 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -58,12 +58,12 @@ const style = createThemeStyle({
58
58
 
59
59
  ### 可覆写的 CSS 变量
60
60
 
61
- | 分组 | 变量 |
62
- |------|------|
63
- | **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` |
64
- | **Spacing** | `--rc-space-xs`, `--rc-space-sm`, `--rc-space-md`, `--rc-space-lg`, `--rc-space-xl` |
65
- | **Typography** | `--rc-font-family`, `--rc-font-mono`, `--rc-font-size-base`, `--rc-font-size-small`, `--rc-line-height`, `--rc-line-height-tight` |
66
- | **Border Radius** | `--rc-radius-sm`, `--rc-radius-md`, `--rc-radius-lg` |
61
+ | 分组 | 变量 |
62
+ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
63
+ | **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` |
64
+ | **Spacing** | `--rc-space-xs`, `--rc-space-sm`, `--rc-space-md`, `--rc-space-lg`, `--rc-space-xl` |
65
+ | **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` |
66
+ | **Border Radius** | `--rc-radius-sm`, `--rc-radius-md`, `--rc-radius-lg` |
67
67
 
68
68
  ## 导出
69
69
 
@@ -81,7 +81,11 @@ export { serifFonts, sharedFonts } from './themes'
81
81
  export { darkColors, lightArticleColors, lightCommentColors } from './themes'
82
82
 
83
83
  // Portal 主题
84
- export { PortalThemeProvider, PortalThemeWrapper, usePortalTheme } from './portal-theme'
84
+ export {
85
+ PortalThemeProvider,
86
+ PortalThemeWrapper,
87
+ usePortalTheme,
88
+ } from './portal-theme'
85
89
  ```
86
90
 
87
91
  ## 变量结构
@@ -89,52 +93,57 @@ export { PortalThemeProvider, PortalThemeWrapper, usePortalTheme } from './porta
89
93
  ### vars.color
90
94
 
91
95
  ```ts
92
- vars.color.text // 主文本色
96
+ vars.color.text // 主文本色
93
97
  vars.color.textSecondary // 次要文本
94
- vars.color.bg // 背景色
95
- vars.color.bgSecondary // 次要背景
96
- vars.color.border // 边框色
97
- vars.color.accent // 强调色
98
- vars.color.accentLight // 浅强调色
99
- vars.color.link // 链接色
100
- vars.color.codeText // 代码文本
101
- vars.color.codeBg // 代码背景
102
- vars.color.quoteBorder // 引用边框
103
- vars.color.quoteBg // 引用背景
104
- vars.color.alertInfo // 提示色
105
- vars.color.alertWarning // 警告色
106
- vars.color.alertTip // 建议色
107
- vars.color.alertCaution // 注意色
98
+ vars.color.bg // 背景色
99
+ vars.color.bgSecondary // 次要背景
100
+ vars.color.border // 边框色
101
+ vars.color.accent // 强调色
102
+ vars.color.accentLight // 浅强调色
103
+ vars.color.link // 链接色
104
+ vars.color.codeText // 代码文本
105
+ vars.color.codeBg // 代码背景
106
+ vars.color.quoteBorder // 引用边框
107
+ vars.color.quoteBg // 引用背景
108
+ vars.color.alertInfo // 提示色
109
+ vars.color.alertWarning // 警告色
110
+ vars.color.alertTip // 建议色
111
+ vars.color.alertCaution // 注意色
108
112
  vars.color.alertImportant // 重要色
109
113
  ```
110
114
 
111
115
  ### vars.spacing
112
116
 
113
117
  ```ts
114
- vars.spacing.xs // article: 4px, comment: 2px
115
- vars.spacing.sm // article: 8px, comment: 4px
116
- vars.spacing.md // article: 16px, comment: 10px
117
- vars.spacing.lg // article: 24px, comment: 16px
118
- vars.spacing.xl // article: 32px, comment: 20px
118
+ vars.spacing.xs // article: 4px, comment: 2px
119
+ vars.spacing.sm // article: 8px, comment: 4px
120
+ vars.spacing.md // article: 16px, comment: 10px
121
+ vars.spacing.lg // article: 24px, comment: 16px
122
+ vars.spacing.xl // article: 32px, comment: 20px
119
123
  ```
120
124
 
121
125
  ### vars.typography
122
126
 
123
127
  ```ts
124
- vars.typography.fontFamily // 字体族
125
- vars.typography.fontMono // 等宽字体
126
- vars.typography.fontSizeBase // 基础字号
127
- vars.typography.fontSizeSmall // 小字号
128
- vars.typography.lineHeight // 行高
128
+ vars.typography.fontFamily // 字体族
129
+ vars.typography.fontMono // 等宽字体
130
+ vars.typography.fontSize2xs // 超小字号（0.625em）
131
+ vars.typography.fontSizeXs // 特小字号（0.75em）
132
+ vars.typography.fontSizeSm // 小字号（0.8125em）
133
+ vars.typography.fontSizeMd // 中字号（0.875em）
134
+ vars.typography.fontSizeLg // 大字号（1.25em）
135
+ vars.typography.fontSizeBase // 基础字号
136
+ vars.typography.fontSizeSmall // 兼容小字号（px）
137
+ vars.typography.lineHeight // 行高
129
138
  vars.typography.lineHeightTight // 紧行高
130
139
  ```
131
140
 
132
141
  ### vars.borderRadius
133
142
 
134
143
  ```ts
135
- vars.borderRadius.sm // article: 4px, comment: 3px
136
- vars.borderRadius.md // article: 8px, comment: 6px
137
- vars.borderRadius.lg // article: 12px, comment: 8px
144
+ vars.borderRadius.sm // article: 4px, comment: 3px
145
+ vars.borderRadius.md // article: 8px, comment: 6px
146
+ vars.borderRadius.lg // article: 12px, comment: 8px
138
147
  ```
139
148
 
140
149
  ## 预设主题
@@ -143,20 +152,20 @@ vars.borderRadius.lg // article: 12px, comment: 8px
143
152
  import {
144
153
  lightArticleColors,
145
154
  darkColors,
146
- articleLayout
155
+ articleLayout,
147
156
  } from '@haklex/rich-style-token'
148
157
 
149
158
  // 浅色文章主题
150
- lightArticleColors.text // '#1a1a1a'
151
- lightArticleColors.accent // '#33A6B8'
159
+ lightArticleColors.text // '#1a1a1a'
160
+ lightArticleColors.accent // '#33A6B8'
152
161
 
153
162
  // 深色主题
154
- darkColors.text // '#e5e5e5'
155
- darkColors.accent // '#F596AA'
163
+ darkColors.text // '#e5e5e5'
164
+ darkColors.accent // '#F596AA'
156
165
 
157
166
  // 布局配置
158
- articleLayout.typography.fontSizeBase // '16px'
159
- articleLayout.typography.lineHeight // '1.7'
167
+ articleLayout.typography.fontSizeBase // '16px'
168
+ articleLayout.typography.lineHeight // '1.7'
160
169
  ```
161
170
 
162
171
  ## 依赖
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { createContext, useMemo, use } from "react";
3
- 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)", 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)" }, layout: { maxWidth: "var(--rc-max-width)" } };
3
+ 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)", fontSize2xs: "var(--rc-font-size-2xs)", fontSizeXs: "var(--rc-font-size-xs)", fontSizeSm: "var(--rc-font-size-sm)", fontSizeMd: "var(--rc-font-size-md)", fontSizeLg: "var(--rc-font-size-lg)", fontSizeBase: "var(--rc-font-size-base)", fontSizeSmall: "var(--rc-font-size-small)", 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)" }, layout: { maxWidth: "var(--rc-max-width)" } };
4
4
  function extractVarName(cssVarRef) {
5
5
  const match = cssVarRef.match(/^var\((.+)\)$/);
6
6
  return match ? match[1] : cssVarRef;
@@ -100,6 +100,11 @@ const articleLayout = {
100
100
  spacing: { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px" },
101
101
  typography: {
102
102
  ...sharedFonts,
103
+ fontSize2xs: "0.625em",
104
+ fontSizeXs: "0.75em",
105
+ fontSizeSm: "0.8125em",
106
+ fontSizeMd: "0.875em",
107
+ fontSizeLg: "1.25em",
103
108
  fontSizeBase: "16px",
104
109
  fontSizeSmall: "14px",
105
110
  lineHeight: "1.7",
@@ -112,6 +117,11 @@ const noteLayout = {
112
117
  spacing: articleLayout.spacing,
113
118
  typography: {
114
119
  ...serifFonts,
120
+ fontSize2xs: "0.625em",
121
+ fontSizeXs: "0.75em",
122
+ fontSizeSm: "0.8125em",
123
+ fontSizeMd: "0.875em",
124
+ fontSizeLg: "1.25em",
115
125
  fontSizeBase: "16px",
116
126
  fontSizeSmall: "14px",
117
127
  lineHeight: "1.8",
@@ -124,6 +134,11 @@ const commentLayout = {
124
134
  spacing: { xs: "2px", sm: "4px", md: "10px", lg: "16px", xl: "20px" },
125
135
  typography: {
126
136
  ...sharedFonts,
137
+ fontSize2xs: "0.625em",
138
+ fontSizeXs: "0.75em",
139
+ fontSizeSm: "0.8125em",
140
+ fontSizeMd: "0.875em",
141
+ fontSizeLg: "1.25em",
127
142
  fontSizeBase: "14px",
128
143
  fontSizeSmall: "12px",
129
144
  lineHeight: "1.5",
package/dist/themes.d.ts CHANGED
@@ -75,6 +75,11 @@ export declare const articleLayout: {
75
75
  xl: string;
76
76
  };
77
77
  typography: {
78
+ fontSize2xs: string;
79
+ fontSizeXs: string;
80
+ fontSizeSm: string;
81
+ fontSizeMd: string;
82
+ fontSizeLg: string;
78
83
  fontSizeBase: string;
79
84
  fontSizeSmall: string;
80
85
  lineHeight: string;
@@ -100,6 +105,11 @@ export declare const noteLayout: {
100
105
  xl: string;
101
106
  };
102
107
  typography: {
108
+ fontSize2xs: string;
109
+ fontSizeXs: string;
110
+ fontSizeSm: string;
111
+ fontSizeMd: string;
112
+ fontSizeLg: string;
103
113
  fontSizeBase: string;
104
114
  fontSizeSmall: string;
105
115
  lineHeight: string;
@@ -125,6 +135,11 @@ export declare const commentLayout: {
125
135
  xl: string;
126
136
  };
127
137
  typography: {
138
+ fontSize2xs: string;
139
+ fontSizeXs: string;
140
+ fontSizeSm: string;
141
+ fontSizeMd: string;
142
+ fontSizeLg: string;
128
143
  fontSizeBase: string;
129
144
  fontSizeSmall: string;
130
145
  lineHeight: string;
package/dist/themes.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;CAKvB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAItB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;CAkB9B,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;CAI9B,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;CAkBtB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;CAWzB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAWtB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;CAWzB,CAAA"}
1
+ {"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;CAKvB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAItB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;CAkB9B,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;CAI9B,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;CAkBtB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBzB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBtB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBzB,CAAA"}
package/dist/vars.css.d.ts CHANGED
@@ -28,6 +28,11 @@ export declare const vars: {
28
28
  typography: {
29
29
  fontFamily: `var(--${string})`;
30
30
  fontMono: `var(--${string})`;
31
+ fontSize2xs: `var(--${string})`;
32
+ fontSizeXs: `var(--${string})`;
33
+ fontSizeSm: `var(--${string})`;
34
+ fontSizeMd: `var(--${string})`;
35
+ fontSizeLg: `var(--${string})`;
31
36
  fontSizeBase: `var(--${string})`;
32
37
  fontSizeSmall: `var(--${string})`;
33
38
  lineHeight: `var(--${string})`;
package/dist/vars.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../src/vars.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Cf,CAAA"}
1
+ {"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../src/vars.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDf,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haklex/rich-style-token",
3
- "version": "0.0.20",
3
+ "version": "0.0.23",
4
4
  "description": "Style tokens and CSS variables for haklex rich editor",
5
5
  "license": "MIT",
6
6
  "type": "module",