Merge pull request #2292 from hypothesis/refactor-spacing-scale

Adjust the scale of layout spacing

src/styles/mixins/layout.scss

@@ -82,7 +82,7 @@
 }
 
 /**
- * Establish vertical space outside of elements in the container
+ * Establish vertical space outside of elements within the container
  *
  * @param $size [var.$layout-space--medium]: Spacing size (padding)
  */
@@ -90,3 +90,13 @@
   padding-top: $size;
   padding-bottom: $size;
 }
+
+/**
+ * Establish horizontal space outside of elements within the container
+ *
+ * @param $size [var.$layout-space--medium]: Spacing size (padding)
+ */
+@mixin horizontal-space($size: var.$layout-space--medium) {
+  padding-left: $size;
+  padding-right: $size;
+}

src/styles/mixins/molecules.scss

@@ -103,7 +103,7 @@
   }
 
   &__header-icon {
-    margin-right: var.$layout-space--small;
+    margin-right: var.$layout-space--xsmall;
   }
 
   &__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-space--small);
+  @include layout.vertical-space(var.$layout-space--xsmall);
 
   .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-space--small;
+    padding: 0 var.$layout-space--xsmall;
   }
 
   // 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-space--small;
+  padding-top: var.$layout-space--xsmall;
 
   // 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-space--xsmall;
+    margin-right: var.$layout-space--xxsmall;
   }
 }

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

@@ -10,8 +10,7 @@
 
   &__cancel-button {
     @include buttons.button--labeled;
-    // TODO: Magic number
-    padding: 0.75em;
+    padding: var.$layout-space--small;
   }
 }
 
@@ -36,8 +35,7 @@
 
   &__primary {
     @include buttons.button--primary;
-    // TODO magic number
-    padding: 0.75em;
+    padding: var.$layout-space--small;
 
     // Turn off right-side border radius for alignment with menu label/button
     border-top-right-radius: 0;
@@ -48,12 +46,11 @@
   // when clicked
   &__menu-label {
     @include layout.row(center);
+    @include layout.horizontal-space(var.$layout-space--small);
     color: var.$color-text-inverted;
     background-color: var.$grey-mid;
     // Make sure label element takes up full available vertical space
     height: 100%;
-    // TODO magic number
-    padding: 0 0.75em;
 
     // Add border radius to the right to match the left side of the primary button
     border-top-right-radius: var.$border-radius;

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

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

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

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

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

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

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

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

src/styles/sidebar/components/thread.scss

@@ -6,7 +6,7 @@
   @include layout.row;
 
   &--reply {
-    margin-top: var.$layout-space--small;
+    margin-top: var.$layout-space--xsmall;
   }
 
   &--reply &__content {

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

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

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

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

src/styles/sidebar/components/tutorial.scss

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

src/styles/variables.scss

@@ -80,12 +80,12 @@ $line-height: 1.4;
 // this, iOS will zoom into the field when focused.
 $touch-input-font-size: 16px;
 
-// Layout margins
+// Layout spacing
 // -------------------------
-$layout-h-margin: 15px; // Legacy
 $layout-space: 1em;
-$layout-space--xsmall: $layout-space / 4;
-$layout-space--small: $layout-space / 2;
+$layout-space--xxsmall: $layout-space * (1/4);
+$layout-space--xsmall: $layout-space * (1/2);
+$layout-space--small: $layout-space * (3/4);
 $layout-space--medium: $layout-space;
 
 // Minimum recommended size for tap targets on mobile.