@agions/taroviz 1.11.1 → 2.0.3

package/src/themes/palettes/blue-green.ts

@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '../types';
+import { defaultTheme } from './default';
+
+/** Blue Green 蓝绿清新 */
+export const blueGreenTheme: ThemeOptions = {
+  ...defaultTheme,
+  theme: 'blue-green',
+  name: 'Blue Green',
+  description: '蓝绿清新',
+  colors: ['#00838f', '#00acc1', '#03a9f4', '#29b6f6', '#4fc3f7'],
+  backgroundColor: '#e0f7fa',
+  textColor: '#006064',
+};

package/src/themes/palettes/chalk.ts

@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '../types';
+import { defaultTheme } from './default';
+
+/** Chalk 粉笔风格 */
+export const chalkTheme: ThemeOptions = {
+  ...defaultTheme,
+  theme: 'chalk',
+  name: 'Chalk',
+  description: '粉笔风格',
+  colors: ['#2e8de5', '#f0805a', '#5ab1ef', '#91d5ff', '#faad14'],
+  backgroundColor: '#ffffff',
+  textColor: '#000000',
+};

package/src/themes/palettes/cyber.ts

@@ -0,0 +1,44 @@
+import type { ThemeOptions } from '../types';
+
+/** Cyber 赛博主题 */
+export const cyberTheme: ThemeOptions = {
+  theme: 'cyber',
+  name: 'Cyber',
+  description: '未来科技感，赛博朋克',
+  type: 'dark',
+  mode: 'dark',
+  darkMode: true,
+  tags: ['cyber', 'tech', 'futuristic', 'dark'],
+  colors: [
+    '#00f5ff',
+    '#ff00ff',
+    '#00ff00',
+    '#ffff00',
+    '#ff0080',
+    '#8000ff',
+    '#00ff80',
+    '#ff8000',
+    '#0080ff',
+  ],
+  backgroundColor: '#0a0a12',
+  textColor: '#e0e0e0',
+  textColorSecondary: '#808090',
+  borderColor: '#1a1a2e',
+  dividerColor: '#12121e',
+  fontFamily: '"Orbitron", "Rajdhani", "JetBrains Mono", monospace',
+  effects: {
+    shadows: true,
+    shadowColor: 'rgba(0, 245, 255, 0.4)',
+    gradients: true,
+    borderRadius: 'none',
+  },
+  chart: {
+    tooltip: {
+      textColor: '#ffffff',
+      backgroundColor: 'rgba(10, 10, 18, 0.95)',
+      borderColor: '#00f5ff',
+      borderRadius: 0,
+      shadowColor: 'rgba(0, 245, 255, 0.4)',
+    },
+  },
+};

package/src/themes/palettes/dark.ts

@@ -0,0 +1,52 @@
+import type { ThemeOptions } from '../types';
+
+/** 深色主题 */
+export const darkTheme: ThemeOptions = {
+  theme: 'dark',
+  name: 'Dark',
+  description: '优雅的深色主题，适合夜间使用',
+  type: 'dark',
+  mode: 'dark',
+  darkMode: true,
+  tags: ['dark', 'night', 'modern'],
+  colors: [
+    '#4992ff',
+    '#7cffb2',
+    '#fddd60',
+    '#ff6e76',
+    '#58d9f9',
+    '#05c091',
+    '#ff9f7f',
+    '#8d48e3',
+    '#dd79ff',
+  ],
+  backgroundColor: '#1a1a2e',
+  textColor: '#e8e8e8',
+  textColorSecondary: '#a0a0a0',
+  borderColor: '#2d2d44',
+  dividerColor: '#252538',
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  chart: {
+    legend: {
+      textColor: '#e8e8e8',
+      backgroundColor: 'transparent',
+      borderColor: '#2d2d44',
+    },
+    axis: {
+      textColor: '#a0a0a0',
+      lineColor: '#2d2d44',
+      tickColor: '#2d2d44',
+      splitLineColor: '#252538',
+    },
+    tooltip: {
+      textColor: '#e8e8e8',
+      backgroundColor: 'rgba(26, 26, 46, 0.95)',
+      borderColor: '#2d2d44',
+      borderRadius: 4,
+    },
+    title: {
+      textColor: '#e8e8e8',
+      subTextColor: '#a0a0a0',
+    },
+  },
+};

package/src/themes/palettes/default.ts

@@ -0,0 +1,52 @@
+import type { ThemeOptions } from '../types';
+
+/** 默认主题 */
+export const defaultTheme: ThemeOptions = {
+  theme: 'default',
+  name: 'Default',
+  description: '简洁现代的默认主题',
+  type: 'light',
+  mode: 'light',
+  darkMode: false,
+  tags: ['modern', 'clean', 'default'],
+  colors: [
+    '#5470c6',
+    '#91cc75',
+    '#fac858',
+    '#ee6666',
+    '#73c0de',
+    '#3ba272',
+    '#fc8452',
+    '#9a60b4',
+    '#ea7ccc',
+  ],
+  backgroundColor: '#ffffff',
+  textColor: '#333333',
+  textColorSecondary: '#666666',
+  borderColor: '#e8e8e8',
+  dividerColor: '#f0f0f0',
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  chart: {
+    legend: {
+      textColor: '#333333',
+      backgroundColor: 'transparent',
+      borderColor: '#e8e8e8',
+    },
+    axis: {
+      textColor: '#666666',
+      lineColor: '#e8e8e8',
+      tickColor: '#e8e8e8',
+      splitLineColor: '#f0f0f0',
+    },
+    tooltip: {
+      textColor: '#333333',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#e8e8e8',
+      borderRadius: 4,
+    },
+    title: {
+      textColor: '#333333',
+      subTextColor: '#666666',
+    },
+  },
+};

package/src/themes/palettes/elegant.ts

@@ -0,0 +1,34 @@
+import type { ThemeOptions } from '../types';
+
+/** Elegant 雅致主题 */
+export const elegantTheme: ThemeOptions = {
+  theme: 'elegant',
+  name: 'Elegant',
+  description: '低调雅致风格，精致品味',
+  type: 'light',
+  mode: 'light',
+  darkMode: false,
+  tags: ['elegant', 'minimal', 'sophisticated', 'light'],
+  colors: [
+    '#2c3e50',
+    '#34495e',
+    '#7f8c8d',
+    '#95a5a6',
+    '#bdc3c7',
+    '#ecf0f1',
+    '#1abc9c',
+    '#16a085',
+    '#3498db',
+  ],
+  backgroundColor: '#fafafa',
+  textColor: '#2c3e50',
+  textColorSecondary: '#7f8c8d',
+  borderColor: '#e8e8e8',
+  dividerColor: '#f0f0f0',
+  fontFamily: '"Playfair Display", Georgia, serif',
+  effects: {
+    shadows: true,
+    shadowColor: 'rgba(0, 0, 0, 0.08)',
+    borderRadius: 'medium',
+  },
+};

package/src/themes/palettes/forest.ts

@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '../types';
+import { defaultTheme } from './default';
+
+/** Forest 森林绿色 */
+export const forestTheme: ThemeOptions = {
+  ...defaultTheme,
+  theme: 'forest',
+  name: 'Forest',
+  description: '森林绿色',
+  colors: ['#2e7d32', '#388e3c', '#43a047', '#4caf50', '#66bb6a'],
+  backgroundColor: '#f1f8e9',
+  textColor: '#1b5e20',
+};

package/src/themes/palettes/glass.ts

@@ -0,0 +1,49 @@
+import type { ThemeOptions } from '../types';
+
+/** Glass 玻璃态主题 */
+export const glassTheme: ThemeOptions = {
+  theme: 'glass',
+  name: 'Glass',
+  description: '现代玻璃态设计，半透明质感',
+  type: 'light',
+  mode: 'light',
+  darkMode: false,
+  tags: ['glass', 'modern', 'minimal', 'light'],
+  colors: [
+    '#667eea',
+    '#764ba2',
+    '#f093fb',
+    '#f5576c',
+    '#4facfe',
+    '#00f2fe',
+    '#43e97b',
+    '#38f9d7',
+    '#fa709a',
+  ],
+  backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  backgroundGradient: {
+    start: '#f5f7fa',
+    end: '#c3cfe2',
+    angle: 135,
+  },
+  textColor: '#2d3748',
+  textColorSecondary: '#718096',
+  borderColor: 'rgba(255, 255, 255, 0.5)',
+  dividerColor: 'rgba(255, 255, 255, 0.3)',
+  fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
+  effects: {
+    glassmorphism: true,
+    blur: 10,
+    shadows: true,
+    shadowColor: 'rgba(0, 0, 0, 0.1)',
+    borderRadius: 'large',
+  },
+  chart: {
+    tooltip: {
+      textColor: '#2d3748',
+      backgroundColor: 'rgba(255, 255, 255, 0.9)',
+      borderColor: 'rgba(255, 255, 255, 0.5)',
+      borderRadius: 12,
+    },
+  },
+};

package/src/themes/palettes/golden.ts

@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '../types';
+import { defaultTheme } from './default';
+
+/** Golden 金色奢华 */
+export const goldenTheme: ThemeOptions = {
+  ...defaultTheme,
+  theme: 'golden',
+  name: 'Golden',
+  description: '金色奢华',
+  colors: ['#ffd700', '#ffed4e', '#f9a825', '#ffc107', '#ffb300'],
+  backgroundColor: '#fff8e1',
+  textColor: '#ff6f00',
+};

package/src/themes/palettes/neon.ts

@@ -0,0 +1,43 @@
+import type { ThemeOptions } from '../types';
+
+/** Neon 霓虹主题 */
+export const neonTheme: ThemeOptions = {
+  theme: 'neon',
+  name: 'Neon',
+  description: '赛博朋克霓虹风格，炫酷吸睛',
+  type: 'dark',
+  mode: 'dark',
+  darkMode: true,
+  tags: ['neon', 'cyberpunk', 'colorful', 'dark'],
+  colors: [
+    '#00fff5',
+    '#ff00ff',
+    '#ffff00',
+    '#00ff00',
+    '#ff6b6b',
+    '#4ecdc4',
+    '#ffe66d',
+    '#95e1d3',
+    '#f38181',
+  ],
+  backgroundColor: '#0d0d1a',
+  textColor: '#ffffff',
+  textColorSecondary: '#b0b0b0',
+  borderColor: '#1a1a2e',
+  dividerColor: '#1a1a2e',
+  fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+  effects: {
+    shadows: true,
+    shadowColor: 'rgba(0, 255, 245, 0.3)',
+    gradients: true,
+  },
+  chart: {
+    tooltip: {
+      textColor: '#ffffff',
+      backgroundColor: 'rgba(13, 13, 26, 0.95)',
+      borderColor: '#00fff5',
+      borderRadius: 4,
+      shadowColor: 'rgba(0, 255, 245, 0.3)',
+    },
+  },
+};

package/src/themes/palettes/ocean.ts

@@ -0,0 +1,39 @@
+import type { ThemeOptions } from '../types';
+
+/** Ocean 海洋主题 */
+export const oceanTheme: ThemeOptions = {
+  theme: 'ocean',
+  name: 'Ocean',
+  description: '深邃海洋蓝，宁静清新',
+  type: 'light',
+  mode: 'light',
+  darkMode: false,
+  tags: ['ocean', 'blue', 'calm', 'light'],
+  colors: [
+    '#0077b6',
+    '#00b4d8',
+    '#90e0ef',
+    '#caf0f8',
+    '#03045e',
+    '#023e8a',
+    '#0096c7',
+    '#48cae4',
+    '#ade8f4',
+  ],
+  backgroundColor: '#f0f8ff',
+  backgroundGradient: {
+    start: '#e0f2fe',
+    end: '#bae6fd',
+    angle: 180,
+  },
+  textColor: '#1e3a5f',
+  textColorSecondary: '#4a6fa5',
+  borderColor: '#cce7f5',
+  dividerColor: '#e1f0f9',
+  fontFamily: 'Nunito, -apple-system, BlinkMacSystemFont, sans-serif',
+  effects: {
+    gradients: true,
+    shadows: true,
+    shadowColor: 'rgba(0, 119, 182, 0.15)',
+  },
+};

package/src/themes/palettes/pastel.ts

@@ -0,0 +1,37 @@
+import type { ThemeOptions } from '../types';
+
+/** Pastel 粉彩主题 */
+export const pastelTheme: ThemeOptions = {
+  theme: 'pastel',
+  name: 'Pastel',
+  description: '柔和粉彩配色，温馨舒适',
+  type: 'light',
+  mode: 'light',
+  darkMode: false,
+  tags: ['pastel', 'soft', 'gentle', 'light'],
+  colors: [
+    '#ffb3ba',
+    '#ffdfba',
+    '#ffffba',
+    '#baffc9',
+    '#bae1ff',
+    '#f0b3ff',
+    '#b3fff0',
+    '#ffb3d9',
+    '#d9ffb3',
+  ],
+  backgroundColor: '#fff9f5',
+  textColor: '#5d5d5d',
+  textColorSecondary: '#8a8a8a',
+  borderColor: '#f0e6e0',
+  dividerColor: '#f5f0eb',
+  fontFamily: 'Nunito, -apple-system, BlinkMacSystemFont, sans-serif',
+  chart: {
+    tooltip: {
+      textColor: '#5d5d5d',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      borderColor: '#f0e6e0',
+      borderRadius: 8,
+    },
+  },
+};

package/src/themes/palettes/purple-passion.ts

@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '../types';
+import { defaultTheme } from './default';
+
+/** Purple Passion 紫色浪漫 */
+export const purplePassionTheme: ThemeOptions = {
+  ...defaultTheme,
+  theme: 'purple-passion',
+  name: 'Purple Passion',
+  description: '紫色浪漫',
+  colors: ['#9c27b0', '#e91e63', '#ff5722', '#ff9800', '#ffc107'],
+  backgroundColor: '#f5f5f5',
+  textColor: '#333333',
+};

package/src/themes/palettes/retro.ts

@@ -0,0 +1,33 @@
+import type { ThemeOptions } from '../types';
+
+/** Retro 复古主题 */
+export const retroTheme: ThemeOptions = {
+  theme: 'retro',
+  name: 'Retro',
+  description: '怀旧复古风格，温馨怀旧',
+  type: 'light',
+  mode: 'light',
+  darkMode: false,
+  tags: ['retro', 'vintage', 'nostalgic', 'light'],
+  colors: [
+    '#d63031',
+    '#e17055',
+    '#fdcb6e',
+    '#00b894',
+    '#0984e3',
+    '#6c5ce7',
+    '#e84393',
+    '#00cec9',
+    '#fab1a0',
+  ],
+  backgroundColor: '#fdf6e3',
+  textColor: '#5c4b37',
+  textColorSecondary: '#8b7355',
+  borderColor: '#e8dcc8',
+  dividerColor: '#f0e8d8',
+  fontFamily: '"Courier Prime", "Courier New", monospace',
+  effects: {
+    shadows: false,
+    borderRadius: 'small',
+  },
+};

package/src/themes/palettes/sunset.ts

@@ -0,0 +1,40 @@
+import type { ThemeOptions } from '../types';
+
+/** Sunset 日落主题 */
+export const sunsetTheme: ThemeOptions = {
+  theme: 'sunset',
+  name: 'Sunset',
+  description: '温暖日落渐变，夕阳余晖',
+  type: 'light',
+  mode: 'light',
+  darkMode: false,
+  tags: ['sunset', 'warm', 'gradient', 'light'],
+  colors: [
+    '#ff6b6b',
+    '#feca57',
+    '#ff9ff3',
+    '#54a0ff',
+    '#5f27cd',
+    '#ff9f43',
+    '#ee5a24',
+    '#009432',
+    '#f368e0',
+  ],
+  backgroundColor: '#fff5f0',
+  backgroundGradient: {
+    start: '#ffecd2',
+    end: '#fcb69f',
+    angle: 135,
+  },
+  textColor: '#4a4a4a',
+  textColorSecondary: '#7a7a7a',
+  borderColor: '#ffd5c8',
+  dividerColor: '#ffebe6',
+  fontFamily: 'Quicksand, -apple-system, BlinkMacSystemFont, sans-serif',
+  effects: {
+    gradients: true,
+    shadows: true,
+    shadowColor: 'rgba(255, 107, 107, 0.2)',
+    borderRadius: 'medium',
+  },
+};

package/src/themes/palettes/walden.ts

@@ -0,0 +1,13 @@
+import type { ThemeOptions } from '../types';
+import { defaultTheme } from './default';
+
+/** Walden 清新自然风格 */
+export const waldenTheme: ThemeOptions = {
+  ...defaultTheme,
+  theme: 'walden',
+  name: 'Walden',
+  description: '清新自然风格',
+  colors: ['#0a437a', '#3a84c4', '#22a783', '#48b591', '#7fcdbb', '#c9e4ca'],
+  backgroundColor: '#f0f8f5',
+  textColor: '#2c5042',
+};