Merge pull request #2266 from hypothesis/more-atomic-consolidation

Add additional atomic mixins, variables

src/styles/annotator/annotator.scss

@@ -2,7 +2,7 @@
 @use '../variables' as var;
 @use '../mixins/focus';
 @use '../mixins/reset';
-@use '../mixins/shadow';
+@use '../mixins/utils';
 
 // Shared components.
 @use '../components/svg-icon';
@@ -82,7 +82,7 @@ $sidebar-collapse-transition-time: 150ms;
     @include focus.outline-on-keyboard-focus;
 
     transition: background-color 0.25s;
-    @include shadow.smallshadow;
+    @include utils.shadow;
     background: var.$white;
     border: solid 1px var.$grey-3;
     border-radius: 4px;

src/styles/annotator/bucket-bar.scss

 @use "../mixins/reset";
-@use "../mixins/shadow";
+@use "../mixins/utils";
 @use "../variables" as var;
 
 // Bucket-bar styles are nested inside `.annotator-frame` to ensure they take
@@ -69,7 +69,7 @@
 
     &.lower,
     &.upper {
-      @include shadow.smallshadow;
+      @include utils.shadow;
       z-index: 1;
 
       &:before,

src/styles/mixins/buttons.scss

@@ -38,7 +38,7 @@
   @include reset-native-btn-styles;
   @include layout.row(center, center);
   padding: 0.5em;
-  border-radius: 2px;
+  border-radius: var.$border-radius;
   border: none;
 
   // Icon

src/styles/mixins/forms.scss

@@ -34,7 +34,7 @@
 @mixin form-input {
   @include utils.font--medium;
   @include utils.border;
-  border-radius: 2px;
+  border-radius: var.$border-radius;
   padding: 0.5em 0.75em;
   font-weight: normal;
   color: var.$color-text-light;
@@ -62,7 +62,7 @@
   background-color: var.$grey-mid;
   height: 35px;
   border: none;
-  border-radius: 2px;
+  border-radius: var.$border-radius;
 
   font-weight: bold;
 

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

@@ -10,8 +10,8 @@
  */
 @mixin card-frame {
   @include utils.border;
-  border-radius: 2px;
-  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+  @include utils.shadow;
+  border-radius: var.$border-radius;
   background-color: var.$color-background;
 }
 
@@ -23,11 +23,11 @@
 @mixin card {
   @include card-frame;
   @include layout.vertical-rhythm;
-  padding: 1em;
+  padding: var.$layout-margin;
 
   &:hover,
   &.is-focused {
-    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+    @include utils.active-shadow;
   }
 
   &--theme-clean {
@@ -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/mixins/shadow.scss

-@mixin smallshadow($a: 0, $b: 1px, $c: 0.1) {
-  box-shadow: $a $b 1px hsla(0, 0%, 0%, $c);
-}

src/styles/mixins/utils.scss

@@ -73,3 +73,11 @@
   font-size: var.$font-size--large;
   font-weight: 500;
 }
+
+@mixin shadow {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+@mixin active-shadow {
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+}

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

@@ -15,7 +15,6 @@
     $hover-background-color: var.$grey-6;
     $h-padding: 9px;
     $height: 35px;
-    $border-radius: 2px;
     $arrow-indicator-width: 26px;
 
     height: $height;
@@ -35,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;
@@ -67,8 +66,8 @@
 
       border: none;
       background-color: var.$grey-mid;
-      border-top-right-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: var.$border-radius;
+      border-bottom-right-radius: var.$border-radius;
 
       &:hover,
       button[aria-expanded='true'] & {

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/autocomplete-list.scss

 @use "../../variables" as var;
+@use "../../mixins/utils";
 
 .autocomplete-list {
   position: relative;
@@ -8,6 +9,7 @@
 }
 
 .autocomplete-list__items {
+  @include utils.shadow;
   @supports (clip-path: polygon(0 0, 100% 0, 0% 100%, 0% 100%)) {
     &:before {
       /**
@@ -34,7 +36,6 @@
   min-width: 10em;
   background-color: var.$white;
   border: 1px solid var.$grey-3;
-  box-shadow: var.$popup-menu-shadow;
   z-index: 10;
 
   @media (pointer: coarse) {

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/markdown-editor.scss

@@ -14,7 +14,7 @@
   border-bottom: none;
 
   background-color: white;
-  border-radius: 0.15em 0.15em 0 0;
+  border-radius: var.$border-radius var.$border-radius 0 0;
   width: 100%;
   margin-bottom: -0.1em;
   padding: 5px 5px;

src/styles/sidebar/components/menu.scss

@@ -73,8 +73,8 @@
 .menu__content {
   @include utils.font--large;
   @include utils.border;
+  @include utils.shadow;
   background-color: white;
-  box-shadow: var.$popup-menu-shadow;
   position: absolute;
   top: calc(100% + 5px);
   z-index: 1;

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,21 +15,22 @@
   &__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 {
     @include utils.border;
     color: var.$color-text;
     background: var.$grey-1;
-    border-radius: 2px 0 0 2px;
+    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,8 +38,8 @@
     @include utils.border;
     color: var.$grey-mid;
     background-color: var.$grey-1;
-    padding: 0 0.5em;
-    border-radius: 0 2px 2px 0;
+    padding: 0 var.$layout-margin--small;
+    border-radius: 0 var.$border-radius var.$border-radius 0;
 
     &:hover {
       background-color: var.$grey-2;

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

@@ -9,10 +9,11 @@
 
   &__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: 2px;
+    border-radius: var.$border-radius;
   }
 
   &__link,

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.
@@ -108,7 +100,7 @@ $zindex-tooltip: 20;
 // -------------------------
 $bucket-bar-width: 22px;
 $top-bar-height: 40px;
-$popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+$border-radius: 2px;
 
 $color-border: $grey-3;
 $border-width: 1px;
@@ -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;