Establish layout margin variables

src/styles/mixins/layout.scss

 @use "./responsive";
+@use "../variables" as var;
 
 @mixin sidebar-content {
   margin-left: auto;
@@ -74,6 +75,6 @@
  */
 @mixin vertical-rhythm {
   & > * + *:not([class*='svg-icon--inline']) {
-    margin-top: 1em;
+    margin-top: var.$layout-margin;
   }
 }

src/styles/mixins/molecules.scss

@@ -23,7 +23,7 @@
 @mixin card {
   @include card-frame;
   @include layout.vertical-rhythm;
-  padding: 1em;
+  padding: var.$layout-margin;
 
   &:hover,
   &.is-focused {
@@ -102,11 +102,11 @@
   &__header {
     @include layout.row($align: center);
     @include utils.border-bottom;
-    padding-bottom: 1em;
+    padding-bottom: var.$layout-margin;
   }
 
   &__header-icon {
-    margin-right: 0.5em;
+    margin-right: var.$layout-margin--small;
   }
 
   &__title {

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

@@ -11,7 +11,7 @@
 
 .annotation-body__collapse-toggle {
   @include layout.row(right);
-  margin: 0.5em 0;
+  margin: var.$layout-margin--small 0;
 
   .annotation-body__collapse-toggle-button {
     @include buttons.button--labeled;

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

@@ -19,7 +19,7 @@
 
   &__reply-toggle {
     @include buttons.button--link;
-    padding: 0 0.5em;
+    padding: 0 var.$layout-margin--small;
   }
 
   // Timestamps are right aligned in a flex row

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

@@ -5,7 +5,7 @@
 .annotation-license {
   @include utils.font--small;
   @include utils.border-top;
-  padding-top: 0.5em;
+  padding-top: var.$layout-margin--small;
 
   &__link {
     @include layout.row;
@@ -19,6 +19,7 @@
   }
 
   &__details {
+    // TODO: Horizontal rhythm
     margin-left: 0.25em;
   }
 }

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

@@ -34,8 +34,8 @@
 
     &-cancel {
       @include buttons.button--labeled;
-      padding-right: 0.5em;
-      padding-left: 0.5em;
+      padding-right: var.$layout-margin--small;
+      padding-left: var.$layout-margin--small;
 
       &__icon {
         margin: 0;

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

@@ -9,7 +9,7 @@
     border-left: 3px solid var.$color-border;
     color: var.$color-text-light;
     font-style: italic;
-    padding: 0 1em;
+    padding: 0 var.$layout-margin;
 
     // Prevent long URLs etc. in quote causing overflow
     overflow-wrap: break-word;

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

@@ -23,7 +23,7 @@
 
   &__icon-button {
     @include buttons.button--input;
-    padding: 0.25em 0.5em;
+    padding: var.$layout-margin--xsmall var.$layout-margin--small;
   }
 
   &__form-input {
@@ -34,7 +34,7 @@
 
   &__permissions {
     @include utils.font--small;
-    margin: 0.5em 0;
+    margin: var.$layout-margin--small 0;
   }
 
   &__arrow {

src/styles/sidebar/components/focused-mode-header.scss

@@ -17,8 +17,8 @@
   font-weight: 300;
 
   // TODO cleanup
-  padding: 0.5em;
-  margin-bottom: 1em;
+  padding: var.$layout-margin--small;
+  margin-bottom: var.$layout-margin;
 
   &__btn {
     // TODO use Button component

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

@@ -4,6 +4,7 @@
 .group-list-item__footer {
   background-color: var.$grey-1;
   margin: 0;
+  // TODO consolidate
   padding-top: 15px;
   padding: 10px;
 

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

@@ -21,7 +21,7 @@
 
 .selection-tabs__icon {
   color: var.$grey-mid;
-  margin: 0 0.25em;
+  margin: 0 var.$layout-margin--xsmall;
 }
 
 .selection-tabs--theme-clean {

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

@@ -5,7 +5,7 @@
 @use "../../variables" as var;
 
 .tag-editor {
-  margin: 0.5em 0;
+  margin: var.$layout-margin--small 0;
 
   &__input {
     @include forms.form-input;
@@ -15,12 +15,13 @@
   &__tags {
     @include layout.row;
     flex-wrap: wrap;
-    margin: 0.5em 0;
+    margin: var.$layout-margin--small 0;
   }
 
   &__item {
     @include layout.row;
-    margin: 0.25em 0.5em 0.25em 0;
+    margin: var.$layout-margin--xsmall var.$layout-margin--small
+      var.$layout-margin--small 0;
   }
 
   &__edit {
@@ -29,7 +30,7 @@
     background: var.$grey-1;
     border-radius: var.$border-radius 0 0 var.$border-radius;
     border-right-width: 0;
-    padding: 2px 0.5em;
+    padding: 2px var.$layout-margin--small;
   }
 
   &__delete {
@@ -37,7 +38,7 @@
     @include utils.border;
     color: var.$grey-mid;
     background-color: var.$grey-1;
-    padding: 0 0.5em;
+    padding: 0 var.$layout-margin--small;
     border-radius: 0 var.$border-radius var.$border-radius 0;
 
     &:hover {

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

@@ -9,8 +9,9 @@
 
   &__item {
     @include utils.border;
-    margin: 0.25em 0.5em 0.25em 0;
-    padding: 2px 0.5em;
+    margin: var.$layout-margin--xsmall var.$layout-margin--small
+      var.$layout-margin--xsmall 0;
+    padding: 2px var.$layout-margin--small;
     background: var.$grey-0;
     border-radius: var.$border-radius;
   }

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

+@use "../../variables" as var;
+
 .thread-list__card {
-  margin-bottom: 1em;
+  margin-bottom: var.$layout-margin;
 }

src/styles/sidebar/components/thread.scss

@@ -6,19 +6,19 @@
   @include layout.row;
 
   &--reply {
-    margin-top: 0.5em;
+    margin-top: var.$layout-margin--small;
   }
 
   &--reply &__content {
-    margin-left: 1em;
+    margin-left: var.$layout-margin;
   }
 
   &__children {
-    margin-left: -1em;
+    margin-left: -1 * var.$layout-margin;
   }
 
   &__unavailable-message {
-    margin: 0 1em;
+    margin: 0 var.$layout-margin;
   }
 
   // Left "channel" of thread

src/styles/sidebar/components/toast-messages.scss

@@ -8,7 +8,7 @@
   z-index: 1;
   left: 0;
   width: 100%;
-  padding: 0 0.5em;
+  padding: 0 var.$layout-margin--small;
 
   @include responsive.tablet-and-up {
     // When displaying in a wider viewport (desktop/tablet outside of sidebar)
@@ -78,7 +78,7 @@
   }
 
   &__message {
-    padding: 1em;
+    padding: var.$layout-margin;
     width: 100%;
   }
 

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

@@ -52,7 +52,7 @@
   }
 
   &__menu-label {
-    padding: 0.25em;
+    padding: var.$layout-margin--xsmall;
   }
 }
 
@@ -63,7 +63,7 @@
 .top-bar__login-button {
   @include buttons.button;
   @include utils.font--large;
-  padding: 0 0.25em;
+  padding: 0 var.$layout-margin--xsmall;
   color: var.$color-brand;
 
   &:hover {

src/styles/sidebar/components/tutorial.scss

@@ -7,7 +7,7 @@
   }
 
   &__item {
-    margin: 0.5em 0;
+    margin: var.$layout-margin--small 0;
   }
 
   &__icon {

src/styles/sidebar/components/version-info.scss

@@ -2,13 +2,13 @@
 @use "../../mixins/layout";
 
 .version-info {
-  margin-top: 0.5em;
+  margin-top: var.$layout-margin--small;
 
   &__key {
     float: left;
     width: 8em;
-    margin-bottom: 0.5em;
-    padding-right: 1em;
+    margin-bottom: var.$layout-margin--small;
+    padding-right: var.$layout-margin;
     line-height: 1.25em;
     text-align: right;
     font-weight: 500;
@@ -16,7 +16,7 @@
   }
 
   &__value {
-    margin-bottom: 0.5em;
+    margin-bottom: var.$layout-margin--small;
     margin-left: 8em;
     overflow-wrap: break-word; // Keep really long userids from overflowing
     color: var.$color-text-light;
@@ -24,6 +24,6 @@
 
   &__actions {
     @include layout.row(center);
-    padding-bottom: 0.5em;
+    padding-bottom: var.$layout-margin--small;
   }
 }

src/styles/variables.scss

@@ -76,25 +76,17 @@ $font-size--medium: 13px;
 $font-size--large: 14px;
 $line-height: 1.4;
 
-// Transitional Typography (Temporary)
-// -----------------------------------
-
-$annotator-base-font-size: 14px;
-$annotator-base-line-height: 20px;
-
-$annotator-adder-font-size: 12px;
-$annotator-adder-line-height: 1em;
-
-$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.
 $touch-input-font-size: 16px;
 
 // Layout margins
 // -------------------------
-$layout-h-margin: 15px;
+$layout-h-margin: 15px; // Legacy
+$layout-margin: 1em;
+$layout-margin--medium: $layout-h-margin;
+$layout-margin--small: $layout-h-margin / 2;
+$layout-margin--xsmall: $layout-h-margin / 4;
 
 // Minimum recommended size for tap targets on mobile.
 // This value originated from Apple's Human Interface Guidelines.
@@ -118,5 +110,14 @@ $icon-size--small: 12px;
 $icon-size--medium: 16px;
 $icon-size--large: 24px;
 
-// Mixins
-// ------
+// Transitional Typography (Temporary)
+// -----------------------------------
+
+$annotator-base-font-size: 14px;
+$annotator-base-line-height: 20px;
+
+$annotator-adder-font-size: 12px;
+$annotator-adder-line-height: 1em;
+
+$annotator-bucket-bar-font-size: 10px;
+$annotator-bucket-bar-line-height: 14px;