From 32c6e080e2ab9c7789e660ea7f666f89c0235a90 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 15 Nov 2024 15:17:47 -0500
Subject: [PATCH] fix(protocol-designer): add Pseudo-classes to liquid button
 (#16800)

* fix(protocol-designer): add Pseudo-classes to liquid button
---
 components/src/atoms/ToggleGroup/index.tsx    |  3 ++-
 .../organisms/ProtocolNavBar/LiquidButton.tsx | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/src/atoms/ToggleGroup/index.tsx b/components/src/atoms/ToggleGroup/index.tsx
index 8d085574a18..99a5b24f73b 100644
--- a/components/src/atoms/ToggleGroup/index.tsx
+++ b/components/src/atoms/ToggleGroup/index.tsx
@@ -81,10 +81,11 @@ const ACTIVE_STYLE = css`
   background-color: ${COLORS.blue50};
   color: ${COLORS.white};
   pointer-events: none;
+  border: 1px ${COLORS.blue50} solid;
 `
 
 const DEFAULT_STYLE = css`
   background-color: ${COLORS.white};
   color: ${COLORS.black90};
-  outline: 1px ${COLORS.grey30} solid;
+  border: 1px ${COLORS.grey30} solid;
 `
diff --git a/protocol-designer/src/organisms/ProtocolNavBar/LiquidButton.tsx b/protocol-designer/src/organisms/ProtocolNavBar/LiquidButton.tsx
index 2ebd74a3ae4..58a6641aff8 100644
--- a/protocol-designer/src/organisms/ProtocolNavBar/LiquidButton.tsx
+++ b/protocol-designer/src/organisms/ProtocolNavBar/LiquidButton.tsx
@@ -40,4 +40,23 @@ const LIQUID_BUTTON_STYLE = css`
   align-items: ${ALIGN_CENTER};
   border-radius: ${BORDERS.borderRadius8};
   background-color: ${COLORS.grey30};
+
+  &:focus-visible {
+    outline-offset: 3px;
+    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+  }
+
+  &:active {
+    background-color: ${COLORS.grey40};
+  }
+
+  &:hover {
+    box-shadow: 0 0 0;
+    background-color: ${COLORS.grey35};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+  }
 `