From 03fac22c295f28c375ee35c2400be8f030d3eecb Mon Sep 17 00:00:00 2001 From: Satindar Dhillon Date: Thu, 21 Jul 2022 10:39:27 -0700 Subject: [PATCH] update text chip color scheme --- .../App/Views/WebReader/WebReader.swift | 10 +--- .../Sources/Utils/ColorUtils.swift | 51 +++++++++++++++++-- apple/OmnivoreKit/Sources/Views/Fonts.swift | 5 ++ .../OmnivoreKit/Sources/Views/TextChip.swift | 35 +++++++++++-- .../Sources/Views/Web/BasicWebAppView.swift | 2 +- 5 files changed, 86 insertions(+), 17 deletions(-) diff --git a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift b/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift index 52ddc2ef7..f30aab097 100644 --- a/apple/OmnivoreKit/Sources/App/Views/WebReader/WebReader.swift +++ b/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) diff --git a/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift b/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift index a676666c5..8ba7298a4 100644 --- a/apple/OmnivoreKit/Sources/Utils/ColorUtils.swift +++ b/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 + } } } diff --git a/apple/OmnivoreKit/Sources/Views/Fonts.swift b/apple/OmnivoreKit/Sources/Views/Fonts.swift index b1a1af3a9..bf32124e6 100644 --- a/apple/OmnivoreKit/Sources/Views/Fonts.swift +++ b/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) diff --git a/apple/OmnivoreKit/Sources/Views/TextChip.swift b/apple/OmnivoreKit/Sources/Views/TextChip.swift index 0c97765db..01320f242 100644 --- a/apple/OmnivoreKit/Sources/Views/TextChip.swift +++ b/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) } } diff --git a/apple/OmnivoreKit/Sources/Views/Web/BasicWebAppView.swift b/apple/OmnivoreKit/Sources/Views/Web/BasicWebAppView.swift index 7d9df8561..d74d9691f 100644 --- a/apple/OmnivoreKit/Sources/Views/Web/BasicWebAppView.swift +++ b/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