Use app foreground color for focus outline button color so there's no hue collision (#4894)

Towards #4851

public/kcl-samples-manifest-fallback.json

@@ -84,6 +84,11 @@
     "title": "Hex nut",
     "description": "A hex nut is a type of fastener with a threaded hole and a hexagonal outer shape, used in a wide variety of applications to secure parts together. The hexagonal shape allows for a greater torque to be applied with wrenches or tools, making it one of the most common nut types in hardware."
   },
+  {
+    "file": "i-beam.kcl",
+    "title": "I-beam",
+    "description": "A structural metal beam with an I shaped cross section. Often used in construction"
+  },
   {
     "file": "kitt.kcl",
     "title": "Kitt",

src/components/CommandBar/CommandBarHeader.tsx

@@ -194,7 +194,7 @@ function ReviewingButton() {
       autoFocus
       type="submit"
       form="review-form"
-      className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
+      className="w-fit !p-0 rounded-sm hover:shadow"
       iconStart={{
         icon: 'checkmark',
         bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
@@ -212,7 +212,7 @@ function GatheringArgsButton() {
       Element="button"
       type="submit"
       form="arg-form"
-      className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
+      className="w-fit !p-0 rounded-sm hover:shadow"
       iconStart={{
         icon: 'arrowRight',
         bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',

src/components/ProjectSidebarMenu.tsx

@@ -210,7 +210,7 @@ function ProjectMenuPopover({
   return (
     <Popover className="relative">
       <Popover.Button
-        className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary dark:hover:bg-chalkboard-90"
+        className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center  focus-visible:outline-appForeground dark:hover:bg-chalkboard-90"
         data-testid="project-sidebar-toggle"
       >
         <div className="flex flex-col items-start py-0.5">

src/components/UserSidebarMenu.tsx

@@ -168,7 +168,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
   return (
     <Popover className="relative">
       <Popover.Button
-        className="relative group border-0 w-fit min-w-max p-0 rounded-l-full focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        className="relative group border-0 w-fit min-w-max p-0 rounded-l-full focus-visible:outline-appForeground"
         data-testid="user-sidebar-toggle"
       >
         <div className="flex items-center">
@@ -240,7 +240,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                     <li key={id} className="contents">
                       <ActionButton
                         {...rest}
-                        className="!font-sans flex items-center gap-2 rounded-sm py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none text-left"
+                        className="!font-sans flex items-center gap-2 rounded-sm py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 !border-none text-left focus-visible:outline-appForeground"
                         onMouseUp={() => {
                           close()
                         }}

src/index.css

@@ -85,7 +85,8 @@ textarea,
 }
 
 button {
-  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs focus-visible:ring-primary;
+  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
+  @apply focus-visible:outline-chalkboard-100;
 }
 
 button:hover {
@@ -93,7 +94,7 @@ button:hover {
 }
 
 .dark button {
-  @apply border-chalkboard-70 focus-visible:ring-primary/50;
+  @apply border-chalkboard-70 focus-visible:outline-chalkboard-10;
 }
 
 .dark button:hover {
@@ -319,6 +320,11 @@ code {
   button.reset:hover {
     @apply bg-transparent border-transparent;
   }
+
+  /* Add an outline that matches the app foreground (or text) color */
+  .outline-appForeground {
+    @apply outline-chalkboard-100 dark:outline-chalkboard-10;
+  }
 }
 
 #code-mirror-override .cm-scroller,