@momo-kits/native-kits 0.152.4-beta.6 → 0.152.4-beta.9

package/ios/Swipeable/SwipeCell.swift

@@ -0,0 +1,278 @@
+import Foundation
+import SwiftUI
+
+// MARK: - SwipeCellModifier
+
+public struct SwipeCellModifier: ViewModifier {
+    var id: String
+    var cellWidth: CGFloat = .infinity
+    var leadingSideGroup: [SwipeCellActionItem] = []
+    var trailingSideGroup: [SwipeCellActionItem] = []
+    @Binding var currentUserInteractionCellID: String?
+    var settings: SwipeCellSettings = .init()
+
+    @State private var offsetX: CGFloat = 0
+
+    let generator = UINotificationFeedbackGenerator()
+    @State private var hapticFeedbackOccurred: Bool = false
+    @State private var openSideLock: SwipeGroupSide?
+
+    public func body(content: Content)->some View {
+        ZStack {
+            if self.leadingSideGroup.isEmpty == false && self.offsetX != 0 {
+                self.swipeToRevealArea(swipeItemGroup: self.leadingSideGroup, side: .leading)
+            }
+
+            if self.trailingSideGroup.isEmpty == false && self.offsetX != 0 {
+                self.swipeToRevealArea(swipeItemGroup: self.trailingSideGroup, side: .trailing)
+            }
+
+            content
+                .offset(x: self.offsetX)
+                .simultaneousGesture(
+                    DragGesture(minimumDistance: 30, coordinateSpace: .local)
+                        .onChanged { value in
+                            self.dragOnChanged(value: value)
+                        }
+                        .onEnded { value in
+                            self.dragOnEnded(value: value)
+                        }
+                )
+
+        }.frame(width: cellWidth)
+            .edgesIgnoringSafeArea(.horizontal)
+            .clipped()
+            .valueChanged(value: self.currentUserInteractionCellID) { _ in
+                if let currentDragCellID = self.currentUserInteractionCellID, currentDragCellID != self.id && self.openSideLock != nil {
+                    // if this cell has an open side area and is not the cell being dragged, close the cell
+                    self.setOffsetX(value: 0)
+                    // reset the drag cell id to nil
+                    self.currentUserInteractionCellID = nil
+                }
+            }
+    }
+
+    internal func swipeToRevealArea(swipeItemGroup: [SwipeCellActionItem], side: SwipeGroupSide)->some View {
+        HStack {
+            if side == .trailing {
+                Spacer()
+            }
+            ZStack {
+                HStack(spacing: 0) {
+                    ForEach(swipeItemGroup) { item in
+                        SwiftUI.Button {
+                            self.setOffsetX(value: 0)
+                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+                                item.actionCallback()
+                            }
+                        } label: {
+                            self.buttonContentView(item: item, group: swipeItemGroup, side: side)
+                        }.buttonStyle(BorderlessButtonStyle())
+                    }
+                }
+            }.opacity(self.swipeRevealAreaOpacity(side: side))
+
+            if side == .leading {
+                Spacer()
+            }
+        }
+    }
+
+    internal func buttonContentView(item: SwipeCellActionItem, group: [SwipeCellActionItem], side: SwipeGroupSide)->some View {
+        ZStack {
+            item.backgroundColor
+
+            HStack {
+                if self.warnSwipeOutCondition(side: side, hasSwipeOut: item.swipeOutAction) && item.swipeOutButtonView != nil {
+                    item.swipeOutButtonView!()
+                } else {
+                    item.buttonView()
+                }
+            }
+
+        }.frame(width: self.itemButtonWidth(item: item, itemGroup: group, side: side))
+    }
+
+    internal func menuWidth(side: SwipeGroupSide)->CGFloat {
+        switch side {
+        case .leading:
+            return self.leadingSideGroup.map { $0.buttonWidth }.reduce(0, +)
+
+        case .trailing:
+            return self.trailingSideGroup.map { $0.buttonWidth }.reduce(0, +)
+        }
+    }
+
+    // MARK: drag gesture
+
+    internal func dragOnChanged(value: DragGesture.Value) {
+        let horizontalTranslation = value.translation.width
+        if self.nonDraggableCondition(horizontalTranslation: horizontalTranslation) {
+            return
+        }
+
+        if self.openSideLock != nil {
+            // if one side is open, we need to add the menu width!
+            let menuWidth = self.openSideLock == .leading ? self.menuWidth(side: .leading) : self.menuWidth(side: .trailing)
+            self.offsetX = menuWidth * openSideLock!.sideFactor + horizontalTranslation
+            self.triggerHapticFeedbackIfNeeded(horizontalTranslation: horizontalTranslation)
+            return
+        }
+
+        self.triggerHapticFeedbackIfNeeded(horizontalTranslation: horizontalTranslation)
+
+        if horizontalTranslation > 8 || horizontalTranslation < -8 { // makes sure the swipe cell doesn't open too easily
+            self.currentUserInteractionCellID = self.id
+            self.offsetX = horizontalTranslation
+        } else {
+            self.offsetX = 0
+        }
+    }
+
+    internal func nonDraggableCondition(horizontalTranslation: CGFloat)->Bool {
+        return self.offsetX == 0 && (self.leadingSideGroup.isEmpty && horizontalTranslation > 0 || self.trailingSideGroup.isEmpty && horizontalTranslation < 0)
+    }
+
+    internal func dragOnEnded(value: DragGesture.Value) {
+        let swipeOutTriggerValue = self.cellWidth * self.settings.swipeOutTriggerRatio
+
+        if self.offsetX == 0 {
+            self.openSideLock = nil
+        } else if self.offsetX > 0 {
+            if self.leadingSideGroup.isEmpty == false {
+                if self.offsetX < settings.openTriggerValue || (self.openSideLock == .leading && self.offsetX < self.menuWidth(side: .leading) * 0.8) {
+                    self.setOffsetX(value: 0)
+                } else if let leftItem = self.leadingSideGroup.filter({ $0.swipeOutAction == true }).first, self.offsetX.magnitude > swipeOutTriggerValue {
+                    self.swipeOutAction(item: leftItem, sideFactor: 1)
+                } else {
+                    self.lockSideMenu(side: .leading)
+                }
+
+            } else {
+                // leading group emtpy
+                self.setOffsetX(value: 0)
+            }
+        } else if self.offsetX < 0 {
+            if self.trailingSideGroup.isEmpty == false {
+                if self.offsetX.magnitude < settings.openTriggerValue || (self.openSideLock == .trailing && self.offsetX > -self.menuWidth(side: .trailing) * 0.8) {
+                    self.setOffsetX(value: 0)
+                } else if let rightItem = self.trailingSideGroup.filter({ $0.swipeOutAction == true }).first, self.offsetX.magnitude > swipeOutTriggerValue {
+                    self.swipeOutAction(item: rightItem, sideFactor: -1)
+                } else {
+                    self.lockSideMenu(side: .trailing)
+                }
+
+            } else {
+                // trailing group emtpy
+                self.setOffsetX(value: 0)
+            }
+        }
+    }
+
+    internal func triggerHapticFeedbackIfNeeded(horizontalTranslation: CGFloat) {
+        let side: SwipeGroupSide = horizontalTranslation > 0 ? .leading : .trailing
+        let group = side == .leading ? self.leadingSideGroup : self.trailingSideGroup
+        let swipeOutActionCondition = self.warnSwipeOutCondition(side: side, hasSwipeOut: true)
+        if let item = self.swipeOutItemWithHapticFeedback(group: group), self.hapticFeedbackOccurred == false, swipeOutActionCondition == true {
+            self.generator.notificationOccurred(item.swipeOutHapticFeedbackType!)
+            self.hapticFeedbackOccurred = true
+        }
+    }
+
+    internal func swipeOutItemWithHapticFeedback(group: [SwipeCellActionItem])->SwipeCellActionItem? {
+        if let item = group.filter({ $0.swipeOutAction == true }).first {
+            if item.swipeOutHapticFeedbackType != nil {
+                return item
+            }
+        }
+        return nil
+    }
+
+    internal func swipeOutAction(item: SwipeCellActionItem, sideFactor: CGFloat) {
+        if item.swipeOutIsDestructive {
+            let swipeOutWidth = cellWidth + 10
+            self.setOffsetX(value: swipeOutWidth * sideFactor)
+            self.openSideLock = nil
+        } else {
+            self.setOffsetX(value: 0) // open side lock set in function!
+        }
+
+        DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+            item.actionCallback()
+        }
+    }
+
+    internal func lockSideMenu(side: SwipeGroupSide) {
+        self.setOffsetX(value: side.sideFactor * self.menuWidth(side: side))
+        self.openSideLock = side
+        self.hapticFeedbackOccurred = false
+    }
+
+    internal func setOffsetX(value: CGFloat) {
+        withAnimation(.spring()) {
+            self.offsetX = value
+        }
+        if self.offsetX == 0 {
+            self.openSideLock = nil
+            self.hapticFeedbackOccurred = false
+        }
+    }
+
+    internal func itemButtonWidth(item: SwipeCellActionItem, itemGroup: [SwipeCellActionItem], side: SwipeGroupSide)->CGFloat {
+        let dynamicButtonWidth = self.dynamicButtonWidth(item: item, itemCount: itemGroup.count, side: side)
+        let triggerValue = self.cellWidth * settings.swipeOutTriggerRatio
+        let swipeOutActionCondition = side == .leading ? self.offsetX > triggerValue : self.offsetX < -triggerValue
+
+        if item.swipeOutAction && swipeOutActionCondition {
+            return self.offsetX.magnitude + settings.addWidthMargin
+        } else if swipeOutActionCondition && item.swipeOutAction == false && itemGroup.contains(where: { $0.swipeOutAction == true }) {
+            return 0
+        } else {
+            return dynamicButtonWidth
+        }
+    }
+
+    internal func dynamicButtonWidth(item: SwipeCellActionItem, itemCount: Int, side: SwipeGroupSide)->CGFloat {
+        let menuWidth = self.menuWidth(side: side)
+        return (self.offsetX.magnitude + settings.addWidthMargin) * (item.buttonWidth / menuWidth)
+    }
+
+    internal func warnSwipeOutCondition(side: SwipeGroupSide, hasSwipeOut: Bool)->Bool {
+        if hasSwipeOut == false {
+            return false
+        }
+        let triggerValue = self.cellWidth * settings.swipeOutTriggerRatio
+        return (side == .trailing && self.offsetX < -triggerValue) || (side == .leading && self.offsetX > triggerValue)
+    }
+
+    internal func swipeRevealAreaOpacity(side: SwipeGroupSide)->Double {
+        switch side {
+        case .leading:
+
+            return self.offsetX > 5 ? 1 : 0
+        case .trailing:
+            return self.offsetX < -5 ? 1 : 0
+        }
+    }
+}
+
+public extension View {
+    /// swipe cell modifier
+    /// - Parameters:
+    ///   - id: the string id of this cell. The default value is a uuid string. If you want to set the currentUserInteractionCellID yourself, e.g. for tap to close functionality, you need to override this id value with your own cell id.
+    ///   - cellWidth: the width of the content view - typically a cell or row in a list under which the swipe to reveal menu should appear.
+    ///   - leadingSideGroup: the button group on the leading side that shall appear when the user swipes the cell to the right
+    ///   - trailingSideGroup: the button group on the trailing side that shall appear when the user swipes the cell to the left
+    ///   - currentUserInteractionCellID: a Binding of an optional UUID that should be set either in the view model of the parent view in which the cells appear or as a State variable into the parent view itself. Don't assign it a value!
+    ///   - settings: settings. can be omitted in which case the settings struct default values apply.
+    /// - Returns: the modified view of the view that can be swiped.
+    func swipeCell(id: String = UUID().uuidString, cellWidth: CGFloat = .infinity, leadingSideGroup: [SwipeCellActionItem], trailingSideGroup: [SwipeCellActionItem], currentUserInteractionCellID: Binding<String?> = .constant(""), settings: SwipeCellSettings = SwipeCellSettings())->some View {
+        self.modifier(SwipeCellModifier(id: id, cellWidth: cellWidth, leadingSideGroup: leadingSideGroup, trailingSideGroup: trailingSideGroup, currentUserInteractionCellID: currentUserInteractionCellID, settings: settings))
+    }
+}
+
+public extension View {
+    func castToAnyView()->AnyView {
+        return AnyView(self)
+    }
+}

package/ios/Swipeable/SwipeCellModel.swift

@@ -0,0 +1,86 @@
+
+
+import Foundation
+import SwiftUI
+
+// MARK: - SwipeGroupSide
+
+public enum SwipeGroupSide {
+    case leading
+    case trailing
+
+    // MARK: Internal
+
+    var sideFactor: CGFloat {
+        switch self {
+            case .leading:
+                return 1
+
+            case .trailing:
+                return -1
+        }
+    }
+}
+
+// MARK: - SwipeCellActionItem
+
+public struct SwipeCellActionItem: Identifiable {
+    // MARK: Lifecycle
+
+    /// Initializer
+    /// - Parameter id: Required to identify each buttin in the side menu. Default is a random uuid string.
+    /// - Parameter buttonView: The view in the foreground of the menu button. Make sure to set a maximum frame height less than the cell height!
+    /// - Parameter swipeOutButtonView: Alternative button view that is displayed only when the offset during swipe is beyond the swipe out trigger value.
+    /// - Parameter  buttonWidth: Width of the button. The the open side menu width is calculated from the sum of all button widths. Default is 75.
+    /// - Parameter backgroundColor: The background colour of the the menu button.
+    /// - Parameter swipeOutAction: A Boolean that determines if a swipe out action is activated or not. Default is false.
+    /// - Parameter swipeOutHapticFeedbackType: If a swipeOutAction is activated, a haptic feedback will occur after the swipe out threshold is passed. Default is nil.
+    /// - Parameter swipeOutIsDestructive: A Boolean that determines if the swipe out is destructive. If true, the content cell view will be "move out of sight" once the swipe out is triggered.
+    public init(id: String = UUID().uuidString, buttonView: @escaping ()->AnyView, swipeOutButtonView: (()->AnyView)? = nil, buttonWidth: CGFloat = 75, backgroundColor: Color, swipeOutAction: Bool = false, swipeOutHapticFeedbackType: UINotificationFeedbackGenerator.FeedbackType? = nil, swipeOutIsDestructive: Bool = true, actionCallback: @escaping ()->()) {
+        self.id = id
+        self.buttonView = buttonView
+        self.swipeOutButtonView = swipeOutButtonView
+        self.buttonWidth = buttonWidth
+        self.backgroundColor = backgroundColor
+        self.swipeOutAction = swipeOutAction
+        self.swipeOutHapticFeedbackType = swipeOutHapticFeedbackType
+        self.swipeOutIsDestructive = swipeOutIsDestructive
+        self.actionCallback = actionCallback
+    }
+
+    // MARK: Public
+
+    public var id: String
+    public var buttonView: ()->AnyView
+    public var swipeOutButtonView: (()->AnyView)?
+    public var buttonWidth: CGFloat
+    public var backgroundColor: Color
+    public var swipeOutAction: Bool
+    public var swipeOutHapticFeedbackType: UINotificationFeedbackGenerator.FeedbackType?
+    public var swipeOutIsDestructive: Bool
+    /// public var swipeOutButtonViewScaleFactor: CGFloat
+    public var actionCallback: ()->()
+}
+
+// MARK: - SwipeCellSettings
+
+/// Swipe Cell Settings
+public struct SwipeCellSettings {
+    // MARK: Lifecycle
+
+    /// initializer
+    public init(openTriggerValue: CGFloat = 60, swipeOutTriggerRatio: CGFloat = 0.7, addWidthMargin: CGFloat = 5) {
+        self.openTriggerValue = openTriggerValue
+        self.swipeOutTriggerRatio = swipeOutTriggerRatio
+        self.addWidthMargin = addWidthMargin
+    }
+
+    // MARK: Public
+
+    /// minimum horizontal translation value necessary to open the side menu
+    public var openTriggerValue: CGFloat
+    /// the ratio of the total cell width that triggers a swipe out action (provided one action has swipe out activated)
+    public var swipeOutTriggerRatio: CGFloat = 0.7
+    /// An additional value to add to the open menu width. This is useful if the cell has rounded corners.
+    public var addWidthMargin: CGFloat = 5
+}

package/ios/Switch/Switch.swift

@@ -0,0 +1,44 @@
+import Foundation
+import SwiftUI
+
+public struct Switch: View{
+    @Binding var value: Bool
+    var disabled: Bool
+    var onChange: ((Bool)->Void)?
+    
+    public init(_ value: Binding<Bool>,disabled: Bool = false, onChange: ((Bool)->Void)? = nil){
+        self._value = value
+        self.disabled = disabled
+        self.onChange = onChange
+    }
+    
+    
+    public var body: some View {
+        SwiftUI.Button(action: {
+            withAnimation{
+                value.toggle()
+                onChange?(value)
+            }
+        }){
+              HStack{
+                  HStack {
+                  }
+                  .frame(width: 6, height: 6)
+                  .background(value ? Colors.pink03 : Colors.black07)
+                  .clipShape(Circle())
+                  .opacity(disabled ? 0.4 : 1)
+              }
+              .frame(width: 14, height: 14)
+              .background(Colors.black01)
+              .clipShape(Circle())
+              .padding(.leading,5)
+              .padding(.trailing,5)
+              
+          }
+          .disabled(disabled)
+          .frame(width: 40, height: 24, alignment: value == true ? .trailing : .leading)
+          .background(value ? Colors.pink03 : Colors.black07)
+          .clipShape(Capsule())
+          .opacity(disabled ? 0.4 : 1)
+    }
+}

package/ios/Template/Logo/Logo.swift

@@ -0,0 +1,75 @@
+import Foundation
+import SwiftUI
+
+public struct LogoView: View {
+    var type: String
+    var useShadow: Bool
+    var useBorder: Bool
+    var useBackground : Bool
+    var backgroundColor: Color
+    var shadowColor : Color
+    var borderColor : Color
+    var source: String
+    var radius: CGFloat
+
+    public init(source: String = "",
+                type: String = "image",
+                useBackground : Bool = true,
+                useShadow: Bool = true,
+                useBorder : Bool = true,
+                backgroundColor: Color = Colors.black01,
+                shadowColor : Color = Color(hex: "d9d9d9"),
+                borderColor : Color = Color(hex: "e2e2e2")){
+        self.type = type
+        self.useShadow = useShadow
+        self.useBorder = useBorder
+        self.useBackground = useBackground
+        self.backgroundColor = backgroundColor
+        self.borderColor = borderColor
+        self.source = source
+        self.shadowColor = shadowColor
+        self.radius = type == "image" ? 7 : 0
+    }
+
+
+    public var body: some View {
+        return ImageView(source)
+            .scaledToFit()
+            .frame(width: 28, height: 28)
+            .cornerRadius(radius)
+            .containerBorder(type, useBorder, borderColor)
+            .containerBackground(type, useBackground, backgroundColor)
+            .containerShadow(useShadow, shadowColor)
+    }
+
+}
+
+private extension View {
+    func containerBorder (_ type: String, _ useBorder: Bool, _ borderColor: Color) -> some View {
+        Group {
+            if (useBorder && type != "icon") {
+                self.overlay(RoundedRectangle(cornerRadius: 8).stroke(borderColor, lineWidth: 1))
+            } else {
+                self
+            }
+        }
+    }
+    func containerBackground (_ type: String, _ useBackground: Bool, _ backgroundColor: Color) -> some View {
+        Group {
+            if (useBackground && type != "icon") {
+                self.background(backgroundColor)
+            } else {
+                self
+            }
+        }
+    }
+    func containerShadow (_ useShadow: Bool, _ shadowColor: Color) -> some View {
+        Group {
+            if useShadow {
+                self.shadow(color: shadowColor, radius: 2, x: 0, y: 2)
+            } else {
+                self
+            }
+        }
+    }
+}

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -0,0 +1,120 @@
+//
+//  TrustBanner.swift
+//  MoMoUIKits
+//
+//  Created by Nguyễn Hoàng Sơn on 14/12/2023.
+//
+
+import Foundation
+import SwiftUI
+import SDWebImageSwiftUI
+
+let jsonUrl = "https://static.momocdn.net/app/json/component-kits/design_system.json"
+
+public struct TrustBannerData: Decodable {
+    let content: [String: String]
+    let subContent: [String: String]
+    let pciImage: String
+    let sslImage: String
+    let urlConfig: String
+    let icons: [String]
+    let momoImage: String
+    
+    enum CodingKeys: String, CodingKey {
+        case content
+        case subContent
+        case pciImage
+        case sslImage
+        case icons
+        case momoImage
+        case urlConfig = "url_config"
+    }
+}
+
+let defaultBanner = TrustBannerData(
+    content: ["vi": "An toàn tài sản & Bảo mật thông tin của bạn là ưu tiên hàng đầu của MoMo.",
+              "en": "Ensuring financial security and data privacy is MoMo's highest priority."],
+    subContent: [
+        "vi": "Tìm hiểu thêm",
+        "en": "Learn more"
+    ],
+    pciImage: "https://static.momocdn.net/app/img/kits/trustBanner/pci.png",
+    sslImage: "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
+    urlConfig: "login_and_security",
+    icons: [
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png",
+        "https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png"
+    ],
+    momoImage: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png"
+)
+
+public struct TrustBanner: View {
+    @EnvironmentObject var applicationEnvironment: ApplicationEnvironment
+    
+    var onPress: ((String)->Void)?
+     
+    public init(onPress: ((String)->Void)?) {
+        self.onPress = onPress
+    }
+    
+    var language: String? = "vi"
+    
+    func onPressSecurity() {
+        if (onPress != nil) {
+            onPress!(applicationEnvironment.config?.trustBanner?.urlConfig ?? defaultBanner.urlConfig)
+        }
+    }
+    
+    
+    public var body: some View {
+        HStack(alignment: .center, spacing: 8) {
+            WebImage(url: URL(string: applicationEnvironment.config?.trustBanner?.momoImage ?? defaultBanner.momoImage))
+                .resizable()
+                .scaledToFit()
+                .frame(width: 64, height: 64)
+            VStack(alignment: .leading){
+                Text(applicationEnvironment.config?.trustBanner?.content[language ?? "vi"] as? String ?? defaultBanner.content[language ?? "vi"])
+                    .foregroundColor(Color(hex: "484848"))
+                    .lineLimit(2)
+                    .font(.system(size: 13, weight: Font.Weight.regular))
+                    .lineSpacing(3)
+                    .padding(.bottom, 8)
+                HStack {
+                    HStack(spacing: 0) {
+                        Text(applicationEnvironment.config?.trustBanner?.subContent[language ?? "vi"] as? String ?? defaultBanner.subContent[language ?? "vi"])
+                            .foregroundColor(Colors.pink03)
+                            .font(.system(size: 13, weight: .bold))
+                            .padding(.trailing, 4)
+                        
+                        Icon(source: "arrow_chevron_right_small", color: Colors.pink03)
+                    }.onTapGesture {
+                        onPressSecurity()
+                    }
+                    
+                    Spacer()
+                    HStack{
+                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.pciImage ?? defaultBanner.pciImage))
+                            .resizable()
+                            .scaledToFit()
+                            .frame(width: 24, height: 20)
+                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.sslImage ?? defaultBanner.sslImage))
+                            .resizable()
+                            .scaledToFit()
+                            .frame(width: 52, height: 20)
+                    }
+                }
+                
+            }
+            
+        }
+        .padding(.all, 12)
+        .background(Color(hex: "F2F8FF"))
+        .cornerRadius(12)
+        .onTapGesture {
+            onPressSecurity()
+        }
+        .frame(maxWidth: UIScreen.main.bounds.size.width)
+    }
+}

package/ios/Theme.md

@@ -0,0 +1,18 @@
+## 🎯 Usage
+### Declaring themes with Asset
+To get started, you need to define four different types of assets in xcode
+```swift
+    public static let primary = Color("Primary")
+    public static let primaryDark = Color("PrimaryDark")
+    public static let primaryLight = Color("PrimaryLight")
+    public static let secondary = Color("Secondary")
+    public static let background = Color("Background")
+    public static let border = Color("Border")
+    public static let text = Color("Text")
+    public static let textSecondary = Color("TextSecondary")
+    public static let card = Color("Card")
+    public static let error = Color("Error")
+    public static let info = Color("Info")
+    public static let success = Color("Success")
+```
+> You can refer Colors class with static colors