@onekeyfe/react-native-image-crop-picker 3.0.147 → 3.0.149

package/android/src/main/java/com/margelo/nitro/reactnativeimagecroppicker/ImageCropperTheme.kt

@@ -0,0 +1,188 @@
+package com.margelo.nitro.reactnativeimagecroppicker
+
+import android.content.Intent
+import android.graphics.Color
+
+// Resolved colors, fonts and scale of the cropper screen. The layout matches
+// the iOS ImageCropperViewController. Colors are ARGB ints.
+internal data class ImageCropperTheme(
+  val isDark: Boolean,
+  val backgroundColor: Int,
+  val titleColor: Int,
+  val iconColor: Int,
+  val cancelButtonColor: Int,
+  val cancelButtonPressedColor: Int,
+  val cancelButtonTextColor: Int,
+  val confirmButtonColor: Int,
+  val confirmButtonPressedColor: Int,
+  val confirmButtonTextColor: Int,
+  val titleFontFamily: String?,
+  val buttonFontFamily: String?,
+  val scale: Float,
+) {
+  fun writeTo(intent: Intent) {
+    intent.putExtra(EXTRA_IS_DARK, isDark)
+      .putExtra(EXTRA_BACKGROUND_COLOR, backgroundColor)
+      .putExtra(EXTRA_TITLE_COLOR, titleColor)
+      .putExtra(EXTRA_ICON_COLOR, iconColor)
+      .putExtra(EXTRA_CANCEL_BUTTON_COLOR, cancelButtonColor)
+      .putExtra(EXTRA_CANCEL_BUTTON_PRESSED_COLOR, cancelButtonPressedColor)
+      .putExtra(EXTRA_CANCEL_BUTTON_TEXT_COLOR, cancelButtonTextColor)
+      .putExtra(EXTRA_CONFIRM_BUTTON_COLOR, confirmButtonColor)
+      .putExtra(EXTRA_CONFIRM_BUTTON_PRESSED_COLOR, confirmButtonPressedColor)
+      .putExtra(EXTRA_CONFIRM_BUTTON_TEXT_COLOR, confirmButtonTextColor)
+      .putExtra(EXTRA_TITLE_FONT_FAMILY, titleFontFamily)
+      .putExtra(EXTRA_BUTTON_FONT_FAMILY, buttonFontFamily)
+      .putExtra(EXTRA_SCALE, scale)
+  }
+
+  // OneKey's tokens: $bgApp, $text, $icon, $bgStrong, $bgStrongActive,
+  // $bgPrimary, $bgPrimaryActive and $textInverse.
+  private class Palette(
+    val background: String,
+    val title: String,
+    val icon: String,
+    val cancelButton: String,
+    val cancelButtonPressed: String,
+    val cancelButtonText: String,
+    val confirmButton: String,
+    val confirmButtonPressed: String,
+    val confirmButtonText: String,
+  )
+
+  companion object {
+    private const val PREFIX = "com.margelo.nitro.reactnativeimagecroppicker.theme."
+    private const val EXTRA_IS_DARK = "${PREFIX}isDark"
+    private const val EXTRA_BACKGROUND_COLOR = "${PREFIX}backgroundColor"
+    private const val EXTRA_TITLE_COLOR = "${PREFIX}titleColor"
+    private const val EXTRA_ICON_COLOR = "${PREFIX}iconColor"
+    private const val EXTRA_CANCEL_BUTTON_COLOR = "${PREFIX}cancelButtonColor"
+    private const val EXTRA_CANCEL_BUTTON_PRESSED_COLOR = "${PREFIX}cancelButtonPressedColor"
+    private const val EXTRA_CANCEL_BUTTON_TEXT_COLOR = "${PREFIX}cancelButtonTextColor"
+    private const val EXTRA_CONFIRM_BUTTON_COLOR = "${PREFIX}confirmButtonColor"
+    private const val EXTRA_CONFIRM_BUTTON_PRESSED_COLOR = "${PREFIX}confirmButtonPressedColor"
+    private const val EXTRA_CONFIRM_BUTTON_TEXT_COLOR = "${PREFIX}confirmButtonTextColor"
+    private const val EXTRA_TITLE_FONT_FAMILY = "${PREFIX}titleFontFamily"
+    private const val EXTRA_BUTTON_FONT_FAMILY = "${PREFIX}buttonFontFamily"
+    private const val EXTRA_SCALE = "${PREFIX}scale"
+
+    private val lightPalette = Palette(
+      background = "#FFFFFF",
+      title = "#000000DF",
+      icon = "#0000009B",
+      cancelButton = "#0000000F",
+      cancelButtonPressed = "#0000001F",
+      cancelButtonText = "#000000DF",
+      confirmButton = "#000000DF",
+      confirmButtonPressed = "#0000009B",
+      confirmButtonText = "#FFFFFFED",
+    )
+
+    private val darkPalette = Palette(
+      background = "#0F0F0F",
+      title = "#FFFFFFED",
+      icon = "#FFFFFFAF",
+      cancelButton = "#FFFFFF12",
+      cancelButtonPressed = "#FFFFFF22",
+      cancelButtonText = "#FFFFFFED",
+      confirmButton = "#FFFFFFED",
+      confirmButtonPressed = "#FFFFFF72",
+      confirmButtonText = "#000000DF",
+    )
+
+    fun resolve(appearance: ImageCropperAppearance?, systemIsDark: Boolean): ImageCropperTheme {
+      val isDark = when (appearance?.colorScheme) {
+        ImageCropperColorScheme.DARK -> true
+        ImageCropperColorScheme.LIGHT -> false
+        null -> systemIsDark
+      }
+      val palette = if (isDark) darkPalette else lightPalette
+      fun color(value: String?, fallback: String): Int =
+        parseCssColor(value) ?: parseCssColor(fallback) ?: Color.TRANSPARENT
+
+      val scale = appearance?.scale?.toFloat()?.takeIf { it.isFinite() && it > 0f } ?: 1f
+      return ImageCropperTheme(
+        isDark = isDark,
+        backgroundColor = color(appearance?.backgroundColor, palette.background),
+        titleColor = color(appearance?.titleColor, palette.title),
+        iconColor = color(appearance?.iconColor, palette.icon),
+        cancelButtonColor = color(appearance?.cancelButtonColor, palette.cancelButton),
+        cancelButtonPressedColor = color(
+          appearance?.cancelButtonPressedColor,
+          palette.cancelButtonPressed,
+        ),
+        cancelButtonTextColor = color(appearance?.cancelButtonTextColor, palette.cancelButtonText),
+        confirmButtonColor = color(appearance?.confirmButtonColor, palette.confirmButton),
+        confirmButtonPressedColor = color(
+          appearance?.confirmButtonPressedColor,
+          palette.confirmButtonPressed,
+        ),
+        confirmButtonTextColor = color(
+          appearance?.confirmButtonTextColor,
+          palette.confirmButtonText,
+        ),
+        titleFontFamily = appearance?.titleFontFamily?.takeIf { it.isNotEmpty() },
+        buttonFontFamily = appearance?.buttonFontFamily?.takeIf { it.isNotEmpty() },
+        scale = scale,
+      )
+    }
+
+    fun readFrom(intent: Intent): ImageCropperTheme {
+      val fallback = resolve(null, systemIsDark = intent.getBooleanExtra(EXTRA_IS_DARK, false))
+      return ImageCropperTheme(
+        isDark = fallback.isDark,
+        backgroundColor = intent.getIntExtra(EXTRA_BACKGROUND_COLOR, fallback.backgroundColor),
+        titleColor = intent.getIntExtra(EXTRA_TITLE_COLOR, fallback.titleColor),
+        iconColor = intent.getIntExtra(EXTRA_ICON_COLOR, fallback.iconColor),
+        cancelButtonColor = intent.getIntExtra(EXTRA_CANCEL_BUTTON_COLOR, fallback.cancelButtonColor),
+        cancelButtonPressedColor = intent.getIntExtra(
+          EXTRA_CANCEL_BUTTON_PRESSED_COLOR,
+          fallback.cancelButtonPressedColor,
+        ),
+        cancelButtonTextColor = intent.getIntExtra(
+          EXTRA_CANCEL_BUTTON_TEXT_COLOR,
+          fallback.cancelButtonTextColor,
+        ),
+        confirmButtonColor = intent.getIntExtra(EXTRA_CONFIRM_BUTTON_COLOR, fallback.confirmButtonColor),
+        confirmButtonPressedColor = intent.getIntExtra(
+          EXTRA_CONFIRM_BUTTON_PRESSED_COLOR,
+          fallback.confirmButtonPressedColor,
+        ),
+        confirmButtonTextColor = intent.getIntExtra(
+          EXTRA_CONFIRM_BUTTON_TEXT_COLOR,
+          fallback.confirmButtonTextColor,
+        ),
+        titleFontFamily = intent.getStringExtra(EXTRA_TITLE_FONT_FAMILY),
+        buttonFontFamily = intent.getStringExtra(EXTRA_BUTTON_FONT_FAMILY),
+        scale = intent.getFloatExtra(EXTRA_SCALE, fallback.scale),
+      )
+    }
+
+    // Parses CSS hex colors: #RGB, #RRGGBB and #RRGGBBAA. Color.parseColor
+    // reads 8 digits as #AARRGGBB, so it cannot be used here.
+    fun parseCssColor(value: String?): Int? {
+      var hex = value?.trim()?.removePrefix("#") ?: return null
+      if (hex.length == 3) {
+        hex = hex.map { "$it$it" }.joinToString("")
+      }
+      if (hex.length != 6 && hex.length != 8) {
+        return null
+      }
+      val rgba = hex.toLongOrNull(16) ?: return null
+      return if (hex.length == 8) {
+        Color.argb(
+          (rgba and 0xff).toInt(),
+          ((rgba shr 24) and 0xff).toInt(),
+          ((rgba shr 16) and 0xff).toInt(),
+          ((rgba shr 8) and 0xff).toInt(),
+        )
+      } else {
+        Color.rgb(
+          ((rgba shr 16) and 0xff).toInt(),
+          ((rgba shr 8) and 0xff).toInt(),
+          (rgba and 0xff).toInt(),
+        )
+      }
+    }
+  }
+}

package/android/src/main/res/drawable/image_crop_picker_rotate.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- OneKey's RotateCounterclockwise icon. iOS draws the same path in ImageCropperIcons. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#FF000000"
+    android:pathData="M6 5.426C7.628 3.919 9.484 3 12.028 3a9 9 0 1 1-8.487 12l-.334-.943 1.886-.666.333.942A7 7 0 1 0 12.029 5c-1.982 0-3.407.686-4.785 2H10v2H4V3h2z" />
+</vector>

package/ios/ImageCropPickerImageProcessor.swift

@@ -16,9 +16,9 @@ struct ImageCropPickerConfig {
   let cropperToolbarTitle: String?
   let cropperChooseText: String?
   let cropperCancelText: String?
-  let cropperChooseColor: String?
-  let cropperCancelColor: String?
   let cropperRotateButtonsHidden: Bool
+  let showCropGuidelines: Bool
+  let appearance: ImageCropperAppearanceConfig
 
   init(_ options: ImageCropPickerOptions, forceCropping: Bool = false) {
     width = options.width
@@ -33,9 +33,9 @@ struct ImageCropPickerConfig {
     cropperToolbarTitle = options.cropperToolbarTitle
     cropperChooseText = options.cropperChooseText
     cropperCancelText = options.cropperCancelText
-    cropperChooseColor = options.cropperChooseColor
-    cropperCancelColor = options.cropperCancelColor
     cropperRotateButtonsHidden = options.cropperRotateButtonsHidden ?? false
+    showCropGuidelines = options.showCropGuidelines ?? true
+    appearance = ImageCropperAppearanceConfig(options.cropperAppearance)
   }
 
   var targetSize: CGSize? {
@@ -305,6 +305,7 @@ enum ImageCropPickerImageProcessor {
     }
   }
 
+  // Parses CSS hex colors: #RGB, #RRGGBB and #RRGGBBAA.
   static func color(fromHex hex: String?) -> UIColor? {
     guard var value = hex?.trimmingCharacters(in: .whitespacesAndNewlines), !value.isEmpty else {
       return nil
@@ -312,6 +313,9 @@ enum ImageCropPickerImageProcessor {
     if value.hasPrefix("#") {
       value.removeFirst()
     }
+    if value.count == 3 {
+      value = value.map { "\($0)\($0)" }.joined()
+    }
     guard value.count == 6 || value.count == 8, let rgba = UInt64(value, radix: 16) else {
       return nil
     }

package/ios/ImageCropPickerSession.swift

@@ -23,9 +23,10 @@ final class ImageCropPickerSession: NSObject {
 
   // Main thread state.
   private var pickerController: PHPickerViewController?
-  private var cropController: TOCropViewController?
+  private var cropController: ImageCropperViewController?
   private var loadingView: UIView?
   private var pickedFilename: String?
+  private var pickedAssetIdentifier: String?
   private var sourceScale: CGFloat = 1
   private var presentationRequestedAt: Date?
   private var hasPresented = false
@@ -100,7 +101,9 @@ final class ImageCropPickerSession: NSObject {
 
     // PHPickerViewController runs out of process and needs no photo library
     // permission, so a previously denied permission can't block the picker.
-    var configuration = PHPickerConfiguration()
+    // Passing the library only adds asset identifiers to the results; it
+    // doesn't ask for access either.
+    var configuration = PHPickerConfiguration(photoLibrary: .shared())
     configuration.filter = .images
     configuration.selectionLimit = 1
     configuration.preferredAssetRepresentationMode = .current
@@ -108,6 +111,14 @@ final class ImageCropPickerSession: NSObject {
     let picker = PHPickerViewController(configuration: configuration)
     picker.delegate = self
     picker.modalPresentationStyle = .fullScreen
+    switch config.appearance.colorScheme {
+    case .dark:
+      picker.overrideUserInterfaceStyle = .dark
+    case .light:
+      picker.overrideUserInterfaceStyle = .light
+    case nil:
+      break
+    }
     pickerController = picker
     present(picker, from: presenter)
   }
@@ -202,32 +213,12 @@ final class ImageCropPickerSession: NSObject {
   }
 
   private func presentCropper(image: UIImage, from presenter: UIViewController) {
-    let controller: TOCropViewController
-    if config.cropperCircleOverlay {
-      controller = TOCropViewController(croppingStyle: .circular, image: image)
-    } else {
-      controller = TOCropViewController(image: image)
-      if let targetSize = config.targetSize {
-        controller.aspectRatioPreset = targetSize
-      }
-      controller.aspectRatioLockEnabled = !config.freeStyleCropEnabled
-      controller.resetAspectRatioEnabled = !controller.aspectRatioLockEnabled
-    }
-
-    controller.title = config.cropperToolbarTitle
+    let theme = ImageCropperTheme(
+      config.appearance,
+      systemIsDark: presenter.traitCollection.userInterfaceStyle == .dark
+    )
+    let controller = ImageCropperViewController(image: image, config: config, theme: theme)
     controller.delegate = self
-    if let color = ImageCropPickerImageProcessor.color(fromHex: config.cropperChooseColor) {
-      controller.doneButtonColor = color
-    }
-    if let color = ImageCropPickerImageProcessor.color(fromHex: config.cropperCancelColor) {
-      controller.cancelButtonColor = color
-    }
-    controller.doneButtonTitle = config.cropperChooseText
-    controller.cancelButtonTitle = config.cropperCancelText
-    controller.rotateButtonsHidden = config.cropperRotateButtonsHidden
-    controller.modalPresentationStyle = .fullScreen
-    controller.modalTransitionStyle = .coverVertical
-
     cropController = controller
     present(controller, from: presenter)
   }
@@ -345,37 +336,42 @@ extension ImageCropPickerSession: PHPickerViewControllerDelegate {
       dismissAll { self.finish(.failure(ImageCropPickerError.cancelled)) }
       return
     }
+    pickedAssetIdentifier = result.assetIdentifier
     loadPickedImage(result, in: picker)
   }
 }
 
-extension ImageCropPickerSession: TOCropViewControllerDelegate {
-  func cropViewController(
-    _ cropViewController: TOCropViewController,
-    didCropTo image: UIImage,
-    with cropRect: CGRect,
+extension ImageCropPickerSession: ImageCropperViewControllerDelegate {
+  func imageCropperViewController(
+    _ controller: ImageCropperViewController,
+    didCropWithFrame cropFrame: CGRect,
     angle: Int
   ) {
     guard !isFinished, !isBusy else {
       return
     }
     isBusy = true
-    showLoading(in: cropViewController.view)
+    controller.isProcessing = true
 
+    let image = controller.image
     let config = self.config
     let filename = pickedFilename
     // Report the crop rect in the coordinates of the original, undownsampled image.
     let sourceCropRect = CGRect(
-      x: (cropRect.origin.x * sourceScale).rounded(),
-      y: (cropRect.origin.y * sourceScale).rounded(),
-      width: (cropRect.width * sourceScale).rounded(),
-      height: (cropRect.height * sourceScale).rounded()
+      x: (cropFrame.origin.x * sourceScale).rounded(),
+      y: (cropFrame.origin.y * sourceScale).rounded(),
+      width: (cropFrame.width * sourceScale).rounded(),
+      height: (cropFrame.height * sourceScale).rounded()
     )
 
     DispatchQueue.global(qos: .userInitiated).async { [self] in
       let result = Result {
-        try ImageCropPickerImageProcessor.makeResult(
-          image: ImageCropPickerImageProcessor.resizeCroppedImage(image, config: config),
+        let isWholeImage = angle == 0 && cropFrame == CGRect(origin: .zero, size: image.size)
+        let cropped = isWholeImage
+          ? image
+          : image.croppedImage(withFrame: cropFrame, angle: angle, circularClip: false)
+        return try ImageCropPickerImageProcessor.makeResult(
+          image: ImageCropPickerImageProcessor.resizeCroppedImage(cropped, config: config),
           config: config,
           cropRect: sourceCropRect,
           filename: filename
@@ -383,23 +379,24 @@ extension ImageCropPickerSession: TOCropViewControllerDelegate {
       }
       DispatchQueue.main.async { [self] in
         isBusy = false
-        hideLoading()
         dismissAll { self.finish(result) }
       }
     }
   }
 
-  func cropViewController(
-    _ cropViewController: TOCropViewController,
-    didFinishCancelled cancelled: Bool
-  ) {
+  func imageCropperViewControllerDidCancel(_ controller: ImageCropperViewController) {
     guard !isFinished, !isBusy else {
       return
     }
-    if isPickerMode, pickerController?.presentingViewController != nil {
+    if isPickerMode, let picker = pickerController, picker.presentingViewController != nil {
       // Go back to the photo picker, like react-native-image-crop-picker.
+      // The picker keeps the photo selected, so without this, tapping the
+      // same photo again would only deselect it.
+      if #available(iOS 17.0, *), let identifier = pickedAssetIdentifier {
+        picker.deselectAssets(withIdentifiers: [identifier])
+      }
       cropController = nil
-      cropViewController.dismiss(animated: true)
+      controller.dismiss(animated: true)
       return
     }
     dismissAll { self.finish(.failure(ImageCropPickerError.cancelled)) }

package/ios/ImageCropperTheme.swift

@@ -0,0 +1,155 @@
+import UIKit
+
+// Plain Swift copy of `ImageCropperAppearance`.
+struct ImageCropperAppearanceConfig {
+  let colorScheme: ImageCropperColorScheme?
+  let backgroundColor: String?
+  let titleColor: String?
+  let iconColor: String?
+  let cancelButtonColor: String?
+  let cancelButtonPressedColor: String?
+  let cancelButtonTextColor: String?
+  let confirmButtonColor: String?
+  let confirmButtonPressedColor: String?
+  let confirmButtonTextColor: String?
+  let titleFontFamily: String?
+  let buttonFontFamily: String?
+  let scale: Double?
+
+  init(_ appearance: ImageCropperAppearance?) {
+    colorScheme = appearance?.colorScheme
+    backgroundColor = appearance?.backgroundColor
+    titleColor = appearance?.titleColor
+    iconColor = appearance?.iconColor
+    cancelButtonColor = appearance?.cancelButtonColor
+    cancelButtonPressedColor = appearance?.cancelButtonPressedColor
+    cancelButtonTextColor = appearance?.cancelButtonTextColor
+    confirmButtonColor = appearance?.confirmButtonColor
+    confirmButtonPressedColor = appearance?.confirmButtonPressedColor
+    confirmButtonTextColor = appearance?.confirmButtonTextColor
+    titleFontFamily = appearance?.titleFontFamily
+    buttonFontFamily = appearance?.buttonFontFamily
+    scale = appearance?.scale
+  }
+}
+
+// Resolved colors, fonts and metrics of the cropper screen. The layout
+// matches Android's ImageCropperActivity.
+struct ImageCropperTheme {
+  let isDark: Bool
+  let backgroundColor: UIColor
+  let titleColor: UIColor
+  let iconColor: UIColor
+  let cancelButtonColor: UIColor
+  let cancelButtonPressedColor: UIColor
+  let cancelButtonTextColor: UIColor
+  let confirmButtonColor: UIColor
+  let confirmButtonPressedColor: UIColor
+  let confirmButtonTextColor: UIColor
+  let titleFont: UIFont
+  let buttonFont: UIFont
+  let scale: CGFloat
+
+  // OneKey's tokens: $bgApp, $text, $icon, $bgStrong, $bgStrongActive,
+  // $bgPrimary, $bgPrimaryActive and $textInverse.
+  private struct Palette {
+    let background: String
+    let title: String
+    let icon: String
+    let cancelButton: String
+    let cancelButtonPressed: String
+    let cancelButtonText: String
+    let confirmButton: String
+    let confirmButtonPressed: String
+    let confirmButtonText: String
+  }
+
+  private static let lightPalette = Palette(
+    background: "#FFFFFF",
+    title: "#000000DF",
+    icon: "#0000009B",
+    cancelButton: "#0000000F",
+    cancelButtonPressed: "#0000001F",
+    cancelButtonText: "#000000DF",
+    confirmButton: "#000000DF",
+    confirmButtonPressed: "#0000009B",
+    confirmButtonText: "#FFFFFFED"
+  )
+
+  private static let darkPalette = Palette(
+    background: "#0F0F0F",
+    title: "#FFFFFFED",
+    icon: "#FFFFFFAF",
+    cancelButton: "#FFFFFF12",
+    cancelButtonPressed: "#FFFFFF22",
+    cancelButtonText: "#FFFFFFED",
+    confirmButton: "#FFFFFFED",
+    confirmButtonPressed: "#FFFFFF72",
+    confirmButtonText: "#000000DF"
+  )
+
+  init(_ appearance: ImageCropperAppearanceConfig, systemIsDark: Bool) {
+    switch appearance.colorScheme {
+    case .dark:
+      isDark = true
+    case .light:
+      isDark = false
+    case nil:
+      isDark = systemIsDark
+    }
+    let palette = isDark ? Self.darkPalette : Self.lightPalette
+
+    func color(_ value: String?, fallback: String) -> UIColor {
+      return ImageCropPickerImageProcessor.color(fromHex: value)
+        ?? ImageCropPickerImageProcessor.color(fromHex: fallback)
+        ?? .clear
+    }
+
+    backgroundColor = color(appearance.backgroundColor, fallback: palette.background)
+    titleColor = color(appearance.titleColor, fallback: palette.title)
+    iconColor = color(appearance.iconColor, fallback: palette.icon)
+    cancelButtonColor = color(appearance.cancelButtonColor, fallback: palette.cancelButton)
+    cancelButtonPressedColor = color(
+      appearance.cancelButtonPressedColor,
+      fallback: palette.cancelButtonPressed
+    )
+    cancelButtonTextColor = color(
+      appearance.cancelButtonTextColor,
+      fallback: palette.cancelButtonText
+    )
+    confirmButtonColor = color(appearance.confirmButtonColor, fallback: palette.confirmButton)
+    confirmButtonPressedColor = color(
+      appearance.confirmButtonPressedColor,
+      fallback: palette.confirmButtonPressed
+    )
+    confirmButtonTextColor = color(
+      appearance.confirmButtonTextColor,
+      fallback: palette.confirmButtonText
+    )
+
+    let resolvedScale = CGFloat(appearance.scale ?? 1)
+    scale = resolvedScale > 0 ? resolvedScale : 1
+    // OneKey's $headingLg and $bodyLgMedium, rounded like its scaled fonts.
+    titleFont = Self.font(
+      named: appearance.titleFontFamily,
+      size: (18 * scale).rounded(),
+      fallbackWeight: .semibold
+    )
+    buttonFont = Self.font(
+      named: appearance.buttonFontFamily,
+      size: (16 * scale).rounded(),
+      fallbackWeight: .medium
+    )
+  }
+
+  func metric(_ value: CGFloat) -> CGFloat {
+    return (value * scale).rounded()
+  }
+
+  private static func font(named name: String?, size: CGFloat, fallbackWeight: UIFont.Weight) -> UIFont {
+    if let name, let font = UIFont(name: name, size: size) {
+      return font
+    }
+    return .systemFont(ofSize: size, weight: fallbackWeight)
+  }
+}