跳到主要内容
版本：1.3.2

主题

Raaghu 设计系统中的所有 CSS 和 SCSS 文件现在使用 raaghu-react-themes 作为所有主题相关值的单一真实来源。

📊 集成统计​

  • 📁 总组件数：60 个 RDS 组件
  • 🎨 创建的 SCSS 文件：60 个组件样式表
  • 🔧 更新的文件：41 个组件已更新为使用主题变量
  • 🏷️ 主题变量：所有组件中使用了 348 个主题变量
  • 📚 文档文件：创建了 6 个全面的文档文件

🎯 取得的成果​

1. 完整的 CSS/SCSS 架构 ✅​
  • 每个组件都有对应的 SCSS 文件，命名一致
  • 文件结构：rds-{component}/rds-{component}.scss
  • 使用 RDS 前缀的 BEM 方法：.rds-{component}__element--modifier
2. 集中式主题系统 ✅​
  • 创建了包含 150+ 设计令牌的 custom-properties.scss
  • 所有组件现在都使用来自主题的 CSS 自定义属性
  • 所有样式值的单一联系点
  • 轻松的主题切换（浅色、深色）
3. 自动化工具 ✅​
  • generate-scss.js - 为新组件自动生成 SCSS 文件
  • update-theme-variables.js - 自动更新组件以使用主题变量
  • 所有文件中一致的模式和约定

🎨 主题集成示例​

集成前（硬编码值）​
.rds-button {
  background-color: #1976d2;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
集成后（主题变量）✨​
.rds-button {
  background-color: var(--rds-button-primary-bg);
  padding: var(--rds-spacing-sm) var(--rds-spacing-md);
  border-radius: var(--rds-border-radius-sm);
  transition: all var(--rds-transition-base);
}

🔗 单一联系点流程​

graph TD
    A[raaghu-react-themes/src/styles/] --> B[variables/color-variables.scss]
    A --> C[themes/light.scss]
    A --> D[themes/dark.scss]
    A --> F[custom-properties.scss]

    F --> G[CSS Custom Properties]
    G --> H[All RDS Components]

    H --> I[rds-button.scss]
    H --> J[rds-card.scss]
    H --> K[rds-alert.scss]
    H --> L[... 57 more components]

🛠️ 开发者体验​

在应用中导入主题​
import '@waiin/raaghu-react/raaghu-react-themes/src/styles/themes/light.scss';
在组件中使用主题变量​
.my-component {
  // 颜色
  background-color: var(--rds-background-paper);
  color: var(--rds-text-primary);
  border: 1px solid var(--rds-border-default);

  // 间距
  padding: var(--rds-spacing-md);

  // 排版
  font-family: var(--rds-font-family-base);
  font-size: var(--rds-font-size-md);

  // 效果
  box-shadow: var(--rds-elevation-2);
  transition: all var(--rds-transition-base);
}
轻松切换主题​
// 浅色主题
import 'raaghu-react-themes/src/styles/themes/light.scss';

// 深色主题
import 'raaghu-react-themes/src/styles/themes/dark.scss';

📈 取得的收益​

✅ 一致性​

所有组件使用相同的调色板、间距比例、排版和交互模式。

✅ 可维护性​

在一个地方更改颜色或间距值，即可在所有 60+ 组件中看到反映。

✅ 主题切换​

无需重建即可在浅色和深色主题之间无缝切换。

✅ 开发者生产力​

清晰、语义化的变量名称使开发更快、更直观。

✅ 性能​

CSS 自定义属性支持高效的运行时主题更改。

✅ 可扩展性​

遵循既定模式，轻松添加新组件、主题和设计令牌。