Linking models to assets on Swift Playgrounds for iPad (no Xcode) -- iOS App Dev Tutorials

Question

StackOverflow. This is my first post. Please excuse any issues with the format.

I've been trying to teach myself some iOS development in order to create an app to help me at work (I'm a farmer). I do not own a Mac computer and am not able to get one currently, which means no Xcode, but I do have an iPad. Recently, Apple made it possible to develop and publish apps from iPad on Swift Playgrounds.

I scoured the internet for Playgrounds-specific tutorials and didn't find a lot of stuff, I guess because the functionality is fairly new. The best SwiftUI tutorials I found come from Apple's own iOS App Dev Tutorials. I'm now working through the code for Scrumdinger and I ran into a problem with colors that were defined within an Assets folder in Xcode from .json files.

Please, refer to this structure for my question:

import Foundation

struct DailyScrum {
    var title: String
    var attendees: [String]
    var lengthInMinutes: Int
    var theme: Theme
}

extension DailyScrum {
    static let sampleData: [DailyScrum] =
    [
        DailyScrum(title: "Design", attendees: ["Cathy", "Daisy", "Simon", "Jonathan"], lengthInMinutes: 10, theme: .yellow),
        DailyScrum(title: "App Dev", attendees: ["Katie", "Gray", "Euna", "Luis", "Darla"], lengthInMinutes: 5, theme: .orange),
        DailyScrum(title: "Web Dev", attendees: ["Chella", "Chris", "Christina", "Eden", "Karla", "Lindsey", "Aga", "Chad", "Jenn", "Sarah"], lengthInMinutes: 5, theme: .poppy)
    ]
}

This piece of code from Apple's tutorial

import SwiftUI

struct CardView: View {
    let scrum: DailyScrum
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(scrum.title)
                .font(.headline)
            Spacer()
            HStack {
                Label("\(scrum.attendees.count)", systemImage: "person.3")
                Spacer()
                Label("\(scrum.lengthInMinutes)", systemImage: "clock")
                    .labelStyle(.trailingIcon)
            }
            .font(.caption)
        }
        .padding()
        .foregroundColor(scrum.theme.accentColor)
    }
}

struct CardView_Previews: PreviewProvider {
    static var scrum = DailyScrum.sampleData[0]
    static var previews: some View {
        CardView(scrum: scrum)
            .background(scrum.theme.mainColor)
            .previewLayout(.fixed(width: 400, height: 60))
    }
}

is supposed to generate this preview on Xcode. However, this is what I get on iPad Playgrounds. Both the color and the preview size are off. I don't really care about the preview size, because it doesn't affect the app (this card will be shown into a list and have the appropriate size later), but I'd like to get the color right.

The structure Theme that's used to specify the colors is defined in the file Theme.swift:

import SwiftUI

enum Theme: String {
    case bubblegum
    case buttercup
    case indigo
    case lavender
    case magenta
    case navy
    case orange
    case oxblood
    case periwinkle
    case poppy
    case purple
    case seafoam
    case sky
    case tan
    case teal
    case yellow
    
    var accentColor: Color {
        switch self {
        case .bubblegum, .buttercup, .lavender, .orange, .periwinkle, .poppy, .seafoam, .sky, .tan, .teal, .yellow: return .black
        case .indigo, .magenta, .navy, .oxblood, .purple: return .white
        }
    }
    var mainColor: Color {
        Color(rawValue)
    }
}

And the specified colors in the enumeration are .json Assets in Xcode with this folder structure. However, the online tutorial doesn't specify how Xcode knows to look for them without any explicit references to these folders or .json files in the code for Theme.swift.

I tried recreating the same folder structure within Playgrounds (which was painful since you can't import folders), but my output didn't change.

So here are my questions:

1. How does Xcode link assets to custom data models (such as the enum in Theme.swift) that don't specifically reference it? Can I reproduce this with just code in Swift Playgrounds on iPad?
2. If I can't do that in Swift Playgrounds, do I have an alternative for creating custom colors and having them work with the enum in Theme.swift?

Thank you very much.

Answer 1

Following @loremipsum's suggestion, I replaced the mainColor property of the Theme enumeration with

var mainColor: Color {
    switch self {
        case .bubblegum: return Color(red: 0.933, green: 0.502, blue: 0.820)
        case .buttercup: return Color(red: 1.000, green: 0.945, blue: 0.588)
        case .indigo: return Color(red: 0.212, green: 0.000, blue: 0.443)
        case .lavender: return Color(red: 0.812, green: 0.808, blue: 1.000)
        case .magenta: return Color(red: 0.647, green: 0.075, blue: 0.467)
        case .navy: return Color(red: 0.000, green: 0.078, blue: 0.255)
        case .orange: return Color(red: 1.000, green: 0.545, blue: 0.259)
        case .oxblood: return Color(red: 0.290, green: 0.027, blue: 0.043)
        case .periwinkle: return Color(red: 0.525, green: 0.510, blue: 1.000)
        case .poppy: return Color(red: 1.000, green: 0.369, blue: 0.369)
        case .purple: return Color(red: 0.569, green: 0.294, blue: 0.949)
        case .seafoam: return Color(red: 0.796, green: 0.918, blue: 0.898)
        case .sky: return Color(red: 0.431, green: 0.573, blue: 1.000)
        case .tan: return Color(red: 0.761, green: 0.608, blue: 0.494)
        case .teal: return Color(red: 0.133, green: 0.561, blue: 0.620)
        case .yellow: return Color(red: 1.000, green: 0.875, blue: 0.302)
    }
}

copying the RGB values for the themes from the .json asset files. This has fixed the problem and now colors appear as intended.

What I don't understand is why SwiftUI couldn't process Color(rawValue) for the example data used in CardView(), which was DailyScrum(title: "Design", attendees: ["Cathy", "Daisy", "Simon", "Jonathan"], lengthInMinutes: 10, theme: .yellow). Sure, .periwinkle might not be previously defined, but .yellow certainly is. In fact, if I rewrite mainColor from Color(rawValue) to Color(.yellow), I get all cards colored yellow without having to pass any RGB value.

So what's Color(rawValue) getting from the enumeration that it's unable to process .yellow when passed from rawValue?