Merge pull request #2233 from hypothesis/font-size-consolidation

Consolidate font sizes and line heights

src/styles/annotator/adder.scss

@@ -109,9 +109,9 @@ $adder-transition-duration: 80ms;
   align-items: center;
   border: none;
   cursor: pointer;
-  font-size: 12px;
+  font-size: var.$annotator-adder-font-size;
   font-family: sans-serif;
-  line-height: 1em;
+  line-height: var.$annotator-adder-line-height;
 
   padding: 10px;
   padding-bottom: 7px;

src/styles/annotator/annotator.scss

@@ -12,7 +12,6 @@
 @use './bucket-bar';
 @use './highlights';
 
-$annotator-font-size: 14px;
 $sidebar-collapse-transition-time: 150ms;
 
 // Sidebar
@@ -35,8 +34,8 @@ $sidebar-collapse-transition-time: 150ms;
   user-select: none;
   direction: ltr;
   background: none;
-  font-size: $annotator-font-size;
-  line-height: var.$base-line-height;
+  font-size: var.$annotator-base-font-size;
+  line-height: var.$annotator-base-line-height;
   height: 100%;
   position: fixed;
   top: 0;

src/styles/annotator/bucket-bar.scss

@@ -37,8 +37,8 @@
       color: var.$color-text-light;
       font-weight: bold;
       font-family: var.$sans-font-family;
-      font-size: 10px;
-      line-height: 14px;
+      font-size: var.$annotator-bucket-bar-font-size;
+      line-height: var.$annotator-bucket-bar-line-height;
       margin: 0 auto;
     }
 

src/styles/mixins/forms.scss

@@ -50,6 +50,7 @@
 
 @mixin primary-action-btn {
   @include focus.outline-on-keyboard-focus;
+  @include var.font-normal;
   color: var.$grey-1;
   background-color: var.$grey-mid;
   height: 35px;
@@ -57,7 +58,6 @@
   border-radius: 2px;
 
   font-weight: bold;
-  font-size: var.$body1-font-size;
 
   padding-left: 12px;
   padding-right: 12px;

src/styles/mixins/panel.scss

@@ -24,19 +24,9 @@
     margin-right: 0.5em;
   }
 
-  &__subheader {
-    width: 100%;
-    text-align: center;
-    padding: 1em 0.5em;
-    border-bottom: 1px solid var.$grey-3;
-    font-size: 1.25em;
-    font-weight: 500;
-    color: var.$color-text-light;
-  }
-
   &__title {
+    @include var.font-big;
     color: var.$color-brand;
-    font-size: var.$body2-font-size;
     font-weight: 700;
   }
 

src/styles/sidebar/components/annotation-document-info.scss

 @use "../../variables" as var;
 
 .annotation-document-info {
-  font-size: 13px;
+  @include var.font-normal;
   color: var.$color-text-light;
   display: flex;
 
@@ -11,6 +11,5 @@
 
   &__domain {
     margin-right: 5px;
-    font-size: 12px;
   }
 }

src/styles/sidebar/components/annotation-quote.scss

@@ -9,13 +9,9 @@
 
   &__quote {
     @include var.font-normal;
-
     border-left: 3px solid var.$grey-3;
     color: var.$color-text-light;
-    font-family: sans-serif;
-    font-size: 12px;
     font-style: italic;
-    letter-spacing: 0.1px;
     padding: 0 1em;
 
     // Prevent long URLs etc. in quote causing overflow

src/styles/sidebar/components/annotation-share-control.scss

@@ -30,14 +30,14 @@
   }
 
   & .form-input {
+    @include var.font-small;
     padding: 0.5em;
     border-radius: 0;
-    font-size: var.$small-font-size;
   }
 
   &__permissions {
+    @include var.font-small;
     margin: 0.5em 0;
-    font-size: var.$small-font-size;
   }
 
   &__arrow {

src/styles/sidebar/components/annotation-share-info.scss

@@ -6,9 +6,9 @@
 
   &__group,
   &__private {
+    @include var.font-normal;
     display: flex;
     align-items: baseline;
-    font-size: var.$body1-font-size;
     color: var.$color-text-light;
   }
 

src/styles/sidebar/components/autocomplete-list.scss

@@ -8,6 +8,7 @@
 }
 
 .autocomplete-list__items {
+  @include var.font-normal;
   @supports (clip-path: polygon(0 0, 100% 0, 0% 100%, 0% 100%)) {
     &:before {
       /**
@@ -29,7 +30,6 @@
     }
   }
   position: absolute;
-  font-size: var.$body2-font-size;
   top: 5px;
   max-width: 100%;
   min-width: 10em;
@@ -39,7 +39,6 @@
   z-index: 10;
 
   @media (pointer: coarse) {
-    font-size: var.$touch-target-size;
     line-height: var.$touch-target-size;
   }
 }

src/styles/sidebar/components/excerpt.scss

@@ -35,7 +35,6 @@
   .excerpt__toggle-link {
     padding-left: 15px;
     background-image: linear-gradient(to right, transparent 0px, white 12px);
-    line-height: var.$normal-line-height;
   }
 
   .excerpt__toggle-button {

src/styles/sidebar/components/group-list.scss

@@ -5,6 +5,7 @@
 }
 
 .group-list__menu-label {
+  @include var.font-big;
   align-items: center;
   color: var.$color-text;
   display: flex;
@@ -12,8 +13,6 @@
   // Prevent label from wrapping if top bar is too narrow to fit all of its
   // items.
   flex-shrink: 0;
-
-  font-size: var.$body2-font-size;
   font-weight: bold;
 }
 

src/styles/sidebar/components/help-panel.scss

@@ -3,18 +3,17 @@
 
 .help-panel {
   &__sub-panel-title {
+    @include var.font-big;
     margin: 0;
     padding: 0.5em 0;
-    font-size: 1.25em;
     font-weight: 500;
   }
 
   &__content {
+    @include var.font-normal;
     padding: 0.5em;
     border-top: 1px solid var.$grey-3;
     border-bottom: 1px solid var.$grey-3;
-    line-height: var.$normal-line-height;
-    font-size: var.$normal-font-size;
 
     a {
       text-decoration: underline;
@@ -52,11 +51,11 @@
     align-items: center;
 
     &__tab {
+      @include var.font-big;
       flex: 1 1 0px;
       margin-top: 0.5em;
       border-right: 1px solid var.$grey-3;
       text-align: center;
-      font-size: 1.25em;
       color: var.$color-text-light;
 
       &:last-of-type {

src/styles/sidebar/components/logged-out-message.scss

@@ -25,7 +25,8 @@
 }
 
 .logged-out-message__logo-icon {
-  font-size: 30px;
+  width: 30px;
+  height: 30px;
   color: var.$grey-mid;
 
   &:hover {

src/styles/sidebar/components/markdown-editor.scss

@@ -42,7 +42,7 @@ $toolbar-border: 0.1em solid var.$grey-3;
   }
 
   &.is-text {
-    font-size: 13px;
+    @include var.font-normal;
   }
 
   &-icon {

src/styles/sidebar/components/menu-section.scss

@@ -5,8 +5,8 @@
 }
 
 .menu-section__heading {
+  @include var.font-normal;
   color: var.$color-text-light;
-  font-size: var.$body1-font-size;
   line-height: 1;
   margin: 1px 1px 0;
   margin-bottom: 10px;

src/styles/sidebar/components/menu.scss

@@ -71,10 +71,10 @@
 
 // Content area of the menu.
 .menu__content {
+  @include var.font-big;
   background-color: white;
   border: 1px solid var.$grey-3;
   box-shadow: var.$popup-menu-shadow;
-  font-size: var.$body2-font-size;
   position: absolute;
   top: calc(100% + 5px);
   z-index: 1;

src/styles/sidebar/components/moderation-banner.scss

@@ -5,12 +5,12 @@
   $h-padding: 15px;
 
   .moderation-banner {
+    @include var.font-normal;
     position: relative;
 
     color: white;
     display: flex;
     flex-direction: row;
-    font-size: var.$normal-font-size;
     font-weight: bold;
   }
 

src/styles/sidebar/components/selection-tabs.scss

@@ -5,8 +5,8 @@
 .selection-tabs {
   display: flex;
   flex-direction: row;
-  color: var.$color-text-light;
   @include var.font-normal;
+  color: var.$color-text-light;
 
   &:hover {
     color: var.$color-text;
@@ -46,9 +46,9 @@
 }
 
 .selection-tabs__count {
+  @include var.font-tiny;
   position: relative;
   bottom: 3px;
-  font-size: 10px;
 }
 
 .selection-tabs__empty-message {

src/styles/sidebar/components/tag-editor.scss

@@ -19,7 +19,6 @@
   &__item {
     display: flex;
     margin: 0.25em 0.5em 0.25em 0;
-    line-height: var.$base-line-height;
   }
 
   &__edit {
@@ -28,7 +27,7 @@
     border: 1px solid var.$grey-3;
     border-radius: 2px 0 0 2px;
     border-right-width: 0;
-    padding: 0 0.5em;
+    padding: 2px 0.5em;
   }
 
   &__delete {

src/styles/sidebar/components/tag-list.scss

@@ -7,8 +7,7 @@
 
   &__item {
     margin: 0.25em 0.5em 0.25em 0;
-    padding: 0 0.5em;
-    line-height: var.$base-line-height;
+    padding: 2px 0.5em;
     background: var.$grey-0;
     border: 1px solid var.$grey-3;
     border-radius: 2px;

src/styles/sidebar/components/tooltip.scss

-@use "../../variables" as var;
-
-// Tooltips
-// --------
-// Custom tooltips that appear instantly, replacing the browser's default
-// tooltip
-
-@mixin tooltip-arrow($rotation) {
-  transform: rotate($rotation);
-  background: var.$grey-7;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-  content: '';
-  display: block;
-  height: 6px;
-  left: 0;
-  margin-left: auto;
-  margin-right: 5px;
-  position: absolute;
-  right: 0;
-  width: 6px;
-}
-
-// The tooltip background
-.tooltip {
-  @include var.font-small;
-
-  border-radius: 2px;
-  position: fixed;
-  background-color: var.$grey-7;
-  color: white;
-  font-weight: bold;
-  padding-left: 5px;
-  padding-right: 5px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  z-index: var.$zindex-tooltip;
-}
-
-// Arrow at the bottom of the tooltip pointing at the target element
-
-// Variant for tooltips above the target that point down at it
-.tooltip--down:before {
-  @include tooltip-arrow(45deg);
-  content: '';
-  top: calc(100% - 5px);
-}
-
-// Variant for tooltips below the target that point up at it
-.tooltip--up:before {
-  @include tooltip-arrow(225deg);
-  content: '';
-  top: -3px;
-}
-
-// The text content inside the tooltip
-.tooltip-label {
-  // Make the label a positioned element so that it appears _above_ the
-  // tooltip's arrow, which partially overlaps the content of the tooltip.
-  position: relative;
-}

src/styles/sidebar/components/top-bar.scss

@@ -3,12 +3,11 @@
 @use "../../variables" as var;
 
 .top-bar {
+  @include var.font-big;
   color: var.$grey-mid;
   background: var.$white;
   border-bottom: solid 1px var.$grey-3;
   height: var.$top-bar-height;
-  // TODO bring into standard rhythm of typography
-  font-size: 15px;
   position: absolute;
   left: 0;
   right: 0;
@@ -62,9 +61,9 @@
 
 .top-bar__login-button {
   @include buttons.button;
+  @include var.font-big;
   padding: 0 0.25em;
   color: var.$color-brand;
-  font-size: var.$body2-font-size;
 
   &:hover {
     color: var.$color-link-hover;

src/styles/sidebar/sidebar.scss

-@use '../variables' as var with (
-  $base-font-size: 12px,
-  $base-line-height: 20px
-);
+@use '../variables' as var;
 
 // Base styles
 // -----------
@@ -57,7 +54,6 @@
 @use './components/thread-card';
 @use './components/thread-list';
 @use './components/toast-messages';
-@use './components/tooltip';
 @use './components/top-bar';
 @use './components/tutorial';
 @use './components/version-info';
@@ -66,12 +62,11 @@
 // ----------------
 
 body {
+  @include var.font-normal;
   height: 100%;
 
   background-color: var.$color-background;
   color: var.$color-text;
   font-family: var.$sans-font-family;
-  font-size: var.$base-font-size;
   font-weight: normal;
-  line-height: var.$base-line-height;
 }

src/styles/variables.scss

@@ -70,19 +70,17 @@ $sans-font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
   sans-serif !default;
 $mono-font-family: Open Sans Mono, Menlo, DejaVu Sans Mono, monospace !default;
 
-$base-font-size: 16px !default;
-$base-line-height: 20px !default;
+// Transitional Typography (Temporary)
+// -----------------------------------
 
-$body1-font-size: 12px;
-$body1-line-height: 1.4em;
+$annotator-base-font-size: 14px;
+$annotator-base-line-height: 20px;
 
-$body2-font-size: 14px;
+$annotator-adder-font-size: 12px;
+$annotator-adder-line-height: 1em;
 
-$normal-font-size: 13px;
-$normal-line-height: 17px;
-
-$small-font-size: 11px;
-$small-line-height: 12px;
+$annotator-bucket-bar-font-size: 10px;
+$annotator-bucket-bar-line-height: 14px;
 
 // Minimum font size for <input> fields on iOS. If the font size is smaller than
 // this, iOS will zoom into the field when focused.
@@ -108,14 +106,26 @@ $popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 
 // Mixins
 // ------
+
+@mixin font-tiny {
+  font-size: 10px;
+  line-height: 14px;
+  font-weight: 400;
+}
+
 @mixin font-small {
-  font-size: $small-font-size;
-  line-height: $small-line-height;
+  font-size: 11px;
+  line-height: 15px;
   font-weight: 400;
 }
 
 @mixin font-normal {
-  font-size: $normal-font-size;
-  line-height: $normal-line-height;
+  font-size: 13px;
+  line-height: 17px;
   font-weight: 400;
 }
+
+@mixin font-big {
+  font-size: 14px;
+  line-height: 20px;
+}