adapt dark transparent spotlight background

Author: eagleoflqj

keyboard/KeyboardViewController.swift

@@ -57,6 +57,11 @@ class KeyboardViewController: UIInputViewController, FcitxProtocol {
     addChild(hostingController)
 
     hostingController.view.translatesAutoresizingMaskIntoConstraints = false
+
+    // Spotlight shows that system keyboard has transparent background.
+    hostingController.view.backgroundColor = .clear
+    view.backgroundColor = .clear
+
     view.addSubview(hostingController.view)
 
     NSLayoutConstraint.activate([

uipanel/CMakeLists.txt

@@ -1,9 +1,11 @@
 add_library(KeyboardUI STATIC
     keyboardui.swift
     VirtualKeyboard.swift
+    Color.swift
     ContextMenu.swift
     Key.swift
     Bubble.swift
+    Shadow.swift
     KeyModifier.swift
     Keyboard.swift
     Candidate.swift

uipanel/Color.swift

@@ -0,0 +1,29 @@
+import SwiftUI
+
+extension Color {
+  private func toRGBA() -> (r: CGFloat, g: CGFloat, b: CGFloat, a: CGFloat)? {
+    let nativeColor = UIColor(self)
+    var r: CGFloat = 0
+    var g: CGFloat = 0
+    var b: CGFloat = 0
+    var a: CGFloat = 0
+    guard nativeColor.getRed(&r, green: &g, blue: &b, alpha: &a) else {
+      return nil
+    }
+    return (r, g, b, a)
+  }
+
+  func blend(with background: Color) -> Color {
+    guard let fg = self.toRGBA(),
+      let bg = background.toRGBA()
+    else {
+      return self
+    }
+
+    let r = (fg.r * fg.a + bg.r * (1 - fg.a))
+    let g = (fg.g * fg.a + bg.g * (1 - fg.a))
+    let b = (fg.b * fg.a + bg.b * (1 - fg.a))
+
+    return Color(.sRGB, red: r, green: g, blue: b, opacity: 1)
+  }
+}

uipanel/ContextMenu.swift

@@ -1,5 +1,9 @@
 import SwiftUI
 
+func getBackground(_ colorScheme: ColorScheme) -> Color {
+  return colorScheme == .dark ? darkBackground : lightBackground
+}
+
 struct MenuItem: Identifiable {
   let id = UUID()
   let text: String
@@ -39,17 +43,20 @@ struct ContextMenuOverlay: View {
           }
         }
       }
+
+      let background = getNormalBackground(colorScheme).blend(with: getBackground(colorScheme))
+
       // If we wrap with ScrollView when not needed, the height will be extended.
       if hasScroll {
         ScrollView {
-          menu.background(getNormalBackground(colorScheme))
+          menu.background(background)
         }.cornerRadius(8)
           .shadow(radius: 4)
           .position(adjustedPosition)
       } else {
         menu.background(
           GeometryReader { geometry in
-            getNormalBackground(colorScheme)
+            background
               .onAppear {
                 menuSize = geometry.size
                 adjustedPosition = adjustPosition()

uipanel/KeyModifier.swift

@@ -20,10 +20,12 @@ private func getSwipeDirection(_ dx: CGFloat, _ dy: CGFloat) -> SwipeDirection {
 }
 
 private func clearBubble() {
-  virtualKeyboardView.setBubble(0, 0, 0, 0, .clear, .clear, nil)
+  virtualKeyboardView.setBubble(0, 0, 0, 0, .clear, .light, .clear, nil)
 }
 
 struct KeyModifier: ViewModifier {
+  @Environment(\.colorScheme) var colorScheme
+
   let threshold: CGFloat = 30
   let stepSize: CGFloat = 15
 
@@ -60,11 +62,14 @@ struct KeyModifier: ViewModifier {
       } else {
         content
       }
-    }.frame(width: width - hMargin, height: height - rowGap)
+    }.frame(width: width - hMargin, height: height - vMargin)
       .background(isPressed ? pressedBackground : background)
       .cornerRadius(radius)
       .foregroundColor(isPressed ? pressedForeground : foreground)
-      .shadow(color: shadow, radius: 0, x: 0, y: 1)
+      .overlay(
+        ShadowView(width: width - hMargin, height: 1, radius: radius, color: shadow)
+          .offset(y: (height - vMargin - radius + 1) / 2)
+      )
       .condition(topRight != nil) {
         $0.overlay(
           // padding right so that / doesn't overflow
@@ -89,7 +94,9 @@ struct KeyModifier: ViewModifier {
               lastLocation = value.startLocation.x
 
               virtualKeyboardView.setBubble(
-                bubbleX, bubbleY, bubbleWidth, bubbleHeight, background, shadow, bubbleLabel)
+                bubbleX, bubbleY, bubbleWidth, bubbleHeight,
+                background, colorScheme, shadow,
+                bubbleLabel)
 
               // Schedule long press that can be interrupted by move.
               DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
@@ -113,7 +120,8 @@ struct KeyModifier: ViewModifier {
                 }
                 if getSwipeDirection(dx, dy) == .up {
                   virtualKeyboardView.setBubble(
-                    bubbleX, bubbleY, bubbleWidth, bubbleHeight, background, shadow, swipeUpLabel)
+                    bubbleX, bubbleY, bubbleWidth, bubbleHeight, background, colorScheme,
+                    shadow, swipeUpLabel)
                 } else {
                   clearBubble()
                 }

uipanel/Shadow.swift

@@ -0,0 +1,62 @@
+import SwiftUI
+
+// |\_______/|
+// |         |
+//  \_______/
+
+// Put it below a key that needs shadow.
+// Needed because .shadow affects the entire button's transparency.
+
+struct ShadowShape: Shape {
+  let r: CGFloat
+
+  func path(in rect: CGRect) -> Path {
+    var path = Path()
+    let w = rect.width
+    let h = rect.height
+
+    path.move(to: CGPoint(x: 0, y: h - r))
+    path.addArc(
+      center: CGPoint(x: r, y: h - r),
+      radius: r,
+      startAngle: .degrees(180),
+      endAngle: .degrees(90),
+      clockwise: true)
+    path.addLine(to: CGPoint(x: w - r, y: h))
+    path.addArc(
+      center: CGPoint(x: w - r, y: h - r),
+      radius: r,
+      startAngle: .degrees(90),
+      endAngle: .degrees(0),
+      clockwise: true)
+    path.addLine(to: CGPoint(x: w, y: 0))
+    path.addArc(
+      center: CGPoint(x: w - r, y: 0),
+      radius: r,
+      startAngle: .degrees(0),
+      endAngle: .degrees(90),
+      clockwise: false)
+    path.addLine(to: CGPoint(x: r, y: r))
+    path.addArc(
+      center: CGPoint(x: r, y: 0),
+      radius: r,
+      startAngle: .degrees(90),
+      endAngle: .degrees(180),
+      clockwise: false)
+    path.closeSubpath()
+    return path
+  }
+}
+
+struct ShadowView: View {
+  let width: CGFloat
+  let height: CGFloat
+  let radius: CGFloat
+  let color: Color
+
+  var body: some View {
+    ShadowShape(r: radius)
+      .fill(color)
+      .frame(width: width, height: height + radius)
+  }
+}

uipanel/VirtualKeyboard.swift

@@ -52,7 +52,6 @@ class ViewModel: ObservableObject {
 }
 
 public struct VirtualKeyboardView: View {
-  @Environment(\.colorScheme) var colorScheme
   @ObservedObject var viewModel = ViewModel()
 
   public var body: some View {
@@ -97,7 +96,7 @@ public struct VirtualKeyboardView: View {
               bubbleShadow: viewModel.bubbleShadow,
               bubbleLabel: viewModel.bubbleLabel)
           }
-        }.background(colorScheme == .dark ? darkBackground : lightBackground)
+        }.background(transparent)  // .clear will make gaps between candidates not scrollable.
         if viewModel.showMenu {
           ContextMenuOverlay(
             items: viewModel.menuItems,
@@ -228,13 +227,15 @@ public struct VirtualKeyboardView: View {
 
   func setBubble(
     _ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat, _ background: Color,
-    _ shadow: Color, _ label: String?
+    _ colorScheme: ColorScheme, _ shadow: Color, _ label: String?
   ) {
     viewModel.bubbleX = x
     viewModel.bubbleY = y
     viewModel.bubbleWidth = width
     viewModel.bubbleHeight = height
-    viewModel.bubbleBackground = background
+    // This only guarantees same color with key when system background is pure
+    // white/dark or key is opaque. In Spotlight, color discrepancy is expected.
+    viewModel.bubbleBackground = background.blend(with: getBackground(colorScheme))
     viewModel.bubbleShadow = shadow
     viewModel.bubbleLabel = label
   }

uipanel/ui.swift

@@ -13,6 +13,8 @@ let candidateHorizontalPadding: CGFloat = 10
 let candidateVerticalPadding: CGFloat = 4
 let candidateGap: CGFloat = 4
 
+let transparent = Color.black.opacity(0.001)
+
 let lightBackground = Color(
   .sRGB, red: 210 / 255.0, green: 212 / 255.0, blue: 218 / 255.0, opacity: 1)
 let lightNormalBackground = Color.white
@@ -24,13 +26,16 @@ let lightHighlightBackground = Color(
 
 let darkBackground = Color(
   .sRGB, red: 43 / 255.0, green: 43 / 255.0, blue: 43 / 255.0, opacity: 1)
+// Get 107, 107, 107 when blending with darkBackground.
 let darkNormalBackground = Color(
-  .sRGB, red: 107 / 255.0, green: 107 / 255.0, blue: 107 / 255.0, opacity: 1)
+  .sRGB, red: 1.0, green: 1.0, blue: 1.0, opacity: 0.3)
+// Get 70, 70, 70 when blending with darkBackground.
 let darkFunctionBackground = Color(
-  .sRGB, red: 70 / 255.0, green: 70 / 255.0, blue: 70 / 255.0, opacity: 1)
-let darkShadow = Color(.sRGB, red: 37 / 255.0, green: 37 / 255.0, blue: 37 / 255.0, opacity: 1)
+  .sRGB, red: 133 / 255.0, green: 133 / 255.0, blue: 133 / 255.0, opacity: 0.3)
+let darkShadow = Color(.sRGB, red: 16 / 255.0, green: 13 / 255.0, blue: 14 / 255.0, opacity: 0.3)
+// Get 67, 67, 70 when blending with darkBackground.
 let darkHighlightBackground = Color(
-  .sRGB, red: 67 / 255.0, green: 67 / 255.0, blue: 70 / 255.0, opacity: 1)
+  .sRGB, red: 123 / 255.0, green: 123 / 255.0, blue: 133 / 255.0, opacity: 0.3)
 
 let disabledForeground = Color.gray
 let highlightForeground = Color.white