@momo-kits/native-kits 0.162.2-sp.7-debug → 0.162.2-sp.8-debug

package/ios/Popup/PopupDisplay.swift

@@ -54,6 +54,8 @@ extension View {
 // MARK: - PopupDisplay
 
 public struct PopupDisplay: View {
+    @EnvironmentObject private var localize: Localize
+
     // MARK: Lifecycle
 
     public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "", isShowCloseIcon: Bool = true) {
@@ -91,9 +93,6 @@ public struct PopupDisplay: View {
     @State private var isScrollable = false
     
     public var body: some View {
-        let language = UserDefaults.standard.string(forKey: "language")?.replacingOccurrences(of: "\"", with: "") ?? "vi"
-        let errorCodeLabels: [String: String] = ["vi": "Mã lỗi: ", "en": "Error code: "]
-        
         var shouldUseColumn: Bool {
             buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.count > 12 || actionButtonTitle.count > 12))
         }
@@ -170,7 +169,7 @@ public struct PopupDisplay: View {
                         .padding(.bottom, 8)
                         
                         if(!errorCode.isEmpty) {
-                            MomoText((errorCodeLabels[language] ?? "Mã lỗi: ") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
+                            MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
                                 .lineLimit(1)
                                 .padding(.bottom, 8)
                         }

package/ios/Popup/PopupNotify.swift

@@ -38,15 +38,14 @@ public struct PopupNotifyProps {
 }
 
 public struct PopupNotify: View {
+    @EnvironmentObject private var localize: Localize
+
     public let props: PopupNotifyProps
 
     @State private var descriptionHeight: CGFloat = 0
 
     private var errorCodePrefix: String {
-        let language = UserDefaults.standard
-            .string(forKey: "language")?
-            .replacingOccurrences(of: "\"", with: "") ?? "vi"
-        return language == "en" ? "Error code: " : "Mã lỗi: "
+        localize.translate("errorCode")
     }
 
     private var maxDescriptionHeight: CGFloat {

package/ios/Popup/PopupPromotion.swift

@@ -2,6 +2,8 @@ import SwiftUI
 import SDWebImageSwiftUI
 
 public struct PopupPromotion: View {
+    @Environment(\.appTheme) private var theme
+
     var imageUrl: String
     var onIconClose: (() -> Void)?
     var onAction: (() -> Void)?
@@ -18,21 +20,26 @@ public struct PopupPromotion: View {
     }
 
     public var body: some View {
+        // Mirrors Kotlin's `Modifier.fillMaxWidth().aspectRatio(0.72f)` box with
+        // `ContentScale.FillBounds` inside it: a fixed-ratio frame the image stretches
+        // to exactly fill (no `.aspectRatio` modifier on the image itself, unlike the
+        // previous `.fit`, which letterboxed instead of stretching).
+        let boxWidth = UIScreen.main.bounds.width - Spacing.XL * 2
+        let boxHeight = boxWidth / 0.72
+
         VStack(spacing: 8) {
             if(imageUrl.isEmpty) {
-                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
+                Icon(source: "media_fail", size: boxWidth)
             }
             else {
                 WebImage(url: URL(string: imageUrl)!)
                     .resizable()
                     .placeholder {
                         Color.gray
-                            .aspectRatio(0.72, contentMode: .fit)
-                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                            .frame(width: boxWidth, height: boxHeight)
                             .clipped()
                     }
-                    .aspectRatio(0.72, contentMode: .fit)
-                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                    .frame(width: boxWidth, height: boxHeight, alignment: .center)
                     .clipped()
                     .onTapGesture {
                         onAction?()
@@ -53,16 +60,17 @@ public struct PopupPromotion: View {
             }) {
                 ZStack {
                     Circle()
-                        .strokeBorder(Colors.black01, lineWidth: 2)
-                        .background(Circle().fill(Colors.black17))
+                        .strokeBorder(theme.colors.background.surface, lineWidth: 2)
+                        .background(Circle().fill(theme.colors.text.default))
                         .frame(width: 22, height: 22)
 
-                    Icon(source: "navigation_close", size: 16,  color: Colors.black01)
+                    Icon(source: "navigation_close", size: 16, color: theme.colors.background.surface)
                 }
                 .frame(width: 40, height: 40)
                 .padding(8)
                 .zIndex(1)
             }
+            .buttonStyle(.plain)
         }
     }
 

package/ios/ProgressInfo/ProgressInfo.swift

@@ -97,7 +97,7 @@ public struct ProgressInfo: View {
 // MARK: - Tokens
 
 private let progressInfoLineColor = Colors.pink08
-private let progressInfoAccentColor = Color(hex: "a50064") // pink_MoMo_Branding
+private let progressInfoAccentColor = Colors.pinkMoMoBranding
 
 // MARK: - Horizontal variant
 
@@ -196,6 +196,8 @@ private struct ProgressInfoHorizontal: View {
 // MARK: - Vertical variant
 
 private struct ProgressInfoVertical: View {
+    @Environment(\.appTheme) private var theme
+
     let steps: [ProgressInfoItem]
     let size: ProgressInfoSize
     let useNumber: Bool
@@ -218,7 +220,7 @@ private struct ProgressInfoVertical: View {
                         )
                         if !isLast {
                             Rectangle()
-                                .fill(Colors.primary.opacity(0.2))
+                                .fill(theme.colors.primary.opacity(0.2))
                                 .frame(width: 2)
                                 .frame(maxHeight: .infinity)
                         }

package/ios/Radio/Radio.swift

@@ -34,22 +34,21 @@ public struct Radio: View {
     }
 
     public var body: some View {
-        HStack(spacing: 0) {
-            RoundedRectangle(cornerRadius: Radius.M)
-                .stroke(borderColor, lineWidth: borderWidth)
-                .frame(width: 20, height: 20)
-                .padding(.trailing, label.isEmpty ? 0 : Spacing.XS)
+        SwiftUI.Button(action: onTap) {
+            HStack(spacing: 0) {
+                RoundedRectangle(cornerRadius: Radius.M)
+                    .stroke(borderColor, lineWidth: borderWidth)
+                    .frame(width: 20, height: 20)
+                    .padding(.trailing, label.isEmpty ? 0 : Spacing.XS)
 
-            if !label.isEmpty {
-                MomoText(label, typography: .descriptionDefaultRegular)
-            }
-        }
-        .contentShape(Rectangle())
-        .onTapGesture {
-            if !disabled {
-                onTap()
+                if !label.isEmpty {
+                    MomoText(label, typography: .descriptionDefaultRegular)
+                }
             }
+            .contentShape(Rectangle())
         }
+        .buttonStyle(ActiveOpacityButtonStyle())
+        .disabled(disabled)
     }
 
     private var borderWidth: CGFloat {

package/ios/Rating/Rating.swift

@@ -52,7 +52,7 @@ public struct Rating: View {
             SwiftUI.Button(action: { onRatingChange(index + 1) }) {
                 icon
             }
-            .buttonStyle(.plain)
+            .buttonStyle(ActiveOpacityButtonStyle())
         } else {
             icon
         }

package/ios/Stepper/Stepper.swift

@@ -70,14 +70,14 @@ private struct StepperButton: View {
         let iconColor: Color = disabled ? theme.colors.text.disable : theme.colors.primary
         let iconName = sign == "-" ? "24_navigation_minus_circle" : "24_navigation_plus_circle"
 
-        SwiftUI.Button(action: { if !disabled { onPress() } }) {
+        SwiftUI.Button(action: onPress) {
             ZStack {
                 Circle().fill(theme.colors.background.disable)
                 Icon(source: iconName, size: specs.iconSize, color: iconColor)
             }
             .frame(width: specs.buttonSize, height: specs.buttonSize)
         }
-        .buttonStyle(.plain)
+        .buttonStyle(ActiveOpacityButtonStyle())
         .disabled(disabled)
     }
 }

package/ios/Steps/Steps.swift

@@ -201,7 +201,7 @@ private struct StepsHorizontal: View {
 
         let clickable = status == .completed && onPress != nil && !disabled
 
-        VStack(alignment: colAlignment, spacing: 0) {
+        let columnBody = VStack(alignment: colAlignment, spacing: 0) {
             if let time = item.time, !time.isEmpty {
                 MomoText(time, typography: .descriptionXsRegular, color: subColor)
                     .multilineTextAlignment(textAlignment)
@@ -250,8 +250,16 @@ private struct StepsHorizontal: View {
             }
         }
         .contentShape(Rectangle())
-        .onTapGesture {
-            if clickable { onPress?(item, index) }
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                columnBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            columnBody
         }
     }
 
@@ -338,7 +346,7 @@ private struct StepsVertical: View {
 
         let clickable = status == .completed && onPress != nil && !disabled
 
-        HStack(alignment: .top, spacing: 0) {
+        let rowBody = HStack(alignment: .top, spacing: 0) {
             VStack(spacing: 0) {
                 StepBubble(
                     index: index,
@@ -380,8 +388,16 @@ private struct StepsVertical: View {
         }
         .frame(maxWidth: .infinity)
         .contentShape(Rectangle())
-        .onTapGesture {
-            if clickable { onPress?(item, index) }
+
+        if clickable {
+            // Mirrors Compose's `activeOpacityClickable` press feedback; non-clickable
+            // steps render with no press interaction at all.
+            SwiftUI.Button(action: { onPress?(item, index) }) {
+                rowBody
+            }
+            .buttonStyle(ActiveOpacityButtonStyle())
+        } else {
+            rowBody
         }
     }
 }

package/ios/SuggestAction/SuggestAction.swift

@@ -77,9 +77,11 @@ public struct SuggestAction: View {
 
                     Spacer().frame(width: Spacing.S)
 
-                    Icon(source: "navigation_close", size: 24, color: theme.colors.text.default)
-                        .contentShape(Rectangle())
-                        .onTapGesture { onClose() }
+                    SwiftUI.Button(action: onClose) {
+                        Icon(source: "navigation_close", size: 24, color: theme.colors.text.default)
+                            .contentShape(Rectangle())
+                    }
+                    .buttonStyle(ActiveOpacityButtonStyle())
                 }
                 .padding(Spacing.M)
                 .frame(maxWidth: .infinity)

package/ios/Swipeable/SwipeCell.swift

@@ -6,6 +6,8 @@ private let swipeActionWidth: CGFloat = 56
 // MARK: - Swipe
 
 public struct Swipe<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
     private let leftActions: [SwipeAction]
     private let rightActions: [SwipeAction]
     private let height: CGFloat
@@ -54,7 +56,7 @@ public struct Swipe<Content: View>: View {
                             action: action,
                             height: height,
                             itemRadius: itemRadius,
-                            defaultBackgroundColor: Colors.primary
+                            defaultBackgroundColor: theme.colors.primary
                         )
                     }
                     Spacer(minLength: 0)
@@ -69,14 +71,14 @@ public struct Swipe<Content: View>: View {
                             action: action,
                             height: height,
                             itemRadius: itemRadius,
-                            defaultBackgroundColor: Colors.error
+                            defaultBackgroundColor: theme.colors.error.primary
                         )
                     }
                 }
             }
 
             ZStack {
-                Colors.card
+                theme.colors.background.surface
                 content()
             }
             .frame(maxWidth: .infinity)

package/ios/Switch/Switch.swift

@@ -1,44 +1,69 @@
 import Foundation
 import SwiftUI
 
-public struct Switch: View{
+public struct Switch: View {
     @Binding var value: Bool
     var disabled: Bool
-    var onChange: ((Bool)->Void)?
-    
-    public init(_ value: Binding<Bool>,disabled: Bool = false, onChange: ((Bool)->Void)? = nil){
+    var onChange: ((Bool) -> Void)?
+    var title: String?
+    var accessibilityId: String?
+
+    public init(
+        _ value: Binding<Bool>,
+        disabled: Bool = false,
+        onChange: ((Bool) -> Void)? = nil,
+        title: String? = "",
+        accessibilityId: String? = ""
+    ) {
         self._value = value
         self.disabled = disabled
         self.onChange = onChange
+        self.title = title
+        self.accessibilityId = accessibilityId
+    }
+
+    // Mirrors Kotlin's `backgroundColor`: shared by the track AND the inner dot.
+    private var backgroundColor: Color {
+        switch (disabled, value) {
+        case (true, true): return Colors.green09
+        case (true, false): return Colors.black05
+        case (false, true): return Colors.green03
+        case (false, false): return Colors.black07
+        }
+    }
+
+    // Mirrors Kotlin's `circleBackgroundColor` (the outer 14pt thumb circle).
+    private var circleColor: Color {
+        value ? Colors.black01 : Colors.black03
     }
-    
-    
+
+    private var automationId: String {
+        accessibilityId?.isEmpty == false ? accessibilityId! : "toggle_\(title?.isEmpty == false ? title! : "unknown")_\(value)"
+    }
+
     public var body: some View {
         SwiftUI.Button(action: {
-            withAnimation{
+            withAnimation {
                 value.toggle()
                 onChange?(value)
             }
-        }){
-              HStack{
-                  HStack {
-                  }
-                  .frame(width: 6, height: 6)
-                  .background(value ? Colors.pink03 : Colors.black07)
-                  .clipShape(Circle())
-                  .opacity(disabled ? 0.4 : 1)
-              }
-              .frame(width: 14, height: 14)
-              .background(Colors.black01)
-              .clipShape(Circle())
-              .padding(.leading,5)
-              .padding(.trailing,5)
-              
-          }
-          .disabled(disabled)
-          .frame(width: 40, height: 24, alignment: value == true ? .trailing : .leading)
-          .background(value ? Colors.pink03 : Colors.black07)
-          .clipShape(Capsule())
-          .opacity(disabled ? 0.4 : 1)
+        }) {
+            HStack {
+                HStack {}
+                    .frame(width: 6, height: 6)
+                    .background(backgroundColor)
+                    .clipShape(Circle())
+            }
+            .frame(width: 14, height: 14)
+            .background(circleColor)
+            .clipShape(Circle())
+            .padding(.leading, Spacing.XS)
+            .padding(.trailing, Spacing.XS)
+        }
+        .disabled(disabled)
+        .frame(width: 38, height: 20, alignment: value ? .trailing : .leading)
+        .background(backgroundColor)
+        .clipShape(Capsule())
+        .accessibilityIdentifier(automationId)
     }
 }

package/ios/TabView/TabView.swift

@@ -363,13 +363,15 @@ private struct CardTabBar: View {
                 let isActive = selectedIndex == index
                 let iconColor = isActive ? selectedColor : unselectedColor
 
-                cardItem(tab: tab, isActive: isActive, iconColor: iconColor)
-                    .frame(maxWidth: .infinity)
-                    .frame(height: isActive ? 44 : 40)
-                    .background(isActive ? theme.colors.background.surface : theme.colors.background.tonal)
-                    .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
-                    .contentShape(Rectangle())
-                    .onTapGesture { onPress(index) }
+                SwiftUI.Button(action: { onPress(index) }) {
+                    cardItem(tab: tab, isActive: isActive, iconColor: iconColor)
+                        .frame(maxWidth: .infinity)
+                        .frame(height: isActive ? 44 : 40)
+                        .background(isActive ? theme.colors.background.surface : theme.colors.background.tonal)
+                        .clipShape(UnstyledRoundedRectangle(topLeft: Radius.M, topRight: Radius.M))
+                        .contentShape(Rectangle())
+                }
+                .buttonStyle(ActiveOpacityButtonStyle())
             }
         }
         .frame(maxWidth: .infinity)
@@ -416,15 +418,17 @@ private struct TabItemView: View {
     private var textStyle: TypographyStyle { active ? .headerSSemibold : .bodyDefaultRegular }
 
     var body: some View {
-        Group {
-            if direction == .column {
-                columnBody
-            } else {
-                rowBody
+        SwiftUI.Button(action: onPress) {
+            Group {
+                if direction == .column {
+                    columnBody
+                } else {
+                    rowBody
+                }
             }
+            .contentShape(Rectangle())
         }
-        .contentShape(Rectangle())
-        .onTapGesture { onPress() }
+        .buttonStyle(ActiveOpacityButtonStyle())
     }
 
     @ViewBuilder

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -52,15 +52,14 @@ let defaultBanner = TrustBannerData(
 
 public struct TrustBanner: View {
     @EnvironmentObject var applicationEnvironment: ApplicationEnvironment
-    
+    @EnvironmentObject private var localize: Localize
+
     var onPress: ((String)->Void)?
-     
+
     public init(onPress: ((String)->Void)?) {
         self.onPress = onPress
     }
-    
-    var language: String? = "vi"
-    
+
     func onPressSecurity() {
         if (onPress != nil) {
             onPress!(applicationEnvironment.config?.trustBanner?.urlConfig ?? defaultBanner.urlConfig)
@@ -75,7 +74,7 @@ public struct TrustBanner: View {
                 .scaledToFit()
                 .frame(width: 64, height: 64)
             VStack(alignment: .leading){
-                Text(applicationEnvironment.config?.trustBanner?.content[language ?? "vi"] as? String ?? defaultBanner.content[language ?? "vi"])
+                Text(applicationEnvironment.config?.trustBanner?.content[localize.currentLanguage] ?? defaultBanner.content[localize.currentLanguage])
                     .foregroundColor(Color(hex: "484848"))
                     .lineLimit(2)
                     .font(.system(size: 13, weight: Font.Weight.regular))
@@ -84,7 +83,7 @@ public struct TrustBanner: View {
                     .padding(.bottom, 8)
                 HStack {
                     HStack(spacing: 0) {
-                        Text(applicationEnvironment.config?.trustBanner?.subContent[language ?? "vi"] as? String ?? defaultBanner.subContent[language ?? "vi"])
+                        Text(applicationEnvironment.config?.trustBanner?.subContent[localize.currentLanguage] ?? defaultBanner.subContent[localize.currentLanguage])
                             .foregroundColor(Colors.pink03)
                             .font(.system(size: 13, weight: .bold))
                             .ignoreBoldTextSetting()

package/ios/Tooltip/Tooltip.swift

@@ -462,6 +462,9 @@ private struct TooltipSecondaryButton: View {
                 .padding(.vertical, Spacing.S)
         }
         .buttonStyle(.plain)
+        // Mirrors Compose's `Modifier.weight(1f, fill = false)` on the secondary button:
+        // it yields space to the primary button first under width pressure.
+        .layoutPriority(-1)
     }
 }
 

package/ios/Typography/FontScaleStore.swift

@@ -0,0 +1,19 @@
+import CoreGraphics
+
+/// App-wide font-scale preference for the SwiftUI kit. An exported holder the host writes once at
+/// app startup (from the cache-backed `FontScaleProvider`); `scaleSize`/`appFont` read the snapshot.
+/// No realtime: the SwiftUI kit has no navigation container to scope reactive updates, so a startup
+/// snapshot is enough. When `useOSScaleRate` is false the kit applies `userScaleRate` instead of the
+/// OS Dynamic Type factor.
+public final class FontScaleStore {
+    public static let shared = FontScaleStore()
+    private init() {}
+
+    public private(set) var userScaleRate: CGFloat = 1
+    public private(set) var useOSScaleRate: Bool = true
+
+    public func update(userScaleRate: CGFloat, useOSScaleRate: Bool) {
+        self.userScaleRate = userScaleRate
+        self.useOSScaleRate = useOSScaleRate
+    }
+}

package/ios/Typography/Text.swift

@@ -1,6 +1,9 @@
 import SwiftUI
 
 public func scaleSize(_ size: CGFloat, _ scaleRate: CGFloat? = nil) -> CGFloat {
+    if !FontScaleStore.shared.useOSScaleRate {
+        return size * FontScaleStore.shared.userScaleRate
+    }
     let defaultScreenSize: CGFloat = 375
     let maxFontScale: CGFloat = scaleRate ?? 1.5
     let maxDeviceScale: CGFloat = 5

package/ios/Typography/Typography.swift

@@ -11,13 +11,16 @@ public extension View {
 
 public extension Font {
     static func appFont(size: CGFloat) -> Font {
+        if !FontScaleStore.shared.useOSScaleRate {
+            return Font.system(size: size * FontScaleStore.shared.userScaleRate)
+        }
         let defaultScreenSize: CGFloat = 375
         let maxFontScale: CGFloat = 1.5
         let maxDeviceScale: CGFloat = 5
-        
+
         let deviceWidth = UIScreen.main.bounds.width
         let deviceScale = deviceWidth / defaultScreenSize
-        
+
         let defaultFont = UIFont.systemFont(ofSize: UIFont.labelFontSize)
         let scaledFont = UIFontMetrics.default.scaledFont(for: defaultFont)
         let fontScale = scaledFont.pointSize / defaultFont.pointSize
@@ -34,7 +37,7 @@ public extension Font {
 
         return Font.system(size: fontSize)
     }
-    
+
     // New supported typography styles
     static let headline_default_bold = appFont(size: 24).weight(.bold)
     static let header_m_bold = appFont(size: 18).weight(.bold)
@@ -52,7 +55,7 @@ public extension Font {
     static let action_s_bold = appFont(size: 14).weight(.bold)
     static let action_xs_bold = appFont(size: 12).weight(.bold)
     static let action_xxs_bold = appFont(size: 10).weight(.bold)
-    
+
     // Legacy styles
     static let headline_default = appFont(size: 28).weight(.semibold)
     static let headline_s = appFont(size: 24).weight(.semibold)
@@ -77,7 +80,7 @@ public extension Font {
     static let action_xxs = appFont(size: 10).weight(.bold)
     static let action_xs = appFont(size: 12).weight(.bold)
     static let action_s = appFont(size: 15).weight(.bold)
-    
+
     // deprecated
     static let h1 = appFont(size: 36).weight(.semibold) //headline_xl
     static let h2 = appFont(size: 32).weight(.semibold)

package/ios/Uploader/Uploader.swift

@@ -172,12 +172,3 @@ private struct UploaderImageItem: View {
         .buttonStyle(ActiveOpacityButtonStyle())
     }
 }
-
-// MARK: - Active opacity button style
-
-private struct ActiveOpacityButtonStyle: ButtonStyle {
-    func makeBody(configuration: Configuration) -> some View {
-        configuration.label
-            .opacity(configuration.isPressed ? 0.5 : 1)
-    }
-}

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.162.2-sp.7'
+  s.version          = '0.162.2-sp.8'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.162.2-sp.7'
+  s.version          = '0.162.2-sp.8'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.162.2-sp.7-debug",
+  "version": "0.162.2-sp.8-debug",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

package/ios/Colors+Radius+Spacing/MoMoUIKitsResources.swift

@@ -1,2 +0,0 @@
-// Resource bundle lookup lives in Extensions/Color++.swift so existing Pods
-// projects that already include the color extension can resolve Color.momoAsset.