npm - @yyc3/music-design-tokens - Versions diffs - 0.0.0-stage → 2.0.0 - Mend

@yyc3/music-design-tokens 0.0.0-stage → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/LICENSE +27 -0
package/README.md +68 -2
package/dist/design-tokens.d.ts +377 -0
package/dist/design-tokens.d.ts.map +1 -0
package/dist/index.d.ts +3 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +568 -0
package/dist/index.js.map +1 -0
package/dist/themes.d.ts +104 -0
package/dist/themes.d.ts.map +1 -0
package/package.json +42 -3

package/LICENSE ADDED Viewed

@@ -0,0 +1,27 @@
+MIT License
+Copyright (c) 2026 YanYuCloudCube™ (YYC³)
+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.
+---
+YYC³（YanYuCloudCube™）· 言启象限 | 语枢未来
+Words Initiate Quadrants, Language Serves as Core for Future
+万象归元于云枢 | 深栈智启新纪元

package/README.md CHANGED Viewed

@@ -1,3 +1,69 @@
-# Temporary Holding Version
+# @yyc3/music-design-tokens
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> 六主题（deep-space / aurora / ocean / light / midnight / custom）与配色、排版、间距、动效、可访问性令牌。
+| 属性 | 值 |
+| --- | --- |
+| 版本 | 2.0.0 |
+| 定位 | 设计令牌与主题引擎 |
+| 许可证 | MIT |
+| 仓库 | https://github.com/YYC-Cube/YYC3-MusAI |
+## 安装
+```bash
+pnpm add @yyc3/music-design-tokens
+```
+## 快速开始
+```tsx
+import { applyTheme, getTheme, THEME_IDS } from '@yyc3/music-design-tokens'
+applyTheme('aurora')            // 将 CSS 变量写入 :root
+const t = getTheme('deep-space') // 读取主题定义
+console.log(THEME_IDS, t.colors.primary)
+```
+## 导出清单
+- 令牌：COLOR_ROLES、DATA_VIZ_COLORS、EMOTION_COLORS、TYPOGRAPHY、SPACING、RADIUS、SHADOWS、ANIMATION、BREAKPOINTS、Z_INDEX、COMPONENT_TOKENS、WCAG
+- 主题：THEMES、THEME_IDS、ThemeId、ThemeDefinition、applyTheme、getTheme
+- 自定义：CustomThemeConfig、loadCustomTheme、saveCustomTheme
+## 关键 API
+| 名称 | 说明 |
+| --- | --- |
+| `applyTheme(id: ThemeId)` | 把主题令牌写入 CSS 变量，组件无需感知主题细节 |
+| `getTheme(id)` | 只读获取主题定义（不产生副作用） |
+| `WCAG` | 对比度与触达尺寸基线常量，供 a11y 用例断言 |
+## 说明
+令牌以 CSS 变量为出口，组件只消费变量，便于运行时换肤与视觉回归。
+## 兼容性
+- React 19+（组件包 peer 依赖）
+- TypeScript 5.6+ / Node.js 20.19+
+- 现代浏览器（Chrome/Edge/Safari/Firefox 最近两个大版本）
+## 开发与验证
+```bash
+pnpm --filter @yyc3/music-design-tokens build
+pnpm --filter @yyc3/music-design-tokens typecheck
+pnpm --filter @yyc3/music-design-tokens lint
+pnpm test:coverage
+```
+## 许可证
+MIT © 2026 YanYuCloudCube™（YYC³）
+<p align="center">
+  <b>YYC³</b>（YanYuCloudCube™ · 注册商标）<br>
+  言启象限 | 语枢未来 — Words Initiate Quadrants, Language Serves as Core for Future<br>
+  <sub>© 2026 YanYuCloudCube™（YYC³）· <a href="mailto:admin@0379.email">admin@0379.email</a></sub>
+</p>

package/dist/design-tokens.d.ts ADDED Viewed

@@ -0,0 +1,377 @@
+/**
+ * D-Music §1.1 — Design Token System
+ *
+ * Complete design token documentation following Material Design 3.0 principles,
+ * adapted for D-Music's deep-space universe aesthetic.
+ *
+ * Token Categories:
+ *   1. Color System (primary, secondary, semantic, data-viz)
+ *   2. Typography System (font families, weights, sizes, line-heights)
+ *   3. Spacing System (4px base grid)
+ *   4. Border Radius System (4/8/12/16/24/full)
+ *   5. Shadow/Elevation System (5 levels)
+ *   6. Animation System (durations, easings)
+ *   7. Breakpoints (responsive)
+ *   8. Z-Index System (layering)
+ *
+ * WCAG 2.1 AA: All color pairings maintain >=4.5:1 contrast ratio for text.
+ * 60fps Target: All animations use GPU-accelerated properties (transform, opacity).
+ */
+/** Semantic color roles mapped to CSS custom properties */
+export declare const COLOR_ROLES: {
+    readonly background: "--dm-bg";
+    readonly backgroundPanel: "--dm-bg-panel";
+    readonly backgroundElevated: "--dm-bg-elevated";
+    readonly backgroundOverlay: "--dm-bg-overlay";
+    readonly textPrimary: "--dm-text-primary";
+    readonly textSecondary: "--dm-text-secondary";
+    readonly textTertiary: "--dm-text-tertiary";
+    readonly textDisabled: "--dm-text-disabled";
+    readonly textInverse: "--dm-text-inverse";
+    readonly accentFrom: "--dm-accent-from";
+    readonly accentTo: "--dm-accent-to";
+    readonly brandFrom: "--dm-brand-from";
+    readonly brandVia: "--dm-brand-via";
+    readonly brandTo: "--dm-brand-to";
+    readonly success: "--dm-success";
+    readonly warning: "--dm-warning";
+    readonly error: "--dm-error";
+    readonly info: "--dm-info";
+    readonly hoverBg: "--dm-hover-bg";
+    readonly activeBg: "--dm-active-bg";
+    readonly focusRing: "--dm-focus-ring";
+    readonly selectionBg: "--dm-selection-bg";
+    readonly borderDefault: "--dm-border";
+    readonly borderSubtle: "--dm-border-subtle";
+    readonly borderStrong: "--dm-border-strong";
+};
+/** Data visualization color palette — 8 distinct hues for chart series */
+export declare const DATA_VIZ_COLORS: {
+    readonly series1: "#8B5CF6";
+    readonly series2: "#EC4899";
+    readonly series3: "#06B6D4";
+    readonly series4: "#F59E0B";
+    readonly series5: "#22C55E";
+    readonly series6: "#3B82F6";
+    readonly series7: "#EF4444";
+    readonly series8: "#A855F7";
+};
+/** Emotion-mapped colors for audio visualization */
+export declare const EMOTION_COLORS: {
+    readonly happy: {
+        readonly primary: "#FFD700";
+        readonly secondary: "#FFA500";
+        readonly glow: "rgba(255,215,0,0.3)";
+    };
+    readonly sad: {
+        readonly primary: "#6495ED";
+        readonly secondary: "#4169E1";
+        readonly glow: "rgba(100,149,237,0.3)";
+    };
+    readonly energetic: {
+        readonly primary: "#FF4500";
+        readonly secondary: "#FF1493";
+        readonly glow: "rgba(255,69,0,0.3)";
+    };
+    readonly calm: {
+        readonly primary: "#00CED1";
+        readonly secondary: "#7B68EE";
+        readonly glow: "rgba(0,206,209,0.3)";
+    };
+    readonly neutral: {
+        readonly primary: "#667EEA";
+        readonly secondary: "#764BA2";
+        readonly glow: "rgba(102,126,234,0.3)";
+    };
+    readonly love: {
+        readonly primary: "#FF6B9D";
+        readonly secondary: "#C44569";
+        readonly glow: "rgba(255,107,157,0.3)";
+    };
+    readonly nostalgic: {
+        readonly primary: "#DEB887";
+        readonly secondary: "#D2691E";
+        readonly glow: "rgba(222,184,135,0.3)";
+    };
+    readonly hopeful: {
+        readonly primary: "#98FB98";
+        readonly secondary: "#00FA9A";
+        readonly glow: "rgba(152,251,152,0.3)";
+    };
+    readonly angry: {
+        readonly primary: "#DC143C";
+        readonly secondary: "#8B0000";
+        readonly glow: "rgba(220,20,60,0.3)";
+    };
+    readonly romantic: {
+        readonly primary: "#FFB6C1";
+        readonly secondary: "#FF69B4";
+        readonly glow: "rgba(255,182,193,0.3)";
+    };
+};
+export declare const TYPOGRAPHY: {
+    readonly fontFamily: {
+        readonly display: "'Space Grotesk', system-ui, -apple-system, sans-serif";
+        readonly body: "'Space Grotesk', system-ui, -apple-system, sans-serif";
+        readonly mono: "'JetBrains Mono', 'Fira Code', monospace";
+        readonly cjk: "'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif";
+    };
+    readonly fontWeight: {
+        readonly light: 300;
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly fontSize: {
+        readonly '2xs': "0.625rem";
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly snug: 1.375;
+        readonly normal: 1.5;
+        readonly relaxed: 1.625;
+        readonly loose: 2;
+    };
+    readonly letterSpacing: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0em";
+        readonly wide: "0.025em";
+        readonly wider: "0.05em";
+        readonly widest: "0.1em";
+    };
+};
+export declare const SPACING: {
+    readonly 0: "0px";
+    readonly 0.5: "2px";
+    readonly 1: "4px";
+    readonly 1.5: "6px";
+    readonly 2: "8px";
+    readonly 2.5: "10px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+};
+export declare const RADIUS: {
+    readonly none: "0px";
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "24px";
+    readonly full: "9999px";
+};
+export declare const SHADOWS: {
+    /** Level 0 — flat */
+    readonly none: "none";
+    /** Level 1 — subtle (cards, buttons) */
+    readonly sm: "0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2)";
+    /** Level 2 — medium (dropdowns, popovers) */
+    readonly md: "0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2)";
+    /** Level 3 — high (modals, dialogs) */
+    readonly lg: "0 10px 25px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.25)";
+    /** Level 4 — highest (overlays, floating panels) */
+    readonly xl: "0 20px 50px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.3)";
+    /** Inner shadow (inset elements) */
+    readonly inner: "inset 0 2px 4px rgba(0,0,0,0.25)";
+    /** Glow effect (accent-colored) */
+    readonly glow: (color: string) => string;
+};
+export declare const ANIMATION: {
+    readonly duration: {
+        readonly instant: "50ms";
+        readonly fast: "150ms";
+        readonly normal: "250ms";
+        readonly slow: "400ms";
+        readonly slower: "600ms";
+        readonly slowest: "1000ms";
+    };
+    readonly easing: {
+        /** Standard Material easing */
+        readonly standard: "cubic-bezier(0.4, 0, 0.2, 1)";
+        /** Decelerate (entering elements) */
+        readonly decelerate: "cubic-bezier(0, 0, 0.2, 1)";
+        /** Accelerate (exiting elements) */
+        readonly accelerate: "cubic-bezier(0.4, 0, 1, 1)";
+        /** Spring-like bounce */
+        readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+        /** Linear (progress bars, infinite loops) */
+        readonly linear: "linear";
+    };
+    /** Motion variants for motion/react */
+    readonly variants: {
+        readonly fadeIn: {
+            readonly initial: {
+                readonly opacity: 0;
+            };
+            readonly animate: {
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly opacity: 0;
+            };
+        };
+        readonly slideUp: {
+            readonly initial: {
+                readonly opacity: 0;
+                readonly y: 20;
+            };
+            readonly animate: {
+                readonly opacity: 1;
+                readonly y: 0;
+            };
+            readonly exit: {
+                readonly opacity: 0;
+                readonly y: 20;
+            };
+        };
+        readonly slideDown: {
+            readonly initial: {
+                readonly opacity: 0;
+                readonly y: -20;
+            };
+            readonly animate: {
+                readonly opacity: 1;
+                readonly y: 0;
+            };
+            readonly exit: {
+                readonly opacity: 0;
+                readonly y: -20;
+            };
+        };
+        readonly scaleIn: {
+            readonly initial: {
+                readonly opacity: 0;
+                readonly scale: 0.9;
+            };
+            readonly animate: {
+                readonly opacity: 1;
+                readonly scale: 1;
+            };
+            readonly exit: {
+                readonly opacity: 0;
+                readonly scale: 0.9;
+            };
+        };
+        readonly panelSlide: {
+            readonly initial: {
+                readonly opacity: 0;
+                readonly x: 300;
+            };
+            readonly animate: {
+                readonly opacity: 1;
+                readonly x: 0;
+            };
+            readonly exit: {
+                readonly opacity: 0;
+                readonly x: 300;
+            };
+            readonly transition: {
+                readonly type: "spring";
+                readonly damping: 30;
+                readonly stiffness: 300;
+            };
+        };
+    };
+};
+export declare const BREAKPOINTS: {
+    readonly xs: 320;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+export declare const Z_INDEX: {
+    readonly base: 0;
+    readonly starfield: 1;
+    readonly content: 10;
+    readonly header: 20;
+    readonly mobileNav: 30;
+    readonly dropdown: 40;
+    readonly panel: 50;
+    readonly overlay: 60;
+    readonly modal: 70;
+    readonly toast: 80;
+    readonly tooltip: 90;
+    readonly perfMonitor: 95;
+    readonly maxOverlay: 100;
+};
+export declare const COMPONENT_TOKENS: {
+    readonly button: {
+        readonly heightSm: "32px";
+        readonly heightMd: "40px";
+        readonly heightLg: "48px";
+        readonly paddingX: {
+            readonly sm: "12px";
+            readonly md: "16px";
+            readonly lg: "24px";
+        };
+        readonly fontSize: {
+            readonly sm: "0.75rem";
+            readonly md: "0.875rem";
+            readonly lg: "1rem";
+        };
+        readonly radius: "12px";
+        readonly transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)";
+    };
+    readonly input: {
+        readonly height: "40px";
+        readonly paddingX: "12px";
+        readonly fontSize: "0.875rem";
+        readonly radius: "12px";
+        readonly borderWidth: "1px";
+    };
+    readonly card: {
+        readonly padding: {
+            readonly sm: "12px";
+            readonly md: "16px";
+            readonly lg: "24px";
+        };
+        readonly radius: "16px";
+        readonly borderWidth: "1px";
+    };
+    readonly modal: {
+        readonly maxWidth: "560px";
+        readonly padding: "24px";
+        readonly radius: "24px";
+        readonly backdropBlur: "12px";
+    };
+    readonly panel: {
+        readonly width: "400px";
+        readonly maxWidth: "90vw";
+        readonly radius: "16px";
+        readonly backdropBlur: "20px";
+    };
+};
+/**
+ * Minimum contrast ratios for WCAG 2.1 AA compliance:
+ *   - Normal text (< 18pt): 4.5:1
+ *   - Large text (>= 18pt or >= 14pt bold): 3:1
+ *   - UI components / graphical objects: 3:1
+ */
+export declare const WCAG: {
+    readonly minContrastNormalText: 4.5;
+    readonly minContrastLargeText: 3;
+    readonly minContrastUI: 3;
+    readonly focusIndicatorWidth: "2px";
+    readonly focusIndicatorOffset: "2px";
+    readonly minTouchTarget: "44px";
+};
+//# sourceMappingURL=design-tokens.d.ts.map

package/dist/design-tokens.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../src/design-tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAMH,2DAA2D;AAC3D,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCd,CAAC;AAEX,0EAA0E;AAC1E,eAAO,MAAM,eAAe;;;;;;;;;CASlB,CAAC;AAEX,oDAAoD;AACpD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWjB,CAAC;AAMX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCb,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBV,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAMX,eAAO,MAAM,OAAO;IAClB,qBAAqB;;IAErB,wCAAwC;;IAExC,6CAA6C;;IAE7C,uCAAuC;;IAEvC,oDAAoD;;IAEpD,oCAAoC;;IAEpC,mCAAmC;2BACrB,MAAM;CACZ,CAAC;AAMX,eAAO,MAAM,SAAS;;;;;;;;;;QAUlB,+BAA+B;;QAE/B,qCAAqC;;QAErC,oCAAoC;;QAEpC,yBAAyB;;QAEzB,6CAA6C;;;IAG/C,uCAAuC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyB/B,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAcV,CAAC;AAMX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCnB,CAAC;AAMX;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC"}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export * from './design-tokens';
+export * from './themes';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC"}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,568 @@
+const h = {
+  // Surface colors
+  background: "--dm-bg",
+  backgroundPanel: "--dm-bg-panel",
+  backgroundElevated: "--dm-bg-elevated",
+  backgroundOverlay: "--dm-bg-overlay",
+  // Content colors
+  textPrimary: "--dm-text-primary",
+  textSecondary: "--dm-text-secondary",
+  textTertiary: "--dm-text-tertiary",
+  textDisabled: "--dm-text-disabled",
+  textInverse: "--dm-text-inverse",
+  // Accent / Brand
+  accentFrom: "--dm-accent-from",
+  accentTo: "--dm-accent-to",
+  brandFrom: "--dm-brand-from",
+  brandVia: "--dm-brand-via",
+  brandTo: "--dm-brand-to",
+  // Semantic
+  success: "--dm-success",
+  warning: "--dm-warning",
+  error: "--dm-error",
+  info: "--dm-info",
+  // Interactive
+  hoverBg: "--dm-hover-bg",
+  activeBg: "--dm-active-bg",
+  focusRing: "--dm-focus-ring",
+  selectionBg: "--dm-selection-bg",
+  // Borders
+  borderDefault: "--dm-border",
+  borderSubtle: "--dm-border-subtle",
+  borderStrong: "--dm-border-strong"
+}, u = {
+  series1: "#8B5CF6",
+  // Violet
+  series2: "#EC4899",
+  // Pink
+  series3: "#06B6D4",
+  // Cyan
+  series4: "#F59E0B",
+  // Amber
+  series5: "#22C55E",
+  // Green
+  series6: "#3B82F6",
+  // Blue
+  series7: "#EF4444",
+  // Red
+  series8: "#A855F7"
+  // Purple
+}, E = {
+  happy: { primary: "#FFD700", secondary: "#FFA500", glow: "rgba(255,215,0,0.3)" },
+  sad: { primary: "#6495ED", secondary: "#4169E1", glow: "rgba(100,149,237,0.3)" },
+  energetic: { primary: "#FF4500", secondary: "#FF1493", glow: "rgba(255,69,0,0.3)" },
+  calm: { primary: "#00CED1", secondary: "#7B68EE", glow: "rgba(0,206,209,0.3)" },
+  neutral: { primary: "#667EEA", secondary: "#764BA2", glow: "rgba(102,126,234,0.3)" },
+  love: { primary: "#FF6B9D", secondary: "#C44569", glow: "rgba(255,107,157,0.3)" },
+  nostalgic: { primary: "#DEB887", secondary: "#D2691E", glow: "rgba(222,184,135,0.3)" },
+  hopeful: { primary: "#98FB98", secondary: "#00FA9A", glow: "rgba(152,251,152,0.3)" },
+  angry: { primary: "#DC143C", secondary: "#8B0000", glow: "rgba(220,20,60,0.3)" },
+  romantic: { primary: "#FFB6C1", secondary: "#FF69B4", glow: "rgba(255,182,193,0.3)" }
+}, B = {
+  fontFamily: {
+    display: "'Space Grotesk', system-ui, -apple-system, sans-serif",
+    body: "'Space Grotesk', system-ui, -apple-system, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', monospace",
+    cjk: "'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif"
+  },
+  fontWeight: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  fontSize: {
+    "2xs": "0.625rem",
+    // 10px
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem"
+    // 36px
+  },
+  lineHeight: {
+    tight: 1.2,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2
+  },
+  letterSpacing: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em"
+  }
+}, D = {
+  0: "0px",
+  0.5: "2px",
+  1: "4px",
+  1.5: "6px",
+  2: "8px",
+  2.5: "10px",
+  3: "12px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  8: "32px",
+  10: "40px",
+  12: "48px",
+  16: "64px",
+  20: "80px",
+  24: "96px"
+}, o = {
+  none: "0px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "24px",
+  full: "9999px"
+}, C = {
+  /** Level 0 — flat */
+  none: "none",
+  /** Level 1 — subtle (cards, buttons) */
+  sm: "0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2)",
+  /** Level 2 — medium (dropdowns, popovers) */
+  md: "0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2)",
+  /** Level 3 — high (modals, dialogs) */
+  lg: "0 10px 25px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.25)",
+  /** Level 4 — highest (overlays, floating panels) */
+  xl: "0 20px 50px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.3)",
+  /** Inner shadow (inset elements) */
+  inner: "inset 0 2px 4px rgba(0,0,0,0.25)",
+  /** Glow effect (accent-colored) */
+  glow: (a) => `0 0 20px ${a}40, 0 0 60px ${a}20`
+}, b = {
+  duration: {
+    instant: "50ms",
+    fast: "150ms",
+    normal: "250ms",
+    slow: "400ms",
+    slower: "600ms",
+    slowest: "1000ms"
+  },
+  easing: {
+    /** Standard Material easing */
+    standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+    /** Decelerate (entering elements) */
+    decelerate: "cubic-bezier(0, 0, 0.2, 1)",
+    /** Accelerate (exiting elements) */
+    accelerate: "cubic-bezier(0.4, 0, 1, 1)",
+    /** Spring-like bounce */
+    spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    /** Linear (progress bars, infinite loops) */
+    linear: "linear"
+  },
+  /** Motion variants for motion/react */
+  variants: {
+    fadeIn: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } },
+    slideUp: {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 20 }
+    },
+    slideDown: {
+      initial: { opacity: 0, y: -20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -20 }
+    },
+    scaleIn: {
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.9 }
+    },
+    panelSlide: {
+      initial: { opacity: 0, x: 300 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 300 },
+      transition: { type: "spring", damping: 30, stiffness: 300 }
+    }
+  }
+}, v = {
+  xs: 320,
+  // Small phones
+  sm: 640,
+  // Phones
+  md: 768,
+  // Tablets
+  lg: 1024,
+  // Laptops
+  xl: 1280,
+  // Desktops
+  "2xl": 1536
+  // Large desktops
+}, w = {
+  base: 0,
+  starfield: 1,
+  content: 10,
+  header: 20,
+  mobileNav: 30,
+  dropdown: 40,
+  panel: 50,
+  overlay: 60,
+  modal: 70,
+  toast: 80,
+  tooltip: 90,
+  perfMonitor: 95,
+  maxOverlay: 100
+}, P = {
+  button: {
+    heightSm: "32px",
+    heightMd: "40px",
+    heightLg: "48px",
+    paddingX: { sm: "12px", md: "16px", lg: "24px" },
+    fontSize: { sm: "0.75rem", md: "0.875rem", lg: "1rem" },
+    radius: o.lg,
+    transition: `all ${b.duration.fast} ${b.easing.standard}`
+  },
+  input: {
+    height: "40px",
+    paddingX: "12px",
+    fontSize: "0.875rem",
+    radius: o.lg,
+    borderWidth: "1px"
+  },
+  card: {
+    padding: { sm: "12px", md: "16px", lg: "24px" },
+    radius: o.xl,
+    borderWidth: "1px"
+  },
+  modal: {
+    maxWidth: "560px",
+    padding: "24px",
+    radius: o["2xl"],
+    backdropBlur: "12px"
+  },
+  panel: {
+    width: "400px",
+    maxWidth: "90vw",
+    radius: o.xl,
+    backdropBlur: "20px"
+  }
+}, S = {
+  minContrastNormalText: 4.5,
+  minContrastLargeText: 3,
+  minContrastUI: 3,
+  focusIndicatorWidth: "2px",
+  focusIndicatorOffset: "2px",
+  minTouchTarget: "44px"
+  // 44x44px minimum touch target
+}, d = {
+  id: "deep-space",
+  label: { zh: "深空", en: "Deep Space" },
+  description: { zh: "星辰大海，宇宙沉浸", en: "Cosmic immersion" },
+  icon: "🌌",
+  isDark: !0,
+  bg: "#0A0E2F",
+  bgPanel: "#0D1235",
+  bgElevated: "#111640",
+  bgOverlay: "rgba(10,14,47,0.85)",
+  textPrimary: "rgba(255,255,255,0.95)",
+  textSecondary: "rgba(255,255,255,0.60)",
+  textTertiary: "rgba(255,255,255,0.35)",
+  textDisabled: "rgba(255,255,255,0.20)",
+  textInverse: "#0A0E2F",
+  glowRgb: "102,126,234",
+  accentFrom: "#8B5CF6",
+  accentTo: "#EC4899",
+  starRgb: "140,140,255",
+  selectionBg: "rgba(236,72,153,0.3)",
+  headerFrom: "#0A0E2F",
+  headerVia: "rgba(10,14,47,0.8)",
+  progressFrom: "#8B5CF6",
+  progressTo: "#EC4899",
+  brandFrom: "#FCD34D",
+  brandVia: "#FDE68A",
+  brandTo: "#FBBF24",
+  success: "#22C55E",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#3B82F6",
+  hoverBg: "rgba(255,255,255,0.06)",
+  activeBg: "rgba(255,255,255,0.10)",
+  focusRing: "#8B5CF6",
+  border: "rgba(255,255,255,0.10)",
+  borderSubtle: "rgba(255,255,255,0.06)",
+  borderStrong: "rgba(255,255,255,0.20)",
+  shadowSm: "0 1px 3px rgba(0,0,0,0.4)",
+  shadowMd: "0 4px 12px rgba(0,0,0,0.5)",
+  shadowLg: "0 12px 40px rgba(0,0,0,0.6)"
+}, x = {
+  id: "aurora",
+  label: { zh: "极光", en: "Aurora" },
+  description: { zh: "北极光芒，翠绿交织", en: "Northern lights dance" },
+  icon: "🌈",
+  isDark: !0,
+  bg: "#071A1F",
+  bgPanel: "#0A2229",
+  bgElevated: "#0E2A32",
+  bgOverlay: "rgba(7,26,31,0.85)",
+  textPrimary: "rgba(255,255,255,0.95)",
+  textSecondary: "rgba(255,255,255,0.60)",
+  textTertiary: "rgba(255,255,255,0.35)",
+  textDisabled: "rgba(255,255,255,0.20)",
+  textInverse: "#071A1F",
+  glowRgb: "34,197,94",
+  accentFrom: "#22C55E",
+  accentTo: "#06B6D4",
+  starRgb: "34,197,94",
+  selectionBg: "rgba(34,197,94,0.3)",
+  headerFrom: "#071A1F",
+  headerVia: "rgba(7,26,31,0.8)",
+  progressFrom: "#22C55E",
+  progressTo: "#06B6D4",
+  brandFrom: "#A7F3D0",
+  brandVia: "#6EE7B7",
+  brandTo: "#34D399",
+  success: "#22C55E",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#06B6D4",
+  hoverBg: "rgba(255,255,255,0.06)",
+  activeBg: "rgba(255,255,255,0.10)",
+  focusRing: "#22C55E",
+  border: "rgba(255,255,255,0.10)",
+  borderSubtle: "rgba(255,255,255,0.06)",
+  borderStrong: "rgba(255,255,255,0.20)",
+  shadowSm: "0 1px 3px rgba(0,0,0,0.4)",
+  shadowMd: "0 4px 12px rgba(0,0,0,0.5)",
+  shadowLg: "0 12px 40px rgba(0,0,0,0.6)"
+}, y = {
+  id: "ocean",
+  label: { zh: "海洋", en: "Ocean" },
+  description: { zh: "深海静谧，蔚蓝沉思", en: "Deep sea serenity" },
+  icon: "🌊",
+  isDark: !0,
+  bg: "#07142B",
+  bgPanel: "#0B1C38",
+  bgElevated: "#0F2444",
+  bgOverlay: "rgba(7,20,43,0.85)",
+  textPrimary: "rgba(255,255,255,0.95)",
+  textSecondary: "rgba(255,255,255,0.60)",
+  textTertiary: "rgba(255,255,255,0.35)",
+  textDisabled: "rgba(255,255,255,0.20)",
+  textInverse: "#07142B",
+  glowRgb: "59,130,246",
+  accentFrom: "#3B82F6",
+  accentTo: "#14B8A6",
+  starRgb: "59,130,246",
+  selectionBg: "rgba(59,130,246,0.3)",
+  headerFrom: "#07142B",
+  headerVia: "rgba(7,20,43,0.8)",
+  progressFrom: "#3B82F6",
+  progressTo: "#14B8A6",
+  brandFrom: "#93C5FD",
+  brandVia: "#BFDBFE",
+  brandTo: "#60A5FA",
+  success: "#22C55E",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#3B82F6",
+  hoverBg: "rgba(255,255,255,0.06)",
+  activeBg: "rgba(255,255,255,0.10)",
+  focusRing: "#3B82F6",
+  border: "rgba(255,255,255,0.10)",
+  borderSubtle: "rgba(255,255,255,0.06)",
+  borderStrong: "rgba(255,255,255,0.20)",
+  shadowSm: "0 1px 3px rgba(0,0,0,0.4)",
+  shadowMd: "0 4px 12px rgba(0,0,0,0.5)",
+  shadowLg: "0 12px 40px rgba(0,0,0,0.6)"
+}, c = {
+  id: "light",
+  label: { zh: "晨光", en: "Light" },
+  description: { zh: "清透明亮，轻盈雅致", en: "Clean and bright" },
+  icon: "☀️",
+  isDark: !1,
+  bg: "#F8F9FC",
+  bgPanel: "#FFFFFF",
+  bgElevated: "#FFFFFF",
+  bgOverlay: "rgba(0,0,0,0.4)",
+  textPrimary: "rgba(0,0,0,0.87)",
+  textSecondary: "rgba(0,0,0,0.60)",
+  textTertiary: "rgba(0,0,0,0.38)",
+  textDisabled: "rgba(0,0,0,0.20)",
+  textInverse: "#FFFFFF",
+  glowRgb: "99,102,241",
+  accentFrom: "#6366F1",
+  accentTo: "#EC4899",
+  starRgb: "99,102,241",
+  selectionBg: "rgba(99,102,241,0.15)",
+  headerFrom: "#F8F9FC",
+  headerVia: "rgba(248,249,252,0.9)",
+  progressFrom: "#6366F1",
+  progressTo: "#EC4899",
+  brandFrom: "#6366F1",
+  brandVia: "#8B5CF6",
+  brandTo: "#EC4899",
+  success: "#16A34A",
+  warning: "#D97706",
+  error: "#DC2626",
+  info: "#2563EB",
+  hoverBg: "rgba(0,0,0,0.04)",
+  activeBg: "rgba(0,0,0,0.08)",
+  focusRing: "#6366F1",
+  border: "rgba(0,0,0,0.12)",
+  borderSubtle: "rgba(0,0,0,0.06)",
+  borderStrong: "rgba(0,0,0,0.20)",
+  shadowSm: "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)",
+  shadowMd: "0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06)",
+  shadowLg: "0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08)"
+}, F = {
+  id: "midnight",
+  label: { zh: "暗夜", en: "Midnight" },
+  description: { zh: "纯黑质感，极简深色", en: "Pure dark elegance" },
+  icon: "🌑",
+  isDark: !0,
+  bg: "#0C0C0E",
+  bgPanel: "#141416",
+  bgElevated: "#1C1C1F",
+  bgOverlay: "rgba(12,12,14,0.85)",
+  textPrimary: "rgba(255,255,255,0.92)",
+  textSecondary: "rgba(255,255,255,0.55)",
+  textTertiary: "rgba(255,255,255,0.30)",
+  textDisabled: "rgba(255,255,255,0.18)",
+  textInverse: "#0C0C0E",
+  glowRgb: "168,85,247",
+  accentFrom: "#A855F7",
+  accentTo: "#F472B6",
+  starRgb: "168,85,247",
+  selectionBg: "rgba(168,85,247,0.3)",
+  headerFrom: "#0C0C0E",
+  headerVia: "rgba(12,12,14,0.8)",
+  progressFrom: "#A855F7",
+  progressTo: "#F472B6",
+  brandFrom: "#E9D5FF",
+  brandVia: "#D8B4FE",
+  brandTo: "#C084FC",
+  success: "#22C55E",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#818CF8",
+  hoverBg: "rgba(255,255,255,0.05)",
+  activeBg: "rgba(255,255,255,0.08)",
+  focusRing: "#A855F7",
+  border: "rgba(255,255,255,0.08)",
+  borderSubtle: "rgba(255,255,255,0.04)",
+  borderStrong: "rgba(255,255,255,0.15)",
+  shadowSm: "0 1px 3px rgba(0,0,0,0.5)",
+  shadowMd: "0 4px 12px rgba(0,0,0,0.6)",
+  shadowLg: "0 12px 40px rgba(0,0,0,0.7)"
+}, n = {
+  ...d,
+  id: "custom",
+  label: { zh: "自定义", en: "Custom" },
+  description: { zh: "打造你的专属风格", en: "Your own style" },
+  icon: "🎨"
+}, i = {
+  "deep-space": d,
+  aurora: x,
+  ocean: y,
+  light: c,
+  midnight: F,
+  custom: n
+}, T = ["deep-space", "aurora", "ocean", "light", "midnight", "custom"], m = "dmusic-custom-theme";
+function l() {
+  try {
+    const a = localStorage.getItem(m);
+    return a ? JSON.parse(a) : null;
+  } catch {
+    return null;
+  }
+}
+function A(a) {
+  try {
+    localStorage.setItem(m, JSON.stringify(a));
+  } catch {
+  }
+}
+function p(a) {
+  const e = a.isDark ? d : c, r = a.accentFrom.replace("#", ""), t = parseInt(r.substring(0, 2), 16), s = parseInt(r.substring(2, 4), 16), g = parseInt(r.substring(4, 6), 16);
+  return {
+    ...e,
+    id: "custom",
+    label: n.label,
+    description: n.description,
+    icon: n.icon,
+    isDark: a.isDark,
+    bg: a.bg,
+    bgPanel: a.bgPanel,
+    bgElevated: a.bgPanel,
+    bgOverlay: a.isDark ? "rgba(0,0,0,0.85)" : "rgba(0,0,0,0.4)",
+    glowRgb: `${t},${s},${g}`,
+    accentFrom: a.accentFrom,
+    accentTo: a.accentTo,
+    progressFrom: a.accentFrom,
+    progressTo: a.accentTo,
+    focusRing: a.accentFrom,
+    selectionBg: `rgba(${t},${s},${g},0.3)`,
+    starRgb: `${t},${s},${g}`,
+    headerFrom: a.bg,
+    headerVia: a.isDark ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.9)",
+    textPrimary: a.isDark ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.87)",
+    textSecondary: a.isDark ? "rgba(255,255,255,0.60)" : "rgba(0,0,0,0.60)",
+    textTertiary: a.isDark ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.38)",
+    textDisabled: a.isDark ? "rgba(255,255,255,0.20)" : "rgba(0,0,0,0.20)",
+    textInverse: a.isDark ? a.bg : "#FFFFFF",
+    hoverBg: a.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)",
+    activeBg: a.isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.08)",
+    border: a.isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.12)",
+    borderSubtle: a.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)",
+    borderStrong: a.isDark ? "rgba(255,255,255,0.20)" : "rgba(0,0,0,0.20)"
+  };
+}
+function f(a) {
+  let e = i[a];
+  if (e || (e = i["deep-space"]), a === "custom") {
+    const s = l();
+    s && (e = p(s));
+  }
+  const r = document.documentElement;
+  r.classList.add("theme-transitioning"), requestAnimationFrame(() => {
+    setTimeout(() => r.classList.remove("theme-transitioning"), 350);
+  }), r.style.setProperty("--dm-bg", e.bg), r.style.setProperty("--dm-bg-panel", e.bgPanel), r.style.setProperty("--dm-bg-elevated", e.bgElevated), r.style.setProperty("--dm-bg-overlay", e.bgOverlay), r.style.setProperty("--dm-text-primary", e.textPrimary), r.style.setProperty("--dm-text-secondary", e.textSecondary), r.style.setProperty("--dm-text-tertiary", e.textTertiary), r.style.setProperty("--dm-text-disabled", e.textDisabled), r.style.setProperty("--dm-text-inverse", e.textInverse), r.style.setProperty("--dm-glow-rgb", e.glowRgb), r.style.setProperty("--dm-accent-from", e.accentFrom), r.style.setProperty("--dm-accent-to", e.accentTo), r.style.setProperty("--dm-star-rgb", e.starRgb), r.style.setProperty("--dm-selection-bg", e.selectionBg), r.style.setProperty("--dm-header-from", e.headerFrom), r.style.setProperty("--dm-header-via", e.headerVia), r.style.setProperty("--dm-progress-from", e.progressFrom), r.style.setProperty("--dm-progress-to", e.progressTo), r.style.setProperty("--dm-brand-from", e.brandFrom), r.style.setProperty("--dm-brand-via", e.brandVia), r.style.setProperty("--dm-brand-to", e.brandTo), r.style.setProperty("--dm-success", e.success), r.style.setProperty("--dm-warning", e.warning), r.style.setProperty("--dm-error", e.error), r.style.setProperty("--dm-info", e.info), r.style.setProperty("--dm-hover-bg", e.hoverBg), r.style.setProperty("--dm-active-bg", e.activeBg), r.style.setProperty("--dm-focus-ring", e.focusRing), r.style.setProperty("--dm-border", e.border), r.style.setProperty("--dm-border-subtle", e.borderSubtle), r.style.setProperty("--dm-border-strong", e.borderStrong), r.style.setProperty("--dm-shadow-sm", e.shadowSm), r.style.setProperty("--dm-shadow-md", e.shadowMd), r.style.setProperty("--dm-shadow-lg", e.shadowLg), e.isDark ? r.classList.add("dark") : r.classList.remove("dark"), r.setAttribute("data-theme", a);
+  const t = document.querySelector('meta[name="theme-color"]');
+  t && t.setAttribute("content", e.bg);
+}
+function k(a) {
+  if (a === "custom") {
+    const e = l();
+    if (e) return p(e);
+  }
+  return i[a] || i["deep-space"];
+}
+export {
+  b as ANIMATION,
+  v as BREAKPOINTS,
+  h as COLOR_ROLES,
+  P as COMPONENT_TOKENS,
+  u as DATA_VIZ_COLORS,
+  E as EMOTION_COLORS,
+  o as RADIUS,
+  C as SHADOWS,
+  D as SPACING,
+  i as THEMES,
+  T as THEME_IDS,
+  B as TYPOGRAPHY,
+  S as WCAG,
+  w as Z_INDEX,
+  f as applyTheme,
+  k as getTheme,
+  l as loadCustomTheme,
+  A as saveCustomTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../src/design-tokens.ts","../src/themes.ts"],"sourcesContent":["/**\n * D-Music §1.1 — Design Token System\n *\n * Complete design token documentation following Material Design 3.0 principles,\n * adapted for D-Music's deep-space universe aesthetic.\n *\n * Token Categories:\n * 1. Color System (primary, secondary, semantic, data-viz)\n * 2. Typography System (font families, weights, sizes, line-heights)\n * 3. Spacing System (4px base grid)\n * 4. Border Radius System (4/8/12/16/24/full)\n * 5. Shadow/Elevation System (5 levels)\n * 6. Animation System (durations, easings)\n * 7. Breakpoints (responsive)\n * 8. Z-Index System (layering)\n *\n * WCAG 2.1 AA: All color pairings maintain >=4.5:1 contrast ratio for text.\n * 60fps Target: All animations use GPU-accelerated properties (transform, opacity).\n */\n\n// ============================================================\n// 1. Color System\n// ============================================================\n\n/** Semantic color roles mapped to CSS custom properties */\nexport const COLOR_ROLES = {\n // Surface colors\n background: '--dm-bg',\n backgroundPanel: '--dm-bg-panel',\n backgroundElevated: '--dm-bg-elevated',\n backgroundOverlay: '--dm-bg-overlay',\n\n // Content colors\n textPrimary: '--dm-text-primary',\n textSecondary: '--dm-text-secondary',\n textTertiary: '--dm-text-tertiary',\n textDisabled: '--dm-text-disabled',\n textInverse: '--dm-text-inverse',\n\n // Accent / Brand\n accentFrom: '--dm-accent-from',\n accentTo: '--dm-accent-to',\n brandFrom: '--dm-brand-from',\n brandVia: '--dm-brand-via',\n brandTo: '--dm-brand-to',\n\n // Semantic\n success: '--dm-success',\n warning: '--dm-warning',\n error: '--dm-error',\n info: '--dm-info',\n\n // Interactive\n hoverBg: '--dm-hover-bg',\n activeBg: '--dm-active-bg',\n focusRing: '--dm-focus-ring',\n selectionBg: '--dm-selection-bg',\n\n // Borders\n borderDefault: '--dm-border',\n borderSubtle: '--dm-border-subtle',\n borderStrong: '--dm-border-strong',\n} as const;\n\n/** Data visualization color palette — 8 distinct hues for chart series */\nexport const DATA_VIZ_COLORS = {\n series1: '#8B5CF6', // Violet\n series2: '#EC4899', // Pink\n series3: '#06B6D4', // Cyan\n series4: '#F59E0B', // Amber\n series5: '#22C55E', // Green\n series6: '#3B82F6', // Blue\n series7: '#EF4444', // Red\n series8: '#A855F7', // Purple\n} as const;\n\n/** Emotion-mapped colors for audio visualization */\nexport const EMOTION_COLORS = {\n happy: { primary: '#FFD700', secondary: '#FFA500', glow: 'rgba(255,215,0,0.3)' },\n sad: { primary: '#6495ED', secondary: '#4169E1', glow: 'rgba(100,149,237,0.3)' },\n energetic: { primary: '#FF4500', secondary: '#FF1493', glow: 'rgba(255,69,0,0.3)' },\n calm: { primary: '#00CED1', secondary: '#7B68EE', glow: 'rgba(0,206,209,0.3)' },\n neutral: { primary: '#667EEA', secondary: '#764BA2', glow: 'rgba(102,126,234,0.3)' },\n love: { primary: '#FF6B9D', secondary: '#C44569', glow: 'rgba(255,107,157,0.3)' },\n nostalgic: { primary: '#DEB887', secondary: '#D2691E', glow: 'rgba(222,184,135,0.3)' },\n hopeful: { primary: '#98FB98', secondary: '#00FA9A', glow: 'rgba(152,251,152,0.3)' },\n angry: { primary: '#DC143C', secondary: '#8B0000', glow: 'rgba(220,20,60,0.3)' },\n romantic: { primary: '#FFB6C1', secondary: '#FF69B4', glow: 'rgba(255,182,193,0.3)' },\n} as const;\n\n// ============================================================\n// 2. Typography System\n// ============================================================\n\nexport const TYPOGRAPHY = {\n fontFamily: {\n display: \"'Space Grotesk', system-ui, -apple-system, sans-serif\",\n body: \"'Space Grotesk', system-ui, -apple-system, sans-serif\",\n mono: \"'JetBrains Mono', 'Fira Code', monospace\",\n cjk: \"'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif\",\n },\n fontWeight: {\n light: 300,\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n },\n fontSize: {\n '2xs': '0.625rem', // 10px\n xs: '0.75rem', // 12px\n sm: '0.875rem', // 14px\n base: '1rem', // 16px\n lg: '1.125rem', // 18px\n xl: '1.25rem', // 20px\n '2xl': '1.5rem', // 24px\n '3xl': '1.875rem', // 30px\n '4xl': '2.25rem', // 36px\n },\n lineHeight: {\n tight: 1.2,\n snug: 1.375,\n normal: 1.5,\n relaxed: 1.625,\n loose: 2,\n },\n letterSpacing: {\n tighter: '-0.05em',\n tight: '-0.025em',\n normal: '0em',\n wide: '0.025em',\n wider: '0.05em',\n widest: '0.1em',\n },\n} as const;\n\n// ============================================================\n// 3. Spacing System (4px base grid)\n// ============================================================\n\nexport const SPACING = {\n 0: '0px',\n 0.5: '2px',\n 1: '4px',\n 1.5: '6px',\n 2: '8px',\n 2.5: '10px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n 20: '80px',\n 24: '96px',\n} as const;\n\n// ============================================================\n// 4. Border Radius System\n// ============================================================\n\nexport const RADIUS = {\n none: '0px',\n sm: '4px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n '2xl': '24px',\n full: '9999px',\n} as const;\n\n// ============================================================\n// 5. Shadow / Elevation System\n// ============================================================\n\nexport const SHADOWS = {\n /** Level 0 — flat */\n none: 'none',\n /** Level 1 — subtle (cards, buttons) */\n sm: '0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2)',\n /** Level 2 — medium (dropdowns, popovers) */\n md: '0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.2)',\n /** Level 3 — high (modals, dialogs) */\n lg: '0 10px 25px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.25)',\n /** Level 4 — highest (overlays, floating panels) */\n xl: '0 20px 50px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.3)',\n /** Inner shadow (inset elements) */\n inner: 'inset 0 2px 4px rgba(0,0,0,0.25)',\n /** Glow effect (accent-colored) */\n glow: (color: string) => `0 0 20px ${color}40, 0 0 60px ${color}20`,\n} as const;\n\n// ============================================================\n// 6. Animation System\n// ============================================================\n\nexport const ANIMATION = {\n duration: {\n instant: '50ms',\n fast: '150ms',\n normal: '250ms',\n slow: '400ms',\n slower: '600ms',\n slowest: '1000ms',\n },\n easing: {\n /** Standard Material easing */\n standard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n /** Decelerate (entering elements) */\n decelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n /** Accelerate (exiting elements) */\n accelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n /** Spring-like bounce */\n spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n /** Linear (progress bars, infinite loops) */\n linear: 'linear',\n },\n /** Motion variants for motion/react */\n variants: {\n fadeIn: { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } },\n slideUp: {\n initial: { opacity: 0, y: 20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 20 },\n },\n slideDown: {\n initial: { opacity: 0, y: -20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: -20 },\n },\n scaleIn: {\n initial: { opacity: 0, scale: 0.9 },\n animate: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: 0.9 },\n },\n panelSlide: {\n initial: { opacity: 0, x: 300 },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: 300 },\n transition: { type: 'spring', damping: 30, stiffness: 300 },\n },\n },\n} as const;\n\n// ============================================================\n// 7. Breakpoints (responsive)\n// ============================================================\n\nexport const BREAKPOINTS = {\n xs: 320, // Small phones\n sm: 640, // Phones\n md: 768, // Tablets\n lg: 1024, // Laptops\n xl: 1280, // Desktops\n '2xl': 1536, // Large desktops\n} as const;\n\n// ============================================================\n// 8. Z-Index System (strict layering)\n// ============================================================\n\nexport const Z_INDEX = {\n base: 0,\n starfield: 1,\n content: 10,\n header: 20,\n mobileNav: 30,\n dropdown: 40,\n panel: 50,\n overlay: 60,\n modal: 70,\n toast: 80,\n tooltip: 90,\n perfMonitor: 95,\n maxOverlay: 100,\n} as const;\n\n// ============================================================\n// 9. Component Token Presets\n// ============================================================\n\nexport const COMPONENT_TOKENS = {\n button: {\n heightSm: '32px',\n heightMd: '40px',\n heightLg: '48px',\n paddingX: { sm: '12px', md: '16px', lg: '24px' },\n fontSize: { sm: '0.75rem', md: '0.875rem', lg: '1rem' },\n radius: RADIUS.lg,\n transition: `all ${ANIMATION.duration.fast} ${ANIMATION.easing.standard}`,\n },\n input: {\n height: '40px',\n paddingX: '12px',\n fontSize: '0.875rem',\n radius: RADIUS.lg,\n borderWidth: '1px',\n },\n card: {\n padding: { sm: '12px', md: '16px', lg: '24px' },\n radius: RADIUS.xl,\n borderWidth: '1px',\n },\n modal: {\n maxWidth: '560px',\n padding: '24px',\n radius: RADIUS['2xl'],\n backdropBlur: '12px',\n },\n panel: {\n width: '400px',\n maxWidth: '90vw',\n radius: RADIUS.xl,\n backdropBlur: '20px',\n },\n} as const;\n\n// ============================================================\n// 10. WCAG 2.1 AA Contrast Helpers\n// ============================================================\n\n/**\n * Minimum contrast ratios for WCAG 2.1 AA compliance:\n * - Normal text (< 18pt): 4.5:1\n * - Large text (>= 18pt or >= 14pt bold): 3:1\n * - UI components / graphical objects: 3:1\n */\nexport const WCAG = {\n minContrastNormalText: 4.5,\n minContrastLargeText: 3.0,\n minContrastUI: 3.0,\n focusIndicatorWidth: '2px',\n focusIndicatorOffset: '2px',\n minTouchTarget: '44px', // 44x44px minimum touch target\n} as const;\n","/**\n * D-Music §1.4 — Theme System (Complete)\n *\n * 6 immersive themes for D-Music:\n * 1. Deep Space (深空) — default, indigo/purple [星空主题]\n * 2. Aurora (极光) — green/cyan borealis\n * 3. Ocean (海洋) — deep blue/teal\n * 4. Light (晨光) — clean light mode [默认浅色]\n * 5. Midnight (暗夜) — neutral dark [深色主题]\n * 6. Custom (自定义) — user-configurable [用户自定义]\n *\n * Design Token Structure (§1.4):\n * - Color system (primary, secondary, semantic)\n * - Font system (via design-tokens.ts)\n * - Spacing system (4px base)\n * - Border radius (4/8/12/16)\n * - Shadow system (levels 0-4)\n * - Animation system (durations, easings)\n *\n * Themes are applied via CSS custom properties on <html>.\n * Theme transitions use 300ms ease for smooth switching.\n * Pure utility module (no React dependency).\n */\n\nexport type ThemeId = 'deep-space' | 'aurora' | 'ocean' | 'light' | 'midnight' | 'custom';\n\nexport interface ThemeDefinition {\n id: ThemeId;\n label: { zh: string; en: string };\n description: { zh: string; en: string };\n icon: string;\n isDark: boolean;\n\n // ── Surface Colors ──\n /** Main background color */\n bg: string;\n /** Secondary / panel background */\n bgPanel: string;\n /** Elevated surface (cards, popovers) */\n bgElevated: string;\n /** Overlay background (modals backdrop) */\n bgOverlay: string;\n\n // ── Text Colors ──\n textPrimary: string;\n textSecondary: string;\n textTertiary: string;\n textDisabled: string;\n textInverse: string;\n\n // ── Accent & Brand ──\n /** Ambient glow RGB (for radial-gradient overlays) */\n glowRgb: string;\n /** Primary accent gradient (from → to) */\n accentFrom: string;\n accentTo: string;\n /** Starfield base color RGB */\n starRgb: string;\n /** Selection highlight */\n selectionBg: string;\n /** Header gradient stops */\n headerFrom: string;\n headerVia: string;\n /** Progress bar gradient */\n progressFrom: string;\n progressTo: string;\n /** Brand text gradient */\n brandFrom: string;\n brandVia: string;\n brandTo: string;\n\n // ── Semantic Colors ──\n success: string;\n warning: string;\n error: string;\n info: string;\n\n // ── Interactive ──\n hoverBg: string;\n activeBg: string;\n focusRing: string;\n\n // ── Borders ──\n border: string;\n borderSubtle: string;\n borderStrong: string;\n\n // ── Shadows ──\n shadowSm: string;\n shadowMd: string;\n shadowLg: string;\n}\n\n// ============================================================\n// Theme Definitions\n// ============================================================\n\nconst DEEP_SPACE: ThemeDefinition = {\n id: 'deep-space',\n label: { zh: '深空', en: 'Deep Space' },\n description: { zh: '星辰大海，宇宙沉浸', en: 'Cosmic immersion' },\n icon: '🌌',\n isDark: true,\n bg: '#0A0E2F',\n bgPanel: '#0D1235',\n bgElevated: '#111640',\n bgOverlay: 'rgba(10,14,47,0.85)',\n textPrimary: 'rgba(255,255,255,0.95)',\n textSecondary: 'rgba(255,255,255,0.60)',\n textTertiary: 'rgba(255,255,255,0.35)',\n textDisabled: 'rgba(255,255,255,0.20)',\n textInverse: '#0A0E2F',\n glowRgb: '102,126,234',\n accentFrom: '#8B5CF6',\n accentTo: '#EC4899',\n starRgb: '140,140,255',\n selectionBg: 'rgba(236,72,153,0.3)',\n headerFrom: '#0A0E2F',\n headerVia: 'rgba(10,14,47,0.8)',\n progressFrom: '#8B5CF6',\n progressTo: '#EC4899',\n brandFrom: '#FCD34D',\n brandVia: '#FDE68A',\n brandTo: '#FBBF24',\n success: '#22C55E',\n warning: '#F59E0B',\n error: '#EF4444',\n info: '#3B82F6',\n hoverBg: 'rgba(255,255,255,0.06)',\n activeBg: 'rgba(255,255,255,0.10)',\n focusRing: '#8B5CF6',\n border: 'rgba(255,255,255,0.10)',\n borderSubtle: 'rgba(255,255,255,0.06)',\n borderStrong: 'rgba(255,255,255,0.20)',\n shadowSm: '0 1px 3px rgba(0,0,0,0.4)',\n shadowMd: '0 4px 12px rgba(0,0,0,0.5)',\n shadowLg: '0 12px 40px rgba(0,0,0,0.6)',\n};\n\nconst AURORA: ThemeDefinition = {\n id: 'aurora',\n label: { zh: '极光', en: 'Aurora' },\n description: { zh: '北极光芒，翠绿交织', en: 'Northern lights dance' },\n icon: '🌈',\n isDark: true,\n bg: '#071A1F',\n bgPanel: '#0A2229',\n bgElevated: '#0E2A32',\n bgOverlay: 'rgba(7,26,31,0.85)',\n textPrimary: 'rgba(255,255,255,0.95)',\n textSecondary: 'rgba(255,255,255,0.60)',\n textTertiary: 'rgba(255,255,255,0.35)',\n textDisabled: 'rgba(255,255,255,0.20)',\n textInverse: '#071A1F',\n glowRgb: '34,197,94',\n accentFrom: '#22C55E',\n accentTo: '#06B6D4',\n starRgb: '34,197,94',\n selectionBg: 'rgba(34,197,94,0.3)',\n headerFrom: '#071A1F',\n headerVia: 'rgba(7,26,31,0.8)',\n progressFrom: '#22C55E',\n progressTo: '#06B6D4',\n brandFrom: '#A7F3D0',\n brandVia: '#6EE7B7',\n brandTo: '#34D399',\n success: '#22C55E',\n warning: '#F59E0B',\n error: '#EF4444',\n info: '#06B6D4',\n hoverBg: 'rgba(255,255,255,0.06)',\n activeBg: 'rgba(255,255,255,0.10)',\n focusRing: '#22C55E',\n border: 'rgba(255,255,255,0.10)',\n borderSubtle: 'rgba(255,255,255,0.06)',\n borderStrong: 'rgba(255,255,255,0.20)',\n shadowSm: '0 1px 3px rgba(0,0,0,0.4)',\n shadowMd: '0 4px 12px rgba(0,0,0,0.5)',\n shadowLg: '0 12px 40px rgba(0,0,0,0.6)',\n};\n\nconst OCEAN: ThemeDefinition = {\n id: 'ocean',\n label: { zh: '海洋', en: 'Ocean' },\n description: { zh: '深海静谧，蔚蓝沉思', en: 'Deep sea serenity' },\n icon: '🌊',\n isDark: true,\n bg: '#07142B',\n bgPanel: '#0B1C38',\n bgElevated: '#0F2444',\n bgOverlay: 'rgba(7,20,43,0.85)',\n textPrimary: 'rgba(255,255,255,0.95)',\n textSecondary: 'rgba(255,255,255,0.60)',\n textTertiary: 'rgba(255,255,255,0.35)',\n textDisabled: 'rgba(255,255,255,0.20)',\n textInverse: '#07142B',\n glowRgb: '59,130,246',\n accentFrom: '#3B82F6',\n accentTo: '#14B8A6',\n starRgb: '59,130,246',\n selectionBg: 'rgba(59,130,246,0.3)',\n headerFrom: '#07142B',\n headerVia: 'rgba(7,20,43,0.8)',\n progressFrom: '#3B82F6',\n progressTo: '#14B8A6',\n brandFrom: '#93C5FD',\n brandVia: '#BFDBFE',\n brandTo: '#60A5FA',\n success: '#22C55E',\n warning: '#F59E0B',\n error: '#EF4444',\n info: '#3B82F6',\n hoverBg: 'rgba(255,255,255,0.06)',\n activeBg: 'rgba(255,255,255,0.10)',\n focusRing: '#3B82F6',\n border: 'rgba(255,255,255,0.10)',\n borderSubtle: 'rgba(255,255,255,0.06)',\n borderStrong: 'rgba(255,255,255,0.20)',\n shadowSm: '0 1px 3px rgba(0,0,0,0.4)',\n shadowMd: '0 4px 12px rgba(0,0,0,0.5)',\n shadowLg: '0 12px 40px rgba(0,0,0,0.6)',\n};\n\nconst LIGHT: ThemeDefinition = {\n id: 'light',\n label: { zh: '晨光', en: 'Light' },\n description: { zh: '清透明亮，轻盈雅致', en: 'Clean and bright' },\n icon: '☀️',\n isDark: false,\n bg: '#F8F9FC',\n bgPanel: '#FFFFFF',\n bgElevated: '#FFFFFF',\n bgOverlay: 'rgba(0,0,0,0.4)',\n textPrimary: 'rgba(0,0,0,0.87)',\n textSecondary: 'rgba(0,0,0,0.60)',\n textTertiary: 'rgba(0,0,0,0.38)',\n textDisabled: 'rgba(0,0,0,0.20)',\n textInverse: '#FFFFFF',\n glowRgb: '99,102,241',\n accentFrom: '#6366F1',\n accentTo: '#EC4899',\n starRgb: '99,102,241',\n selectionBg: 'rgba(99,102,241,0.15)',\n headerFrom: '#F8F9FC',\n headerVia: 'rgba(248,249,252,0.9)',\n progressFrom: '#6366F1',\n progressTo: '#EC4899',\n brandFrom: '#6366F1',\n brandVia: '#8B5CF6',\n brandTo: '#EC4899',\n success: '#16A34A',\n warning: '#D97706',\n error: '#DC2626',\n info: '#2563EB',\n hoverBg: 'rgba(0,0,0,0.04)',\n activeBg: 'rgba(0,0,0,0.08)',\n focusRing: '#6366F1',\n border: 'rgba(0,0,0,0.12)',\n borderSubtle: 'rgba(0,0,0,0.06)',\n borderStrong: 'rgba(0,0,0,0.20)',\n shadowSm: '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)',\n shadowMd: '0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06)',\n shadowLg: '0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08)',\n};\n\nconst MIDNIGHT: ThemeDefinition = {\n id: 'midnight',\n label: { zh: '暗夜', en: 'Midnight' },\n description: { zh: '纯黑质感，极简深色', en: 'Pure dark elegance' },\n icon: '🌑',\n isDark: true,\n bg: '#0C0C0E',\n bgPanel: '#141416',\n bgElevated: '#1C1C1F',\n bgOverlay: 'rgba(12,12,14,0.85)',\n textPrimary: 'rgba(255,255,255,0.92)',\n textSecondary: 'rgba(255,255,255,0.55)',\n textTertiary: 'rgba(255,255,255,0.30)',\n textDisabled: 'rgba(255,255,255,0.18)',\n textInverse: '#0C0C0E',\n glowRgb: '168,85,247',\n accentFrom: '#A855F7',\n accentTo: '#F472B6',\n starRgb: '168,85,247',\n selectionBg: 'rgba(168,85,247,0.3)',\n headerFrom: '#0C0C0E',\n headerVia: 'rgba(12,12,14,0.8)',\n progressFrom: '#A855F7',\n progressTo: '#F472B6',\n brandFrom: '#E9D5FF',\n brandVia: '#D8B4FE',\n brandTo: '#C084FC',\n success: '#22C55E',\n warning: '#F59E0B',\n error: '#EF4444',\n info: '#818CF8',\n hoverBg: 'rgba(255,255,255,0.05)',\n activeBg: 'rgba(255,255,255,0.08)',\n focusRing: '#A855F7',\n border: 'rgba(255,255,255,0.08)',\n borderSubtle: 'rgba(255,255,255,0.04)',\n borderStrong: 'rgba(255,255,255,0.15)',\n shadowSm: '0 1px 3px rgba(0,0,0,0.5)',\n shadowMd: '0 4px 12px rgba(0,0,0,0.6)',\n shadowLg: '0 12px 40px rgba(0,0,0,0.7)',\n};\n\n/** Default custom theme — user can override */\nconst CUSTOM_DEFAULT: ThemeDefinition = {\n ...DEEP_SPACE,\n id: 'custom',\n label: { zh: '自定义', en: 'Custom' },\n description: { zh: '打造你的专属风格', en: 'Your own style' },\n icon: '🎨',\n};\n\n// ============================================================\n// Exports\n// ============================================================\n\nexport const THEMES: Record<ThemeId, ThemeDefinition> = {\n 'deep-space': DEEP_SPACE,\n aurora: AURORA,\n ocean: OCEAN,\n light: LIGHT,\n midnight: MIDNIGHT,\n custom: CUSTOM_DEFAULT,\n};\n\nexport const THEME_IDS: ThemeId[] = ['deep-space', 'aurora', 'ocean', 'light', 'midnight', 'custom'];\n\n// ============================================================\n// Custom Theme Storage\n// ============================================================\n\nconst CUSTOM_THEME_KEY = 'dmusic-custom-theme';\n\n/** Configurable properties for custom theme */\nexport interface CustomThemeConfig {\n bg: string;\n bgPanel: string;\n accentFrom: string;\n accentTo: string;\n isDark: boolean;\n}\n\nexport function loadCustomTheme(): CustomThemeConfig | null {\n try {\n const raw = localStorage.getItem(CUSTOM_THEME_KEY);\n return raw ? JSON.parse(raw) : null;\n } catch {\n return null;\n }\n}\n\nexport function saveCustomTheme(config: CustomThemeConfig): void {\n try {\n localStorage.setItem(CUSTOM_THEME_KEY, JSON.stringify(config));\n } catch {\n // localStorage unavailable\n }\n}\n\nfunction buildCustomTheme(config: CustomThemeConfig): ThemeDefinition {\n const base = config.isDark ? DEEP_SPACE : LIGHT;\n // Extract RGB from hex for glow\n const hex = config.accentFrom.replace('#', '');\n const r = parseInt(hex.substring(0, 2), 16);\n const g = parseInt(hex.substring(2, 4), 16);\n const b = parseInt(hex.substring(4, 6), 16);\n return {\n ...base,\n id: 'custom',\n label: CUSTOM_DEFAULT.label,\n description: CUSTOM_DEFAULT.description,\n icon: CUSTOM_DEFAULT.icon,\n isDark: config.isDark,\n bg: config.bg,\n bgPanel: config.bgPanel,\n bgElevated: config.bgPanel,\n bgOverlay: config.isDark ? `rgba(0,0,0,0.85)` : `rgba(0,0,0,0.4)`,\n glowRgb: `${r},${g},${b}`,\n accentFrom: config.accentFrom,\n accentTo: config.accentTo,\n progressFrom: config.accentFrom,\n progressTo: config.accentTo,\n focusRing: config.accentFrom,\n selectionBg: `rgba(${r},${g},${b},0.3)`,\n starRgb: `${r},${g},${b}`,\n headerFrom: config.bg,\n headerVia: config.isDark ? `rgba(0,0,0,0.8)` : `rgba(255,255,255,0.9)`,\n textPrimary: config.isDark ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.87)',\n textSecondary: config.isDark ? 'rgba(255,255,255,0.60)' : 'rgba(0,0,0,0.60)',\n textTertiary: config.isDark ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.38)',\n textDisabled: config.isDark ? 'rgba(255,255,255,0.20)' : 'rgba(0,0,0,0.20)',\n textInverse: config.isDark ? config.bg : '#FFFFFF',\n hoverBg: config.isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',\n activeBg: config.isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.08)',\n border: config.isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.12)',\n borderSubtle: config.isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)',\n borderStrong: config.isDark ? 'rgba(255,255,255,0.20)' : 'rgba(0,0,0,0.20)',\n };\n}\n\n// ============================================================\n// Theme Application\n// ============================================================\n\n/**\n * Apply a theme by setting CSS custom properties on <html>.\n * Includes transition class for smooth switching (300ms).\n */\nexport function applyTheme(id: ThemeId): void {\n let theme = THEMES[id];\n if (!theme) theme = THEMES['deep-space'];\n\n // For custom theme, merge saved config\n if (id === 'custom') {\n const config = loadCustomTheme();\n if (config) {\n theme = buildCustomTheme(config);\n }\n }\n\n const root = document.documentElement;\n\n // Add transition class for smooth switching\n root.classList.add('theme-transitioning');\n requestAnimationFrame(() => {\n setTimeout(() => root.classList.remove('theme-transitioning'), 350);\n });\n\n // ── Surface ──\n root.style.setProperty('--dm-bg', theme.bg);\n root.style.setProperty('--dm-bg-panel', theme.bgPanel);\n root.style.setProperty('--dm-bg-elevated', theme.bgElevated);\n root.style.setProperty('--dm-bg-overlay', theme.bgOverlay);\n\n // ── Text ──\n root.style.setProperty('--dm-text-primary', theme.textPrimary);\n root.style.setProperty('--dm-text-secondary', theme.textSecondary);\n root.style.setProperty('--dm-text-tertiary', theme.textTertiary);\n root.style.setProperty('--dm-text-disabled', theme.textDisabled);\n root.style.setProperty('--dm-text-inverse', theme.textInverse);\n\n // ── Accent & Brand ──\n root.style.setProperty('--dm-glow-rgb', theme.glowRgb);\n root.style.setProperty('--dm-accent-from', theme.accentFrom);\n root.style.setProperty('--dm-accent-to', theme.accentTo);\n root.style.setProperty('--dm-star-rgb', theme.starRgb);\n root.style.setProperty('--dm-selection-bg', theme.selectionBg);\n root.style.setProperty('--dm-header-from', theme.headerFrom);\n root.style.setProperty('--dm-header-via', theme.headerVia);\n root.style.setProperty('--dm-progress-from', theme.progressFrom);\n root.style.setProperty('--dm-progress-to', theme.progressTo);\n root.style.setProperty('--dm-brand-from', theme.brandFrom);\n root.style.setProperty('--dm-brand-via', theme.brandVia);\n root.style.setProperty('--dm-brand-to', theme.brandTo);\n\n // ── Semantic ──\n root.style.setProperty('--dm-success', theme.success);\n root.style.setProperty('--dm-warning', theme.warning);\n root.style.setProperty('--dm-error', theme.error);\n root.style.setProperty('--dm-info', theme.info);\n\n // ── Interactive ──\n root.style.setProperty('--dm-hover-bg', theme.hoverBg);\n root.style.setProperty('--dm-active-bg', theme.activeBg);\n root.style.setProperty('--dm-focus-ring', theme.focusRing);\n\n // ── Borders ──\n root.style.setProperty('--dm-border', theme.border);\n root.style.setProperty('--dm-border-subtle', theme.borderSubtle);\n root.style.setProperty('--dm-border-strong', theme.borderStrong);\n\n // ── Shadows ──\n root.style.setProperty('--dm-shadow-sm', theme.shadowSm);\n root.style.setProperty('--dm-shadow-md', theme.shadowMd);\n root.style.setProperty('--dm-shadow-lg', theme.shadowLg);\n\n // ── Dark mode class ──\n if (theme.isDark) {\n root.classList.add('dark');\n } else {\n root.classList.remove('dark');\n }\n\n // ── Data attribute for CSS selectors ──\n root.setAttribute('data-theme', id);\n\n // ── PWA theme-color meta ──\n const meta = document.querySelector('meta[name=\"theme-color\"]');\n if (meta) meta.setAttribute('content', theme.bg);\n}\n\n/**\n * Get a theme definition (with custom config applied if 'custom').\n */\nexport function getTheme(id: ThemeId): ThemeDefinition {\n if (id === 'custom') {\n const config = loadCustomTheme();\n if (config) return buildCustomTheme(config);\n }\n return THEMES[id] || THEMES['deep-space'];\n}\n"],"names":["COLOR_ROLES","DATA_VIZ_COLORS","EMOTION_COLORS","TYPOGRAPHY","SPACING","RADIUS","SHADOWS","color","ANIMATION","BREAKPOINTS","Z_INDEX","COMPONENT_TOKENS","WCAG","DEEP_SPACE","AURORA","OCEAN","LIGHT","MIDNIGHT","CUSTOM_DEFAULT","THEMES","THEME_IDS","CUSTOM_THEME_KEY","loadCustomTheme","raw","saveCustomTheme","config","buildCustomTheme","base","hex","r","g","b","applyTheme","id","theme","root","meta","getTheme"],"mappings":"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"}

package/dist/themes.d.ts ADDED Viewed

@@ -0,0 +1,104 @@
+/**
+ * D-Music §1.4 — Theme System (Complete)
+ *
+ * 6 immersive themes for D-Music:
+ *   1. Deep Space (深空) — default, indigo/purple     [星空主题]
+ *   2. Aurora (极光) — green/cyan borealis
+ *   3. Ocean (海洋) — deep blue/teal
+ *   4. Light (晨光) — clean light mode                [默认浅色]
+ *   5. Midnight (暗夜) — neutral dark                 [深色主题]
+ *   6. Custom (自定义) — user-configurable            [用户自定义]
+ *
+ * Design Token Structure (§1.4):
+ *   - Color system (primary, secondary, semantic)
+ *   - Font system (via design-tokens.ts)
+ *   - Spacing system (4px base)
+ *   - Border radius (4/8/12/16)
+ *   - Shadow system (levels 0-4)
+ *   - Animation system (durations, easings)
+ *
+ * Themes are applied via CSS custom properties on <html>.
+ * Theme transitions use 300ms ease for smooth switching.
+ * Pure utility module (no React dependency).
+ */
+export type ThemeId = 'deep-space' | 'aurora' | 'ocean' | 'light' | 'midnight' | 'custom';
+export interface ThemeDefinition {
+    id: ThemeId;
+    label: {
+        zh: string;
+        en: string;
+    };
+    description: {
+        zh: string;
+        en: string;
+    };
+    icon: string;
+    isDark: boolean;
+    /** Main background color */
+    bg: string;
+    /** Secondary / panel background */
+    bgPanel: string;
+    /** Elevated surface (cards, popovers) */
+    bgElevated: string;
+    /** Overlay background (modals backdrop) */
+    bgOverlay: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    textDisabled: string;
+    textInverse: string;
+    /** Ambient glow RGB (for radial-gradient overlays) */
+    glowRgb: string;
+    /** Primary accent gradient (from → to) */
+    accentFrom: string;
+    accentTo: string;
+    /** Starfield base color RGB */
+    starRgb: string;
+    /** Selection highlight */
+    selectionBg: string;
+    /** Header gradient stops */
+    headerFrom: string;
+    headerVia: string;
+    /** Progress bar gradient */
+    progressFrom: string;
+    progressTo: string;
+    /** Brand text gradient */
+    brandFrom: string;
+    brandVia: string;
+    brandTo: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    hoverBg: string;
+    activeBg: string;
+    focusRing: string;
+    border: string;
+    borderSubtle: string;
+    borderStrong: string;
+    shadowSm: string;
+    shadowMd: string;
+    shadowLg: string;
+}
+export declare const THEMES: Record<ThemeId, ThemeDefinition>;
+export declare const THEME_IDS: ThemeId[];
+/** Configurable properties for custom theme */
+export interface CustomThemeConfig {
+    bg: string;
+    bgPanel: string;
+    accentFrom: string;
+    accentTo: string;
+    isDark: boolean;
+}
+export declare function loadCustomTheme(): CustomThemeConfig | null;
+export declare function saveCustomTheme(config: CustomThemeConfig): void;
+/**
+ * Apply a theme by setting CSS custom properties on <html>.
+ * Includes transition class for smooth switching (300ms).
+ */
+export declare function applyTheme(id: ThemeId): void;
+/**
+ * Get a theme definition (with custom config applied if 'custom').
+ */
+export declare function getTheme(id: ThemeId): ThemeDefinition;
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,MAAM,OAAO,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE1F,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,WAAW,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAGhB,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAGlB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IAGpB,sDAAsD;IACtD,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAGhB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAGb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAGlB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IAGrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAqOD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,eAAe,CAOnD,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,OAAO,EAAqE,CAAC;AAQrG,+CAA+C;AAC/C,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,eAAe,IAAI,iBAAiB,GAAG,IAAI,CAO1D;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAM/D;AA+CD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAiF5C;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,OAAO,GAAG,eAAe,CAMrD"}

package/package.json CHANGED Viewed

@@ -1,6 +1,45 @@
 {
   "name": "@yyc3/music-design-tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.0.0",
+  "description": "YYC³ D-Music 设计 Token — 六主题体系与主题应用引擎",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "yyc3",
+    "musai",
+    "music",
+    "design-tokens",
+    "theme"
+  ],
+  "author": "YYC³ Team <admin@0379.email>",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YYC-Cube/YYC3-MusAI.git",
+    "directory": "packages/music-design-tokens"
+  },
+  "homepage": "https://musai.yyc3.vip",
+  "bugs": {
+    "url": "https://github.com/YYC-Cube/YYC3-MusAI/issues"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src"
+  }
 }