Add border mixins

src/styles/mixins/buttons.scss

@@ -19,6 +19,7 @@
  */
 @use "./focus";
 @use "./layout";
+@use "./utils";
 @use "../variables" as var;
 
 @mixin reset-native-btn-styles {
@@ -108,12 +109,12 @@
  */
 @mixin button--input {
   @include button;
+  @include utils.border;
   color: var.$grey-mid;
   padding: 0.5em 0.75em;
   background-color: var.$grey-1;
 
   border-radius: 0; // Turn off border-radius to align with <input> edges
-  border: 1px solid var.$grey-3;
   border-left: 0; // Avoid double border with the <input>
 
   &:hover {

src/styles/mixins/forms.scss

-@use "../mixins/focus";
+@use "./focus";
+@use "./utils";
 @use "../variables" as var;
 
 /* Style input placeholders */
@@ -32,7 +33,7 @@
 
 @mixin form-input {
   @include var.font-normal;
-  border: 1px solid var.$grey-3;
+  @include utils.border;
   border-radius: 2px;
   padding: 0.5em 0.75em;
   font-weight: normal;

src/styles/mixins/links.scss

 @use "../variables" as var;
 @use "./layout";
+@use "./utils";
 
 /**
  * horizontally-oriented collection of linked icons
  */
 @mixin footer-links {
   @include layout.row(center);
+  @include utils.border-top;
   padding-top: 8px;
-  border-top: 1px solid var.$grey-3;
 
   &__icon {
     @include layout.row;

src/styles/mixins/panel.scss

 @use "../variables" as var;
 @use "./buttons";
 @use "./layout";
+@use "./utils";
 
 /**
  * Base styles for a "panel"-like element, with appropriate
  * padding, heading and close-button styles.
  */
 @mixin panel {
+  @include utils.border;
   background-color: var.$color-background;
-  border: solid 1px var.$grey-3;
   border-radius: 2px;
 
   &__header {
     @include layout.row($align: center);
+    @include utils.border-bottom;
     padding: 1em 0;
     margin: 0 1em;
-    border: 1px none var.$grey-3;
-    border-bottom-style: solid;
   }
 
   &__header-icon {

src/styles/mixins/utils.scss

+@use "../variables" as var;
+
+@mixin border {
+  border: var.$border-width solid var.$color-border;
+}
+
+@mixin border-top {
+  border-top: var.$border-width solid var.$color-border;
+}
+
+@mixin border-right {
+  border-right: var.$border-width solid var.$color-border;
+}
+
+@mixin border-bottom {
+  border-bottom: var.$border-width solid var.$color-border;
+}
+
+@mixin border-left {
+  border-left: 1px var.$border-width var.$color-border;
+}

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

 @use "../../variables" as var;
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 
 .annotation-license {
   @include var.font-small;
-  border-top: 1px solid var.$grey-3;
+  @include utils.border-top;
   padding-top: 0.5em;
 
   &__link {

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

@@ -6,7 +6,7 @@
   }
 
   &__quote {
-    border-left: 3px solid var.$grey-3;
+    border-left: 3px solid var.$color-border;
     color: var.$color-text-light;
     font-style: italic;
     padding: 0 1em;

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

 @use "../../mixins/focus";
 @use "../../mixins/forms";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 // A dark grey button used for the primary action
 // in a form
 .focused-mode-header {
   @include layout.row($align: center);
+  @include utils.border;
   position: relative;
 
   background-color: var.$color-background;
   border-radius: 2px;
-  border: solid 1px var.$grey-3;
   font-weight: 300;
   margin-bottom: 0.72em;
   padding: 0.5em 1em;

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

 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .help-panel {
@@ -11,9 +12,9 @@
   }
 
   &__content {
+    @include utils.border-top;
+    @include utils.border-bottom;
     padding: 0.5em;
-    border-top: 1px solid var.$grey-3;
-    border-bottom: 1px solid var.$grey-3;
 
     a {
       text-decoration: underline;
@@ -50,9 +51,9 @@
 
     &__tab {
       @include var.font-big;
+      @include utils.border-right;
       flex: 1 1 0px;
       margin-top: 0.5em;
-      border-right: 1px solid var.$grey-3;
       text-align: center;
       color: var.$color-text-light;
 

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

 @use "../../mixins/buttons";
 @use "../../mixins/forms";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
-$toolbar-border: 0.1em solid var.$grey-3;
-
 .markdown-editor__toolbar {
   @include layout.row;
-
   // Toolbar buttons wrap on non-touch devices if they don't fit. We don't use
   // scrolling because that's less convenient to use with a mouse/touchpad.
   flex-wrap: wrap;
 
-  background-color: white;
-  border: $toolbar-border;
+  @include utils.border;
   border-bottom: none;
+
+  background-color: white;
   border-radius: 0.15em 0.15em 0 0;
   width: 100%;
   margin-bottom: -0.1em;
@@ -46,7 +45,7 @@ $toolbar-border: 0.1em solid var.$grey-3;
 }
 
 .markdown-editor__preview {
-  border: $toolbar-border;
+  @include utils.border;
   background-color: var.$grey-1;
   padding: 10px;
 }

src/styles/sidebar/components/menu-item.scss

 @use "sass:color";
 @use "../../mixins/focus";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 $menu-item-padding: 10px;
@@ -60,9 +61,9 @@ a.menu-item:hover {
   }
 
   &.is-expanded {
+    @include utils.border-bottom;
     background-color: var.$grey-1;
     color: var.$color-text;
-    border-bottom: solid 1px var.$grey-3;
     &:hover {
       background-color: var.$grey-3;
     }
@@ -141,7 +142,7 @@ a.menu-item:hover {
 
 // The container for open submenus
 .menu-item__submenu {
-  border-bottom: solid 1px var.$grey-3;
+  @include utils.border-bottom;
   &:hover {
     // Make it a bit darker on hover.
     background-color: var.$grey-3;

src/styles/sidebar/components/menu-section.scss

 @use "../../variables" as var;
+@use "../../mixins/utils";
 
 .menu-section__content {
-  border-bottom: solid 1px var.$grey-3;
+  @include utils.border-bottom;
 }
 
 .menu-section__heading {

src/styles/sidebar/components/menu.scss

 @use "../../mixins/focus";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .menu {
@@ -72,8 +73,8 @@
 // Content area of the menu.
 .menu__content {
   @include var.font-big;
+  @include utils.border;
   background-color: white;
-  border: 1px solid var.$grey-3;
   box-shadow: var.$popup-menu-shadow;
   position: absolute;
   top: calc(100% + 5px);

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

 @use "../../mixins/focus";
 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .selection-tabs-container {
@@ -63,8 +64,8 @@
 }
 
 .selection-tabs__message {
+  @include utils.border;
   color: var.$color-text;
-  border: 1px solid var.$grey-3;
   padding: 2em;
   text-align: center;
 }

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

 @use "../../mixins/forms";
 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .tag-editor {
@@ -23,9 +24,9 @@
   }
 
   &__edit {
+    @include utils.border;
     color: var.$color-text;
     background: var.$grey-1;
-    border: 1px solid var.$grey-3;
     border-radius: 2px 0 0 2px;
     border-right-width: 0;
     padding: 2px 0.5em;
@@ -33,10 +34,10 @@
 
   &__delete {
     @include buttons.button;
+    @include utils.border;
     color: var.$grey-mid;
     background-color: var.$grey-1;
     padding: 0 0.5em;
-    border: 1px solid var.$grey-3;
     border-radius: 0 2px 2px 0;
 
     &:hover {

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

 @use "../../variables" as var;
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 
 .tag-list {
   @include layout.row;
@@ -7,10 +8,10 @@
   margin: 1em 0;
 
   &__item {
+    @include utils.border;
     margin: 0.25em 0.5em 0.25em 0;
     padding: 2px 0.5em;
     background: var.$grey-0;
-    border: 1px solid var.$grey-3;
     border-radius: 2px;
   }
 

src/styles/sidebar/components/thread.scss

@@ -24,14 +24,14 @@
   // Left "channel" of thread
   &__collapse {
     margin-right: 1em;
-    border-right: 1px dashed var.$grey-3;
+    border-right: 1px dashed var.$color-border;
     // The entire channel is NOT clickable so don't make it look like it is
     // (overrides `pointer` cursor applied to entire card)
     cursor: auto;
 
     // Darken thread line on hover as a visual cue to show related thread items
     &:hover {
-      border-right: 1px dashed var.$grey-4;
+      border-color: var.$grey-4;
     }
 
     .is-collapsed & {

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

 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/utils";
 @use "../../variables" as var;
 
 .top-bar {
   @include var.font-big;
+  @include utils.border-bottom;
   color: var.$grey-mid;
   background: var.$white;
-  border-bottom: solid 1px var.$grey-3;
   height: var.$top-bar-height;
   position: absolute;
   left: 0;

src/styles/variables.scss

@@ -104,6 +104,9 @@ $bucket-bar-width: 22px;
 $top-bar-height: 40px;
 $popup-menu-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 
+$color-border: $grey-3;
+$border-width: 1px;
+
 // Mixins
 // ------