Add `font-tiny`, `font-big` font mixins and use

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

@@ -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/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,9 +3,9 @@
 
 .help-panel {
   &__sub-panel-title {
+    @include var.font-big;
     margin: 0;
     padding: 0.5em 0;
-    font-size: 1.25em;
     font-weight: 500;
   }
 
@@ -51,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/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/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/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/variables.scss

@@ -120,6 +120,13 @@ $popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 
 // Mixins
 // ------
+
+@mixin font-tiny {
+  font-size: 10px;
+  line-height: $small-line-height;
+  font-weight: 400;
+}
+
 @mixin font-small {
   font-size: $small-font-size;
   line-height: $small-line-height;
@@ -131,3 +138,8 @@ $popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   line-height: $normal-line-height;
   font-weight: 400;
 }
+
+@mixin font-big {
+  font-size: $body2-font-size;
+  line-height: $base-line-height;
+}