iOS 16.2 colors

GenerateColors.swift

import Framer

func testGenerateColors() {
    struct CC {
        let name: String
        let color: UIColor
    }

    let colors: [CC] = [
        CC(name: "systemRed", color: UIColor.systemRed),
        CC(name: "systemGreen", color: UIColor.systemGreen),
        CC(name: "systemBlue", color: UIColor.systemBlue),
        CC(name: "systemOrange", color: UIColor.systemOrange),
        CC(name: "systemYellow", color: UIColor.systemYellow),
        CC(name: "systemPink", color: UIColor.systemPink),
        CC(name: "systemPurple", color: UIColor.systemPurple),
        CC(name: "systemTeal", color: UIColor.systemTeal),
        CC(name: "systemIndigo", color: UIColor.systemIndigo),
        CC(name: "systemBrown", color: UIColor.systemBrown),
        CC(name: "systemMint", color: UIColor.systemMint),
        CC(name: "systemCyan", color: UIColor.systemCyan),
        CC(name: "systemGray", color: UIColor.systemGray),
        CC(name: "systemGray2", color: UIColor.systemGray2),
        CC(name: "systemGray3", color: UIColor.systemGray3),
        CC(name: "systemGray4", color: UIColor.systemGray4),
        CC(name: "systemGray5", color: UIColor.systemGray5),
        CC(name: "systemGray6", color: UIColor.systemGray6),
        CC(name: "tintColor", color: UIColor.tintColor),
        CC(name: "label", color: UIColor.label),
        CC(name: "secondaryLabel", color: UIColor.secondaryLabel),
        CC(name: "tertiaryLabel", color: UIColor.tertiaryLabel),
        CC(name: "quaternaryLabel", color: UIColor.quaternaryLabel),
        CC(name: "link", color: UIColor.link),
        CC(name: "placeholderText", color: UIColor.placeholderText),
        CC(name: "separator", color: UIColor.separator),
        CC(name: "opaqueSeparator", color: UIColor.opaqueSeparator),
        CC(name: "systemBackground", color: UIColor.systemBackground),
        CC(name: "secondarySystemBackground", color: UIColor.secondarySystemBackground),
        CC(name: "tertiarySystemBackground", color: UIColor.tertiarySystemBackground),
        CC(name: "systemGroupedBackground", color: UIColor.systemGroupedBackground),
        CC(name: "secondarySystemGroupedBackground", color: UIColor.secondarySystemGroupedBackground),
        CC(name: "tertiarySystemGroupedBackground", color: UIColor.tertiarySystemGroupedBackground),
        CC(name: "systemFill", color: UIColor.systemFill),
        CC(name: "secondarySystemFill", color: UIColor.secondarySystemFill),
        CC(name: "tertiarySystemFill", color: UIColor.tertiarySystemFill),
        CC(name: "quaternarySystemFill", color: UIColor.quaternarySystemFill),
        CC(name: "lightText", color: UIColor.lightText),
        CC(name: "darkText", color: UIColor.darkText),
        CC(name: "groupTableViewBackground", color: UIColor.groupTableViewBackground),
    ]

    var idx = 0
    let frames: [BlueprintFrame] = colors.flatMap { cc in
        defer { idx += 1 }

        let yOffset: CGFloat = CGFloat(idx) * 40.0
        let yDistance: CGFloat = 20.0 + CGFloat(idx) * 20

        let sample = BlueprintFrame(
            x: 10,
            y: 10.0 + yOffset + yDistance,
            width: 280,
            height: 40,
            style: BlueprintFrameStyle(
                lineWidth: 0,
                lineColor: .clear,
                fillColor: cc.color,
                cornerRadius: 5,
                opacity: 1
            ),
            content: nil,
            annotation: BlueprintFrameAnnotation(
                text: cc.name,
                style: BlueprintFrameAnnotationStyle(
                    size: .normal,
                    position: .top,
                    alignment: .leading
                )
            )
        )

        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 1
        cc.color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        let rInt = Int(red * 255)
        let gInt = Int(green * 255)
        let bInt = Int(blue * 255)

        let description = BlueprintFrame(
            x: sample.x + sample.width + 10,
            y: sample.y,
            width: 90,
            height: 40,
            style: BlueprintFrameStyle(lineWidth: 0, lineColor: .clear, fillColor: .clear, cornerRadius: 0, opacity: 1),
            content: BlueprintFrameContent(
                text: "RGB: \(rInt), \(gInt), \(bInt)",
                textColor: UIColor.label,
                font: .systemFont(ofSize: 8),
                verticalAlignment: .center
            )
        )

        return [sample, description]
    }


    let size = CGSize(width: 400, height: frames.last!.y + frames.last!.height + 10)
    let canvas = FramerCanvas.create(size: size)
    canvas.draw(
        blueprint: Blueprint(
            id: "bg",
            frames: [.init(x: 0, y: 0, width: size.width, height: size.height, style: .init(fillColor: .white, opacity: 1))])
    )
    canvas.draw(
        blueprint: Blueprint(id: "colors", frames: frames)
    )

    let image = canvas.image
    print(image)
}

iOS 16.2 colors (Light Mode | Dark Mode)