From 92f8a5f4a2b3c0443b5c34c76d0435b026ce221a Mon Sep 17 00:00:00 2001
From: Lukas Kalbertodt <lukas.kalbertodt@gmail.com>
Date: Tue, 1 Aug 2023 19:44:54 +0200
Subject: [PATCH] Improve focus outline in a few places

---
 src/layout/header.tsx            |  3 +--
 src/steps/review/control-box.tsx |  6 ++++--
 src/util/index.tsx               | 12 ++++++++++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/layout/header.tsx b/src/layout/header.tsx
index c92a6f39..e8c7ef87 100644
--- a/src/layout/header.tsx
+++ b/src/layout/header.tsx
@@ -195,8 +195,7 @@ const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(
           outline: `2px solid ${COLORS.neutral50}`,
           backgroundColor: isLight ? COLORS.neutral70 : COLORS.neutral10,
         },
-        "--color-focus": isLight ? COLORS.neutral10 : COLORS.neutral90,
-        ...focusStyle(),
+        ...focusStyle({}, isLight ? COLORS.neutral10 : COLORS.accent8),
 
         "> svg": {
           fontSize: 22,
diff --git a/src/steps/review/control-box.tsx b/src/steps/review/control-box.tsx
index 36003af6..20b44bed 100644
--- a/src/steps/review/control-box.tsx
+++ b/src/steps/review/control-box.tsx
@@ -7,7 +7,7 @@ import { useStudioState, useDispatch, Dispatcher } from "../../studio-state";
 import { useSettings } from "../../settings";
 import CutHereIcon from "./cut-here-icon.svg";
 import CutMarkerIcon from "./cut-marker.svg";
-import { COLORS } from "../../util";
+import { COLORS, focusStyle } from "../../util";
 import { ALMOST_ZERO } from ".";
 import { PreviewHandle } from "./preview";
 import { SHORTCUTS, ShortcutKeys, useShortcut, useShowAvailableShortcuts } from "../../shortcuts";
@@ -389,7 +389,8 @@ const Controls: React.FC<SharedProps> = ({ currentTime, previewController }) =>
             justifyContent: "center",
             alignItems: "center",
             fontSize: 24,
-            "&:hover": {
+            ...focusStyle({ offset: 1 }),
+            "&:hover, :focus-visible": {
               backgroundColor: COLORS.accent8,
             },
           }}
@@ -504,6 +505,7 @@ const CutControls: React.FC<CutControlsProps> = (
           padding: "4px 8px",
           paddingTop: 4,
           borderRadius: 4,
+          ...focusStyle(),
           "&:disabled": {
             opacity: 0.3,
           },
diff --git a/src/util/index.tsx b/src/util/index.tsx
index e1c5159f..dd127107 100644
--- a/src/util/index.tsx
+++ b/src/util/index.tsx
@@ -13,8 +13,16 @@ export const COLORS = APPKIT_CONFIG.colors;
 /** Breakpoint values */
 export const BREAKPOINTS = APPKIT_CONFIG.breakpoints;
 
-export const focusStyle = (options?: Parameters<typeof appkitFocusStyle>[1]) =>
-  appkitFocusStyle(APPKIT_CONFIG, options);
+export const focusStyle = (options?: Parameters<typeof appkitFocusStyle>[1], color?: string) => {
+  let config = APPKIT_CONFIG;
+  if (color) {
+    config = {
+      colors: { ...APPKIT_CONFIG.colors, focus: color },
+      breakpoints: APPKIT_CONFIG.breakpoints,
+    };
+  }
+  return appkitFocusStyle(config, options);
+};
 
 /**
  * Checks if we app is running on a mobile device.