@whetware/react-native-stroke-text 0.0.2

package/android/src/main/java/com/margelo/nitro/stroketext/StrokeTextView.kt

@@ -0,0 +1,429 @@
+package com.margelo.nitro.stroketext
+
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Paint.FontMetricsInt
+import android.graphics.Typeface
+import android.os.Build
+import android.text.Layout
+import android.text.Spannable
+import android.text.SpannableString
+import android.text.TextUtils
+import android.text.style.LineHeightSpan
+import android.util.TypedValue
+import android.view.Gravity
+import android.widget.TextView
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.text.DefaultStyleValuesUtil
+import com.facebook.react.views.text.ReactTypefaceUtils
+import java.lang.reflect.Modifier
+import kotlin.math.ceil
+import kotlin.math.max
+import kotlin.math.min
+
+internal class StrokeTextView(context: ThemedReactContext) : TextView(context) {
+  var rawText: String = ""
+  var color: Int = resolvedDefaultTextColor()
+  var strokeColor: Int = Color.TRANSPARENT
+  var strokeWidthDp: Double = 0.0
+  var strokeWidthPx: Float = 0f
+
+  var fontSizePx: Float = spToPx(14.0)
+  var fontWeight: String? = null
+  var fontFamily: String? = null
+  var fontStyle: StrokeTextFontStyle = StrokeTextFontStyle.NORMAL
+  var lineHeightPx: Float? = null
+  var letterSpacingPx: Float? = null
+
+  var textAlign: StrokeTextAlign = StrokeTextAlign.AUTO
+  var textDecorationLine: StrokeTextDecorationLine = StrokeTextDecorationLine.NONE
+  var textTransform: StrokeTextTransform = StrokeTextTransform.NONE
+
+  var numberOfLines: Int = 0
+  var ellipsizeMode: StrokeTextEllipsizeMode? = null
+
+  var paddingAllPx: Float? = null
+  var paddingVerticalPx: Float? = null
+  var paddingHorizontalPx: Float? = null
+  var paddingTopPx: Float? = null
+  var paddingRightPx: Float? = null
+  var paddingBottomPx: Float? = null
+  var paddingLeftPx: Float? = null
+
+  init {
+    // Default to no font padding to avoid Android's extra ascent/descent insets shifting the
+    // glyphs downward. (React Native <Text> defaults includeFontPadding=true, but most designs
+    // expect iOS/web-like top alignment.)
+    gravity = Gravity.TOP or Gravity.START
+    includeFontPadding = false
+  }
+
+  fun invalidateTextLayout() {
+    applyProps()
+    requestLayout()
+    invalidate()
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    // Draw stroke behind fill, using TextView's layout so metrics match RN <Text/> as closely as
+    // possible (especially for bold fonts).
+    val layout = layout
+    if (layout != null && strokeWidthPx > 0f && strokeColor != Color.TRANSPARENT) {
+      val textPaint = paint
+      val prevStyle = textPaint.style
+      val prevStrokeWidth = textPaint.strokeWidth
+      val prevStrokeJoin = textPaint.strokeJoin
+      val prevStrokeCap = textPaint.strokeCap
+      val prevColor = textPaint.color
+      val prevUnderline = textPaint.isUnderlineText
+      val prevStrike = textPaint.isStrikeThruText
+
+      val saveCount = canvas.save()
+      val compoundPaddingLeft = compoundPaddingLeft
+      val extendedPaddingTop = extendedPaddingTop
+
+      canvas.translate(compoundPaddingLeft.toFloat(), extendedPaddingTop.toFloat())
+      canvas.translate(-scrollX.toFloat(), -scrollY.toFloat())
+
+      // Only stroke the glyph outlines; keep underline/strike in the fill pass.
+      textPaint.isUnderlineText = false
+      textPaint.isStrikeThruText = false
+
+      textPaint.style = Paint.Style.STROKE
+      textPaint.strokeJoin = Paint.Join.ROUND
+      textPaint.strokeCap = Paint.Cap.ROUND
+      textPaint.strokeWidth = strokeWidthPx
+      textPaint.color = strokeColor
+      layout.draw(canvas)
+
+      canvas.restoreToCount(saveCount)
+
+      textPaint.style = prevStyle
+      textPaint.strokeWidth = prevStrokeWidth
+      textPaint.strokeJoin = prevStrokeJoin
+      textPaint.strokeCap = prevStrokeCap
+      textPaint.color = prevColor
+      textPaint.isUnderlineText = prevUnderline
+      textPaint.isStrikeThruText = prevStrike
+    }
+
+    super.onDraw(canvas)
+  }
+
+  private fun applyProps() {
+    // Padding: apply stroke inset in native to compensate for the overlay expansion in JS.
+    val inset = strokeInsetPx()
+    val left = floorToInt(resolvePadding(paddingLeftPx, paddingHorizontalPx, paddingAllPx) + inset)
+    val top = floorToInt(resolvePadding(paddingTopPx, paddingVerticalPx, paddingAllPx) + inset)
+    val right = floorToInt(resolvePadding(paddingRightPx, paddingHorizontalPx, paddingAllPx) + inset)
+    val bottom = floorToInt(resolvePadding(paddingBottomPx, paddingVerticalPx, paddingAllPx) + inset)
+    setPadding(left, top, right, bottom)
+
+    // Font
+    setTextSize(TypedValue.COMPLEX_UNIT_PX, fontSizePx)
+    typeface = resolveTypeface(fontFamily, fontWeight, fontStyle)
+
+    // Mirror RN's CustomStyleSpan flags.
+    applyCustomStyleTextFlags(paint, fontFamily, fontWeight, fontStyle)
+
+    // Letter spacing is specified in px/pt; TextView expects em.
+    val letterSpacingEm =
+      if (letterSpacingPx != null && !letterSpacingPx!!.isNaN() && fontSizePx > 0f) {
+        letterSpacingPx!! / fontSizePx
+      } else {
+        0f
+      }
+    letterSpacing = letterSpacingEm
+
+    // Text decorations
+    val underline =
+      textDecorationLine == StrokeTextDecorationLine.UNDERLINE ||
+        textDecorationLine == StrokeTextDecorationLine.UNDERLINE_LINE_THROUGH
+    val strike =
+      textDecorationLine == StrokeTextDecorationLine.LINE_THROUGH ||
+        textDecorationLine == StrokeTextDecorationLine.UNDERLINE_LINE_THROUGH
+    paint.isUnderlineText = underline
+    paint.isStrikeThruText = strike
+
+    // Alignment
+    val horizontalGravity =
+      when (textAlign) {
+        StrokeTextAlign.RIGHT -> Gravity.END
+        StrokeTextAlign.CENTER -> Gravity.CENTER_HORIZONTAL
+        else -> Gravity.START
+      }
+    gravity = Gravity.TOP or horizontalGravity
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      justificationMode =
+        if (textAlign == StrokeTextAlign.JUSTIFY) Layout.JUSTIFICATION_MODE_INTER_WORD
+        else Layout.JUSTIFICATION_MODE_NONE
+    }
+
+    // Line limits / ellipsizing
+    val maxLines = if (numberOfLines > 0) numberOfLines else Int.MAX_VALUE
+    setMaxLines(maxLines)
+    ellipsize =
+      if (numberOfLines <= 0) {
+        null
+      } else {
+        when (ellipsizeMode ?: StrokeTextEllipsizeMode.TAIL) {
+          StrokeTextEllipsizeMode.HEAD -> TextUtils.TruncateAt.START
+          StrokeTextEllipsizeMode.MIDDLE -> TextUtils.TruncateAt.MIDDLE
+          StrokeTextEllipsizeMode.CLIP -> null
+          StrokeTextEllipsizeMode.TAIL -> TextUtils.TruncateAt.END
+        }
+      }
+
+    // Colors
+    setTextColor(color)
+
+    // Text + transform + line height (set last so layout is created with the final paint settings).
+    val transformedText = applyTextTransform(rawText, textTransform)
+    val textForLayout: CharSequence =
+      if (lineHeightPx != null && !lineHeightPx!!.isNaN() && transformedText.isNotEmpty()) {
+        SpannableString(transformedText).apply {
+          setSpan(
+            StrokeTextLineHeightSpan(lineHeightPx!!),
+            0,
+            length,
+            Spannable.SPAN_INCLUSIVE_INCLUSIVE,
+          )
+        }
+      } else {
+        transformedText
+      }
+    setText(textForLayout)
+  }
+
+  private fun resolvePadding(specific: Float?, axis: Float?, all: Float?): Float {
+    return specific ?: axis ?: all ?: 0f
+  }
+
+  private fun strokeInsetPx(): Float {
+    if (strokeWidthDp <= 0.0) return 0f
+    val insetDp = (ceil(strokeWidthDp) / 2.0).toFloat()
+    return dpToPx(insetDp.toDouble())
+  }
+
+  private fun floorToInt(value: Float): Int {
+    // React Native consistently floors padding values when applying them to native views.
+    return kotlin.math.floor(value.toDouble()).toInt()
+  }
+
+  private fun resolveTypeface(
+    family: String?,
+    weight: String?,
+    style: StrokeTextFontStyle,
+  ): Typeface {
+    val fam = family?.takeIf { it.isNotBlank() }
+    val weightInt = ReactTypefaceUtils.parseFontWeight(weight)
+    val styleInt = if (style == StrokeTextFontStyle.ITALIC) Typeface.ITALIC else Typeface.NORMAL
+    return ReactTypefaceUtils.applyStyles(null, styleInt, weightInt, fam, context.assets)
+  }
+
+  private fun applyCustomStyleTextFlags(
+    paint: Paint,
+    family: String?,
+    weight: String?,
+    style: StrokeTextFontStyle,
+  ) {
+    val isCustomFamily = !family.isNullOrBlank()
+    val isCustomItalic = style == StrokeTextFontStyle.ITALIC
+    val isCustomWeight =
+      ReactTypefaceUtils.parseFontWeight(weight) != com.facebook.react.common.ReactConstants.UNSET
+    val hasCustomStyle = isCustomFamily || isCustomItalic || isCustomWeight
+
+    // Mirror React Native's CustomStyleSpan defaults.
+    paint.isSubpixelText = hasCustomStyle
+    paint.isLinearText = hasCustomStyle && isAndroidLinearTextEnabled()
+  }
+
+  private fun isAndroidLinearTextEnabled(): Boolean {
+    return try {
+      val method =
+        ReactNativeFeatureFlags::class.java.methods.firstOrNull {
+          it.name == "enableAndroidLinearText" && it.parameterCount == 0
+        } ?: return false
+      val receiver = if (Modifier.isStatic(method.modifiers)) null else ReactNativeFeatureFlags
+      (method.invoke(receiver) as? Boolean) == true
+    } catch (_: Throwable) {
+      false
+    }
+  }
+
+  fun resolvedDefaultTextColor(): Int {
+    return DefaultStyleValuesUtil.getDefaultTextColor(context)?.defaultColor ?: Color.BLACK
+  }
+
+  private fun applyTextTransform(text: String, transform: StrokeTextTransform): String {
+    return when (transform) {
+      StrokeTextTransform.UPPERCASE -> text.uppercase()
+      StrokeTextTransform.LOWERCASE -> text.lowercase()
+      StrokeTextTransform.CAPITALIZE -> capitalizeWords(text)
+      StrokeTextTransform.NONE -> text
+    }
+  }
+
+  private fun capitalizeWords(input: String): String {
+    val sb = StringBuilder(input.length)
+    var cap = true
+    for (c in input) {
+      if (c.isWhitespace()) {
+        cap = true
+        sb.append(c)
+      } else {
+        sb.append(if (cap) c.titlecaseChar() else c)
+        cap = false
+      }
+    }
+    return sb.toString()
+  }
+
+  private class StrokeTextLineHeightSpan(heightPx: Float) : LineHeightSpan {
+    private val lineHeight: Int = ceil(heightPx.toDouble()).toInt()
+
+    override fun chooseHeight(
+      text: CharSequence,
+      start: Int,
+      end: Int,
+      spanstartv: Int,
+      v: Int,
+      fm: FontMetricsInt,
+    ) {
+      val leading = lineHeight - ((-fm.ascent) + fm.descent)
+      fm.ascent -= ceil(leading / 2.0f).toInt()
+      fm.descent += kotlin.math.floor(leading / 2.0f).toInt()
+
+      if (start == 0) {
+        fm.top = fm.ascent
+      }
+      if (end == text.length) {
+        fm.bottom = fm.descent
+      }
+    }
+  }
+
+  companion object {
+    fun parseColor(color: String?): Int? {
+      val trimmed = color?.trim().orEmpty()
+      if (trimmed.isEmpty()) return null
+
+      val lower = trimmed.lowercase()
+      if (lower.startsWith("#")) return parseHexColor(trimmed)
+      if (lower.startsWith("rgba(")) return parseRgba(trimmed)
+      if (lower.startsWith("rgb(")) return parseRgb(trimmed)
+
+      return runCatching { Color.parseColor(trimmed) }.getOrNull()
+    }
+
+    private fun parseHexColor(color: String): Int? {
+      var hex = color.removePrefix("#").trim()
+      if (hex.isEmpty()) return null
+
+      if (hex.length == 3) {
+        // #RGB
+        hex = "${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}"
+      } else if (hex.length == 4) {
+        // #RGBA (CSS Color Module Level 4 / React Native)
+        hex = "${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}"
+      }
+
+      return when (hex.length) {
+        6 -> {
+          val rgb = hex.toLongOrNull(16) ?: return null
+          val r = ((rgb shr 16) and 0xFF).toInt()
+          val g = ((rgb shr 8) and 0xFF).toInt()
+          val b = (rgb and 0xFF).toInt()
+          Color.argb(255, r, g, b)
+        }
+        8 -> {
+          // #RRGGBBAA (CSS Color Module Level 4 / React Native)
+          val r = hex.substring(0, 2).toIntOrNull(16) ?: return null
+          val g = hex.substring(2, 4).toIntOrNull(16) ?: return null
+          val b = hex.substring(4, 6).toIntOrNull(16) ?: return null
+          val a = hex.substring(6, 8).toIntOrNull(16) ?: return null
+          Color.argb(a, r, g, b)
+        }
+        else -> null
+      }
+    }
+
+    private fun parseRgb(color: String): Int? {
+      val inner = color.removePrefix("rgb(").removeSuffix(")")
+      val parts = inner.split(",").map { it.trim() }
+      if (parts.size != 3) return null
+      val r = parts[0].toIntOrNull()?.coerceIn(0, 255) ?: return null
+      val g = parts[1].toIntOrNull()?.coerceIn(0, 255) ?: return null
+      val b = parts[2].toIntOrNull()?.coerceIn(0, 255) ?: return null
+      return Color.rgb(r, g, b)
+    }
+
+    private fun parseRgba(color: String): Int? {
+      val inner = color.removePrefix("rgba(").removeSuffix(")")
+      val parts = inner.split(",").map { it.trim() }
+      if (parts.size != 4) return null
+      val r = parts[0].toIntOrNull()?.coerceIn(0, 255) ?: return null
+      val g = parts[1].toIntOrNull()?.coerceIn(0, 255) ?: return null
+      val b = parts[2].toIntOrNull()?.coerceIn(0, 255) ?: return null
+      val aFloat = parts[3].toFloatOrNull() ?: return null
+      val a = min(255, max(0, (aFloat * 255f).toInt()))
+      return Color.argb(a, r, g, b)
+    }
+
+    fun dpToPx(dp: Float, displayMetrics: android.util.DisplayMetrics): Float {
+      return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics)
+    }
+
+    fun spToPx(sp: Double, displayMetrics: android.util.DisplayMetrics): Float {
+      return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp.toFloat(), displayMetrics)
+    }
+
+    fun spToPx(
+      sp: Double,
+      displayMetrics: android.util.DisplayMetrics,
+      maxFontSizeMultiplier: Float?,
+    ): Float {
+      val density = displayMetrics.density
+      if (density == 0f) return spToPx(sp, displayMetrics)
+
+      val fontScale = displayMetrics.scaledDensity / density
+      val effectiveFontScale =
+        if (
+          maxFontSizeMultiplier == null ||
+          maxFontSizeMultiplier.isNaN() ||
+          maxFontSizeMultiplier <= 0f ||
+          maxFontSizeMultiplier < 1f
+        ) {
+          fontScale
+        } else {
+          min(fontScale, maxFontSizeMultiplier)
+        }
+
+      return (sp.toFloat() * density * effectiveFontScale)
+    }
+
+    fun textToPx(
+      value: Double,
+      allowFontScaling: Boolean,
+      maxFontSizeMultiplier: Float?,
+      displayMetrics: android.util.DisplayMetrics,
+    ): Float {
+      return if (allowFontScaling) {
+        spToPx(value, displayMetrics, maxFontSizeMultiplier)
+      } else {
+        dpToPx(value.toFloat(), displayMetrics)
+      }
+    }
+  }
+
+  private fun spToPx(sp: Double): Float {
+    return spToPx(sp, resources.displayMetrics)
+  }
+
+  private fun dpToPx(dp: Double): Float {
+    return dpToPx(dp.toFloat(), resources.displayMetrics)
+  }
+}

package/ios/Bridge.h

@@ -0,0 +1,8 @@
+//
+//  Bridge.h
+//  NitroStrokeText
+//
+//  Created by Marc Rousavy on 22.07.24.
+//
+
+#pragma once

package/ios/HybridStrokeTextView.swift

@@ -0,0 +1,114 @@
+import NitroModules
+import UIKit
+
+final class HybridStrokeTextView: HybridStrokeTextViewSpec {
+  typealias ViewType = StrokeTextView
+
+  let view = StrokeTextView()
+
+  var text: String = ""
+  var color: String? = nil
+  var strokeColor: String? = nil
+  var strokeWidth: Double? = nil
+  var fontSize: Double? = nil
+  var fontWeight: String? = nil
+  var fontFamily: String? = nil
+  var fontStyle: StrokeTextFontStyle? = nil
+  var lineHeight: Double? = nil
+  var letterSpacing: Double? = nil
+  var textAlign: StrokeTextAlign? = nil
+  var textDecorationLine: StrokeTextDecorationLine? = nil
+  var textTransform: StrokeTextTransform? = nil
+  var opacity: Double? = nil
+  var allowFontScaling: Bool? = nil
+  var maxFontSizeMultiplier: Double? = nil
+  var includeFontPadding: Bool? = nil
+  var numberOfLines: Double? = nil
+  var ellipsizeMode: StrokeTextEllipsizeMode? = nil
+  var padding: Double? = nil
+  var paddingVertical: Double? = nil
+  var paddingHorizontal: Double? = nil
+  var paddingTop: Double? = nil
+  var paddingRight: Double? = nil
+  var paddingBottom: Double? = nil
+  var paddingLeft: Double? = nil
+
+  func afterUpdate() {
+    view.text = text
+
+    if let color = color, let parsed = StrokeTextColor.parse(color) {
+      view.color = parsed
+    } else {
+      view.color = StrokeTextView.defaultTextColor()
+    }
+
+    if let strokeColor = strokeColor, let parsed = StrokeTextColor.parse(strokeColor) {
+      view.strokeColor = parsed
+    } else {
+      view.strokeColor = .clear
+    }
+
+    let resolvedStrokeWidth = max(0, strokeWidth ?? 0)
+    view.strokeWidth = CGFloat(resolvedStrokeWidth)
+
+    view.fontSize = CGFloat(fontSize ?? 14)
+    view.fontWeight = fontWeight ?? "400"
+    view.fontFamily = fontFamily
+    view.fontStyle = fontStyle ?? .normal
+
+    view.allowFontScaling = allowFontScaling ?? true
+    if let multiplier = maxFontSizeMultiplier, multiplier.isFinite, multiplier >= 1 {
+      view.maxFontSizeMultiplier = CGFloat(multiplier)
+    } else {
+      view.maxFontSizeMultiplier = nil
+    }
+
+    view.lineHeight = lineHeight.map { CGFloat($0) }
+    view.letterSpacing = letterSpacing.map { CGFloat($0) }
+    view.textAlign = textAlign ?? .auto
+    view.textDecorationLine = textDecorationLine ?? .none
+    view.textTransform = textTransform ?? .none
+
+    view.numberOfLines = Int(numberOfLines ?? 0)
+    view.ellipsizeMode = ellipsizeMode ?? .tail
+
+    view.alpha = CGFloat(opacity ?? 1)
+
+    let baseInsets = resolvedPaddingInsets(
+      padding: padding,
+      paddingVertical: paddingVertical,
+      paddingHorizontal: paddingHorizontal,
+      paddingTop: paddingTop,
+      paddingRight: paddingRight,
+      paddingBottom: paddingBottom,
+      paddingLeft: paddingLeft
+    )
+    let strokeInset = CGFloat(ceil(resolvedStrokeWidth) / 2.0)
+    view.paddingInsets = UIEdgeInsets(
+      top: baseInsets.top + strokeInset,
+      left: baseInsets.left + strokeInset,
+      bottom: baseInsets.bottom + strokeInset,
+      right: baseInsets.right + strokeInset
+    )
+  }
+
+  private func resolvedPaddingInsets(
+    padding: Double?,
+    paddingVertical: Double?,
+    paddingHorizontal: Double?,
+    paddingTop: Double?,
+    paddingRight: Double?,
+    paddingBottom: Double?,
+    paddingLeft: Double?
+  ) -> UIEdgeInsets {
+    func resolve(_ specific: Double?, _ axis: Double?, _ all: Double?) -> CGFloat {
+      return CGFloat(specific ?? axis ?? all ?? 0)
+    }
+
+    let top = resolve(paddingTop, paddingVertical, padding)
+    let bottom = resolve(paddingBottom, paddingVertical, padding)
+    let left = resolve(paddingLeft, paddingHorizontal, padding)
+    let right = resolve(paddingRight, paddingHorizontal, padding)
+    return UIEdgeInsets(top: top, left: left, bottom: bottom, right: right)
+  }
+}

package/ios/StrokeTextColor.swift

@@ -0,0 +1,120 @@
+import UIKit
+
+enum StrokeTextColor {
+  static func parse(_ colorString: String) -> UIColor? {
+    let trimmed = colorString.trimmingCharacters(in: .whitespacesAndNewlines)
+    if trimmed.isEmpty {
+      return nil
+    }
+
+    if trimmed.hasPrefix("#") {
+      return parseHex(trimmed)
+    }
+
+    let lower = trimmed.lowercased()
+    if let keyword = parseKeyword(lower) {
+      return keyword
+    }
+    if lower.hasPrefix("rgba(") {
+      return parseRGBA(trimmed)
+    }
+    if lower.hasPrefix("rgb(") {
+      return parseRGB(trimmed)
+    }
+
+    return nil
+  }
+
+  private static func parseHex(_ hexString: String) -> UIColor? {
+    var hex = String(hexString.dropFirst())
+
+    if hex.count == 3 {
+      hex = hex.map { "\($0)\($0)" }.joined()
+    }
+
+    if hex.count == 4 {
+      // #RGBA (CSS Color Module Level 4 / React Native)
+      hex = hex.map { "\($0)\($0)" }.joined()
+    }
+
+    let alpha: CGFloat
+    let rgbHex: String
+
+    switch hex.count {
+    case 6:
+      alpha = 1
+      rgbHex = hex
+    case 8:
+      // #RRGGBBAA (CSS Color Module Level 4 / React Native)
+      rgbHex = String(hex.prefix(6))
+      let a = String(hex.suffix(2))
+      guard let aByte = UInt8(a, radix: 16) else { return nil }
+      alpha = CGFloat(aByte) / 255.0
+    default:
+      return nil
+    }
+
+    guard let rgb = UInt32(rgbHex, radix: 16) else { return nil }
+
+    let r = CGFloat((rgb & 0xFF0000) >> 16) / 255.0
+    let g = CGFloat((rgb & 0x00FF00) >> 8) / 255.0
+    let b = CGFloat(rgb & 0x0000FF) / 255.0
+    return UIColor(red: r, green: g, blue: b, alpha: alpha)
+  }
+
+  private static func parseKeyword(_ lower: String) -> UIColor? {
+    switch lower {
+    case "transparent", "clear":
+      return .clear
+    case "black":
+      return .black
+    case "white":
+      return .white
+    case "red":
+      return .red
+    case "green":
+      return .green
+    case "blue":
+      return .blue
+    case "cyan", "aqua":
+      return .cyan
+    case "magenta", "fuchsia":
+      return .magenta
+    case "yellow":
+      return .yellow
+    case "gray", "grey":
+      return .gray
+    case "lightgray", "lightgrey":
+      return .lightGray
+    case "darkgray", "darkgrey":
+      return .darkGray
+    default:
+      return nil
+    }
+  }
+
+  private static func parseRGB(_ rgbString: String) -> UIColor? {
+    let inner = rgbString.dropFirst(4).dropLast(1)
+    let parts = inner.split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces) }
+    guard parts.count == 3 else { return nil }
+    guard
+      let r = Double(parts[0]),
+      let g = Double(parts[1]),
+      let b = Double(parts[2])
+    else { return nil }
+    return UIColor(red: r / 255.0, green: g / 255.0, blue: b / 255.0, alpha: 1)
+  }
+
+  private static func parseRGBA(_ rgbaString: String) -> UIColor? {
+    let inner = rgbaString.dropFirst(5).dropLast(1)
+    let parts = inner.split(separator: ",").map { $0.trimmingCharacters(in: .whitespaces) }
+    guard parts.count == 4 else { return nil }
+    guard
+      let r = Double(parts[0]),
+      let g = Double(parts[1]),
+      let b = Double(parts[2]),
+      let a = Double(parts[3])
+    else { return nil }
+    return UIColor(red: r / 255.0, green: g / 255.0, blue: b / 255.0, alpha: a)
+  }
+}