ALFMOB-274: Integrate color tokens from design token JSON

Alfie/AlfieKit/Package.swift

@@ -289,7 +289,6 @@ let package = Package(
             resources: [
                 .copy("Theme/Typography/Resources/SF-Pro-Display-Medium.otf"),
                 .copy("Theme/Components/Loader/spin.gif"),
-                .process("Theme/Color/Colors.xcassets"),
                 .process("Theme/Images/ThemedImages.xcassets"),
                 .process("Theme/Toggle/ToggleColor.xcassets"),
                 .process("Theme/Typography/Resources/Fonts.xcassets"),

Alfie/AlfieKit/Sources/AppFeature/Navigation/RootTabView.swift

@@ -41,7 +41,7 @@ public struct RootTabView<ViewModel: RootTabViewModelProtocol>: View {
                 }
                 .toolbar(.hidden, for: .tabBar)
             }
-            .accentColor(Colors.primary.black)
+            .accentColor(Primitives.Colours.neutrals900)
             .padding(.bottom, Spacing.space150)
 
             if !viewModel.isOverlayVisible {

Alfie/AlfieKit/Sources/AppFeature/UI/CustomTabBarView.swift

@@ -35,7 +35,7 @@ struct CustomTabBarView: View {
                 }
             }
         }
-        .background(Colors.primary.white)
+        .background(Primitives.Colours.neutrals0)
         .frame(width: UIScreen.main.bounds.width)
     }
 

Alfie/AlfieKit/Sources/AppFeature/UI/TabBarItemView.swift

@@ -26,7 +26,7 @@ struct TabBarItemView: View {
     var body: some View {
         VStack(spacing: Spacing.space100) {
             if tab == currentTab {
-                Colors.primary.mono900
+                Primitives.Colours.neutrals800
                     .frame(height: Constants.lineHeight)
                     .offset(y: Constants.offsetLineSelected)
                     .matchedGeometryEffect(id: Constants.effectID, in: namespace)
@@ -38,14 +38,14 @@ struct TabBarItemView: View {
                 .resizable()
                 .scaledToFit()
                 .frame(size: Constants.iconSize)
-                .foregroundStyle(tab == currentTab ? Colors.primary.black : Colors.primary.mono300)
+                .foregroundStyle(tab == currentTab ? Primitives.Colours.neutrals900 : Primitives.Colours.neutrals400)
                 .badgeView(badgeValue: $badgeValue)
             if tab == currentTab {
                 Text.build(theme.font.small.bold(tab.title))
-                    .foregroundStyle(Colors.primary.mono900)
+                    .foregroundStyle(Primitives.Colours.neutrals800)
             } else {
                 Text.build(theme.font.small.normal(tab.title))
-                    .foregroundStyle(Colors.primary.mono500)
+                    .foregroundStyle(Primitives.Colours.neutrals500)
             }
         }
         .accessibilityElement()

Alfie/AlfieKit/Sources/CategorySelector/UI/BrandsView.swift

@@ -126,7 +126,7 @@ struct BrandsView<ViewModel: BrandsViewModelProtocol>: View {
     private func brandItemView(_ brand: Brand) -> some View {
         BrandItemView(
             brand: brand,
-            foregroundColor: { Colors.primary.mono800 },
+            foregroundColor: { Primitives.Colours.neutrals700 },
             isLoading: .constant(false)
         )
         .modifier(
@@ -138,7 +138,7 @@ struct BrandsView<ViewModel: BrandsViewModelProtocol>: View {
     }
 
     private func placeholderItemView(_ placeholder: Brand) -> some View {
-        BrandItemView(brand: placeholder, foregroundColor: { Colors.primary.mono300 }, isLoading: .constant(true))
+        BrandItemView(brand: placeholder, foregroundColor: { Primitives.Colours.neutrals400 }, isLoading: .constant(true))
     }
 
     private func sectionIndexTitles(proxy: ScrollViewProxy) -> some View {
@@ -192,12 +192,12 @@ extension BrandsView {
             HStack(alignment: .center, spacing: Spacing.space0) {
                 Text(title)
                     .font(Font(theme.font.paragraph.bold))
-                    .foregroundStyle(Colors.primary.mono900)
+                    .foregroundStyle(Primitives.Colours.neutrals800)
                     .frame(maxWidth: .infinity, alignment: .leading)
             }
             .padding(.horizontal, Spacing.space200)
             .frame(height: Constants.headerViewHeight)
-            .background(Colors.primary.white)
+            .background(Primitives.Colours.neutrals0)
         }
     }
 
@@ -298,11 +298,11 @@ extension BrandsView {
         var body: some View {
             Text(text)
                 .font(Font(theme.font.tiny.normal))
-                .foregroundStyle(isSelected ? Colors.primary.white : Colors.primary.mono500)
+                .foregroundStyle(isSelected ? Primitives.Colours.neutrals0 : Primitives.Colours.neutrals500)
                 .frame(minWidth: Constants.sectionIndexSize, minHeight: Constants.sectionIndexSize)
                 .background {
                     RoundedRectangle(cornerRadius: CornerRadius.xxs)
-                        .foregroundStyle(isSelected ? Colors.primary.mono900 : Color.clear)
+                        .foregroundStyle(isSelected ? Primitives.Colours.neutrals800 : Color.clear)
                 }
         }
     }

Alfie/AlfieKit/Sources/CategorySelector/UI/CategoriesView.swift

@@ -48,7 +48,7 @@ struct CategoriesView<ViewModel: CategoriesViewModelProtocol>: View {
     // MARK: - Subviews
 
     private func categoryView(_ category: NavigationItem) -> some View {
-        categoriesListItem(for: category.title, isShimmering: false, foregroundColor: Colors.primary.mono800)
+        categoriesListItem(for: category.title, isShimmering: false, foregroundColor: Primitives.Colours.neutrals700)
             .modifier(
                 TapHighlightableModifier {
                     withAnimation(.standard) {
@@ -59,7 +59,7 @@ struct CategoriesView<ViewModel: CategoriesViewModelProtocol>: View {
     }
 
     private func placeholderView(_ category: NavigationItem) -> some View {
-        categoriesListItem(for: category.title, isShimmering: true, foregroundColor: Colors.primary.mono300)
+        categoriesListItem(for: category.title, isShimmering: true, foregroundColor: Primitives.Colours.neutrals400)
     }
 
     private var errorView: some View {

Alfie/AlfieKit/Sources/DebugMenu/UI/Configuration/AppUpdateDemoView.swift

@@ -83,7 +83,7 @@ struct AppUpdateDemoView: View {
         VStack(alignment: .leading) {
             if isActive {
                 Text.build(theme.font.small.bold("Prompt enabled"))
-                    .foregroundStyle(Colors.secondary.red800)
+                    .foregroundStyle(Primitives.Colours.semanticError700)
                     .padding(.bottom, Spacing.space100)
             }
 
@@ -106,13 +106,13 @@ struct AppUpdateDemoView: View {
     private func row(label: String, value: String?) -> some View {
         VStack(alignment: .leading) {
             Text.build(theme.font.paragraph.normal(label))
-                .foregroundStyle(Colors.primary.mono500)
+                .foregroundStyle(Primitives.Colours.neutrals500)
             if let value {
                 Text.build(theme.font.paragraph.bold(value))
-                    .foregroundStyle(Colors.primary.mono900)
+                    .foregroundStyle(Primitives.Colours.neutrals800)
             } else {
                 Text.build(theme.font.paragraph.normal("Undefinied"))
-                    .foregroundStyle(Colors.primary.mono300)
+                    .foregroundStyle(Primitives.Colours.neutrals400)
             }
         }
         .padding(.bottom, Spacing.space025)

Alfie/AlfieKit/Sources/DebugMenu/UI/DeepLinking/DeepLinkDemoView.swift

@@ -227,9 +227,9 @@ struct DeepLinkDemoView: View {
 
                 HStack(spacing: Spacing.space050) {
                     Text.build(theme.font.small.normal("URL:"))
-                        .foregroundStyle(Colors.primary.mono400)
+                        .foregroundStyle(Primitives.Colours.neutrals500)
                     Text.build(theme.font.small.normal(webViewUrl.absoluteString))
-                        .foregroundStyle(Colors.primary.mono900)
+                        .foregroundStyle(Primitives.Colours.neutrals800)
                 }
             }
 

Alfie/AlfieKit/Sources/DebugMenu/UI/Demo/Buttons/ButtonDemoView.swift

@@ -74,7 +74,7 @@ struct ButtonDemoView: View {
                     }
                 } label: {
                     Text.build(theme.font.small.normal(style.rawValue))
-                        .tint(Colors.secondary.blue500)
+                        .tint(Primitives.Colours.neutrals400)
                 }
             }
 
@@ -95,7 +95,7 @@ struct ButtonDemoView: View {
                     }
                 } label: {
                     Text.build(theme.font.small.normal(iconLeft.rawValue))
-                        .tint(Colors.secondary.blue500)
+                        .tint(Primitives.Colours.neutrals400)
                 }
             }
             .disabled(!showIconLeft)
@@ -117,7 +117,7 @@ struct ButtonDemoView: View {
                     }
                 } label: {
                     Text.build(theme.font.small.normal(iconRight.rawValue))
-                        .tint(Colors.secondary.blue500)
+                        .tint(Primitives.Colours.neutrals400)
                 }
             }
             .disabled(!showIconRight)

Alfie/AlfieKit/Sources/DebugMenu/UI/Demo/ColorBanner/ColorBannerDemoView.swift

@@ -6,7 +6,7 @@ struct ColorBannerDemoView: View {
     private static let selectedTitle: String = "Color:"
     private static let selectedImageTitle: String = "Pattern:"
     private static let items: [ColorSwatch] = [
-        .init(id: "1", name: "Black", type: .color(Colors.primary.black)),
+        .init(id: "1", name: "Black", type: .color(.black)),
         .init(id: "2", name: "Gray", type: .color(.gray)),
         .init(id: "3", name: "Red", type: .color(.red), isDisabled: true),
         .init(id: "4", name: "Green", type: .color(.green)),
@@ -18,7 +18,7 @@ struct ColorBannerDemoView: View {
     ]
 
     private static let itemsSmall: [ColorSwatch] = [
-        .init(id: "1", name: "Black", type: .color(Colors.primary.black)),
+        .init(id: "1", name: "Black", type: .color(.black)),
         .init(id: "2", name: "Gray", type: .color(.gray)),
         .init(id: "3", name: "Red", type: .color(.red), isDisabled: true),
         .init(id: "4", name: "Green", type: .color(.green)),

Alfie/AlfieKit/Sources/DebugMenu/UI/Demo/Colors/ColorsDemoView.swift

@@ -24,93 +24,56 @@ struct ColorsDemoView: View {
     var primaryColorView: some View {
         VStack {
             paletteView(with: "B&W", colors: [
-                Colors.primary.black,
-                Colors.primary.white,
+                Primitives.Colours.neutrals900,
+                Primitives.Colours.neutrals0,
             ])
 
             paletteView(with: "Mono", colors: [
-                Colors.primary.mono900,
-                Colors.primary.mono800,
-                Colors.primary.mono700,
-                Colors.primary.mono600,
-                Colors.primary.mono500,
-                Colors.primary.mono400,
-                Colors.primary.mono300,
-                Colors.primary.mono200,
-                Colors.primary.mono100,
-                Colors.primary.mono050,
+                Primitives.Colours.neutrals800,
+                Primitives.Colours.neutrals700,
+                Primitives.Colours.neutrals600,
+                Primitives.Colours.neutrals500,
+                Primitives.Colours.neutrals400,
+                Primitives.Colours.neutrals300,
+                Primitives.Colours.neutrals200,
+                Primitives.Colours.neutrals100,
             ])
         }
     }
 
     var secondaryColorView: some View {
         VStack {
             paletteView(with: "Green", colors: [
-                Colors.secondary.green900,
-                Colors.secondary.green800,
-                Colors.secondary.green700,
-                Colors.secondary.green600,
-                Colors.secondary.green500,
-                Colors.secondary.green400,
-                Colors.secondary.green300,
-                Colors.secondary.green200,
-                Colors.secondary.green100,
-                Colors.secondary.green050,
+                Primitives.Colours.semanticSuccess800,
+                Primitives.Colours.semanticSuccess700,
+                Primitives.Colours.semanticSuccess600,
+                Primitives.Colours.semanticSuccess500,
+                Primitives.Colours.semanticSuccess400,
+                Primitives.Colours.semanticSuccess300,
+                Primitives.Colours.semanticSuccess200,
+                Primitives.Colours.semanticSuccess100,
             ])
 
             paletteView(with: "Red", colors: [
-                Colors.secondary.red900,
-                Colors.secondary.red800,
-                Colors.secondary.red700,
-                Colors.secondary.red600,
-                Colors.secondary.red500,
-                Colors.secondary.red400,
-                Colors.secondary.red300,
-                Colors.secondary.red200,
-                Colors.secondary.red100,
-                Colors.secondary.red050,
-            ])
-
-            paletteView(with: "Yellow", colors: [
-                Colors.secondary.yellow500,
-                Colors.secondary.yellow400,
-                Colors.secondary.yellow300,
-                Colors.secondary.yellow200,
-                Colors.secondary.yellow100,
-                Colors.secondary.yellow050,
-            ])
-
-            paletteView(with: "Blue", colors: [
-                Colors.secondary.blue900,
-                Colors.secondary.blue800,
-                Colors.secondary.blue700,
-                Colors.secondary.blue600,
-                Colors.secondary.blue500,
-                Colors.secondary.blue400,
-                Colors.secondary.blue300,
-                Colors.secondary.blue200,
-                Colors.secondary.blue100,
-                Colors.secondary.blue050,
-            ])
-
-            paletteView(with: "Orange", colors: [
-                Colors.secondary.orange500,
-                Colors.secondary.orange400,
-                Colors.secondary.orange300,
-                Colors.secondary.orange200,
-                Colors.secondary.orange100,
-                Colors.secondary.orange050,
+                Primitives.Colours.semanticError800,
+                Primitives.Colours.semanticError700,
+                Primitives.Colours.semanticError600,
+                Primitives.Colours.semanticError500,
+                Primitives.Colours.semanticError400,
+                Primitives.Colours.semanticError300,
+                Primitives.Colours.semanticError200,
+                Primitives.Colours.semanticError100,
             ])
         }
     }
 
     func paletteView(with name: String, colors: [Color]) -> some View {
         VStack(alignment: .leading) {
             Text.build(theme.font.small.bold(name))
-                .foregroundStyle(colors.first ?? Colors.primary.black)
+                .foregroundStyle(colors.first ?? Primitives.Colours.neutrals900)
             ScrollView(.horizontal) {
                 HStack(spacing: Spacing.space0) {
-                    ForEach(colors, id: \.self) { color in
+                    ForEach(Array(colors.enumerated()), id: \.offset) { _, color in
                         colorView(with: color)
                     }
                 }
@@ -125,7 +88,7 @@ struct ColorsDemoView: View {
                 .fill(color)
                 .frame(width: 64, height: 64)
             Text.build(theme.font.tiny.normal(color.name ?? "-"))
-                .foregroundStyle(Colors.primary.mono400)
+                .foregroundStyle(Primitives.Colours.neutrals500)
         }
     }
 }

Alfie/AlfieKit/Sources/DebugMenu/UI/Demo/Components/DatePickerDemoView.swift

@@ -36,7 +36,7 @@ struct DatePickerDemoView: View {
                     DatePicker("", selection: $dateSelection, displayedComponents: .date)
                         .labelsHidden()
                         .modifier(DatePickerModifier(type: datePickerType))
-                        .tint(Colors.primary.black)
+                        .tint(Primitives.Colours.neutrals900)
 
                     if datePickerType == .wheel {
                         VStack(alignment: .leading) {
@@ -47,7 +47,7 @@ struct DatePickerDemoView: View {
                     DatePicker("", selection: $dateSelection, displayedComponents: .hourAndMinute)
                         .labelsHidden()
                         .modifier(DatePickerModifier(type: datePickerType))
-                        .tint(Colors.primary.black)
+                        .tint(Primitives.Colours.neutrals900)
                 }
 
                 if datePickerType == .wheel {
@@ -59,7 +59,7 @@ struct DatePickerDemoView: View {
                 DatePicker("", selection: $dateAndHourSelection, displayedComponents: [.date, .hourAndMinute])
                     .labelsHidden()
                     .modifier(DatePickerModifier(type: datePickerType))
-                    .tint(Colors.primary.black)
+                    .tint(Primitives.Colours.neutrals900)
                     .padding(.horizontal, Spacing.space200)
             }
             .padding(.horizontal, Spacing.space200)

Alfie/AlfieKit/Sources/DebugMenu/UI/Demo/Components/ProgressBarDemoView.swift

@@ -15,7 +15,7 @@ struct ProgressBarDemoView: View {
                 HStack {
                     ForEach(0..<40) { _ in
                         Rectangle()
-                            .foregroundStyle(Colors.primary.mono300)
+                            .foregroundStyle(Primitives.Colours.neutrals400)
                             .cornerRadius(CornerRadius.m)
                             .frame(width: 120, height: 120)
                     }