Color+SystemColors
Last updated
Last updated
// โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
// 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)"
}
}
}
used by Swatch.
used by SystemColorsView to present colors.