updated badge color udpates

refactored classes to pick token/color

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

VDSSample.xcodeproj/project.pbxproj

@@ -107,6 +107,7 @@
 		EAF7F0CC289DA24F00B287F5 /* DownloadArtifactoryItems.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */; };
 		EAF7F0CD289DA24F00B287F5 /* Artifactory.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */; };
 		EAF7F11A28A14A0E00B287F5 /* RadioButtonGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */; };
+		EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXCopyFilesBuildPhase section */
@@ -213,6 +214,7 @@
 		EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = DownloadArtifactoryItems.sh; sourceTree = "<group>"; };
 		EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = Artifactory.sh; sourceTree = "<group>"; };
 		EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButtonGroupViewController.swift; sourceTree = "<group>"; };
+		EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TokenColorPickerFormSection.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -291,6 +293,7 @@
 				EAB5FEF22928153D00998C17 /* Helper.swift */,
 				EAD062A42A3B5CDF0015965D /* Slider.swift */,
 				EA89205028B68307006B9984 /* TextField.swift */,
+				EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */,
 			);
 			path = Classes;
 			sourceTree = "<group>";
@@ -555,6 +558,7 @@
 				EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */,
 				EA6642972BD1B2E700D81DC4 /* ColorPickerView.swift in Sources */,
 				EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */,
+				EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */,
 				EAB5FEF32928153D00998C17 /* Helper.swift in Sources */,
 				EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */,
 				EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */,

VDSSample/Classes/TokenColorPickerFormSection.swift

@@ -0,0 +1,139 @@
+//
+//  TokenColorPickerFormSection.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 10/7/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+
+
+/// This is a Helper FormSection class that deals with Enums that deal with "Token" and "Custom" color pickers.
+/// Then Enum passed into the generic MUST has a case that includes "token" and "custom" values
+public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>: FormSection where EnumType.RawValue == String {
+    //TODO: Remove once this is refactored out.
+
+    public enum ColorPicker { case none }
+   
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    private var picker: UIPickerView
+    private lazy var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        picker.delegate = pickerHandler
+        return picker
+    }()
+   
+    private lazy var pickerHandler = {
+        PickerHandler().with {
+            $0.onSelectedColor = { [weak self] color in
+                guard let self else { return }
+                customColorView.selectedColor = color
+                onColorSelected?(color)
+            }
+        }
+    }()
+
+    ///Handles VDS Color Selections
+    private var tokenColorRow: UIView?
+    private lazy var tokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
+    }()
+    
+    ///Handles Custom Color picker selections
+    private var customColorRow: UIView?
+    private lazy var customColorView: ColorPickerView<ColorPicker> = {
+        return .init(with: ColorPicker.none, color: .black) { [weak self] picker in
+            guard let self else { return }
+            if let selectedColor = picker.selectedColor{
+                colorPicker.selectedColor = selectedColor
+                UIApplication.topViewController()?.present(colorPicker, animated: true)
+            }
+        }
+    }()
+
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    
+    /// This is the 1st row that the user will pick from, again this enum has to contain "token" and "custom" otherwise it won't work well.
+    public lazy var pickerSelectorView = {
+        PickerSelectorView<EnumType>(title: "",
+                                     picker: picker,
+                                     items: EnumType.allCases as! [EnumType])
+    }()
+    
+    public var selectedItem: EnumType { pickerSelectorView.selectedItem }
+    
+    /// Callback for a non-token/non-color selection
+    public var onOtherSelected: ((EnumType) -> Void)?
+    /// Callback after "token" is selected from the VDSColor array
+    public var onTokenSelected: ((UIColor.VDSColor) -> Void)?
+    /// Callback once the user picks a color from the picker.
+    public var onColorSelected: ((UIColor) -> Void)?
+    
+    public var rowTitle: String = "Color"
+    ///Pass in a title and the reference for the picker
+    public init(title: String? = nil, rowTitle: String = "Color", picker: UIPickerView) {
+        self.picker = picker
+        super.init(frame: .zero)
+        self.title = title
+        self.rowTitle = rowTitle
+        setup()
+    }
+    
+    required init(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+    
+    public func setup() {
+
+        addFormRow(label: rowTitle, view: pickerSelectorView)
+        tokenColorRow = addFormRow(label: "Token", view: tokenColorView)
+        customColorRow = addFormRow(label: "Custom", view: customColorView)
+        
+        tokenColorRow?.isHidden = true
+        customColorRow?.isHidden = true
+        
+        pickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            let isToken =  item.rawValue == "token"
+            let isCustom =  item.rawValue == "custom"
+            if isToken  {
+                onTokenSelected?(tokenColorView.selectedItem)
+            } else if let selectedItem = customColorView.selectedColor, isCustom {
+                onColorSelected?(selectedItem)
+            } else {
+                onOtherSelected?(item)
+            }
+            tokenColorRow?.isHidden = !isToken
+            customColorRow?.isHidden = !isCustom
+        }
+        
+        tokenColorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            onTokenSelected?(item)
+        }
+    }
+    
+    public func setDefault(value: EnumType) {
+        pickerSelectorView.set(item: value)
+    }
+    
+    private class PickerHandler: NSObject,  UIColorPickerViewControllerDelegate {
+        var onSelectedColor: ((UIColor) -> Void)!
+        func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
+            UIApplication.topViewController()?.dismiss(animated: true)
+        }
+        
+        func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
+            onSelectedColor(viewController.selectedColor)
+        }
+    }
+}

VDSSample/ViewControllers/BadgeViewController.swift

@@ -37,11 +37,13 @@ class  BadgeViewController: BaseViewController<Badge> {
         }
     }
         
-    lazy var fillColorPickerSelectorView = {
+    enum FillColor: String, CaseIterable {
-        PickerSelectorView(title: "red",
+        case red, yellow, green, orange, blue, black, white, token, custom
-                            picker: self.picker,
+    }
-                           items: Badge.FillColor.allCases)
+
-    }()
+    enum TextColor: String, CaseIterable {
+        case `default`, token, custom
+    }
     
     lazy var numberOfLinesPickerSelectorView = {
         PickerSelectorView(title: "one",
@@ -59,10 +61,66 @@ class  BadgeViewController: BaseViewController<Badge> {
         setupModel()
     }
         
+    lazy var fillColorSection = {
+        TokenColorPickerSection<FillColor>(rowTitle: "Fill Color", picker: self.picker).with {
+            $0.onOtherSelected = { [weak self] item in
+                guard let self else { return }
+                var fillColor: Badge.FillColor = .red
+                switch item {
+                case .red:
+                    fillColor = .red
+                case .yellow:
+                    fillColor = .yellow
+                case .green:
+                    fillColor = .green
+                case .orange:
+                    fillColor = .orange
+                case .blue:
+                    fillColor = .blue
+                case .black:
+                    fillColor = .black
+                case .white:
+                    fillColor = .white
+                default:
+                    break
+                }
+                component.fillColor = fillColor
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.fillColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.fillColor = .custom(color)
+            }
+        }
+    }()
+    
+    lazy var textColorSection = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
+            $0.onOtherSelected = { [weak self] item in
+                guard let self else { return }
+                component.textColor = nil
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                component.textColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                component.textColor = .custom(color)
+            }
+        }
+    }()
+    
     override func setupForm(){
         super.setupForm()  
-        addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        
+        append(section: fillColorSection)
+        append(section: textColorSection)
+        
         addFormRow(label: "Text", view: textField)
         addFormRow(label: "Max Width", view: maxWidthTextField)
         addFormRow(label: "Number of Lines", view: numberOfLinesPickerSelectorView)
@@ -89,6 +147,8 @@ class  BadgeViewController: BaseViewController<Badge> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         textField.text = component.text
+        fillColorSection.setDefault(value: .red)
+        textColorSection.setDefault(value: .default)
     }
     
     func setupPicker(){
@@ -97,14 +157,6 @@ class  BadgeViewController: BaseViewController<Badge> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }        
-        
-        fillColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.fillColor = item
-        }
-        
-        numberOfLinesPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.numberOfLines = item.intValue
-        }
     }
 }
 

VDSSample/ViewControllers/TileletViewController.swift

@@ -39,7 +39,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     lazy var badgeFillColorPickerSelectorView = {
         PickerSelectorView(title: "red",
                            picker: self.picker,
-                           items: Badge.FillColor.allCases)
+                           items: BadgeViewController.FillColor.allCases)
     }()
     lazy var badgeNumberOfLinesPickerSelectorView = {
         PickerSelectorView(title: "one",
@@ -118,6 +118,70 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TitleLockup.TextAlignment.allCases)
     }()
     
+    /// Badge
+    enum BadgeFillColor: String, CaseIterable {
+        case red, yellow, green, orange, blue, black, white, token, custom
+    }
+    
+    enum BadgeTextColor: String, CaseIterable {
+        case `default`, token, custom
+    }
+
+    var badgeFillColor: Badge.FillColor = .red { didSet { setBadgeModel() } }
+    lazy var badgeFillColorSection = {
+        TokenColorPickerSection<BadgeFillColor>(rowTitle: "Fill Color", picker: self.picker).with {
+            $0.onOtherSelected = { [weak self] item in
+                guard let self else { return }
+                var fillColor: Badge.FillColor = .red
+                switch item {
+                case .red:
+                    fillColor = .red
+                case .yellow:
+                    fillColor = .yellow
+                case .green:
+                    fillColor = .green
+                case .orange:
+                    fillColor = .orange
+                case .blue:
+                    fillColor = .blue
+                case .black:
+                    fillColor = .black
+                case .white:
+                    fillColor = .white
+                default:
+                    break
+                }
+                badgeFillColor = fillColor
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                badgeFillColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                badgeFillColor = .custom(color)
+            }
+        }
+    }()
+    
+    var badgeTextColor: Badge.TextColor? { didSet { setBadgeModel() } }
+    lazy var badgeTextColorSection = {
+        TokenColorPickerSection<BadgeTextColor>(rowTitle: "Text Color", picker: self.picker).with {
+            $0.onOtherSelected = { [weak self] item in
+                guard let self else { return }
+                badgeTextColor = nil
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                badgeTextColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                badgeTextColor = .custom(color)
+            }
+        }
+    }()
+    
     /// titleLockup
     var currentSurfaceColorType: SurfaceColorType = .title
     enum SurfaceColorType {
@@ -137,79 +201,78 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
         
     /// eyebrow
-    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setEyebrowModel() } }
-    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var eyebrowTextColorFormSection = {
-    lazy var eyebrowColorPickerSelectorView = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
-        PickerSelectorView(title: "primary",
+            $0.onOtherSelected = { [weak self] item in
-                           picker: self.picker,
+                guard let self else { return }
-                           items: TextColor.allCases)
+                switch item {
-    }()
+                case .primary:
-
+                    eyeBrowTextColor = .primary
-    lazy var eyebrowTokenColorView = {
+                case .secondary:
-        PickerSelectorView(title: "",
+                    eyeBrowTextColor = .secondary
-                           picker: self.picker,
+                default: break
-                           items: UIColor.VDSColor.allCases)
+                }
-        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+            }
-    }()
+            $0.onTokenSelected = { [weak self] color in
-
+                guard let self else { return }
-    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
+                eyeBrowTextColor = .token(color)
-        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            }
-            self?.currentSurfaceColorType = .eyebrow
+            $0.onColorSelected = { [weak self] color in
-            self?.colorPickerType = picker.pickerType
+                guard let self else { return }
-            self?.selectedColorTapped(picker)
+                eyeBrowTextColor = .custom(color)
+            }
         }
     }()
     
-    /// title
+    var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setSubTitleModel() } }
-    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var subTitleTextColorFormSection = {
-    var titleColorFormStackView = FormSection().with { $0.isHidden = true }
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
-    lazy var titleColorPickerSelectorView = {
+            $0.onOtherSelected = { [weak self] item in
-        PickerSelectorView(title: "primary",
+                guard let self else { return }
-                           picker: self.picker,
+                switch item {
-                           items: TitleTextColor.allCases)
+                case .primary:
-    }()
+                    subtitleTextColor = .primary
-    lazy var titleTokenColorView = {
+                case .secondary:
-        PickerSelectorView(title: "",
+                    subtitleTextColor = .secondary
-                           picker: self.picker,
+                default: break
-                           items: UIColor.VDSColor.allCases)
+                }
-        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+            }
-
+            $0.onTokenSelected = { [weak self] color in
-    }()
+                guard let self else { return }
-
+                subtitleTextColor = .token(color)
-    lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
+            }
-        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            $0.onColorSelected = { [weak self] color in
-            self?.currentSurfaceColorType = .title
+                guard let self else { return }
-            self?.colorPickerType = picker.pickerType
+                subtitleTextColor = .custom(color)
-            self?.selectedColorTapped(picker)
+            }
         }
     }()
     
-    /// subtitle
+    var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
-    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var titleTextColorFormSection = {
-    var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
+        TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color", picker: self.picker).with {
-    lazy var subtitleColorPickerSelectorView = {
+            $0.onOtherSelected = { [weak self] item in
-        PickerSelectorView(title: "primary",
+                guard let self else { return }
-                           picker: self.picker,
+                switch item {
-                           items: TextColor.allCases)
+                case .primary:
-    }()
+                    titleTextColor = .primary
-    lazy var subtitleTokenColorView = {
+                default: break
-        PickerSelectorView(title: "",
+                }
-                           picker: self.picker,
+            }
-                           items: UIColor.VDSColor.allCases)
+            $0.onTokenSelected = { [weak self] color in
-        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+                guard let self else { return }
-    }()
+                titleTextColor = .token(color)
-
+            }
-    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
+            $0.onColorSelected = { [weak self] color in
-        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+                guard let self else { return }
-            self?.currentSurfaceColorType = .subtitle
+                titleTextColor = .custom(color)
-            self?.colorPickerType = picker.pickerType
+            }
-            self?.selectedColorTapped(picker)
         }
     }()
     
+    ///Icons
     var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
-    var descriptionIconTokenFormStackView = FormSection().with { $0.isHidden = true }
-    var descriptionIconColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var descriptionNamePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -222,60 +285,31 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: Icon.Size.allCases)
     }()
 
-    lazy var descriptionIconColorPickerSelectorView = {
+    var descriptionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDescriptiveIconModel() } }
-        PickerSelectorView(title: "",
+    lazy var descriptionIconColorFormSection = {
-                           picker: self.picker,
+        TokenColorPickerSection<IconColor>(picker: self.picker).with {
-                           items: IconColor.allCases)
+            $0.onOtherSelected = { [weak self] item in
-        .with { $0.text = IconColor.default.rawValue }
+                guard let self else { return }
-    }()
+                switch item {
-
+                case .default:
-    lazy var descriptionIconTokenColorView = {
+                    descriptionIconColor = nil
-        PickerSelectorView(title: "",
+                default: break
-                           picker: self.picker,
+                }
-                           items: UIColor.VDSColor.allCases)
+            }
-        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+            $0.onTokenSelected = { [weak self] color in
-    }()
+                guard let self else { return }
-
+                descriptionIconColor = .token(color)
-    lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
+            }
-        return .init(with: ColorPickerType.custom) { [weak self] picker in
+            $0.onColorSelected = { [weak self] color in
-            self?.currentSurfaceColorType = .descriptionIcon
+                guard let self else { return }
-            self?.colorPickerType = picker.pickerType
+                descriptionIconColor = .custom(color)
-            self?.selectedColorTapped(picker)
+            }
+            $0.isHidden = true
         }
     }()
     
+
     var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
-    var directionalIconTokenFormStackView = FormSection().with { $0.isHidden = true }
-    var directionalIconColorFormStackView = FormSection().with { $0.isHidden = true }
-
-    lazy var directionalIconSizePickerSelectorView = {
-        PickerSelectorView(title: "",
-                           picker: self.picker,
-                           items: Icon.Size.allCases)
-    }()
-
-
-    lazy var directionalIconColorPickerSelectorView = {
-        PickerSelectorView(title: "",
-                           picker: self.picker,
-                           items: IconColor.allCases)
-        .with { $0.text = IconColor.default.rawValue }
-    }()
-
-    lazy var directionalIconTokenColorView = {
-        PickerSelectorView(title: "",
-                           picker: self.picker,
-                           items: UIColor.VDSColor.allCases)
-        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
-    }()
-
-    lazy var directionalIconCustomColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.custom) { [weak self] picker in
-            self?.currentSurfaceColorType = .directionalIcon
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
 
     lazy var directionIconPickerSelectorView = {
         PickerSelectorView(title: "",
@@ -288,6 +322,28 @@ class TileletViewController: BaseViewController<Tilelet> {
                            picker: self.picker,
                            items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
+    var directionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDirectionalIconModel() } }
+    lazy var directionIconColorFormSection = {
+        TokenColorPickerSection<IconColor>(picker: self.picker).with {
+            $0.onOtherSelected = { [weak self] item in
+                guard let self else { return }
+                switch item {
+                case .default:
+                    directionIconColor = nil
+                default: break
+                }
+            }
+            $0.onTokenSelected = { [weak self] color in
+                guard let self else { return }
+                directionIconColor = .token(color)
+            }
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                directionIconColor = .custom(color)
+            }
+            $0.isHidden = true
+        }
+    }()
     
     let backgroundImage = UIImage(named: "backgroundTest")!
     var clickableSwitch = Toggle()
@@ -357,10 +413,11 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: .init().with({
             $0.title = "Badge"
             $0.addFormRow(label: "Text", view: badgeTextField)
-            $0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
             $0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
             $0.addFormRow(label: "Max Width", view: maxWidthTextField)
         }))
+        append(section: badgeFillColorSection)
+        append(section: badgeTextColorSection)
 
         append(section: .init().with({
             $0.title = "Text Styles"
@@ -372,35 +429,21 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.title = "Eyebrow"
             $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
             $0.addFormRow(label: "Text", view: eyebrowTextField)
-            $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
         }))
-        
+        append(section: eyebrowTextColorFormSection)
-        eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
-        eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
-        append(section: eyebrowTokenFormStackView)
-        append(section: eyebrowColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Title"
             $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
             $0.addFormRow(label: "Text", view: titleTextField)
-            $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
         }))
-        
+        append(section: titleTextColorFormSection)
-        titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
-        titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
-        append(section: titleTokenFormStackView)
-        append(section: titleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Subtitle"
             $0.addFormRow(label: "Text", view: subTitleTextField)
-            $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
         }))
-        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
+        append(section: subTitleTextColorFormSection)
-        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
-        append(section: subtitleTokenFormStackView)
-        append(section: subtitleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Description Icon "
@@ -410,12 +453,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
         descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
         descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
-        descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
+        append(section: descriptionIconColorFormSection)
-        descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
-        descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
-        append(section: descriptionIconTokenFormStackView)
-        append(section: descriptionIconColorFormStackView)
-
         
         append(section: .init().with({
             $0.title = "Directional Icon"
@@ -424,11 +462,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: directionalIconFormStackView)
         directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
         directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
-        directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
+        append(section: directionIconColorFormSection)
-        directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
-        directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
-        append(section: directionalIconTokenFormStackView)
-        append(section: directionalIconColorFormStackView)
         
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
@@ -576,11 +610,57 @@ class TileletViewController: BaseViewController<Tilelet> {
             }.store(in: &subscribers)
     }
 
+    func setupModel() {
+        let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
+        let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
+        component.color = .black
+        component.surface = .light
+        component.titleModel = titleModel
+        component.subTitleModel = subTitleModel
+        component.padding = .small
+        //setup UI
+        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
+        textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
+        surfacePickerSelectorView.text = component.surface.rawValue
+        otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
+        titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
+        titleTextField.text = titleModel.text
+        subTitleTextField.text = subTitleModel.text
+        widthTextField.text = component.width != nil ? "\(component.width!)" : ""
+        textPositionPickerSelectorView.text = component.textPostion.rawValue
+        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
+        updateOtherTextStyles()
+        
+        descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
+        descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
+        
+        directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
+        directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
+        
+        badgeFillColorSection.setDefault(value: .red)
+        badgeTextColorSection.setDefault(value: .default)
+
+        eyebrowTextColorFormSection.setDefault(value: .primary)
+        titleTextColorFormSection.setDefault(value: .primary)
+        subTitleTextColorFormSection.setDefault(value: .primary)
+        
+        descriptionIconColorFormSection.setDefault(value: .token)
+        directionIconColorFormSection.setDefault(value: .token)
+    }
+    
     func setIconColorForms() {
         setDirectionalIconColorForm()
         setDescriptionIconColorForm()
     }
     
+    func setDirectionalIconColorForm() {
+        directionIconColorFormSection.isHidden = !showDirectionalIconSwitch.isOn
+    }
+    
+    func setDescriptionIconColorForm() {
+        descriptionIconColorFormSection.isHidden = !showDescriptionIconSwitch.isOn
+    }
+    
     func setDescriptionIconForm() {
         let showForm = showDescriptionIconSwitch.isOn
         descriptionIconFormStackView.isHidden = !showForm
@@ -607,62 +687,10 @@ class TileletViewController: BaseViewController<Tilelet> {
         setIconColorForms()
     }
     
-    func setDirectionalIconColorForm() {
-        let selectedItem = directionalIconColorPickerSelectorView.selectedItem
-        if showDirectionalIconSwitch.isOn && selectedItem != .default  {
-            directionalIconTokenFormStackView.isHidden = selectedItem != .token
-            directionalIconColorFormStackView.isHidden = selectedItem != .custom
-        } else {
-            directionalIconTokenFormStackView.isHidden = true
-            directionalIconColorFormStackView.isHidden = true
-        }
-    }
-    
-    func setDescriptionIconColorForm() {
-        let selectedItem = descriptionIconColorPickerSelectorView.selectedItem
-        if showDescriptionIconSwitch.isOn && selectedItem != .default {
-            descriptionIconTokenFormStackView.isHidden = selectedItem != .token
-            descriptionIconColorFormStackView.isHidden = selectedItem != .custom
-        } else {
-            descriptionIconTokenFormStackView.isHidden = true
-            descriptionIconColorFormStackView.isHidden = true
-        }
-    }
-    
-    func setupModel() {
-        let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
-        let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
-        component.color = .black
-        component.surface = .light
-        component.titleModel = titleModel
-        component.subTitleModel = subTitleModel
-        component.padding = .small
-        //setup UI
-        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
-        textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
-        surfacePickerSelectorView.text = component.surface.rawValue
-        otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
-        titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
-        titleTextField.text = titleModel.text
-        subTitleTextField.text = subTitleModel.text
-        widthTextField.text = component.width != nil ? "\(component.width!)" : ""
-        textPositionPickerSelectorView.text = component.textPostion.rawValue
-        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
-        updateOtherTextStyles()
-        
-        descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
-        descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
-        descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
-
-        directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
-        directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
-        directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
-    }
-    
     //sub models
     func setBadgeModel() {
         if let text = badgeTextField.text, !text.isEmpty {
-            component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
+            component.badgeModel = Tilelet.BadgeModel(text: text, textColor: badgeTextColor, fillColor: badgeFillColor, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
         } else {
             component.badgeModel = nil
         }
@@ -670,21 +698,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TitleTextColor
+            component.titleModel = Tilelet.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
-            switch titleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .token:
-                textColor = .token(titleTokenColorView.selectedItem)
-            case .custom:
-                if let color = titleCustomColorView.selectedColor {
-                    textColor = .custom(color)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
-                }
-            }
-            
-            component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
         } else {
             component.titleModel = nil
         }
@@ -692,23 +706,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TextColor
+            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: subtitleTextColor)
-            switch subtitleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .token:
-                textColor = .token(subtitleTokenColorView.selectedItem)
-            case .custom:
-                if let color = subtitleCustomColorView.selectedColor {
-                    textColor = .custom(color)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
-                }
-            }
-
-            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
         } else {
             component.subTitleModel = nil
         }
@@ -716,22 +714,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TextColor
+            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
-            switch eyebrowColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .token:
-                textColor = .token(eyebrowTokenColorView.selectedItem)
-            case .custom:
-                if let color = eyebrowCustomColorView.selectedColor {
-                    textColor = .custom(color)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
-                }
-            }
-            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.eyebrowModel = nil
         }
@@ -740,36 +723,19 @@ class TileletViewController: BaseViewController<Tilelet> {
     func setDescriptiveIconModel() {
         let iconSize = descriptionIconSizePickerSelectorView.selectedItem
         let iconName = descriptionNamePickerSelectorView.selectedItem
-        var iconColor: Tilelet.IconColor? = nil
         var accessibleText: String?
         if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty {
             accessibleText = at
         }
         
-        switch descriptionIconColorPickerSelectorView.selectedItem {
+        component.descriptiveIconModel = .init(name: iconName, iconColor: descriptionIconColor, size: iconSize, accessibleText: accessibleText ?? nil )
-        case .token:
-            iconColor = .token(descriptionIconTokenColorView.selectedItem)
-        case .custom:
-            iconColor = .custom(descriptionIconCustomColorView.selectedColor ?? .white)
-        default:
-            break
-        }
-        component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize, accessibleText: accessibleText ?? nil )
     }
     
     func setDirectionalIconModel() {
         let iconType = directionIconPickerSelectorView.selectedItem
         let iconSize = directionIconSizePickerSelectorView.selectedItem
-        var iconColor: Tilelet.IconColor? = nil
+
-        switch directionalIconColorPickerSelectorView.selectedItem {
+        component.directionalIconModel = .init(iconType: iconType, iconColor: directionIconColor, size: iconSize)
-        case .token:
-            iconColor = .token(directionalIconTokenColorView.selectedItem)
-        case .custom:
-            iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
-        default:
-            break
-        }
-        component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
     }
     
     func updateOtherTextStyles() {
@@ -802,10 +768,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self.component.textPostion = item
         }
         
-        badgeFillColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.badgeModel?.fillColor = item
-        }
-        
         badgeNumberOfLinesPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.badgeModel?.numberOfLines = item.intValue
         }
@@ -847,44 +809,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.component.color = .token(item)
         }
             
-        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentSurfaceColorType = .eyebrow
-            self?.eyebrowTokenFormStackView.isHidden = item != .token
-            self?.eyebrowColorFormStackView.isHidden = item != .custom
-            self?.setEyebrowModel()
-        }
-        
-        eyebrowTokenColorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setEyebrowModel()
-        }
-
-        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentSurfaceColorType = .title
-            self?.titleTokenFormStackView.isHidden = item != .token
-            self?.titleColorFormStackView.isHidden = item != .custom
-            self?.setTitleModel()
-        }
-        
-        titleTokenColorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setTitleModel()
-        }
-        
-        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentSurfaceColorType = .subtitle
-            self?.subtitleTokenFormStackView.isHidden = item != .token
-            self?.subtitleColorFormStackView.isHidden = item != .custom
-            self?.setSubTitleModel()
-        }
-        
-        subtitleTokenColorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setSubTitleModel()
-        }
-
-        descriptionIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setIconColorForms()
-            self?.setDescriptiveIconModel()
-        }
-        
         descriptionNamePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDescriptiveIconModel()
         }
@@ -893,16 +817,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setDescriptiveIconModel()
         }
 
-        descriptionIconTokenColorView.onPickerDidSelect = {  [weak self] item in
-            self?.colorPickerType = .token
-            self?.setDescriptiveIconModel()
-        }
-        
-        directionalIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setIconColorForms()
-            self?.setDirectionalIconModel()
-        }
-        
         directionIconPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDirectionalIconModel()
         }
@@ -911,10 +825,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setDirectionalIconModel()
         }
 
-        directionalIconTokenColorView.onPickerDidSelect = {  [weak self] item in
-            self?.colorPickerType = .token
-            self?.setDirectionalIconModel()
-        }
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -976,8 +886,6 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
     
     func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
         let color = viewController.selectedColor 
-        var lightColorView: ColorPickerView<ColorPickerType>
-        var darkColorView: ColorPickerView<ColorPickerType>
         switch colorPickerType {
         case .contentViewBackgroundColor:
             component.contentView.backgroundColor = color
@@ -988,23 +896,14 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             gradientColorView2.selectedColor = viewController.selectedColor
             updateGradientColors()
         case .custom:
-            var colorView: ColorPickerView<ColorPickerType>
+            var colorView: ColorPickerView<ColorPickerType>?
             
             switch currentSurfaceColorType {
             case .background:
                 colorView = backgroundColorCustomColorView
-            case .eyebrow:
+            default: break
-                colorView = eyebrowCustomColorView
-            case .title:
-                colorView = titleCustomColorView
-            case .subtitle:
-                colorView = subtitleCustomColorView
-            case .directionalIcon:
-                colorView = directionalIconCustomColorView
-            case .descriptionIcon:
-                colorView = descriptionIconCustomColorView
             }
-            colorView.selectedColor = viewController.selectedColor
+            colorView?.selectedColor = viewController.selectedColor
             
             switch currentSurfaceColorType {
             case .background:

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -36,21 +36,6 @@ 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 = .custom
-    
-    enum LabelType {
-        case eyebrow, title, subtitle
-    }
-    
     enum TitleTextColor: String, CaseIterable {
         case primary, token, custom
     }
@@ -59,80 +44,80 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         case primary, secondary, token, custom
     }
         
-    enum ColorPickerType {
-        case custom
-    }
-    
     /// eyebrow
-    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
-    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var eyebrowTextColorFormSection = {
-    lazy var eyebrowColorPickerSelectorView = {
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
-        PickerSelectorView(title: "primary",
+                                picker: self.picker).with {
-                           picker: self.picker,
+            $0.onOtherSelected = { [weak self] item in
-                           items: TextColor.allCases)
+                guard let self else { return }
-    }()
+                switch item {
-
+                case .primary:
-    lazy var eyebrowTokenColorView = {
+                    eyeBrowTextColor = .primary
-        PickerSelectorView(title: "",
+                case .secondary:
-                           picker: self.picker,
+                    eyeBrowTextColor = .secondary
-                           items: UIColor.VDSColor.allCases)
+                default: break
-        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
+                }
-    }()
+            }
-
+            $0.onTokenSelected = { [weak self] color in
-    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
+                guard let self else { return }
-        return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
+                eyeBrowTextColor = .token(color)
-            self?.colorPickerType = picker.pickerType
+            }
-            self?.selectedColorTapped(picker)
+            $0.onColorSelected = { [weak self] color in
+                guard let self else { return }
+                eyeBrowTextColor = .custom(color)
+            }
         }
     }()
     
-    /// title
+    var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
-    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var subTitleTextColorFormSection = {
-    var titleColorFormStackView = FormSection().with { $0.isHidden = true }
+        TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
-    lazy var titleColorPickerSelectorView = {
+                                picker: self.picker).with {
-        PickerSelectorView(title: "primary",
+            $0.onOtherSelected = { [weak self] item in
-                           picker: self.picker,
+                guard let self else { return }
-                           items: TitleTextColor.allCases)
+                switch item {
-    }()
+                case .primary:
-    
+                    subtitleTextColor = .primary
-    lazy var titleTokenColorView = {
+                case .secondary:
-        PickerSelectorView(title: "",
+                    subtitleTextColor = .secondary
-                           picker: self.picker,
+                default: break
-                           items: UIColor.VDSColor.allCases)
+                }
-        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
+            }
-    }()
+            $0.onTokenSelected = { [weak self] color in
-
+                guard let self else { return }
-    lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
+                subtitleTextColor = .token(color)
-        return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
+            }
-            self?.colorPickerType = picker.pickerType
+            $0.onColorSelected = { [weak self] color in
-            self?.selectedColorTapped(picker)
+                guard let self else { return }
+                subtitleTextColor = .custom(color)
+            }
         }
     }()
     
-    /// subtitle
+    var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
-    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var titleTextColorFormSection = {
-    var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
+        TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color",
-    lazy var subtitleColorPickerSelectorView = {
+                                picker: self.picker).with {
-        PickerSelectorView(title: "primary",
+            $0.onOtherSelected = { [weak self] item in
-                           picker: self.picker,
+                guard let self else { return }
-                           items: TextColor.allCases)
+                switch item {
-    }()
+                case .primary:
-    
+                    titleTextColor = .primary
-    lazy var subtitleTokenColorView = {
+                default: break
-        PickerSelectorView(title: "",
+                }
-                           picker: self.picker,
+            }
-                           items: UIColor.VDSColor.allCases)
+            $0.onTokenSelected = { [weak self] color in
-        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
+                guard let self else { return }
-    }()
+                titleTextColor = .token(color)
-
+            }
-    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
+            $0.onColorSelected = { [weak self] color in
-        return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
+                guard let self else { return }
-            self?.colorPickerType = picker.pickerType
+                titleTextColor = .custom(color)
-            self?.selectedColorTapped(picker)
+            }
         }
     }()
         
-
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -156,34 +141,22 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
             $0.title = "\nEyebrow"
             $0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
             $0.addFormRow(label: "Text", view: eyebrowTextField)
-            $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
         }))
         
-        eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
+        append(section: eyebrowTextColorFormSection)
-        eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
-        append(section: eyebrowTokenFormStackView)
-        append(section: eyebrowColorFormStackView)
 
         append(section: .init().with({
             $0.title = "\nTitle"
             $0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
             $0.addFormRow(label: "Text", view: titleTextField)
-            $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
         }))
-        titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
+        append(section: titleTextColorFormSection)
-        titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
-        append(section: titleTokenFormStackView)
-        append(section: titleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "\nSubtitle"
             $0.addFormRow(label: "Subtitle Text", view: subTitleTextField)
-            $0.addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
         }))
-        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
+        append(section: subTitleTextColorFormSection)
-        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
-        append(section: subtitleTokenFormStackView)
-        append(section: subtitleColorFormStackView)
         
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setOtherModels()
@@ -230,6 +203,10 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
         
+        eyebrowTextColorFormSection.setDefault(value: .primary)
+        titleTextColorFormSection.setDefault(value: .primary)
+        subTitleTextColorFormSection.setDefault(value: .primary)
+        
         setTitleModel()
         updateOtherTextStyles()
     }
@@ -238,21 +215,7 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         var titleTextStyle: TextStyle?
         if let text = titleTextField.text, !text.isEmpty {
             
-            var textColor: TitleLockup.TitleTextColor
+            component.titleModel = TitleLockup.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
-            switch titleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .token:
-                textColor = .token(titleTokenColorView.selectedItem)
-            case .custom:
-                if let color = titleCustomColorView.selectedColor {
-                    textColor = .custom(color)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
-                }
-            }
-
-            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
@@ -271,44 +234,14 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         let style = otherStandardStylePickerSelectorView.selectedItem
     
         if let text = subTitleTextField.text, !text.isEmpty {
-            var textColor: TitleLockup.TextColor
+            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleTextColor)
-            switch subtitleColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .token:
-                textColor = .token(subtitleTokenColorView.selectedItem)
-            case .custom:
-                if let color = subtitleCustomColorView.selectedColor {
-                    textColor = .custom(color)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
-                }
-            }
-            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 {
-            var textColor: TitleLockup.TextColor
+            component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
-            switch eyebrowColorPickerSelectorView.selectedItem {
-            case .primary:
-                textColor = .primary
-            case .secondary:
-                textColor = .secondary
-            case .token:
-                textColor = .token(eyebrowTokenColorView.selectedItem)
-            case .custom:
-                if let color = eyebrowCustomColorView.selectedColor {
-                    textColor = .custom(color)
-                } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
-                }           
-            }
-            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 {
@@ -340,40 +273,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         otherStandardStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.setOtherModels()
         }
-
-        
-        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .eyebrow
-            self?.eyebrowTokenFormStackView.isHidden = item != .token
-            self?.eyebrowColorFormStackView.isHidden = item != .custom
-            self?.setOtherModels()
-        }
-        
-        eyebrowTokenColorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setOtherModels()
-        }
-        
-        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .title
-            self?.titleTokenFormStackView.isHidden = item != .token
-            self?.titleColorFormStackView.isHidden = item != .custom
-            self?.setTitleModel()
-        }
-        
-        titleTokenColorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setTitleModel()
-        }
-        
-        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .subtitle
-            self?.subtitleTokenFormStackView.isHidden = item != .token
-            self?.subtitleColorFormStackView.isHidden = item != .custom
-            self?.setOtherModels()
-        }
-        
-        subtitleTokenColorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setOtherModels()
-        }
     }
 }
 
@@ -390,40 +289,3 @@ 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 colorView: ColorPickerView<ColorPickerType>
-        
-        switch currentLabelType {
-        case .eyebrow:
-            colorView = eyebrowCustomColorView
-        case .title:
-            colorView = titleCustomColorView
-        case .subtitle:
-            colorView = subtitleCustomColorView
-        }
-
-        colorView.selectedColor = viewController.selectedColor
-        
-        if currentLabelType == .title {
-            setTitleModel()
-        } else {
-            setOtherModels()
-        }
-    }
-}