Todos los paquetes de código abierto
InterfazSwift

SwiftUI-Design-System-Pro

Design tokens, un theme engine y componentes SwiftUI testeados para plataformas Apple

26EstrellasÚltima versión: v2.0.0Actualizado: 15 de octubre de 2026
Plataformas:iOS 17macOS 14tvOS 17watchOS 10visionOS 1

Licencia: MIT

DesignSystemPro es un paquete Swift para apps SwiftUI que quieren un aspecto consistente sin construirlo desde cero. Tiene design tokens (color, tipografía, spacing, borders, sombras, motion), un theme engine con temas light, dark, preset y de marca, y unas 40 vistas de componente construidas sobre los tokens. Cada color token lleva valores light, dark y high-contrast, la tipografía sigue Dynamic Type, y un test de renderizado compara cada grupo de componentes en modo light y dark con fingerprints de referencia guardados.

Características

  • Color tokens en dos capas: una paleta primitiva y roles semánticos, cada uno con valores light, dark y high-contrast
  • Tokens de tipografía que escalan con Dynamic Type a través de dsTypography(_:)
  • ThemeManager sigue al sistema o aplica un preset o un tema generado a partir de los colores de marca; tus vistas lo leen con @Environment(\.dsTheme)
  • Buttons, text fields (incluidos search y OTP), toggles, checkboxes, radios, cards, badges, avatars, toasts y skeleton loaders
  • ColorContrastUtility calcula los ratios de contraste WCAG; los tests comprueban el texto de cuerpo y las etiquetas de los botones filled frente a WCAG AA en ambos color schemes
  • ThemeManager y DSToastManager son clases @MainActor @Observable con initializers públicos, así que se pueden inyectar y testear
  • Un solo paquete para iOS, macOS, tvOS, watchOS y visionOS sin dependencias en tiempo de ejecución, compilado en el modo de lenguaje Swift 6

Inicio rápido

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}

Instalación

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

Capturas de pantalla

Pantalla de componentes de la app de ejemplo en modo claro
Pantalla de componentes de la app de ejemplo en modo oscuro
Variantes y tamaños de DSButton renderizados en modo claro
Variantes y tamaños de DSButton renderizados en modo oscuro
Badges y avatars en modo claro
Badges y avatars en modo oscuro
Componentes de card en modo claro
Toggles, checkboxes y radio buttons en modo claro
Toasts y skeleton loaders en modo oscuro

Cronología

  1. Repositorio abierto con las primeras vistas DSButton y DSCard

  2. 1.0.0 etiquetada; se escribió el código de tokens, theme engine y componentes en el que se basa 2.0

  3. Una limpieza sustituyó la mayoría de los fuentes por archivos placeholder

  4. Reconstruido como 2.0.0: tokens, theme engine y componentes recuperados, corregidos y cubiertos por suites de Swift Testing

Enlaces

Repositorio de GitHubDocumentaciónSPM: https://github.com/muhittincamdali/SwiftUI-Design-System-Pro.git

Artículo relacionado

Leer el artículo