diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index a56f674..cd03cd3 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -111,8 +111,9 @@ drupal.debounce:
 drupal.dialog:
   version: VERSION
   js:
-    misc/dialog.js: {}
-    misc/dialog.position.js: {}
+    misc/dialog/dialog.js: {}
+    misc/dialog/dialog.position.js: {}
+    misc/dialog/dialog.jquery-ui.js: {}
   css:
     theme:
       misc/dialog.theme.css: {}
@@ -127,7 +128,7 @@ drupal.dialog:
 drupal.dialog.ajax:
   version: VERSION
   js:
-    misc/dialog.ajax.js: {}
+    misc/dialog/dialog.ajax.js: {}
   dependencies:
     - core/jquery
     - core/drupal
diff --git a/core/misc/dialog.ajax.js b/core/misc/dialog.ajax.js
deleted file mode 100644
index 4845cbd..0000000
--- a/core/misc/dialog.ajax.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * @file
- * Extends the Drupal AJAX functionality to integrate the dialog API.
- */
-
-(function ($, Drupal) {
-
-  "use strict";
-
-  Drupal.behaviors.dialog = {
-    attach: function (context, settings) {
-      var $context = $(context);
-
-      // Provide a known 'drupal-modal' DOM element for Drupal-based modal
-      // dialogs. Non-modal dialogs are responsible for creating their own
-      // elements, since there can be multiple non-modal dialogs at a time.
-      if (!$('#drupal-modal').length) {
-        $('<div id="drupal-modal" />').hide().appendTo('body');
-      }
-
-      // Special behaviors specific when attaching content within a dialog.
-      // These behaviors usually fire after a validation error inside a dialog.
-      var $dialog = $context.closest('.ui-dialog-content');
-      if ($dialog.length) {
-        // Remove and replace the dialog buttons with those from the new form.
-        if ($dialog.dialog('option', 'drupalAutoButtons')) {
-          // Trigger an event to detect/sync changes to buttons.
-          $dialog.trigger('dialogButtonsChange');
-        }
-
-        // Force focus on the modal when the behavior is run.
-        $dialog.dialog('widget').trigger('focus');
-      }
-    },
-
-    /**
-     * Scan a dialog for any primary buttons and move them to the button area.
-     *
-     * @param $dialog
-     *   An jQuery object containing the element that is the dialog target.
-     * @return
-     *   An array of buttons that need to be added to the button area.
-     */
-    prepareDialogButtons: function ($dialog) {
-      var buttons = [];
-      var $buttons = $dialog.find('.form-actions input[type=submit]');
-      $buttons.each(function () {
-        // Hidden form buttons need special attention. For browser consistency,
-        // the button needs to be "visible" in order to have the enter key fire
-        // the form submit event. So instead of a simple "hide" or
-        // "display: none", we set its dimensions to zero.
-        // See http://mattsnider.com/how-forms-submit-when-pressing-enter/
-        var $originalButton = $(this).css({
-          width: 0,
-          height: 0,
-          padding: 0,
-          border: 0
-        });
-        buttons.push({
-          'text': $originalButton.html() || $originalButton.attr('value'),
-          'class': $originalButton.attr('class'),
-          'click': function (e) {
-            $originalButton.trigger('mousedown').trigger('click').trigger('mouseup');
-            e.preventDefault();
-          }
-        });
-      });
-      return buttons;
-    }
-  };
-
-  /**
-   * Command to open a dialog.
-   */
-  Drupal.AjaxCommands.prototype.openDialog = function (ajax, response, status) {
-    if (!response.selector) {
-      return false;
-    }
-    var $dialog = $(response.selector);
-    if (!$dialog.length) {
-      // Create the element if needed.
-      $dialog = $('<div id="' + response.selector.replace(/^#/, '') + '"/>').appendTo('body');
-    }
-    // Set up the wrapper, if there isn't one.
-    if (!ajax.wrapper) {
-      ajax.wrapper = $dialog.attr('id');
-    }
-
-    // Use the ajax.js insert command to populate the dialog contents.
-    response.command = 'insert';
-    response.method = 'html';
-    ajax.commands.insert(ajax, response, status);
-
-    // Move the buttons to the jQuery UI dialog buttons area.
-    if (!response.dialogOptions.buttons) {
-      response.dialogOptions.drupalAutoButtons = true;
-      response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
-    }
-
-    // Bind dialogButtonsChange
-    $dialog.on('dialogButtonsChange', function () {
-      var buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
-      $dialog.dialog('option', 'buttons', buttons);
-    });
-
-    // Open the dialog itself.
-    response.dialogOptions = response.dialogOptions || {};
-    var dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
-    if (response.dialogOptions.modal) {
-      dialog.showModal();
-    }
-    else {
-      dialog.show();
-    }
-
-    // Add the standard Drupal class for buttons for style consistency.
-    $dialog.parent().find('.ui-dialog-buttonset').addClass('form-actions');
-  };
-
-  /**
-   * Command to close a dialog.
-   *
-   * If no selector is given, it defaults to trying to close the modal.
-   */
-  Drupal.AjaxCommands.prototype.closeDialog = function (ajax, response, status) {
-    var $dialog = $(response.selector);
-    if ($dialog.length) {
-      Drupal.dialog($dialog.get(0)).close();
-      if (!response.persist) {
-        $dialog.remove();
-      }
-    }
-
-    // Unbind dialogButtonsChange
-    $dialog.off('dialogButtonsChange');
-  };
-
-  /**
-   * Command to set a dialog property.
-   *
-   * jQuery UI specific way of setting dialog options.
-   */
-  Drupal.AjaxCommands.prototype.setDialogOption = function (ajax, response, status) {
-    var $dialog = $(response.selector);
-    if ($dialog.length) {
-      $dialog.dialog('option', response.optionName, response.optionValue);
-    }
-  };
-
-  /**
-   * Binds a listener on dialog creation to handle the cancel link.
-   */
-  $(window).on('dialog:aftercreate', function (e, dialog, $element, settings) {
-    $element.on('click.dialog', '.dialog-cancel', function (e) {
-      dialog.close('cancel');
-      e.preventDefault();
-      e.stopPropagation();
-    });
-  });
-
-  /**
-   * Removes all 'dialog' listeners.
-   */
-  $(window).on('dialog:beforeclose', function (e, dialog, $element) {
-    $element.off('.dialog');
-  });
-
-})(jQuery, Drupal);
diff --git a/core/misc/dialog.js b/core/misc/dialog.js
deleted file mode 100644
index 789c37e..0000000
--- a/core/misc/dialog.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * @file
- *
- * Dialog API inspired by HTML5 dialog element:
- * http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
- */
-(function ($, Drupal, drupalSettings) {
-
-  "use strict";
-
-  drupalSettings.dialog = {
-    autoOpen: true,
-    dialogClass: '',
-    // When using this API directly (when generating dialogs on the client side),
-    // you may want to override this method and do
-    // @code
-    // jQuery(event.target).remove()
-    // @endcode
-    // as well, to remove the dialog on closing.
-    close: function (event) {
-      Drupal.detachBehaviors(event.target, null, 'unload');
-    }
-  };
-
-  Drupal.dialog = function (element, options) {
-
-    function openDialog(settings) {
-      settings = $.extend({}, drupalSettings.dialog, options, settings);
-      // Trigger a global event to allow scripts to bind events to the dialog.
-      $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
-      $element.dialog(settings);
-      dialog.open = true;
-      $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
-    }
-
-    function closeDialog(value) {
-      $(window).trigger('dialog:beforeclose', [dialog, $element]);
-      $element.dialog('close');
-      dialog.returnValue = value;
-      dialog.open = false;
-      $(window).trigger('dialog:afterclose', [dialog, $element]);
-    }
-
-    var undef;
-    var $element = $(element);
-    var dialog = {
-      open: false,
-      returnValue: undef,
-      show: function () {
-        openDialog({modal: false});
-      },
-      showModal: function () {
-        openDialog({modal: true});
-      },
-      close: closeDialog
-    };
-
-    return dialog;
-  };
-
-})(jQuery, Drupal, drupalSettings);
diff --git a/core/misc/dialog.position.js b/core/misc/dialog.position.js
deleted file mode 100644
index 9d03f69..0000000
--- a/core/misc/dialog.position.js
+++ /dev/null
@@ -1,80 +0,0 @@
-(function ($, Drupal, drupalSettings, debounce, displace) {
-
-  "use strict";
-
-  // autoResize option will turn off resizable and draggable.
-  drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
-
-  /**
-   * Resets the current options for positioning.
-   *
-   * This is used as a window resize and scroll callback to reposition the
-   * jQuery UI dialog. Although not a built-in jQuery UI option, this can
-   * be disabled by setting autoResize: false in the options array when creating
-   * a new Drupal.dialog().
-   */
-  function resetSize(event) {
-    var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
-    var adjustedOptions = {};
-    var windowHeight = $(window).height();
-    var option, optionValue, adjustedValue;
-    for (var n = 0; n < positionOptions.length; n++) {
-      option = positionOptions[n];
-      optionValue = event.data.settings[option];
-      if (optionValue) {
-        // jQuery UI does not support percentages on heights, convert to pixels.
-        if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
-          // Take offsets in account.
-          windowHeight -= displace.offsets.top + displace.offsets.bottom;
-          adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
-          // Don't force the dialog to be bigger vertically than needed.
-          if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
-            adjustedValue = 'auto';
-          }
-          adjustedOptions[option] = adjustedValue;
-        }
-      }
-    }
-    // Offset the dialog center to be at the center of Drupal.displace.offsets.
-    adjustedOptions = resetPosition(adjustedOptions);
-    event.data.$element
-      .dialog('option', adjustedOptions)
-      .trigger('dialogContentResize');
-  }
-
-  /**
-   * Position the dialog's center at the center of displace.offsets boundaries.
-   */
-  function resetPosition(options) {
-    var offsets = displace.offsets;
-    var left = offsets.left - offsets.right;
-    var top = offsets.top - offsets.bottom;
-
-    var leftString = (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + 'px';
-    var topString = (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + 'px';
-    options.position = {
-      my: 'center' + (left !== 0 ? leftString : '') + ' center' + (top !== 0 ? topString : '')
-    };
-    return options;
-  }
-
-  $(window).on({
-    'dialog:aftercreate': function (event, dialog, $element, settings) {
-      var autoResize = debounce(resetSize, 20);
-      var eventData = { settings: settings, $element: $element };
-      if (settings.autoResize === true || settings.autoResize === 'true') {
-        $element
-          .dialog('option', { resizable: false, draggable: false })
-          .dialog('widget').css('position', 'fixed');
-        $(window)
-          .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
-          .trigger('resize.dialogResize');
-        $(document).on('drupalViewportOffsetChange', eventData, autoResize);
-      }
-    },
-    'dialog:beforeclose': function (event, dialog, $element) {
-      $(window).off('.dialogResize');
-    }
-  });
-
-})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
new file mode 100644
index 0000000..4845cbd
--- /dev/null
+++ b/core/misc/dialog/dialog.ajax.js
@@ -0,0 +1,168 @@
+/**
+ * @file
+ * Extends the Drupal AJAX functionality to integrate the dialog API.
+ */
+
+(function ($, Drupal) {
+
+  "use strict";
+
+  Drupal.behaviors.dialog = {
+    attach: function (context, settings) {
+      var $context = $(context);
+
+      // Provide a known 'drupal-modal' DOM element for Drupal-based modal
+      // dialogs. Non-modal dialogs are responsible for creating their own
+      // elements, since there can be multiple non-modal dialogs at a time.
+      if (!$('#drupal-modal').length) {
+        $('<div id="drupal-modal" />').hide().appendTo('body');
+      }
+
+      // Special behaviors specific when attaching content within a dialog.
+      // These behaviors usually fire after a validation error inside a dialog.
+      var $dialog = $context.closest('.ui-dialog-content');
+      if ($dialog.length) {
+        // Remove and replace the dialog buttons with those from the new form.
+        if ($dialog.dialog('option', 'drupalAutoButtons')) {
+          // Trigger an event to detect/sync changes to buttons.
+          $dialog.trigger('dialogButtonsChange');
+        }
+
+        // Force focus on the modal when the behavior is run.
+        $dialog.dialog('widget').trigger('focus');
+      }
+    },
+
+    /**
+     * Scan a dialog for any primary buttons and move them to the button area.
+     *
+     * @param $dialog
+     *   An jQuery object containing the element that is the dialog target.
+     * @return
+     *   An array of buttons that need to be added to the button area.
+     */
+    prepareDialogButtons: function ($dialog) {
+      var buttons = [];
+      var $buttons = $dialog.find('.form-actions input[type=submit]');
+      $buttons.each(function () {
+        // Hidden form buttons need special attention. For browser consistency,
+        // the button needs to be "visible" in order to have the enter key fire
+        // the form submit event. So instead of a simple "hide" or
+        // "display: none", we set its dimensions to zero.
+        // See http://mattsnider.com/how-forms-submit-when-pressing-enter/
+        var $originalButton = $(this).css({
+          width: 0,
+          height: 0,
+          padding: 0,
+          border: 0
+        });
+        buttons.push({
+          'text': $originalButton.html() || $originalButton.attr('value'),
+          'class': $originalButton.attr('class'),
+          'click': function (e) {
+            $originalButton.trigger('mousedown').trigger('click').trigger('mouseup');
+            e.preventDefault();
+          }
+        });
+      });
+      return buttons;
+    }
+  };
+
+  /**
+   * Command to open a dialog.
+   */
+  Drupal.AjaxCommands.prototype.openDialog = function (ajax, response, status) {
+    if (!response.selector) {
+      return false;
+    }
+    var $dialog = $(response.selector);
+    if (!$dialog.length) {
+      // Create the element if needed.
+      $dialog = $('<div id="' + response.selector.replace(/^#/, '') + '"/>').appendTo('body');
+    }
+    // Set up the wrapper, if there isn't one.
+    if (!ajax.wrapper) {
+      ajax.wrapper = $dialog.attr('id');
+    }
+
+    // Use the ajax.js insert command to populate the dialog contents.
+    response.command = 'insert';
+    response.method = 'html';
+    ajax.commands.insert(ajax, response, status);
+
+    // Move the buttons to the jQuery UI dialog buttons area.
+    if (!response.dialogOptions.buttons) {
+      response.dialogOptions.drupalAutoButtons = true;
+      response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
+    }
+
+    // Bind dialogButtonsChange
+    $dialog.on('dialogButtonsChange', function () {
+      var buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
+      $dialog.dialog('option', 'buttons', buttons);
+    });
+
+    // Open the dialog itself.
+    response.dialogOptions = response.dialogOptions || {};
+    var dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
+    if (response.dialogOptions.modal) {
+      dialog.showModal();
+    }
+    else {
+      dialog.show();
+    }
+
+    // Add the standard Drupal class for buttons for style consistency.
+    $dialog.parent().find('.ui-dialog-buttonset').addClass('form-actions');
+  };
+
+  /**
+   * Command to close a dialog.
+   *
+   * If no selector is given, it defaults to trying to close the modal.
+   */
+  Drupal.AjaxCommands.prototype.closeDialog = function (ajax, response, status) {
+    var $dialog = $(response.selector);
+    if ($dialog.length) {
+      Drupal.dialog($dialog.get(0)).close();
+      if (!response.persist) {
+        $dialog.remove();
+      }
+    }
+
+    // Unbind dialogButtonsChange
+    $dialog.off('dialogButtonsChange');
+  };
+
+  /**
+   * Command to set a dialog property.
+   *
+   * jQuery UI specific way of setting dialog options.
+   */
+  Drupal.AjaxCommands.prototype.setDialogOption = function (ajax, response, status) {
+    var $dialog = $(response.selector);
+    if ($dialog.length) {
+      $dialog.dialog('option', response.optionName, response.optionValue);
+    }
+  };
+
+  /**
+   * Binds a listener on dialog creation to handle the cancel link.
+   */
+  $(window).on('dialog:aftercreate', function (e, dialog, $element, settings) {
+    $element.on('click.dialog', '.dialog-cancel', function (e) {
+      dialog.close('cancel');
+      e.preventDefault();
+      e.stopPropagation();
+    });
+  });
+
+  /**
+   * Removes all 'dialog' listeners.
+   */
+  $(window).on('dialog:beforeclose', function (e, dialog, $element) {
+    $element.off('.dialog');
+  });
+
+})(jQuery, Drupal);
diff --git a/core/misc/dialog/dialog.jquery-ui.js b/core/misc/dialog/dialog.jquery-ui.js
new file mode 100644
index 0000000..ed3fbc2
--- /dev/null
+++ b/core/misc/dialog/dialog.jquery-ui.js
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Adds default classes to buttons for styling purposes.
+ */
+(function ($) {
+
+  "use strict";
+
+  $.widget('ui.dialog', $.ui.dialog, {
+    options: {
+      buttonClass: 'button',
+      buttonPrimaryClass: 'button--primary'
+    },
+    _createButtons: function () {
+      var opts = this.options;
+      var primaryIndex;
+      var $buttons;
+      for (var index = 0, il = opts.buttons.length; index < il; index += 1) {
+        if (opts.buttons[index].primary && opts.buttons[index].primary === true) {
+          primaryIndex = index;
+          delete opts.buttons[index].primary;
+          break;
+        }
+      }
+      this._super();
+      $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
+      if (typeof primaryIndex !== 'undefined') {
+        $buttons.eq(index).addClass(opts.buttonPrimaryClass);
+      }
+    }
+  });
+
+})(jQuery);
diff --git a/core/misc/dialog/dialog.js b/core/misc/dialog/dialog.js
new file mode 100644
index 0000000..bc2c7c7
--- /dev/null
+++ b/core/misc/dialog/dialog.js
@@ -0,0 +1,64 @@
+/**
+ * @file
+ *
+ * Dialog API inspired by HTML5 dialog element:
+ * http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
+ */
+(function ($, Drupal, drupalSettings) {
+
+  "use strict";
+
+  drupalSettings.dialog = {
+    autoOpen: true,
+    dialogClass: '',
+    // Drupal-specific extensions: see dialog.jquery-ui.js.
+    buttonClass: 'button',
+    buttonPrimaryClass: 'button--primary',
+    // When using this API directly (when generating dialogs on the client side),
+    // you may want to override this method and do
+    // @code
+    // jQuery(event.target).remove()
+    // @endcode
+    // as well, to remove the dialog on closing.
+    close: function (event) {
+      Drupal.detachBehaviors(event.target, null, 'unload');
+    }
+  };
+
+  Drupal.dialog = function (element, options) {
+
+    function openDialog (settings) {
+      settings = $.extend({}, drupalSettings.dialog, options, settings);
+      // Trigger a global event to allow scripts to bind events to the dialog.
+      $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
+      $element.dialog(settings);
+      dialog.open = true;
+      $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
+    }
+
+    function closeDialog (value) {
+      $(window).trigger('dialog:beforeclose', [dialog, $element]);
+      $element.dialog('close');
+      dialog.returnValue = value;
+      dialog.open = false;
+      $(window).trigger('dialog:afterclose', [dialog, $element]);
+    }
+
+    var undef;
+    var $element = $(element);
+    var dialog = {
+      open: false,
+      returnValue: undef,
+      show: function () {
+        openDialog({modal: false});
+      },
+      showModal: function () {
+        openDialog({modal: true});
+      },
+      close: closeDialog
+    };
+
+    return dialog;
+  };
+
+})(jQuery, Drupal, drupalSettings);
diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js
new file mode 100644
index 0000000..9d03f69
--- /dev/null
+++ b/core/misc/dialog/dialog.position.js
@@ -0,0 +1,80 @@
+(function ($, Drupal, drupalSettings, debounce, displace) {
+
+  "use strict";
+
+  // autoResize option will turn off resizable and draggable.
+  drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
+
+  /**
+   * Resets the current options for positioning.
+   *
+   * This is used as a window resize and scroll callback to reposition the
+   * jQuery UI dialog. Although not a built-in jQuery UI option, this can
+   * be disabled by setting autoResize: false in the options array when creating
+   * a new Drupal.dialog().
+   */
+  function resetSize(event) {
+    var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
+    var adjustedOptions = {};
+    var windowHeight = $(window).height();
+    var option, optionValue, adjustedValue;
+    for (var n = 0; n < positionOptions.length; n++) {
+      option = positionOptions[n];
+      optionValue = event.data.settings[option];
+      if (optionValue) {
+        // jQuery UI does not support percentages on heights, convert to pixels.
+        if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
+          // Take offsets in account.
+          windowHeight -= displace.offsets.top + displace.offsets.bottom;
+          adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
+          // Don't force the dialog to be bigger vertically than needed.
+          if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
+            adjustedValue = 'auto';
+          }
+          adjustedOptions[option] = adjustedValue;
+        }
+      }
+    }
+    // Offset the dialog center to be at the center of Drupal.displace.offsets.
+    adjustedOptions = resetPosition(adjustedOptions);
+    event.data.$element
+      .dialog('option', adjustedOptions)
+      .trigger('dialogContentResize');
+  }
+
+  /**
+   * Position the dialog's center at the center of displace.offsets boundaries.
+   */
+  function resetPosition(options) {
+    var offsets = displace.offsets;
+    var left = offsets.left - offsets.right;
+    var top = offsets.top - offsets.bottom;
+
+    var leftString = (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + 'px';
+    var topString = (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + 'px';
+    options.position = {
+      my: 'center' + (left !== 0 ? leftString : '') + ' center' + (top !== 0 ? topString : '')
+    };
+    return options;
+  }
+
+  $(window).on({
+    'dialog:aftercreate': function (event, dialog, $element, settings) {
+      var autoResize = debounce(resetSize, 20);
+      var eventData = { settings: settings, $element: $element };
+      if (settings.autoResize === true || settings.autoResize === 'true') {
+        $element
+          .dialog('option', { resizable: false, draggable: false })
+          .dialog('widget').css('position', 'fixed');
+        $(window)
+          .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
+          .trigger('resize.dialogResize');
+        $(document).on('drupalViewportOffsetChange', eventData, autoResize);
+      }
+    },
+    'dialog:beforeclose': function (event, dialog, $element) {
+      $(window).off('.dialogResize');
+    }
+  });
+
+})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js
index 24de2e6..524d429 100644
--- a/core/modules/ckeditor/js/ckeditor.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.admin.js
@@ -532,7 +532,7 @@
          *   A jQuery DOM fragment that represents the new button group. It has
          *   not been added to the DOM yet.
          */
-        function insertNewGroup(success, $group) {
+        function insertNewGroup (success, $group) {
           if (success) {
             $group.appendTo($(event.currentTarget).closest('.ckeditor-row').children('.ckeditor-toolbar-groups'));
             // Focus on the new group.
@@ -1171,7 +1171,7 @@
    *   A callback to invoke after the button group naming modal dialog has been
    *   closed.
    */
-  function registerButtonMove(view, $button, callback) {
+  function registerButtonMove (view, $button, callback) {
     var $group = $button.closest('.ckeditor-toolbar-group');
 
     // If dropped in a placeholder button group, the user must name it.
@@ -1201,7 +1201,7 @@
    * @param jQuery $group
    *   A jQuery set that contains an li element that wraps a group of buttons.
    */
-  function registerGroupMove(view, $group) {
+  function registerGroupMove (view, $group) {
     // Remove placeholder classes if necessary.
     var $row = $group.closest('.ckeditor-row');
     if ($row.hasClass('placeholder')) {
@@ -1229,7 +1229,7 @@
    *   A callback to invoke after the button group naming modal dialog has been
    *   closed.
    */
-  function openGroupNameDialog(view, $group, callback) {
+  function openGroupNameDialog (view, $group, callback) {
     callback = callback || function () {};
 
     /**
@@ -1241,7 +1241,7 @@
      * @return Boolean
      *   Returns true when an error exists, otherwise returns false.
      */
-    function validateForm(form) {
+    function validateForm (form) {
       if (form.elements[0].value.length === 0) {
         var $form = $(form);
         if (!$form.hasClass('errors')) {
@@ -1266,12 +1266,12 @@
      *   The form DOM element that contains the input with the new button group
      *   title string.
      */
-    function closeDialog(action, form) {
+    function closeDialog (action, form) {
 
       /**
        * Closes the dialog when the user cancels or supplies valid data.
        */
-      function shutdown() {
+      function shutdown () {
         dialog.close(action);
 
         // The processing marker can be deleted since the dialog has been closed.
@@ -1286,7 +1286,7 @@
        * @param String name
        *   The new name of the CKEditor button group.
        */
-      function namePlaceholderGroup($group, name) {
+      function namePlaceholderGroup ($group, name) {
         // If it's currently still a placeholder, then that means we're creating
         // a new group, and we must do some extra work.
         if ($group.hasClass('placeholder')) {
@@ -1355,14 +1355,13 @@
           click: function () {
             closeDialog('apply', this);
           },
-          'class': 'button-primary button'
+          primary: true
         },
         {
           text: Drupal.t('Cancel'),
           click: function () {
             closeDialog('cancel');
           },
-          'class': 'button'
         }
       ],
       open: function () {
diff --git a/core/modules/quickedit/js/util.js b/core/modules/quickedit/js/util.js
index 6eefa98..788309c 100644
--- a/core/modules/quickedit/js/util.js
+++ b/core/modules/quickedit/js/util.js
@@ -50,7 +50,8 @@
           text: Drupal.t('OK'),
           click: function () {
             networkErrorModal.close();
-          }
+          },
+          primary: true
         }
       ],
       create: function () {
diff --git a/core/modules/quickedit/js/views/AppView.js b/core/modules/quickedit/js/views/AppView.js
index b973000..227862c 100644
--- a/core/modules/quickedit/js/views/AppView.js
+++ b/core/modules/quickedit/js/views/AppView.js
@@ -325,7 +325,7 @@
       var that = this;
       var discardDialog;
 
-      function closeDiscardDialog(action) {
+      function closeDiscardDialog (action) {
         discardDialog.close(action);
         // The active modal has been removed.
         that.model.set('activeModal', null);
@@ -359,7 +359,8 @@
               text: Drupal.t('Save'),
               click: function () {
                 closeDiscardDialog('save');
-              }
+              },
+              primary: true
             },
             {
               text: Drupal.t('Discard changes'),
diff --git a/core/modules/system/src/Tests/Ajax/DialogTest.php b/core/modules/system/src/Tests/Ajax/DialogTest.php
index e0952b8..b41b6e2 100644
--- a/core/modules/system/src/Tests/Ajax/DialogTest.php
+++ b/core/modules/system/src/Tests/Ajax/DialogTest.php
@@ -145,7 +145,7 @@ public function testDialog() {
     // Check that CSS and JavaScript are "added" to the page dynamically.
     $this->assertTrue(in_array('jquery.ui.dialog.css', array_keys($ajax_result[0]['settings']['ajaxPageState']['css'])), 'jQuery UI dialog CSS added to the page.');
     $this->assertTrue(in_array('core/assets/vendor/jquery.ui/ui/jquery.ui.dialog.js', array_keys($ajax_result[0]['settings']['ajaxPageState']['js'])), 'jQuery UI dialog JS added to the page.');
-    $this->assertTrue(in_array('core/misc/dialog.ajax.js', array_keys($ajax_result[0]['settings']['ajaxPageState']['js'])), 'Drupal dialog JS added to the page.');
+    $this->assertTrue(in_array('core/misc/dialog/dialog.ajax.js', array_keys($ajax_result[0]['settings']['ajaxPageState']['js'])), 'Drupal dialog JS added to the page.');
 
     // Check that the response matches the expected value.
     $this->assertEqual($modal_expected_response, $ajax_result[3], 'POST request modal dialog JSON response matches.');
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 8c92a09..25341d7 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -846,7 +846,7 @@ td.group-title {
 }
 
 .views-ui-dialog .views-add-form-selected.container-inline {
-  padding-top: 0;
+  padding: 0;
 }
 
 .views-ui-dialog .views-add-form-selected.container-inline > div {
diff --git a/core/themes/seven/css/dialog.theme.css b/core/themes/seven/css/dialog.theme.css
new file mode 100644
index 0000000..547ca7f
--- /dev/null
+++ b/core/themes/seven/css/dialog.theme.css
@@ -0,0 +1,93 @@
+/**
+ * Presentational styles for Drupal dialogs.
+ */
+
+.ui-dialog {
+  background: transparent;
+  border: 0;
+  position: absolute;
+  z-index: 1260;
+  overflow: visible;
+  padding: 0;
+}
+.ui-dialog .ui-dialog-titlebar {
+  background: rgba(107,107,107,0.65);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  padding: 15px;
+}
+.ui-dialog .ui-dialog-title {
+  font-size: 1.231em;
+  font-weight: 600;
+  margin: 0;
+  color: #ffffff;
+  -webkit-font-smoothing: antialiased;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+  border: 0;
+  background: none;
+  right: 20px;
+  top: 20px;
+  margin: 0;
+  height: 16px;
+  width: 16px;
+  position: absolute;
+}
+.ui-dialog .ui-icon.ui-icon-closethick {
+  background: url('../../../misc/icons/ffffff/ex.svg') 0 0 no-repeat;
+  margin-top: -12px;
+}
+.ui-dialog .ui-widget-content.ui-dialog-content {
+  background: #ffffff;
+  overflow: auto;
+  padding: 1em;
+}
+.views-ui-dialog .ui-widget-content.ui-dialog-content {
+  padding: 0;
+}
+.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
+  background: #f5f5f2;
+  /*border-top: 1px solid #bfbfbf;*/
+  margin: 0;
+  padding: 15px 20px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+  margin: 0;
+  padding: 0;
+  float: none;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
+  padding: 0;
+}
+.ui-dialog .ui-dialog-content {
+  position: static;
+}
+
+/* Form action buttons are moved in dialogs. Remove empty space. */
+.ui-dialog .ui-dialog-content .form-actions {
+  padding: 0;
+  margin: 0;
+}
+.ui-dialog .ajax-progress-throbber {
+  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
+  left: 49%;
+  position: fixed;
+  top: 48.5%;
+  z-index: 1000;
+  background-color: #232323;
+  background-image: url("../../../misc/loading-small.gif");
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 7px;
+  height: 24px;
+  opacity: 0.9;
+  padding: 4px;
+  width: 24px;
+}
+.ui-dialog .ajax-progress-throbber .throbber,
+.ui-dialog .ajax-progress-throbber .message {
+  display: none;
+}
+
diff --git a/core/themes/seven/jquery.ui.theme.css b/core/themes/seven/jquery.ui.theme.css
index 17dc06a..4edb57a 100644
--- a/core/themes/seven/jquery.ui.theme.css
+++ b/core/themes/seven/jquery.ui.theme.css
@@ -8,10 +8,10 @@
  * Component containers
  */
 .ui-widget {
-  background: #fff;
+  background: none;
 }
 .ui-widget-content {
-  border: solid 1px #ccc;
+  border: none;
 }
 
 /**
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 19ec447..bed89a8 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -15,6 +15,9 @@ stylesheets:
 stylesheets-override:
   - vertical-tabs.css
   - jquery.ui.theme.css
+  - css/dialog.theme.css
+stylesheets-remove:
+  - jquery.ui.dialog.css
 quickedit_stylesheets:
   - quickedit.css
 regions: