fix(protocol-designer): add Pseudo-classes to liquid button (#16800)

* fix(protocol-designer): add Pseudo-classes to liquid button
Opentrons · Nov 15, 2024 · 32c6e08 · 32c6e08
1 parent 26d0198
commit 32c6e08
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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};
+  }
 `