various debugger style tweaks

Author: pfitzseb

lib/debugger/toolbar.js

@@ -8,19 +8,20 @@ export class DebuggerToolbar {
     this.subs = new CompositeDisposable()
 
     let group = document.createElement('div')
-    group.classList.add('btn-group', 'btn-group-sm')
+    group.classList.add('btn-group', 'btn-group-sm', 'ink-btn-group-variable-width')
     buttons.forEach((b) => group.appendChild(this.buttonView(b)))
 
     this.view = document.createElement('div')
     this.view.className = 'ink-debug-toolbar'
     this.view.appendChild(group)
   }
 
-  buttonView ({icon, text, tooltip, command}) {
+  buttonView ({icon, text, tooltip, command, color}) {
     let btn = document.createElement('button')
-    btn.classList.add('btn', 'btn-primary')
+    btn.classList.add('btn', 'ink-btn-variable-width')
     if (text) btn.innerText = text
     if (icon) btn.classList.add(`icon-${icon}`)
+    if (color) btn.classList.add(`btn-color-${color}`)
     btn.onclick = () => atom.commands.dispatch(atom.views.getView(atom.workspace), command)
     this.subs.add(atom.tooltips.add(btn, {
       title: tooltip,

styles/debugger.less

@@ -31,6 +31,18 @@
   .toolbar {
     padding: 0em 1em 0.5em 1em;
     line-height: 2.6em;
+    .ink-debug-toolbar {
+      width: 100%;
+      
+      .ink-btn-group-variable-width {
+        width: 100%;
+
+        .ink-btn-variable-width {
+          width: 14%;
+          min-width: 3em;
+        }
+      }
+    }
 
     .inner-toolbar {
       display: flex;

styles/ink.less

@@ -7,6 +7,23 @@
 @import "ui-variables";
 @import "syntax-variables";
 
+
+.btn {
+  &.btn-color-primary {}
+  &.btn-color-info {
+    color: @background-color-info;
+  }
+  &.btn-color-success {
+    color: @background-color-success;
+  }
+  &.btn-color-warning {
+      color: @background-color-warning;
+  }
+  &.btn-color-error {
+    color: @background-color-error;
+  }
+}
+
 .ink .markdown {
   font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;