sparkdesign 0.3.5 → 0.4.1

package/dist/themes/light-parchment.css

@@ -0,0 +1,124 @@
+/* ============================================
+ * Theme: Light Parchment (羊皮纸亮色 - Figma 导入)
+ * 用户可复制此文件作为自定义主题模板
+ * ============================================ */
+
+[data-theme="light-parchment"] {
+  /* --- Primary --- */
+  --token-color-primary: #202116;
+  --token-color-primary-hover: #3D3930;
+  --token-color-primary-active: #3D3930;
+  --token-color-primary-bg: #F0EDE7;
+  --token-color-primary-bg-hover: #E8E4DC;
+  --token-color-primary-border: #D4CFC6;
+  --token-color-primary-border-hover: #C4BEB4;
+  --token-color-primary-text: #202116;
+  --token-color-primary-text-hover: #3D3930;
+  --token-color-primary-text-active: #3D3930;
+  --token-color-text-on-primary: #FAF9F6;
+
+  /* --- Text --- */
+  --token-color-text: #202116;
+  --token-color-text-secondary: #4A463C;
+  --token-color-text-tertiary: #6B665C;
+  --token-color-text-quaternary: #8A857A;
+  --token-color-text-base: #202116;
+
+  /* --- Border --- */
+  --token-color-border: #D4CFC6;
+  --token-color-border-secondary: #E5E1D9;
+  --token-color-border-tertiary: #EDE9E2;
+
+  /* --- Fill --- */
+  --token-color-fill: #F5F0E7;
+  --token-color-fill-secondary: #EDE8E0;
+  --token-color-fill-tertiary: #F7F4EF;
+  --token-color-fill-quaternary: #FAF9F6;
+  --token-color-fill-disable: #E0DCD4;
+
+  /* --- Background --- */
+  --token-color-bg-container: #FAF9F6;
+  --token-color-bg-elevated: #F7F4EF;
+  --token-color-bg-layout: #FDFCFA;
+  --token-color-bg-spotlight: #FAF9F6;
+  --token-color-bg-mask: rgba(0, 0, 0, 0.5);
+  /* PlanPart 点阵高亮遮罩渐变（随主题） */
+  --token-color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
+  --token-color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
+  --token-color-mask-shimmer-full: rgba(0, 0, 0, 1);
+  --token-color-bg-base: #FFFFFF;
+  --token-color-bg-highlight: #202116;
+  --token-color-bg-highlight-hover: #2D2A22;
+
+  /* --- Semantic Colors --- */
+  --token-color-link: #5B4A3A;
+  --token-color-error: #FF4D4F;
+  --token-color-error-hover: #FF7875;
+  --token-color-error-bg: #FFF2F0;
+  --token-color-error-bg-hover: #FFF1F0;
+  --token-color-error-border: #FFCCC7;
+  --token-color-info: #0B83F1;
+  --token-color-info-hover: #5EBCFF;
+  --token-color-info-bg: #E6F7FF;
+  --token-color-info-bg-hover: #D0EFFF;
+  --token-color-info-border: #B0E3FF;
+  --token-color-success: #5A7A5E;
+  --token-color-success-hover: #6B8F71;
+  --token-color-success-bg: #EEF2ED;
+  --token-color-success-bg-hover: #E4EBE2;
+  --token-color-success-border: #C5D4C4;
+  --token-color-warning: #FAAD14;
+  --token-color-warning-hover: #FFD666;
+  --token-color-warning-bg: #FFFBE6;
+  --token-color-warning-bg-hover: #FFF3CF;
+  --token-color-warning-border: #FFE5BF;
+
+  /* --- Accent Colors --- */
+  --token-color-pink: #EC4899;
+  --token-color-pink-bg: #F9E3F3;
+  --token-color-pink-bg-hover: #F5D4EB;
+  --token-color-purple: #615CED;
+  --token-color-purple-bg: #EBE9FF;
+  --token-color-purple-bg-hover: #DDDAFF;
+  --token-color-yellow: #FAC414;
+  --token-color-yellow-bg: #FFF3CF;
+  --token-color-yellow-bg-hover: #FFE9A8;
+  --token-color-orange: #FA8125;
+  --token-color-orange-bg: #FFEFDE;
+  --token-color-orange-bg-hover: #FFE3C7;
+  --token-color-teal: #14B8A6;
+  --token-color-teal-bg: #DEF7F1;
+  --token-color-teal-bg-hover: #CAF0E8;
+  --token-color-blue: #0090FF;
+  --token-color-blue-bg: #DEEDFF;
+  --token-color-blue-bg-hover: #C8E3FF;
+  --token-color-mauve: #8E8C99;
+  --token-color-mauve-bg: #F1F2F3;
+  --token-color-mauve-bg-hover: #E4E5E7;
+  --token-color-slate: #1E293B;
+  --token-color-slate-bg: #E2E8F0;
+  --token-color-slate-bg-hover: #EFEFEF;
+  --token-color-lavender: #B99DFF;
+  --token-color-lavender-bg: #ECE4FF;
+  --token-color-lavender-bg-hover: #E0D4FF;
+  --token-color-sage: #6BB394;
+  --token-color-sage-bg: #EFF3F2;
+  --token-color-sage-bg-hover: #E2EAE8;
+
+  /* --- Select 等组件 (input/ring/popover 等) --- */
+  --token-color-input: var(--token-color-border-tertiary);
+  --token-color-ring: var(--token-color-primary-border);
+  --token-color-popover: var(--token-color-bg-container);
+  --token-color-popover-foreground: var(--token-color-text);
+  --token-color-accent: var(--token-color-fill-secondary);
+  --token-color-accent-foreground: var(--token-color-text);
+  --token-color-muted: var(--token-color-fill-tertiary);
+  --token-color-muted-foreground: var(--token-color-text-secondary);
+  --token-color-background: var(--token-color-bg-base);
+
+  /* --- Diff --- */
+  --token-color-diff-insert: #A6DCBA;
+  --token-color-diff-insert-bg: #D9EBE0;
+  --token-color-diff-remove: #FC6B83;
+  --token-color-diff-remove-bg: #E3D1D5;
+}

package/dist/themes/light-qoder.css

@@ -0,0 +1,132 @@
+/* ============================================
+ * Theme: Light (亮色模式)
+ * 用户可复制此文件作为自定义主题模板
+ * ============================================ */
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  /* --- Primary --- */
+  --token-color-primary: #8EE5A1;
+  --token-color-primary-hover: #73CD94;
+  --token-color-primary-active: #5CB870;
+  --token-color-primary-bg: #F1FAF3;
+  --token-color-primary-bg-hover: #E6F7EC;
+  --token-color-primary-border: #CDEFD9;
+  --token-color-primary-border-hover: #B3E6C7;
+  --token-color-primary-text: #141414;
+  --token-color-primary-text-hover: #73CD94;
+  --token-color-primary-text-active: #5CB870;
+  --token-color-text-on-primary: #FDFDFD;
+
+  /* --- Text --- */
+  --token-color-text: #141414;
+  --token-color-text-secondary: #636261;
+  --token-color-text-tertiary: #838280;
+  --token-color-text-quaternary: #8E8C8B;
+  --token-color-text-base: #0F0D0C;
+
+  /* --- Border --- */
+  --token-color-border: #BCBBBA;
+  --token-color-border-secondary: #DDDDDD;
+  --token-color-border-tertiary: #E6E6E6;
+
+  /* --- Fill --- */
+  --token-color-fill: #DFDFDF;
+  --token-color-fill-secondary: #EFEFEF;
+  --token-color-fill-tertiary: #F9F9F9;
+  --token-color-fill-quaternary: #FCFCFC;
+  --token-color-fill-disable: #DAD9D8;
+
+  /* --- Background --- */
+  --token-color-bg-container: #FFFFFF;
+  --token-color-bg-elevated: #F9F9F9;
+  --token-color-bg-layout: #FDFDFD;
+  --token-color-bg-spotlight: #FAFAFA;
+  --token-color-bg-mask: rgba(0, 0, 0, 0.5);
+  /* PlanPart 点阵高亮遮罩渐变（随主题） */
+  --token-color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
+  --token-color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
+  --token-color-mask-shimmer-full: rgba(0, 0, 0, 1);
+  --token-color-bg-base: #FFFFFF;
+  --token-color-bg-highlight: #080807;
+  --token-color-bg-highlight-hover: #1a1a1a;
+
+  /* --- Shadow (输入框等浮层，1～4 级与 primary/secondary/tertiary/quaternary 一致，与 data-theme 无关) --- */
+  --token-color-shadow-primary: rgba(0, 0, 0, 0.02);
+  --token-color-shadow-secondary: rgba(0, 0, 0, 0.035);
+  --token-color-shadow-tertiary: rgba(0, 0, 0, 0.055);
+  --token-color-shadow-quaternary: rgba(0, 0, 0, 0.075);
+
+  /* --- Semantic Colors --- */
+  --token-color-link: #5CB870;
+  --token-color-error: #FF4D4F;
+  --token-color-error-hover: #FF7875;
+  --token-color-error-bg: #FFF2F0;
+  --token-color-error-bg-hover: #FFE4E0;
+  --token-color-error-border: #FFCCC7;
+  --token-color-info: #0B83F1;
+  --token-color-info-hover: #5EBCFF;
+  --token-color-info-bg: #E6F7FF;
+  --token-color-info-bg-hover: #D0EFFF;
+  --token-color-info-border: #B0E3FF;
+  --token-color-success: #73CD94;
+  --token-color-success-hover: #8EE5A1;
+  --token-color-success-bg: #F1FAF3;
+  --token-color-success-bg-hover: #E6F7EC;
+  --token-color-success-border: #CDEFD9;
+  --token-color-warning: #FAAD14;
+  --token-color-warning-hover: #FFD666;
+  --token-color-warning-bg: #FFFBE6;
+  --token-color-warning-bg-hover: #FFF3CF;
+  --token-color-warning-border: #FFE5BF;
+
+  /* --- Accent Colors --- */
+  --token-color-pink: #EC4899;
+  --token-color-pink-bg: #F9E3F3;
+  --token-color-pink-bg-hover: #F5D4EB;
+  --token-color-purple: #615CED;
+  --token-color-purple-bg: #EBE9FF;
+  --token-color-purple-bg-hover: #DDDAFF;
+  --token-color-yellow: #FAC414;
+  --token-color-yellow-bg: #FFF3CF;
+  --token-color-yellow-bg-hover: #FFE9A8;
+  --token-color-orange: #FA8125;
+  --token-color-orange-bg: #FFEFDE;
+  --token-color-orange-bg-hover: #FFE3C7;
+  --token-color-teal: #14B8A6;
+  --token-color-teal-bg: #DEF7F1;
+  --token-color-teal-bg-hover: #CAF0E8;
+  --token-color-blue: #0090FF;
+  --token-color-blue-bg: #DEEDFF;
+  --token-color-blue-bg-hover: #C8E3FF;
+  --token-color-mauve: #8E8C99;
+  --token-color-mauve-bg: #F1F2F3;
+  --token-color-mauve-bg-hover: #E4E5E7;
+  --token-color-slate: #404040;
+  --token-color-slate-bg: #FAFAFA;
+  --token-color-slate-bg-hover: #EFEFEF;
+  --token-color-lavender: #B99DFF;
+  --token-color-lavender-bg: #ECE4FF;
+  --token-color-lavender-bg-hover: #E0D4FF;
+  --token-color-sage: #6BB394;
+  --token-color-sage-bg: #EFF3F2;
+  --token-color-sage-bg-hover: #E2EAE8;
+
+  /* --- Select 等组件 (input/ring/popover 等) --- */
+  --token-color-input: var(--token-color-border-tertiary);
+  --token-color-ring: var(--token-color-primary-border);
+  --token-color-popover: var(--token-color-bg-container);
+  --token-color-popover-foreground: var(--token-color-text);
+  --token-color-accent: var(--token-color-fill-secondary);
+  --token-color-accent-foreground: var(--token-color-text);
+  --token-color-muted: var(--token-color-fill-tertiary);
+  --token-color-muted-foreground: var(--token-color-text-secondary);
+  --token-color-background: var(--token-color-bg-base);
+
+  /* --- Diff --- */
+  --token-color-diff-insert: #A6DCBA;
+  --token-color-diff-insert-bg: #D9EBE0;
+  --token-color-diff-remove: #FC6B83;
+  --token-color-diff-remove-bg: #E3D1D5;
+}

package/dist/tokens/index.css

@@ -0,0 +1,35 @@
+/* ============================================
+ * [POS]: src/tokens/index.css - Token 系统统一入口
+ *
+ * 引入方式：
+ * 1. 全量引入（默认）: @import "./tokens/index.css";
+ * 2. 按需引入:
+ *    @import "./tokens/scale/config.css";    // 可配置基础变量
+ *    @import "./tokens/scale/computed.css"; // 映射到实际变量
+ *    @import "./tokens/theme-base.css";
+ *    @import "./tokens/themes/light-qoder.css";
+ *
+ * 自定义布局配置：
+ * @import "./tokens/scale/config.css";
+ * @import "./tokens/scale/computed.css";
+ * :root { --config-radius-default: 10px; }   // 覆盖配置
+ *
+ * 自定义颜色主题：
+ * @import "./tokens/theme-base.css";
+ * @import "./my-custom-theme.css";  // 定义 [data-theme="xxx"] { --token-color-*: ... }
+ * ============================================ */
+
+/* 布局风格 Token (data-style: neutral | compact | soft | sharp | dense) */
+@import "./scale.css";
+
+/* Tailwind @theme 映射 + 动画 + 公共样式 */
+@import "./theme-base.css";
+
+/* 内置主题 (data-theme) */
+@import "./themes/light-qoder.css";
+@import "./themes/dark-qoder.css";
+@import "./themes/light-parchment.css";
+@import "./themes/dark-parchment.css";
+
+/* 滚动条工具样式 */
+@import "./scrollbar-utility.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkdesign",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "type": "module",
   "description": "Modern React Design System with dual-dimension theme system",
   "keywords": [
@@ -28,7 +28,11 @@
     "./style": "./dist/qoder-design.css",
     "./theme.css": "./dist/theme.css",
     "./scale.css": "./dist/scale.css",
-    "./katex.css": "./dist/katex.css"
+    "./katex.css": "./dist/katex.css",
+    "./theme-base.css": "./dist/theme-base.css",
+    "./tokens/index.css": "./dist/tokens/index.css",
+    "./themes/*": "./dist/themes/*",
+    "./scale/*": "./dist/scale/*"
   },
   "files": [
     "dist",