taro-uno-ui 0.9.0-beta

package/src/theme/tokens/index.ts

@@ -0,0 +1,217 @@
+/**
+ * 设计令牌统一导出
+ * 提供统一的设计令牌访问接口
+ */
+
+export * from './colors';
+export * from './spacing';
+export * from './typography';
+export * from './effects';
+
+import { colorTokens, darkColorTokens, type ColorTokens } from './colors';
+import { spacingTokens, type SpacingTokens } from './spacing';
+import { typographyTokens, type TypographyTokens } from './typography';
+import { effectsTokens, type EffectsTokens } from './effects';
+
+// 完整的设计令牌接口
+export interface DesignTokens {
+  colors: ColorTokens;
+  spacing: SpacingTokens;
+  typography: TypographyTokens;
+  effects: EffectsTokens;
+}
+
+// 默认设计令牌
+export const designTokens: DesignTokens = {
+  colors: colorTokens,
+  spacing: spacingTokens,
+  typography: typographyTokens,
+  effects: effectsTokens,
+};
+
+// 暗色主题设计令牌
+export const darkDesignTokens: DesignTokens = {
+  colors: { ...colorTokens, ...darkColorTokens },
+  spacing: spacingTokens,
+  typography: typographyTokens,
+  effects: effectsTokens,
+};
+
+// 设计令牌工具类
+export class DesignTokensManager {
+  private tokens: DesignTokens;
+
+  constructor(tokens: DesignTokens = designTokens) {
+    this.tokens = tokens;
+  }
+
+  /**
+   * 获取颜色令牌
+   */
+  getColor(path: string): string {
+    const keys = path.split('.');
+    let value: any = this.tokens.colors;
+
+    for (const key of keys) {
+      value = value?.[key];
+    }
+
+    return value || '#000000';
+  }
+
+  /**
+   * 获取间距令牌
+   */
+  getSpacing(key: string): string {
+    return String(this.tokens.spacing[key as keyof SpacingTokens] || '0');
+  }
+
+  /**
+   * 获取字体大小
+   */
+  getFontSize(key: string): string {
+    return this.tokens.typography.fontSize[key as keyof typeof this.tokens.typography.fontSize] || '16px';
+  }
+
+  /**
+   * 获取字体粗细
+   */
+  getFontWeight(key: string): string {
+    return this.tokens.typography.fontWeight[key as keyof typeof this.tokens.typography.fontWeight] || '400';
+  }
+
+  /**
+   * 获取圆角
+   */
+  getBorderRadius(key: string): string {
+    return String(this.tokens.effects.borderRadius[key as keyof typeof this.tokens.effects.borderRadius] || '0');
+  }
+
+  /**
+   * 获取阴影
+   */
+  getBoxShadow(key: string): string {
+    return String(this.tokens.effects.boxShadow[key as keyof typeof this.tokens.effects.boxShadow] || 'none');
+  }
+
+  /**
+   * 获取动画持续时间
+   */
+  getAnimationDuration(key: string): string {
+    const duration = this.tokens.effects.animation.duration as Record<string, string>;
+    return duration[key] || '300ms';
+  }
+
+  /**
+   * 获取动画缓动函数
+   */
+  getAnimationEasing(key: string): string {
+    return this.tokens.effects.animation.easing[key as keyof typeof this.tokens.effects.animation.easing] || 'ease';
+  }
+
+  /**
+   * 获取Z-index
+   */
+  getZIndex(key: string): string {
+    return this.tokens.effects.zIndex[key as keyof typeof this.tokens.effects.zIndex] || 'auto';
+  }
+
+  /**
+   * 生成 CSS 变量
+   */
+  generateCSSVariables(): string {
+    let css = ':root {\n';
+
+    // 递归生成变量
+    const generateSection = (obj: any, prefix: string = '') => {
+      Object.entries(obj).forEach(([key, value]) => {
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+          generateSection(value, `${prefix}${key}-`);
+        } else if (Array.isArray(value)) {
+          const variableName = `--${prefix}${key}`;
+          css += `  ${variableName}: ${value.join(', ')};\n`;
+        } else {
+          const variableName = `--${prefix}${key}`;
+          css += `  ${variableName}: ${value};\n`;
+        }
+      });
+    };
+
+    generateSection(this.tokens);
+    css += '}\n';
+
+    return css;
+  }
+
+  /**
+   * 生成暗色主题 CSS 变量
+   */
+  generateDarkThemeCSSVariables(): string {
+    let css = '[data-theme="dark"] {\n';
+
+    // 只生成颜色相关的变量
+    const generateColorSection = (obj: any, prefix: string = 'colors-') => {
+      Object.entries(obj).forEach(([key, value]) => {
+        if (typeof value === 'object' && value !== null) {
+          generateColorSection(value, `${prefix}${key}-`);
+        } else {
+          const variableName = `--${prefix}${key}`;
+          css += `  ${variableName}: ${value};\n`;
+        }
+      });
+    };
+
+    if (darkColorTokens) {
+      generateColorSection(darkColorTokens);
+    }
+
+    css += '}\n';
+
+    return css;
+  }
+
+  /**
+   * 转换为 CSS 自定义属性
+   */
+  toCSSCustomProperty(path: string): string {
+    return `--${path.replace(/\./g, '-')}`;
+  }
+
+  /**
+   * 从 CSS 自定义属性获取令牌
+   */
+  fromCSSCustomProperty(property: string): string {
+    return property.replace(/^--/, '').replace(/-/g, '.');
+  }
+
+  /**
+   * 获取所有令牌
+   */
+  getAllTokens(): DesignTokens {
+    return this.tokens;
+  }
+
+  /**
+   * 更新令牌
+   */
+  updateTokens(tokens: Partial<DesignTokens>): void {
+    this.tokens = {
+      ...this.tokens,
+      ...tokens,
+    };
+  }
+}
+
+// 导出默认实例
+export const tokensManager = new DesignTokensManager();
+
+// 导出工具函数
+export const getColor = (path: string) => tokensManager.getColor(path);
+export const getSpacing = (key: string) => tokensManager.getSpacing(key);
+export const getFontSize = (key: string) => tokensManager.getFontSize(key);
+export const getFontWeight = (key: string) => tokensManager.getFontWeight(key);
+export const getBorderRadius = (key: string) => tokensManager.getBorderRadius(key);
+export const getBoxShadow = (key: string) => tokensManager.getBoxShadow(key);
+export const getAnimationDuration = (key: string) => tokensManager.getAnimationDuration(key);
+export const getAnimationEasing = (key: string) => tokensManager.getAnimationEasing(key);
+export const getZIndex = (key: string) => tokensManager.getZIndex(key);

package/src/theme/tokens/spacing.ts

@@ -0,0 +1,137 @@
+/**
+ * 间距设计令牌
+ * 统一管理所有间距相关的设计令牌
+ */
+
+export interface SpacingTokens {
+  // 基础间距 (基于 4px 网格)
+  px: string;
+  0: string;
+  0.5: string;
+  1: string;
+  1.5: string;
+  2: string;
+  2.5: string;
+  3: string;
+  3.5: string;
+  4: string;
+  5: string;
+  6: string;
+  7: string;
+  8: string;
+  9: string;
+  10: string;
+  11: string;
+  12: string;
+  14: string;
+  16: string;
+  18: string;
+  20: string;
+  24: string;
+  28: string;
+  32: string;
+  36: string;
+  40: string;
+  44: string;
+  48: string;
+  52: string;
+  56: string;
+  60: string;
+  64: string;
+  72: string;
+  80: string;
+  96: string;
+
+  // 组件间距
+  component: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+  };
+
+  // 布局间距
+  layout: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+  };
+
+  // 容器间距
+  container: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+  };
+}
+
+// 默认间距令牌
+export const spacingTokens: SpacingTokens = {
+  px: '1px',
+  0: '0',
+  0.5: '2px',
+  1: '4px',
+  1.5: '6px',
+  2: '8px',
+  2.5: '10px',
+  3: '12px',
+  3.5: '14px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  9: '36px',
+  10: '40px',
+  11: '44px',
+  12: '48px',
+  14: '56px',
+  16: '64px',
+  18: '72px',
+  20: '80px',
+  24: '96px',
+  28: '112px',
+  32: '128px',
+  36: '144px',
+  40: '160px',
+  44: '176px',
+  48: '192px',
+  52: '208px',
+  56: '224px',
+  60: '240px',
+  64: '256px',
+  72: '288px',
+  80: '320px',
+  96: '384px',
+
+  component: {
+    xs: '8px',
+    sm: '12px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    '2xl': '48px',
+  },
+
+  layout: {
+    sm: '16px',
+    md: '24px',
+    lg: '32px',
+    xl: '48px',
+    '2xl': '64px',
+  },
+
+  container: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+  },
+};

package/src/theme/tokens/typography.ts

@@ -0,0 +1,186 @@
+/**
+ * 字体设计令牌
+ * 统一管理所有字体相关的设计令牌
+ */
+
+export interface TypographyTokens {
+  // 字体族
+  fontFamily: {
+    sans: string[];
+    serif: string[];
+    mono: string[];
+    display: string[];
+    body: string[];
+  };
+
+  // 字体大小
+  fontSize: {
+    '3xs': string;
+    '2xs': string;
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+    '9xl': string;
+  };
+
+  // 字体粗细
+  fontWeight: {
+    thin: string;
+    extralight: string;
+    light: string;
+    normal: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+    extrabold: string;
+    black: string;
+  };
+
+  // 行高
+  lineHeight: {
+    none: string;
+    tight: string;
+    snug: string;
+    normal: string;
+    relaxed: string;
+    loose: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+  };
+
+  // 字母间距
+  letterSpacing: {
+    tighter: string;
+    tight: string;
+    normal: string;
+    wide: string;
+    wider: string;
+    widest: string;
+  };
+
+  // 段落间距
+  paragraphSpacing: {
+    none: string;
+    tight: string;
+    normal: string;
+    relaxed: string;
+    loose: string;
+  };
+}
+
+// 默认字体令牌
+export const typographyTokens: TypographyTokens = {
+  fontFamily: {
+    sans: [
+      'Inter',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'sans-serif',
+    ],
+    serif: ['Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+    mono: ['Fira Code', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
+    display: [
+      'Inter',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'sans-serif',
+    ],
+    body: [
+      'Inter',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      'Segoe UI',
+      'Roboto',
+      'Helvetica Neue',
+      'Arial',
+      'sans-serif',
+    ],
+  },
+
+  fontSize: {
+    '3xs': '10px',
+    '2xs': '12px',
+    xs: '14px',
+    sm: '16px',
+    base: '18px',
+    lg: '20px',
+    xl: '24px',
+    '2xl': '30px',
+    '3xl': '36px',
+    '4xl': '48px',
+    '5xl': '60px',
+    '6xl': '72px',
+    '7xl': '96px',
+    '8xl': '128px',
+    '9xl': '160px',
+  },
+
+  fontWeight: {
+    thin: '100',
+    extralight: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+  },
+
+  lineHeight: {
+    none: '1',
+    tight: '1.25',
+    snug: '1.375',
+    normal: '1.5',
+    relaxed: '1.625',
+    loose: '2',
+    3: '1.75',
+    4: '2',
+    5: '2.25',
+    6: '2.5',
+    7: '2.75',
+    8: '3',
+    9: '3.25',
+    10: '3.5',
+  },
+
+  letterSpacing: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em',
+  },
+
+  paragraphSpacing: {
+    none: '0',
+    tight: '0.5rem',
+    normal: '1rem',
+    relaxed: '1.5rem',
+    loose: '2rem',
+  },
+};

package/src/theme/types.ts

@@ -0,0 +1,188 @@
+/**
+ * 主题系统类型定义
+ */
+
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  success: string;
+  warning: string;
+  error: string;
+  info: string;
+
+  text: string;
+  textSecondary: string;
+  textDisabled: string;
+  textInverse: string;
+
+  background: string;
+  backgroundCard: string;
+  backgroundInput: string;
+  backgroundMask: string;
+
+  border: string;
+  borderLight: string;
+  borderFocus: string;
+
+  shadow: string;
+  shadowLight: string;
+
+  brand: string;
+  accent: string;
+  link: string;
+  divider: string;
+}
+
+export interface ThemeSpacing {
+  // 间距单位 (px)
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+
+  // 组件间距
+  padding: number;
+  margin: number;
+  gap: number;
+
+  // 响应式断点
+  breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+  };
+}
+
+export interface ThemeTypography {
+  // 字体族
+  fontFamily: {
+    sans: string[];
+    serif: string[];
+    mono: string[];
+    heading: string[];
+  };
+
+  // 字体大小 (px)
+  fontSize: {
+    xs: number;
+    sm: number;
+    base: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    '5xl': number;
+  };
+
+  // 字体粗细
+  fontWeight: {
+    light: number;
+    normal: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+  };
+
+  // 行高
+  lineHeight: {
+    tight: number;
+    normal: number;
+    relaxed: number;
+    loose: number;
+  };
+
+  // 字母间距
+  letterSpacing: {
+    tight: string;
+    normal: string;
+    wide: string;
+  };
+}
+
+export interface ThemeBorderRadius {
+  none: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  full: number;
+  circle: number;
+}
+
+export interface ThemeShadow {
+  none: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  inner: string;
+}
+
+export interface ThemeAnimation {
+  // 动画时长
+  duration: {
+    fast: string;
+    normal: string;
+    slow: string;
+  };
+
+  // 动画缓动函数
+  easing: {
+    linear: string;
+    ease: string;
+    easeIn: string;
+    easeOut: string;
+    easeInOut: string;
+  };
+
+  // 动画效果
+  keyframes: {
+    fadeIn: string;
+    fadeOut: string;
+    slideInUp: string;
+    slideInDown: string;
+    slideInLeft: string;
+    slideInRight: string;
+    scaleIn: string;
+    scaleOut: string;
+  };
+}
+
+export interface ThemeConfig {
+  mode: ThemeMode;
+  colors: ThemeColors;
+  spacing: ThemeSpacing;
+  typography: ThemeTypography;
+  borderRadius: ThemeBorderRadius;
+  shadow: ThemeShadow;
+  animation: ThemeAnimation;
+  // 平台特定配置
+  platform: {
+    isH5: boolean;
+    isWeapp: boolean;
+    isAlipay: boolean;
+    isSwan: boolean;
+    isTt: boolean;
+    isQq: boolean;
+    isRn: boolean;
+  };
+  // 主题元数据
+  metadata?: {
+    version: string;
+    author?: string;
+    description?: string;
+    created: string;
+    modified?: string;
+  };
+  // 自定义主题配置
+  custom?: Record<string, unknown>;
+}