App Styles Template

struct AppStyles {

    struct SFSymbols {
        static let copySuccess: String = "checkmark.circle.fill"
        static let copy: String = "doc.on.doc"
        static let remove: String = "trash"
        static let share: String = "square.and.arrow.up"
        static let lightMode: String = "sun.max.fill"
        static let darkMode: String = "moon"
        static let notFavorite: String = "heart"
        static let isFavorite: String = "heart.fill"
        static let save: String = "bookmark"
        static let edit: String = "pencil"
        static let contextMenu: String = "contextualmenu.and.cursorarrow"
        static let optionMenu: String = "ellipsis.circle"
        static let summary: String = "doc.text.image"
        static let discover: String = "globe"
        static let reminder: String = "bell"
        static let calendar: String = "calendar"
        static let note: String = "note.text"
        static let add: String = "plus"
        static let complete: String = "checkmark"
        static let settings: String = "gear"
        static let sort: String = "line.3.horizontal.decrease"
        static let preference: String = "slider.horizontal.3"
        static let notification: String = "bell.circle.fill"
        static let alert: String = "bell.circle.fill"
        static let time: String = "clock"
        static let delete: String = "trash"
        static let pause: String = "pause"
        static let check: String = "checkmark"
        static let cancel: String = "xmark"
        static let app: String = "apps.iphone"
        static let blog: String = "doc.text.image"
        static let book: String = "books.vertical"
        static let community: String = "person.2"
        static let course: String = "graduationcap"
        static let event: String = "hand.wave"
        static let design: String = "scribble.variable"
        static let github: String = "apple.terminal"
        static let newsletter: String = "newspaper"
        static let podcast: String = "waveform.badge.mic"
        static let tool: String = "pencil.and.ruler"
        static let youtube: String = "play.rectangle"
        static let base: String = "baseball.diamond.bases"
        // Add more
    }
    
    // Following gray styles are based on RadixUI: https://www.radix-ui.com/colors
    struct Colors {
        static let gray1: Color = Color(hex: "#111111")
        static let gray2: Color = Color(hex: "#191919")
        static let gray3: Color = Color(hex: "#222222")
        static let gray4: Color = Color(hex: "#2A2A2A")
        static let gray5: Color = Color(hex: "#313131")
        static let gray6: Color = Color(hex: "#3A3A3A")
        static let gray7: Color = Color(hex: "#484848")
        static let gray8: Color = Color(hex: "#606060")
        static let gray9: Color = Color(hex: "#6E6E6E")
        static let gray10: Color = Color(hex: "#7B7B7B")
        static let gray11: Color = Color(hex: "#B4B4B4")
        static let gray12: Color = Color(hex: "#EEEEEE")
        
        static let superRed: Color = Color(hex: "D22C1F")
        static let superBlue: Color = Color(hex: "38A7F5")
        // Add more
    }
    
    struct Typography {
        static let title2XL: CGFloat = 34
        static let titleXL: CGFloat = 28
        static let titleLG: CGFloat = 22
        static let titleMD: CGFloat = 20
        static let headlineMD: CGFloat = 17
        static let subheadlineMD: CGFloat = 15
        static let bodyMD: CGFloat = 17
        static let bodySM: CGFloat = 15
        static let bodyXS: CGFloat = 13
        static let body2XS: CGFloat = 11
        static let calloutMD: CGFloat = 16
        static let calloutSM: CGFloat = 15
        static let captionMD: CGFloat = 12
        static let captionSM: CGFloat = 11
        static let footnoteMD: CGFloat = 13
        // Add more
    }

    struct Padding {
        static let xs: CGFloat = 4
        static let sm: CGFloat = 8
        static let md: CGFloat = 16
        static let lg: CGFloat = 24
        static let xl: CGFloat = 32
        // Add more
    }
    
    struct Spacing {
        static let xl: CGFloat = 32
        static let lg: CGFloat = 24
        static let md: CGFloat = 16
        static let sm: CGFloat = 8
        static let xs: CGFloat = 4
        // Add more
    }
    
    struct Shapes {
        static let cornerRadiusXL: CGFloat = 24
        static let cornerRadiusLG: CGFloat = 16
        static let cornerRadiusMD: CGFloat = 12
        static let cornerRadiusSM: CGFloat = 8
        static let cornerRadiusXS: CGFloat = 4
        static let icon2XL: CGFloat = 64
        static let iconXL: CGFloat = 32
        static let iconLG: CGFloat = 24
        static let iconMD: CGFloat = 16
        static let iconSM: CGFloat = 8
        // Add more
    }

    // Add more styles based on your app's needs
}



// To use hex code for Color, implement following extension:

extension Color {
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
        case 6: // RGB (24-bit)
            (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
        case 8: // ARGB (32-bit)
            (a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (a, r, g, b) = (255, 0, 0, 0)
        }

        self.init(.sRGB, red: Double(r) / 255, green: Double(g) / 255, blue:  Double(b) / 255, opacity: Double(a) / 255)
    }
}

struct UseAppStyles: View {
    
    var body: some View {
        VStack(alignment: .center, spacing: AppStyles.Spacing.sm) {
            Image(systemName: AppStyles.SFSymbols.base)
                .font(.system(size: AppStyles.Typography.titleXL))
            //.foregroundStyle(AppStyles.Colors.)
                .frame(width: AppStyles.Shapes.icon2XL, height: AppStyles.Shapes.icon2XL, alignment: .center)
                .background {
                    RoundedRectangle(cornerRadius: AppStyles.Shapes.cornerRadiusLG, style: .continuous)
                        .fill(AppStyles.Colors.superBlue.gradient)
                }
            Text("Constants are forever!")
                .font(.system(size: AppStyles.Typography.bodySM))
        }
        
    }
}

#Preview {
    UseAppStyles()
}