Add descriptions. Make all the actions buttons. Add a revert button to colors. Add a new variable: quaternary.

app/assets/javascripts/admin/controllers/admin_customize_colors_controller.js

@@ -35,16 +35,28 @@ Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({
       return;
     }
 
-    var matches = Em.A(), self = this, baseColor;
+    var matches = Em.A();
 
     _.each(this.get('selectedItem.colors'), function(color){
-      baseColor = self.get('baseColors').get(color.get('name'));
+      if (color.get('overridden')) matches.pushObject(color);
-      if (color.get('hex') !== baseColor.get('hex')) matches.pushObject(color);
     });
 
     this.set('colors', matches);
   }.observes('onlyOverridden'),
 
+  updateEnabled: function() {
+    var selectedItem = this.get('selectedItem');
+    if (selectedItem.get('enabled')) {
+      this.get('model').forEach(function(c) {
+        if (c !== selectedItem) {
+          c.set('enabled', false);
+          c.startTrackingChanges();
+          c.notifyPropertyChange('description');
+        }
+      });
+    }
+  },
+
   actions: {
     selectColorScheme: function(colorScheme) {
       if (this.get('selectedItem')) { this.get('selectedItem').set('selected', false); }
@@ -63,22 +75,24 @@ Discourse.AdminCustomizeColorsController = Ember.ArrayController.extend({
       this.set('onlyOverridden', false);
     },
 
+    revert: function(color) {
+      color.revert();
+    },
+
     undo: function(color) {
       color.undo();
     },
 
-    save: function() {
+    toggleEnabled: function() {
       var selectedItem = this.get('selectedItem');
-      selectedItem.save();
+      selectedItem.toggleProperty('enabled');
-      if (selectedItem.get('enabled')) {
+      selectedItem.save({enabledOnly: true});
-        this.get('model').forEach(function(c) {
+      this.updateEnabled();
-          if (c !== selectedItem) {
+    },
-            c.set('enabled', false);
+
-            c.startTrackingChanges();
+    save: function() {
-            c.notifyPropertyChange('description');
+      this.get('selectedItem').save();
-          }
+      this.updateEnabled();
-        });
-      }
     },
 
     copy: function(colorScheme) {

app/assets/javascripts/admin/models/color_scheme.js

@@ -47,14 +47,17 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, {
     return (!this.get('id'));
   }.property('id'),
 
-  save: function() {
+  save: function(opts) {
     if (this.get('is_base') || this.get('disableSave')) return;
 
     var self = this;
     this.set('savingStatus', I18n.t('saving'));
     this.set('saving',true);
 
-    var data = { name: this.name, enabled: this.enabled };
+    var data = { enabled: this.enabled };
+
+    if (!opts || !opts.enabledOnly) {
+      data.name = this.name;
 
       data.colors = [];
       _.each(this.get('colors'), function(c) {
@@ -62,6 +65,7 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, {
           data.colors.pushObject({name: c.get('name'), hex: c.get('hex')});
         }
       });
+    }
 
     return Discourse.ajax("/admin/color_schemes" + (this.id ? '/' + this.id : '') + '.json', {
       data: JSON.stringify({"color_scheme": data}),
@@ -70,10 +74,14 @@ Discourse.ColorScheme = Discourse.Model.extend(Ember.Copyable, {
       contentType: 'application/json'
     }).then(function(result) {
       if(result.id) { self.set('id', result.id); }
+      if (!opts || !opts.enabledOnly) {
         self.startTrackingChanges();
         _.each(self.get('colors'), function(c) {
           c.startTrackingChanges();
         });
+      } else {
+        self.set('originals.enabled', data.enabled);
+      }
       self.set('savingStatus', I18n.t('saved'));
       self.set('saving', false);
       self.notifyPropertyChange('description');
@@ -107,7 +115,7 @@ Discourse.ColorScheme.reopenClass({
           name: colorScheme.name,
           enabled: colorScheme.enabled,
           is_base: colorScheme.is_base,
-          colors: colorScheme.colors.map(function(c) { return Discourse.ColorSchemeColor.create({name: c.name, hex: c.hex}); })
+          colors: colorScheme.colors.map(function(c) { return Discourse.ColorSchemeColor.create({name: c.name, hex: c.hex, default_hex: c.default_hex}); })
         }));
       });
       colorSchemes.set('loading', false);

app/assets/javascripts/admin/models/color_scheme_color.js

@@ -19,18 +19,37 @@ Discourse.ColorSchemeColor = Discourse.Model.extend({
     this.notifyPropertyChange('hex'); // force changed property to be recalculated
   },
 
+  // Whether value has changed since it was last saved.
   changed: function() {
     if (!this.originals) return false;
     if (this.get('hex') !== this.originals['hex']) return true;
     return false;
   }.property('hex'),
 
+  // Whether the current value is different than Discourse's default color scheme.
+  overridden: function() {
+    return this.get('hex') !== this.get('default_hex');
+  }.property('hex', 'default_hex'),
+
+  // Whether the saved value is different than Discourse's default color scheme.
+  savedIsOverriden: function() {
+    return this.get('originals').hex !== this.get('default_hex');
+  }.property('hex', 'default_hex'),
+
+  revert: function() {
+    this.set('hex', this.get('default_hex'));
+  },
+
   undo: function() {
     if (this.originals) this.set('hex', this.originals['hex']);
   },
 
   translatedName: function() {
-    return I18n.t('admin.customize.colors.' + this.get('name'));
+    return I18n.t('admin.customize.colors.' + this.get('name') + '.name');
+  }.property('name'),
+
+  description: function() {
+    return I18n.t('admin.customize.colors.' + this.get('name') + '.description');
   }.property('name'),
 
   /**

app/assets/javascripts/admin/templates/customize_colors.js.handlebars

@@ -18,10 +18,16 @@
 
         <div class="controls">
           <button {{action save}} {{bind-attr disabled="disableSave"}} class='btn'>{{i18n admin.customize.save}}</button>
-          <span {{bind-attr class=":saving savingStatus::hidden" }}>{{savingStatus}}</span>
+          <button {{action toggleEnabled}} class="btn">
+            {{#if enabled}}
+              {{i18n disable}}
+            {{else}}
+              {{i18n enable}}
+            {{/if}}
+          </button>
           <button {{action copy this}} class='btn'><i class="fa fa-copy"></i> {{i18n admin.customize.copy}}</button>
-          <span>{{view Ember.Checkbox checkedBinding="enabled"}} {{i18n admin.customize.enabled}}</span>
+          <button {{action destroy}} class='btn btn-danger'><i class="fa fa-trash-o"></i> {{i18n admin.customize.delete}}</button>
-          <a {{action destroy}} class='delete-link'>{{i18n admin.customize.delete}}</a>
+          <span {{bind-attr class=":saving savingStatus::hidden" }}>{{savingStatus}}</span>
         </div>
       {{/with}}
 
@@ -48,10 +54,15 @@
         <tbody>
           {{#each colors}}
             <tr {{bind-attr class="changed valid:valid:invalid"}}>
-              <td class="name" {{bind-attr title="name"}}>{{translatedName}}</td>
+              <td class="name" {{bind-attr title="name"}}>
+                <b>{{translatedName}}</b>
+                <br/>
+                <span class="description">{{description}}</span>
+              </td>
               <td class="hex">{{color-input hexValue=hex brightnessValue=brightness valid=valid}}</td>
-              <td class="changed">
+              <td class="actions">
-                <button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}}>undo</button>
+                <button {{bind-attr class=":btn :revert savedIsOverriden::invisible"}} {{action revert this}} title="{{i18n admin.customize.colors.revert_title}}">{{i18n revert}}</button>
+                <button {{bind-attr class=":btn :undo changed::invisible"}} {{action undo this}} title="{{i18n admin.customize.colors.undo_title}}">{{i18n undo}}</button>
               </td>
             </tr>
           {{/each}}

app/assets/stylesheets/common/admin/admin_base.scss

@@ -155,7 +155,7 @@
   }
   li a.active {
     color: $secondary;
-    background-color: $danger;
+    background-color: $quaternary;
   }
 }
 
@@ -435,13 +435,11 @@ section.details {
   .colors {
     thead th       { border: none; }
     td.hex         { width: 100px; }
-    td.changed     { width: 300px; }
+    td.actions     { width: 200px; }
-    .hex-input     { width: 80px; }
+    .hex-input     { width: 80px; margin-bottom: 0; }
     .hex           { text-align: center; }
+    .description   { color: scale-color($primary, $lightness: 50%); }
 
-    .changed .name {
-      color: scale-color($highlight, $lightness: -50%);
-    }
     .invalid .hex input {
       background-color: white;
       color: black;

app/assets/stylesheets/common/components/navs.css.scss

@@ -30,13 +30,13 @@
       font-size: 16px;
       line-height: 20px;
       &:hover {
-        color: $danger;
+        color: $quaternary;
-        background-color: scale-color($danger, $lightness: 70%);
+        background-color: scale-color($quaternary, $lightness: 70%);
       }
     }
     &.active > a, > a.active {
       color: $secondary;
-      background-color: $danger;
+      background-color: $quaternary;
     }
   }
 }
@@ -69,7 +69,7 @@
   .active > a,
   .active .fa-chevron-right {
     color: $secondary;
-    background-color: $danger;
+    background-color: $quaternary;
   }
   .count {
     font-size: 12px;

app/assets/stylesheets/common/foundation/colors.scss

@@ -1,6 +1,7 @@
 $primary:           #333333 !default;
 $secondary:         #ffffff !default;
 $tertiary:          #0088cc !default;
+$quaternary:        #e45735 !default;
 $header_background: #ffffff !default;
 $header_primary:    #333333 !default;
 $highlight:         #ffff4d !default;

app/assets/stylesheets/desktop/modal.scss

@@ -59,7 +59,7 @@ animation: modal .25s;
 .modal-header {
   border-bottom: 1px solid scale-color($primary, $lightness: 90%);
   h3 {
-    color: $danger;
+    color: $quaternary;
     font-size: 20px;
     padding: 10px 15px 7px;
   }

app/assets/stylesheets/mobile/modal.scss

@@ -50,7 +50,7 @@
 }
 .modal-header {
   h3 {
-    color: $danger;
+    color: $quaternary;
     font-size: 15px;
     padding: 0 0 0 20px;
   }

app/serializers/color_scheme_color_serializer.rb

@@ -1,7 +1,11 @@
 class ColorSchemeColorSerializer < ApplicationSerializer
-  attributes :name, :hex
+  attributes :name, :hex, :default_hex
 
   def hex
     object.hex # otherwise something crazy is returned
   end
+
+  def default_hex
+    ColorScheme.base_colors[object.name]
+  end
 end

app/services/color_scheme_revisor.rb

@@ -19,8 +19,8 @@ class ColorSchemeRevisor
         ColorScheme.where('id != ?', @color_scheme.id).update_all enabled: false
       end
 
-      @color_scheme.name    = @params[:name]
+      @color_scheme.name    = @params[:name]    if @params.has_key?(:name)
-      @color_scheme.enabled = @params[:enabled]
+      @color_scheme.enabled = @params[:enabled] if @params.has_key?(:enabled)
       new_version = false
 
       if @params[:colors]

config/locales/client.en.yml

@@ -161,6 +161,11 @@ en:
     uploading: "Uploading..."
     uploaded: "Uploaded!"
 
+    enable: "Enable"
+    disable: "Disable"
+    undo: "Undo"
+    revert: "Revert"
+
     choose_topic:
       none_found: "No topics found."
       title:
@@ -1465,15 +1470,40 @@ en:
           new_name: "New Color Scheme"
           copy_name_prefix: "Copy of"
           delete_confirm: "Delete this color scheme?"
-          primary: 'primary'
+          undo: "undo"
-          secondary: 'secondary'
+          undo_title: "Undo your changes to this color since the last time it was saved."
-          tertiary: 'tertiary'
+          revert: "revert"
-          header_background: "header background"
+          revert_title: "Reset this color to Discourse's default color scheme."
-          header_primary: "header primary"
+          primary:
-          highlight: 'highlight'
+            name: 'primary'
-          danger: 'danger'
+            description: 'Most text, icons, and borders.'
-          success: 'success'
+          secondary:
-          love: 'love'
+            name: 'secondary'
+            description: 'The main background color, and text color of some buttons.'
+          tertiary:
+            name: 'tertiary'
+            description: 'Links, some buttons, notifications, and accent color.'
+          quaternary:
+            name: "quaternary"
+            description: "Navigation links."
+          header_background:
+            name: "header background"
+            description: "Background color of the site's header."
+          header_primary:
+            name: "header primary"
+            description: "Text and icons in the site's header."
+          highlight:
+            name: 'highlight'
+            description: 'The background color of highlighted elements on the page, such as posts and topics.'
+          danger:
+            name: 'danger'
+            description: 'Highlight color for actions like deleting posts and topics.'
+          success:
+            name: 'success'
+            description: 'Used to indicate an action was successful.'
+          love:
+            name: 'love'
+            description: "The like button's color."
 
 
       email: