Merge branch 'develop' into feature/datePicker

VDSSample.xcodeproj/project.pbxproj

@@ -62,6 +62,7 @@
 		EA5E30552950EA6E0082B959 /* TitleLockupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */; };
 		EA5E305C295111050082B959 /* TileletViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E305B295111050082B959 /* TileletViewController.swift */; };
 		EA5F86CE2A1E863F00BC83E4 /* TabsContainerViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5F86CD2A1E863F00BC83E4 /* TabsContainerViewController.swift */; };
+		EA6642972BD1B2E700D81DC4 /* ColorPickerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA6642962BD1B2E700D81DC4 /* ColorPickerView.swift */; };
 		EA81410E2A0ED8DC004F60D2 /* ButtonIconViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */; };
 		EA89201928B56DF5006B9984 /* RadioBoxGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89201828B56DF5006B9984 /* RadioBoxGroupViewController.swift */; };
 		EA89204628B66CE2006B9984 /* ScrollViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89203F28B66CE2006B9984 /* ScrollViewController.swift */; };
@@ -157,6 +158,7 @@
 		EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TitleLockupViewController.swift; sourceTree = "<group>"; };
 		EA5E305B295111050082B959 /* TileletViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TileletViewController.swift; sourceTree = "<group>"; };
 		EA5F86CD2A1E863F00BC83E4 /* TabsContainerViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabsContainerViewController.swift; sourceTree = "<group>"; };
+		EA6642962BD1B2E700D81DC4 /* ColorPickerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ColorPickerView.swift; sourceTree = "<group>"; };
 		EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonIconViewController.swift; sourceTree = "<group>"; };
 		EA89201828B56DF5006B9984 /* RadioBoxGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioBoxGroupViewController.swift; sourceTree = "<group>"; };
 		EA89203F28B66CE2006B9984 /* ScrollViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ScrollViewController.swift; sourceTree = "<group>"; };
@@ -265,9 +267,10 @@
 		EA89204F28B682F4006B9984 /* Classes */ = {
 			isa = PBXGroup;
 			children = (
-				EA89205028B68307006B9984 /* TextField.swift */,
+				EA6642962BD1B2E700D81DC4 /* ColorPickerView.swift */,
-				EAD062A42A3B5CDF0015965D /* Slider.swift */,
 				EAB5FEF22928153D00998C17 /* Helper.swift */,
+				EAD062A42A3B5CDF0015965D /* Slider.swift */,
+				EA89205028B68307006B9984 /* TextField.swift */,
 			);
 			path = Classes;
 			sourceTree = "<group>";
@@ -519,6 +522,7 @@
 				EAD062AD2A3B86950015965D /* BadgeIndicatorViewController.swift in Sources */,
 				EA5E305C295111050082B959 /* TileletViewController.swift in Sources */,
 				EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */,
+				EA6642972BD1B2E700D81DC4 /* ColorPickerView.swift in Sources */,
 				EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */,
 				EAB5FEF32928153D00998C17 /* Helper.swift in Sources */,
 				EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */,
@@ -692,7 +696,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 58;
+				CURRENT_PROJECT_VERSION = 62;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -727,7 +731,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 58;
+				CURRENT_PROJECT_VERSION = 62;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;

VDSSample/Classes/ColorPickerView.swift

@@ -0,0 +1,68 @@
+//
+//  ColorPickerView.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 4/18/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+
+public class ColorPickerView<EnumType>: UIStackView {
+    public var pickerType: EnumType
+    public var selectedColor: UIColor? {
+        didSet {
+            selectedColorView.backgroundColor = selectedColor
+        }
+    }
+    
+    var selectedColorView: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
+        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
+        return view
+    }()
+
+    var button = Button().with {
+        $0.size = .small
+        $0.use = .secondary
+        $0.text = "Select"
+    }
+
+    public init(with pickerType: EnumType, onClick: @escaping (ColorPickerView)->Void) {
+        self.pickerType = pickerType
+        super.init(frame: .zero)
+        setup()
+        button.onClick = { _ in onClick(self) }
+    }
+    
+    required init(coder: NSCoder) {
+        fatalError()
+    }
+    
+    private func setup() {
+        distribution = .fillEqually
+        alignment = .fill
+        spacing = 10
+        
+        let indicatorWrapper = View()
+        indicatorWrapper.addSubview(selectedColorView)
+        indicatorWrapper.height(32)
+        indicatorWrapper.pinTop()
+        indicatorWrapper.pinLeading()
+        indicatorWrapper.pinBottom()
+        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
+        
+        addArrangedSubview(indicatorWrapper)
+        let buttonWrapper = View()
+        buttonWrapper.addSubview(button)
+        buttonWrapper.height(32)
+        button.pinTop()
+        button.pinTrailing()
+        button.pinBottom()
+        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
+        addArrangedSubview(buttonWrapper)
+    }
+}

VDSSample/ViewControllers/BadgeIndicatorViewController.swift

@@ -52,6 +52,7 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
     
     var textField = NumericField()
     var leadingCharacterTextField = TextField()
+    var accessibilityTextField = TextField()
     var trailingTextField = TextField()
     var hideDotSwitch = Toggle()
     var hideBorderSwitch = Toggle()
@@ -85,7 +86,8 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
         addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
         addFormRow(label: "Size", view: textSizePickerSelectorView)
-
+        addFormRow(label: "Accessiblity Text", view: accessibilityTextField)
+        
         dotForm.addFormRow(label: "Hide Dot", view: hideDotSwitch)
         dotForm.addFormRow(label: "Dot Size", view: dotSizeTextField)
         numberedForm.addFormRow(label: "Leading Character", view: leadingCharacterTextField)
@@ -122,6 +124,11 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
                 self?.component.trailingText = text
             }.store(in: &subscribers)
 
+        accessibilityTextField.textPublisher
+            .sink { [weak self] text in
+                self?.component.accessibilityText = text
+            }.store(in: &subscribers)
+
         heightTextField
             .numberPublisher
             .sink { [weak self] number in

VDSSample/ViewControllers/BaseViewController.swift

@@ -43,7 +43,7 @@ public class FormSection: UIStackView {
     }
     
     @discardableResult
-    open func addFormRow(label: String, view: UIView) -> UIView {
+    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
         let formRow = UIStackView().with {
             $0.translatesAutoresizingMaskIntoConstraints = false
             $0.alignment = .fill
@@ -56,6 +56,10 @@ public class FormSection: UIStackView {
             $0.tag = 1
             $0.text = label
             $0.textStyle = .bodyLarge
+            $0.numberOfLines = 0
+            if let tooltip {
+                $0.addTooltip(tooltip)
+            }
         }
         
         formRow.addArrangedSubview(label)
@@ -261,6 +265,21 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
             loadCustomRotors()
             UIAccessibility.post(notification: .screenChanged, argument: component)
         }
+        
+        if component.canBecomeFirstResponder {
+            let tapGesture = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
+            tapGesture.cancelsTouchesInView = false  // This allows the tap to pass through to other views.
+            view.addGestureRecognizer(tapGesture)
+        }
+    }
+    
+    @objc func dismissKeyboard(_ sender: UITapGestureRecognizer) {
+        let location = sender.location(in: self.view)
+        
+        // Check if the touch is outside the textView
+        if !component.frame.contains(location) {
+            component.resignFirstResponder()
+        }
     }
     
     func isViewHiddenByKeyboard(view: UIView, keyboardFrame: CGRect) -> Bool {
@@ -318,10 +337,10 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
     }
        
     @discardableResult
-    open func addFormRow(label: String, view: UIView) -> UIView {
+    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
-        return formStackView.addFormRow(label: label, view: view)
+        return formStackView.addFormRow(label: label,tooltip: tooltip, view: view)
     }
-
+    
     var activeTextField: UITextField?
     
     /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.

VDSSample/ViewControllers/BreadcrumbsViewController.swift

@@ -90,3 +90,19 @@ class  BreadcrumbsViewController: BaseViewController<Breadcrumbs> {
         
     }
 }
+
+extension BreadcrumbsViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let component = Self.makeComponent()
+        component.breadcrumbModels =  [
+            .init(text: "Home"),
+            .init(text: "Support", enabeled: false),
+            .init(text: "Service & Apps"),
+            .init(text: "My Verizon"),
+            .init(text: "Bill"),
+            .init(text: "Mobile Billing & Payments"),
+            .init(text: "Billing statement FAQs", selected: true)
+        ]
+        return ComponentSample(component: component)
+    }
+}

VDSSample/ViewControllers/ButtonIconViewController.swift

@@ -59,7 +59,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     var selectableSwitch = Toggle()
     var badgeIndicatorSwitch = Toggle()
     var variantOneSwitch = Toggle()
-    
+        
     lazy var badgeIndicatorExpandDirectionPickerSelectorView = {
         PickerSelectorView(title: "right",
                            picker: self.picker,
@@ -75,6 +75,32 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     
     var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true }
     
+    ///ColorPicker
+    var colorPickerType: ColorPickerType = .light
+    enum ColorPickerType {
+        case light, dark
+    }
+    
+    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: ColorPickerType.dark) {[weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
     override func setupForm(){
         super.setupForm()
         addFormRow(label: "Disabled", view: disabledSwitch)
@@ -82,6 +108,8 @@ 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)
         addFormRow(label: "Hide Border", view: hideBorder)
         addFormRow(label: "Fit To Icon", view: fitToIcon)
@@ -153,6 +181,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         let name = Icon.Name.addToFavorite
         
         component.iconName = name
+        component.onChange = { c in print("changed: \(c.isSelected)") }
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         surfaceTypePickerSelectorView.text = component.surfaceType.rawValue
@@ -212,12 +241,12 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     func setBadgeIndicatorModel() {
         if variantOneSwitch.isOn {
             if badgeIndicatorSwitch.isOn {
-                component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.simple, size: BadgeIndicator.Size.small)
+                component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.simple, size: BadgeIndicator.Size.small, accessibilityText: "Custom Text would go here by the developer")
             } else {
                 component.badgeIndicatorModel = nil
             }
         } else  {
-            component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.numbered, expandDirection: badgeIndicatorExpandDirectionPickerSelectorView.selectedItem, size: BadgeIndicator.Size.small, maximumDigits: BadgeIndicator.MaximumDigits.two, number: 999)
+            component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.numbered, expandDirection: badgeIndicatorExpandDirectionPickerSelectorView.selectedItem, size: BadgeIndicator.Size.small, maximumDigits: BadgeIndicator.MaximumDigits.two, number: 999, accessibilityText: "Custom Text would go here by the developer for the 999")
         }
     }
 }
@@ -233,7 +262,34 @@ extension ButtonIconViewController: ComponentSampleable {
     static func makeSample() -> ComponentSample {
         let component = Self.makeComponent()
         component.iconName = .addToFavorite
+        component.selectedIconName = .addedToFavorite
+        component.selectable = true
+        component.onChange = { c in print("changed: \(c.isSelected)") }
         component.size = .large
         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/CarouselScrollbarViewConttroller.swift

@@ -119,3 +119,12 @@ class CarouselScrollbarViewConttroller: BaseViewController<CarouselScrollbar> {
         }
     }
 }
+
+
+extension CarouselScrollbarViewConttroller: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let component = Self.makeComponent()
+        component.numberOfSlides = 4
+        return ComponentSample(component: component)
+    }
+}

VDSSample/ViewControllers/DropShawdowViewController.swift

@@ -34,9 +34,13 @@ class DropShadowViewController: BaseViewController<ShadowView> {
     var componentWrapper: UIView!
     var componentConstraints: NSLayoutConstraint.Container!
     
-    var secondView = View()
+    var secondView = ShadowView()
-    var thirdView = View()
+    var thirdView = ShadowView()
 
+    var shadowViews: [ShadowView] {
+        [component, secondView, thirdView]
+    }
+    
     lazy var backgroundColorPickerSelectorView = {
         PickerSelectorView(title: "paletteWhite",
                            picker: self.picker,
@@ -125,8 +129,8 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         thirdView.width(viewSize).height(viewSize)
 
         componentWrapper.pinTop().pinLeading()
-        secondView.pinTop()
+        secondView.pinTop(VDSLayout.space2X)
-        thirdView.pinLeading().pinBottom()
+        thirdView.pinLeading(VDSLayout.space2X).pinBottom(VDSLayout.space2X)
         
         secondView.pinTrailingLessThanOrEqualTo(contentTopView.trailingAnchor)
         secondView.pinBottomLessThanOrEqualTo(contentTopView.bottomAnchor)
@@ -194,7 +198,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
 
         //shadow1
         showShadow.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.showShadow = slider.isOn
+            self?.shadowViews.forEach { $0.showShadow = slider.isOn }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -202,7 +206,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         opacityRange.minimumValue = 0.0
         opacityRange.value = 1.0
         opacityRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.opacityRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.opacityRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -210,7 +214,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         radiusRange.minimumValue = 0.0
         radiusRange.value = 2.0
         radiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.radiusRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.radiusRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
 
@@ -218,7 +222,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetXRange.minimumValue = -20
         offsetXRange.value = 2.0
         offsetXRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetXRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetXRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -226,13 +230,13 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetYRange.minimumValue = -20
         offsetYRange.value = 2.0
         offsetYRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetYRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetYRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
                       
         //shadow2
         showShadow2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.showShadow2 = slider.isOn
+            self?.shadowViews.forEach { $0.showShadow2 = slider.isOn }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -240,7 +244,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         opacityRange2.minimumValue = 0.0
         opacityRange2.value = 1.0
         opacityRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.opacityRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.opacityRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -248,7 +252,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         radiusRange2.minimumValue = 0.0
         radiusRange2.value = 2.0
         radiusRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.radiusRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.radiusRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
 
@@ -256,7 +260,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetXRange2.minimumValue = -20
         offsetXRange2.value = 2.0
         offsetXRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetXRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetXRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -264,7 +268,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetYRange2.minimumValue = -20
         offsetYRange2.value = 2.0
         offsetYRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetYRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetYRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -281,7 +285,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         viewRadiusRange.minimumValue = 0
         viewRadiusRange.value = 8.0
         viewRadiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.viewRadiusRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.viewRadiusRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -310,8 +314,8 @@ class DropShadowViewController: BaseViewController<ShadowView> {
     }
     
     override func updateView() {
-        secondView.backgroundColor = .red
+        secondView.viewLightColor = .paletteYellow53
-        thirdView.backgroundColor = .purple
+        thirdView.viewLightColor = .paletteBlue46
     }
     
     func setupPicker(){
@@ -322,20 +326,21 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         }
                 
         dropShadowDarkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowDarkColor = item
+            self?.shadowViews.forEach { $0.shadowDarkColor = item }
         }
         
         dropShadowLightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowLightColor = item
+            self?.shadowViews.forEach { $0.shadowLightColor = item }
         }
 
         dropShadow2DarkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowDarkColor2 = item
+            self?.shadowViews.forEach { $0.shadowDarkColor2 = item }
         }
         
         dropShadow2LightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowLightColor2 = item
+            self?.shadowViews.forEach { $0.shadowLightColor2 = item }
         }
+        
         viewLightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.viewLightColor = item
         }
@@ -353,7 +358,6 @@ public class ShadowView: View {
 
     public var viewRadiusRange: CGFloat = 8.0 { didSet { setNeedsUpdate() }}
 
-    private var shadowLayer1: CALayer = CALayer()
     public var showShadow: Bool = true { didSet { setNeedsUpdate() }}
     public var opacityRange: CGFloat = 1.0 { didSet { setNeedsUpdate() }}
     public var offsetXRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
@@ -362,7 +366,6 @@ public class ShadowView: View {
     public var shadowLightColor: UIColor.VDSColor = .backgroundPrimaryDark { didSet { setNeedsUpdate() }}
     public var shadowDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }}
 
-    private var shadowLayer2: CALayer = CALayer()
     public var showShadow2: Bool = false { didSet { setNeedsUpdate() }}
     public var opacityRange2: CGFloat = 1.0 { didSet { setNeedsUpdate() }}
     public var offsetXRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
@@ -376,46 +379,86 @@ public class ShadowView: View {
         width(constant: 100)
         height(constant: 100)
         
-        // Add shadow layers as sublayers of the view's layer
-        layer.insertSublayer(shadowLayer1, at: 0)
-        layer.insertSublayer(shadowLayer2, at: 0)
     }
     
     public override func updateView() {
         super.updateView()
         let viewColor = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor).getColor(surface)
         backgroundColor = viewColor
-        shadowLayer1.backgroundColor = viewColor.cgColor
+                
-        shadowLayer2.backgroundColor = viewColor.cgColor
-        shadowLayer1.isHidden = !showShadow
-        shadowLayer2.isHidden = !showShadow2
         setNeedsLayout()
         layoutIfNeeded()
     }
     
+    public override var backgroundColor: UIColor? {
+        didSet {
+            print("backgroundColor: \(backgroundColor?.hexString ?? "None")")
+        }
+    }
     
     public override func layoutSubviews() {
         super.layoutSubviews()
+                
+        layer.cornerRadius = CGFloat(viewRadiusRange)
         
         let dropshadowColor = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
         let dropshadowColor2 = SurfaceColorConfiguration(shadowLightColor2.uiColor, shadowDarkColor2.uiColor).getColor(surface)
-        layer.cornerRadius = CGFloat(viewRadiusRange)
+        var shadowConfigs = [DropShadowConfiguration]()
-        layer.masksToBounds = false
         
         // Update shadow layers frames to match the view's bounds
-        shadowLayer1.frame = bounds
+        if showShadow {
-        shadowLayer2.frame = bounds
+            let shadow1Config = VDS.DropShadowConfiguration().with {
-
+                $0.shadowRadiusConfiguration = .init(viewRadiusRange, .zero)
-        shadowLayer1.cornerRadius = CGFloat(viewRadiusRange)
+                $0.shadowColorConfiguration =  SurfaceColorConfiguration(dropshadowColor, dropshadowColor).eraseToAnyColorable()
-        shadowLayer1.shadowColor =  dropshadowColor.cgColor
+                $0.shadowOpacityConfiguration = .init(opacityRange, .zero)
-        shadowLayer1.shadowOpacity = Float(opacityRange)
+                $0.shadowOffsetConfiguration = .init(.init(width: offsetXRange, height: offsetYRange), .zero)
-        shadowLayer1.shadowOffset = .init(width: CGFloat(offsetXRange), height: CGFloat(offsetYRange))
+                $0.shadowRadiusConfiguration = .init(radiusRange, .zero)
-        shadowLayer1.shadowRadius = CGFloat(radiusRange)
+            }
+            shadowConfigs.append(shadow1Config)
+        }
         
-        shadowLayer2.cornerRadius = CGFloat(viewRadiusRange)
+        if showShadow2 {
-        shadowLayer2.shadowColor = dropshadowColor2.cgColor
+            let shadow2Config = VDS.DropShadowConfiguration().with {
-        shadowLayer2.shadowOpacity = Float(opacityRange2)
+                $0.shadowRadiusConfiguration = .init(viewRadiusRange, .zero)
-        shadowLayer2.shadowOffset = .init(width: CGFloat(offsetXRange2), height: CGFloat(offsetYRange2))
+                $0.shadowColorConfiguration =  SurfaceColorConfiguration(dropshadowColor2, dropshadowColor2).eraseToAnyColorable()
-        shadowLayer2.shadowRadius = CGFloat(radiusRange2)
+                $0.shadowOpacityConfiguration = .init(opacityRange2, .zero)
+                $0.shadowOffsetConfiguration = .init(.init(width: offsetXRange2, height: offsetYRange2), .zero)
+                $0.shadowRadiusConfiguration = .init(radiusRange2, .zero)
+            }
+            shadowConfigs.append(shadow2Config)
+        }
+
+        if shadowConfigs.count > 0 {
+            addDropShadows(shadowConfigs)
+        } else {
+            removeDropShadows()
+        }
+
+    }
+}
+
+extension ViewProtocol where Self: UIView {
+    private func createShadowLayer() -> CALayer {
+        let shadowLayer = CALayer()
+        shadowLayer.backgroundColor = UIColor.clear.cgColor
+        shadowLayer.frame = bounds
+        return shadowLayer
+    }
+
+    func addCustomShadow(config: DropShadowConfiguration) {
+        let shadowLayer = createShadowLayer()
+//        shadowLayer.shadowColor = config.shadowColorConfiguration.getColor(self).cgColor
+//        shadowLayer.shadowOpacity = config.shadowOpacityConfiguration.value(for: self)
+//        shadowLayer.shadowOffset = offset
+//        shadowLayer.shadowRadius = radius
+        layer.insertSublayer(shadowLayer, at: 0)
+    }
+
+    func removeAllCustomShadows() {
+        layer.sublayers?.forEach { sublayer in
+            if sublayer.shadowOpacity > 0 && sublayer.backgroundColor == UIColor.clear.cgColor {
+                sublayer.removeFromSuperlayer()
+            }
+        }
     }
 }

VDSSample/ViewControllers/DropdownSelectViewController.swift

@@ -10,6 +10,12 @@ import VDS
 
 class DropdownSelectViewController: BaseViewController<DropdownSelect> {
     
+    lazy var helperTextPlacementPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.HelperTextPlacement.allCases)
+    }()
+
     var disabledSwitch = Toggle()
     var requiredSwitch = Toggle()
     var labelTextField = TextField()
@@ -21,6 +27,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
     var errorSwitch = Toggle()
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
+    var widthTextField = NumericField()
     var optionsSwitch = Toggle()
     var moreOptions: [DropdownSelect.DropdownOptionModel] = [
         .init(text: "Alabama"),
@@ -60,12 +67,14 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         addFormRow(label: "Disabled", view: disabledSwitch)
         addFormRow(label: "Required", view: requiredSwitch)
         addFormRow(label: "Label Text", view: labelTextField)
+        addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
         addFormRow(label: "Helper Text", view: helperTextField)
         addFormRow(label: "Inline Label", view: .makeWrapper(for: inlineLabelSwitch))
         addFormRow(label: "Readonly", view: readonlySwitch)
         addFormRow(label: "Transparent Background", view: transparentBgSwitch)
         addFormRow(label: "Error", view: .makeWrapper(for: errorSwitch))
         addFormRow(label: "Error Text", view: errorTextField)
+        addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         addFormRow(label: "More Options", view: optionsSwitch)
@@ -75,7 +84,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         }
         
         requiredSwitch.onChange = { [weak self] sender in
-            self?.component.required = sender.isOn
+            self?.component.isRequired = sender.isOn
         }
                 
         optionsSwitch.onChange =  { [weak self] sender in
@@ -84,7 +93,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         }
         
         readonlySwitch.onChange = { [weak self] sender in
-            self?.component.readOnly = sender.isOn
+            self?.component.isReadOnly = sender.isOn
         }
 
         transparentBgSwitch.onChange = { [weak self] sender in
@@ -119,6 +128,12 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
                 self?.component.errorText = text
             }.store(in: &subscribers)
         
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.component.width = number?.cgFloatValue
+            }.store(in: &subscribers)
+
         tooltipTitleTextField
             .textPublisher
             .sink { [weak self] text in
@@ -158,9 +173,10 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         
         //setup UI
         disabledSwitch.isOn = !component.isEnabled
-        requiredSwitch.isOn = component.required
+        requiredSwitch.isOn = component.isRequired
         surfacePickerSelectorView.text = component.surface.rawValue
         labelTextField.text = component.labelText
+        helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
         helperTextField.text = component.helperText
         readonlySwitch.isOn = false
         transparentBgSwitch.isOn = false
@@ -176,6 +192,11 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
+        
+        helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.helperTextPlacement = item
+        }
+
     }
     
     func updateTooltip() {
@@ -186,3 +207,22 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
                                                                             content: content) : nil
     }
 }
+
+extension DropdownSelectViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let component = Self.makeComponent()
+        component.labelText = "Street Address"
+        component.helperText = "For example: 123 Verizon St"
+        component.errorText = "Enter a valid address."
+        component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
+        component.options = [
+            .init(text: "Alabama"),
+            .init(text: "Alaska"),
+            .init(text: "Arizona"),
+            .init(text: "Arkansas")
+        ]
+        return ComponentSample(component: component)
+    }
+}
+
+

VDSSample/ViewControllers/InputFieldViewController.swift

@@ -19,6 +19,12 @@ class  InputFieldViewController: BaseViewController<InputField> {
                            items: InputField.HelperTextPlacement.allCases)
     }()
 
+    lazy var inputTypePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.FieldType.allCases)
+    }()
+
     var disabledSwitch = Toggle()
     var requiredSwitch = Toggle()
     var labelTextField = TextField()
@@ -31,6 +37,52 @@ class  InputFieldViewController: BaseViewController<InputField> {
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
     
+    //FieldType sections
+    
+    //password
+    var hidePasswordButtonTextField = TextField()
+    var showPasswordButtonTextField = TextField()
+    lazy var passwordSection = FormSection().with {
+        $0.title = "Password Settings"
+        $0.addFormRow(label: "Hide Button", view: hidePasswordButtonTextField)
+        $0.addFormRow(label: "Show Button", view: showPasswordButtonTextField)
+        $0.isHidden = true
+    }
+
+    //date
+    lazy var dateFormatPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.DateFormat.allCases)
+    }()
+    
+    lazy var dateSection = FormSection().with {
+        $0.title = "Date Settings"
+        $0.addFormRow(label: "Date Format", view: dateFormatPickerSelectorView)
+        $0.isHidden = true
+    }
+
+    //inlineAction
+    var inlineActionTextField = TextField()
+    lazy var inlineActionSection = FormSection().with {
+        $0.title = "inlineAction Settings"
+        $0.addFormRow(label: "Action Text", view: inlineActionTextField)
+        $0.isHidden = true
+    }
+    
+    //securityCode
+    lazy var cardTypePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.CreditCardType.allCases)
+    }()
+    
+    lazy var securityCodeSection = FormSection().with {
+        $0.title = "Security Code Settings"
+        $0.addFormRow(label: "Card Type", view: cardTypePickerSelectorView)
+        $0.isHidden = true
+    }
+    
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -40,22 +92,40 @@ class  InputFieldViewController: BaseViewController<InputField> {
         
     override func setupForm(){
         super.setupForm()  
-        addFormRow(label: "Disabled", view: disabledSwitch)
-        addFormRow(label: "Required", view: requiredSwitch)
-        addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Label Text", view: labelTextField)
-        addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
-        addFormRow(label: "Helper Text", view: helperTextField)
-        addFormRow(label: "Error", view: showErrorSwitch)
-        addFormRow(label: "Error Text", view: errorTextField)
-        addFormRow(label: "Success", view: showSuccessSwitch)
-        addFormRow(label: "Success Text", view: successTextField)
-        addFormRow(label: "Width", view: widthTextField)
-        addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
-        addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         
+
+        let fieldType = FormSection().with {
+            $0.title = "Field Type Settings"
+            $0.addFormRow(label: "Field Type", view: inputTypePickerSelectorView)
+        }
+        
+        let general = FormSection().with {
+            $0.title = "\n\nGeneral Settings"
+        }
+        
+        general.addFormRow(label: "Disabled", view: disabledSwitch)
+        general.addFormRow(label: "Required", view: requiredSwitch)
+        general.addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        general.addFormRow(label: "Label Text", view: labelTextField)
+        general.addFormRow(label: "Helper Text Placement", view: helperTextPlacementPickerSelectorView)
+        general.addFormRow(label: "Helper Text", view: helperTextField)
+        general.addFormRow(label: "Error", view: showErrorSwitch)
+        general.addFormRow(label: "Error Text", view: errorTextField)
+        general.addFormRow(label: "Success", view: showSuccessSwitch)
+        general.addFormRow(label: "Success Text", view: successTextField)
+        general.addFormRow(label: "Width", view: widthTextField)
+        general.addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
+        general.addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
+        
+        append(section: fieldType)
+        append(section: passwordSection)
+        append(section: dateSection)
+        append(section: inlineActionSection)
+        append(section: securityCodeSection)
+        append(section: general)
+
         requiredSwitch.onChange = { [weak self] sender in
-            self?.component.required = sender.isOn
+            self?.component.isRequired = sender.isOn
         }
 
         showErrorSwitch.onChange = { [weak self] sender in
@@ -114,17 +184,42 @@ class  InputFieldViewController: BaseViewController<InputField> {
                 self?.updateTooltip()
             }.store(in: &subscribers)
         
+        //field types
+        //password
+        hidePasswordButtonTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.hidePasswordButtonText = text
+            }.store(in: &subscribers)
+
+        showPasswordButtonTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.showPasswordButtonText = text
+            }.store(in: &subscribers)
+        
+        //inlineAction
+        inlineActionTextField
+            .textPublisher
+            .sink { [weak self] text in
+                if !text.isEmpty {
+                    self?.component.actionTextLinkModel = .init(text: text, onClick: { inputField in
+                        var value = inputField.value ?? ""
+                        value = !value.isEmpty ? value : "nil"
+                        self?.present(UIAlertController(title: "inlineAction", message: "Clicked and you get the value: \(value)", preferredStyle: .alert).with{ $0.addAction(.init(title: "OK", style: .default)) }, animated: true)
+                    })
+                } else {
+                    self?.component.actionTextLinkModel = nil
+                }
+            }.store(in: &subscribers)
     }
     
     func setupModel() {
         component.fieldType = .text
-        component.width = 328
-        component.text = "Starting Text"
         component.labelText = "Street Address"
         component.helperText = "For example: 123 Verizon St"
         component.errorText = "Enter a valid address."
         component.successText = "Good job entering a valid address!"
-        component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
 
         component.onChange = { component in
             if let text = component.value {
@@ -137,8 +232,10 @@ class  InputFieldViewController: BaseViewController<InputField> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
+        dateFormatPickerSelectorView.text = component.dateFormat.rawValue
+        inputTypePickerSelectorView.text = component.fieldType.rawValue
         disabledSwitch.isOn = !component.isEnabled
-        requiredSwitch.isOn = component.required
+        requiredSwitch.isOn = component.isRequired
         labelTextField.text = component.labelText
         helperTextField.text = component.helperText
         showErrorSwitch.isOn = component.showError
@@ -162,6 +259,21 @@ class  InputFieldViewController: BaseViewController<InputField> {
         helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
             self?.component.helperTextPlacement = item
         }
+        
+        inputTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.fieldType = item
+            self?.component.text = ""
+            self?.updateFormSections()
+        }
+        
+        dateFormatPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.dateFormat = item
+            self?.updateFormSections()
+        }
+        
+        cardTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.cardType = item
+        }
     }
     
     func updateTooltip() {
@@ -171,6 +283,35 @@ class  InputFieldViewController: BaseViewController<InputField> {
         component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title,
                                                                             content: content) : nil
     }
+    
+    func updateFormSections() {
+        [passwordSection, dateSection, inlineActionSection, securityCodeSection].forEach { $0.isHidden = true }
+        //reset other fields
+        component.actionTextLinkModel = nil
+        component.tooltipModel = nil
+        component.cardType = .generic
+        tooltipTitleTextField.text = nil
+        tooltipContentTextField.text = nil
+        dateFormatPickerSelectorView.text = component.dateFormat.rawValue
+        cardTypePickerSelectorView.text = component.cardType.rawValue
+        switch component.fieldType {
+        case .inlineAction:
+            inlineActionTextField.text = nil
+            inlineActionSection.isHidden = false
+
+        case .password:
+            passwordSection.isHidden = false
+            
+        case .date:
+            dateSection.isHidden = false
+            
+        case .securityCode:
+            securityCodeSection.isHidden = false
+            
+        default:
+            break
+        }
+    }
 }
 
 

VDSSample/ViewControllers/MenuViewController.swift

@@ -81,7 +81,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "DatePicker", completed: false, viewController: DatePickerViewController.self),
         MenuComponent(title: "DropdownSelect", completed: true, viewController: DropdownSelectViewController.self),
         MenuComponent(title: "Icon", completed: true, viewController: IconViewController.self),
-        MenuComponent(title: "InputField", completed: false, viewController: InputFieldViewController.self),
+        MenuComponent(title: "InputField", completed: true, viewController: InputFieldViewController.self),
         MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
         MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
         MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),

VDSSample/ViewControllers/PaginationViewController.swift

@@ -46,3 +46,11 @@ final class PaginationViewController: BaseViewController<Pagination> {
             }.store(in: &subscribers)
     }
 }
+
+extension PaginationViewController: ComponentSampleable {
+    static func makeSample() -> ComponentSample {
+        let component = Self.makeComponent()
+        component.total = 10
+        return ComponentSample(component: component)
+    }
+}

VDSSample/ViewControllers/TableViewTestController.swift

@@ -172,30 +172,8 @@ public class TableViewTestController: UIViewController, Initable, Surfaceable {
     }
     
     var items: [MenuComponent] {
-        all
-    }
-    
-    var all: [MenuComponent] {
         MenuViewController.items
-    }
+    }    
-    
-    var batch1: [MenuComponent] {
-        [
-            MenuComponent(title: "Badge", completed: true, viewController: BadgeViewController.self),
-            MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self),
-            MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
-            MenuComponent(title: "Icon", completed: true, viewController: IconViewController.self),
-            MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
-            MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
-            MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
-            MenuComponent(title: "Tabs", completed: true, viewController: TabsViewController.self),
-            MenuComponent(title: "TextLink", completed: true, viewController: TextLinkViewController.self),
-            MenuComponent(title: "TextLinkCaret", completed: true, viewController: TextLinkCaretViewController.self),
-            MenuComponent(title: "TitleLockup", completed: true, viewController: TitleLockupViewController.self),
-            MenuComponent(title: "Tooltip", completed: true, viewController: TooltipViewController.self),
-            MenuComponent(title: "TrailingTooltip", completed: true, viewController: TrailingTooltipLabelViewController.self),
-        ]
-    }
 }
 
 extension TableViewTestController : UITableViewDelegate, UITableViewDataSource {

VDSSample/ViewControllers/TextAreaViewController.swift

@@ -55,7 +55,7 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         addFormRow(label: "Min Height", view: heightPickerSelectorView)
 
         requiredSwitch.onChange = { [weak self] sender in
-            self?.component.required = sender.isOn
+            self?.component.isRequired = sender.isOn
         }
         
         showErrorSwitch.onChange = { [weak self] sender in
@@ -71,7 +71,7 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         }
 
         readOnlySwitch.onChange = { [weak self] sender in
-            self?.component.readOnly = sender.isOn
+            self?.component.isReadOnly = sender.isOn
         }
         
         labelTextField
@@ -126,7 +126,6 @@ class  TextAreaViewController: BaseViewController<TextArea> {
     }
     
     func setupModel() {
-        component.width = 328
         component.labelText = "Street Address"
         component.helperText = "For example: 123 Verizon St"
         component.errorText = "Enter a valid address."
@@ -143,7 +142,7 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         disabledSwitch.isOn = !component.isEnabled
-        requiredSwitch.isOn = component.required
+        requiredSwitch.isOn = component.isRequired
         labelTextField.text = component.labelText
         helperTextField.text = component.helperText
         showErrorSwitch.isOn = component.showError

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -15,9 +15,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     
     lazy var colorPicker: UIColorPickerViewController = {
         let picker = UIColorPickerViewController()
-        if case .custom(let hexCode) = component.color {
-            picker.selectedColor = UIColor(hexString: hexCode)
-        }
         picker.delegate = self
         return picker
     }()
@@ -49,105 +46,16 @@ class TileContainerViewController: BaseViewController<TileContainer> {
                            picker: self.picker,
                            items: BackgroundEffect.allCases)
     }()
-
-    lazy var gradientColorView1: UIStackView = {
-        let stackView = UIStackView()
-        let indicatorWrapper = View()
-        indicatorWrapper.addSubview(gradientColor1View)
-        indicatorWrapper.height(32)
-        indicatorWrapper.pinTop()
-        indicatorWrapper.pinLeading()
-        indicatorWrapper.pinBottom()
-        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        stackView.addArrangedSubview(indicatorWrapper)
-        stackView.distribution = .fillEqually
-        stackView.alignment = .fill
-        var button = Button().with { instance in
-            instance.size = .small
-            instance.use = .secondary
-            instance.text = "Select"
-            instance.onClick = { [weak self] in
-                self?.gradientColorTapped($0, view: self?.gradientColor1View)
-            }
-        }
-        button.tag = 1
-        let buttonWrapper = View()
-        buttonWrapper.addSubview(button)
-        buttonWrapper.height(32)
-        button.pinTop()
-        button.pinTrailing()
-        button.pinBottom()
-        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
-        stackView.addArrangedSubview(buttonWrapper)
-        stackView.tag = 1
-        stackView.spacing = 10
-        return stackView
-    }()
-    
-    lazy var gradientColorView2: UIStackView = {
-        let stackView = UIStackView()
-        stackView.distribution = .fillEqually
-        stackView.alignment = .fill
-        stackView.spacing = 10
-        let indicatorWrapper = View()
-        indicatorWrapper.addSubview(gradientColor2View)
-        indicatorWrapper.height(32)
-        indicatorWrapper.pinTop()
-        indicatorWrapper.pinLeading()
-        indicatorWrapper.pinBottom()
-        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        stackView.addArrangedSubview(indicatorWrapper)
-        var button = Button().with { instance in
-            instance.size = .small
-            instance.use = .secondary
-            instance.text = "Select"
-            instance.onClick = { [weak self] in
-                self?.gradientColorTapped($0, view: self?.gradientColor2View)
-            }
-        }
-        button.tag = 2
-        let buttonWrapper = View()
-        buttonWrapper.addSubview(button)
-        buttonWrapper.height(32)
-        button.pinTop()
-        button.pinTrailing()
-        button.pinBottom()
-        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
-        stackView.addArrangedSubview(buttonWrapper)
-        stackView.tag = 2
-        return stackView
-    }()
-    
-    var gradientColor1View: UIView = {
-        let view = UIView()
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
-        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
-        view.tag = 1
-        return view
-    }()
-
-    var gradientColor2View: UIView = {
-        let view = UIView()
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
-        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
-        view.tag = 2
-        return view
-    }()
     
     var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
     var backgroundColor: BackgroundColor = .secondary
     var padding: Padding = .padding4X
+    var isLinkSwitch = Toggle()
     var clickableSwitch = Toggle()
     var showBackgroundImageSwitch = Toggle()
     var showBorderSwitch = Toggle()
     var showDropShadowSwitch = Toggle()
-    var selectedGradient1Color: String?
-    var selectedGradient2Color: String?
-    var colorPickerType: ColorPickerType = .backgroundColor
     var backgroundImage = UIImage(named: "backgroundTest")!
-    var selectedGradientColorView: UIView?
     var customPaddingRowView: UIView?
     var anyCancellable: AnyCancellable?
     
@@ -168,11 +76,32 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         $0.placeholder = "Minimum 100px else it will occupy full container"
     }
     
+    var colorPickerType: ColorPickerType = .backgroundColor
+    enum ColorPickerType {
+        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
+    }
+    
+    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: .makeWrapper(for: component))
         component.width = 150
         component.color = .secondary
+        component.accessibilityLabel = "Tile Container"
+        component.addContentView(Label().with { $0.text = "Testing Label" })
         setupPicker()
         setupModel()
     }
@@ -187,6 +116,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             $0.text = "For testing max width is limited to 85% of view's width & 65% view's height."
         })
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Is Link", view: isLinkSwitch)
         addFormRow(label: "Clickable", view: clickableSwitch)
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Height", view: heightTextField)
@@ -215,6 +145,11 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             }
         }
 
+        isLinkSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.accessibilityTraits = sender.isOn ? .link : .button
+        }
+
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -239,7 +174,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         }
         
         showDropShadowSwitch.onChange =  { [weak self] sender in
-            self?.component.showDropShadows = sender.isOn
+            self?.component.showDropShadow = sender.isOn
         }
 
         heightTextField
@@ -295,12 +230,10 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             if let effect = $0.effect {
                 self.component.backgroundEffect = effect
                 self.gradientColorsFormStackView.isHidden = true
-                self.selectedGradient1Color = nil
+                self.gradientColorView1.selectedColor = nil
-                self.selectedGradient1Color = nil
+                self.gradientColorView2.selectedColor = nil
-                self.gradientColor1View.backgroundColor = .clear
-                self.gradientColor2View.backgroundColor = .clear
             } else {
-                self.colorPickerType = .gradientColors
+                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -328,19 +261,11 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         contentAreaBackgroundColorButton.onClick = { [weak self] _ in
             guard let self else { return }
             self.colorPickerType = .contentViewBackgroundColor
-            self.colorPicker.selectedColor = self.component.containerView.backgroundColor ?? .white
+            self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white
             self.present(self.colorPicker, animated: true)
         }
     }
     
-    func gradientColorTapped(_ sender: Button, view: UIView?) {
-        selectedGradientColorView = view
-        let selectedColor = (sender.tag == 1) ? selectedGradient1Color : selectedGradient2Color
-        if let selectedColor {
-            colorPicker.selectedColor = UIColor(hexString: selectedColor)
-        }
-        present(colorPicker, animated: true)
-    }
 }
 
 extension TileContainerViewController: ComponentSampleable {
@@ -354,28 +279,38 @@ 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) {
-        guard let hexString = viewController.selectedColor.hexString else { return }
+        let color = viewController.selectedColor
         switch colorPickerType {
         case .contentViewBackgroundColor:
-            component.containerView.backgroundColor = UIColor(hexString: hexString)
+            component.contentView.backgroundColor = color
         case .backgroundColor:
-            component.color = .custom(hexString)
+            component.color = .custom(color)
-        case .gradientColors:
+        case .gradientColor1:
-            guard let selectedGradientColorView else { return }
+            gradientColorView1.selectedColor = viewController.selectedColor
-            if selectedGradientColorView.tag == 1 {
+            updateGradientColors()
-                selectedGradient1Color = hexString
+        case .gradientColor2:
-            } else {
+            gradientColorView2.selectedColor = viewController.selectedColor
-                selectedGradient2Color = hexString
+            updateGradientColors()
-            }
+        }
-            selectedGradientColorView.backgroundColor = UIColor(hexString: hexString)
+    }
-            if let selectedGradient1Color, let selectedGradient2Color {
+    
-                component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+    func updateGradientColors(){
-            }
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
         }
     }
 }
@@ -429,15 +364,10 @@ extension TileContainerViewController {
             }
         }
     }
-    
+        
-    //Internal helper enum to identiy the configuration
-    enum ColorPickerType {
-        case backgroundColor, gradientColors, contentViewBackgroundColor
-    }
-    
     //Internal helper enum to map padding & pass custom padding values
     public enum Padding: String, CaseIterable {
-        case padding2X
+        case padding3X
         case padding4X
         case padding6X
         case padding8X
@@ -446,8 +376,8 @@ extension TileContainerViewController {
         
         public var value: TileContainer.Padding? {
             return switch self {
-            case .padding2X:
+            case .padding3X:
-                    .padding2X
+                    .padding3X
             case .padding4X:
                     .padding4X
             case .padding6X:

VDSSample/ViewControllers/TileletViewController.swift

@@ -25,12 +25,6 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: Tilelet.SubTitleModel.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
     
-    lazy var subtitleColorPickerSelectorView = {
-        PickerSelectorView<Use>(title: "",
-                                picker: self.picker,
-                                items: [.primary, .secondary])
-    }()
-    
     lazy var textPositionPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -69,104 +63,34 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     lazy var colorPicker: UIColorPickerViewController = {
         let picker = UIColorPickerViewController()
-        if case .custom(let hexCode) = component.color {
-            picker.selectedColor = UIColor(hexString: hexCode)
-        }
         picker.delegate = self
         return picker
     }()
     
+    var colorPickerType: ColorPickerType = .backgroundColor
+    enum ColorPickerType {
+        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor, light, dark
+    }
+    
+    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
     lazy var backgroundColorPickerSelectorView = {
         PickerSelectorView(title: "white",
                            picker: self.picker,
                            items: BackgroundColor.allCases)
     }()
-
-    lazy var gradientColorView1: UIStackView = {
-        let stackView = UIStackView()
-        let indicatorWrapper = View()
-        indicatorWrapper.addSubview(gradientColor1View)
-        indicatorWrapper.height(32)
-        indicatorWrapper.pinTop()
-        indicatorWrapper.pinLeading()
-        indicatorWrapper.pinBottom()
-        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        stackView.addArrangedSubview(indicatorWrapper)
-        stackView.distribution = .fillEqually
-        stackView.alignment = .fill
-        var button = Button().with { instance in
-            instance.size = .small
-            instance.use = .secondary
-            instance.text = "Select"
-            instance.onClick = { [weak self] in
-                self?.gradientColorTapped($0, view: self?.gradientColor1View)
-            }
-        }
-        button.tag = 1
-        let buttonWrapper = View()
-        buttonWrapper.addSubview(button)
-        buttonWrapper.height(32)
-        button.pinTop()
-        button.pinTrailing()
-        button.pinBottom()
-        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
-        stackView.addArrangedSubview(buttonWrapper)
-        stackView.tag = 1
-        stackView.spacing = 10
-        return stackView
-    }()
-    
-    lazy var gradientColorView2: UIStackView = {
-        let stackView = UIStackView()
-        stackView.distribution = .fillEqually
-        stackView.alignment = .fill
-        stackView.spacing = 10
-        let indicatorWrapper = View()
-        indicatorWrapper.addSubview(gradientColor2View)
-        indicatorWrapper.height(32)
-        indicatorWrapper.pinTop()
-        indicatorWrapper.pinLeading()
-        indicatorWrapper.pinBottom()
-        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        stackView.addArrangedSubview(indicatorWrapper)
-        var button = Button().with { instance in
-            instance.size = .small
-            instance.use = .secondary
-            instance.text = "Select"
-            instance.onClick = { [weak self] in
-                self?.gradientColorTapped($0, view: self?.gradientColor2View)
-            }
-        }
-        button.tag = 2
-        let buttonWrapper = View()
-        buttonWrapper.addSubview(button)
-        buttonWrapper.height(32)
-        button.pinTop()
-        button.pinTrailing()
-        button.pinBottom()
-        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
-        stackView.addArrangedSubview(buttonWrapper)
-        stackView.tag = 2
-        return stackView
-    }()
-    
-    var gradientColor1View: UIView = {
-        let view = UIView()
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
-        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
-        view.tag = 1
-        return view
-    }()
-    
-    var gradientColor2View: UIView = {
-        let view = UIView()
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
-        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
-        view.tag = 2
-        return view
-    }()
     
     lazy var textAlignmentPickerSelectorView = {
         PickerSelectorView(title: "left",
@@ -174,6 +98,85 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TitleLockup.TextAlignment.allCases)
     }()
     
+    /// titleLockup
+    var currentLabelType: LabelType = .title
+    enum LabelType {
+        case eyebrow, title, subtitle
+    }
+    
+    enum TitleTextColor: String, CaseIterable {
+        case primary, custom
+    }
+    
+    enum TextColor: String, CaseIterable {
+        case primary, secondary, custom
+    }
+    
+    /// eyebrow
+    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var eyebrowColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+
+    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// title
+    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var titleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TitleTextColor.allCases)
+    }()
+    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// subtitle
+    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var subtitleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+
+    
     let backgroundImage = UIImage(named: "backgroundTest")!
     var clickableSwitch = Toggle()
     var eyebrowTextField = TextField()
@@ -189,20 +192,19 @@ class TileletViewController: BaseViewController<Tilelet> {
     var badgeTextField = TextField()
     var eyebrowIsBold = Toggle().with { $0.isOn = true }
     var titleIsBold = Toggle().with { $0.isOn = true }
-    var colorPickerType: ColorPickerType = .backgroundColor
     var selectedGradient1Color: String?
     var selectedGradient2Color: String?
     var selectedGradientColorView: UIView?
     var showDropShadowSwitch = Toggle()
     var backgroundColor: BackgroundColor = .black
     var maxWidthTextField = NumericField()
+    var isLinkSwitch = Toggle()
 
     var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
     
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: .makeWrapper(for: component))
-        
         setupPicker()
         setupModel()
     }
@@ -211,6 +213,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addActionRow()
+        addFormRow(label: "Is Link", view: isLinkSwitch)
         addFormRow(label: "Clickable", view: clickableSwitch)
                 
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
@@ -220,27 +223,8 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
         addFormRow(label: "Text Width", view: textWidthTextField)
         addFormRow(label: "Text Percentage", view: textPercentageTextField)
-        addFormRow(label: "Text Position(Minimum height is configurable.)", view: textPositionPickerSelectorView)
+        addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
-        addFormRow(label: "Description Icon", view: showDescriptionIconSwitch)
+        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)
-        addFormRow(label: "Directional Icon", view: showDirectionalIconSwitch)
-
-        addFormRow(label: "Badge Text", view: badgeTextField)
-        addFormRow(label: "Badge Fill Color", view: badgeFillColorPickerSelectorView)
-        addFormRow(label: "Badge Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
-        addFormRow(label: "Badge Max Width", view: maxWidthTextField)
-
-        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
-        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
-        addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
-        
-        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
-        addFormRow(label: "Title Text", view: titleTextField)
-        addFormRow(label: "Title is Bold", view: titleIsBold)
-        
-        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
-        addFormRow(label: "Subtitle Text", view: subTitleTextField)
-                        
-        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -250,6 +234,52 @@ class TileletViewController: BaseViewController<Tilelet> {
         gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2)
         append(section: gradientColorsFormStackView)
         
+        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: .init().with({
+            $0.title = "Eyebrow"
+            $0.addFormRow(label: "Text Style", tooltip: .init(title: "Text Style", content: "Eyebrow and Subtitle will share the same textStyle."), view: otherStandardStylePickerSelectorView)
+            $0.addFormRow(label: "is Bold", view: eyebrowIsBold)
+            $0.addFormRow(label: "Text", view: eyebrowTextField)
+            $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
+        }))
+        
+        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        append(section: eyebrowColorsFormStackView)
+
+        append(section: .init().with({
+            $0.title = "Title"
+            $0.addFormRow(label: "Text Style", view: titleStandardStylePickerSelectorView)
+            $0.addFormRow(label: "is Bold", view: titleIsBold)
+            $0.addFormRow(label: "Text", view: titleTextField)
+            $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
+        }))
+        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
+        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        append(section: titleColorsFormStackView)
+
+        append(section: .init().with({
+            $0.title = "Subtitle"
+            $0.addFormRow(label: "Text", view: subTitleTextField)
+            $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
+        }))
+        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        append(section: subtitleColorsFormStackView)
+
+        append(section: .init().with({
+            $0.title = "Icons"
+            $0.addFormRow(label: "Description", view: showDescriptionIconSwitch)
+            $0.addFormRow(label: "Directional", view: showDirectionalIconSwitch)
+        }))
+
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -259,6 +289,11 @@ class TileletViewController: BaseViewController<Tilelet> {
             }
         }
         
+        isLinkSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.accessibilityTraits = sender.isOn ? .link : .button
+        }
+        
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
@@ -322,7 +357,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         showDescriptionIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDirectionalIconSwitch.isOn = false
-                self?.component.descriptiveIconModel = .init(size: .medium, surface: .dark)
+                self?.component.descriptiveIconModel = .init(size: .medium)
             } else {
                 self?.component.descriptiveIconModel = nil
             }
@@ -331,7 +366,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         showDirectionalIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDescriptionIconSwitch.isOn = false
-                self?.component.directionalIconModel = .init(size: .medium, surface: .dark)
+                self?.component.directionalIconModel = .init(size: .medium)
             } else {
                 self?.component.directionalIconModel = nil
             }
@@ -357,15 +392,13 @@ class TileletViewController: BaseViewController<Tilelet> {
         showBackgroundImageSwitch.onChange = { [weak self] sender in
             if let image = self?.backgroundImage, sender.isOn {
                 self?.component.backgroundImage = image
-                if self?.component.width == nil {
-                }
             } else {
                 self?.component.backgroundImage = nil
             }
         }
         
         showDropShadowSwitch.onChange =  { [weak self] sender in
-            self?.component.showDropShadows = sender.isOn
+            self?.component.showDropShadow = sender.isOn
         }
         
         imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
@@ -383,7 +416,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     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
@@ -394,7 +427,6 @@ class TileletViewController: BaseViewController<Tilelet> {
         surfacePickerSelectorView.text = component.surface.rawValue
         otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
-        subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
@@ -414,7 +446,20 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            component.titleModel = Tilelet.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TitleTextColor
+            switch titleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .custom:
+                if let light = titleLightColorView.selectedColor {
+                    let dark = titleDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+            
+            component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
         } else {
             component.titleModel = nil
         }
@@ -422,7 +467,22 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch subtitleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = subtitleLightColorView.selectedColor {
+                    let dark = subtitleDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+
+            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
         } else {
             component.subTitleModel = nil
         }
@@ -430,7 +490,22 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
-            component.eyebrowModel = Tilelet.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch eyebrowColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = eyebrowLightColorView.selectedColor {
+                    let dark = eyebrowDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+
+            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.eyebrowModel = nil
         }
@@ -461,10 +536,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setSubTitleModel()
         }
         
-        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setSubTitleModel()
-        }
-        
         textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
             self.component.textPostion = item
@@ -489,12 +560,10 @@ class TileletViewController: BaseViewController<Tilelet> {
             if let effect = item.effect {
                 self.component.backgroundEffect = self.getTilelet(effect: effect)
                 self.gradientColorsFormStackView.isHidden = true
-                self.selectedGradient1Color = nil
+                self.gradientColorView1.selectedColor = nil
-                self.selectedGradient1Color = nil
+                self.gradientColorView2.selectedColor = nil
-                self.gradientColor1View.backgroundColor = .clear
-                self.gradientColor2View.backgroundColor = .clear
             } else {
-                self.colorPickerType = .gradientColors
+                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -505,17 +574,38 @@ class TileletViewController: BaseViewController<Tilelet> {
         
         backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
-            self.component.color = self.getTilelet(backgroundColor: item)
+            if let color = self.getTilelet(backgroundColor: item) {
+                self.component.color = color
+            } else {
+                self.colorPickerType = .backgroundColor
+                self.present(self.colorPicker, animated: true)
+            }            
         }
-    }
+        
-    
+        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-    func gradientColorTapped(_ sender: Button, view: UIView?) {
+            self?.currentLabelType = .eyebrow
-        selectedGradientColorView = view
+            self?.eyebrowColorsFormStackView.isHidden = item != .custom
-        let selectedColor = (sender.tag == 1) ? selectedGradient1Color : selectedGradient2Color
+            if item != .custom {
-        if let selectedColor {
+                self?.setEyebrowModel()
-            colorPicker.selectedColor = UIColor(hexString: selectedColor)
+            }
         }
-        present(colorPicker, animated: true)
+        
+        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .title
+            self?.titleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setTitleModel()
+            }
+        }
+        
+        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .subtitle
+            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setSubTitleModel()
+            }
+        }
+
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -529,7 +619,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
     }
     
-    func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor {
+    func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor? {
         switch backgroundColor {
         case .primary:
                 .primary
@@ -539,6 +629,8 @@ class TileletViewController: BaseViewController<Tilelet> {
                 .white
         case .black:
                 .black
+        case .custom:
+                nil
         }
     }
 }
@@ -559,42 +651,78 @@ extension TileletViewController: ComponentSampleable {
 
 extension TileletViewController: UIColorPickerViewControllerDelegate {
     
-    //Internal helper enum to identiy the configuration
+    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-    enum ColorPickerType {
+        let selectedColor = picker.selectedColor
-        case backgroundColor, gradientColors, contentViewBackgroundColor
+        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 }
+        let color = viewController.selectedColor 
+        var lightColorView: ColorPickerView<ColorPickerType>
+        var darkColorView: ColorPickerView<ColorPickerType>
         switch colorPickerType {
         case .contentViewBackgroundColor:
-            component.containerView.backgroundColor = UIColor(hexString: hexString)
+            component.contentView.backgroundColor = color
         case .backgroundColor:
-            component.color = .custom(hexString)
+            component.color = .custom(color)
-        case .gradientColors:
+        case .gradientColor1:
-            guard let selectedGradientColorView else { return }
+            gradientColorView1.selectedColor = viewController.selectedColor
-            if selectedGradientColorView.tag == 1 {
+            updateGradientColors()
-                selectedGradient1Color = hexString
+        case .gradientColor2:
+            gradientColorView2.selectedColor = viewController.selectedColor
+            updateGradientColors()
+            
+        case .light, .dark:
+            var lightColorView: ColorPickerView<ColorPickerType>
+            var darkColorView: ColorPickerView<ColorPickerType>
+            
+            switch currentLabelType {
+            case .eyebrow:
+                lightColorView = eyebrowLightColorView
+                darkColorView = eyebrowDarkColorView
+            case .title:
+                lightColorView = titleLightColorView
+                darkColorView = titleDarkColorView
+            case .subtitle:
+                lightColorView = subtitleLightColorView
+                darkColorView = subtitleDarkColorView
+            }
+            if colorPickerType == .light {
+                lightColorView.selectedColor = viewController.selectedColor
             } else {
-                selectedGradient2Color = hexString
+                darkColorView.selectedColor = viewController.selectedColor
             }
-            selectedGradientColorView.backgroundColor = UIColor(hexString: hexString)
+            switch currentLabelType {
-            if let selectedGradient1Color, let selectedGradient2Color {
+            case .eyebrow:
-                component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+                setEyebrowModel()
+            case .title:
+                setTitleModel()
+            case .subtitle:
+                setSubTitleModel()
             }
         }
     }
+    
+    func updateGradientColors(){
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
+            component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+        }
+    }
 }
 
 extension TileletViewController {
     
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black
+        case primary, secondary, white, black, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -606,6 +734,8 @@ extension TileletViewController {
                     .white
             case .black:
                     .black
+            case .custom:
+                    nil
             }
         }
     }

VDSSample/ViewControllers/TitleLockupViewController.swift

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