updated for Monarch

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

VDSSample/ViewControllers/TileletViewController.swift

@@ -25,12 +25,6 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: Tilelet.SubTitleModel.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
     
-    lazy var subtitleColorPickerSelectorView = {
-        PickerSelectorView<Use>(title: "",
-                                picker: self.picker,
-                                items: [.primary, .secondary])
-    }()
-    
     lazy var textPositionPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -75,7 +69,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     var colorPickerType: ColorPickerType = .backgroundColor
     enum ColorPickerType {
-        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
+        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor, light, dark
     }
     
     lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@@ -104,6 +98,85 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TitleLockup.TextAlignment.allCases)
     }()
     
+    /// titleLockup
+    var currentLabelType: LabelType = .title
+    enum LabelType {
+        case eyebrow, title, subtitle
+    }
+    
+    enum TitleTextColor: String, CaseIterable {
+        case primary, custom
+    }
+    
+    enum TextColor: String, CaseIterable {
+        case primary, secondary, custom
+    }
+    
+    /// eyebrow
+    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var eyebrowColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+
+    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// title
+    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var titleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TitleTextColor.allCases)
+    }()
+    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// subtitle
+    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var subtitleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+
+    
     let backgroundImage = UIImage(named: "backgroundTest")!
     var clickableSwitch = Toggle()
     var eyebrowTextField = TextField()
@@ -160,16 +233,27 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Badge Max Width", view: maxWidthTextField)
 
         addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
-        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
         addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
-        
+        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
+        addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        append(section: eyebrowColorsFormStackView)
+
         addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
-        addFormRow(label: "Title Text", view: titleTextField)
         addFormRow(label: "Title is Bold", view: titleIsBold)
-        
+        addFormRow(label: "Title Text", view: titleTextField)
-        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
+        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
+        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        append(section: titleColorsFormStackView)
+
         addFormRow(label: "Subtitle Text", view: subTitleTextField)
-                        
+        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        append(section: subtitleColorsFormStackView)
+
         addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
@@ -257,7 +341,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         showDescriptionIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDirectionalIconSwitch.isOn = false
-                self?.component.descriptiveIconModel = .init(size: .medium, surface: .dark)
+                self?.component.descriptiveIconModel = .init(size: .medium)
             } else {
                 self?.component.descriptiveIconModel = nil
             }
@@ -266,7 +350,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         showDirectionalIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDescriptionIconSwitch.isOn = false
-                self?.component.directionalIconModel = .init(size: .medium, surface: .dark)
+                self?.component.directionalIconModel = .init(size: .medium)
             } else {
                 self?.component.directionalIconModel = nil
             }
@@ -327,7 +411,6 @@ class TileletViewController: BaseViewController<Tilelet> {
         surfacePickerSelectorView.text = component.surface.rawValue
         otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
-        subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
@@ -347,7 +430,20 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            component.titleModel = Tilelet.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TitleTextColor
+            switch titleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .custom:
+                if let light = titleLightColorView.selectedColor?.hexString {
+                    let dark = titleDarkColorView.selectedColor?.hexString ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight.hexString!, VDSColor.elementsPrimaryOndark.hexString!)
+                }
+            }
+            
+            component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
         } else {
             component.titleModel = nil
         }
@@ -355,7 +451,22 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch subtitleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = subtitleLightColorView.selectedColor?.hexString {
+                    let dark = subtitleDarkColorView.selectedColor?.hexString ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight.hexString!, VDSColor.elementsPrimaryOndark.hexString!)
+                }
+            }
+
+            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
         } else {
             component.subTitleModel = nil
         }
@@ -363,7 +474,22 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
-            component.eyebrowModel = Tilelet.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch eyebrowColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = eyebrowLightColorView.selectedColor?.hexString {
+                    let dark = eyebrowDarkColorView.selectedColor?.hexString ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight.hexString!, VDSColor.elementsPrimaryOndark.hexString!)
+                }
+            }
+
+            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.eyebrowModel = nil
         }
@@ -394,10 +520,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setSubTitleModel()
         }
         
-        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setSubTitleModel()
-        }
-        
         textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
             self.component.textPostion = item
@@ -443,6 +565,31 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self.present(self.colorPicker, animated: true)
             }            
         }
+        
+        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .eyebrow
+            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setEyebrowModel()
+            }
+        }
+        
+        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .title
+            self?.titleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setTitleModel()
+            }
+        }
+        
+        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .subtitle
+            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setSubTitleModel()
+            }
+        }
+
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -502,6 +649,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
     
     func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
         guard let hexString = viewController.selectedColor.hexString else { return }
+        var lightColorView: ColorPickerView<ColorPickerType>
+        var darkColorView: ColorPickerView<ColorPickerType>
         switch colorPickerType {
         case .contentViewBackgroundColor:
             component.contentView.backgroundColor = UIColor(hexString: hexString)
@@ -513,6 +662,35 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
         case .gradientColor2:
             gradientColorView2.selectedColor = viewController.selectedColor
             updateGradientColors()
+            
+        case .light, .dark:
+            var lightColorView: ColorPickerView<ColorPickerType>
+            var darkColorView: ColorPickerView<ColorPickerType>
+            
+            switch currentLabelType {
+            case .eyebrow:
+                lightColorView = eyebrowLightColorView
+                darkColorView = eyebrowDarkColorView
+            case .title:
+                lightColorView = titleLightColorView
+                darkColorView = titleDarkColorView
+            case .subtitle:
+                lightColorView = subtitleLightColorView
+                darkColorView = subtitleDarkColorView
+            }
+            if colorPickerType == .light {
+                lightColorView.selectedColor = viewController.selectedColor
+            } else {
+                darkColorView.selectedColor = viewController.selectedColor
+            }
+            switch currentLabelType {
+            case .eyebrow:
+                setEyebrowModel()
+            case .title:
+                setTitleModel()
+            case .subtitle:
+                setSubTitleModel()
+            }
         }
     }
     

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -29,12 +29,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                            picker: self.picker,
                            items: TitleLockup.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
-    
-    lazy var subtitleColorPickerSelectorView = {
-        PickerSelectorView<Use>(title: "",
-                                 picker: self.picker,
-                                 items: [.primary, .secondary])
-    }()
 
     var titleIsBold = Toggle().with { $0.isOn = true }
     var eyebrowIsBold = Toggle().with { $0.isOn = true }
@@ -42,6 +36,98 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     var titleTextField = TextField()
     var subTitleTextField = TextField()
 
+    /// **********************************************
+    /// Text Color
+    lazy var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        picker.delegate = self
+        return picker
+    }()
+    
+    var currentLabelType: LabelType = .title
+    var colorPickerType: ColorPickerType = .light
+    
+    enum LabelType {
+        case eyebrow, title, subtitle
+    }
+    
+    enum TitleTextColor: String, CaseIterable {
+        case primary, custom
+    }
+    
+    enum TextColor: String, CaseIterable {
+        case primary, secondary, custom
+    }
+    
+    enum ColorPickerType {
+        case light, dark
+    }
+    
+    /// eyebrow
+    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var eyebrowColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+
+    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// title
+    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var titleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TitleTextColor.allCases)
+    }()
+    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// subtitle
+    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var subtitleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+
+
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -55,18 +141,29 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
 
-        addFormRow(label: "Title is Bold", view: titleIsBold)
+        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
         addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
-
-        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
-        addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView)
-
         addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
+        addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        append(section: eyebrowColorsFormStackView)
+
+        addFormRow(label: "Title is Bold", view: titleIsBold)
+        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
         addFormRow(label: "Title Text", view: titleTextField)
+        addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
+        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
+        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        append(section: titleColorsFormStackView)
 
-        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
         addFormRow(label: "Subtitle Text", view: subTitleTextField)
-
+        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        append(section: subtitleColorsFormStackView)
+        
+        
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setOtherModels()
         }.store(in: &subscribers)
@@ -108,7 +205,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
         otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
-        subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         eyebrowTextField.text = eyebrowModel.text
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
@@ -120,7 +216,21 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     func setTitleModel() {
         var titleTextStyle: TextStyle?
         if let text = titleTextField.text, !text.isEmpty {
-            component.titleModel = TitleLockup.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            
+            var textColor: TitleLockup.TitleTextColor
+            switch titleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .custom:
+                if let light = titleLightColorView.selectedColor?.hexString {
+                    let dark = titleDarkColorView.selectedColor?.hexString ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight.hexString!, VDSColor.elementsPrimaryOndark.hexString!)
+                }
+            }
+
+            component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
             titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular
         } else {
             component.titleModel = nil
@@ -139,16 +249,43 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         let style = otherStandardStylePickerSelectorView.selectedItem
     
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleColorPickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch subtitleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = subtitleLightColorView.selectedColor?.hexString {
+                    let dark = subtitleDarkColorView.selectedColor?.hexString ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight.hexString!, VDSColor.elementsPrimaryOndark.hexString!)
+                }
+            }
+            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
             debug(type: "SubTitle", textStyle: style.value.regular)
         } else {
             component.subTitleModel = nil
         }
         
         if let text = eyebrowTextField.text, !text.isEmpty {
-            component.eyebrowModel = TitleLockup.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: style)
+            var textColor: TitleLockup.TextColor
+            switch eyebrowColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = eyebrowLightColorView.selectedColor?.hexString {
+                    let dark = eyebrowDarkColorView.selectedColor?.hexString ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight.hexString!, VDSColor.elementsPrimaryOndark.hexString!)
+                }            }
+            component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
             debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
-
+            
         } else {
             component.eyebrowModel = nil
         }
@@ -178,9 +315,30 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         otherStandardStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.setOtherModels()
         }
+
+        
+        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .eyebrow
+            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setOtherModels()
+            }
+        }
+        
+        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .title
+            self?.titleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setTitleModel()
+            }
+        }
         
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setOtherModels()
+            self?.currentLabelType = .subtitle
+            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setOtherModels()
+            }
         }
     }
 }
@@ -198,3 +356,48 @@ extension TitleLockupViewController: ComponentSampleable {
         return ComponentSample(component: component)
     }
 }
+
+extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
+    
+    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
+        let selectedColor = picker.selectedColor
+        if let selectedColor {
+            colorPicker.selectedColor = selectedColor
+        }
+        present(colorPicker, animated: true)
+    }
+    
+    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
+        dismiss(animated: true)
+    }
+    
+    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
+        guard let hexString = viewController.selectedColor.hexString else { return }
+        var lightColorView: ColorPickerView<ColorPickerType>
+        var darkColorView: ColorPickerView<ColorPickerType>
+        
+        switch currentLabelType {
+        case .eyebrow:
+            lightColorView = eyebrowLightColorView
+            darkColorView = eyebrowDarkColorView
+        case .title:
+            lightColorView = titleLightColorView
+            darkColorView = titleDarkColorView
+        case .subtitle:
+            lightColorView = subtitleLightColorView
+            darkColorView = subtitleDarkColorView
+        }
+        switch colorPickerType {
+        case .light:
+            lightColorView.selectedColor = viewController.selectedColor
+        case .dark:
+            darkColorView.selectedColor = viewController.selectedColor
+        }
+        
+        if currentLabelType == .title {
+            setTitleModel()
+        } else {
+            setOtherModels()
+        }
+    }
+}