From 0c6f7566c6bfd4bfaa1fb13ffc5f2ab66107b079 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 7 May 2025 12:28:22 -0500
Subject: [PATCH] Adjust selection color to feel more terminal-y

---
 app/assets/stylesheets/terminals.css | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index 98fa83dd3..c854106f3 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -36,17 +36,22 @@
   }
 
   .terminal__button {
+    --btn-background: var(--color-terminal-bg);
     --btn-color: var(--color-terminal-text);
-    --btn-border-radius: 1em;
+    --btn-border-radius: 0;
     --btn-border-color: var(--color-terminal-text);
     --btn-padding: 0.1em 0.7em;
     --btn-border-size: 1px;
     --hover-color: var(--color-terminal-text);
-    --hover-size: 2px;
+    --hover-size: 1px;
 
     font-family: var(--font-mono);
     font-size: var(--text-x-small);
     white-space: nowrap;
+
+    &:where(:not(:active)):focus-visible {
+      outline: 2px solid var(--color-terminal-text);
+    }
   }
 
   .terminal__command {
@@ -54,6 +59,7 @@
     --btn-color: var(--color-terminal-text);
 
     font-weight: normal;
+    transition: unset;
   }
 
   .terminal__menu {
@@ -66,10 +72,21 @@
   }
 
   .terminal__item {
+    &:where(:not(:active)):focus-visible {
+      --btn-color: var(--color-terminal-bg);
+
+      background: var(--color-terminal-text);
+      color: var(--color-terminal-bg);
+      outline: 2px solid var(--color-terminal-text);
+
+      .terminal__command {
+        color: var(--color-terminal-bg);
+      }
+    }
+
     @media (any-hover: hover) {
-      &:where(:not(:active):hover),
-      &:where(:not(:active)):focus-visible {
-        background: color-mix(in srgb, var(--color-terminal-text) 15%, var(--color-terminal-bg));
+      &:where(:not(:active):hover) {
+        background: color-mix(in srgb, var(--color-terminal-text) 20%, var(--color-terminal-bg));
       }
     }
   }