Add local `outline-on-keyboard-focus` and remove shared utility styles

The only remaining utility styles used from the shared package were
these styles pertaining to focus outlines. Reimplement them locally
temporarily and remove the utility styles from `sidebar` CSS. This
reduces the length of the output CSS file by ~20% as there aren't a
slew of unused utility classes.

src/sidebar/components/Menu.js

@@ -174,7 +174,7 @@ export default function Menu({
         aria-expanded={isOpen ? 'true' : 'false'}
         aria-haspopup={true}
         className={classnames(
-          'hyp-u-outline-on-keyboard-focus',
+          'u-outline-on-keyboard-focus',
           'flex items-center justify-center rounded-sm transition-colors',
           {
             'text-grey-7 hover:text-grey-9': !isOpen,
@@ -215,7 +215,7 @@ export default function Menu({
           />
           <div
             className={classnames(
-              'hyp-u-outline-on-keyboard-focus',
+              'u-outline-on-keyboard-focus',
               // Position menu content near bottom of menu label/toggle control
               'absolute top-[calc(100%+5px)] z-1 border shadow',
               'bg-white text-lg',

src/sidebar/components/MenuItem.js

@@ -227,7 +227,7 @@ export default function MenuItem({
   );
 
   const wrapperClasses = classnames(
-    'hyp-u-outline-on-keyboard-focus--inset',
+    'u-outline-on-keyboard-focus--inset',
     'w-full min-w-[150px] flex items-center select-none',
     'border-b',
     // Set this container as a "group" so that children may style based on its

src/sidebar/components/TagListItem.js

@@ -51,7 +51,7 @@ export default function TagListItem({ href, onRemoveTag, tag }) {
             'text-grey-6 hover:text-color-text hover:bg-grey-2',
             // Emulates transitions on *Button shared component styling
             'transition-colors duration-200',
-            'hyp-u-outline-on-keyboard-focus--inset'
+            'u-outline-on-keyboard-focus--inset'
           )}
           onClick={() => {
             onRemoveTag(tag);

src/styles/sidebar/_utilities.scss

-@use '@hypothesis/frontend-shared/styles/util';
-
 @use 'tailwindcss/utilities';
+
+// This is a temporary local implementation of `.hyp-u-outline-on-keyboard-focus`
+// and `.hyp-u-outline-on-keyboard-focus--inset`. These are the last remaining
+// utilities used by this application, so implementing them here allows us to
+// remove the `frontend-shared` utility styles from the `sidebar` CSS.
+// TODO: This should be re-implemented as a Tailwind plugin in `frontend-shared`
+.u-outline-on-keyboard-focus:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #59a7e8;
+}
+.js-focus-visible .u-outline-on-keyboard-focus:focus:not(.focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.u-outline-on-keyboard-focus:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.u-outline-on-keyboard-focus--inset:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #59a7e8 inset;
+}
+.js-focus-visible
+  .u-outline-on-keyboard-focus--inset:focus:not(.focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+.u-outline-on-keyboard-focus--inset:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}