toolbar/ActionButton: improve focus ring visibility

Since the button and the focus ring are both blue, we need a gap in
order to have enough contrast to see the focus ring.

src/toolbar/ActionButton.tsx

@@ -110,7 +110,10 @@ const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
                     aria-label={label}
                     elementRef={tooltipTargetRef as React.Ref<HTMLButtonElement>}
                     {...mergeProps(tooltipTargetProps, {
-                        className: classNames(enabled === false && Classes.DISABLED),
+                        className: classNames(
+                            'pb-toolbar-action-button',
+                            enabled === false && Classes.DISABLED,
+                        ),
                     })}
                     intent={Intent.PRIMARY}
                     onClick={handleClick}

src/toolbar/toolbar.scss

@@ -19,18 +19,24 @@
             padding: 5px;
         }
     }
-}
 
-.pb-toolbar * {
-    box-shadow: unset !important;
-}
-
-.pb-toolbar-group {
-    &.pb-align-left {
-        margin-right: bp.$pt-grid-size * 2;
+    // override blueprint.js style
+    & * {
+        box-shadow: unset !important;
     }
 
-    &.pb-align-right {
-        margin-left: auto;
+    &-group {
+        &.pb-align-left {
+            margin-right: bp.$pt-grid-size * 2;
+        }
+
+        &.pb-align-right {
+            margin-left: auto;
+        }
+    }
+
+    &-action-button:focus-visible:not(.pb-focus-managed) {
+        // to get contrast since button background and focus ring are both blue
+        outline-offset: 4px;
     }
 }