Extract and convert styles for annotator sidebar container

Transition styling for the sidebar frame and its container to
tailwind. Rename some classes for clarity:

* `div.annotator-frame` -> `div.sidebar-container` as this is not a
   frame, and it contains the sidebar frame inside it
* `iframe.h-sidebar-iframe` -> `iframe.sidebar-frame`

src/annotator/sidebar.js

@@ -45,7 +45,7 @@ function createSidebarIframe(config) {
 
   sidebarFrame.src = sidebarAppSrc;
   sidebarFrame.title = 'Hypothesis annotation viewer';
-  sidebarFrame.className = 'h-sidebar-iframe';
+  sidebarFrame.className = 'sidebar-frame';
 
   return sidebarFrame;
 }
@@ -106,10 +106,10 @@ export class Sidebar {
     } else {
       this.iframeContainer = document.createElement('div');
       this.iframeContainer.style.display = 'none';
-      this.iframeContainer.className = 'annotator-frame';
+      this.iframeContainer.className = 'sidebar-container';
 
       if (config.theme === 'clean') {
-        this.iframeContainer.classList.add('annotator-frame--theme-clean');
+        this.iframeContainer.classList.add('theme-clean');
       } else {
         this.bucketBar = new BucketBar(this.iframeContainer, {
           onFocusAnnotations: tags =>

src/annotator/test/sidebar-test.js

@@ -190,11 +190,7 @@ describe('Sidebar', () => {
 
     it('applies a style if theme is configured as "clean"', () => {
       const sidebar = createSidebar({ theme: 'clean' });
-      assert.isTrue(
-        sidebar.iframeContainer.classList.contains(
-          'annotator-frame--theme-clean'
-        )
-      );
+      assert.isTrue(sidebar.iframeContainer.classList.contains('theme-clean'));
     });
 
     it('becomes visible when the sidebar application has loaded', async () => {

src/styles/annotator/annotator.scss

@@ -3,108 +3,11 @@
 // which do not use shadow roots go in other bundles (eg. highlights.css,
 // pdfjs-overrides.scss).
 
-@use 'sass:meta';
-@use 'sass:color' as color;
-
-@use '../variables' as var;
-
 @use './base';
-
 @use './components';
-
 @use './utilities';
 
 // Styles for all top-level elements in shadow roots.
 :host > * {
-  font-family: var.$sans-font-family;
-}
-
-// Sidebar
-.annotator-frame {
-  // frame styles
-  position: fixed;
-  top: 0;
-  left: 100%;
-  height: 100%;
-  z-index: 2147483647;
-  direction: ltr;
-  font-size: var.$annotator-adder-font-size;
-  line-height: var.$annotator-base-line-height;
-
-  user-select: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-
-  &.is-hidden {
-    visibility: hidden;
-    transition: visibility var.$annotator-timing--sidebar-collapse-transition;
-  }
-
-  &.annotator-collapsed {
-    margin-left: 0;
-
-    .h-sidebar-iframe {
-      // Add a transition when collapsing only. This serves to delay
-      // the effect until the sidebar finishes closing. Visibility is
-      // a boolean value and can not actually animate.
-      transition: visibility var.$annotator-timing--sidebar-collapse-transition;
-      visibility: hidden;
-    }
-  }
-
-  .h-sidebar-iframe {
-    border: none;
-    height: 100%;
-    width: 100%;
-    z-index: 3;
-    position: relative;
-  }
-}
-
-// this disables the width transition for the sidebar when
-// it is manually resized by dragging
-.annotator-no-transition {
-  transition: none !important;
-}
-
-/** Affordances for clean theme */
-#{var.$annotator--theme-clean} {
-  box-shadow: var.$annotator-shadow--sidebar;
-}
-
-/*
-  Mobile layout
-  240-479 px
-*/
-
-@media screen and (min-width: 15em) {
-  .annotator-frame {
-    width: 90%;
-    margin-left: -90%;
-  }
-}
-
-/*
-  Wide mobile layout
-  480-599 px
-*/
-
-@media screen and (min-width: 30em) {
-  .annotator-frame {
-    width: 70%;
-    margin-left: -70%;
-  }
-}
-
-/*
-  Tablet layout
-  600-above px
-*/
-
-@media screen and (min-width: 37.5em) {
-  .annotator-frame {
-    transition: margin-left var.$annotator-timing--sidebar-collapse-transition
-      cubic-bezier(0.55, 0, 0.2, 0.8);
-    width: 428px;
-    margin-left: -428px;
-  }
+  @apply font-sans;
 }

src/styles/annotator/components/_index.scss

@@ -4,3 +4,4 @@
 // Annotator-specific components.
 @use './AdderToolbar';
 @use './Buckets';
+@use './sidebar';

src/styles/annotator/components/sidebar.scss

+/**
+ * Styles for the container and iframe containing the sidebar app. These
+ * classes are used by the `Sidebar` class (not a UI component).
+ */
+
+@layer utilities {
+  .sidebar-transition-visibility {
+    // This transition delays the visibility change to when
+    // collapsing the sidebar. This serves to delay
+    // the effect until the sidebar finishes closing. Visibility is
+    // a boolean value and can not actually animate.
+    @apply invisible transition-[visibility] duration-150;
+  }
+  .sidebar-transition-margin {
+    // This transition makes the sidebar slide in and off of the screen
+    // when opening or closing.
+    @apply transition-[margin-left] duration-150 ease-[cubic-bezier(0.55,0,0.2,0.8)];
+  }
+}
+
+@layer components {
+  .sidebar-container {
+    // Typically applied as an HTML attribute; there is no corresponding
+    // tailwind utility class
+    direction: ltr;
+
+    // Full height, fixed position all the way to the right (offscreen) to start
+    @apply fixed top-0 left-full h-full z-max select-none;
+
+    // Next, set different widths and left-margin positions for different
+    // breakpoints
+    @apply annotator-sm:w-[90%] annotator-sm:ml-[-90%];
+    @apply annotator-md:w-[70%] annotator-md:ml-[-70%];
+    @apply annotator-lg:w-[428px] annotator-lg:ml-[-428px];
+
+    // Wider screens: apply transition when opening/closing of the sidebar
+    @apply annotator-lg:sidebar-transition-margin;
+
+    &.is-hidden {
+      @apply sidebar-transition-visibility;
+    }
+
+    // We can't use `theme-clean:` or `sidebar-collapsed:` tailwind modifiers
+    // here because this is the one place in the project where the relevant
+    // classes are assigned to the same element, not a parent element.
+    &.theme-clean {
+      @apply shadow-sidebar;
+    }
+
+    &.sidebar-collapsed {
+      @apply ml-0;
+    }
+  }
+
+  // The sidebar's iframe
+  .sidebar-frame {
+    @apply relative border-0 h-full w-full z-3;
+    @apply sidebar-collapsed:sidebar-transition-visibility;
+  }
+
+  // this disables the width transition for the sidebar when
+  // it is manually resized by dragging
+  .annotator-no-transition {
+    transition: none !important;
+  }
+}

tailwind.config.mjs

@@ -8,6 +8,8 @@ export default {
     './src/annotator/components/**/*.js',
     './dev-server/ui-playground/components/**/*.js',
     './node_modules/@hypothesis/frontend-shared/lib/**/*.js',
+    // This module references `sidebar-frame` and related classes
+    './src/annotator/sidebar.js',
   ],
   theme: {
     extend: {
@@ -84,9 +86,18 @@ export default {
           },
         },
       },
+      screens: {
+        // Narrow mobile screens
+        'annotator-sm': '240px',
+        // Wider mobile screens/small tablets
+        'annotator-md': '480px',
+        // Tablet and up
+        'annotator-lg': '600px',
+      },
       zIndex: {
         1: '1',
         2: '2',
+        3: '3',
         max: '2147483647',
       },
     },