created new color variables, changed primary to blue, changed success-btns to primary-btns.

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -69,8 +69,8 @@ export class AxisSelector extends React.PureComponent<AxisSelectorProps, AxisSel
   }
 
   render() {
-    const leftButtonClass = this.state.yaxis === 1 ? 'btn-success' : 'btn-inverse';
-    const rightButtonClass = this.state.yaxis === 2 ? 'btn-success' : 'btn-inverse';
+    const leftButtonClass = this.state.yaxis === 1 ? 'btn-primary' : 'btn-inverse';
+    const rightButtonClass = this.state.yaxis === 2 ? 'btn-primary' : 'btn-inverse';
 
     return (
       <div className="p-b-1">

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -29,14 +29,14 @@
 
   &:hover {
     .panel-options-group__add-circle {
-      background-color: $btn-success-bg;
+      background-color: $btn-primary-bg;
       color: $text-color-strong;
     }
   }
 }
 
 .panel-options-group__add-circle {
-  @include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color);
+  @include gradientBar($btn-primary-bg, $btn-primary-bg-hl, #fff);
 
   border-radius: 50px;
   width: 20px;

packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss

@@ -21,7 +21,7 @@
 }
 
 .thresholds-row-add-button {
-  @include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color);
+  @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl, #fff);
 
   align-self: center;
   margin-right: 5px;

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -20,7 +20,7 @@ class EmptyListCTA extends Component<Props, any> {
     return (
       <div className="empty-list-cta">
         <div className="empty-list-cta__title">{title}</div>
-        <a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-success">
+        <a onClick={onClick} href={buttonLink} className="empty-list-cta__button btn btn-xlarge btn-primary">
           <i className={buttonIcon} />
           {buttonTitle}
         </a>

public/app/core/components/EmptyListCTA/__snapshots__/EmptyListCTA.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`EmptyListCTA renders correctly 1`] = `
     Title
   </div>
   <a
-    className="empty-list-cta__button btn btn-xlarge btn-success"
+    className="empty-list-cta__button btn btn-xlarge btn-primary"
     href="http://url/to/destination"
     onClick={[MockFunction]}
   >

public/app/core/components/OrgActionBar/OrgActionBar.tsx

@@ -35,7 +35,7 @@ export default class OrgActionBar extends PureComponent<Props> {
           <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
         </div>
         <div className="page-action-bar__spacer" />
-        <a className="btn btn-success" {...linkProps}>
+        <a className="btn btn-primary" {...linkProps}>
           {linkButton.title}
         </a>
       </div>

public/app/core/components/OrgActionBar/__snapshots__/OrgActionBar.test.tsx.snap

@@ -29,7 +29,7 @@ exports[`Render should render component 1`] = `
     className="page-action-bar__spacer"
   />
   <a
-    className="btn btn-success"
+    className="btn btn-primary"
     href="some/url"
     target="_blank"
   >

public/app/core/components/PermissionList/AddPermission.tsx

@@ -130,7 +130,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
             </div>
 
             <div className="gf-form">
-              <button data-save-permission className="btn btn-success" type="submit" disabled={!isValid}>
+              <button data-save-permission className="btn btn-primary" type="submit" disabled={!isValid}>
                 Save
               </button>
             </div>

public/app/core/components/SharedPreferences/SharedPreferences.tsx

@@ -126,7 +126,7 @@ export class SharedPreferences extends PureComponent<Props, State> {
           />
         </div>
         <div className="gf-form-button-row">
-          <button type="submit" className="btn btn-success">
+          <button type="submit" className="btn btn-primary">
             Save
           </button>
         </div>

public/app/core/components/manage_dashboards/manage_dashboards.html

@@ -5,15 +5,15 @@
       <i class="gf-form-input-icon fa fa-search"></i>
     </label>
     <div class="page-action-bar__spacer"></div>
-    <a class="btn btn-success" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
+    <a class="btn btn-primary" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
       <i class="fa fa-plus"></i>
       Dashboard
     </a>
-    <a class="btn btn-success" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
+    <a class="btn btn-primary" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
       <i class="fa fa-plus"></i>
       Folder
     </a>
-    <a class="btn btn-success" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
+    <a class="btn btn-primary" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
       <i class="fa fa-plus"></i>
       Import
     </a>

public/app/features/admin/partials/edit_org.html

@@ -10,7 +10,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
+			<button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
 		</div>
 	</form>
 

public/app/features/admin/partials/edit_user.html

@@ -21,7 +21,7 @@
 			</div>
 
 			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
+				<button type="submit" class="btn btn-primary" ng-click="update()" ng-show="!createMode">Update</button>
 			</div>
 	</form>
 
@@ -34,7 +34,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="setPassword()">Update</button>
+			<button type="submit" class="btn btn-primary" ng-click="setPassword()">Update</button>
 		</div>
 	</form>
 
@@ -46,7 +46,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="updatePermissions()">Update</button>
+			<button type="submit" class="btn btn-primary" ng-click="updatePermissions()">Update</button>
 		</div>
 	</form>
 
@@ -65,7 +65,7 @@
         	</span>
 			</div>
 			<div class="gf-form">
-				<button class="btn btn-success gf-form-btn" ng-click="addOrgUser()">Add</button>
+				<button class="btn btn-primary gf-form-btn" ng-click="addOrgUser()">Add</button>
 			</div>
 		</div>
 	</form>

public/app/features/admin/partials/new_user.html

@@ -24,7 +24,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="create()">Create</button>
+			<button type="submit" class="btn btn-primary" ng-click="create()">Create</button>
 		</div>
 	</form>
 </div>

public/app/features/admin/partials/orgs.html

@@ -3,7 +3,7 @@
 <div class="page-container page-body">
   <div class="page-action-bar">
     <div class="page-action-bar__spacer"></div>
-    <a class="page-header__cta btn btn-success" href="org/new">
+    <a class="page-header__cta btn btn-primary" href="org/new">
       <i class="fa fa-plus"></i>
       New Org
     </a>

public/app/features/admin/partials/users.html

@@ -7,7 +7,7 @@
       <i class="gf-form-input-icon fa fa-search"></i>
     </label>
     <div class="page-action-bar__spacer"></div>
-    <a class="btn btn-success" href="admin/users/create">
+    <a class="btn btn-primary" href="admin/users/create">
       <i class="fa fa-plus"></i>
       Add new user
     </a>

public/app/features/alerting/partials/notification_edit.html

@@ -68,7 +68,7 @@
     </div>
 
     <div class="gf-form-group gf-form-button-row">
-			<button type="submit" ng-click="ctrl.save()" class="btn btn-success width-7">Save</button>
+			<button type="submit" ng-click="ctrl.save()" class="btn btn-primary width-7">Save</button>
 			<button type="submit" ng-click="ctrl.testNotification()" class="btn btn-secondary width-7">Send Test</button>
 			<a href="alerting/notifications" class="btn btn-inverse">Back</a>
     </div>

public/app/features/alerting/partials/notifications_list.html

@@ -7,7 +7,7 @@
       <div class="page-action-bar__spacer">
       </div>
 
-      <a href="alerting/notification/new" class="btn btn-success">
+      <a href="alerting/notification/new" class="btn btn-primary">
         <i class="fa fa-plus"></i>
         New Channel
       </a>

public/app/features/annotations/partials/editor.html

@@ -9,7 +9,7 @@
 	<div ng-if="ctrl.mode === 'list'">
 		<div class="page-action-bar" ng-if="ctrl.annotations.length > 1">
 			<div class="page-action-bar__spacer"></div>
-			<a type="button" class="btn btn-success" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a>
+			<a type="button" class="btn btn-primary" ng-click="ctrl.setupNew();"><i class="fa fa-plus" ></i> New</a>
 		</div>
 
 		<table class="filter-table filter-table--hover">
@@ -48,7 +48,7 @@
 		<div ng-if="ctrl.annotations.length === 1" class="p-t-2">
 			<div class="empty-list-cta">
 				<div class="empty-list-cta__title">There are no custom annotation queries added yet</div>
-				<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
+				<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
 					<i class="gicon gicon-add-annotation"></i>
 					Add Annotation Query
 				</a>
@@ -105,8 +105,8 @@
 
 		<div class="gf-form">
 			<div class="gf-form-button-row p-y-0">
-				<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button>
-				<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button>
+				<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-primary" ng-click="ctrl.add()">Add</button>
+				<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-primary pull-left" ng-click="ctrl.update()">Update</button>
 			</div>
 		</div>
 	</div>

public/app/features/annotations/partials/event_editor.html

@@ -26,7 +26,7 @@
 			</div>
 
 			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-click="ctrl.save()">Save</button>
+				<button type="submit" class="btn btn-primary" ng-click="ctrl.save()">Save</button>
 				<button ng-if="ctrl.event.id" type="submit" class="btn btn-danger" ng-click="ctrl.delete()">Delete</button>
 				<a class="btn-text" ng-click="ctrl.close();">Cancel</a>
 			</div>

public/app/features/api-keys/ApiKeysPage.tsx

@@ -169,7 +169,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
                 </span>
               </div>
               <div className="gf-form">
-                <button className="btn gf-form-btn btn-success">Add</button>
+                <button className="btn gf-form-btn btn-primary">Add</button>
               </div>
             </div>
           </form>
@@ -199,7 +199,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
           </div>
 
           <div className="page-action-bar__spacer" />
-          <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
+          <button className="btn btn-primary pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
             <i className="fa fa-plus" /> Add API Key
           </button>
         </div>

public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap

@@ -137,7 +137,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
                 className="gf-form"
               >
                 <button
-                  className="btn gf-form-btn btn-success"
+                  className="btn gf-form-btn btn-primary"
                 >
                   Add
                 </button>

public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

@@ -142,7 +142,7 @@ export class AddPanelWidget extends React.Component<Props, State> {
             </button>
           </div>
           <div className="add-panel-widget__btn-container">
-            <button className="btn-success btn btn-large" onClick={this.onCreateNewPanel}>
+            <button className="btn-primary btn btn-large" onClick={this.onCreateNewPanel}>
               Edit Panel
             </button>
             {addCopyButton}

public/app/features/dashboard/components/DashExportModal/template.html

@@ -12,7 +12,7 @@
 		</gf-form-switch>
 
 		<div class="gf-form-button-row">
-			<button type="button" class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.saveDashboardAsFile()">
+			<button type="button" class="btn gf-form-btn width-10 btn-primary" ng-click="ctrl.saveDashboardAsFile()">
 				<i class="fa fa-save"></i> Save to file
 			</button>
 			<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.viewJson()">

public/app/features/dashboard/components/DashLinks/editor.html

@@ -10,7 +10,7 @@
       <div class="empty-list-cta__title">
         There are no dashboard links added yet
       </div>
-      <a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
+      <a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
         <i class="gicon gicon-add-link"></i>
         Add Dashboard Link
       </a>
@@ -26,7 +26,7 @@
   <div ng-if="ctrl.dashboard.links.length > 0">
     <div class="page-action-bar">
       <div class="page-action-bar__spacer"></div>
-      <a type="button" class="btn btn-success" ng-click="ctrl.setupNew()">
+      <a type="button" class="btn btn-primary" ng-click="ctrl.setupNew()">
         <i class="fa fa-plus"></i> New</a>
     </div>
     <table class="filter-table filter-table--hover">
@@ -126,10 +126,10 @@
       </div>
     </div>
   </div>
-  <button class="btn btn-success" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink()">
+  <button class="btn btn-primary" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink()">
     Add
   </button>
-  <button class="btn btn-success" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()">
+  <button class="btn btn-primary" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()">
     Update
   </button>
 </div>

public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx

@@ -76,7 +76,7 @@ export class DashboardPermissions extends PureComponent<Props, State> {
               </div>
             </Tooltip>
             <div className="page-action-bar__spacer" />
-            <button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
+            <button className="btn btn-primary pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
               <i className="fa fa-plus" /> Add Permission
             </button>
           </div>

public/app/features/dashboard/components/DashboardSettings/template.html

@@ -10,7 +10,7 @@
 	</a>
 
 	<div class="dashboard-settings__aside-actions">
-    <button class="btn btn-success" ng-click="ctrl.saveDashboard()" ng-show="ctrl.canSave">
+    <button class="btn btn-primary" ng-click="ctrl.saveDashboard()" ng-show="ctrl.canSave">
 			<i class="fa fa-save"></i> Save
 		</button>
 		<button class="btn btn-inverse" ng-click="ctrl.openSaveAsModal()" ng-show="ctrl.canSaveAs">
@@ -100,7 +100,7 @@
 	</div>
 
   <div class="gf-form-button-row">
-    <button class="btn btn-success" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave">
+    <button class="btn btn-primary" ng-click="ctrl.saveDashboardJson()" ng-show="ctrl.canSave">
       <i class="fa fa-save"></i> Save Changes
     </button>
   </div>
@@ -128,7 +128,7 @@
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'make_editable'">
   <h3 class="dashboard-settings__header">Make Editable</h3>
 
-  <button class="btn btn-success" ng-click="ctrl.makeEditable()">
+  <button class="btn btn-primary" ng-click="ctrl.makeEditable()">
     Make Editable
   </button>
 </div>

public/app/features/dashboard/components/ExportDataModal/template.html

@@ -29,7 +29,7 @@
     </div>
 
     <div class="gf-form-button-row text-center">
-      <a class="btn btn-success" ng-click="ctrl.export();">Export</a>
+      <a class="btn btn-primary" ng-click="ctrl.export();">Export</a>
       <a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
     </div>
   </div>

public/app/features/dashboard/components/RowOptions/template.html

@@ -22,7 +22,7 @@
 			</div>
 
 			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button>
+				<button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Update</button>
 				<button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
 			</div>
 		</div>

public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.ts

@@ -32,7 +32,7 @@ const template = `
 		</div>
 
 		<div class="gf-form-button-row text-center">
-			<button type="submit" class="btn btn-success" ng-click="ctrl.save()" ng-disabled="!ctrl.isValidFolderSelection">Save</button>
+			<button type="submit" class="btn btn-primary" ng-click="ctrl.save()" ng-disabled="!ctrl.isValidFolderSelection">Save</button>
 			<a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
 		</div>
 	</form>

public/app/features/dashboard/components/SaveModals/SaveDashboardModalCtrl.ts

@@ -52,8 +52,8 @@ const template = `
       <button
         id="saveBtn"
         type="submit"
-        class="btn btn-success"
-        ng-class="{'btn-success--processing': ctrl.isSaving}"
+        class="btn btn-primary"
+        ng-class="{'btn-primary--processing': ctrl.isSaving}"
         ng-disabled="ctrl.saveForm.$invalid || ctrl.isSaving"
       >
         <span ng-if="!ctrl.isSaving">Save</span>

public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts

@@ -26,7 +26,7 @@ const template = `
         <code-editor content="ctrl.dashboardJson" data-mode="json" data-max-lines=15></code-editor>
       </div>
       <div class="gf-form-button-row">
-        <button class="btn btn-success" clipboard-button="ctrl.getJsonForClipboard()">
+        <button class="btn btn-primary" clipboard-button="ctrl.getJsonForClipboard()">
           <i class="fa fa-clipboard"></i>&nbsp;Copy JSON to Clipboard
         </button>
         <button class="btn btn-secondary" clipboard-button="ctrl.save()">

public/app/features/dashboard/components/ShareModal/template.html

@@ -163,7 +163,7 @@
 				</div>
 
 				<div ng-if="step === 1" class="gf-form-button-row">
-					<button class="btn gf-form-btn width-10 btn-success" ng-click="createSnapshot()" ng-disabled="loading">
+					<button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading">
 						<i class="fa fa-save"></i>
 						Local Snapshot
 					</button>

public/app/features/dashboard/components/UnsavedChangesModal/UnsavedChangesModalCtrl.ts

@@ -20,7 +20,7 @@ const template = `
     </div>
 
     <div class="confirm-modal-buttons">
-      <button type="button" class="btn btn-success" ng-click="ctrl.save()">Save</button>
+      <button type="button" class="btn btn-primary" ng-click="ctrl.save()">Save</button>
       <button type="button" class="btn btn-danger" ng-click="ctrl.discard()">Discard</button>
       <button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
     </div>

public/app/features/dashboard/components/VersionHistory/template.html

@@ -64,7 +64,7 @@
             Show more versions
           </button>
           <button type="button"
-                  class="btn btn-success"
+                  class="btn btn-primary"
                   ng-if="ctrl.revisions.length > 1"
                   ng-disabled="!ctrl.canCompare"
                   ng-click="ctrl.getDiff(ctrl.diff)"

public/app/features/datasources/settings/ButtonRow.tsx

@@ -9,7 +9,7 @@ export interface Props {
 const ButtonRow: FC<Props> = ({ isReadOnly, onDelete, onSubmit }) => {
   return (
     <div className="gf-form-button-row">
-      <button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}>
+      <button type="submit" className="btn btn-primary" disabled={isReadOnly} onClick={event => onSubmit(event)}>
         Save &amp; Test
       </button>
       <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={onDelete}>

public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Render should render component 1`] = `
   className="gf-form-button-row"
 >
   <button
-    className="btn btn-success"
+    className="btn btn-primary"
     disabled={true}
     onClick={[Function]}
     type="submit"
@@ -34,7 +34,7 @@ exports[`Render should render with buttons enabled 1`] = `
   className="gf-form-button-row"
 >
   <button
-    className="btn btn-success"
+    className="btn btn-primary"
     disabled={false}
     onClick={[Function]}
     type="submit"

public/app/features/folders/FolderPermissions.tsx

@@ -89,7 +89,7 @@ export class FolderPermissions extends PureComponent<Props, State> {
               </div>
             </Tooltip>
             <div className="page-action-bar__spacer" />
-            <button className="btn btn-success pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
+            <button className="btn btn-primary pull-right" onClick={this.onOpenAddPermissions} disabled={isAdding}>
               <i className="fa fa-plus" /> Add Permission
             </button>
           </div>

public/app/features/folders/FolderSettingsPage.tsx

@@ -82,7 +82,7 @@ export class FolderSettingsPage extends PureComponent<Props, State> {
                   />
                 </div>
                 <div className="gf-form-button-row">
-                  <button type="submit" className="btn btn-success" disabled={!folder.canSave || !folder.hasChanged}>
+                  <button type="submit" className="btn btn-primary" disabled={!folder.canSave || !folder.hasChanged}>
                     <i className="fa fa-save" /> Save
                   </button>
                   <button className="btn btn-danger" onClick={this.onDelete} disabled={!folder.canSave}>

public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap

@@ -41,7 +41,7 @@ exports[`Render should enable save button 1`] = `
             className="gf-form-button-row"
           >
             <button
-              className="btn btn-success"
+              className="btn btn-primary"
               disabled={false}
               type="submit"
             >
@@ -109,7 +109,7 @@ exports[`Render should render component 1`] = `
             className="gf-form-button-row"
           >
             <button
-              className="btn btn-success"
+              className="btn btn-primary"
               disabled={true}
               type="submit"
             >

public/app/features/folders/partials/create_folder.html

@@ -25,7 +25,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
+			<button type="submit" class="btn btn-primary width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
 				<i class="fa fa-save"></i> Create
 			</button>
 		</div>

public/app/features/manage-dashboards/components/MoveToFolderModal/template.html

@@ -26,7 +26,7 @@
       </div>
     </div>
     <div class="gf-form-button-row text-center">
-      <button type="submit" class="btn btn-success" ng-disabled="ctrl.saveForm.$invalid || !ctrl.isValidFolderSelection">Move</button>
+      <button type="submit" class="btn btn-primary" ng-disabled="ctrl.saveForm.$invalid || !ctrl.isValidFolderSelection">Move</button>
       <a class="btn-text" ng-click="ctrl.dismiss();">Cancel</a>
     </div>
   </form>

public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts

@@ -4,7 +4,7 @@ import angular from 'angular';
 
 const template = `
 <input type="file" id="dashupload" name="dashupload" class="hide" onchange="angular.element(this).scope().file_selected"/>
-<label class="btn btn-success" for="dashupload">
+<label class="btn btn-primary" for="dashupload">
   <i class="fa fa-upload"></i>
   {{btnText}}
 </label>

public/app/features/manage-dashboards/partials/dashboard_import.html

@@ -146,7 +146,7 @@
     </div>
 
     <div class="gf-form-button-row">
-      <button type="button" class="btn btn-success width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
+      <button type="button" class="btn btn-primary width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
         <i class="fa fa-save"></i> Import
       </button>
       <button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">

public/app/features/org/OrgProfile.tsx

@@ -32,7 +32,7 @@ const OrgProfile: FC<Props> = ({ onSubmit, onOrgNameChange, orgName }) => {
           </div>
         </div>
         <div className="gf-form-button-row">
-          <button type="submit" className="btn btn-success">
+          <button type="submit" className="btn btn-primary">
             Save
           </button>
         </div>

public/app/features/org/__snapshots__/OrgProfile.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`Render should render component 1`] = `
       className="gf-form-button-row"
     >
       <button
-        className="btn btn-success"
+        className="btn btn-primary"
         type="submit"
       >
         Save

public/app/features/org/partials/invite.html

@@ -28,7 +28,7 @@
 			<gf-form-switch class="gf-form" label="Send invite email" checked="ctrl.invite.sendEmail" label-class="width-10"></gf-form-switch>
 
 			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-click="ctrl.sendInvite();">Invite</button>
+				<button type="submit" class="btn btn-primary" ng-click="ctrl.sendInvite();">Invite</button>
 				<a class="btn btn-inverse" href="org/users">Back</a>
 			</div>
 	</form>

public/app/features/org/partials/newOrg.html

@@ -15,7 +15,7 @@
 			</div>
 			<br>
 			<div class="gf-form-buttons-row">
-				<button type="submit" class="btn btn-success" ng-click="createOrg()">Create</button>
+				<button type="submit" class="btn btn-primary" ng-click="createOrg()">Create</button>
 			</div>
 		</div>
 	</form>

public/app/features/org/partials/select_org.html

@@ -14,7 +14,7 @@
 
 			<div style="display: inline-block; width: 400px; margin: 30px 0">
 				<div ng-repeat="org in orgs">
-					<a ng-click="setUsingOrg(org)" class="btn btn-success">
+					<a ng-click="setUsingOrg(org)" class="btn btn-primary">
 						{{org.name}} ({{org.role}})
 					</a>
 				</div>

public/app/features/playlist/partials/playlist.html

@@ -95,8 +95,8 @@
 	<div class="clearfix"></div>
 
 	<div class="gf-form-button-row">
-		<a class="btn btn-success" ng-show="ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create</a>
-		<a class="btn btn-success" ng-show="!ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
+		<a class="btn btn-primary" ng-show="ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Create</a>
+		<a class="btn btn-primary" ng-show="!ctrl.isNew" ng-disabled="ctrl.playlistEditForm.$invalid || ctrl.isPlaylistEmpty()" ng-click="ctrl.savePlaylist(ctrl.playlist, ctrl.playlistItems)">Save</a>
 		<a class="btn-text" ng-click="ctrl.backToList()">Cancel</a>
 	</div>
 </div>

public/app/features/playlist/partials/playlists.html

@@ -4,7 +4,7 @@
   <div ng-if="ctrl.playlists.length > 0">
     <div class="page-action-bar">
       <div class="page-action-bar__spacer"></div>
-      <a class="btn btn-success pull-right" href="playlists/create">
+      <a class="btn btn-primary pull-right" href="playlists/create">
         <i class="fa fa-plus"></i>
         New Playlist
       </a>

public/app/features/plugins/partials/plugin_edit.html

@@ -13,8 +13,8 @@
           <plugin-component type="app-config-ctrl"></plugin-component>
 
           <div class="gf-form-button-row">
-            <button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
-            <button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
+            <button type="submit" class="btn btn-primary" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
+            <button type="submit" class="btn btn-primary" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
             <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
           </div>
         </div>

public/app/features/profile/partials/change_password.html

@@ -26,7 +26,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="changePassword()">Change Password</button>
+			<button type="submit" class="btn btn-primary" ng-click="changePassword()">Change Password</button>
 			<a class="btn-text" href="profile">Cancel</a>
 		</div>
 	</form>

public/app/features/profile/partials/profile.html

@@ -20,7 +20,7 @@
       <i ng-if="ctrl.readonlyLoginFields" class="fa fa-lock gf-form-icon--right-absolute" bs-tooltip="'Login Details Locked - managed in another system.'"></i>
     </div>
     <div class="gf-form-button-row">
-      <button type="submit" class="btn btn-success" ng-click="ctrl.update()">Save</button>
+      <button type="submit" class="btn btn-primary" ng-click="ctrl.update()">Save</button>
     </div>
   </form>
 

public/app/features/teams/TeamGroupSync.tsx

@@ -84,7 +84,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           </Tooltip>
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
-            <button className="btn btn-success pull-right" onClick={this.onToggleAdding}>
+            <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
               <i className="fa fa-plus" /> Add group
             </button>
           )}
@@ -108,7 +108,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
               </div>
 
               <div className="gf-form">
-                <button className="btn btn-success gf-form-btn" type="submit" disabled={!this.isNewGroupValid()}>
+                <button className="btn btn-primary gf-form-btn" type="submit" disabled={!this.isNewGroupValid()}>
                   Add group
                 </button>
               </div>
@@ -120,7 +120,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           !isAdding && (
             <div className="empty-list-cta">
               <div className="empty-list-cta__title">There are no external groups to sync with</div>
-              <button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-success">
+              <button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
                 <i className="gicon gicon-add-team" />
                 Add Group
               </button>

public/app/features/teams/TeamList.tsx

@@ -103,7 +103,7 @@ export class TeamList extends PureComponent<Props, any> {
 
           <div className="page-action-bar__spacer" />
 
-          <a className="btn btn-success" href="org/teams/new">
+          <a className="btn btn-primary" href="org/teams/new">
             New team
           </a>
         </div>

public/app/features/teams/TeamMembers.tsx

@@ -103,7 +103,7 @@ export class TeamMembers extends PureComponent<Props, State> {
 
           <div className="page-action-bar__spacer" />
 
-          <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
+          <button className="btn btn-primary pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
             <i className="fa fa-plus" /> Add a member
           </button>
         </div>
@@ -117,7 +117,7 @@ export class TeamMembers extends PureComponent<Props, State> {
             <div className="gf-form-inline">
               <UserPicker onSelected={this.onUserSelected} className="min-width-30" />
               {this.state.newTeamMember && (
-                <button className="btn btn-success gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
+                <button className="btn btn-primary gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
                   Add to team
                 </button>
               )}

public/app/features/teams/TeamSettings.tsx

@@ -75,7 +75,7 @@ export class TeamSettings extends React.Component<Props, State> {
           </div>
 
           <div className="gf-form-button-row">
-            <button type="submit" className="btn btn-success">
+            <button type="submit" className="btn btn-primary">
               Update
             </button>
           </div>

public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap

@@ -62,7 +62,7 @@ exports[`Render should render component 1`] = `
           className="gf-form"
         >
           <button
-            className="btn btn-success gf-form-btn"
+            className="btn btn-primary gf-form-btn"
             disabled={true}
             type="submit"
           >
@@ -81,7 +81,7 @@ exports[`Render should render component 1`] = `
       There are no external groups to sync with
     </div>
     <button
-      className="empty-list-cta__button btn btn-xlarge btn-success"
+      className="empty-list-cta__button btn btn-xlarge btn-primary"
       onClick={[Function]}
     >
       <i
@@ -135,7 +135,7 @@ exports[`Render should render groups table 1`] = `
       className="page-action-bar__spacer"
     />
     <button
-      className="btn btn-success pull-right"
+      className="btn btn-primary pull-right"
       onClick={[Function]}
     >
       <i
@@ -180,7 +180,7 @@ exports[`Render should render groups table 1`] = `
           className="gf-form"
         >
           <button
-            className="btn btn-success gf-form-btn"
+            className="btn btn-primary gf-form-btn"
             disabled={true}
             type="submit"
           >

public/app/features/teams/__snapshots__/TeamList.test.tsx.snap

@@ -63,7 +63,7 @@ exports[`Render should render teams table 1`] = `
           className="page-action-bar__spacer"
         />
         <a
-          className="btn btn-success"
+          className="btn btn-primary"
           href="org/teams/new"
         >
           New team

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`Render should render component 1`] = `
       className="page-action-bar__spacer"
     />
     <button
-      className="btn btn-success pull-right"
+      className="btn btn-primary pull-right"
       disabled={false}
       onClick={[Function]}
     >
@@ -121,7 +121,7 @@ exports[`Render should render team members 1`] = `
       className="page-action-bar__spacer"
     />
     <button
-      className="btn btn-success pull-right"
+      className="btn btn-primary pull-right"
       disabled={false}
       onClick={[Function]}
     >
@@ -341,7 +341,7 @@ exports[`Render should render team members when sync enabled 1`] = `
       className="page-action-bar__spacer"
     />
     <button
-      className="btn btn-success pull-right"
+      className="btn btn-primary pull-right"
       disabled={false}
       onClick={[Function]}
     >

public/app/features/teams/__snapshots__/TeamSettings.test.tsx.snap

@@ -46,7 +46,7 @@ exports[`Render should render component 1`] = `
       className="gf-form-button-row"
     >
       <button
-        className="btn btn-success"
+        className="btn btn-primary"
         type="submit"
       >
         Update

public/app/features/teams/partials/create_team.html

@@ -18,7 +18,7 @@
 			<input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com">
 		</div>
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success width-12">
+			<button type="submit" class="btn btn-primary width-12">
 				<i class="fa fa-save"></i> Create
 			</button>
 		</div>

public/app/features/templating/partials/editor.html

@@ -11,7 +11,7 @@
 		<div ng-if="variables.length === 0">
 			<div class="empty-list-cta">
 				<div class="empty-list-cta__title">There are no variables added yet</div>
-				<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-success">
+				<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-primary">
 					<i class="gicon gicon-add-variable"></i>
 					Add variable
 				</a>
@@ -34,7 +34,7 @@
 		<div ng-if="variables.length">
 			<div class="page-action-bar">
 				<div class="page-action-bar__spacer"></div>
-				<a type="button" class="btn btn-success" ng-click="setMode('new');"><i class="fa fa-plus"></i> New</a>
+				<a type="button" class="btn btn-primary" ng-click="setMode('new');"><i class="fa fa-plus"></i> New</a>
 			</div>
 
 			<table class="filter-table filter-table--hover">
@@ -317,8 +317,8 @@
 		</div>
 
 		<div class="gf-form-button-row p-y-0">
-			<button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
-			<button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
+			<button type="submit" class="btn btn-primary" ng-show="mode === 'edit'" ng-click="update();">Update</button>
+			<button type="submit" class="btn btn-primary" ng-show="mode === 'new'" ng-click="add();">Add</button>
 		</div>
 
 	</form>

public/app/features/users/UsersActionBar.tsx

@@ -65,12 +65,12 @@ export class UsersActionBar extends PureComponent<Props> {
           )}
           <div className="page-action-bar__spacer" />
           {canInvite && (
-            <a className="btn btn-success" href="org/users/invite">
+            <a className="btn btn-primary" href="org/users/invite">
               <span>Invite</span>
             </a>
           )}
           {externalUserMngLinkUrl && (
-            <a className="btn btn-success" href={externalUserMngLinkUrl} target="_blank">
+            <a className="btn btn-primary" href={externalUserMngLinkUrl} target="_blank">
               <i className="fa fa-external-link-square" /> {externalUserMngLinkName}
             </a>
           )}

public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap

@@ -105,7 +105,7 @@ exports[`Render should show external user management button 1`] = `
       className="page-action-bar__spacer"
     />
     <a
-      className="btn btn-success"
+      className="btn btn-primary"
       href="some/url"
       target="_blank"
     >
@@ -143,7 +143,7 @@ exports[`Render should show invite button 1`] = `
       className="page-action-bar__spacer"
     />
     <a
-      className="btn btn-success"
+      className="btn btn-primary"
       href="org/users/invite"
     >
       <span>

public/app/partials/confirm_modal.html

@@ -26,7 +26,7 @@
 		</div>
 
 		<div class="confirm-modal-buttons">
-			<button ng-show="onAltAction" type="button" class="btn btn-success" ng-click="dismiss();onAltAction();">{{altActionText}}</button>
+			<button ng-show="onAltAction" type="button" class="btn btn-primary" ng-click="dismiss();onAltAction();">{{altActionText}}</button>
 			<button type="button" class="btn btn-danger" ng-click="onConfirm();dismiss();" ng-disabled="!confirmTextValid" give-focus="true">{{yesText}}</button>
 			<button type="button" class="btn btn-inverse" ng-click="dismiss()">{{noText}}</button>
 		</div>

public/app/partials/edit_json.html

@@ -15,7 +15,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="button" class="btn btn-success" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
+			<button type="button" class="btn btn-primary" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
 			<button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()">
 				<i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard
 			</button>

public/app/partials/login.html

@@ -99,7 +99,7 @@
                 If you skip you will be prompted to change password next time you login.
               </info-popover>
             </a>
-            <button type="submit" class="btn btn-large p-x-2" ng-click="changePassword();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-success': loginForm.$valid}">
+            <button type="submit" class="btn btn-large p-x-2" ng-click="changePassword();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
               Save
             </button>
           </div>

public/app/partials/reset_password.html

@@ -16,7 +16,7 @@
 					<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.userOrEmail' placeholder="email or username">
 			</div>
 			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-click="sendResetEmail();" ng-disabled="!sendResetForm.$valid">
+				<button type="submit" class="btn btn-primary" ng-click="sendResetEmail();" ng-disabled="!sendResetForm.$valid">
 					Reset Password
 				</button>
 				<a href="login" class="btn btn-inverse">
@@ -29,7 +29,7 @@
 			An email with a reset link has been sent to the email address. <br>
 			You should receive it shortly.
 			<div class="p-t-1">
-				<a href="login" class="btn btn-success p-t-1">
+				<a href="login" class="btn btn-primary p-t-1">
 					Login
 				</a>
 			</div>
@@ -47,7 +47,7 @@
 				<password-strength password="formModel.newPassword"></password-strength>
 			</div>
 			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-click="submitReset();" ng-disabled="!resetForm.$valid">
+				<button type="submit" class="btn btn-primary" ng-click="submitReset();" ng-disabled="!resetForm.$valid">
 					Reset Password
 				</button>
 			</div>

public/app/partials/signup_invited.html

@@ -30,7 +30,7 @@
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-click="submit();" ng-disable="!inviteForm.$valid">
+			<button type="submit" class="btn btn-primary" ng-click="submit();" ng-disable="!inviteForm.$valid">
 				Sign Up
 			</button>
 		</div>

public/app/partials/signup_step2.html

@@ -37,7 +37,7 @@
       </div>
 
       <div class="gf-form-button-row p-t-3">
-        <button type="submit" class="btn btn-success" ng-click="ctrl.submit();" ng-disabled="!signUpForm.$valid">
+        <button type="submit" class="btn btn-primary" ng-click="ctrl.submit();" ng-disabled="!signUpForm.$valid">
           Sign Up
         </button>
         <a href="login" class="btn btn-inverse">

public/sass/_variables.dark.scss

@@ -3,6 +3,18 @@
 
 $theme-name: dark;
 
+// New Colors
+// -------------------------
+$sapphire-faint: #041126;
+$sapphire-bright: #5794F2;
+$sapphire-base: #3274D9;
+$sapphire-shade: #1F60C4;
+$lobster-base: #E02F44;
+$lobster-shade: #C4162A;
+$forest-light: #96D98D;
+$forest-base: #37872D;
+$forest-shade: #19730E;
+
 // Grays
 // -------------------------
 $black: #000;
@@ -30,31 +42,29 @@ $white: #fff;
 // Accent colors
 // -------------------------
 $blue: #33b5e5;
-$blue-dark: #005f81;
 $green: #299c46;
-$red: #d44a3a;
+$red: $lobster-base;
 $yellow: #ecbb13;
-$pink: #ff4444;
 $purple: #9933cc;
 $variable: #32d1df;
 $orange: #eb7b18;
 
 $brand-primary: $orange;
-$brand-success: $green;
+$brand-success: $forest-base;
 $brand-warning: $brand-primary;
-$brand-danger: $red;
+$brand-danger: $lobster-base;
 
-$query-red: #e24d42;
-$query-green: #74e680;
+$query-red: $lobster-base;
+$query-green: $forest-light;
 $query-purple: #fe85fc;
 $query-keyword: #66d9ef;
 $query-orange: $orange;
 
 // Status colors
 // -------------------------
-$online: #10a345;
+$online: $forest-base;
 $warn: #f79520;
-$critical: #ed2e18;
+$critical: $lobster-base;
 
 // Scaffolding
 // -------------------------
@@ -68,7 +78,6 @@ $text-color-weak: $gray-2;
 $text-color-faint: $dark-5;
 $text-color-emphasis: $gray-5;
 
-$text-shadow-strong: 1px 1px 4px $black;
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 
 // gradients
@@ -87,7 +96,7 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
 $link-color: darken($white, 11%);
 $link-color-disabled: darken($link-color, 30%);
 $link-hover-color: $white;
-$external-link-color: $blue;
+$external-link-color: $sapphire-bright;
 
 // Typography
 // -------------------------
@@ -100,8 +109,7 @@ $hr-border-color: $dark-4;
 // Panel
 // -------------------------
 $panel-bg: #212124;
-$panel-border-color: $dark-1;
-$panel-border: solid 1px $panel-border-color;
+$panel-border: solid 1px $dark-1;
 $panel-header-hover-bg: $dark-4;
 $panel-corner: $panel-bg;
 
@@ -110,7 +118,7 @@ $page-header-bg: linear-gradient(90deg, #292a2d, black);
 $page-header-shadow: inset 0px -4px 14px $dark-2;
 $page-header-border-color: $dark-4;
 
-$divider-border-color: #555;
+$divider-border-color: $gray-1;
 
 // Graphite Target Editor
 $tight-form-bg: $dark-3;
@@ -153,29 +161,20 @@ $table-bg-hover: $dark-3;
 // Buttons
 // -------------------------
 
-$btn-primary-bg: #ff6600;
-$btn-primary-bg-hl: #bc3e06;
-
-$btn-secondary-bg-hl: lighten($blue-dark, 5%);
-$btn-secondary-bg: $blue-dark;
+$btn-primary-bg: $sapphire-base;
+$btn-primary-bg-hl: $sapphire-shade;
 
-$btn-success-bg: $green;
-$btn-success-bg-hl: darken($green, 6%);
+$btn-secondary-bg: $sapphire-base;
+$btn-secondary-bg-hl: $sapphire-shade;
 
-$btn-warning-bg: $brand-warning;
-$btn-warning-bg-hl: lighten($brand-warning, 8%);
-
-$btn-danger-bg: $red;
-$btn-danger-bg-hl: darken($red, 8%);
+$btn-danger-bg: $lobster-base;
+$btn-danger-bg-hl: $lobster-shade;
 
 $btn-inverse-bg: $dark-3;
 $btn-inverse-bg-hl: lighten($dark-3, 4%);
 $btn-inverse-text-color: $link-color;
 $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
 
-$btn-active-bg: $gray-4;
-$btn-active-text-color: $blue-dark;
-
 $btn-link-color: $gray-3;
 
 $iconContainerBackground: $black;
@@ -281,11 +280,11 @@ $toolbar-bg: $input-black;
 // -------------------------
 $warning-text-color: $warn;
 $error-text-color: #e84d4d;
-$success-text-color: #12d95a;
-$info-text-color: $blue-dark;
+$success-text-color: $forest-light;
+//$info-text-color: $blue-dark;
 
 $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d);
-$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
+$alert-success-bg: linear-gradient(90deg, $forest-base, $forest-shade);
 $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
 $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a);
 
@@ -317,7 +316,7 @@ $tooltipBackgroundBrand: $brand-primary;
 $checkboxImageUrl: '../img/checkbox.png';
 
 // info box
-$info-box-border-color: darken($blue, 12%);
+$info-box-border-color: $sapphire-base;
 
 // footer
 $footer-link-color: $gray-2;
@@ -348,8 +347,8 @@ $diff-arrow-color: $white;
 $diff-json-bg: $dark-4;
 $diff-json-fg: $gray-5;
 
-$diff-json-added: #457740;
-$diff-json-deleted: #a04338;
+$diff-json-added: $sapphire-shade;
+$diff-json-deleted: $lobster-shade;
 
 $diff-json-old: #a04338;
 $diff-json-new: #457740;
@@ -360,21 +359,21 @@ $diff-json-changed-num: $text-color;
 $diff-json-icon: $gray-7;
 
 //Submenu
-$variable-option-bg: $blue-dark;
+$variable-option-bg: $sapphire-shade;
 
 //Switch Slider
 // -------------------------
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-2;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
 $switch-slider-shadow: 0 0 3px black;
 
 //Checkbox
 // -------------------------
 $checkbox-bg: $dark-1;
 $checkbox-border: 1px solid $gray-1;
-$checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
+$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a);
 $checkbox-color: $dark-1;
 
 //Panel Edit
@@ -385,24 +384,24 @@ $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-toolbar-view-bg: $input-black;
 $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
 $panel-editor-viz-item-border: 1px solid $dark-5;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
-$panel-editor-viz-item-border-hover: 1px solid $blue;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-shade;
+$panel-editor-viz-item-border-hover: 1px solid $sapphire-shade;
 $panel-editor-viz-item-bg: $input-black;
 $panel-editor-tabs-line-color: #e3e3e3;
-$panel-editor-viz-item-bg-hover: darken($blue, 47%);
+$panel-editor-viz-item-bg-hover: $sapphire-faint;
 $panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
 
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-blue;
 
-$panel-grid-placeholder-bg: darken($blue, 47%);
-$panel-grid-placeholder-shadow: 0 0 4px $blue;
+$panel-grid-placeholder-bg: $sapphire-faint;
+$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade;
 
 // logs
 $logs-color-unkown: $gray-2;
 
 // toggle-group
-$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
 $button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
 $button-toggle-group-btn-seperator-border: 1px solid $page-bg;
 

public/sass/_variables.light.scss

@@ -7,6 +7,19 @@
 
 $theme-name: light;
 
+// New Colors
+// -------------------------
+$sapphire-faint: #F5F9FF;
+$sapphire-light: #A8CAFF;
+$sapphire-base: #3274D9;
+$sapphire-shade: #1F60C4;
+$lobster-base: #E02F44;
+$lobster-shade: #C4162A;
+$green-base: #37872D;
+$green-shade: #19730E;
+$purple-shade: #8F3BB8;
+$yellow-base: #F2CC0C;
+
 // Grays
 // -------------------------
 $black: #000;
@@ -31,32 +44,29 @@ $white: #fff;
 // Accent colors
 // -------------------------
 $blue: #0083b3;
-$blue-dark: #005f81;
-$blue-light: #00a8e6;
 $green: #3aa655;
-$red: #d44939;
+$red: $lobster-base;
 $yellow: #ff851b;
 $orange: #ff7941;
-$pink: #e671b8;
 $purple: #9954bb;
-$variable: $blue;
+$variable: $purple-shade;
 
 $brand-primary: $orange;
 $brand-success: $green;
 $brand-warning: $orange;
-$brand-danger: $red;
+$brand-danger: $lobster-base;
 
-$query-red: $red;
+$query-red: $lobster-base;
 $query-green: $green;
 $query-purple: $purple;
 $query-orange: $orange;
-$query-keyword: $blue;
+$query-keyword: $sapphire-base;
 
 // Status colors
 // -------------------------
-$online: #01a64f;
+$online: $green-shade;
 $warn: #f79520;
-$critical: #ec2128;
+$critical: $lobster-shade;
 
 // Scaffolding
 // -------------------------
@@ -70,9 +80,7 @@ $text-color-weak: $gray-2;
 $text-color-faint: $gray-4;
 $text-color-emphasis: $dark-5;
 
-$text-shadow-strong: none;
 $text-shadow-faint: none;
-$textShadow: none;
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
@@ -84,7 +92,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 $link-color: $gray-1;
 $link-color-disabled: lighten($link-color, 30%);
 $link-hover-color: darken($link-color, 20%);
-$external-link-color: $blue-light;
+$external-link-color: $sapphire-shade;
 
 // Typography
 // -------------------------
@@ -98,8 +106,7 @@ $hr-border-color: $dark-3 !default;
 // -------------------------
 
 $panel-bg: $white;
-$panel-border-color: $gray-5;
-$panel-border: solid 1px $panel-border-color;
+$panel-border: solid 1px $gray-5;
 $panel-header-hover-bg: $gray-6;
 $panel-corner: $gray-4;
 
@@ -150,29 +157,20 @@ $scrollbarBorder: $gray-4;
 
 // Buttons
 // -------------------------
-$btn-primary-bg: $brand-primary;
-$btn-primary-bg-hl: lighten($brand-primary, 8%);
-
-$btn-secondary-bg: $blue;
-$btn-secondary-bg-hl: lighten($blue, 4%);
+$btn-primary-bg: $sapphire-base;
+$btn-primary-bg-hl: $sapphire-shade;
 
-$btn-success-bg: lighten($green, 3%);
-$btn-success-bg-hl: darken($green, 3%);
+$btn-secondary-bg: rgba(0,0,0,0);
+$btn-secondary-bg-hl: rgba(0,0,0,0);
 
-$btn-warning-bg: lighten($orange, 3%);
-$btn-warning-bg-hl: darken($orange, 3%);
-
-$btn-danger-bg: lighten($red, 3%);
-$btn-danger-bg-hl: darken($red, 3%);
+$btn-danger-bg: $lobster-base;
+$btn-danger-bg-hl: $lobster-shade;
 
 $btn-inverse-bg: $gray-6;
 $btn-inverse-bg-hl: darken($gray-6, 5%);
 $btn-inverse-text-color: $gray-1;
 $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
 
-$btn-active-bg: $white;
-$btn-active-text-color: $blue;
-
 $btn-link-color: $gray-1;
 
 $btn-divider-left: $gray-4;
@@ -189,8 +187,8 @@ $input-bg-disabled: $gray-5;
 $input-color: $dark-3;
 $input-border-color: $gray-5;
 $input-box-shadow: none;
-$input-border-focus: $blue !default;
-$input-box-shadow-focus: $blue !default;
+$input-border-focus: $sapphire-light !default;
+$input-box-shadow-focus: $sapphire-light !default;
 $input-color-placeholder: $gray-4 !default;
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
@@ -285,14 +283,14 @@ $navbar-button-border: $gray-4;
 // Form states and alerts
 // -------------------------
 $warning-text-color: lighten($orange, 10%);
-$error-text-color: lighten($red, 10%);
+$error-text-color: $lobster-shade;
 $success-text-color: lighten($green, 10%);
-$info-text-color: $blue;
+$info-text-color: $sapphire-shade;
 
-$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d);
-$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
-$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
-$alert-info-bg: $blue;
+$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
+$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
+$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
+$alert-info-bg: $sapphire-base;
 
 // popover
 $popover-bg: $page-bg;
@@ -300,7 +298,7 @@ $popover-color: $text-color;
 $popover-border-color: $gray-5;
 $popover-shadow: 0 0 20px $white;
 
-$popover-help-bg: $blue;
+$popover-help-bg: $sapphire-base;
 $popover-help-color: $gray-6;
 $popover-error-bg: $btn-danger-bg;
 
@@ -321,7 +319,7 @@ $tooltipBackgroundBrand: $brand-primary;
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 // info box
-$info-box-border-color: lighten($blue, 20%);
+$info-box-border-color: $sapphire-base;
 
 // footer
 $footer-link-color: $gray-3;
@@ -332,16 +330,16 @@ $footer-link-hover: $dark-5;
 // json explorer
 $json-explorer-default-color: black;
 $json-explorer-string-color: green;
-$json-explorer-number-color: blue;
-$json-explorer-boolean-color: red;
+$json-explorer-number-color: $sapphire-base;
+$json-explorer-boolean-color: $lobster-base;
 $json-explorer-null-color: #855a00;
 $json-explorer-undefined-color: rgb(202, 11, 105);
 $json-explorer-function-color: #ff20ed;
 $json-explorer-rotate-time: 100ms;
 $json-explorer-toggler-opacity: 0.6;
-$json-explorer-bracket-color: blue;
+$json-explorer-bracket-color: $sapphire-base;
 $json-explorer-key-color: #00008b;
-$json-explorer-url-color: blue;
+$json-explorer-url-color: $sapphire-base;
 
 // Changelog and diff
 // -------------------------
@@ -355,34 +353,34 @@ $diff-arrow-color: $dark-3;
 $diff-group-bg: $gray-7;
 
 $diff-json-bg: $gray-5;
-$diff-json-fg: $gray-2;
+$diff-json-fg: $gray-1;
 
-$diff-json-added: lighten(desaturate($green, 30%), 10%);
-$diff-json-deleted: desaturate($red, 35%);
+$diff-json-added: $sapphire-shade;
+$diff-json-deleted: $lobster-shade;
 
 $diff-json-old: #5a372a;
 $diff-json-new: #664e33;
 
-$diff-json-changed-fg: $gray-6;
+$diff-json-changed-fg: $gray-7;
 $diff-json-changed-num: $gray-4;
 $diff-json-icon: $gray-4;
 
 //Submenu
-$variable-option-bg: $blue-light;
+$variable-option-bg: $sapphire-light;
 
 //Switch Slider
 // -------------------------
 $switch-bg: $white;
 $switch-slider-color: $gray-7;
 $switch-slider-off-bg: $gray-5;
-$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
+$switch-slider-on-bg: linear-gradient(90deg, #FF9830, #E55400);
 $switch-slider-shadow: 0 0 3px $dark-5;
 
 //Checkbox
 // -------------------------
 $checkbox-bg: $gray-6;
 $checkbox-border: 1px solid $gray-3;
-$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red);
+$checkbox-checked-bg: linear-gradient(0deg, #FF9830, #E55400);
 $checkbox-color: $gray-7;
 
 //Panel Edit
@@ -393,18 +391,18 @@ $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-toolbar-view-bg: $white;
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
 $panel-editor-viz-item-border: 1px solid $gray-3;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
-$panel-editor-viz-item-border-hover: 1px solid $blue-light;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
+$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
 $panel-editor-viz-item-bg: $white;
 $panel-editor-tabs-line-color: $dark-5;
-$panel-editor-viz-item-bg-hover: lighten($blue, 62%);
+$panel-editor-viz-item-bg-hover: $sapphire-faint;
 $panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
 
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 
-$panel-grid-placeholder-bg: lighten($blue, 62%);
-$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+$panel-grid-placeholder-bg: $sapphire-faint;
+$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light;
 
 // logs
 $logs-color-unkown: $gray-5;

public/sass/base/_type.scss

@@ -59,13 +59,13 @@ a.text-error:focus {
   color: darken($error-text-color, 10%);
 }
 
-.text-info {
+/*.text-info {
   color: $info-text-color;
 }
 a.text-info:hover,
 a.text-info:focus {
   color: darken($info-text-color, 10%);
-}
+}*/
 
 .text-success {
   color: $success-text-color;

public/sass/components/_buttons.scss

@@ -89,35 +89,12 @@
 .btn-secondary {
   @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
 }
-// Warning appears are orange
-.btn-warning {
-  @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl);
-}
 
 // Danger and error appear as red
 .btn-danger {
   @include buttonBackground($btn-danger-bg, $btn-danger-bg-hl);
 }
-// Success appears as green
-.btn-success {
-  @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
-
-  &--processing {
-    @include button-outline-variant($gray-1);
-    @include box-shadow(none);
-    cursor: default;
 
-    &:hover,
-    &:active,
-    &:active:hover,
-    &:focus,
-    &:disabled {
-      color: $gray-1;
-      background-color: transparent;
-      border-color: $gray-1;
-    }
-  }
-}
 // Info appears as a neutral blue
 .btn-secondary {
   @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
@@ -138,20 +115,15 @@
   @include button-outline-variant($btn-primary-bg);
 }
 .btn-outline-secondary {
-  @include button-outline-variant($btn-secondary-bg);
+  @include button-outline-variant($btn-secondary-bg-hl);
 }
 .btn-outline-inverse {
   @include button-outline-variant($btn-inverse-bg);
 }
-.btn-outline-success {
-  @include button-outline-variant($btn-success-bg);
-}
-.btn-outline-warning {
-  @include button-outline-variant($btn-warning-bg);
-}
 .btn-outline-danger {
-  @include button-outline-variant($btn-danger-bg);
+  @include button-outline-variant(green);
 }
+
 .btn-outline-disabled {
   @include button-outline-variant($gray-1);
   @include box-shadow(none);

public/sass/components/_navbar.scss

@@ -158,7 +158,7 @@
   }
 
   &--primary {
-    @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
+    @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
   }
 }
 

public/sass/components/_panel_gettingstarted.scss

@@ -118,7 +118,7 @@ $path-position: $marker-size-half - ($path-height / 2);
 
 .progress-step-cta {
   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
-  @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
+  @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
   display: none;
 }
 

public/vendor/angular-ui/ui-bootstrap-tpls.js

@@ -1245,7 +1245,7 @@ angular.module("template/datepicker/popup.html", []).run(["$templateCache", func
     "			<button type=\"button\" class=\"btn btn-sm btn-info\" ng-click=\"select('today')\" ng-disabled=\"isDisabled('today')\">{{ getText('current') }}</button>\n" +
     "			<button type=\"button\" class=\"btn btn-sm btn-danger\" ng-click=\"select(null)\">{{ getText('clear') }}</button>\n" +
     "		</span>\n" +
-    "		<button type=\"button\" class=\"btn btn-sm btn-success pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n" +
+    "		<button type=\"button\" class=\"btn btn-sm btn-primary pull-right\" ng-click=\"close()\">{{ getText('close') }}</button>\n" +
     "	</li>\n" +
     "</ul>\n" +
     "");