Define utilities layer and remove local utility CSS classes

Replace use of local utility classes with tailwind
utility classes that do the same thing. Structure the utilities
layer for both sidebar and annotator.

src/sidebar/components/Annotation/AnnotationActionBar.js

@@ -109,7 +109,7 @@ function AnnotationActionBar({
   };
 
   return (
-    <div className="AnnotationActionBar hyp-u-layout-row u-font--xlarge">
+    <div className="AnnotationActionBar hyp-u-layout-row text-xl font-medium">
       {showEditAction && (
         <IconButton icon="edit" title="Edit" onClick={onEdit} />
       )}

src/sidebar/components/Annotation/AnnotationDocumentInfo.js

@@ -16,7 +16,7 @@ import { Link } from '@hypothesis/frontend-shared';
 export default function AnnotationDocumentInfo({ domain, link, title }) {
   return (
     <div className="hyp-u-layout-row hyp-u-horizontal-spacing--2">
-      <div className="u-color-text--muted">
+      <div className="text-color-text-light">
         on &quot;
         {link ? (
           <Link href={link} target="_blank">
@@ -27,7 +27,7 @@ export default function AnnotationDocumentInfo({ domain, link, title }) {
         )}
         &quot;
       </div>
-      {domain && <span className="u-color-text--muted">({domain})</span>}
+      {domain && <span className="text-color-text-light">({domain})</span>}
     </div>
   );
 }

src/sidebar/components/Annotation/AnnotationHeader.js

@@ -115,10 +115,10 @@ function AnnotationHeader({
 
   return (
     <header>
-      <div className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 u-wrap-reverse">
+      <div className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 flex-wrap-reverse">
         {annotationIsPrivate && !isEditing && (
           <Icon
-            classes="u-icon--xsmall"
+            classes="text-tiny"
             name="lock"
             title="This annotation is visible only to you"
           />
@@ -146,13 +146,13 @@ function AnnotationHeader({
       </div>
 
       {showExtendedInfo && (
-        <div className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 u-wrap-reverse">
+        <div className="hyp-u-layout-row--align-baseline hyp-u-horizontal-spacing--2 flex-wrap-reverse">
           <AnnotationShareInfo annotation={annotation} />
           {!isEditing && isHighlight(annotation) && (
             <Icon
               name="highlight"
               title="This is a highlight. Click 'edit' to add a note or tag."
-              classes="u-icon--xsmall u-color-text--muted"
+              classes="text-tiny text-color-text-light"
             />
           )}
           {showDocumentInfo && (

src/sidebar/components/Annotation/AnnotationLicense.js

@@ -5,15 +5,15 @@ import { Icon, Link } from '@hypothesis/frontend-shared';
  */
 export default function AnnotationLicense() {
   return (
-    <div className="hyp-u-padding--top hyp-u-border--top u-font--small u-line-height">
+    <div className="hyp-u-padding--top hyp-u-border--top text-sm leading-none">
       <Link
         classes="hyp-u-layout-row--align-center p-link--muted"
         href="http://creativecommons.org/publicdomain/zero/1.0/"
         target="_blank"
         title="View more information about the Creative Commons Public Domain dedication"
       >
-        <Icon name="cc-std" classes="u-icon--xsmall" />
-        <Icon name="cc-zero" classes="hyp-u-margin--left--1 u-icon--xsmall" />
+        <Icon name="cc-std" classes="text-tiny" />
+        <Icon name="cc-zero" classes="hyp-u-margin--left--1 text-tiny" />
         <div className="hyp-u-margin--left--2">
           Annotations can be freely reused by anyone for any purpose.
         </div>

src/sidebar/components/Annotation/AnnotationPublishControl.js

@@ -73,7 +73,7 @@ function AnnotationPublishControl({
 
   const menuLabel = (
     <div className="annotation-publish-button__menu-label" style={buttonStyle}>
-      <Icon name="expand-menu" classes="u-icon--small" />
+      <Icon name="expand-menu" />
     </div>
   );
 

src/sidebar/components/Annotation/AnnotationShareInfo.js

@@ -37,15 +37,15 @@ function AnnotationShareInfo({ annotation }) {
           target="_blank"
         >
           {group.type === 'open' ? (
-            <Icon classes="u-icon--xsmall" name="public" />
+            <Icon classes="text-tiny" name="public" />
           ) : (
-            <Icon classes="u-icon--xsmall" name="groups" />
+            <Icon classes="text-tiny" name="groups" />
           )}
           <span>{group.name}</span>
         </Link>
       )}
       {annotationIsPrivate && !linkToGroup && (
-        <span className="hyp-u-layout-row--align-baseline u-color-text--muted">
+        <span className="hyp-u-layout-row--align-baseline text-color-text-light">
           <span data-testid="private-info">Only me</span>
         </span>
       )}

src/sidebar/components/Annotation/AnnotationTimestamps.js

@@ -81,7 +81,7 @@ export default function AnnotationTimestamps({
     <div>
       {withEditedTimestamp && (
         <span
-          className="u-color-text--muted u-font--small u-font--italic"
+          className="text-color-text-light text-sm italic"
           data-testid="timestamp-edited"
           title={updated.absolute}
         >
@@ -99,7 +99,7 @@ export default function AnnotationTimestamps({
         </Link>
       ) : (
         <span
-          className="u-color-text--muted"
+          className="color-text-color-light"
           data-testid="timestamp-created"
           title={created.absolute}
         >

src/sidebar/components/Annotation/AnnotationUser.js

@@ -13,7 +13,7 @@ import { Link } from '@hypothesis/frontend-shared';
  * @param {AnnotationUserProps} props
  */
 function AnnotationUser({ authorLink, displayName }) {
-  const user = <h3 className="u-color-text u-font--bold">{displayName}</h3>;
+  const user = <h3 className="text-color-text font-bold">{displayName}</h3>;
 
   if (authorLink) {
     return (

src/sidebar/components/FilterSelect.js

@@ -36,9 +36,7 @@ function FilterSelect({
 
   const menuLabel = (
     <span className="FilterSelect__menu-label">
-      {icon && (
-        <Icon name={icon} classes="u-icon--medium hyp-u-margin--right--3" />
-      )}
+      {icon && <Icon name={icon} classes="text-xl hyp-u-margin--right--3" />}
       {selected.display}
     </span>
   );

src/sidebar/components/LoggedOutMessage.js

@@ -46,7 +46,7 @@ function LoggedOutMessage({ onLogin }) {
           aria-label="Hypothesis homepage"
           title="Hypothesis homepage"
         >
-          <Icon name="logo" classes="u-icon--xlarge hyp-u-color--grey-7" />
+          <Icon name="logo" classes="w-16 h-16 hyp-u-color--grey-7" />
         </a>
       </div>
     </div>

src/sidebar/components/MarkdownEditor.js

@@ -138,10 +138,7 @@ function ToolbarButton({
 
   if (label) {
     return (
-      <LabeledButton
-        classes="u-font--normal TransparentButton"
-        {...buttonProps}
-      >
+      <LabeledButton classes="font-normal TransparentButton" {...buttonProps}>
         {label}
       </LabeledButton>
     );
@@ -353,7 +350,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }) {
         <Link
           href="https://web.hypothes.is/help/formatting-annotations-with-markdown/"
           target="_blank"
-          classes="u-font--xsmall IconOnlyLink"
+          classes="text-tiny IconOnlyLink"
           linkRef={buttonRefs[buttonIds.help]}
           tabIndex={getTabIndex(buttonIds.help)}
           title="Formatting help"
@@ -430,7 +427,7 @@ export default function MarkdownEditor({
   };
 
   return (
-    <div className="u-line-height">
+    <div className="leading-none">
       <Toolbar
         onCommand={handleCommand}
         isPreviewing={preview}

src/sidebar/components/NotebookView.js

@@ -133,7 +133,7 @@ function NotebookView({ loadAnnotationsService, streamer }) {
       <div className="NotebookView__filters">
         <NotebookFilters />
       </div>
-      <div className="NotebookView__results hyp-u-layout-row--align-center u-font--large">
+      <div className="NotebookView__results hyp-u-layout-row--align-center text-lg font-medium">
         {pendingUpdateCount > 0 && !hasAppliedFilter && (
           <IconButton
             icon="refresh"

src/sidebar/components/SelectionTabs.js

@@ -45,7 +45,7 @@ function Tab({
 
   return (
     <LabeledButton
-      classes={classnames('u-color-text', 'SelectionTab', {
+      classes={classnames('text-color-text', 'SelectionTab', {
         'is-selected': isSelected,
       })}
       // Listen for `onMouseDown` so that the tab is selected when _pressed_
@@ -62,7 +62,7 @@ function Tab({
         {children}
         {count > 0 && !isWaitingToAnchor && (
           <span
-            className="u-font--xsmall"
+            className="text-tiny"
             style="position:relative;bottom:3px;left:2px"
           >
             {count}
@@ -158,14 +158,14 @@ function SelectionTabs({ annotationsService, isLoading, settings }) {
         </div>
       )}
       {!isLoading && showNotesUnavailableMessage && (
-        <Frame classes="u-text--centered">
+        <Frame classes="text-center">
           <span data-testid="notes-unavailable-message">
             There are no page notes in this group.
           </span>
         </Frame>
       )}
       {!isLoading && showAnnotationsUnavailableMessage && (
-        <Frame classes="u-text--centered">
+        <Frame classes="text-center">
           <span data-testid="annotations-unavailable-message">
             There are no annotations in this group.
             <br />

src/sidebar/components/SidebarContentError.js

@@ -40,7 +40,7 @@ export default function SidebarContentError({
   })();
 
   return (
-    <div className="u-sidebar-container">
+    <div className="mb-4">
       <Panel icon="restricted" title={errorTitle}>
         <p>{errorMessage}</p>
         <div className="hyp-u-layout-row--justify-right hyp-u-horizontal-spacing">

src/sidebar/components/SidebarPanel.js

@@ -60,7 +60,7 @@ export default function SidebarPanel({
 
   return (
     <Slider visible={panelIsActive}>
-      <div ref={panelElement} className="u-sidebar-container">
+      <div ref={panelElement} className="mb-4">
         <Panel title={title} icon={icon} onClose={closePanel}>
           {children}
         </Panel>

src/sidebar/components/SidebarView.js

@@ -142,7 +142,7 @@ function SidebarView({
 
   return (
     <div>
-      <h2 className="u-screen-reader-only">Annotations</h2>
+      <h2 className="sr-only">Annotations</h2>
       {showFilterStatus && <FilterStatus />}
       <LoginPromptPanel onLogin={onLogin} onSignUp={onSignUp} />
       {hasDirectLinkedAnnotationError && (

src/sidebar/components/TopBar.js

@@ -82,7 +82,7 @@ function TopBar({
         <span className="TopBar__login-links">⋯</span>
       )}
       {auth.status === 'logged-out' && (
-        <span className="TopBar__login-links u-font--large hyp-u-horizontal-spacing--2">
+        <span className="TopBar__login-links text-lg font-medium hyp-u-horizontal-spacing--2">
           <LinkButton
             classes="InlineLinkButton"
             onClick={onSignUp}

src/styles/annotator/_utilities.scss

+@use '@hypothesis/frontend-shared/styles/util';
+
+@use 'tailwindcss/utilities';

src/styles/annotator/annotator.scss

@@ -24,10 +24,7 @@
 @use './components/Toolbar';
 @use './components/WarningBanner';
 
-// Make the shared package utility styles available
-@use '@hypothesis/frontend-shared/styles/util';
-
-@use 'tailwindcss/utilities';
+@use './utilities';
 
 // Styles for all top-level elements in shadow roots.
 :host > * {

src/styles/sidebar/_utilities.scss

+@use '@hypothesis/frontend-shared/styles/util';
+
+@use 'tailwindcss/utilities';

src/styles/sidebar/sidebar.scss

@@ -44,9 +44,4 @@
 @use './components/TopBar';
 @use './components/VersionInfo';
 
-// Make the shared package utility styles available
-@use '@hypothesis/frontend-shared/styles/util' as hyp-u;
-// Local utility classes
-@use '../util';
-
-@use 'tailwindcss/utilities';
+@use './utilities';

src/styles/util.scss

-@use './mixins/a11y';
-@use './mixins/utils';
-@use './variables' as var;
-
-// Utility classes
-// These will be extracted and considered when developing typography patterns
-.u-font--xsmall {
-  font-size: 10px;
-}
-
-.u-font--small {
-  @include utils.font--small;
-}
-
-.u-font--large {
-  @include utils.font--large;
-}
-
-.u-font--xlarge {
-  @include utils.font--xlarge;
-}
-
-.u-font--bold {
-  font-weight: bold;
-}
-
-.u-font--italic {
-  font-style: italic;
-}
-
-.u-font--normal {
-  font-weight: normal;
-}
-
-.u-line-height {
-  line-height: 1;
-}
-
-// Icons
-
-// These utilities establish dimensions appropriate for icon elements
-
-// Use for inline icons to size according to text content
-.u-icon--inline {
-  @include utils.icon--inline;
-}
-
-.u-icon--xsmall {
-  @include utils.icon--xsmall;
-}
-
-.u-icon--small {
-  @include utils.icon--small;
-}
-
-.u-icon--medium {
-  @include utils.icon--medium;
-}
-
-.u-icon--large {
-  @include utils.icon--large;
-}
-
-.u-icon--xlarge {
-  width: 30px;
-  height: 30px;
-}
-
-// Misc
-
-// Make element content invisible except to assistive technology
-.u-screen-reader-only {
-  @include a11y.screen-reader-only;
-}
-
-// Use on elements for a de-emphasized, muted text color
-.u-color-text--muted {
-  color: var.$color-text--light;
-}
-
-.u-color-text {
-  color: var.$color-text;
-}
-
-// Layout
-
-.u-inline {
-  display: inline;
-}
-
-.u-text--centered {
-  text-align: center;
-}
-
-// A style to make a flex row wrap from bottom to top instead of (default)
-// top to bottom
-.u-wrap-reverse {
-  flex-wrap: wrap-reverse;
-}
-
-// TODO: This is a temporary utility class to allow elements in the sidebar
-// (e.g. panels, thread cards, etc.)
-// to apply margins such that they are evenly spaced. In the future, the
-// sidebar markup (DOM structure) should be reorganized and consolidated such
-// that is possible to apply vertical-spacing rules to the sidebar container
-// (these rules set margins on immediate-child elements).
-// This class should be removed once patterns are available for vertical spacing
-// and the sidebar element structure can be adjusted.
-.u-sidebar-container {
-  margin-bottom: 1em;
-}

tailwind.config.mjs

@@ -11,10 +11,11 @@ export default {
   theme: {
     extend: {
       borderColor: {
-        DEFAULT: '#dbdbdb',
+        DEFAULT: '#dbdbdb', // TODO: remove when available from upstream preset
       },
       colors: {
         'color-text': {
+          // TODO: remove when available from upstream preset
           DEFAULT: '#202020',
           light: '#737373',
         },
@@ -28,9 +29,15 @@ export default {
           'sans-serif',
         ],
       },
+      // The following text sizes describe the current font sizes being used
+      // in the app (descriptive), but should not be interpreted as defining
+      // an ideal design system (prescriptive).
       fontSize: {
+        tiny: ['10px'],
+        sm: ['11px', '1.4'],
         base: ['13px', '1.4'],
         lg: ['14px'],
+        xl: ['16px'],
       },
     },
   },