theme: Add support for colored buttons in dialogs

Adds support for :default and :destructive-action buttons in modal dialogs.
Puts them to use in the confirm and polkit dialogs. Also improves the
accent background color.

data/theme/cinnamon-sass/_colors.scss

@@ -19,7 +19,7 @@ $warning_color: #f8e45c;
 $warning_bg_color: #cd9309;
 
 $accent_color: #78aeed;
-$accent_bg_color: #597493;
+$accent_bg_color: #3584e4;
 
 $large_icon_color: transparentize($fg_color, 0.6);
 $light_text_color: mix($fg_color, $bg_color, 65%);

data/theme/cinnamon-sass/_common.scss

@@ -104,6 +104,38 @@ stage {
   }
 }
 
+%linked_button_default {
+  @extend %linked_button;
+
+  border-color: darken($accent_bg_color, 20%);
+
+  @include button(normal, $c: $accent_bg_color, $style: default);
+  &:hover { @include button(hover, $c: $accent_bg_color, $style: default); }
+  &:active { @include button(active, $c: $accent_bg_color, $style: default); }
+  &:checked { @include button(checked, $c: $accent_bg_color, $style: default); }
+  &:insensitive {
+    border-color: $borders_color;
+
+    @include button(insensitive);
+  }
+}
+
+%linked_button_destructive {
+  @extend %linked_button;
+
+  border-color: darken($error_bg_color, 20%);
+
+  @include button(normal, $c: $error_bg_color, $style: default);
+  &:hover { @include button(hover, $c: $error_bg_color, $style: default); }
+  &:active { @include button(active, $c: $error_bg_color, $style: default); }
+  &:checked { @include button(checked, $c: $error_bg_color, $style: default); }
+  &:insensitive {
+    border-color: $borders_color;
+
+    @include button(insensitive);
+  }
+}
+
 // items in menus
 %menuitem {
   font-weight: normal;

data/theme/cinnamon-sass/_drawing.scss

@@ -74,6 +74,13 @@
   $checked_button_bg_color: $lightest_bg_color;
   $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
 
+  // background color mix override for default button style
+  @if $style == 'default' {
+    $hover_button_bg_color: lighten($button_bg_color, 10%);
+    $active_button_bg_color: darken($button_bg_color, 5%);
+    $checked_button_bg_color: darken($button_bg_color, 5%);
+  }
+
   // flat style overrides
   @if $style == 'flat' {
     $insensitive_button_bg_color: $button_bg_color;

data/theme/cinnamon-sass/widgets/_dialogs.scss

@@ -13,6 +13,9 @@
 
   .dialog-linked-button {
     @extend %linked_button;
+
+    &:default { @extend %linked_button_default; }
+    &:destructive-action { @extend %linked_button_destructive; }
   }
 
   .confirm-dialog-title {

js/ui/dialog.js

@@ -128,6 +128,7 @@ class Dialog extends St.Widget {
     addButton(buttonInfo) {
         let { label, action, key } = buttonInfo;
         let isDefault = buttonInfo['default'];
+        let isDestructive = buttonInfo['destructive_action'];
         let keys;
 
         if (key)
@@ -154,6 +155,9 @@ class Dialog extends St.Widget {
         if (isDefault)
             button.add_style_pseudo_class('default');
 
+        if (isDestructive)
+            button.add_style_pseudo_class('destructive-action');
+
         if (this._initialKeyFocus == null || isDefault)
             this._setInitialKeyFocus(button);
 

js/ui/modalDialog.js

@@ -144,7 +144,8 @@ var ModalDialog = GObject.registerClass({
      * Optional arguments include @focused, which determines whether the button
      * is initially focused, and @key, which is a keybinding associated with
      * the button press such that pressing the keybinding will have the same
-     * effect as clicking the button.
+     * effect as clicking the button. Other arguments include @default
+     * and @destructive_action which add additional styling.
      *
      * An example usage is
      * ```
@@ -157,7 +158,8 @@ var ModalDialog = GObject.registerClass({
      *     {
      *         label: _("OK"),
      *         action: this.destroy.bind(this),
-     *         key: Clutter.KEY_Return
+     *         key: Clutter.KEY_Return,
+     *         default: true
      *     }
      * ]);
      * ```
@@ -389,7 +391,8 @@ class ConfirmDialog extends ModalDialog {
                 action: () => {
                     this.destroy();
                     this.callback();
-                }
+                },
+                destructive_action: true
             }
         ]);
     }

js/ui/polkitAuthenticationAgent.js

@@ -160,7 +160,8 @@ var AuthenticationDialog = GObject.registerClass({
         this._okButton = this.addButton({
             label:  _("Authenticate"),
             action: this._onAuthenticateButtonPressed.bind(this),
-            reactive: false
+            reactive: false,
+            default: true
         });
         this._okButton.bind_property('reactive',
             this._okButton, 'can-focus',