Make annotator component UI scale correctly to host page

Make certain annotator components — the adder toolbar popup, e.g. —
scale when the root font size of the underlying host page changes.

Make sure other annotator UI that is associated with the sidebar — the
toolbar and bucket bar — do NOT scale with text scaling.

All controls should scale with user/page zoom.

src/annotator/components/AdderToolbar.js

@@ -76,10 +76,10 @@ function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) {
         'transition-colors duration-200',
         'dim-item'
       )}
-      icon={icon}
       onClick={onClick}
       title={title}
     >
+      {icon && <Icon classes="text-annotator-lg" name={icon} title={title} />}
       {typeof badgeCount === 'number' && <NumberIcon badgeCount={badgeCount} />}
       <span className="font-normal">{label}</span>
     </LabeledButton>

src/annotator/components/Buckets.js

@@ -61,6 +61,10 @@ function BucketItem({ children, topPosition }) {
  * A list of buckets, including up and down navigation (when applicable) and
  * on-screen buckets
  *
+ * This component and its buttons are sized with absolute units such that they
+ * don't scale with changes to the host page's root font size. They will still
+ * properly scale with user/browser zooming.
+ *
  * @param {object} props
  *   @param {Bucket} props.above
  *   @param {Bucket} props.below

src/annotator/components/Toolbar.js

@@ -18,8 +18,9 @@ function ToolbarButton({ ...buttonProps }) {
     <IconButton
       className={classnames(
         'w-[30px] h-[30px]', // These buttons have precise dimensions
+        'rounded-px', // size of border radius in absolute units
         'flex items-center justify-center',
-        'border rounded bg-white text-grey-6 hover:text-grey-9 text-annotator-lg',
+        'border bg-white text-grey-6 hover:text-grey-9',
         'shadow transition-colors'
       )}
       icon={icon}
@@ -61,6 +62,10 @@ function ToolbarButton({ ...buttonProps }) {
  * Controls on the edge of the sidebar for opening/closing the sidebar,
  * controlling highlight visibility and creating new page notes.
  *
+ * This component and its buttons are sized with absolute units such that they
+ * don't scale with changes to the host page's root font size. They will still
+ * properly scale with user/browser zooming.
+ *
  * @param {ToolbarProps} props
  */
 export default function Toolbar({
@@ -75,7 +80,12 @@ export default function Toolbar({
   useMinimalControls = false,
 }) {
   return (
-    <div className="absolute left-[-33px] w-[33px] z-2">
+    <div
+      className={classnames(
+        'absolute left-[-33px] w-[33px] z-2',
+        'text-px-base leading-none' // non-scaling sizing
+      )}
+    >
       {/* In the clean theme (`useMinimalControls` is `true`),
           the only button that should appear is a button
           to close the sidebar, and only if the sidebar is open. This button is
@@ -84,9 +94,9 @@ export default function Toolbar({
       {useMinimalControls && isSidebarOpen && (
         <IconButton
           className={classnames(
-            'w-[27px] h-[27px] mt-[140px] ml-[6px]',
+            'w-[27px] h-[27px] mt-[140px] ml-px-1.5',
             'flex items-center justify-center bg-white border',
-            'text-grey-6 hover:text-grey-9 text-annotator-lg transition-colors',
+            'text-grey-6 hover:text-grey-9 transition-colors',
             // Turn off right border to blend with sidebar
             'border-r-0',
             // A more intense shadow than other ToolbarButtons, to match that
@@ -103,8 +113,8 @@ export default function Toolbar({
           <IconButton
             className={classnames(
               // Height and width to align with the sidebar's top bar
-              'h-[40px] w-[33px]',
-              'bg-white text-grey-5 pl-1.5 hover:text-grey-9',
+              'h-[40px] w-[33px] pl-px-1.5',
+              'bg-white text-grey-5 hover:text-grey-9',
               // Turn on left and bottom borders to continue the
               // border of the sidebar's top bar
               'border-l border-b'
@@ -116,7 +126,7 @@ export default function Toolbar({
             pressed={isSidebarOpen}
             onClick={toggleSidebar}
           />
-          <div className="space-y-1.5 mt-2">
+          <div className="space-y-px-1.5 mt-px-2">
             <ToolbarButton
               title="Show highlights"
               icon={showHighlights ? 'show' : 'hide'}

src/styles/annotator/components/Buckets.scss

@@ -12,10 +12,16 @@
   // down or left. On its own, it will be lozenge-shaped. Compose with one
   // of the directional classes below to style a button fully, e.g.
   // `classname="BucketButton LeftBucketButton`
+
+  // These buttons use absolute units for sizing, fonts, border-radius. This is
+  // purposeful: they should not scale with root-font scaling in the host page.
+  // This is to make sure they still properly align with the sidebar UI.
+  //
+  // These will still properly scale if the user zooms the font in the browser.
   .BucketButton {
     // A lozenge-shaped element with very small text
-    @apply w-[26px] h-[16px] absolute border bg-white shadow rounded;
-    @apply font-sans text-center text-tiny font-bold text-color-text-light leading-none;
+    @apply w-[26px] h-[16px] absolute border bg-white shadow rounded-px;
+    @apply font-sans text-center text-px-tiny font-bold text-color-text-light leading-none;
 
     // Establish :before and :after content for later manipulation into
     // different pointer shapes and directions
@@ -27,7 +33,7 @@
 
   // Style a `BucketButton` to point left
   .LeftBucketButton {
-    @apply rounded-r rounded-l-sm;
+    @apply rounded-r-px rounded-l-px-sm;
 
     // Position to the left of the button and centered vertically
     &::before,
@@ -54,7 +60,7 @@
   // Style a `BucketButton` to point up
   .UpBucketButton {
     // Z-index assures that left-pointing buttons will scroll behind this
-    @apply z-1 rounded-t-sm rounded-b;
+    @apply z-1 rounded-t-px-sm rounded-b-px;
 
     // Position above the button and horizontally centered
     &::before,
@@ -79,7 +85,7 @@
   // Style a `BucketButton` to point down
   .DownBucketButton {
     // Z-index assures that left-pointing buttons will scroll behind this
-    @apply z-1 rounded-t rounded-b-sm;
+    @apply z-1 rounded-t-px rounded-b-px-sm;
 
     // Position below the button and horizontally centered
     &::before,

tailwind.config.mjs

@@ -17,6 +17,14 @@ export default {
         adderPopUp: 'adderPopUp 0.08s ease-in forwards',
         adderPopDown: 'adderPopDown 0.08s ease-in forwards',
       },
+      borderRadius: {
+        // Tailwind provides a default set of border-radius utility styles
+        // in rem units. Add some values for places where border radius needs
+        // to be a fixed size and not scale with changes to root font size
+        // example: bucket bar indicator buttons
+        'px-sm': '2px',
+        px: '4px',
+      },
       boxShadow: {
         DEFAULT: '0 1px 1px rgba(0, 0, 0, 0.1)',
         adderToolbar: '0px 2px 10px 0px rgba(0, 0, 0, 0.25)',
@@ -45,18 +53,26 @@ export default {
       // in the app (descriptive), but should not be interpreted as defining
       // an ideal design system (prescriptive).
       fontSize: {
+        // This is a collection of font sizes used in existing sidebar components,
+        // which will grow during the conversion-to-Tailwind process. These
+        // are descriptive, not aspirational or prescriptive.
         tiny: ['10px'],
         sm: ['11px', '1.4'],
-        base: ['13px', '1.4'],
+        base: ['13px', '1.4'], // Current base font size for sidebar
         lg: ['14px'],
         xl: ['16px'],
-        // Keep separate font settings for the annotator; these may need to
-        // remain as pixels when sidebar converts to rems or otherwise be
-        // independent of sidebar font sizes
-        'annotator-sm': ['12px'],
-        'annotator-base': ['14px'],
-        'annotator-lg': ['16px'],
-        'annotator-xl': ['18px'],
+        // rem-based font sizes for annotator controls that should scale
+        // with text scaling in the underlying document
+        'annotator-sm': ['0.75rem'],
+        'annotator-base': ['0.875rem'],
+        'annotator-lg': ['1rem'],
+        'annotator-xl': ['1.125rem'],
+        // These are known cases when we want absolute sizing for fonts so
+        // that they do not scale, for example annotator components that are
+        // rendered next to the sidebar (which doesn't scale with host root
+        // font sizing)
+        'px-tiny': ['10px'],
+        'px-base': ['16px'],
       },
       keyframes: {
         adderPopDown: {
@@ -94,6 +110,15 @@ export default {
         // Tablet and up
         'annotator-lg': '600px',
       },
+      spacing: {
+        // These are selective, pixel-specific variants of Tailwind's default
+        // rem-based spacing scale and follow the same naming conventions with
+        // a `px-` prefix. They should only be used where UI should not scale
+        // with text scaling (i.e. `1rem != 16px`). Example: spacing between
+        // buttons in the annotator toolbar
+        'px-1.5': '6px',
+        'px-2': '8px',
+      },
       zIndex: {
         1: '1',
         2: '2',