@haklex/rich-style-token 0.0.63 → 0.0.65

package/dist/index.mjs

@@ -1,37 +1,14 @@
+import { articleLayout, articleTheme, commentLayout, commentTheme, createThemeStyle, darkColors, fonts, lightArticleColors, lightCommentColors, noteLayout, noteTheme, vars } from "./styles.mjs";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useMemo, use } from "react";
-var vars = { color: { text: "var(--rc-text)", textSecondary: "var(--rc-text-secondary)", textTertiary: "var(--rc-text-tertiary)", textQuaternary: "var(--rc-text-quaternary)", bg: "var(--rc-bg)", bgSecondary: "var(--rc-bg-secondary)", bgTertiary: "var(--rc-bg-tertiary)", fill: "var(--rc-fill)", fillSecondary: "var(--rc-fill-secondary)", fillTertiary: "var(--rc-fill-tertiary)", fillQuaternary: "var(--rc-fill-quaternary)", 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)", hrBorder: "var(--rc-hr-border)", 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)", fontFamilySans: "var(--rc-font-family-sans)", 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)" }, boxShadow: { topBar: "var(--rc-shadow-top-bar)", modal: "var(--rc-shadow-modal)", menu: "var(--rc-shadow-menu)" } };
-var articleTheme = "yglj5t0";
-var noteTheme = "yglj5t1";
-var commentTheme = "yglj5t2";
-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({
+import * as React from "react";
+const PortalThemeContext = React.createContext({
   className: "",
   theme: "light"
 });
-const PortalContainerContext = createContext(null);
+const PortalContainerContext = React.createContext(null);
 const PortalContainerProvider = PortalContainerContext.Provider;
 function usePortalContainer() {
-  return use(PortalContainerContext) ?? document.body;
+  return React.useContext(PortalContainerContext) ?? document.body;
 }
 function PortalThemeProvider({
   className,
@@ -41,15 +18,17 @@ function PortalThemeProvider({
   return /* @__PURE__ */ jsx(
     PortalThemeContext.Provider,
     {
-      value: useMemo(() => ({ className, theme }), [className, theme]),
+      value: React.useMemo(() => ({ className, theme }), [className, theme]),
       children
     }
   );
 }
 function usePortalTheme() {
-  return use(PortalThemeContext);
+  return React.useContext(PortalThemeContext);
 }
-function PortalThemeWrapper({ children }) {
+function PortalThemeWrapper({
+  children
+}) {
   const { className, theme } = usePortalTheme();
   if (!className) return children;
   return /* @__PURE__ */ jsx(
@@ -63,161 +42,6 @@ function PortalThemeWrapper({ children }) {
     }
   );
 }
-const fonts = {
-  fontFamilySans: '"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 lightArticleColors = {
-  text: "#000",
-  textSecondary: "#27272a",
-  // zinc-800
-  textTertiary: "#71717a",
-  // zinc-500
-  textQuaternary: "#a1a1aa",
-  // zinc-400
-  bg: "#ffffff",
-  bgSecondary: "#fafafa",
-  // zinc-50
-  bgTertiary: "#f4f4f5",
-  // zinc-100
-  fill: "#e8e8ec",
-  // interactive fill 1 — list item selected/hover
-  fillSecondary: "#eeeeef",
-  // interactive fill 2 — button/control hover
-  fillTertiary: "#f4f4f6",
-  // interactive fill 3 — large area hover (card, table row)
-  fillQuaternary: "#f9f9fa",
-  // interactive fill 4 — most subtle feedback
-  border: "#f4f4f5",
-  // zinc-100 - lighter, less prominent
-  accent: "#2563eb",
-  accentLight: "#2563eb20",
-  link: "#2563eb",
-  codeText: "#3f3f46",
-  // zinc-700
-  codeBg: "#f4f4f5",
-  // zinc-100
-  hrBorder: "#e4e4e7",
-  // zinc-200 - one step darker than border
-  quoteBorder: "#2563eb",
-  quoteBg: "#eff6ff",
-  alertInfo: "#006bb7",
-  alertWarning: "#cc5500",
-  alertTip: "#11cc00",
-  alertCaution: "#cc0011",
-  alertImportant: "#5500cc"
-};
-const lightCommentColors = {
-  ...lightArticleColors,
-  quoteBorder: "#a1a1aa",
-  // zinc-400
-  quoteBg: "#fafafa"
-  // zinc-50
-};
-const darkColors = {
-  text: "#fafafa",
-  textSecondary: "#a1a1aa",
-  // zinc-400
-  textTertiary: "#71717a",
-  // zinc-500
-  textQuaternary: "#52525b",
-  // zinc-600
-  bg: "#09090b",
-  // zinc-950
-  bgSecondary: "#18181b",
-  // zinc-900
-  bgTertiary: "#27272a",
-  // zinc-800
-  fill: "#2a2a2f",
-  // interactive fill 1 — list item selected/hover
-  fillSecondary: "#222226",
-  // interactive fill 2 — button/control hover
-  fillTertiary: "#1b1b1f",
-  // interactive fill 3 — large area hover
-  fillQuaternary: "#131316",
-  // interactive fill 4 — most subtle feedback
-  border: "#27272a",
-  // zinc-800 - lighter/less prominent
-  accent: "#60a5fa",
-  accentLight: "#60a5fa20",
-  link: "#60a5fa",
-  codeText: "#e4e4e7",
-  // zinc-200
-  codeBg: "#27272a",
-  // zinc-800
-  hrBorder: "#27272a",
-  // zinc-800 - same as border
-  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 sharedBoxShadow = {
-  topBar: "0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06)",
-  modal: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
-  menu: "0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.08)"
-};
-const baseTypography = {
-  fontFamilySans: fonts.fontFamilySans,
-  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" },
-  boxShadow: sharedBoxShadow,
-  spacing: sharedSpacing,
-  typography: {
-    ...baseTypography,
-    fontFamily: fonts.fontFamilySans
-  },
-  borderRadius: sharedBorderRadius
-};
-const noteLayout = {
-  layout: { maxWidth: "700px" },
-  boxShadow: sharedBoxShadow,
-  spacing: sharedSpacing,
-  typography: {
-    ...baseTypography,
-    fontFamily: fonts.fontFamilySerif,
-    lineHeight: "1.8"
-  },
-  borderRadius: sharedBorderRadius
-};
-const commentLayout = {
-  layout: { maxWidth: "none" },
-  boxShadow: sharedBoxShadow,
-  spacing: { xs: "2px", sm: "4px", md: "10px", lg: "16px", xl: "20px" },
-  typography: {
-    ...baseTypography,
-    fontFamily: fonts.fontFamilySans,
-    fontSizeBase: "14px",
-    fontSizeSmall: "12px",
-    lineHeight: "1.5",
-    lineHeightTight: "1.3"
-  },
-  borderRadius: { sm: "3px", md: "6px", lg: "8px" }
-};
 export {
   PortalContainerProvider,
   PortalThemeProvider,

package/dist/portal-theme.d.ts

@@ -1,19 +1,19 @@
-import { ReactNode } from 'react';
+import * as React from 'react';
 export type PortalTheme = 'light' | 'dark';
 type PortalThemeContextType = {
     className: string;
     theme: PortalTheme;
 };
-export declare const PortalContainerProvider: import('react').Provider<Element | null>;
+export declare const PortalContainerProvider: React.Provider<Element | null>;
 export declare function usePortalContainer(): Element;
 export declare function PortalThemeProvider({ className, theme, children, }: {
     className: string;
     theme: PortalTheme;
-    children?: ReactNode;
+    children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function usePortalTheme(): PortalThemeContextType;
-export declare function PortalThemeWrapper({ children }: {
-    children: ReactNode;
-}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+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 {};
 //# sourceMappingURL=portal-theme.d.ts.map

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,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AAE1C,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAUD,eAAO,MAAM,uBAAuB,0CAAkC,CAAA;AACtE,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,SAAS,CAAA;CACrB,2CAQA;AAED,wBAAgB,cAAc,2BAE7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2UAavE"}
+{"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"}

package/dist/styles.d.ts

@@ -0,0 +1,5 @@
+export type { ThemeTokens } from './create-theme-style';
+export { createThemeStyle } from './create-theme-style';
+export { articleLayout, commentLayout, darkColors, fonts, lightArticleColors, lightCommentColors, noteLayout, } from './themes';
+export { articleTheme, commentTheme, noteTheme, vars } from './vars.css';
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EACL,aAAa,EACb,aAAa,EACb,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,kBAAkB,EAClB,UAAU,GACX,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA"}

package/dist/styles.mjs

@@ -0,0 +1,193 @@
+var vars = { color: { text: "var(--rc-text)", textSecondary: "var(--rc-text-secondary)", textTertiary: "var(--rc-text-tertiary)", textQuaternary: "var(--rc-text-quaternary)", bg: "var(--rc-bg)", bgSecondary: "var(--rc-bg-secondary)", bgTertiary: "var(--rc-bg-tertiary)", fill: "var(--rc-fill)", fillSecondary: "var(--rc-fill-secondary)", fillTertiary: "var(--rc-fill-tertiary)", fillQuaternary: "var(--rc-fill-quaternary)", 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)", hrBorder: "var(--rc-hr-border)", 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)", fontFamilySans: "var(--rc-font-family-sans)", 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)" }, boxShadow: { topBar: "var(--rc-shadow-top-bar)", modal: "var(--rc-shadow-modal)", menu: "var(--rc-shadow-menu)" } };
+var articleTheme = "yglj5t0";
+var noteTheme = "yglj5t1";
+var commentTheme = "yglj5t2";
+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 fonts = {
+  fontFamilySans: '"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 lightArticleColors = {
+  text: "#000",
+  textSecondary: "#27272a",
+  // zinc-800
+  textTertiary: "#71717a",
+  // zinc-500
+  textQuaternary: "#a1a1aa",
+  // zinc-400
+  bg: "#ffffff",
+  bgSecondary: "#fafafa",
+  // zinc-50
+  bgTertiary: "#f4f4f5",
+  // zinc-100
+  fill: "#e8e8ec",
+  // interactive fill 1 — list item selected/hover
+  fillSecondary: "#eeeeef",
+  // interactive fill 2 — button/control hover
+  fillTertiary: "#f4f4f6",
+  // interactive fill 3 — large area hover (card, table row)
+  fillQuaternary: "#f9f9fa",
+  // interactive fill 4 — most subtle feedback
+  border: "#f4f4f5",
+  // zinc-100 - lighter, less prominent
+  accent: "#2563eb",
+  accentLight: "#2563eb20",
+  link: "#2563eb",
+  codeText: "#3f3f46",
+  // zinc-700
+  codeBg: "#f4f4f5",
+  // zinc-100
+  hrBorder: "#e4e4e7",
+  // zinc-200 - one step darker than border
+  quoteBorder: "#2563eb",
+  quoteBg: "#eff6ff",
+  alertInfo: "#006bb7",
+  alertWarning: "#cc5500",
+  alertTip: "#11cc00",
+  alertCaution: "#cc0011",
+  alertImportant: "#5500cc"
+};
+const lightCommentColors = {
+  ...lightArticleColors,
+  quoteBorder: "#a1a1aa",
+  // zinc-400
+  quoteBg: "#fafafa"
+  // zinc-50
+};
+const darkColors = {
+  text: "#fafafa",
+  textSecondary: "#a1a1aa",
+  // zinc-400
+  textTertiary: "#71717a",
+  // zinc-500
+  textQuaternary: "#52525b",
+  // zinc-600
+  bg: "#09090b",
+  // zinc-950
+  bgSecondary: "#18181b",
+  // zinc-900
+  bgTertiary: "#27272a",
+  // zinc-800
+  fill: "#2a2a2f",
+  // interactive fill 1 — list item selected/hover
+  fillSecondary: "#222226",
+  // interactive fill 2 — button/control hover
+  fillTertiary: "#1b1b1f",
+  // interactive fill 3 — large area hover
+  fillQuaternary: "#131316",
+  // interactive fill 4 — most subtle feedback
+  border: "#27272a",
+  // zinc-800 - lighter/less prominent
+  accent: "#60a5fa",
+  accentLight: "#60a5fa20",
+  link: "#60a5fa",
+  codeText: "#e4e4e7",
+  // zinc-200
+  codeBg: "#27272a",
+  // zinc-800
+  hrBorder: "#27272a",
+  // zinc-800 - same as border
+  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 sharedBoxShadow = {
+  topBar: "0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06)",
+  modal: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
+  menu: "0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.08)"
+};
+const baseTypography = {
+  fontFamilySans: fonts.fontFamilySans,
+  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" },
+  boxShadow: sharedBoxShadow,
+  spacing: sharedSpacing,
+  typography: {
+    ...baseTypography,
+    fontFamily: fonts.fontFamilySans
+  },
+  borderRadius: sharedBorderRadius
+};
+const noteLayout = {
+  layout: { maxWidth: "700px" },
+  boxShadow: sharedBoxShadow,
+  spacing: sharedSpacing,
+  typography: {
+    ...baseTypography,
+    fontFamily: fonts.fontFamilySerif,
+    lineHeight: "1.8"
+  },
+  borderRadius: sharedBorderRadius
+};
+const commentLayout = {
+  layout: { maxWidth: "none" },
+  boxShadow: sharedBoxShadow,
+  spacing: { xs: "2px", sm: "4px", md: "10px", lg: "16px", xl: "20px" },
+  typography: {
+    ...baseTypography,
+    fontFamily: fonts.fontFamilySans,
+    fontSizeBase: "14px",
+    fontSizeSmall: "12px",
+    lineHeight: "1.5",
+    lineHeightTight: "1.3"
+  },
+  borderRadius: { sm: "3px", md: "6px", lg: "8px" }
+};
+export {
+  articleLayout,
+  articleTheme,
+  commentLayout,
+  commentTheme,
+  createThemeStyle,
+  darkColors,
+  fonts,
+  lightArticleColors,
+  lightCommentColors,
+  noteLayout,
+  noteTheme,
+  vars
+};

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@haklex/rich-style-token",
   "type": "module",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "description": "Style tokens and CSS variables for haklex rich editor",
   "license": "MIT",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
+    },
+    "./styles": {
+      "import": "./dist/styles.mjs",
+      "types": "./dist/styles.d.ts"
     }
   },
   "main": "./dist/index.mjs",

package/LICENSE

@@ -1,28 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Innei
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
-Additional Terms and Conditions
-
-----------------
-
-Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.