Merge pull request #2279 from hypothesis/change-margin-var-name

Change `margin` SASS var names for clarity

src/styles/mixins/layout.scss

@@ -72,10 +72,10 @@
  * Establish a vertical (margin) rhythm for this element's immediate
  * children (i.e. put equal space between children).
  *
- * @param $size [var.$layout-margin--medium]: Spacing size (padding)
+ * @param $size [var.$layout-space--medium]: Spacing size (padding)
  * @FIXME Find workaround for SvgIcon exception
  */
-@mixin vertical-rhythm($size: var.$layout-margin) {
+@mixin vertical-rhythm($size: var.$layout-space) {
   & > * + *:not([class*='svg-icon--inline']) {
     margin-top: $size;
   }
@@ -84,9 +84,9 @@
 /**
  * Establish vertical space outside of elements in the container
  *
- * @param $size [var.$layout-margin--medium]: Spacing size (padding)
+ * @param $size [var.$layout-space--medium]: Spacing size (padding)
  */
-@mixin vertical-space($size: var.$layout-margin--medium) {
+@mixin vertical-space($size: var.$layout-space--medium) {
   padding-top: $size;
   padding-bottom: $size;
 }

src/styles/mixins/molecules.scss

@@ -23,7 +23,7 @@
 @mixin card {
   @include card-frame;
   @include layout.vertical-rhythm;
-  padding: var.$layout-margin;
+  padding: var.$layout-space;
 
   &:hover,
   &.is-focused {
@@ -79,7 +79,7 @@
   border-left: 3px solid var.$color-border;
   color: var.$color-text-light;
   font-style: italic;
-  padding: 0 var.$layout-margin;
+  padding: 0 var.$layout-space;
 
   // Prevent long URLs etc. in quote causing overflow
   overflow-wrap: break-word;
@@ -99,11 +99,11 @@
   &__header {
     @include layout.row($align: center);
     @include utils.border-bottom;
-    padding-bottom: var.$layout-margin;
+    padding-bottom: var.$layout-space;
   }
 
   &__header-icon {
-    margin-right: var.$layout-margin--small;
+    margin-right: var.$layout-space--small;
   }
 
   &__title {

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

@@ -11,7 +11,7 @@
 
 .annotation-body__collapse-toggle {
   @include layout.row(right);
-  @include layout.vertical-space(var.$layout-margin--small);
+  @include layout.vertical-space(var.$layout-space--small);
 
   .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 var.$layout-margin--small;
+    padding: 0 var.$layout-space--small;
   }
 
   // Timestamps are right aligned in a flex row

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

@@ -6,7 +6,7 @@
   @include utils.font--small;
   @include utils.border-top;
   // Space between border and text content
-  padding-top: var.$layout-margin--small;
+  padding-top: var.$layout-space--small;
 
   // Container with two icons (representing CC licenses)
   // with a very small amount of spacing between them
@@ -14,6 +14,6 @@
     @include layout.row;
     @include layout.horizontal-rhythm(1px);
     // Add space before text
-    margin-right: var.$layout-margin--xsmall;
+    margin-right: var.$layout-space--xsmall;
   }
 }

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

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

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

@@ -19,7 +19,7 @@
 
   &__icon-button {
     @include buttons.button--input;
-    padding: var.$layout-margin--xsmall var.$layout-margin--small;
+    padding: var.$layout-space--xsmall var.$layout-space--small;
   }
 
   &__form-input {
@@ -30,7 +30,7 @@
 
   &__permissions {
     @include utils.font--small;
-    margin: var.$layout-margin--small 0;
+    margin: var.$layout-space--small 0;
   }
 
   &__arrow {

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

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

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

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

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

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

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

@@ -9,9 +9,9 @@
 
   &__item {
     @include utils.border;
-    margin: var.$layout-margin--xsmall var.$layout-margin--small
-      var.$layout-margin--xsmall 0;
-    padding: 2px var.$layout-margin--small;
+    margin: var.$layout-space--xsmall var.$layout-space--small
+      var.$layout-space--xsmall 0;
+    padding: 2px var.$layout-space--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: var.$layout-margin;
+  margin-bottom: var.$layout-space;
 }

src/styles/sidebar/components/thread.scss

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

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

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

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

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

src/styles/sidebar/components/tutorial.scss

@@ -4,7 +4,7 @@
 
 .tutorial {
   &__list {
-    @include layout.vertical-rhythm(var.$layout-margin--small);
+    @include layout.vertical-rhythm(var.$layout-space--small);
   }
 
   &__icon {

src/styles/variables.scss

@@ -83,10 +83,10 @@ $touch-input-font-size: 16px;
 // Layout margins
 // -------------------------
 $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;
+$layout-space: 1em;
+$layout-space--xsmall: $layout-space / 4;
+$layout-space--small: $layout-space / 2;
+$layout-space--medium: $layout-space;
 
 // Minimum recommended size for tap targets on mobile.
 // This value originated from Apple's Human Interface Guidelines.