Refactor

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift

@@ -40,15 +40,14 @@ struct ComponentColorPicker: View {
   var body: some View {
     Picker("Color", selection: self.$selection) {
       Text("Primary").tag(ComponentColor.primary)
-      Text("Secondary").tag(ComponentColor.secondary)
       Text("Accent").tag(ComponentColor.accent)
       Text("Success").tag(ComponentColor.success)
       Text("Warning").tag(ComponentColor.warning)
       Text("Danger").tag(ComponentColor.danger)
       Text("Custom").tag(ComponentColor(
         main: .universal(.uiColor(.systemPurple)),
-        contrast: .universal(.uiColor(.systemYellow)))
-      )
+        contrast: .universal(.uiColor(.systemYellow))
+      ))
     }
   }
 }
@@ -62,15 +61,14 @@ struct ComponentOptionalColorPicker: View {
     Picker("Color", selection: self.$selection) {
       Text("Default").tag(Optional<ComponentColor>.none)
       Text("Primary").tag(ComponentColor.primary)
-      Text("Secondary").tag(ComponentColor.secondary)
       Text("Accent").tag(ComponentColor.accent)
       Text("Success").tag(ComponentColor.success)
       Text("Warning").tag(ComponentColor.warning)
       Text("Danger").tag(ComponentColor.danger)
       Text("Custom").tag(ComponentColor(
         main: .universal(.uiColor(.systemPurple)),
-        contrast: .universal(.uiColor(.systemYellow)))
-      )
+        contrast: .universal(.uiColor(.systemYellow))
+      ))
     }
   }
 }
@@ -93,18 +91,84 @@ struct CornerRadiusPicker<Custom: View>: View {
   }
 }
 
-// MARK: - FontPicker
+// MARK: - FontPickers
 
-struct FontPicker: View {
+struct BodyFontPicker: View {
+  let title: String
+  @Binding var selection: UniversalFont?
+
+  init(title: String = "Font", selection: Binding<UniversalFont?>) {
+    self.title = title
+    self._selection = selection
+  }
+
+  var body: some View {
+    Picker(self.title, selection: self.$selection) {
+      Text("Default").tag(Optional<UniversalFont>.none)
+      Text("Small").tag(UniversalFont.smBody)
+      Text("Medium").tag(UniversalFont.mdBody)
+      Text("Large").tag(UniversalFont.lgBody)
+      Text("Custom: system semibold of size 16").tag(UniversalFont.system(size: 16, weight: .semibold))
+    }
+  }
+}
+
+struct ButtonFontPicker: View {
+  let title: String
+  @Binding var selection: UniversalFont?
+
+  init(title: String = "Font", selection: Binding<UniversalFont?>) {
+    self.title = title
+    self._selection = selection
+  }
+
+  var body: some View {
+    Picker(self.title, selection: self.$selection) {
+      Text("Default").tag(Optional<UniversalFont>.none)
+      Text("Small").tag(UniversalFont.smButton)
+      Text("Medium").tag(UniversalFont.mdButton)
+      Text("Large").tag(UniversalFont.lgButton)
+      Text("Custom: system bold of size 16").tag(UniversalFont.system(size: 16, weight: .bold))
+    }
+  }
+}
+
+struct HeadlineFontPicker: View {
+  let title: String
   @Binding var selection: UniversalFont?
+
+  init(title: String = "Font", selection: Binding<UniversalFont?>) {
+    self.title = title
+    self._selection = selection
+  }
 
   var body: some View {
-    Picker("Font", selection: self.$selection) {
+    Picker(self.title, selection: self.$selection) {
+      Text("Default").tag(Optional<UniversalFont>.none)
+      Text("Small").tag(UniversalFont.smHeadline)
+      Text("Medium").tag(UniversalFont.mdHeadline)
+      Text("Large").tag(UniversalFont.lgHeadline)
+      Text("Custom: system bold of size 20").tag(UniversalFont.system(size: 20, weight: .bold))
+    }
+  }
+}
+
+struct CaptionFontPicker: View {
+  let title: String
+  @Binding var selection: UniversalFont?
+
+  init(title: String = "Font", selection: Binding<UniversalFont?>) {
+    self.title = title
+    self._selection = selection
+  }
+
+  var body: some View {
+    Picker(self.title, selection: self.$selection) {
       Text("Default").tag(Optional<UniversalFont>.none)
-      Text("Small").tag(UniversalFont.Component.small)
-      Text("Medium").tag(UniversalFont.Component.medium)
-      Text("Large").tag(UniversalFont.Component.large)
-      Text("Custom: system bold of size 18").tag(UniversalFont.system(size: 18, weight: .bold))
+      Text("Small").tag(UniversalFont.smCaption)
+      Text("Medium").tag(UniversalFont.mdCaption)
+      Text("Large").tag(UniversalFont.lgCaption)
+      Text("Custom: system semibold of size 12").tag(UniversalFont.system(size: 12, weight: .semibold))
     }
   }
 }
@@ -173,7 +237,6 @@ struct UniversalColorPicker: View {
   var body: some View {
     Picker(self.title, selection: self.$selection) {
       Text("Primary").tag(UniversalColor.primary)
-      Text("Secondary").tag(UniversalColor.secondary)
       Text("Accent").tag(UniversalColor.accent)
       Text("Success").tag(UniversalColor.success)
       Text("Warning").tag(UniversalColor.warning)

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewWrapper.swift

@@ -21,8 +21,8 @@ struct PreviewWrapper<Content: View>: View {
             LinearGradient(
               gradient: Gradient(
                 colors: [
-                  Palette.Brand.blue.color(for: self.colorScheme),
-                  Palette.Brand.purple.color(for: self.colorScheme)
+                  UniversalColor.blue.color(for: self.colorScheme),
+                  UniversalColor.purple.color(for: self.colorScheme),
                 ]
               ),
               startPoint: .topLeading,
@@ -42,3 +42,16 @@ struct PreviewWrapper<Content: View>: View {
     .padding(.horizontal)
   }
 }
+
+// MARK: - Colors
+
+extension UniversalColor {
+  fileprivate static let blue: Self = .themed(
+    light: .hex("#3684F8"),
+    dark: .hex("#0058DB")
+  )
+  fileprivate static let purple: Self = .themed(
+    light: .hex("#A920FD"),
+    dark: .hex("#7800C1")
+  )
+}

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift

@@ -18,11 +18,11 @@ struct ButtonPreview: View {
       }
       Form {
         AnimationScalePicker(selection: self.$model.animationScale)
-        ComponentColorPicker(selection: self.$model.color)
+        ComponentOptionalColorPicker(selection: self.$model.color)
         CornerRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
-        FontPicker(selection: self.$model.font)
+        ButtonFontPicker(selection: self.$model.font)
         Toggle("Enabled", isOn: self.$model.isEnabled)
         Toggle("Full Width", isOn: self.$model.isFullWidth)
         SizePicker(selection: self.$model.size)
@@ -32,7 +32,6 @@ struct ButtonPreview: View {
           Text("Bordered with small border").tag(ButtonVM.Style.bordered(.small))
           Text("Bordered with medium border").tag(ButtonVM.Style.bordered(.medium))
           Text("Bordered with large border").tag(ButtonVM.Style.bordered(.large))
-          Text("Bordered with custom border: 6px").tag(ButtonVM.Style.bordered(.custom(6)))
         }
       }
     }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CheckboxPreview.swift

@@ -34,7 +34,7 @@ struct CheckboxPreview: View {
         CornerRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 2px").tag(ComponentRadius.custom(2))
         }
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         Toggle("Enabled", isOn: self.$model.isEnabled)
         SizePicker(selection: self.$model.size)
       }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CountdownPreview.swift

@@ -16,7 +16,6 @@ struct CountdownPreview: View {
       }
       Form {
         ComponentOptionalColorPicker(selection: self.$model.color)
-        FontPicker(selection: self.$model.font)
         Picker("Locale", selection: self.$model.locale) {
           Text("Current").tag(Locale.current)
           Text("EN").tag(Locale(identifier: "en"))
@@ -30,6 +29,8 @@ struct CountdownPreview: View {
           Text("HI").tag(Locale(identifier: "hi"))
           Text("PT").tag(Locale(identifier: "pt"))
         }
+        HeadlineFontPicker(title: "Main Font", selection: self.$model.mainFont)
+        CaptionFontPicker(title: "Secondary Font", selection: self.$model.secondaryFont)
         SizePicker(selection: self.$model.size)
         Picker("Style", selection: self.$model.style) {
           Text("Plain").tag(CountdownVM.Style.plain)

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/DividerPreview.swift

@@ -15,21 +15,23 @@ struct DividerPreview: View {
         SUDivider(model: self.model)
       }
       Form {
+        Picker("Color", selection: self.$model.color) {
+          Text("Default").tag(Optional<ComponentColor>.none)
+          Text("Primary").tag(ComponentColor.primary)
+          Text("Accent").tag(ComponentColor.accent)
+          Text("Success").tag(ComponentColor.success)
+          Text("Warning").tag(ComponentColor.warning)
+          Text("Danger").tag(ComponentColor.danger)
+          Text("Custom").tag(ComponentColor(
+            main: .universal(.uiColor(.systemPurple)),
+            contrast: .universal(.uiColor(.systemYellow))
+          ))
+        }
         Picker("Orientation", selection: self.$model.orientation) {
           Text("Horizontal").tag(DividerVM.Orientation.horizontal)
           Text("Vertical").tag(DividerVM.Orientation.vertical)
         }
         SizePicker(selection: self.$model.size)
-        Picker("Color", selection: self.$model.color) {
-          Text("Default").tag(Palette.Base.divider)
-          Text("Primary").tag(UniversalColor.primary)
-          Text("Secondary").tag(UniversalColor.secondary)
-          Text("Accent").tag(UniversalColor.accent)
-          Text("Success").tag(UniversalColor.success)
-          Text("Warning").tag(UniversalColor.warning)
-          Text("Danger").tag(UniversalColor.danger)
-          Text("Custom").tag(UniversalColor.universal(.uiColor(.systemPurple)))
-        }
       }
     }
   }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/InputFieldPreview.swift

@@ -17,6 +17,7 @@ struct InputFieldPreview: View {
         self.inputField
           .preview
           .onAppear {
+            self.inputField.text = ""
             self.inputField.model = Self.initialModel
           }
           .onChange(of: self.model) { newValue in
@@ -38,7 +39,7 @@ struct InputFieldPreview: View {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         KeyboardTypePicker(selection: self.$model.keyboardType)
         Toggle("Placeholder", isOn: .init(
           get: {

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/RadioGroupPreview.swift

@@ -33,7 +33,7 @@ struct RadioGroupPreview: View {
         AnimationScalePicker(selection: self.$model.animationScale)
         UniversalColorPicker(title: "Color", selection: self.$model.color)
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         SizePicker(selection: self.$model.size)
         Picker("Spacing", selection: self.$model.spacing) {
           Text("8px").tag(CGFloat(8))

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/SegmentedControlPreview.swift

@@ -46,7 +46,7 @@ struct SegmentedControlPreview: View {
           Text("Custom: 4px").tag(ComponentRadius.custom(4))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         Toggle("Full Width", isOn: self.$model.isFullWidth)
         SizePicker(selection: self.$model.size)
       }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/TextInputPreview.swift

@@ -17,6 +17,7 @@ struct TextInputPreviewPreview: View {
         self.textInput
           .preview
           .onAppear {
+            self.textInput.text = ""
             self.textInput.model = Self.initialModel
           }
           .onChange(of: self.model) { newValue in
@@ -38,7 +39,7 @@ struct TextInputPreviewPreview: View {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         KeyboardTypePicker(selection: self.$model.keyboardType)
         Picker("Max Rows", selection: self.$model.maxRows) {
           Text("2 Rows").tag(2)

Examples/DemosApp/DemosApp/Demos/Login/SwiftUILogin.swift

@@ -38,7 +38,7 @@ struct SwiftUILogin: View {
 
   var body: some View {
     ZStack {
-      Palette.Base.background.color(for: self.colorScheme)
+      UniversalColor.background.color(for: self.colorScheme)
 
       ScrollView {
         VStack(spacing: 20) {
@@ -62,7 +62,7 @@ struct SwiftUILogin: View {
             ? "Welcome back"
             : "Create an account"
           )
-          .font(.system(size: 30, weight: .bold))
+          .font(UniversalFont.lgHeadline.font)
           .padding(.vertical, 30)
 
           if self.selectedPage == .signUp {
@@ -129,6 +129,7 @@ struct SwiftUILogin: View {
                 model: .init {
                   $0.title = "Continue"
                   $0.isFullWidth = true
+                  $0.color = .primary
                   $0.isEnabled = self.isButtonEnabled
                 },
                 action: {

Examples/DemosApp/DemosApp/Demos/Login/UIKitLogin.swift

@@ -36,7 +36,7 @@ final class UIKitLogin: UIViewController {
   )
   private let titleLabel: UILabel = {
     let label = UILabel()
-    label.font = .systemFont(ofSize: 30, weight: .bold)
+    label.font = UniversalFont.lgHeadline.uiFont
     return label
   }()
   private let nameInput = UKInputField(
@@ -74,6 +74,7 @@ final class UIKitLogin: UIViewController {
     model: .init {
       $0.title = "Continue"
       $0.isFullWidth = true
+      $0.color = .primary
     }
   )
   private let loader = UKLoading()
@@ -157,7 +158,7 @@ final class UIKitLogin: UIViewController {
   }
 
   private func style() {
-    self.scrollView.backgroundColor = Palette.Base.background.uiColor
+    self.scrollView.backgroundColor = UniversalColor.background.uiColor
 
     self.stackView.setCustomSpacing(50, after: self.pageControl)
     self.stackView.setCustomSpacing(50, after: self.titleLabel)