From 369c5a44981f094b49a2bcb817cc050b8f5fb05f Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 22 May 2026 17:28:58 +0700
Subject: [PATCH] fix(app): show shortcut chord badges in light mode

The Shortcut component computed its colors with a hex-only opacity
helper that received unistyles' CSS-var theme strings on web (e.g.
"var(--colors-foreground)"), fell through both regex branches, and
returned the rgba(255,255,255,...) fallback. Badges and chord text
rendered as near-white on white, so the keyboard shortcuts settings
page looked blank. Use the existing surface2 and foregroundMuted
tokens directly, which work in both themes without per-platform
color math.
---
 packages/app/src/components/ui/shortcut.tsx | 23 +++------------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/packages/app/src/components/ui/shortcut.tsx b/packages/app/src/components/ui/shortcut.tsx
index 0f5be29fe..30a2efc73 100644
--- a/packages/app/src/components/ui/shortcut.tsx
+++ b/packages/app/src/components/ui/shortcut.tsx
@@ -1,26 +1,9 @@
-import React, { useMemo, type ReactElement } from "react";
+import { useMemo, type ReactElement } from "react";
 import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { StyleSheet } from "react-native-unistyles";
 import { formatShortcut, type ShortcutKey } from "@/utils/format-shortcut";
 import { getShortcutOs } from "@/utils/shortcut-platform";
 
-function colorWithOpacity(color: string, opacity: number): string {
-  const hex = color.trim();
-  if (/^#[0-9a-fA-F]{3}$/.test(hex)) {
-    const r = Number.parseInt(hex[1] + hex[1], 16);
-    const g = Number.parseInt(hex[2] + hex[2], 16);
-    const b = Number.parseInt(hex[3] + hex[3], 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  }
-  if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
-    const r = Number.parseInt(hex.slice(1, 3), 16);
-    const g = Number.parseInt(hex.slice(3, 5), 16);
-    const b = Number.parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  }
-  return `rgba(255, 255, 255, ${opacity})`;
-}
-
 export function Shortcut({
   keys,
   chord,
@@ -70,7 +53,7 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[1],
     paddingVertical: 2,
     borderRadius: theme.borderRadius.md,
-    backgroundColor: colorWithOpacity(theme.colors.foreground, 0.05),
+    backgroundColor: theme.colors.surface2,
     borderWidth: 0,
   },
   sequence: {
@@ -82,6 +65,6 @@ const styles = StyleSheet.create((theme) => ({
   text: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: colorWithOpacity(theme.colors.foreground, 0.6),
+    color: theme.colors.foregroundMuted,
   },
 }));