sparkdesign 0.4.7 → 0.4.8

package/dist/src/components/index.d.ts

@@ -189,5 +189,5 @@ export { IconsProvider, useIcons, useIcon } from '../icons/context';
 export type { IconKey, IconComponent, IconProps } from '../icons/types';
 export type { IconsContextValue } from '../icons/context';
 export { ThemeStyleProvider, useThemeStyle, type Appearance, type ThemePreset, type CustomTheme, type Theme, type StylePreset, type CustomStyle, type Style, type ThemeStyleContextValue, type ThemeStyleProviderProps, type ThemeStyleValue, } from '../lib/ThemeStyleContext';
-export { MOTION_DURATION, MOTION_EASE, MOTION_SPRING } from '../lib/motion';
+export { MOTION_DURATION, MOTION_EASE, MOTION_SPRING, MOTION_FADE, MOTION_SLIDE_UP, MOTION_SCALE_IN, MOTION_EXPAND, getReducedMotion, getMotionMultiplier, } from '../lib/motion';
 export { FILE_TYPE_MAP, SETI_CHAR_MAP, SETI_COLOR_MAP, TYPE_TO_TOKEN_CLASS, getSetiIconType, getSetiIcon, getSetiIconColor, getFileIconColorClass, } from '../lib';

package/dist/src/lib/index.d.ts

@@ -13,4 +13,4 @@ export { getFileIconByFilename } from './file-icon';
 export { FILE_TYPE_MAP, SETI_CHAR_MAP, SETI_COLOR_MAP, TYPE_TO_TOKEN_CLASS, getSetiIconType, getSetiIcon, getSetiIconColor, getFileIconColorClass, } from '../../registry/lib/file-icon-maps';
 export { default as i18n } from './i18n';
 export { ThemeStyleProvider, useThemeStyle, type Appearance, type ThemePreset, type CustomTheme, type Theme, type StylePreset, type CustomStyle, type Style, type ThemeStyleContextValue, type ThemeStyleProviderProps, type ThemeStyleValue, } from './ThemeStyleContext';
-export { MOTION_DURATION, MOTION_EASE, MOTION_SPRING } from './motion';
+export { MOTION_DURATION, MOTION_EASE, MOTION_SPRING, MOTION_FADE, MOTION_SLIDE_UP, MOTION_SCALE_IN, MOTION_EXPAND, getReducedMotion, getMotionMultiplier, } from './motion';

package/dist/src/lib/motion.d.ts

@@ -20,3 +20,82 @@ export declare const MOTION_SPRING: {
         readonly mass: 0.7;
     };
 };
+/** Overlay fade (dialog masks, backdrops) */
+export declare const MOTION_FADE: {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+    };
+    readonly transition: {
+        readonly duration: 0.15;
+    };
+};
+/** Content slide-up (dialogs, alert-dialogs) */
+export declare const MOTION_SLIDE_UP: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 8;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly y: 8;
+    };
+    readonly transition: {
+        readonly duration: 0.2;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+};
+/** Scale-in (tooltips, popovers, dropdowns, context menus, hover cards) */
+export declare const MOTION_SCALE_IN: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.96;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 0.96;
+    };
+    readonly transition: {
+        readonly duration: 0.15;
+        readonly ease: readonly [0.16, 1, 0.3, 1];
+    };
+};
+/** Expand (collapsible sections, accordion-like reveals) */
+export declare const MOTION_EXPAND: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly height: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly height: "auto";
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly height: 0;
+    };
+    readonly transition: {
+        readonly duration: 0.2;
+        readonly ease: readonly [0.2, 0.8, 0.2, 1];
+    };
+};
+/** Check if user prefers reduced motion (SSR-safe) */
+export declare function getReducedMotion(): boolean;
+/**
+ * Read the --motion-multiplier CSS variable from the DOM (SSR-safe).
+ * Presets override this value to make motion faster or slower.
+ */
+export declare function getMotionMultiplier(): number;

package/dist/theme-base.css

@@ -146,6 +146,14 @@
   --color-shadow-tertiary: var(--token-color-shadow-tertiary);
   --color-shadow-quaternary: var(--token-color-shadow-quaternary);
 
+  /* Elevation — 完整 box-shadow value token，Tailwind shadow-* 类自动消费 */
+  --shadow-xs: 0 1px 2px var(--color-shadow-primary);
+  --shadow-sm: 0 1px 3px var(--color-shadow-secondary), 0 1px 2px var(--color-shadow-primary);
+  --shadow-md: 0 4px 6px var(--color-shadow-secondary), 0 2px 4px var(--color-shadow-primary);
+  --shadow-lg: 0 10px 15px var(--color-shadow-tertiary), 0 4px 6px var(--color-shadow-secondary);
+  --shadow-xl: 0 20px 25px var(--color-shadow-tertiary), 0 8px 10px var(--color-shadow-secondary);
+  --shadow-2xl: 0 25px 50px var(--color-shadow-quaternary);
+
   /* Semantic */
   --color-link: var(--token-color-link);
   --color-error: var(--token-color-error);
@@ -254,6 +262,20 @@
   }
 }
 
+/* ============================================
+   Reduced motion — 全局无障碍
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* ============================================
    Seti 文件图标字体（与 QodeChatPanel 一致；需将 qoder-seti.woff 置于 public/ 或根路径）
    ============================================ */

package/dist/themes/dark-mint.css

@@ -51,6 +51,12 @@
   --token-color-bg-highlight: #d0d0d0;
   --token-color-bg-highlight-hover: #e0e0e0;
 
+  /* --- Shadow (暗色需要更强的阴影以在深色背景上可见) --- */
+  --token-color-shadow-primary: rgba(0, 0, 0, 0.08);
+  --token-color-shadow-secondary: rgba(0, 0, 0, 0.14);
+  --token-color-shadow-tertiary: rgba(0, 0, 0, 0.22);
+  --token-color-shadow-quaternary: rgba(0, 0, 0, 0.30);
+
   /* --- Semantic Colors --- */
   --token-color-link: #8EE5A1;
   --token-color-error: #FF4D4F;

package/dist/themes/dark-parchment.css

@@ -51,6 +51,12 @@
   --token-color-bg-highlight: #C9C4B8;
   --token-color-bg-highlight-hover: #D4C9BC;
 
+  /* --- Shadow (暗色羊皮纸，需要更强的阴影) --- */
+  --token-color-shadow-primary: rgba(0, 0, 0, 0.08);
+  --token-color-shadow-secondary: rgba(0, 0, 0, 0.14);
+  --token-color-shadow-tertiary: rgba(0, 0, 0, 0.22);
+  --token-color-shadow-quaternary: rgba(0, 0, 0, 0.30);
+
   /* --- Semantic Colors --- */
   --token-color-link: #C4B8A8;
   --token-color-error: #FF6B6B;

package/dist/themes/light-parchment.css

@@ -50,6 +50,12 @@
   --token-color-bg-highlight: #202116;
   --token-color-bg-highlight-hover: #2D2A22;
 
+  /* --- Shadow (暖色基底，匹配羊皮纸调性) --- */
+  --token-color-shadow-primary: rgba(30, 25, 15, 0.025);
+  --token-color-shadow-secondary: rgba(30, 25, 15, 0.045);
+  --token-color-shadow-tertiary: rgba(30, 25, 15, 0.07);
+  --token-color-shadow-quaternary: rgba(30, 25, 15, 0.09);
+
   /* --- Semantic Colors --- */
   --token-color-link: #5B4A3A;
   --token-color-error: #FF4D4F;

package/dist/tokens/scale/computed.css

@@ -100,4 +100,15 @@
   --motion-ease-standard: var(--config-motion-ease-standard);
   --motion-ease-emphasized: var(--config-motion-ease-emphasized);
   --motion-ease-out: var(--config-motion-ease-out);
+
+  /* ============================================
+     Motion Multiplier (从配置映射)
+     ============================================ */
+  --motion-multiplier: var(--config-motion-multiplier);
+
+  /* ============================================
+     Border Width (从配置映射)
+     ============================================ */
+  --border-width: var(--config-border-width);
+  --border-width-thick: var(--config-border-width-thick);
 }

package/dist/tokens/scale/config.css

@@ -102,6 +102,17 @@
   --config-motion-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
   --config-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
 
+  /* ============================================
+     Motion Multiplier (preset 可覆盖，<1 更快，>1 更慢)
+     ============================================ */
+  --config-motion-multiplier: 1;
+
+  /* ============================================
+     Border Width 配置
+     ============================================ */
+  --config-border-width: 1px;
+  --config-border-width-thick: 2px;
+
   /* ============================================
      Font Family 配置
      ============================================ */

package/dist/tokens/scale/presets/compact.css

@@ -38,4 +38,11 @@
   --font-size-7xl: 56px;
   --font-size-8xl: 64px;
   --font-size-9xl: 88px;
+
+  /* Motion (略快) */
+  --motion-multiplier: 0.9;
+
+  /* Border */
+  --border-width: 1px;
+  --border-width-thick: 1px;
 }

package/dist/tokens/scale/presets/dense.css

@@ -72,4 +72,11 @@
   --font-size-7xl: 44px;
   --font-size-8xl: 56px;
   --font-size-9xl: 72px;
+
+  /* Motion (快速) */
+  --motion-multiplier: 0.8;
+
+  /* Border (极细) */
+  --border-width: 1px;
+  --border-width-thick: 1px;
 }

package/dist/tokens/scale/presets/sharp.css

@@ -49,4 +49,11 @@
   --font-size-7xl: 56px;
   --font-size-8xl: 64px;
   --font-size-9xl: 88px;
+
+  /* Motion (机械精准，最快) */
+  --motion-multiplier: 0.75;
+
+  /* Border (几何硬边) */
+  --border-width: 1px;
+  --border-width-thick: 2px;
 }

package/dist/tokens/scale/presets/soft.css

@@ -35,4 +35,11 @@
   --font-size-xl--line-height: 28px;
   --font-size-2xl: 22px;
   --font-size-2xl--line-height: 30px;
+
+  /* Motion (更舒缓) */
+  --motion-multiplier: 1.3;
+
+  /* Border (无边框面，靠阴影区分层级) */
+  --border-width: 0px;
+  --border-width-thick: 1px;
 }

package/dist/tokens/theme-base.css

@@ -146,6 +146,14 @@
   --color-shadow-tertiary: var(--token-color-shadow-tertiary);
   --color-shadow-quaternary: var(--token-color-shadow-quaternary);
 
+  /* Elevation — 完整 box-shadow value token，Tailwind shadow-* 类自动消费 */
+  --shadow-xs: 0 1px 2px var(--color-shadow-primary);
+  --shadow-sm: 0 1px 3px var(--color-shadow-secondary), 0 1px 2px var(--color-shadow-primary);
+  --shadow-md: 0 4px 6px var(--color-shadow-secondary), 0 2px 4px var(--color-shadow-primary);
+  --shadow-lg: 0 10px 15px var(--color-shadow-tertiary), 0 4px 6px var(--color-shadow-secondary);
+  --shadow-xl: 0 20px 25px var(--color-shadow-tertiary), 0 8px 10px var(--color-shadow-secondary);
+  --shadow-2xl: 0 25px 50px var(--color-shadow-quaternary);
+
   /* Semantic */
   --color-link: var(--token-color-link);
   --color-error: var(--token-color-error);
@@ -254,6 +262,20 @@
   }
 }
 
+/* ============================================
+   Reduced motion — 全局无障碍
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* ============================================
    Seti 文件图标字体（与 QodeChatPanel 一致；需将 qoder-seti.woff 置于 public/ 或根路径）
    ============================================ */

package/dist/tokens/themes/dark-mint.css

@@ -51,6 +51,12 @@
   --token-color-bg-highlight: #d0d0d0;
   --token-color-bg-highlight-hover: #e0e0e0;
 
+  /* --- Shadow (暗色需要更强的阴影以在深色背景上可见) --- */
+  --token-color-shadow-primary: rgba(0, 0, 0, 0.08);
+  --token-color-shadow-secondary: rgba(0, 0, 0, 0.14);
+  --token-color-shadow-tertiary: rgba(0, 0, 0, 0.22);
+  --token-color-shadow-quaternary: rgba(0, 0, 0, 0.30);
+
   /* --- Semantic Colors --- */
   --token-color-link: #8EE5A1;
   --token-color-error: #FF4D4F;

package/dist/tokens/themes/dark-parchment.css

@@ -51,6 +51,12 @@
   --token-color-bg-highlight: #C9C4B8;
   --token-color-bg-highlight-hover: #D4C9BC;
 
+  /* --- Shadow (暗色羊皮纸，需要更强的阴影) --- */
+  --token-color-shadow-primary: rgba(0, 0, 0, 0.08);
+  --token-color-shadow-secondary: rgba(0, 0, 0, 0.14);
+  --token-color-shadow-tertiary: rgba(0, 0, 0, 0.22);
+  --token-color-shadow-quaternary: rgba(0, 0, 0, 0.30);
+
   /* --- Semantic Colors --- */
   --token-color-link: #C4B8A8;
   --token-color-error: #FF6B6B;

package/dist/tokens/themes/light-parchment.css

@@ -50,6 +50,12 @@
   --token-color-bg-highlight: #202116;
   --token-color-bg-highlight-hover: #2D2A22;
 
+  /* --- Shadow (暖色基底，匹配羊皮纸调性) --- */
+  --token-color-shadow-primary: rgba(30, 25, 15, 0.025);
+  --token-color-shadow-secondary: rgba(30, 25, 15, 0.045);
+  --token-color-shadow-tertiary: rgba(30, 25, 15, 0.07);
+  --token-color-shadow-quaternary: rgba(30, 25, 15, 0.09);
+
   /* --- Semantic Colors --- */
   --token-color-link: #5B4A3A;
   --token-color-error: #FF4D4F;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkdesign",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "type": "module",
   "description": "Modern React Design System with dual-dimension theme system",
   "keywords": [