所有开源包
界面Swift

SwiftUI-Design-System-Pro

面向 Apple 平台的 design token、主题引擎和经过测试的 SwiftUI 组件

26星标数最新版本: v2.0.0更新时间: 2026年10月15日
支持平台:iOS 17macOS 14tvOS 17watchOS 10visionOS 1

许可证: MIT

DesignSystemPro 是一个面向希望拥有统一外观、又不想从零搭建的 SwiftUI 应用的 Swift package。它包含 design token（颜色、排版、间距、边框、阴影、动效）、一个管理浅色、深色、预设和品牌主题的主题引擎，以及约 40 个基于这些 token 构建的组件 view。每个颜色 token 都带有浅色、深色和高对比度数值，排版遵循 Dynamic Type，一个渲染测试会把每个组件分组在浅色和深色模式下与保存的参考指纹进行比较。

功能特性

  • 两层颜色 token：原始调色板和语义角色，每个都带有浅色、深色和高对比度数值
  • 通过 dsTypography(_:) 随 Dynamic Type 缩放的排版 token
  • ThemeManager 会跟随系统设置，或应用一个预设主题，或应用由品牌颜色生成的主题；你的 view 用 @Environment(\.dsTheme) 读取它
  • 按钮、文本输入框（包括搜索和 OTP）、开关、复选框、单选框、卡片、徽标、头像、toast 和骨架屏加载指示器
  • ColorContrastUtility 计算 WCAG 对比度；测试会在两种配色方案下对正文文字和实心按钮文字做 WCAG AA 校验
  • ThemeManager 和 DSToastManager 是带有公开初始化方法的 @MainActor @Observable 类，可以被注入和测试
  • 一个 package 同时支持 iOS、macOS、tvOS、watchOS 和 visionOS，没有运行时依赖，以 Swift 6 语言模式构建

快速开始

swift
1import DesignSystemPro
2import SwiftUI
3 
4struct ContentView: View {
5    @State private var notificationsOn = true
6 
7    var body: some View {
8        VStack(spacing: SpacingTokens.Content.comfortable) {
9            Text("Hello, DesignSystemPro")
10                .dsTypography(TypographyTokens.Heading.h2)
11 
12            DSStatusBadge("Ready", variant: .success)
13 
14            DSToggle(isOn: $notificationsOn, label: "Notifications")
15 
16            DSButton("Continue", isFullWidth: true) {
17                notificationsOn.toggle()
18            }
19        }
20        .padding(SpacingTokens.Layout.screenEdge)
21    }
22}

安装

Swift Package Manager

swift
1dependencies: [
2    .package(url: "https://github.com/muhittincamdali/SwiftUI-Design-System-Pro.git", from: "2.0.0")
3],
4targets: [
5    .target(name: "YourApp", dependencies: [
6        .product(name: "DesignSystemPro", package: "SwiftUI-Design-System-Pro")
7    ])
8]

Xcode

text
1https://github.com/muhittincamdali/SwiftUI-Design-System-Pro.git

截图

示例应用浅色模式下的组件界面
示例应用深色模式下的组件界面
浅色模式下渲染的 DSButton 各种变体和尺寸
深色模式下渲染的 DSButton 各种变体和尺寸
浅色模式下的徽标和头像
深色模式下的徽标和头像
浅色模式下的卡片组件
浅色模式下的开关、复选框和单选按钮
深色模式下的 toast 和骨架屏加载指示器

时间线

  1. 仓库以最初的 DSButton 和 DSCard view 开放

  2. 标记 1.0.0；写出了 2.0 所基于的 token、主题引擎和组件代码

  3. 一次精简把大部分源码替换成了占位文件

  4. 重建为 2.0.0：token、主题引擎和组件被恢复、修复，并用 Swift Testing suite 覆盖

相关链接

GitHub 仓库文档SPM: https://github.com/muhittincamdali/SwiftUI-Design-System-Pro.git

相关文章

阅读文章