MOBILE-4362 bootstrap: Support basic button colors

src/theme/components/format-text.scss

@@ -113,10 +113,6 @@ core-format-text {
         padding: 10px 0;
     }
 
-    .btn-link {
-        background: none;
-    }
-
 }
 
 @keyframes loading {
@@ -679,6 +675,29 @@ core-rich-text-editor .core-rte-editor {
             background-color: var(--#{$color-name});
         }
     }
+
+    .btn-link {
+        background: none;
+    }
+
+    button, .btn {
+        margin: 4px 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        border-radius: var(--core-input-radius);
+        a {
+            color: inherit;
+        }
+    }
+
+    @each $color-name, $unused in $colors {
+        .btn.btn-#{$color-name} {
+            --color-base: var(--#{$color-name});
+            color: var(--#{$color-name}-shade);
+            border-color: var(--color-base);
+            background-color: var(--#{$color-name}-tint);
+        }
+    }
 }
 
 // h1 is too big and ugly, reduce size when loading.