VDSSample.xcodeproj/project.pbxproj

@@ -37,7 +37,6 @@
 		1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
 		183B16F52C80B27C00BA6A10 /* FootnoteGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */; };
 		184023492C61E9E700A412C8 /* PriceLockupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 184023482C61E9E700A412C8 /* PriceLockupViewController.swift */; };
-		1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */; };
 		186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
 		18926F5F2C76185A00C55BF6 /* FootnoteItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */; };
 		18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
@@ -108,7 +107,6 @@
 		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 */
@@ -142,7 +140,6 @@
 		1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
 		183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteGroupViewController.swift; sourceTree = "<group>"; };
 		184023482C61E9E700A412C8 /* PriceLockupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PriceLockupViewController.swift; sourceTree = "<group>"; };
-		1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListUnorderedViewController.swift; sourceTree = "<group>"; };
 		186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
 		18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteItemViewController.swift; sourceTree = "<group>"; };
 		18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
@@ -216,7 +213,6 @@
 		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 */
@@ -295,7 +291,6 @@
 				EAB5FEF22928153D00998C17 /* Helper.swift */,
 				EAD062A42A3B5CDF0015965D /* Slider.swift */,
 				EA89205028B68307006B9984 /* TextField.swift */,
-				EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */,
 			);
 			path = Classes;
 			sourceTree = "<group>";
@@ -359,7 +354,6 @@
 				180636CA2C29B12B00C92D86 /* InputStepperViewController.swift */,
 				EAB1D2D328AC409F00DAE764 /* LabelViewController.swift */,
 				44604AD829CE1CF900E62B51 /* LineViewController.swift */,
-				1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */,
 				EAD0688F2A55FC11002E3A2D /* LoaderViewController.swift */,
 				18C0F9472C98177F00E1DD71 /* ModalViewController.swift */,
 				445BA07929C088470036A7C5 /* NotificationViewController.swift */,
@@ -561,11 +555,9 @@
 				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 */,
-				1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */,
 				18C0F9482C98177F00E1DD71 /* ModalViewController.swift in Sources */,
 				EAB2376029E88D5D00AABE9A /* TooltipViewController.swift in Sources */,
 				EA89204828B66CE2006B9984 /* ScrollViewKeyboardAvoiding.swift in Sources */,
@@ -745,7 +737,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 75;
+				CURRENT_PROJECT_VERSION = 74;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -781,7 +773,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 75;
+				CURRENT_PROJECT_VERSION = 74;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;

VDSSample/Classes/ColorPickerView.swift

@@ -9,18 +9,14 @@ import Foundation
 import UIKit
 import VDS
 
-public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
+public class ColorPickerView<EnumType>: UIStackView {
+    public var pickerType: EnumType
     public var selectedColor: UIColor? {
         didSet {
             selectedColorView.backgroundColor = selectedColor
         }
     }
     
-    private var colorPicker: UIColorPickerViewController = {
-        let picker = UIColorPickerViewController()
-        return picker
-    }()
-
     var selectedColorView: UIView = {
         let view = UIView()
         view.translatesAutoresizingMaskIntoConstraints = false
@@ -35,23 +31,18 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         $0.text = "Select"
     }
 
-    /// Callback once the user picks a color from the picker.
+    public init(with pickerType: EnumType, color: UIColor? = nil, onClick: @escaping (ColorPickerView)->Void) {
-    public var onColorSelected: ((UIColor) -> Void)?
+        self.pickerType = pickerType
-
-    public init(color: UIColor? = nil) {
         super.init(frame: .zero)
         if let color {
             selectedColor = color
         }
-        colorPicker.delegate = self
         setup()
-        button.onClick = { _ in
+        button.onClick = { _ in onClick(self) }
-            UIApplication.topViewController()?.present(self.colorPicker, animated: true)
-        }
     }
     
     required init(coder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
+        fatalError()
     }
     
     private func setup() {
@@ -68,7 +59,6 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
         
         addArrangedSubview(indicatorWrapper)
-
         let buttonWrapper = View()
         buttonWrapper.addSubview(button)
         buttonWrapper.height(32)
@@ -78,15 +68,4 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
         addArrangedSubview(buttonWrapper)
     }
-   
-    // MARK: - UIColorPickerViewControllerDelegate
-
-    public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        selectedColor = viewController.selectedColor
-        onColorSelected?(viewController.selectedColor)
-    }
-   
-    public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        UIApplication.topViewController()?.dismiss(animated: true)
-    }
 }

VDSSample/Classes/TokenColorPickerFormSection.swift

@@ -1,107 +0,0 @@
-//
-//  TokenColorPickerFormSection.swift
-//  VDSSample
-//
-//  Created by Matt Bruce on 10/7/24.
-//
-
-import Foundation
-import UIKit
-import VDS
-
-public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>: FormSection where EnumType.RawValue == String {
-   
-    //--------------------------------------------------
-    // MARK: - Private Properties
-    //--------------------------------------------------
-    private var picker: UIPickerView
-    private var rowTitle: String = "Color"   
-    private var rowToolTip: Tooltip.TooltipModel?
-
-    ///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 = {
-        .init(color: .black).with {
-            $0.onColorSelected =  { [weak self] color in
-                guard let self else { return }
-                onColorSelected?(color)
-            }
-        }
-    }()
-
-    //--------------------------------------------------
-    // 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 onSelected: ((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)?
-    
-    ///Pass in a title and the reference for the picker
-    public init(title: String? = nil, rowTitle: String = "Color", rowTooltip: Tooltip.TooltipModel? = nil, picker: UIPickerView) {
-        self.picker = picker
-        super.init(frame: .zero)
-        self.title = title
-        self.rowTitle = rowTitle
-        self.rowToolTip = rowTooltip
-        setup()
-    }
-   
-    required init(coder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
-    }
-
-    public func setup() {
-        addFormRow(label: rowTitle, tooltip: rowToolTip, 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 {
-                self.onTokenSelected?(self.tokenColorView.selectedItem)
-            } else if let selectedItem = self.customColorView.selectedColor, isCustom {
-                self.onColorSelected?(selectedItem)
-            } else {
-                self.onSelected?(item)
-            }
-            self.tokenColorRow?.isHidden = !isToken
-            self.customColorRow?.isHidden = !isCustom
-        }
-       
-        tokenColorView.onPickerDidSelect = { [weak self] item in
-            guard let self else { return }
-            self.onTokenSelected?(item)
-        }
-    }
-   
-    public func setDefault(value: EnumType) {
-        pickerSelectorView.set(item: value)
-    }
-}

VDSSample/ViewControllers/BadgeIndicatorViewController.swift

@@ -37,46 +37,19 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
                            items: BadgeIndicator.MaximumDigits.allCases)
     }()
     
-    enum BorderColor: String, CaseIterable {
+    lazy var borderColorLightPickerSelectorView = {
-        case `default`, token, custom
+        PickerSelectorView(title: "",
-    }
+                           picker: self.picker,
-    
+                           items: UIColor.VDSColor.allCases)
-    lazy var borderColorLightPickerSelectorView: TokenColorPickerSection  = {
-        TokenColorPickerSection<BorderColor>(rowTitle: "Border Light",
-                                                 picker: self.picker).with {
-            $0.onSelected = { [weak self] color in
-                guard let self else { return }
-                component.borderColorLight = nil
-            }
-            $0.onTokenSelected = { [weak self] color in
-                guard let self else { return }
-                component.borderColorLight = color.uiColor
-            }
-            $0.onColorSelected = { [weak self] color in
-                guard let self else { return }
-                component.borderColorLight = color
-            }
-        }
     }()
 
-    lazy var borderColorDarkPickerSelectorView : TokenColorPickerSection  = {
+    lazy var borderColorDarkPickerSelectorView = {
-        TokenColorPickerSection<BorderColor>(rowTitle: "Border Dark",
+        PickerSelectorView(title: "",
-                                                 picker: self.picker).with {
+                           picker: self.picker,
-            $0.onSelected = { [weak self] color in
+                           items: UIColor.VDSColor.allCases)
-                guard let self else { return }
-                component.borderColorDark = nil
-            }
-            $0.onTokenSelected = { [weak self] color in
-                guard let self else { return }
-                component.borderColorDark = color.uiColor
-            }
-            $0.onColorSelected = { [weak self] color in
-                guard let self else { return }
-                component.borderColorDark = color
-            }
-        }
     }()
 
+    
     var textField = NumericField()
     var leadingCharacterTextField = TextField()
     var accessibilityTextField = TextField()
@@ -110,8 +83,8 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Hide Border", view: hideBorderSwitch, pinTrailing: false)
-        append(section: borderColorLightPickerSelectorView)
+        addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
-        append(section: borderColorDarkPickerSelectorView)
+        addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
         addFormRow(label: "Size", view: textSizePickerSelectorView)
         addFormRow(label: "Accessiblity Text", view: accessibilityTextField)
         
@@ -200,6 +173,8 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         fillColorPickerSelectorView.text = component.fillColor.rawValue
         textSizePickerSelectorView.text = component.size.rawValue
         maxDigitsPickerSelectorView.text = component.maximumDigits.rawValue
+        borderColorDarkPickerSelectorView.text = component.borderColorDark?.toVDSColor()?.rawValue ?? ""
+        borderColorLightPickerSelectorView.text = component.borderColorLight?.toVDSColor()?.rawValue ?? ""
         textField.text = "\(component.number!)"
         visibleForms()
     }
@@ -232,6 +207,14 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         maxDigitsPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.maximumDigits = item
         }
+        
+        borderColorDarkPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.borderColorDark = item.uiColor
+        }
+        
+        borderColorLightPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.borderColorLight = item.uiColor
+        }
     }
 }
 

VDSSample/ViewControllers/BadgeViewController.swift

@@ -37,13 +37,11 @@ class  BadgeViewController: BaseViewController<Badge> {
         }
     }
     
-    enum FillColor: String, CaseIterable {
+    lazy var fillColorPickerSelectorView = {
-        case red, yellow, green, orange, blue, black, white, token, custom
+        PickerSelectorView(title: "red",
-    }
+                            picker: self.picker,
-
+                           items: Badge.FillColor.allCases)
-    enum TextColor: String, CaseIterable {
+    }()
-        case `default`, token, custom
-    }
     
     lazy var numberOfLinesPickerSelectorView = {
         PickerSelectorView(title: "one",
@@ -61,66 +59,10 @@ class  BadgeViewController: BaseViewController<Badge> {
         setupModel()
     }
     
-    lazy var fillColorSection = {
-        TokenColorPickerSection<FillColor>(rowTitle: "Fill Color", picker: self.picker).with {
-            $0.onSelected = { [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.onSelected = { [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)
@@ -147,8 +89,6 @@ 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(){
@@ -157,6 +97,14 @@ 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/ButtonIconViewController.swift

@@ -76,36 +76,34 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         setupModel()
     }
     
-    var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true; $0.title = "Badge Indicator" }
+    var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true }
     
     ///ColorPicker
-    lazy var lightColorPicker: ColorPickerView = {
+    var colorPickerType: ColorPickerType = .light
-        return .init().with {
+    enum ColorPickerType {
-            $0.onColorSelected =  { [weak self] _ in
+        case light, dark
-                guard let self else { return }
-                updateColors()
     }
+    
+    lazy var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        picker.delegate = self
+        return picker
+    }()
+    
+    lazy var lightColorPicker: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) {[weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
         }
     }()
     
     lazy var darkColorPicker: ColorPickerView = {
-        return .init().with {
+        return .init(with: ColorPickerType.dark) {[weak self] picker in
-            $0.onColorSelected =  { [weak self] _ in
+            self?.colorPickerType = picker.pickerType
-                guard let self else { return }
+            self?.selectedColorTapped(picker)
-                updateColors()
-            }
         }
     }()
     
-    func updateColors() {
-        if let selectedLightColor = lightColorPicker.selectedColor {
-            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedLightColor)
-        } else if let selectedDarkColor = darkColorPicker.selectedColor,
-           let selectedLightColor = lightColorPicker.selectedColor {
-            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
-        }
-    }
-    
     override func setupForm(){
         super.setupForm()
         addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
@@ -113,25 +111,21 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "Kind", view: kindPickerSelectorView)
+        addFormRow(label: "Selected Light", view: lightColorPicker)
+        addFormRow(label: "Selected Dark", view: darkColorPicker)
         addFormRow(label: "Floating", view: floating, pinTrailing: false)
         addFormRow(label: "Hide Border", view: hideBorder, pinTrailing: false)
         addFormRow(label: "Fit To Icon", view: fitToIcon, pinTrailing: false)
         addFormRow(label: "Name", view: namePickerSelectorView)
+        addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
+        addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
         addFormRow(label: "X Offset", view: centerX)
         addFormRow(label: "Y Offset", view: centerY)
         
-        append(section: .init().with {
-            $0.title = "Select State"
-            $0.addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
-            $0.addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
-            $0.addFormRow(label: "Selected Light", view: lightColorPicker)
-            $0.addFormRow(label: "Selected Dark", view: darkColorPicker)
-        })
-        
-        addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false)
         //badgeIndicator section
+        addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false)
         badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView)
-        badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch, pinTrailing: false)
+        badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch)
         badgeIndicatorFormStackView.addFormRow(label: "Custom X offset", view: customBadgeIndicatorXField)
         badgeIndicatorFormStackView.addFormRow(label: "Custom Y offset", view: customBadgeIndicatorYField)
 
@@ -224,8 +218,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     
     func setupModel() {
         let name = Icon.Name.addToFavorite
-        let selectedName = Icon.Name.addedToFavorite
+        
-        component.selectedIconName = selectedName
         component.iconName = name
         component.onChange = { c in print("changed: \(c.isSelected)") }
         //setup UI
@@ -234,7 +227,6 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         kindPickerSelectorView.text = component.kind.rawValue
         sizePickerSelectorView.text = component.size.rawValue
         namePickerSelectorView.text = name.rawValue
-        selectedIconNamePickerSelectorView.text = selectedName.rawValue
         disabledSwitch.isOn = !component.isEnabled
         badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue
     }
@@ -316,3 +308,27 @@ extension ButtonIconViewController: ComponentSampleable {
         return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
     }
 }
+
+extension ButtonIconViewController: 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) {
+        let color = viewController.selectedColor
+        let selectedColorPickerView = colorPickerType == .dark ? darkColorPicker : lightColorPicker
+        selectedColorPickerView.selectedColor = color
+        if let selectedDarkColor = darkColorPicker.selectedColor, let selectedLightColor = lightColorPicker.selectedColor {
+            component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
+        }
+    }
+}

VDSSample/ViewControllers/IconViewController.swift

@@ -12,50 +12,17 @@ import VDSCoreTokens
 import Combine
 
 class IconViewController: BaseViewController<Icon> {
-    enum IconColor: String, CaseIterable {
-        case `default`, token, custom
-    }
     
-    lazy var lightColorPickerSelectorView : TokenColorPickerSection  = {
+    lazy var lightColorPickerSelectorView = {
-        TokenColorPickerSection<IconColor>(rowTitle: "Light Color",
+        PickerSelectorView(title: "",
-                                picker: self.picker).with {
+                           picker: self.picker,
-            $0.onSelected = { [weak self] color in
+                           items: UIColor.VDSColor.allCases)
-                guard let self else { return }
-                light = .black
-                setColorConfiguration()
-            }
-            $0.onTokenSelected = { [weak self] color in
-                guard let self else { return }
-                light = color.uiColor
-                setColorConfiguration()
-            }
-            $0.onColorSelected = { [weak self] color in
-                guard let self else { return }
-                light = color
-                setColorConfiguration()
-            }
-        }
     }()
 
-    lazy var darkColorPickerSelectorView: TokenColorPickerSection  = {
+    lazy var darkColorPickerSelectorView = {
-        TokenColorPickerSection<IconColor>(rowTitle: "Dark Color",
+        PickerSelectorView(title: "",
-                                picker: self.picker).with {
+                           picker: self.picker,
-            $0.onSelected = { [weak self] color in
+                           items: UIColor.VDSColor.allCases)
-                guard let self else { return }
-                dark = .white
-                setColorConfiguration()
-            }
-            $0.onTokenSelected = { [weak self] color in
-                guard let self else { return }
-                dark = color.uiColor
-                setColorConfiguration()
-            }
-            $0.onColorSelected = { [weak self] color in
-                guard let self else { return }
-                dark = color
-                setColorConfiguration()
-            }
-        }
     }()
 
     lazy var namePickerSelectorView = {
@@ -84,8 +51,8 @@ class IconViewController: BaseViewController<Icon> {
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "Custom Size", view: customSizeField)
-        append(section: lightColorPickerSelectorView)
+        addFormRow(label: "Light Color", view: lightColorPickerSelectorView)
-        append(section: darkColorPickerSelectorView)
+        addFormRow(label: "Dark Color", view: darkColorPickerSelectorView)
         addFormRow(label: "Name", view: namePickerSelectorView)
         
         customSizeField
@@ -102,6 +69,8 @@ class IconViewController: BaseViewController<Icon> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         sizePickerSelectorView.text = component.size.rawValue
+        lightColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOnlight.rawValue
+        darkColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOndark.rawValue
         namePickerSelectorView.text = name.rawValue
     }
     func setupPicker(){
@@ -115,14 +84,22 @@ class IconViewController: BaseViewController<Icon> {
             self?.component.size = item
         }
         
+        lightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.setColorConfiguration()
+        }
+        
+        darkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.setColorConfiguration()
+        }
+        
         namePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.name = item
         }
     }
     
-    var light: UIColor = .black
-    var dark: UIColor = .white
     func setColorConfiguration() {
+        let light = lightColorPickerSelectorView.selectedItem.uiColor
+        let dark = darkColorPickerSelectorView.selectedItem.uiColor
         component.colorConfiguration = .init(light, dark)
     }
 

VDSSample/ViewControllers/ListUnorderedViewController.swift

@@ -1,138 +0,0 @@
-//
-//  ListUnorderedViewController.swift
-//  VDSSample
-//
-//  Created by Vasavi Kanamarlapudi on 16/10/24.
-//
-
-import Foundation
-import VDS
-
-class ListUnorderedViewController: BaseViewController<ListUnordered> {
-    
-    lazy var sizePickerView = {
-        PickerSelectorView(title: "Large",
-                           picker: self.picker,
-                           items: ListUnordered.Size.allCases)
-    }()
-    
-    lazy var spacingPickerView = {
-        PickerSelectorView(title:"Standard",
-                           picker: self.picker,
-                           items: ListUnordered.Spacing.allCases)
-    }()
-    
-    var leadInTextField = TextField()
-    var itemLevelTwoTextOne = TextField()
-    var itemLevelTwoTextTwo = TextField()
-    
-    var unorderedList: [ListUnordered.ListUnorderedItemModel]?
-    
-    override func viewDidLoad() {
-        super.viewDidLoad()
-        addContentTopView(view: component)
-        setupPicker()
-        setupModel()
-    }
-    
-    override func setupForm() {
-        super.setupForm()
-        addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Size", view: sizePickerView)
-        addFormRow(label: "Spacing", view: spacingPickerView)
-        
-        let form1 = FormSection()
-        form1.title = "Lead-In Text (optional)"
-        form1.addFormRow(label: "Lead In Text", view: leadInTextField)
-        
-        let form2 = FormSection()
-        form2.title = "List Item Level 2 (Optional)"
-        form2.addFormRow(label: "Subtext 1", view: itemLevelTwoTextOne)
-        form2.addFormRow(label: "Subtext 2", view: itemLevelTwoTextTwo)
-        
-        append(section: form1)
-        append(section: form2)
-        
-        leadInTextField
-            .textPublisher
-            .sink { [weak self] text in
-                self?.component.leadInText = text
-            }.store(in: &subscribers)
-        
-        itemLevelTwoTextOne
-            .textPublisher
-            .sink { [weak self] text in
-                guard let self else { return }
-                self.updateUnorderList()
-                self.component.unorderedList = unorderedList ?? []
-            }.store(in: &subscribers)
-        
-        itemLevelTwoTextTwo
-            .textPublisher
-            .sink { [weak self] text in
-                guard let self else { return }
-                self.updateUnorderList()
-                self.component.unorderedList = unorderedList ?? []
-            }.store(in: &subscribers)
-    }
-    
-    func setupPicker() {
-        surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.component.surface = item
-            self?.contentTopView.backgroundColor = item.color
-        }
-        
-        sizePickerView.onPickerDidSelect = { [weak self] item in
-            self?.component.size = item
-        }
-        
-        spacingPickerView.onPickerDidSelect = { [weak self] item in
-            self?.component.spacing = item
-        }
-    }
-    
-    func setupModel() {
-        sizePickerView.text = component.size.rawValue
-        spacingPickerView.text = component.spacing.rawValue
-        leadInTextField.text = "To manage your existing Call Intercept calling feature:"
-        self.component.leadInText = leadInTextField.text
-        itemLevelTwoTextOne.text = "Priority callers can bypass Call Intercept by entering your 4 digit Call Intercept Override Code."
-        itemLevelTwoTextTwo.text = "Your phone will alert you with a short-short-long ring and \"Priority Caller\" will appear on your display."
-        updateUnorderList()
-        self.component.unorderedList = self.unorderedList ?? []
-    }
-    
-    // Update test data
-    func updateUnorderList() {
-        if (itemLevelTwoTextOne.text?.isEmpty == true) {
-            itemLevelTwoTextOne.text = nil
-        }
-        if (itemLevelTwoTextTwo.text?.isEmpty == true) {
-            itemLevelTwoTextTwo.text = nil
-        }
-        var levelTwoSubTexts : [String?]? = nil
-        if let subtextOneEmpty = itemLevelTwoTextOne.text?.isEmpty, let subtextTwoEmpty = itemLevelTwoTextTwo.text?.isEmpty {
-            if !subtextOneEmpty && !subtextTwoEmpty {
-                levelTwoSubTexts = [itemLevelTwoTextOne.text, itemLevelTwoTextTwo.text]
-            } else if !subtextOneEmpty || !subtextTwoEmpty {
-                if subtextOneEmpty {
-                    levelTwoSubTexts = [itemLevelTwoTextTwo.text]
-                } else if subtextTwoEmpty {
-                    levelTwoSubTexts = [itemLevelTwoTextOne.text]
-                }
-            }
-            unorderedList = [
-                .init(itemLevelOneText: "Call 800-435-7986 to have your PIN reset."),
-                .init(itemLevelOneText: "To bypass Call Intercept",
-                      itemLevelTwoTexts: levelTwoSubTexts)
-            ]
-        }
-    }
-}
-
-extension ListUnorderedViewController: ComponentSampleable {
-    static func makeSample() -> ComponentSample {
-        let component = Self.makeComponent()
-        return ComponentSample(component: component)
-    }
-}

VDSSample/ViewControllers/MenuViewController.swift

@@ -89,7 +89,6 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "InputStepper", completed: true, viewController: InputStepperViewController.self),
         MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
         MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
-        MenuComponent(title: "List Unordered", completed: false, viewController: ListUnorderedViewController.self),
         MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
         MenuComponent(title: "Modal", completed: true, viewController: ModalViewController.self),
         MenuComponent(title: "Notification", completed: true, viewController: NotificationViewController.self),

VDSSample/ViewControllers/TableViewController.swift

@@ -147,11 +147,7 @@ class TableViewController: BaseViewController<Table> {
     func setupModel() {
         ///Header row
         
-        let tableInfoLabel = Label().with({
+        self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: nil),
-            $0.text = ""
-            $0.accessibilityLabel = "Verizon Plan compare, table, with 3 Rows, 3 Columns, Empty"
-        })
-        self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: tableInfoLabel),
                                                               TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Verizon smart family"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping}),
                                                               TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Call filter"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping })], isHeader: true)]
         

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -13,6 +13,12 @@ import Combine
 
 class TileContainerViewController: BaseViewController<TileContainer> {
     
+    lazy var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        picker.delegate = self
+        return picker
+    }()
+    
     lazy var imageFallbackColorPickerSelectorView = {
         SurfacePickerSelectorView(picker: self.picker)
     }()
@@ -47,6 +53,12 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     var customPaddingRowView: UIView?
     var anyCancellable: AnyCancellable?
     
+    var contentAreaBackgroundColorButton = Button().with { instance in
+        instance.size = .small
+        instance.use = .secondary
+        instance.text = "Select"
+    }
+    
     var paddingTextField = NumericField().with {
         $0.placeholder = "Custom Padding"
     }
@@ -58,50 +70,46 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         $0.placeholder = "Minimum 100px else it will occupy full container"
     }
     
-    lazy var backgroundColorPickerSelectorView: TokenColorPickerSection  = {
+    var colorPickerType: ColorPickerType = .gradientColor1
-        TokenColorPickerSection<BackgroundColor>(rowTitle: "Background Color",
+    enum ColorPickerType {
-                                picker: self.picker).with {
+        case custom, gradientColor1, gradientColor2, contentViewBackgroundColor
-            $0.onSelected = { [weak self] item in
-                guard let self else { return }
-                switch item {
-                case .primary:
-                    component.color = .primary
-                case .secondary:
-                    component.color = .secondary
-                case .white:
-                    component.color = .white
-                case .black:
-                    component.color = .black
-                default: break;
     }
-            }
-            $0.onTokenSelected = { [weak self] color in
-                guard let self else { return }
-                component.color = .custom(color.uiColor)
-            }
-            $0.onColorSelected = { [weak self] color in
-                guard let self else { return }
-                component.color = .custom(color)
     
-            }
+    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
         }
     }()
     
-    lazy var gradientColorView1: ColorPickerView = {
+    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
-        return .init().with {
+        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
-            $0.onColorSelected =  { [weak self] _ in
+            self?.colorPickerType = picker.pickerType
-                guard let self else { return }
+            self?.selectedColorTapped(picker)
-                updateGradientColors()
-            }
         }
     }()
     
-    lazy var gradientColorView2: ColorPickerView = {
+    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
-        return .init().with {
+    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
-            $0.onColorSelected =  { [weak self] _ in
+    
-                guard let self else { return }
+    lazy var backgroundColorPickerSelectorView = {
-                updateGradientColors()
+        PickerSelectorView(title: "",
-            }
+                           picker: self.picker,
+                           items: BackgroundColor.allCases)
+        .with { $0.text = BackgroundColor.white.rawValue }
+    }()
+
+    lazy var backgroundColorTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
         }
     }()
     
@@ -200,10 +208,21 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         addFormRow(label: "Height", view: heightTextField)
         addFormRow(label: "Show Border", view: showBorderSwitch, pinTrailing: false)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
-        append(section: backgroundColorPickerSelectorView)
+        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        
+        backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
+        backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
+        append(section: backgroundColorTokenFormStackView)
+        append(section: backgroundColorFormStackView)
+
+        
         addFormRow(label: "Padding", view: paddingPickerSelectorView)
         customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
         customPaddingRowView?.isHidden = true
+        let rowView = addFormRow(label: "Content area BG color(only for padding validation)", view: contentAreaBackgroundColorButton)
+        if let rowView = rowView as? UIStackView {
+            rowView.alignment = .top
+        }
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -290,7 +309,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     func setupModel() {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
-        backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
+        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
         paddingPickerSelectorView.text = padding.rawValue
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
@@ -304,6 +323,20 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             self?.contentTopView.backgroundColor = item.color
         }
         
+        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            if let color = item.color {
+                self.component.color = color
+            } else {
+                backgroundColorTokenFormStackView.isHidden = item != .token
+                backgroundColorFormStackView.isHidden = item != .custom
+            }
+        }
+        
+        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.component.color = .token(item)
+        }
+        
         backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in
             guard let self else { return }
             if let effect = $0.effect {
@@ -312,6 +345,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
                 self.gradientColorView1.selectedColor = nil
                 self.gradientColorView2.selectedColor = nil
             } else {
+                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -335,12 +369,12 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.imageFallbackColor = item
         }
-    }
         
-    func updateGradientColors(){
+        contentAreaBackgroundColorButton.onClick = { [weak self] _ in
-        if let selectedGradient1Color = gradientColorView1.selectedColor,
+            guard let self else { return }
-           let selectedGradient2Color = gradientColorView2.selectedColor{
+            self.colorPickerType = .contentViewBackgroundColor
-            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+            self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white
+            self.present(self.colorPicker, animated: true)
         }
     }
     
@@ -355,6 +389,45 @@ extension TileContainerViewController: ComponentSampleable {
     }
 }
 
+extension TileContainerViewController: 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) {
+        let color = viewController.selectedColor
+        switch colorPickerType {
+        case .contentViewBackgroundColor:
+            component.contentView.backgroundColor = color
+        case .gradientColor1:
+            gradientColorView1.selectedColor = viewController.selectedColor
+            updateGradientColors()
+        case .gradientColor2:
+            gradientColorView2.selectedColor = viewController.selectedColor
+            updateGradientColors()
+        case .custom:
+            backgroundColorCustomColorView.selectedColor = color
+            component.color = .custom(color)
+        }
+    }
+    
+    func updateGradientColors(){
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+        }
+    }
+}
+
 extension TileContainerViewController {
     
     //Created new BackgroundEffect enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable

VDSSample/ViewControllers/TileletViewController.swift

@@ -39,7 +39,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     lazy var badgeFillColorPickerSelectorView = {
         PickerSelectorView(title: "red",
                            picker: self.picker,
-                           items: BadgeViewController.FillColor.allCases)
+                           items: Badge.FillColor.allCases)
     }()
     lazy var badgeNumberOfLinesPickerSelectorView = {
         PickerSelectorView(title: "one",
@@ -61,125 +61,63 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TileContainerViewController.BackgroundEffect.allCases)
     }()
     
-    lazy var backgroundColorPickerSelectorView: TokenColorPickerSection  = {
+    lazy var colorPicker: UIColorPickerViewController = {
-        TokenColorPickerSection<BackgroundColor>(
+        let picker = UIColorPickerViewController()
-            rowTitle: "Background Color",
+        picker.delegate = self
-            rowTooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."),
+        return picker
-            picker: self.picker).with {
+    }()
-                $0.onSelected = { [weak self] item in
-                    guard let self else { return }
-                    switch item {
-                    case .primary:
-                        component.color = .primary
-                    case .secondary:
-                        component.color = .secondary
-                    case .white:
-                        component.color = .white
-                    case .black:
-                        component.color = .black
-                    default: break;
-                    }
-                }
-                $0.onTokenSelected = { [weak self] color in
-                    guard let self else { return }
-                    component.color = .custom(color.uiColor)
-                }
-                $0.onColorSelected = { [weak self] color in
-                    guard let self else { return }
-                    component.color = .custom(color)
     
+    var colorPickerType: ColorPickerType = .custom
+    enum ColorPickerType {
+        case gradientColor1, gradientColor2
+        case contentViewBackgroundColor, token, custom
     }
+    
+    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
         }
     }()
     
-    lazy var gradientColorView1: ColorPickerView = {
+    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
-        return .init().with {
+        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
-            $0.onColorSelected =  { [weak self] _ in
+            self?.colorPickerType = picker.pickerType
-                guard let self else { return }
+            self?.selectedColorTapped(picker)
-                updateGradientColors()
-            }
         }
     }()
     
-    lazy var gradientColorView2: ColorPickerView = {
+    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
-        return .init().with {
+    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
-            $0.onColorSelected =  { [weak self] _ in
+    lazy var backgroundColorPickerSelectorView = {
-                guard let self else { return }
+        PickerSelectorView(title: "",
-                updateGradientColors()
+                           picker: self.picker,
-            }
+                           items: BackgroundColor.allCases)
+        .with { $0.text = BackgroundColor.white.rawValue }
+    }()
+    
+    lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.currentSurfaceColorType = .background
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
         }
     }()
     
+    lazy var backgroundColorTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    
     lazy var textAlignmentPickerSelectorView = {
         PickerSelectorView(title: "left",
                            picker: self.picker,
                            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.onSelected = { [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.onSelected = { [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 {
@@ -199,78 +137,79 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     /// eyebrow
-    var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setEyebrowModel() } }
+    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var eyebrowTextColorFormSection = {
+    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
-        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
+    lazy var eyebrowColorPickerSelectorView = {
-            $0.onSelected = { [weak self] item in
+        PickerSelectorView(title: "primary",
-                guard let self else { return }
+                           picker: self.picker,
-                switch item {
+                           items: TextColor.allCases)
-                case .primary:
+    }()
-                    eyeBrowTextColor = .primary
+
-                case .secondary:
+    lazy var eyebrowTokenColorView = {
-                    eyeBrowTextColor = .secondary
+        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 }
+
-                eyeBrowTextColor = .token(color)
+    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
-            }
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
-            $0.onColorSelected = { [weak self] color in
+            self?.currentSurfaceColorType = .eyebrow
-                guard let self else { return }
+            self?.colorPickerType = picker.pickerType
-                eyeBrowTextColor = .custom(color)
+            self?.selectedColorTapped(picker)
-            }
         }
     }()
     
-    var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setSubTitleModel() } }
+    /// title
-    lazy var subTitleTextColorFormSection = {
+    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
-        TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
+    var titleColorFormStackView = FormSection().with { $0.isHidden = true }
-            $0.onSelected = { [weak self] item in
+    lazy var titleColorPickerSelectorView = {
-                guard let self else { return }
+        PickerSelectorView(title: "primary",
-                switch item {
+                           picker: self.picker,
-                case .primary:
+                           items: TitleTextColor.allCases)
-                    subtitleTextColor = .primary
+    }()
-                case .secondary:
+    lazy var titleTokenColorView = {
-                    subtitleTextColor = .secondary
+        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 }
+    }()
-                subtitleTextColor = .token(color)
+
-            }
+    lazy var titleCustomColorView: 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 = .title
-                subtitleTextColor = .custom(color)
+            self?.colorPickerType = picker.pickerType
-            }
+            self?.selectedColorTapped(picker)
         }
     }()
     
-    var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
+    /// subtitle
-    lazy var titleTextColorFormSection = {
+    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
-        TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color", picker: self.picker).with {
+    var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
-            $0.onSelected = { [weak self] item in
+    lazy var subtitleColorPickerSelectorView = {
-                guard let self else { return }
+        PickerSelectorView(title: "primary",
-                switch item {
+                           picker: self.picker,
-                case .primary:
+                           items: TextColor.allCases)
-                    titleTextColor = .primary
+    }()
-                default: break
+    lazy var subtitleTokenColorView = {
-                }
+        PickerSelectorView(title: "",
-            }
+                           picker: self.picker,
-            $0.onTokenSelected = { [weak self] color in
+                           items: UIColor.VDSColor.allCases)
-                guard let self else { return }
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
-                titleTextColor = .token(color)
+    }()
-            }
+
-            $0.onColorSelected = { [weak self] color in
+    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
-                guard let self else { return }
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
-                titleTextColor = .custom(color)
+            self?.currentSurfaceColorType = .subtitle
-            }
+            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,
@@ -283,31 +222,60 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: Icon.Size.allCases)
     }()
 
-    var descriptionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDescriptiveIconModel() } }
+    lazy var descriptionIconColorPickerSelectorView = {
-    lazy var descriptionIconColorFormSection = {
+        PickerSelectorView(title: "",
-        TokenColorPickerSection<IconColor>(picker: self.picker).with {
+                           picker: self.picker,
-            $0.onSelected = { [weak self] item in
+                           items: IconColor.allCases)
-                guard let self else { return }
+        .with { $0.text = IconColor.default.rawValue }
-                switch item {
+    }()
-                case .default:
+
-                    descriptionIconColor = nil
+    lazy var descriptionIconTokenColorView = {
-                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 }
+    }()
-                descriptionIconColor = .token(color)
+
-            }
+    lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
-            $0.onColorSelected = { [weak self] color in
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
-                guard let self else { return }
+            self?.currentSurfaceColorType = .descriptionIcon
-                descriptionIconColor = .custom(color)
+            self?.colorPickerType = picker.pickerType
-            }
+            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: "",
@@ -320,28 +288,6 @@ 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.onSelected = { [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()
@@ -391,7 +337,14 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Text Width", view: textWidthTextField)
         addFormRow(label: "Text Percentage", view: textPercentageTextField)
         addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
-        append(section: backgroundColorPickerSelectorView)
+        addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
+        
+        backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
+        backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
+        append(section: backgroundColorTokenFormStackView)
+        append(section: backgroundColorFormStackView)
+
+        
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -404,11 +357,10 @@ 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"
@@ -420,21 +372,35 @@ 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)
         }))
-        append(section: subTitleTextColorFormSection)
+        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
+        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
+        append(section: subtitleTokenFormStackView)
+        append(section: subtitleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Description Icon "
@@ -444,7 +410,12 @@ class TileletViewController: BaseViewController<Tilelet> {
         descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
         descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
         descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
-        append(section: descriptionIconColorFormSection)
+        descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
+        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"
@@ -453,7 +424,11 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: directionalIconFormStackView)
         directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
         directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
-        append(section: directionIconColorFormSection)
+        directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
+        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 }
@@ -601,57 +576,11 @@ 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.setDefault(value: backgroundColor)
-        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
@@ -678,10 +607,62 @@ 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, textColor: badgeTextColor, fillColor: badgeFillColor, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
+            component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
         } else {
             component.badgeModel = nil
         }
@@ -689,7 +670,21 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            component.titleModel = Tilelet.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TitleTextColor
+            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
         }
@@ -697,7 +692,23 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: subtitleTextColor)
+            var textColor: TitleLockup.TextColor
+            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
         }
@@ -705,7 +716,22 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
-            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            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
         }
@@ -714,26 +740,36 @@ 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
         }
         
-        component.descriptiveIconModel = .init(name: iconName, iconColor: descriptionIconColor, size: iconSize, accessibleText: accessibleText ?? nil )
+        switch descriptionIconColorPickerSelectorView.selectedItem {
+        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
-        component.directionalIconModel = .init(iconType: iconType, iconColor: directionIconColor, size: iconSize)
+        switch directionalIconColorPickerSelectorView.selectedItem {
-    }
+        case .token:
-    
+            iconColor = .token(directionalIconTokenColorView.selectedItem)
-    func updateGradientColors(){
+        case .custom:
-        if let selectedGradient1Color = gradientColorView1.selectedColor,
+            iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
-           let selectedGradient2Color = gradientColorView2.selectedColor{
+        default:
-            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+            break
         }
+        component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
     }
     
     func updateOtherTextStyles() {
@@ -766,6 +802,10 @@ 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
         }
@@ -784,6 +824,7 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self.gradientColorView1.selectedColor = nil
                 self.gradientColorView2.selectedColor = nil
             } else {
+                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -792,6 +833,58 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.component.titleLockup.textAlignment = item
         }
         
+        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            if let color = getTilelet(backgroundColor: item) {
+                component.color = color
+            } else {
+                backgroundColorTokenFormStackView.isHidden = item != .token
+                backgroundColorFormStackView.isHidden = item != .custom
+            }
+        }
+        
+        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            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()
         }
@@ -800,6 +893,16 @@ 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()
         }
@@ -808,6 +911,10 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setDirectionalIconModel()
         }
         
+        directionalIconTokenColorView.onPickerDidSelect = {  [weak self] item in
+            self?.colorPickerType = .token
+            self?.setDirectionalIconModel()
+        }
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -853,6 +960,79 @@ extension TileletViewController: ComponentSampleable {
     }
 }
 
+extension TileletViewController: 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) {
+        let color = viewController.selectedColor 
+        var lightColorView: ColorPickerView<ColorPickerType>
+        var darkColorView: ColorPickerView<ColorPickerType>
+        switch colorPickerType {
+        case .contentViewBackgroundColor:
+            component.contentView.backgroundColor = color
+        case .gradientColor1:
+            gradientColorView1.selectedColor = viewController.selectedColor
+            updateGradientColors()
+        case .gradientColor2:
+            gradientColorView2.selectedColor = viewController.selectedColor
+            updateGradientColors()
+        case .custom:
+            var colorView: ColorPickerView<ColorPickerType>
+            
+            switch currentSurfaceColorType {
+            case .background:
+                colorView = backgroundColorCustomColorView
+            case .eyebrow:
+                colorView = eyebrowCustomColorView
+            case .title:
+                colorView = titleCustomColorView
+            case .subtitle:
+                colorView = subtitleCustomColorView
+            case .directionalIcon:
+                colorView = directionalIconCustomColorView
+            case .descriptionIcon:
+                colorView = descriptionIconCustomColorView
+            }
+            colorView.selectedColor = viewController.selectedColor
+            
+            switch currentSurfaceColorType {
+            case .background:
+                component.color = .custom(color)
+            case .eyebrow:
+                setEyebrowModel()
+            case .title:
+                setTitleModel()
+            case .subtitle:
+                setSubTitleModel()
+            case .directionalIcon:
+                setDirectionalIconModel()
+            case .descriptionIcon:
+                setDescriptiveIconModel()
+            }            
+        default:
+            break
+        }
+    }
+    
+    func updateGradientColors(){
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+        }
+    }
+}
+
 extension TileletViewController {
     
     enum BackgroundColor: String, CaseIterable {

VDSSample/ViewControllers/TitleLockupViewController.swift

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