Merge branch 'develop' of https://gitlab.verizon.com/BPHV_MIPS/vds_ios_sample into vasavk/carousel

# Conflicts:
#	VDSSample.xcodeproj/project.pbxproj

VDS.xcworkspace/contents.xcworkspacedata

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Workspace
    version = "1.0">
+   <FileRef
+      location = "group:workspaceSettings.xcconfig">
+   </FileRef>
    <FileRef
       location = "container:VDSSample.xcodeproj">
    </FileRef>

VDSSample.xcodeproj/project.pbxproj

@@ -37,6 +37,7 @@
 		186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
 		18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
 		18AE87522C06FDD60075F181 /* CarouselViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18AE87512C06FDD60075F181 /* CarouselViewController.swift */; };
+		440B84CC2BD8E98B004A732A /* TableViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 440B84CB2BD8E98B004A732A /* TableViewController.swift */; };
 		445BA07A29C088470036A7C5 /* NotificationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07929C088470036A7C5 /* NotificationViewController.swift */; };
 		44604AD929CE1CF900E62B51 /* LineViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD829CE1CF900E62B51 /* LineViewController.swift */; };
 		5FC35BE928D5235A004EBEAC /* ButtonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */; };
@@ -134,6 +135,7 @@
 		186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
 		18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
 		18AE87512C06FDD60075F181 /* CarouselViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselViewController.swift; sourceTree = "<group>"; };
+		440B84CB2BD8E98B004A732A /* TableViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TableViewController.swift; sourceTree = "<group>"; };
 		445BA07929C088470036A7C5 /* NotificationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationViewController.swift; sourceTree = "<group>"; };
 		44604AD829CE1CF900E62B51 /* LineViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LineViewController.swift; sourceTree = "<group>"; };
 		5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonViewController.swift; sourceTree = "<group>"; };
@@ -163,6 +165,8 @@
 		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>"; };
+		EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = "vds-sample-dev.xcconfig"; sourceTree = "<group>"; };
+		EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = "vds-sample.xcconfig"; 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>"; };
@@ -342,6 +346,7 @@
 				EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */,
 				EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */,
 				EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */,
+				440B84CB2BD8E98B004A732A /* TableViewController.swift */,
 				EA5F86CD2A1E863F00BC83E4 /* TabsContainerViewController.swift */,
 				EA596AB92A16B2ED00300C4B /* TabsViewController.swift */,
 				EA985C24296E06EA00F2FF2E /* TextAreaViewController.swift */,
@@ -362,6 +367,8 @@
 			children = (
 				EAF7F0C4289DA24F00B287F5 /* Artifactory */,
 				EAF7F0792899698800B287F5 /* Resources */,
+				EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */,
+				EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */,
 			);
 			path = "Supporting Files";
 			sourceTree = "<group>";
@@ -544,6 +551,7 @@
 				EA596ABA2A16B2ED00300C4B /* TabsViewController.swift in Sources */,
 				EA89204E28B67332006B9984 /* CheckBoxGroupViewController.swift in Sources */,
 				EAA5EEAD28EB6924003B3210 /* InputFieldViewController.swift in Sources */,
+				440B84CC2BD8E98B004A732A /* TableViewController.swift in Sources */,
 				EA985C25296E06EA00F2FF2E /* TextAreaViewController.swift in Sources */,
 				1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */,
 				EA81410E2A0ED8DC004F60D2 /* ButtonIconViewController.swift in Sources */,
@@ -583,6 +591,7 @@
 /* Begin XCBuildConfiguration section */
 		EA3C3BAB289966F1000CA526 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_NONNULL = YES;
@@ -643,6 +652,7 @@
 		};
 		EA3C3BAC289966F1000CA526 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_NONNULL = YES;
@@ -697,6 +707,7 @@
 		};
 		EA3C3BAE289966F1000CA526 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
@@ -704,7 +715,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 64;
+				CURRENT_PROJECT_VERSION = 66;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -732,6 +743,7 @@
 		};
 		EA3C3BAF289966F1000CA526 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
@@ -739,7 +751,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 64;
+				CURRENT_PROJECT_VERSION = 66;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -767,6 +779,7 @@
 		};
 		EAF7F0C0289DA16000B287F5 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
@@ -776,6 +789,7 @@
 		};
 		EAF7F0C1289DA16000B287F5 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
@@ -785,6 +799,7 @@
 		};
 		EAF7F0D0289DA44300B287F5 /* Debug */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A42C0E64A800430AD1 /* vds-sample-dev.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
@@ -794,6 +809,7 @@
 		};
 		EAF7F0D1289DA44300B287F5 /* Release */ = {
 			isa = XCBuildConfiguration;
+			baseConfigurationReference = EA78C7A52C0E64CC00430AD1 /* vds-sample.xcconfig */;
 			buildSettings = {
 				CODE_SIGN_STYLE = Automatic;
 				DEVELOPMENT_TEAM = FCMA4QKS77;

VDSSample/Classes/ColorPickerView.swift

@@ -31,9 +31,12 @@ public class ColorPickerView<EnumType>: UIStackView {
         $0.text = "Select"
     }
 
-    public init(with pickerType: EnumType, onClick: @escaping (ColorPickerView)->Void) {
+    public init(with pickerType: EnumType, color: UIColor? = nil, onClick: @escaping (ColorPickerView)->Void) {
         self.pickerType = pickerType
         super.init(frame: .zero)
+        if let color {
+            selectedColor = color
+        }
         setup()
         button.onClick = { _ in onClick(self) }
     }

VDSSample/Supporting Files/vds-sample-dev.xcconfig

@@ -0,0 +1,11 @@
+//
+//  vds-sample-dev.xcconfig
+//  VDSSample
+//
+//  Created by Matt Bruce on 6/3/24.
+//
+
+// Configuration settings file format documentation can be found at:
+// https://help.apple.com/xcode/#/dev745c5c974
+
+#include? "../../workspaceSettings.xcconfig"

VDSSample/Supporting Files/vds-sample.xcconfig

@@ -0,0 +1,11 @@
+//
+//  vds-sample.xcconfig
+//  VDSSample
+//
+//  Created by Matt Bruce on 6/3/24.
+//
+
+// Configuration settings file format documentation can be found at:
+// https://help.apple.com/xcode/#/dev745c5c974
+
+#include? "../../workspaceSettings.xcconfig"

VDSSample/ViewControllers/BreadcrumbsViewController.swift

@@ -18,18 +18,20 @@ class  BreadcrumbsViewController: BaseViewController<Breadcrumbs> {
     var selectedCrumbLabel = Label().with { $0.textStyle = .boldBodyMedium }
     var allBreadcrumbs: [Breadcrumbs.BreadcrumbItemModel] = [
         .init(text: "Home"),
-        .init(text: "Support", enabeled: false),
+        .init(text: "Support"),
         .init(text: "Service & Apps"),
         .init(text: "My Verizon"),
         .init(text: "Bill"),
-        .init(text: "Mobile Billing & Payments"),
         .init(text: "Billing statement FAQs", selected: true)
     ]
     
     var some: [Breadcrumbs.BreadcrumbItemModel] = [
-        .init(text: "Plans"),
+        .init(text: "Home"),
-        .init(text: "Upgrade Plan"),
+        .init(text: "Support"),
-        .init(text: "Billing Statement Frequently Asked Questions About Stuff You don't want to see", selected: true)
+        .init(text: "Service & Apps"),
+        .init(text: "My Verizon"),
+        .init(text: "Bill"),
+        .init(text: "Billing Statement Frequently Asked Questions to cause word wrap", selected: true)
     ]
     
     override func viewDidLoad() {
@@ -47,7 +49,7 @@ class  BreadcrumbsViewController: BaseViewController<Breadcrumbs> {
         super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Last Crumb Selected", view: selectedSwitch)
-        addFormRow(label: "Large Sample", view: sampleSwitch)
+        addFormRow(label: "No Long Breadcrumbs", view: sampleSwitch)
 
         selectedSwitch.onChange = { [weak self] sender in
             guard let self else { return }
@@ -96,7 +98,7 @@ extension BreadcrumbsViewController: ComponentSampleable {
         let component = Self.makeComponent()
         component.breadcrumbModels =  [
             .init(text: "Home"),
-            .init(text: "Support", enabeled: false),
+            .init(text: "Support"),
             .init(text: "Service & Apps"),
             .init(text: "My Verizon"),
             .init(text: "Bill"),

VDSSample/ViewControllers/InputFieldViewController.swift

@@ -301,7 +301,7 @@ class  InputFieldViewController: BaseViewController<InputField> {
         //reset other fields
         component.actionTextLinkModel = nil
         component.tooltipModel = nil
-        component.cardType = .generic
+        component.cardType = .placeholder
         tooltipTitleTextField.text = nil
         tooltipContentTextField.text = nil
         dateFormatPickerSelectorView.text = component.dateFormat.rawValue

VDSSample/ViewControllers/MenuViewController.swift

@@ -93,6 +93,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "RadioButtonItem", completed: true, viewController: RadioButtonItemViewController.self),
         MenuComponent(title: "RadioButtonGroup", completed: true, viewController: RadioButtonGroupViewController.self),
 //        //MenuComponent(title: "TabsContainer", completed: false, viewController: TabsContainerViewController.self),
+        MenuComponent(title: "Table", completed: true, viewController: TableViewController.self),
         MenuComponent(title: "Tabs", completed: true, viewController: TabsViewController.self),
         MenuComponent(title: "TextArea", completed: true, viewController: TextAreaViewController.self),
         MenuComponent(title: "TextLink", completed: true, viewController: TextLinkViewController.self),
@@ -111,10 +112,15 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
     
     override func viewDidLoad() {
         title = "VDS Sample: Build \(Bundle.main.build ?? "none")"
-        let tooltip =  VDS.Tooltip()
+       
-        tooltip.title = "Release Notes: \(VDSHelper.version)"
+        let content = VDSHelper.releaseNotes()
-        tooltip.content = VDSHelper.releaseNotes()
+        if !content.isEmpty {
-        navigationItem.rightBarButtonItem = UIBarButtonItem(customView: tooltip)
+            let tooltip =  VDS.Tooltip()
+            tooltip.title = "Release Notes: \(VDSHelper.version)"
+            tooltip.content = content
+            navigationItem.rightBarButtonItem = UIBarButtonItem(customView: tooltip)
+        }
+        
         super.viewDidLoad()
         overrideUserInterfaceStyle = .light
         tableView.register(MenuCell.self, forCellReuseIdentifier: "cell")

VDSSample/ViewControllers/TableViewController.swift

@@ -0,0 +1,192 @@
+//
+//  TableViewController.swift
+//  VDSSample
+//
+//  Created by Nadigadda, Sumanth on 24/04/24.
+//
+
+import Foundation
+import VDS
+import UIKit
+import VDSTokens
+
+class TableViewController: BaseViewController<Table> {
+
+    var striped = Toggle()
+    
+    var fillContainer = Toggle()
+    
+    var customColumnWidthSize = NumericField().with {
+        $0.placeholder = "Minimum 50px"
+    }
+    
+    lazy var headerLineStylePicker = {
+        PickerSelectorView(title: "primary", picker: self.picker, items: Line.Style.allCases)
+    }()
+    
+    lazy var rowLineStylePicker = {
+        PickerSelectorView(title: "secondary", picker: self.picker, items: Line.Style.allCases)
+    }()
+    
+    lazy var paddingPicker = {
+        PickerSelectorView(title: "standard", picker: self.picker, items: Table.Padding.allCases)
+    }()
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        self.setupPicker()
+        self.setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Padding", view: paddingPicker)
+        addFormRow(label: "Striped", view: striped)
+        addFormRow(label: "Header line style", view: headerLineStylePicker)
+        addFormRow(label: "Row line style", view: rowLineStylePicker)
+        addFormRow(label: "Fill container", view: fillContainer)
+        addFormRow(label: "Custom column size", view: customColumnWidthSize)
+        
+        fillContainer.isOn = component.fillContainer
+        updateTextFieldStatus(enable: !fillContainer.isOn)
+        
+        addContentTopView(view: component)
+        
+        striped.onChange = { [weak self] sender in
+            self?.component.striped = sender.isOn
+        }
+        
+        fillContainer.onChange = { [weak self] sender in
+            self?.component.fillContainer = sender.isOn
+            self?.updateTextFieldStatus(enable:!sender.isOn)
+            if let count = self?.component.tableHeader.first?.columnsCount,
+               let text = self?.customColumnWidthSize.text,
+               let width = NumberFormatter().number(from: text) {
+                self?.component.columnWidths = Array(repeating: CGFloat(truncating: width), count: count)
+            }
+        }
+                
+        customColumnWidthSize.numberPublisher.sink { [weak self]  text in
+            if let count = self?.component.tableHeader.first?.columnsCount, let text, text.intValue > 50 {
+                self?.component.columnWidths = Array(repeating: CGFloat(truncating: text), count: count)
+            }
+        }.store(in: &subscribers)
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        headerLineStylePicker.onPickerDidSelect = { [weak self] item in
+            var headers = self?.component.tableHeader ?? [TableRowModel]()
+            for currentHeaderIndex in 0..<headers.count {
+                var currentHeader = headers[currentHeaderIndex]
+                for currentHeaderItem in 0..<currentHeader.columnsCount {
+                    currentHeader.columns[currentHeaderItem].bottomLine = item
+                }
+                headers[currentHeaderIndex] = currentHeader
+            }
+            self?.component.tableHeader = headers
+        }
+        
+        rowLineStylePicker.onPickerDidSelect = { [weak self] item in
+            
+            var rows = self?.component.tableRows ?? [TableRowModel]()
+            
+            for currentRowIndex in 0..<rows.count {
+                var currentRow = rows[currentRowIndex]
+                for currentRowItem in 0..<currentRow.columnsCount {
+                    currentRow.columns[currentRowItem].bottomLine = item
+                }
+                rows[currentRowIndex] = currentRow
+            }
+            
+            self?.component.tableRows = rows
+        }
+        
+        paddingPicker.onPickerDidSelect = { [weak self] item in
+            self?.component.padding = item
+        }
+    }
+    
+    func updateTextFieldStatus(enable: Bool) {
+        customColumnWidthSize.isEnabled = enable
+        customColumnWidthSize.backgroundColor = enable ? UIColor.white : VDSColor.paletteGray85
+    }
+    
+    func setupModel() {
+        ///Header row
+        
+        self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: nil),
+                                                              TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Verizon smart family"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping}),
+                                                              TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Call filter"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping })])]
+        
+        ///First row
+        var rows = [TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Cost"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                     TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "$5/month for up to 10 lines"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                    TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "$2.99/month per device"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})])]
+        ///second row
+        rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block web domains"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                     TableItemModel(bottomLine: .secondary, component: Icon().with { $0.name = Icon.Name.checkmark }),
+                     TableItemModel(bottomLine: .secondary, component: Icon().with { $0.name = Icon.Name.checkmark })]))
+        
+        ///Third row
+        rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Block calls and messages from specific numbers"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                     TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Permanently"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),
+                    TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Permanently"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})]))
+        
+        if UIDevice.isIPad {
+            
+            ///Fourth row
+            let titleLockUp = TitleLockup()
+            let eyebrowModel = TitleLockup.EyebrowModel(text: "Today only.")
+            let titleModel = TitleLockup.TitleModel(text: "Get more of our best")
+            let subTitleModel = TitleLockup.SubTitleModel(text: "Get both of our best and pay less. Pair 5G Home Internet with Verizon mobile to save every month.")
+            
+            titleLockUp.eyebrowModel = eyebrowModel
+            titleLockUp.titleModel = titleModel
+            titleLockUp.subTitleModel = subTitleModel
+            
+            let button = Button()
+            button.text = "Testing"
+            
+            rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:Toggle()),
+                         TableItemModel(bottomLine: .secondary, component:titleLockUp),
+                        TableItemModel(bottomLine: .secondary, component: button)]))
+            
+            
+            ///Fifth row
+            let tilelet = Tilelet()
+            let ftitleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
+            let fsubTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
+            tilelet.titleModel = ftitleModel
+            tilelet.subTitleModel = fsubTitleModel
+            
+            let textArea = TextArea()
+            textArea.labelText = "Street Address"
+            textArea.helperText = "For example: 123 Verizon St"
+            textArea.errorText = "Enter a valid address."
+            textArea.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
+            
+            let trailingToolTip = TrailingTooltipLabel()
+            trailingToolTip.labelText = "5G Ultra Wideband is available in your area"
+            trailingToolTip.tooltipModel = .init(title: "Check the formatting of your address",
+                                           content:"House/Building number then street name")
+            let image = UIImage(named: "clean-surface")
+            let imageView = UIImageView(image: image)
+            
+            rows.append(TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component:textArea),
+                         TableItemModel(bottomLine: .secondary, component:imageView),
+                         TableItemModel(bottomLine: .secondary, component:trailingToolTip)]))
+        }
+        
+        
+        component.fillContainer = true
+        component.columnWidths = [400.0, 400.0, 400.0]
+        
+        self.component.tableRows = rows
+    }
+}

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -98,10 +98,53 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: .makeWrapper(for: component))
-        component.width = 150
+        component.width = 300
         component.color = .secondary
         component.accessibilityLabel = "Tile Container"
-        component.addContentView(Label().with { $0.text = "Testing Label"; $0.isAccessibilityElement = true; })
+        
+        let level2View = View()
+        level2View.backgroundColor = .purple
+        
+        let level3View = View()
+        level3View.backgroundColor = .yellow
+        level2View.addSubview(level3View)
+        level3View.pinToSuperView(.uniform(15))
+
+        let level2label = Label()
+        level2label.text = "Do you want to Register?"
+       
+        level3View.addSubview(level2label)
+        level2label.pinTop().pinLeading()
+        
+        let level3Button = Button()
+        level3Button.setTitle("Register", for: .normal)
+        
+        level3View.addSubview(level3Button)
+        level3Button.pinTop(anchor: level2label.bottomAnchor, constant: 5)
+        level3Button.pinLeading()
+       
+        let level4View = View()
+        level4View.backgroundColor = .green
+        level3View.addSubview(level4View)
+        level4View.pinTop(anchor: level3Button.bottomAnchor, constant: 10)
+        level4View.pinLeading()
+        level4View.pinBottom()
+        level4View.pinTrailing()
+       
+        let level4Label = Label()
+        level4Label.text = "Forgot your info?"
+        level4View.addSubview(level4Label)
+        level4Label.pinTop().pinLeading()
+
+        let level4Button = Button()
+        level4Button.setTitle("Forgot Password", for: .normal)
+        level4View.addSubview(level4Button)
+        
+        level4Button.pinTop(anchor: level4Label.bottomAnchor, constant: 5)
+        level4Button.pinLeading().pinBottom()
+        
+
+        component.addContentView(level2View)
         setupPicker()
         setupModel()
     }

VDSSample/ViewControllers/TileletViewController.swift

@@ -71,7 +71,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     enum ColorPickerType {
         case backgroundColor
         case gradientColor1, gradientColor2
-        case contentViewBackgroundColor, light, dark
+        case contentViewBackgroundColor, token, custom
     }
     
     lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@@ -107,117 +107,152 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     enum TitleTextColor: String, CaseIterable {
-        case primary, custom
+        case primary, token, custom
     }
     
     enum TextColor: String, CaseIterable {
-        case primary, secondary, custom
+        case primary, secondary, token, custom
+    }
+    
+    enum IconColor: String, CaseIterable {
+        case `default`, token, custom
     }
     
     /// eyebrow
-    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var eyebrowColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
                            items: TextColor.allCases)
     }()
 
-    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
+    lazy var eyebrowTokenColorView = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
+        PickerSelectorView(title: "",
-            self?.colorPickerType = picker.pickerType
+                           picker: self.picker,
-            self?.selectedColorTapped(picker)
+                           items: UIColor.VDSColor.allCases)
-        }
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
     }()
-    
+
-    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
+    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.currentSurfaceColorType = .eyebrow
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
     
     /// title
-    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var titleColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var titleColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
                            items: TitleTextColor.allCases)
     }()
-    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
+    lazy var titleTokenColorView = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
+        PickerSelectorView(title: "",
-            self?.colorPickerType = picker.pickerType
+                           picker: self.picker,
-            self?.selectedColorTapped(picker)
+                           items: UIColor.VDSColor.allCases)
-        }
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+
     }()
-    
+
-    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
+    lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.currentSurfaceColorType = .title
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
     
     /// subtitle
-    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var subtitleColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
                            items: TextColor.allCases)
     }()
-    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
+    lazy var subtitleTokenColorView = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
+        PickerSelectorView(title: "",
-            self?.colorPickerType = picker.pickerType
+                           picker: self.picker,
-            self?.selectedColorTapped(picker)
+                           items: UIColor.VDSColor.allCases)
-        }
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
     }()
-    
+
-    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
+    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.currentSurfaceColorType = .subtitle
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
 
+    var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
+    var descriptionIconTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var descriptionIconColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var descriptionNamePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
                            items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
     }()
-
+    
     lazy var descriptionIconSizePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
                            items: Icon.Size.allCases)
     }()
 
-    lazy var descriptionIconLightColorView: ColorPickerView<ColorPickerType> = {
+    lazy var descriptionIconColorPickerSelectorView = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: IconColor.allCases)
+        .with { $0.text = IconColor.default.rawValue }
+    }()
+
+    lazy var descriptionIconTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
             self?.currentSurfaceColorType = .descriptionIcon
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
-    
+        
-    var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var descriptionIconDarkColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
-            self?.currentSurfaceColorType = .descriptionIcon
-            self?.colorPickerType = picker.pickerType
-            self?.selectedColorTapped(picker)
-        }
-    }()
-    
     var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
-    lazy var directionalIconLightColorView: ColorPickerView<ColorPickerType> = {
+    var directionalIconTokenFormStackView = FormSection().with { $0.isHidden = true }
-        return .init(with: ColorPickerType.light) { [weak self] picker in
+    var directionalIconColorFormStackView = FormSection().with { $0.isHidden = true }
-            self?.currentSurfaceColorType = .directionalIcon
+
-            self?.colorPickerType = picker.pickerType
+    lazy var directionalIconSizePickerSelectorView = {
-            self?.selectedColorTapped(picker)
+        PickerSelectorView(title: "",
-        }
+                           picker: self.picker,
+                           items: Icon.Size.allCases)
     }()
-    
+
-    lazy var directionalIconDarkColorView: ColorPickerView<ColorPickerType> = {
+
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+    lazy var directionalIconColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: IconColor.allCases)
+        .with { $0.text = IconColor.default.rawValue }
+    }()
+
+    lazy var directionalIconTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    lazy var directionalIconCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom) { [weak self] picker in
             self?.currentSurfaceColorType = .directionalIcon
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
@@ -309,9 +344,10 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
         }))
         
-        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
+        eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
-        append(section: eyebrowColorsFormStackView)
+        append(section: eyebrowTokenFormStackView)
+        append(section: eyebrowColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Title"
@@ -320,18 +356,20 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.addFormRow(label: "Text", view: titleTextField)
             $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
         }))
-        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
+        titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
-        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
-        append(section: titleColorsFormStackView)
+        append(section: titleTokenFormStackView)
+        append(section: titleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Subtitle"
             $0.addFormRow(label: "Text", view: subTitleTextField)
             $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
         }))
-        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
+        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
-        append(section: subtitleColorsFormStackView)
+        append(section: subtitleTokenFormStackView)
+        append(section: subtitleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Description Icon "
@@ -340,9 +378,13 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: descriptionIconFormStackView)
         descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
         descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
-        descriptionIconFormStackView.addFormRow(label: "Light", view: descriptionIconLightColorView)
+        descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
-        descriptionIconFormStackView.addFormRow(label: "Dark", view: descriptionIconDarkColorView)
+        descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
+        descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
+        append(section: descriptionIconTokenFormStackView)
+        append(section: descriptionIconColorFormStackView)
 
+        
         append(section: .init().with({
             $0.title = "Directional Icon"
             $0.addFormRow(label: "Show", view: showDirectionalIconSwitch)
@@ -350,9 +392,12 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: directionalIconFormStackView)
         directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
         directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
-        directionalIconFormStackView.addFormRow(label: "Light", view: directionalIconLightColorView)
+        directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
-        directionalIconFormStackView.addFormRow(label: "Dark", view: directionalIconDarkColorView)
+        directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
-        
+        directionalIconColorFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
+        append(section: directionalIconTokenFormStackView)
+        append(section: directionalIconColorFormStackView)
+
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -428,25 +473,13 @@ class TileletViewController: BaseViewController<Tilelet> {
             }.store(in: &subscribers)
         
         showDescriptionIconSwitch.onChange = { [weak self] sender in
-            self?.descriptionIconFormStackView.isHidden = !sender.isOn
+            guard let self else { return }
-            self?.directionalIconFormStackView.isHidden = sender.isOn
+            self.setDescriptionIconForm()
-            if sender.isOn {
-                self?.showDirectionalIconSwitch.isOn = false
-                self?.setDescriptiveIconModel()
-            } else {
-                self?.component.descriptiveIconModel = nil
-            }
         }
         
         showDirectionalIconSwitch.onChange = { [weak self] sender in
-            self?.descriptionIconFormStackView.isHidden = sender.isOn
+            guard let self else { return }
-            self?.directionalIconFormStackView.isHidden = !sender.isOn
+            self.setDirectionalIconForm()
-            if sender.isOn {
-                self?.showDescriptionIconSwitch.isOn = false
-                self?.setDirectionalIconModel()
-            } else {
-                self?.component.directionalIconModel = nil
-            }
         }
 
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
@@ -490,6 +523,59 @@ class TileletViewController: BaseViewController<Tilelet> {
             }.store(in: &subscribers)
     }
     
+    func setIconColorForms() {
+        setDirectionalIconColorForm()
+        setDescriptionIconColorForm()
+    }
+    
+    func setDescriptionIconForm() {
+        let showForm = showDescriptionIconSwitch.isOn
+        descriptionIconFormStackView.isHidden = !showForm
+        directionalIconFormStackView.isHidden = true
+        if showForm {
+            showDirectionalIconSwitch.isOn = false
+            setDescriptiveIconModel()
+        } else {
+            component.descriptiveIconModel = nil
+        }
+        setIconColorForms()
+    }
+    
+    func setDirectionalIconForm() {
+        let showForm = showDirectionalIconSwitch.isOn
+        directionalIconFormStackView.isHidden = !showForm
+        descriptionIconFormStackView.isHidden = true
+        if showForm {
+            showDescriptionIconSwitch.isOn = false
+            setDirectionalIconModel()
+        } else {
+            component.directionalIconModel = nil
+        }
+        setIconColorForms()
+    }
+    
+    func setDirectionalIconColorForm() {
+        let selectedItem = directionalIconColorPickerSelectorView.selectedItem
+        if showDirectionalIconSwitch.isOn && selectedItem != .default  {
+            directionalIconTokenFormStackView.isHidden = selectedItem != .token
+            directionalIconColorFormStackView.isHidden = selectedItem != .custom
+        } else {
+            directionalIconTokenFormStackView.isHidden = true
+            directionalIconColorFormStackView.isHidden = true
+        }
+    }
+    
+    func setDescriptionIconColorForm() {
+        let selectedItem = descriptionIconColorPickerSelectorView.selectedItem
+        if showDescriptionIconSwitch.isOn && selectedItem != .default {
+            descriptionIconTokenFormStackView.isHidden = selectedItem != .token
+            descriptionIconColorFormStackView.isHidden = selectedItem != .custom
+        } else {
+            descriptionIconTokenFormStackView.isHidden = true
+            descriptionIconColorFormStackView.isHidden = true
+        }
+    }
+    
     func setupModel() {
         let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
         let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
@@ -511,13 +597,11 @@ class TileletViewController: BaseViewController<Tilelet> {
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         updateOtherTextStyles()
         
-        descriptionIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
+        descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
-        descriptionIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
         descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
         descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
 
-        directionalIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
+        directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
-        directionalIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
         directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
         directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
     }
@@ -537,12 +621,13 @@ class TileletViewController: BaseViewController<Tilelet> {
             switch titleColorPickerSelectorView.selectedItem {
             case .primary:
                 textColor = .primary
+            case .token:
+                textColor = .token(titleTokenColorView.selectedItem)
             case .custom:
-                if let light = titleLightColorView.selectedColor {
+                if let color = titleCustomColorView.selectedColor {
-                    let dark = titleDarkColorView.selectedColor ?? light
+                    textColor = .custom(color)
-                    textColor = .custom(light, dark)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
             
@@ -560,12 +645,13 @@ class TileletViewController: BaseViewController<Tilelet> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(subtitleTokenColorView.selectedItem)
             case .custom:
-                if let light = subtitleLightColorView.selectedColor {
+                if let color = subtitleCustomColorView.selectedColor {
-                    let dark = subtitleDarkColorView.selectedColor ?? light
+                    textColor = .custom(color)
-                    textColor = .custom(light, dark)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
 
@@ -583,15 +669,15 @@ class TileletViewController: BaseViewController<Tilelet> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(eyebrowTokenColorView.selectedItem)
             case .custom:
-                if let light = eyebrowLightColorView.selectedColor {
+                if let color = eyebrowCustomColorView.selectedColor {
-                    let dark = eyebrowDarkColorView.selectedColor ?? light
+                    textColor = .custom(color)
-                    textColor = .custom(light, dark)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
-
             component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.eyebrowModel = nil
@@ -599,31 +685,33 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     func setDescriptiveIconModel() {
-        let light = descriptionIconLightColorView.selectedColor ?? descriptionIconDarkColorView.selectedColor
-        let dark = descriptionIconDarkColorView.selectedColor ?? descriptionIconLightColorView.selectedColor
         let iconSize = descriptionIconSizePickerSelectorView.selectedItem
         let iconName = descriptionNamePickerSelectorView.selectedItem
-        
+        var iconColor: Tilelet.IconColor? = nil
-        if let light, let dark {
+        switch descriptionIconColorPickerSelectorView.selectedItem {
-            component.descriptiveIconModel = .init(name: iconName,
+        case .token:
-                                                   colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
+            iconColor = .token(descriptionIconTokenColorView.selectedItem)
-        } else {
+        case .custom:
-            component.descriptiveIconModel = .init(name: iconName,
+            iconColor = .custom(descriptionIconCustomColorView.selectedColor ?? .white)
-                                                   size: iconSize)
+        default:
+            break
         }
+        component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize)
     }
     
     func setDirectionalIconModel() {
-        let light = directionalIconLightColorView.selectedColor ?? directionalIconDarkColorView.selectedColor
-        let dark = directionalIconDarkColorView.selectedColor ?? directionalIconLightColorView.selectedColor
         let iconType = directionIconPickerSelectorView.selectedItem
         let iconSize = directionIconSizePickerSelectorView.selectedItem
-                        
+        var iconColor: Tilelet.IconColor? = nil
-        if let light, let dark {
+        switch directionalIconColorPickerSelectorView.selectedItem {
-            component.directionalIconModel = .init(iconType: iconType, colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
+        case .token:
-        } else {
+            iconColor = .token(directionalIconTokenColorView.selectedItem)
-            component.directionalIconModel = .init(iconType: iconType, size: iconSize)
+        case .custom:
+            iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
+        default:
+            break
         }
+        component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
     }
     
     func updateOtherTextStyles() {
@@ -699,28 +787,42 @@ class TileletViewController: BaseViewController<Tilelet> {
         
         eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .eyebrow
-            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            self?.eyebrowTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.eyebrowColorFormStackView.isHidden = item != .custom
-                self?.setEyebrowModel()
+            self?.setEyebrowModel()
-            }
         }
         
+        eyebrowTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setEyebrowModel()
+        }
+
         titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .title
-            self?.titleColorsFormStackView.isHidden = item != .custom
+            self?.titleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.titleColorFormStackView.isHidden = item != .custom
-                self?.setTitleModel()
+            self?.setTitleModel()
-            }
+        }
+        
+        titleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setTitleModel()
         }
         
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .subtitle
-            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            self?.subtitleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.subtitleColorFormStackView.isHidden = item != .custom
-                self?.setSubTitleModel()
+            self?.setSubTitleModel()
-            }
+        }
+        
+        subtitleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setSubTitleModel()
         }
 
+        descriptionIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setIconColorForms()
+            self?.setDescriptiveIconModel()
+        }
+        
         descriptionNamePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDescriptiveIconModel()
         }
@@ -729,6 +831,16 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setDescriptiveIconModel()
         }
         
+        descriptionIconTokenColorView.onPickerDidSelect = {  [weak self] item in
+            self?.colorPickerType = .token
+            self?.setDescriptiveIconModel()
+        }
+        
+        directionalIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setIconColorForms()
+            self?.setDirectionalIconModel()
+        }
+        
         directionIconPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDirectionalIconModel()
         }
@@ -736,6 +848,11 @@ class TileletViewController: BaseViewController<Tilelet> {
         directionIconSizePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDirectionalIconModel()
         }
+        
+        directionalIconTokenColorView.onPickerDidSelect = {  [weak self] item in
+            self?.colorPickerType = .token
+            self?.setDirectionalIconModel()
+        }
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -808,33 +925,22 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
         case .gradientColor2:
             gradientColorView2.selectedColor = viewController.selectedColor
             updateGradientColors()
-            
+        case .custom:
-        case .light, .dark:
+            var colorView: ColorPickerView<ColorPickerType>
-            var lightColorView: ColorPickerView<ColorPickerType>
-            var darkColorView: ColorPickerView<ColorPickerType>
             
             switch currentSurfaceColorType {
             case .eyebrow:
-                lightColorView = eyebrowLightColorView
+                colorView = eyebrowCustomColorView
-                darkColorView = eyebrowDarkColorView
             case .title:
-                lightColorView = titleLightColorView
+                colorView = titleCustomColorView
-                darkColorView = titleDarkColorView
             case .subtitle:
-                lightColorView = subtitleLightColorView
+                colorView = subtitleCustomColorView
-                darkColorView = subtitleDarkColorView
             case .directionalIcon:
-                lightColorView = directionalIconLightColorView
+                colorView = directionalIconCustomColorView
-                darkColorView = directionalIconDarkColorView
             case .descriptionIcon:
-                lightColorView = descriptionIconLightColorView
+                colorView = descriptionIconCustomColorView
-                darkColorView = descriptionIconDarkColorView
-            }
-            if colorPickerType == .light {
-                lightColorView.selectedColor = viewController.selectedColor
-            } else {
-                darkColorView.selectedColor = viewController.selectedColor
             }
+            colorView.selectedColor = viewController.selectedColor
             
             switch currentSurfaceColorType {
             case .eyebrow:
@@ -847,7 +953,9 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
                 setDirectionalIconModel()
             case .descriptionIcon:
                 setDescriptiveIconModel()
-            }
+            }            
+        default:
+            break
         }
     }
     

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -45,83 +45,88 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     }()
     
     var currentLabelType: LabelType = .title
-    var colorPickerType: ColorPickerType = .light
+    var colorPickerType: ColorPickerType = .custom
     
     enum LabelType {
         case eyebrow, title, subtitle
     }
     
     enum TitleTextColor: String, CaseIterable {
-        case primary, custom
+        case primary, token, custom
     }
     
     enum TextColor: String, CaseIterable {
-        case primary, secondary, custom
+        case primary, secondary, token, custom
     }
     
     enum ColorPickerType {
-        case light, dark
+        case custom
     }
     
     /// eyebrow
-    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var eyebrowColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
                            items: TextColor.allCases)
     }()
 
-    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
+    lazy var eyebrowTokenColorView = {
-        return .init(with: ColorPickerType.light) { [weak self] picker in
+        PickerSelectorView(title: "",
-            self?.colorPickerType = picker.pickerType
+                           picker: self.picker,
-            self?.selectedColorTapped(picker)
+                           items: UIColor.VDSColor.allCases)
-        }
+        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
     }()
-    
+
-    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
+    lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+        return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
     
     /// title
-    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var titleColorFormStackView = 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> = {
+    lazy var titleTokenColorView = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
+    }()
+
+    lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
     }()
     
     /// subtitle
-    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleColorFormStackView = 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> = {
+    lazy var subtitleTokenColorView = {
-        return .init(with: ColorPickerType.dark) { [weak self] picker in
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
+    }()
+
+    lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
             self?.colorPickerType = picker.pickerType
             self?.selectedColorTapped(picker)
         }
@@ -145,24 +150,27 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
         addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
         addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
+        eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
-        append(section: eyebrowColorsFormStackView)
+        append(section: eyebrowTokenFormStackView)
+        append(section: eyebrowColorFormStackView)
 
         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)
+        titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
-        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
-        append(section: titleColorsFormStackView)
+        append(section: titleTokenFormStackView)
+        append(section: titleColorFormStackView)
 
         addFormRow(label: "Subtitle Text", view: subTitleTextField)
         addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
-        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
+        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
-        append(section: subtitleColorsFormStackView)
+        append(section: subtitleTokenFormStackView)
-        
+        append(section: subtitleColorFormStackView)
+
         
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setOtherModels()
@@ -221,12 +229,13 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
             switch titleColorPickerSelectorView.selectedItem {
             case .primary:
                 textColor = .primary
+            case .token:
+                textColor = .token(titleTokenColorView.selectedItem)
             case .custom:
-                if let light = titleLightColorView.selectedColor {
+                if let color = titleCustomColorView.selectedColor {
-                    let dark = titleDarkColorView.selectedColor ?? light
+                    textColor = .custom(color)
-                    textColor = .custom(light, dark)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
 
@@ -255,12 +264,13 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(subtitleTokenColorView.selectedItem)
             case .custom:
-                if let light = subtitleLightColorView.selectedColor {
+                if let color = subtitleCustomColorView.selectedColor {
-                    let dark = subtitleDarkColorView.selectedColor ?? light
+                    textColor = .custom(color)
-                    textColor = .custom(light, dark)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
                 }
             }
             component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
@@ -276,13 +286,15 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                 textColor = .primary
             case .secondary:
                 textColor = .secondary
+            case .token:
+                textColor = .token(eyebrowTokenColorView.selectedItem)
             case .custom:
-                if let light = eyebrowLightColorView.selectedColor {
+                if let color = eyebrowCustomColorView.selectedColor {
-                    let dark = eyebrowDarkColorView.selectedColor ?? light
+                    textColor = .custom(color)
-                    textColor = .custom(light, dark)
                 } else {
-                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight)
-                }            }
+                }           
+            }
             component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
             debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
             
@@ -319,26 +331,35 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         
         eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentLabelType = .eyebrow
-            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            self?.eyebrowTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.eyebrowColorFormStackView.isHidden = item != .custom
-                self?.setOtherModels()
+            self?.setOtherModels()
-            }
+        }
+        
+        eyebrowTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setOtherModels()
         }
         
         titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentLabelType = .title
-            self?.titleColorsFormStackView.isHidden = item != .custom
+            self?.titleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.titleColorFormStackView.isHidden = item != .custom
-                self?.setTitleModel()
+            self?.setTitleModel()
-            }
+        }
+        
+        titleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setTitleModel()
         }
         
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentLabelType = .subtitle
-            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            self?.subtitleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.subtitleColorFormStackView.isHidden = item != .custom
-                self?.setOtherModels()
+            self?.setOtherModels()
-            }
+        }
+        
+        subtitleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setOtherModels()
         }
     }
 }
@@ -373,26 +394,18 @@ extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
     
     func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
         guard let hexString = viewController.selectedColor.hexString else { return }
-        var lightColorView: ColorPickerView<ColorPickerType>
+        var colorView: ColorPickerView<ColorPickerType>
-        var darkColorView: ColorPickerView<ColorPickerType>
         
         switch currentLabelType {
         case .eyebrow:
-            lightColorView = eyebrowLightColorView
+            colorView = eyebrowCustomColorView
-            darkColorView = eyebrowDarkColorView
         case .title:
-            lightColorView = titleLightColorView
+            colorView = titleCustomColorView
-            darkColorView = titleDarkColorView
         case .subtitle:
-            lightColorView = subtitleLightColorView
+            colorView = subtitleCustomColorView
-            darkColorView = subtitleDarkColorView
-        }
-        switch colorPickerType {
-        case .light:
-            lightColorView.selectedColor = viewController.selectedColor
-        case .dark:
-            darkColorView.selectedColor = viewController.selectedColor
         }
+
+        colorView.selectedColor = viewController.selectedColor
         
         if currentLabelType == .title {
             setTitleModel()

workspaceSettings.xcconfig

@@ -0,0 +1,11 @@
+//
+//  workspaceSettings.xcconfig
+//  
+//
+//  Created by Matt Bruce on 6/3/24.
+//
+
+// Configuration settings file format documentation can be found at:
+// https://help.apple.com/xcode/#/dev745c5c974
+
+VDS_ADD_CHANGELOG_FILES = 1