update text chip color scheme

apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift

@@ -139,7 +139,7 @@ struct WebReader: PlatformViewRepresentable {
     let htmlString = WebReaderContent(
       item: item,
       articleContent: articleContent,
-      isDark: isDarkMode,
+      isDark: Color.isDarkMode,
       fontSize: fontSize(),
       lineHeight: lineHeight(),
       maxWidthPercentage: maxWidthPercentage(),
@@ -150,14 +150,6 @@ struct WebReader: PlatformViewRepresentable {
 
     webView.loadHTMLString(htmlString, baseURL: ViewsPackage.resourceURL)
   }
-
-  var isDarkMode: Bool {
-    #if os(iOS)
-      UITraitCollection.current.userInterfaceStyle == .dark
-    #else
-      NSApp.effectiveAppearance.name == NSAppearance.Name.darkAqua
-    #endif
-  }
 }
 
 #if os(iOS)

apple/OmnivoreKit/Sources/Utils/ColorUtils.swift

@@ -68,20 +68,63 @@ public extension Color {
     )
   }
 
+  // TODO: remove this?
   var isDark: Bool {
+    guard let lum = luminance else { return false }
+    return lum < 0.50
+  }
+
+  var luminance: Float? {
     #if os(iOS)
       guard let components = UIColor(self).cgColor.components, components.count >= 3 else {
-        return false
+        return nil
       }
     #endif
 
     #if os(macOS)
       guard let components = NSColor(self).cgColor.components, components.count >= 3 else {
-        return false
+        return nil
       }
     #endif
 
-    let lum = 0.2126 * Float(components[0]) + 0.7152 * Float(components[1]) + 0.0722 * Float(components[2])
-    return lum < 0.50
+    return 0.2126 * Float(components[0]) + 0.7152 * Float(components[1]) + 0.0722 * Float(components[2])
+  }
+
+  static var isDarkMode: Bool {
+    #if os(iOS)
+      UITraitCollection.current.userInterfaceStyle == .dark
+    #else
+      NSApp.effectiveAppearance.name == NSAppearance.Name.darkAqua
+    #endif
+  }
+
+  static func lighten(color: Color, by percentage: CGFloat) -> Color {
+    if let lightenedUIColor = UIColor(color).adjust(by: abs(percentage)) {
+      return Color(lightenedUIColor)
+    } else {
+      return color
+    }
+  }
+}
+
+extension UIColor {
+  func lighter(by percentage: CGFloat = 30.0) -> UIColor? {
+    adjust(by: abs(percentage))
+  }
+
+  func darker(by percentage: CGFloat = 30.0) -> UIColor? {
+    adjust(by: -1 * abs(percentage))
+  }
+
+  func adjust(by percentage: CGFloat = 30.0) -> UIColor? {
+    var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
+    if getRed(&red, green: &green, blue: &blue, alpha: &alpha) {
+      return UIColor(red: min(red + percentage / 100, 1.0),
+                     green: min(green + percentage / 100, 1.0),
+                     blue: min(blue + percentage / 100, 1.0),
+                     alpha: alpha)
+    } else {
+      return nil
+    }
   }
 }

apple/OmnivoreKit/Sources/Views/Fonts.swift

@@ -54,6 +54,11 @@ public extension Font {
     .customFont(InterFont.regular.rawValue, size: 12, relativeTo: .caption)
   }
 
+  /// 12pt, Inter-Regular
+  static var appCaptionBold: Font {
+    .customFont(InterFont.bold.rawValue, size: 12, relativeTo: .caption)
+  }
+
   /// 11pt, Inter-Regular
   static var appCaptionTwo: Font {
     Font.custom(InterFont.regular.rawValue, size: 11, relativeTo: .caption2)

apple/OmnivoreKit/Sources/Views/TextChip.swift

@@ -3,6 +3,8 @@ import SwiftUI
 import Utils
 
 public struct TextChip: View {
+  @Environment(\.colorScheme) var colorScheme
+
   public init(text: String, color: Color, negated: Bool = false) {
     self.text = text
     self.color = color
@@ -22,7 +24,32 @@ public struct TextChip: View {
   let negated: Bool
 
   var textColor: Color {
-    color.isDark ? .white : .black
+    guard let luminance = color.luminance else {
+      return .white
+    }
+
+    if colorScheme == .light {
+      return luminance > 0.5 ? .black : .white
+    }
+
+    if luminance > 0.2 {
+      return color
+    }
+
+    // lighten the color by 20%
+    return Color.lighten(color: color, by: 20)
+  }
+
+  var backgroundColor: Color {
+    color.opacity(colorScheme == .dark ? 0.08 : 1)
+  }
+
+  var borderColor: Color {
+    if colorScheme == .dark {
+      return textColor
+    } else {
+      return color.opacity(0.7)
+    }
   }
 
   public var body: some View {
@@ -30,10 +57,12 @@ public struct TextChip: View {
       .strikethrough(color: negated ? textColor : .clear)
       .padding(.horizontal, 10)
       .padding(.vertical, 5)
-      .font(.appFootnote)
+      .font(.appCaptionBold)
       .foregroundColor(textColor)
       .lineLimit(1)
-      .background(Capsule().fill(color))
+      .background(Capsule().fill(backgroundColor))
+      .overlay(Capsule().stroke(borderColor, lineWidth: 1))
+      .padding(1)
   }
 }
 

apple/OmnivoreKit/Sources/Views/Web/BasicWebAppView.swift

@@ -19,7 +19,7 @@ import WebKit
       webView.isOpaque = false
       webView.backgroundColor = UIColor.clear
       if let url = request.url {
-        let themeID = UITraitCollection.current.userInterfaceStyle == .dark ? "Gray" : "LightGray"
+        let themeID = Color.isDarkMode ? "Gray" : "LightGray"
         webView.injectCookie(cookieString: "theme=\(themeID); Max-Age=31536000;", url: url)
       }
       return webView