Prism — Design Theme System

Installation

// Package.swift
.package(url: "https://github.com/your-org/Prism", from: "1.0.0")

// Target dependency
.product(name: "Prism", package: "Prism")

Setup

Apply .prismTheme(_:) at the root of the view hierarchy (typically in the App body):

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .prismTheme(.koreanAesthetic)
                // Optional: enable Liquid Glass rendering (iOS 26+)
                // .prismTheme(.neo, liquidGlass: true)
        }
    }
}

Access the active theme anywhere with @Environment(\.prismTheme):

@Environment(\.prismTheme) var theme

Token System

Every theme exposes 10 token groups through PrismThemeProtocol:

Minimal usage pattern:

struct PriceTag: View {
    @Environment(\.prismTheme) var theme

    var body: some View {
        Text("$9.99")
            .font(theme.typography.labelMedium)
            .foregroundStyle(theme.colors.primary)
            .padding(theme.spacing.sm)
            .background(theme.colors.surface)
            .clipShape(RoundedRectangle(cornerRadius: theme.cornerRadius.badge))
    }
}

Built-in Themes

Pick variant explicitly:

.prismTheme(.neo)                          // defaults to .auto (system light/dark)
.prismTheme(.neo.variant(.dark))           // force dark
.prismTheme(.neo.variant(.light))
.prismTheme(.neo.variant(.tinted))         // tinted variant if available

Custom Themes

Conform a struct to PrismThemeProtocol and supply all 10 token groups:

struct MinimalTheme: PrismThemeProtocol {
    var family: PrismThemeFamily { .custom("Minimal") }
    var variant: PrismVariant { .light }
    var colors: any PrismColorTokens { MinimalColors() }
    var typography: any PrismTypographyTokens { MinimalTypography() }
    var spacing: any PrismSpacingTokens { DefaultSpacing() }
    var cornerRadius: any PrismCornerRadiusTokens { DefaultCornerRadius() }
    var elevation: any PrismElevationTokens { DefaultElevation() }
    var borders: any PrismBorderTokens { DefaultBorders() }
    var opacity: any PrismOpacityTokens { DefaultOpacity() }
    var iconSizes: any PrismIconSizeTokens { DefaultIconSizes() }
    var animations: any PrismAnimationTokens { DefaultAnimations() }
    var haptics: any PrismHapticTokens { DefaultHaptics() }
    var liquidGlass: Bool { false }
}

Apply with .prismTheme(MinimalTheme()).

Components

Button Style

Button("Submit") { submit() }
    .buttonStyle(PrismButtonStyle())       // inherits active theme
    .buttonStyle(PrismButtonStyle(theme: myCustomTheme))

Loading Indicators

PrismSpinner()                             // ring/dots/pulse; reduce-motion aware
PrismProgressBar(value: $progress, config: PrismProgressBarConfig())
PrismProgressCircle(value: $progress)
PrismSkeletonView { placeholder }
PrismLoadingOverlay(isPresented: $loading) { content }

// View modifier shorthand:
myView.prismLoadingOverlay(isPresented: $loading)

Text Style

Text("Hello")
    .prismText(.titleLarge)                // uses active theme typography + color
    .prismText(.bodyMedium, color: theme.colors.secondary)

Overlay / Sheet System

HUD (Toast)

// Show from anywhere:
PrismHUD.show(.success, message: "Saved!")
PrismHUD.show(.error, message: "Failed", duration: 3.0)
PrismHUD.dismiss()

// Register host in root view:
myRootView.prismHUD()

HUD types: .success / .error / .warning / .info / .custom(icon:message:)

Alert

myView.prismAlert(
    isPresented: $showAlert,
    alert: PrismAlert(
        title: "Delete?",
        message: "This cannot be undone.",
        actions: [
            PrismAlertAction("Delete", role: .destructive) { delete() },
            PrismAlertAction("Cancel", role: .cancel) { }
        ]
    )
)

Popover

myView.prismPopover(
    isPresented: $showPopover,
    content: { Text("Popover body") },
    configuration: PrismPopoverConfiguration(placement: .bottom)
)

Bottom Sheet

myView.prismBottomSheet(
    isPresented: $showSheet,
    detents: [.collapsed, .fraction(0.5), .expanded],
    content: { sheetBody }
)

Center Sheet

myView.prismCenterSheet(
    isPresented: $showDialog,
    content: { dialogBody },
    config: PrismCenterSheetConfig(role: .dialog)
)

Transitions (.prism.)

All Prism transitions are accessed via .prism on AnyTransition:

myView.transition(.prism.anvil)
myView.transition(.prism.pop(.orange))
myView.transition(.prism.vanish)
myView.transition(.prism.blinds(slatWidth: 12, style: .venetian))

Asymmetric example:

row.transition(
    .asymmetric(
        insertion: .prism.boing(edge: .leading),
        removal: .prism.vanish
    )
)

Change Effects (.prismEffect)

Trigger animations on every value change using .prismEffect(_:value:isEnabled:):

likeButton
    .prismEffect(.spray { Image(systemName: "heart.fill") }, value: likes)

saveButton
    .prismEffect(.shine.delay(0.5), value: hasSaved, isEnabled: hasSaved)

All Effects

// Particle bursts
.prismEffect(.spray(origin: .center, layer: .local) { star }, value: x)
.prismEffect(.rise { confetti }, value: x)

// Rings
.prismEffect(.pulse(shape: Circle(), count: 2), value: x)
.prismEffect(.pulse(shape: Circle(), style: .tint, count: 1), value: x)

// Motion
.prismEffect(.jump(height: 20), value: x)
.prismEffect(.shake, value: x)
.prismEffect(.shake(rate: .fast), value: x)
.prismEffect(.spin, value: x)
.prismEffect(.spin(axis: (0, 1, 0), rate: .fast), value: x)

// Visual
.prismEffect(.shine, value: x)
.prismEffect(.shine(duration: 2.0), value: x)
.prismEffect(.shine(angle: .degrees(90), duration: 1.5), value: x)

// Haptic (iOS only)
.prismEffect(.feedback(hapticNotification: .success), value: x)
.prismEffect(.feedback(hapticImpact: .medium), value: x)
.prismEffect(.feedbackHapticSelection, value: x)

// Sound (iOS only)
.prismEffect(.feedback(PrismSoundEffect("ding", bundle: .main)), value: x)

// Delay
.prismEffect(.shine.delay(1.0), value: x)

Particle Layer

Lift particles above clipping ancestors:

List { rows }
    .prismParticleLayer(name: "list")

// In the row:
row.prismEffect(
    .spray(layer: .named("list")) { star },
    value: count
)

Supporting Types

Elevations

Apply theme-aware shadows with .prismElevation(_:):

card.prismElevation(theme.elevation.card)

ElevationLevel carries radius, x, y, opacity, and color parameters.

Haptics

Use PrismHaptics.trigger(_:) (or triggerHaptic() inside Prism components):

PrismHaptics.trigger(.impact)
PrismHaptics.trigger(.notification)
PrismHaptics.trigger(.selection)

Common Mistakes

References

• Workspace.md
• PACKAGE_OVERVIEW.md
• Pow README