جميع حزم المصدر المفتوح
واجهة المستخدمSwift

SwiftUI-Design-System-Pro

رموز تصميم (design tokens)، ومحرّك سمات (theme engine)، ومكوّنات SwiftUI مُختبَرة لمنصات Apple

26النجومآخر إصدار: v2.0.0آخر تحديث: 15 أكتوبر 2026
الأنظمة الأساسية:iOS 17macOS 14tvOS 17watchOS 10visionOS 1

الترخيص: MIT

DesignSystemPro حزمة Swift لتطبيقات SwiftUI التي تريد مظهرًا متّسقًا واحدًا دون بنائه من الصفر. تحتوي على رموز تصميم (colors وtypography وspacing وborders وshadows وmotion)، ومحرّك سمات (theme engine) بسمات light وdark وجاهزة (preset) وعلامة تجارية (brand)، وحوالي 40 عرض مكوّن مبنية على هذه الرموز. تحمل كل رمز لون قيم light وdark وhigh-contrast، وتتبع الطباعة (typography) Dynamic Type، ويقارن اختبار رسم (rendering test) كل مجموعة مكوّنات في الوضعين الفاتح والداكن بـ fingerprints مرجعية مخزَّنة.

الميزات

  • رموز ألوان بطبقتين: لوحة أساسية (primitive palette) وأدوار معنوية (semantic roles)، كل منها بقيم light وdark وhigh-contrast
  • رموز طباعة (typography) تتكيّف مع Dynamic Type عبر dsTypography(_:)
  • يتبع ThemeManager النظام أو يطبّق سمة جاهزة أو سمة مُولَّدة من ألوان العلامة التجارية؛ وتقرأها عروضك الخاصة بواسطة @Environment(\.dsTheme)
  • أزرار، وحقول نصية (بما يشمل البحث وOTP)، ومفاتيح تبديل (toggles)، وخانات اختيار (checkboxes)، وأزرار راديو (radios)، وبطاقات، وبادجات، وصور رمزية (avatars)، وtoasts، ومؤشرات تحميل skeleton
  • تحسب ColorContrastUtility نسب تباين WCAG؛ وتفحص الاختبارات نص المتن (body text) وتسميات الأزرار المملوءة (filled-button) مقابل WCAG AA في كلا نظامَي الألوان
  • ThemeManager وDSToastManager صنفان (classes) من نوع @MainActor @Observable بمُنشِئات (initializers) عامة، بحيث يمكن حقنها (injected) واختبارها
  • حزمة واحدة لـ 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 مرسومة في الوضع الداكن
بادجات وصور رمزية في الوضع الفاتح
بادجات وصور رمزية في الوضع الداكن
مكوّنات البطاقات في الوضع الفاتح
مفاتيح التبديل وخانات الاختيار وأزرار الراديو في الوضع الفاتح
الـ toasts ومؤشرات التحميل skeleton في الوضع الداكن

الجدول الزمني

  1. افتُتح المستودع بأوّل عروض DSButton وDSCard

  2. وُسم 1.0.0؛ وكُتب كود الرموز ومحرّك السمات والمكوّنات الذي تقوم عليه 2.0

  3. استبدل تنظيف معظم المصادر بملفات placeholder

  4. أُعيد البناء كـ 2.0.0: استُعيدت الرموز ومحرّك السمات والمكوّنات، وأُصلحت، وغُطّيت بحزم اختبارات Swift Testing

الروابط

مقالة ذات صلة

قراءة المقالة