Move font mixins into utils and normalize naming

src/styles/mixins/forms.scss

@@ -32,7 +32,7 @@
 }
 
 @mixin form-input {
-  @include var.font-normal;
+  @include utils.font--medium;
   @include utils.border;
   border-radius: 2px;
   padding: 0.5em 0.75em;
@@ -51,7 +51,7 @@
 
 @mixin primary-action-btn {
   @include focus.outline-on-keyboard-focus;
-  @include var.font-normal;
+  @include utils.font--medium;
   color: var.$grey-1;
   background-color: var.$grey-mid;
   height: 35px;

src/styles/mixins/molecules.scss

@@ -110,7 +110,7 @@
   }
 
   &__title {
-    @include var.font-big;
+    @include utils.font--large;
     color: var.$color-brand;
     font-weight: 700;
   }
@@ -149,7 +149,7 @@
   @include layout.row($align: center);
 
   &__tab {
-    @include utils.font-large;
+    @include utils.font--large;
     @include utils.border-right;
     flex: 1 1;
     text-align: center;

src/styles/mixins/utils.scss

@@ -46,3 +46,30 @@
   width: 1em;
   height: 1em;
 }
+
+@mixin font-base {
+  line-height: var.$line-height;
+  font-weight: normal;
+  color: var.$color-text;
+}
+
+@mixin font--xsmall {
+  @include font-base;
+  font-size: var.$font-size--xsmall;
+}
+
+@mixin font--small {
+  @include font-base;
+  font-size: var.$font-size--small;
+}
+
+@mixin font--medium {
+  @include font-base;
+  font-size: var.$font-size--medium;
+}
+
+@mixin font--large {
+  @include font-base;
+  font-size: var.$font-size--large;
+  font-weight: 500;
+}

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

@@ -28,7 +28,7 @@
   }
 
   &__timestamp-edited {
-    @include var.font-small;
+    @include utils.font--small;
     font-style: italic;
     color: var.$color-text-light;
   }

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

@@ -3,7 +3,7 @@
 @use "../../mixins/utils";
 
 .annotation-license {
-  @include var.font-small;
+  @include utils.font--small;
   @include utils.border-top;
   padding-top: 0.5em;
 

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

@@ -27,13 +27,13 @@
   }
 
   & .form-input {
-    @include var.font-small;
+    @include utils.font--small;
     padding: 0.5em;
     border-radius: 0;
   }
 
   &__permissions {
-    @include var.font-small;
+    @include utils.font--small;
     margin: 0.5em 0;
   }
 

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

@@ -6,7 +6,7 @@
 }
 
 .group-list__menu-label {
-  @include var.font-big;
+  @include utils.font--large;
   align-items: center;
   color: var.$color-text;
   display: flex;

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

@@ -13,9 +13,8 @@
   }
 
   &__sub-panel-title {
-    @include var.font-big;
+    @include utils.font--large;
     flex-grow: 1;
-    font-weight: 500;
   }
 
   &__subcontent {
@@ -49,7 +48,7 @@
     @include layout.row($align: center);
 
     &__tab {
-      @include var.font-big;
+      @include utils.font--large;
       @include utils.border-right;
       flex: 1 1;
       text-align: center;

src/styles/sidebar/components/menu.scss

@@ -71,7 +71,7 @@
 
 // Content area of the menu.
 .menu__content {
-  @include var.font-big;
+  @include utils.font--large;
   @include utils.border;
   background-color: white;
   box-shadow: var.$popup-menu-shadow;

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

@@ -49,7 +49,7 @@
 }
 
 .selection-tabs__count {
-  @include var.font-tiny;
+  @include utils.font--xsmall;
   position: relative;
   bottom: 3px;
 }

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

@@ -4,7 +4,7 @@
 @use "../../variables" as var;
 
 .top-bar {
-  @include var.font-big;
+  @include utils.font--large;
   @include utils.border-bottom;
   color: var.$grey-mid;
   background: var.$white;
@@ -62,7 +62,7 @@
 
 .top-bar__login-button {
   @include buttons.button;
-  @include var.font-big;
+  @include utils.font--large;
   padding: 0 0.25em;
   color: var.$color-brand;
 

src/styles/sidebar/sidebar.scss

 @use '../variables' as var;
+@use '../mixins/utils';
 
 // Base styles
 // -----------
@@ -62,7 +63,7 @@
 // ----------------
 
 body {
-  @include var.font-normal;
+  @include utils.font--medium;
   height: 100%;
 
   background-color: var.$color-background;

src/styles/sidebar/styled-text.scss

 @use "../variables" as var;
+@use "../mixins/utils";
 
 @mixin styled-text() {
   // Reset the line-height in case any parent elements have set it.
@@ -107,7 +108,7 @@
   }
 
   blockquote {
-    @include var.font-normal;
+    @include utils.font--medium;
 
     border-left: 3px solid var.$grey-3;
     color: var.$color-text-light;

src/styles/variables.scss

@@ -70,6 +70,12 @@ $sans-font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
   sans-serif !default;
 $mono-font-family: Open Sans Mono, Menlo, DejaVu Sans Mono, monospace !default;
 
+$font-size--xsmall: 10px;
+$font-size--small: 11px;
+$font-size--medium: 13px;
+$font-size--large: 14px;
+$line-height: 1.4;
+
 // Transitional Typography (Temporary)
 // -----------------------------------
 
@@ -114,26 +120,3 @@ $icon-size--large: 24px;
 
 // Mixins
 // ------
-
-@mixin font-tiny {
-  font-size: 10px;
-  line-height: 14px;
-  font-weight: 400;
-}
-
-@mixin font-small {
-  font-size: 11px;
-  line-height: 15px;
-  font-weight: 400;
-}
-
-@mixin font-normal {
-  font-size: 13px;
-  line-height: 17px;
-  font-weight: 400;
-}
-
-@mixin font-big {
-  font-size: 14px;
-  line-height: 20px;
-}