English | 日本語

DesignSystem

Type-safe and extensible design system for SwiftUI

Features

• 3-layer token system — Clear hierarchy: Primitive → Semantic → Component
• Type-safe — Protocol-based design for high extensibility
• 7 built-in themes — Default, Ocean, Forest, Sunset, PurpleHaze, Monochrome, HighContrast
• Light/Dark mode support — Seamless mode switching across all themes
• Rich component library — Button, Card, Chip, TextField, FAB, Snackbar, ProgressBar, and more

Installation

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

Quick Start

Applying a Theme

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

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

Using Design Tokens

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

    var body: some View {
        VStack(spacing: spacing.lg) {
            Text("Heading")
                .typography(.headlineLarge)
                .foregroundStyle(colors.primary)
            Text("Body")
                .typography(.bodyMedium)
                .foregroundStyle(colors.onSurface)
        }
        .padding(spacing.xl)
        .background(colors.surface)
    }
}

Components

// Button
Button("Save") { save() }
    .buttonStyle(.primary)
    .buttonSize(.large)

// Card
Card(elevation: .level2) {
    Text("Card content").typography(.bodyMedium)
}

// Text Field
DSTextField("Email", text: $email, placeholder: "example@email.com", leadingIcon: "envelope")

Switching Themes

// Switch to a built-in theme
themeProvider.switchToTheme(id: "ocean")

// Cycle mode (system → light → dark → system)
themeProvider.toggleMode()

Documentation

See the DocC documentation for detailed guides and API reference.

Requirements

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

License

MIT License — see LICENSE

Links

• Full Documentation
• Report Issues
• Discussions
• Release Process