🌀system colors

swift⟩ custom ⟩ extension ⟩ Color ⟩ system colors

SwiftUI╱UIKit system colors.

🌀 Color

// ──────────────────────────────────────────────────────────────────
// 2022.01.18 * (v.1)
// 2022.01.31 r `others` renamed to `contentColors` 
//            / `standardColors` reordered by hue
// ──────────────────────────────────────────────────────────────────

import SwiftUI

// extension for [Color]
extension Array where Element == Color {
    
    // SwiftUI: Standard Colors
    public static var standardColors: [Color] { Color.standardColors }
    
    // UIColor: UI Element Colors
    public static var labelColors: [Color] { Color.labelColors }
    public static var fillColors : [Color] { Color.fillColors }
    public static var backgrounds: [Color] { Color.backgrounds }
    public static var groupedContentBackgrounds: [Color] { Color.groupedContentBackgrounds }
    public static var contentColors: [Color] { Color.others }
    
    // UIColor: System Colors
    public static var grayscale: [Color] { Color.grayscale }
}

// --------------------------------
//     SwiftUI Standard Colors
// --------------------------------

extension Color {
    public static var standardColors: [Color] {
        [
            .red, .orange, .yellow, .green, 
            .mint, .teal, .cyan, .blue, 
            .indigo, .purple, .pink,
            .brown, .gray, 
            .white, .black, .clear
        ]
    }
}

// --------------------------------
//     UIColor: Standard Colors
// --------------------------------

extension Color {
    
    // color array
    public static var grayscale: [Color] {
        [.gray1, .gray2, .gray3, .gray4, .gray5, .gray6]
    }
    
    // ------------------
    //     grayscale
    // ------------------
    
    public static var gray1: Color { Color(uiColor: .systemGray) }
    public static var gray2: Color { Color(uiColor: .systemGray2) }
    public static var gray3: Color { Color(uiColor: .systemGray3) }
    public static var gray4: Color { Color(uiColor: .systemGray4) }
    public static var gray5: Color { Color(uiColor: .systemGray5) }
    public static var gray6: Color { Color(uiColor: .systemGray6) }
}

// -----------------------------------
//     UIColor: UI Element Colors
// -----------------------------------

extension Color {
    
    // color arrays
    public static var labelColors: [Color] { [.label, .label2, .label3, .label4] }
    public static var fillColors : [Color] { [.fill, .fill2, .fill3, .fill4] }
    public static var backgrounds: [Color] { [.bg, .bg2, .bg3] }
    public static var groupedContentBackgrounds: [Color] { 
        [.groupedBG, .groupedBG2, .groupedBG3] 
    }
    public static var others: [Color] { 
        [.placeholder, .separator, .separator2, .link, .darkText, .lightText] 
    }
    
    // --------------------
    //     label colors
    // --------------------
    
    public static var label : Color { Color(uiColor: .label) }
    public static var label2: Color { Color(uiColor: .secondaryLabel) }
    public static var label3: Color { Color(uiColor: .tertiaryLabel) }
    public static var label4: Color { Color(uiColor: .quaternaryLabel) }
    
    // -------------------
    //     fill colors
    // -------------------
    
    public static var fill : Color { Color(uiColor: .systemFill) }
    public static var fill2: Color { Color(uiColor: .secondarySystemFill) }
    public static var fill3: Color { Color(uiColor: .tertiarySystemFill) }
    public static var fill4: Color { Color(uiColor: .quaternarySystemFill) }
    
    // --------------------------
    //     content background
    // --------------------------
    
    public static var bg : Color { Color(uiColor: .systemBackground) }
    public static var bg2: Color { Color(uiColor: .secondarySystemBackground) }
    public static var bg3: Color { Color(uiColor: .tertiarySystemBackground) }
    
    // ----------------------------------
    //     grouped content background
    // ----------------------------------
    
    public static var groupedBG : Color { Color(uiColor: .systemGroupedBackground) }
    public static var groupedBG2: Color { Color(uiColor: .secondarySystemGroupedBackground) }
    public static var groupedBG3: Color { Color(uiColor: .tertiarySystemGroupedBackground) }
    
    // ----------------------
    //     content colors
    // ----------------------
    
    public static var placeholder: Color { Color(uiColor: .placeholderText) }
    public static var separator  : Color { Color(uiColor: .separator) }        // tranparent
    public static var separator2 : Color { Color(uiColor: .opaqueSeparator) }  // opaque 
    public static var link       : Color { Color(uiColor: .link) }
    public static var darkText   : Color { Color(uiColor: .darkText) }
    public static var lightText  : Color { Color(uiColor: .lightText) }
}

// ---------------------
//     Color + .name
// ---------------------

extension Color {
    public var name: String { 
        switch self {
        
        // -----------------------------------
        //     UIColor: UI Element Colors
        // -----------------------------------
        
        // lable colors
        case .label : return "label"
        case .label2: return "label2"
        case .label3: return "label3"
        case .label4: return "label4"
            
        // fill colors
        case .fill : return "fill"
        case .fill2: return "fill2"
        case .fill3: return "fill3"
        case .fill4: return "fill4"
            
        // content background colors
        case .bg : return "bg"
        case .bg2: return "bg2"
        case .bg3: return "bg3"
            
        // grouped content backgrounds
        case .groupedBG : return "groupedBG"
        case .groupedBG2: return "groupedBG2"
        case .groupedBG3: return "groupedBG3"
            
        // content colors
        case .placeholder: return "placeholder"
        case .separator  : return "separator"
        case .separator2 : return "separator2"
        case .link       : return "link"
        case .darkText   : return "darkText"
        case .lightText  : return "lightText"
            
        // --------------------------------
        //     UIColor: Standard Colors
        // --------------------------------
        
        // grayscale
        case .gray1: return "gray1"
        case .gray2: return "gray2"
        case .gray3: return "gray3"
        case .gray4: return "gray4"
        case .gray5: return "gray5"
        case .gray6: return "gray6"
            
        // ----------------------------
        //     other unnamed colors
        // ----------------------------
        
        // default
        default: return "\(self)"
        }
    }
}

🌇 其他顏色

standard colors (light mode)

👥 相關

• Text： no wrap

• color.gradient：standard gradient for the color.

⬇️ 應用

• Swatch_0.

• SystemColorsView： to present colors.

• color.gradient