DesignSystem

SwiftUI向けの型安全で拡張可能なデザインシステム

特徴

• 3層トークンシステム - Primitive → Semantic → Component の明確な階層
• 型安全 - プロトコルベース設計により拡張性が高い
• 7種類のビルトインテーマ - Default、Ocean、Forest、Sunset、PurpleHaze、Monochrome、HighContrast
• ライト/ダークモード対応 - 全テーマでシームレスなモード切り替え
• 豊富なコンポーネント - Button、Card、Chip、TextField、FAB、Snackbar、ProgressBar など

インストール

// Package.swift
dependencies: [
    .package(url: "https://github.com/no-problem-dev/swift-design-system.git", .upToNextMajor(from: "1.0.0"))
]

クイックスタート

テーマの適用

@main
struct MyApp: App {
    @State private var themeProvider = ThemeProvider()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .theme(themeProvider)
        }
    }
}

デザイントークンの使用

struct MyView: View {
    @Environment(\.colorPalette) var colors
    @Environment(\.spacingScale) var spacing

    var body: some View {
        VStack(spacing: spacing.lg) {
            Text("見出し")
                .typography(.headlineLarge)
                .foregroundColor(colors.primary)
            Text("本文")
                .typography(.bodyMedium)
                .foregroundColor(colors.onSurface)
        }
        .padding(spacing.xl)
        .background(colors.surface)
    }
}

コンポーネント

// ボタン
Button("保存") { save() }
    .buttonStyle(.primary)
    .buttonSize(.large)

// カード
Card(elevation: .level2) {
    Text("カードの内容").typography(.bodyMedium)
}

// テキストフィールド
DSTextField("メールアドレス", text: $email, placeholder: "example@email.com", leadingIcon: "envelope")

テーマの切り替え

// ビルトインテーマに切り替え
themeProvider.switchToTheme(id: "ocean")

// モードを切り替え（system → light → dark → system）
themeProvider.toggleMode()

ドキュメント

詳細なガイドと API リファレンスは DocC ドキュメントを参照してください。

要件

• iOS 17.0+ / macOS 14.0+
• Swift 6.2+
• Xcode 16.0+

ライセンス

MIT License - 詳細は LICENSE を参照

リンク

• 完全なドキュメント
• Issue報告
• ディスカッション
• リリースプロセス