APAAS AntD Theme

一个专为 APAAS 系统定制的 AntD 主题变量包，提供统一的设计系统主题变量。

安装

npm install apaas-antd-theme

功能特点

• 提供完整的 AntD 主题变量配置
• 包含主色系、成功、警告、错误等状态的颜色定义
• 统一的字体大小规范
• 自定义组件样式变量

使用方法

基础使用

import { theme } from 'apaas-antd-theme';
import { ConfigProvider } from 'antd';

function App() {
  return (
    <ConfigProvider theme={theme}>
      <YourApp />
    </ConfigProvider>
  );
}

获取特定主题变量

import { theme } from 'apaas-antd-theme';

// 获取主色
const primaryColor = theme.token.colorPrimary; // "#1456f0"

// 获取标题字号
const h1Size = theme.token.fontSizeHeading1; // 30

主题变量说明

基础色彩系统

主色系

• colorPrimary: "#1456f0" - 品牌主色
• colorInfo: "#1456f0" - 信息色
• colorPrimaryBgHover: "#c2d4ff" - 主色悬浮背景
• colorPrimaryBorder: "#94b4ff" - 主色边框
• colorPrimaryHover: "#336df4" - 主色悬浮状态
• colorPrimaryActive: "#0442d2" - 主色激活状态

状态色

• 成功状态

  • colorSuccessText: "#32a645"
  • colorSuccessTextHover: "#5cd168"
  • colorSuccessActive: "#1a7526"
  • colorSuccessBgHover: "#d0f5ce"

• 警告状态

  • colorWarning: "#ed6d0c"
  • colorWarningBgHover: "#fee7cd"
  • colorWarningHover: "#ff811a"

• 错误状态

  • colorError: "#f54a45"
  • colorErrorBgHover: "#fee3e2"
  • colorErrorHover: "#ff7570"

字体系统

标题字号规范：

• H1: fontSizeHeading1: 30
• H2: fontSizeHeading2: 24
• H3: fontSizeHeading3: 20
• H4: fontSizeHeading4: 18

组件主题定制

Descriptions 组件

{
  borderRadiusLG: 1
}

Button 组件

{
  defaultShadow: "0",
  dangerShadow: "0",
  primaryShadow: "0"
}

开发指南

1. 克隆项目

git clone <repository-url>

2. 安装依赖

npm install

3. 构建项目

npm run build

版本历史

• 0.0.1: 初始版本发布

许可证

ISC

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助我们改进这个主题包。

支持

如果你在使用过程中遇到任何问题，请提交 Issue。