iOS System Colors

systemcolors.swift

import SwiftUI

struct ContentView: View {
    struct ColorGroup: Hashable {
        let colors: [ColorInfo]
        let name: String
        let description: String
    }

    struct ColorInfo: Hashable {
        let color: Color
        let name: String
    }

    let colorGroups = [
        ColorGroup(
            colors: [
                ColorInfo(color: .primary, name: "primary"),
                ColorInfo(color: .secondary, name: "secondary"),
                ColorInfo(color: Color(uiColor: .tertiaryLabel), name: "tertiary"),
                ColorInfo(color: Color(uiColor: .tertiaryLabel), name: "quaternary"),
                ColorInfo(color: Color(uiColor: .placeholderText), name: "placeholder")
            ],
            name: "Labels",
            description: "Foreground colors for static text and related elements."
        ),

        ColorGroup(
            colors: [
                ColorInfo(color: Color(uiColor: .systemBackground), name: "primary"),
                ColorInfo(color: Color(uiColor: .secondarySystemBackground), name: "secondary"),
                ColorInfo(color: Color(uiColor: .tertiarySystemBackground), name: "tertiary"),

                ColorInfo(color: Color(uiColor: .systemGroupedBackground), name: "primaryGrouped"),
                ColorInfo(color: Color(uiColor: .secondarySystemGroupedBackground), name: "secondaryGrouped"),
                ColorInfo(color: Color(uiColor: .tertiarySystemGroupedBackground), name: "tertiaryGrouped")
            ],
            name: "Backgrounds",
            description:
            """
            We provide two design systems (also known as "stacks") for structuring an iOS app's backgrounds.

            Each stack has three "levels" of background colors. The first color is intended to be the
            main background, farthest back. Secondary and tertiary colors are layered on top
            of the main background, when appropriate.

            Inside of a discrete piece of UI, choose a stack, then use colors from that stack.
            We do not recommend mixing and matching background colors between stacks.
            The foreground colors above are designed to work in both stacks.

            1. systemBackground: use this stack for views with standard table views, and designs which have a white primary background in light mode.
            2. systemGroupedBackground: use this stack for views with grouped content, such as grouped tables and platter-based designs. These are like grouped table views, but you may use these colors in places where a table view wouldn't make sense.
            """
        ),

        ColorGroup(
            colors: [
                ColorInfo(color: Color(uiColor: .separator), name: "separator"),
                ColorInfo(color: Color(uiColor: .opaqueSeparator), name: "opaqueSeparator")
            ],
            name: "Separators",
            description:
            """
            Foreground colors for separators (thin border or divider lines).
            - `separatorColor` may be partially transparent, so it can go on top of any content.
            - `opaqueSeparatorColor` is intended to look similar, but is guaranteed to be opaque, so it will
            - completely cover anything behind it. Depending on the situation, you may need one or the other.
            """
        ),

        ColorGroup(
            colors: [
                ColorInfo(color: Color(uiColor: .systemFill), name: "primary"),
                ColorInfo(color: Color(uiColor: .secondarySystemFill), name: "secondary"),
                ColorInfo(color: Color(uiColor: .tertiarySystemFill), name: "tertiary"),
                ColorInfo(color: Color(uiColor: .quaternarySystemFill), name: "quaternary")
            ],
            name: "Fills",
            description:
            """
            Fill colors for UI elements. These are meant to be used over the background colors, since their alpha component is less than 1.

            1. systemFillColor is appropriate for filling thin and small shapes. Example: The track of a slider.
            2. secondarySystemFillColor is appropriate for filling medium-size shapes. Example: The background of a switch.
            3. tertiarySystemFillColor is appropriate for filling large shapes. Examples: Input fields, search bars, buttons.
            4. quaternarySystemFillColor is appropriate for filling large areas containing complex content. Example: Expanded table cells.
            """
        ),

        ColorGroup(
            colors: [
                ColorInfo(color: Color(uiColor: .systemGray), name: "gray"),
                ColorInfo(color: Color(uiColor: .systemGray2), name: "gray2"),
                ColorInfo(color: Color(uiColor: .systemGray3), name: "gray3"),
                ColorInfo(color: Color(uiColor: .systemGray4), name: "gray4"),
                ColorInfo(color: Color(uiColor: .systemGray5), name: "gray5"),
                ColorInfo(color: Color(uiColor: .systemGray6), name: "gray6")
            ],
            name: "Grays",
            description:
            """
            Shades of gray. systemGray is the base gray color.

            The numbered variations, systemGray2 through systemGray6, are grays which increasingly trend away from systemGray and in the direction of systemBackgroundColor.

            In UIUserInterfaceStyleLight: systemGray1 is slightly lighter than systemGray, systemGray2 is lighter than that, and so on.
            UIUserInterfaceStyleDark: systemGray1 is slightly darker than systemGray, systemGray2 is darker than that, and so on.
            """
        )
    ]

    var body: some View {
        NavigationView {
            ScrollView {
                ForEach(colorGroups, id: \.self) { group in
                    VStack(alignment: .leading) {
                        Text(group.name)
                            .font(.headline)
                            .padding(.bottom, 4)
                        Text(group.description)
                            .font(.caption)
                            .foregroundColor(.secondary)

                        LazyVGrid(
                            columns: [
                                GridItem(.flexible()),
                                GridItem(.flexible()),
                            ],
                            alignment: .center,
                            spacing: 0
                        ) {
                            ForEach(group.colors, id: \.self) { colorInfo in
                                VStack {
                                    Rectangle()
                                        .frame(height: 40)
                                        .foregroundColor(colorInfo.color)
                                        .border(Color.red)
                                    Text(colorInfo.name)
                                        .font(.caption2)
                                        .foregroundColor(.secondary)
                                }

                                VStack {
                                    Rectangle()
                                        .frame(height: 40)
                                        .foregroundColor(colorInfo.color)
                                        .border(Color.red)
                                    Text(colorInfo.name + " dark")
                                        .font(.caption2)
                                        .foregroundColor(.secondary)
                                }
                                .padding(8)
                                .background(Color(uiColor: .systemBackground))
                                .colorScheme(.dark)
                            }
                        }
                    }
                    .padding()
                }
            }
            .navigationBarHidden(true)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}