@haklex/rich-style-token 0.0.24 → 0.0.26

package/README.md

@@ -77,7 +77,7 @@ export type { ThemeTokens } from './create-theme-style'
 
 // 主题配置
 export { articleLayout, commentLayout, noteLayout } from './themes'
-export { serifFonts, sharedFonts } from './themes'
+export { fonts } from './themes'
 export { darkColors, lightArticleColors, lightCommentColors } from './themes'
 
 // Portal 主题

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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 { articleLayout, commentLayout, darkColors, fonts, lightArticleColors, lightCommentColors, noteLayout, } from './themes';
 export { vars } from './vars.css';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"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,KAAK,EACL,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,GACX,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.mjs

@@ -1,6 +1,6 @@
 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)", 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)" } };
+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)", fontFamilySerif: "var(--rc-font-family-serif)", 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)" } };
 function extractVarName(cssVarRef) {
   const match = cssVarRef.match(/^var\((.+)\)$/);
   return match ? match[1] : cssVarRef;
@@ -44,101 +44,97 @@ function PortalThemeWrapper({ children }) {
   if (!className) return children;
   return /* @__PURE__ */ jsx("div", { style: { display: "contents" }, className, children });
 }
-const sharedFonts = {
-  fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+const fonts = {
+  fontFamily: '"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji',
+  fontFamilySerif: '"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif',
   fontMono: '"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace'
 };
-const serifFonts = {
-  fontFamily: '"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif',
-  fontMono: sharedFonts.fontMono
-};
 const lightArticleColors = {
-  text: "#1a1a1a",
-  textSecondary: "#6b7280",
+  text: "#000",
+  textSecondary: "#5f6e78",
   bg: "#ffffff",
-  bgSecondary: "#f9fafb",
-  border: "#e5e7eb",
-  accent: "#33A6B8",
-  accentLight: "#33A6B833",
-  link: "#33A6B8",
-  codeText: "#e83e8c",
-  codeBg: "#f3f4f6",
-  quoteBorder: "#33A6B8",
-  quoteBg: "#f0f9fb",
-  alertInfo: "#3b82f6",
-  alertWarning: "#f59e0b",
-  alertTip: "#22c55e",
-  alertCaution: "#ef4444",
-  alertImportant: "#a855f7"
+  bgSecondary: "#fafafa",
+  border: "#ebedee",
+  accent: "#2563eb",
+  accentLight: "#2563eb20",
+  link: "#2563eb",
+  codeText: "#374047",
+  codeBg: "#f8f9f9",
+  quoteBorder: "#2563eb",
+  quoteBg: "#eff6ff",
+  alertInfo: "#006bb7",
+  alertWarning: "#cc5500",
+  alertTip: "#11cc00",
+  alertCaution: "#cc0011",
+  alertImportant: "#5500cc"
 };
 const lightCommentColors = {
   ...lightArticleColors,
-  quoteBorder: "#9ca3af",
-  quoteBg: "#f9fafb"
+  quoteBorder: "#acb4b9",
+  quoteBg: "#f8f9f9"
 };
 const darkColors = {
-  text: "#e5e5e5",
-  textSecondary: "#a3a3a3",
-  bg: "#171717",
-  bgSecondary: "#262626",
-  border: "#404040",
-  accent: "#F596AA",
-  accentLight: "#F596AA33",
-  link: "#F596AA",
-  codeText: "#f472b6",
-  codeBg: "#262626",
-  quoteBorder: "#F596AA",
-  quoteBg: "#262626",
-  alertInfo: "#60a5fa",
-  alertWarning: "#fbbf24",
-  alertTip: "#4ade80",
-  alertCaution: "#f87171",
-  alertImportant: "#c084fc"
+  text: "#fff",
+  textSecondary: "#97a1a7",
+  bg: "#000",
+  bgSecondary: "#171717",
+  border: "#374047",
+  accent: "#60a5fa",
+  accentLight: "#60a5fa20",
+  link: "#60a5fa",
+  codeText: "#dee1e3",
+  codeBg: "#374047",
+  quoteBorder: "#60a5fa",
+  quoteBg: "#1e3a5f",
+  alertInfo: "#7db9e5",
+  alertWarning: "#da864a",
+  alertTip: "#54da48",
+  alertCaution: "#e16973",
+  alertImportant: "#9966e0"
+};
+const sharedSpacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px"
+};
+const sharedBorderRadius = { sm: "4px", md: "8px", lg: "12px" };
+const baseTypography = {
+  fontFamilySerif: fonts.fontFamilySerif,
+  fontMono: fonts.fontMono,
+  fontSize2xs: "0.625em",
+  fontSizeXs: "0.75em",
+  fontSizeSm: "0.8125em",
+  fontSizeMd: "0.875em",
+  fontSizeLg: "1.25em",
+  fontSizeBase: "16px",
+  fontSizeSmall: "14px",
+  lineHeight: "1.7",
+  lineHeightTight: "1.4"
 };
 const articleLayout = {
   layout: { maxWidth: "700px" },
-  spacing: { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px" },
-  typography: {
-    ...sharedFonts,
-    fontSize2xs: "0.625em",
-    fontSizeXs: "0.75em",
-    fontSizeSm: "0.8125em",
-    fontSizeMd: "0.875em",
-    fontSizeLg: "1.25em",
-    fontSizeBase: "16px",
-    fontSizeSmall: "14px",
-    lineHeight: "1.7",
-    lineHeightTight: "1.4"
-  },
-  borderRadius: { sm: "4px", md: "8px", lg: "12px" }
+  spacing: sharedSpacing,
+  typography: { ...baseTypography, fontFamily: fonts.fontFamily },
+  borderRadius: sharedBorderRadius
 };
 const noteLayout = {
   layout: { maxWidth: "700px" },
-  spacing: articleLayout.spacing,
+  spacing: sharedSpacing,
   typography: {
-    ...serifFonts,
-    fontSize2xs: "0.625em",
-    fontSizeXs: "0.75em",
-    fontSizeSm: "0.8125em",
-    fontSizeMd: "0.875em",
-    fontSizeLg: "1.25em",
-    fontSizeBase: "16px",
-    fontSizeSmall: "14px",
-    lineHeight: "1.8",
-    lineHeightTight: "1.4"
+    ...baseTypography,
+    fontFamily: fonts.fontFamilySerif,
+    lineHeight: "1.8"
   },
-  borderRadius: articleLayout.borderRadius
+  borderRadius: sharedBorderRadius
 };
 const commentLayout = {
   layout: { maxWidth: "none" },
   spacing: { xs: "2px", sm: "4px", md: "10px", lg: "16px", xl: "20px" },
   typography: {
-    ...sharedFonts,
-    fontSize2xs: "0.625em",
-    fontSizeXs: "0.75em",
-    fontSizeSm: "0.8125em",
-    fontSizeMd: "0.875em",
-    fontSizeLg: "1.25em",
+    ...baseTypography,
+    fontFamily: fonts.fontFamily,
     fontSizeBase: "14px",
     fontSizeSmall: "12px",
     lineHeight: "1.5",
@@ -153,11 +149,10 @@ export {
   commentLayout,
   createThemeStyle,
   darkColors,
+  fonts,
   lightArticleColors,
   lightCommentColors,
   noteLayout,
-  serifFonts,
-  sharedFonts,
   usePortalTheme,
   vars
 };

package/dist/themes.d.ts

@@ -1,9 +1,6 @@
-export declare const sharedFonts: {
-    fontFamily: string;
-    fontMono: string;
-};
-export declare const serifFonts: {
+export declare const fonts: {
     fontFamily: string;
+    fontFamilySerif: string;
     fontMono: string;
 };
 export declare const lightArticleColors: {
@@ -75,6 +72,9 @@ export declare const articleLayout: {
         xl: string;
     };
     typography: {
+        fontFamily: string;
+        fontFamilySerif: string;
+        fontMono: string;
         fontSize2xs: string;
         fontSizeXs: string;
         fontSizeSm: string;
@@ -84,8 +84,6 @@ export declare const articleLayout: {
         fontSizeSmall: string;
         lineHeight: string;
         lineHeightTight: string;
-        fontFamily: string;
-        fontMono: string;
     };
     borderRadius: {
         sm: string;
@@ -105,6 +103,10 @@ export declare const noteLayout: {
         xl: string;
     };
     typography: {
+        fontFamily: string;
+        lineHeight: string;
+        fontFamilySerif: string;
+        fontMono: string;
         fontSize2xs: string;
         fontSizeXs: string;
         fontSizeSm: string;
@@ -112,10 +114,7 @@ export declare const noteLayout: {
         fontSizeLg: string;
         fontSizeBase: string;
         fontSizeSmall: string;
-        lineHeight: string;
         lineHeightTight: string;
-        fontFamily: string;
-        fontMono: string;
     };
     borderRadius: {
         sm: string;
@@ -135,17 +134,18 @@ export declare const commentLayout: {
         xl: string;
     };
     typography: {
-        fontSize2xs: string;
-        fontSizeXs: string;
-        fontSizeSm: string;
-        fontSizeMd: string;
-        fontSizeLg: string;
+        fontFamily: string;
         fontSizeBase: string;
         fontSizeSmall: string;
         lineHeight: string;
         lineHeightTight: string;
-        fontFamily: string;
+        fontFamilySerif: string;
         fontMono: string;
+        fontSize2xs: string;
+        fontSizeXs: string;
+        fontSizeSm: string;
+        fontSizeMd: string;
+        fontSizeLg: string;
     };
     borderRadius: {
         sm: string;

package/dist/themes.d.ts.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBzB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBtB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBzB,CAAA"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;CAOjB,CAAA;AAGD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;CAkB9B,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;CAI9B,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;CAkBtB,CAAA;AAyBD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKzB,CAAA;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAStB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYzB,CAAA"}

package/dist/vars.css.d.ts

@@ -27,6 +27,7 @@ export declare const vars: {
     };
     typography: {
         fontFamily: `var(--${string})`;
+        fontFamilySerif: `var(--${string})`;
         fontMono: `var(--${string})`;
         fontSize2xs: `var(--${string})`;
         fontSizeXs: `var(--${string})`;

package/dist/vars.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../src/vars.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDf,CAAA"}
+{"version":3,"file":"vars.css.d.ts","sourceRoot":"","sources":["../src/vars.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDf,CAAA"}

package/package.json

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