Add border-radius variable

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/molecules.scss

@@ -11,7 +11,7 @@
 @mixin card-frame {
   @include utils.border;
   @include utils.shadow;
-  border-radius: 2px;
+  border-radius: var.$border-radius;
   background-color: var.$color-background;
 }
 

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;
@@ -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/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/tag-editor.scss

@@ -27,7 +27,7 @@
     @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;
   }
@@ -38,7 +38,7 @@
     color: var.$grey-mid;
     background-color: var.$grey-1;
     padding: 0 0.5em;
-    border-radius: 0 2px 2px 0;
+    border-radius: 0 var.$border-radius var.$border-radius 0;
 
     &:hover {
       background-color: var.$grey-2;

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

@@ -12,7 +12,7 @@
     margin: 0.25em 0.5em 0.25em 0;
     padding: 2px 0.5em;
     background: var.$grey-0;
-    border-radius: 2px;
+    border-radius: var.$border-radius;
   }
 
   &__link,

src/styles/variables.scss

@@ -108,6 +108,7 @@ $zindex-tooltip: 20;
 // -------------------------
 $bucket-bar-width: 22px;
 $top-bar-height: 40px;
+$border-radius: 2px;
 
 $color-border: $grey-3;
 $border-width: 1px;