@haklex/rich-style-token 0.0.1

package/LICENSE

@@ -0,0 +1,28 @@
+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.

package/README.md

@@ -0,0 +1,126 @@
+# @haklex/rich-style-token
+
+设计令牌和 CSS 变量，基于 Vanilla Extract 实现零运行时样式。
+
+## 安装
+
+```bash
+pnpm add @haklex/rich-style-token
+```
+
+## 使用
+
+```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,
+})
+```
+
+## 导出
+
+```ts
+// CSS 变量契约
+export { vars } from './vars.css'
+
+// 主题配置
+export { articleLayout, commentLayout, noteLayout } from './themes'
+export { serifFonts, sharedFonts } from './themes'
+export { darkColors, lightArticleColors, lightCommentColors } from './themes'
+
+// Portal 主题
+export { PortalThemeProvider, PortalThemeWrapper, usePortalTheme } from './portal-theme'
+```
+
+## 变量结构
+
+### 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 // 重要色
+```
+
+### vars.spacing
+
+```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
+```
+
+### vars.typography
+
+```ts
+vars.typography.fontFamily     // 字体族
+vars.typography.fontMono       // 等宽字体
+vars.typography.fontSizeBase   // 基础字号
+vars.typography.fontSizeSmall  // 小字号
+vars.typography.fontSizeLarge  // 大字号
+vars.typography.lineHeight     // 行高
+vars.typography.lineHeightTight // 紧行高
+```
+
+### vars.borderRadius
+
+```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'
+
+// 深色主题
+darkColors.text              // '#e5e5e5'
+darkColors.accent            // '#F596AA'
+
+// 布局配置
+articleLayout.typography.fontSizeBase  // '16px'
+articleLayout.typography.lineHeight    // '1.7'
+```
+
+## 依赖
+
+```json
+{
+  "@vanilla-extract/css": "^1.17.1",
+  "react": ">=19"
+}
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { PortalThemeProvider, PortalThemeWrapper, usePortalTheme, } from './portal-theme';
+export { articleLayout, commentLayout, darkColors, lightArticleColors, lightCommentColors, noteLayout, serifFonts, sharedFonts, } from './themes';
+export { vars } from './vars.css';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.mjs

@@ -0,0 +1,127 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useMemo, use } from "react";
+const PortalThemeContext = createContext({
+  className: ""
+});
+function PortalThemeProvider({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    PortalThemeContext.Provider,
+    {
+      value: useMemo(() => ({ className }), [className]),
+      children
+    }
+  );
+}
+function usePortalTheme() {
+  return use(PortalThemeContext);
+}
+function PortalThemeWrapper({ children }) {
+  const { className } = usePortalTheme();
+  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',
+  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",
+  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"
+};
+const lightCommentColors = {
+  ...lightArticleColors,
+  quoteBorder: "#9ca3af",
+  quoteBg: "#f9fafb"
+};
+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"
+};
+const articleLayout = {
+  spacing: { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px" },
+  typography: {
+    ...sharedFonts,
+    fontSizeBase: "16px",
+    fontSizeSmall: "14px",
+    fontSizeLarge: "18px",
+    lineHeight: "1.7",
+    lineHeightTight: "1.4"
+  },
+  borderRadius: { sm: "4px", md: "8px", lg: "12px" }
+};
+const noteLayout = {
+  spacing: articleLayout.spacing,
+  typography: {
+    ...serifFonts,
+    fontSizeBase: "16px",
+    fontSizeSmall: "14px",
+    fontSizeLarge: "18px",
+    lineHeight: "1.8",
+    lineHeightTight: "1.4"
+  },
+  borderRadius: articleLayout.borderRadius
+};
+const commentLayout = {
+  spacing: { xs: "2px", sm: "4px", md: "10px", lg: "16px", xl: "20px" },
+  typography: {
+    ...sharedFonts,
+    fontSizeBase: "14px",
+    fontSizeSmall: "12px",
+    fontSizeLarge: "15px",
+    lineHeight: "1.5",
+    lineHeightTight: "1.3"
+  },
+  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,
+  darkColors,
+  lightArticleColors,
+  lightCommentColors,
+  noteLayout,
+  serifFonts,
+  sharedFonts,
+  usePortalTheme,
+  vars
+};

package/dist/portal-theme.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type PortalThemeContextType = {
+    className: string;
+};
+export declare function PortalThemeProvider({ className, children, }: {
+    className: string;
+    children?: 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 {};
+//# sourceMappingURL=portal-theme.d.ts.map

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

@@ -0,0 +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,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,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,2UAQvE"}

package/dist/themes.d.ts

@@ -0,0 +1,135 @@
+export declare const sharedFonts: {
+    fontFamily: string;
+    fontMono: string;
+};
+export declare const serifFonts: {
+    fontFamily: string;
+    fontMono: string;
+};
+export declare const lightArticleColors: {
+    text: string;
+    textSecondary: string;
+    bg: string;
+    bgSecondary: string;
+    border: string;
+    accent: string;
+    accentLight: string;
+    link: string;
+    codeText: string;
+    codeBg: string;
+    quoteBorder: string;
+    quoteBg: string;
+    alertInfo: string;
+    alertWarning: string;
+    alertTip: string;
+    alertCaution: string;
+    alertImportant: string;
+};
+export declare const lightCommentColors: {
+    quoteBorder: string;
+    quoteBg: string;
+    text: string;
+    textSecondary: string;
+    bg: string;
+    bgSecondary: string;
+    border: string;
+    accent: string;
+    accentLight: string;
+    link: string;
+    codeText: string;
+    codeBg: string;
+    alertInfo: string;
+    alertWarning: string;
+    alertTip: string;
+    alertCaution: string;
+    alertImportant: string;
+};
+export declare const darkColors: {
+    text: string;
+    textSecondary: string;
+    bg: string;
+    bgSecondary: string;
+    border: string;
+    accent: string;
+    accentLight: string;
+    link: string;
+    codeText: string;
+    codeBg: string;
+    quoteBorder: string;
+    quoteBg: string;
+    alertInfo: string;
+    alertWarning: string;
+    alertTip: string;
+    alertCaution: string;
+    alertImportant: string;
+};
+export declare const articleLayout: {
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    typography: {
+        fontSizeBase: string;
+        fontSizeSmall: string;
+        fontSizeLarge: string;
+        lineHeight: string;
+        lineHeightTight: string;
+        fontFamily: string;
+        fontMono: string;
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};
+export declare const noteLayout: {
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    typography: {
+        fontSizeBase: string;
+        fontSizeSmall: string;
+        fontSizeLarge: string;
+        lineHeight: string;
+        lineHeightTight: string;
+        fontFamily: string;
+        fontMono: string;
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};
+export declare const commentLayout: {
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    typography: {
+        fontSizeBase: string;
+        fontSizeSmall: string;
+        fontSizeLarge: string;
+        lineHeight: string;
+        lineHeightTight: string;
+        fontFamily: string;
+        fontMono: string;
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +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"}

package/dist/vars.css.d.ts

@@ -0,0 +1,43 @@
+export declare const vars: {
+    color: {
+        text: `var(--${string})`;
+        textSecondary: `var(--${string})`;
+        bg: `var(--${string})`;
+        bgSecondary: `var(--${string})`;
+        border: `var(--${string})`;
+        accent: `var(--${string})`;
+        accentLight: `var(--${string})`;
+        link: `var(--${string})`;
+        codeText: `var(--${string})`;
+        codeBg: `var(--${string})`;
+        quoteBorder: `var(--${string})`;
+        quoteBg: `var(--${string})`;
+        alertInfo: `var(--${string})`;
+        alertWarning: `var(--${string})`;
+        alertTip: `var(--${string})`;
+        alertCaution: `var(--${string})`;
+        alertImportant: `var(--${string})`;
+    };
+    spacing: {
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+    };
+    typography: {
+        fontFamily: `var(--${string})`;
+        fontMono: `var(--${string})`;
+        fontSizeBase: `var(--${string})`;
+        fontSizeSmall: `var(--${string})`;
+        fontSizeLarge: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        lineHeightTight: `var(--${string})`;
+    };
+    borderRadius: {
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+    };
+};
+//# sourceMappingURL=vars.css.d.ts.map

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

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

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@haklex/rich-style-token",
+  "version": "0.0.1",
+  "description": "Style tokens and CSS variables for haklex rich editor",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "react": ">=19",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "peerDependencies": {
+    "react": ">=19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}