diff --git a/core/includes/form.inc b/core/includes/form.inc
index 7d1a253..2da36f7 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -3347,7 +3347,7 @@ function form_pre_render_actions_dropbutton(array $element) {
       // Add this button to the corresponding dropbutton.
       // @todo Change #type 'dropbutton' to be based on theme_item_list()
       //   instead of theme_links() to avoid this preemptive rendering.
-      $button = drupal_render($element[$key]);
+      $button = $element[$key];
       $dropbuttons[$dropbutton]['#links'][$key] = array(
         'title' => $button,
         'html' => TRUE,
@@ -4153,10 +4153,19 @@ function form_pre_render_button($element) {
   $element['#attributes']['type'] = 'submit';
   element_set_attributes($element, array('id', 'name', 'value'));
 
-  $element['#attributes']['class'][] = 'button';
   if (!empty($element['#button_type'])) {
-    $element['#attributes']['class'][] = 'button-' . $element['#button_type'];
+    if($element['#button_type'] == 'link') {
+      $element['#attributes']['class'][] = 'link';
+    }
+    else {
+      $element['#attributes']['class'][] = 'button';
+      $element['#attributes']['class'][] = 'button--' . $element['#button_type'];
+    }
   }
+  else {
+    $element['#attributes']['class'][] = 'button';
+  }
+
   // @todo Various JavaScript depends on this button class.
   $element['#attributes']['class'][] = 'form-submit';
 
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index f1e0861..544e3e0 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1782,17 +1782,109 @@ function theme_links($variables) {
 }
 
 /**
- * Returns HTML for wrapping a dropbutton menu.
+ * Prepare variables for theme_ui_menu().
+ */
+function template_preprocess_ui_menu(&$variables) {
+  $element = &$variables['element'];
+
+  if (isset($element['#theme_wrappers']) && $element['#theme_wrappers'][0] == 'dropbutton_wrapper') {
+    array_shift($element['#links']);
+  }
+  $links = $element['#links'];
+
+  if (!isset($element['#attributes']['class'])) {
+    $element['#attributes']['class'] = array();
+  }
+  array_push($element['#attributes']['class'], 'ui-menu', 'js-popup-menu');
+  // Not sure where this is getting added but it's breaking the pop up.
+  $element['#attributes']['class'] = array_diff($element['#attributes']['class'], array('dropbutton'));
+  $element['#attributes']['role'] = 'menu';
+
+  foreach ($links as $key => $link) {
+    if (!isset($link['#attributes']['class'])) {
+      $link['#attributes']['class'] = array();
+    }
+    array_push($link['#attributes']['class'], 'ui-menu__item', 'js-menu__item');
+    $link['#attributes']['role'] = 'menuitem';
+
+    $link_element = array(
+      '#type' => 'link',
+      '#title' => $link['title'],
+      '#href' => $link['href'],
+      '#options' => array(
+        'attributes' => $link['#attributes'],
+        'html' => TRUE,
+      ),
+    );
+    $element['#links'][$key] = $link_element;
+  }
+}
+
+/**
+ * Returns HTML for a UI (application) menu.
+ * @param  array $variables
+ *   An associative array containing:
+ *   - element: An associative array containing the properties and children of
+ *     the UI menu. Properties used: #links
+ */
+function theme_ui_menu($variables) {
+  $element = $variables['element'];
+  $items = $element['#links'];
+  if(empty($items)) {
+    return;
+  }
+  $output = '<div' . new Attribute($element['#attributes']) . '>';
+  foreach ($items as $item) {
+    $output .= drupal_render($item);
+  }
+  $output .= '</div>';
+
+  return $output;
+}
+
+/**
+ * Returns HTML to wrap a dropbutton menu in a popup, in turn associated with
+ * a triggering button.
  *
- * @param array $variables
+ * @param array $variable
  *   An associative array containing:
  *   - element: An associative array containing the properties and children of
  *     the dropbutton menu. Properties used: #children.
  */
 function theme_dropbutton_wrapper($variables) {
-  if (!empty($variables['element']['#children'])) {
-    return '<div class="dropbutton-wrapper"><div class="dropbutton-widget">' . $variables['element']['#children'] . '</div></div>';
+  $link = reset($variables['element']['#links']);
+  dpm($variables['element']);
+  if (!isset($link['attributes']['class'])) {
+    $link['attributes']['class'] = array();
+  }
+  $link['attributes']['class'][] = 'button';
+  $dropbutton_classes = 'button button--icon-only noscript-hidden js-popup__trigger';
+
+  if (in_array('compact', $link['attributes']['class'])) {
+    $link['attributes']['class'][] = 'button--small';
+    $dropbutton_classes .= ' button--small';
+  }
+  $variables['element']['#attributes']['class'][] = 'button-group';
+  $variables['element']['#attributes']['class'][] = 'popup-container';
+  if(!empty($variables['element']['#children'])) {
+    $output = '<div'. new Attribute($variables['element']['#attributes']) .'>';
+    $output .= '<div class="button-group__item">' . l($link['title'], $link['href'], $link)  . '</div>';
+    $output .= '<div class="button-group__item" data-behavior="popup">';
+    $output .= '<button class="' . $dropbutton_classes . '" type="button" aria-haspopup="true">';
+    $output .= '<i class="triangle-down" aria-hidden="true"><span class="visually-hidden">Options</span></i>';
+    $output .= '</button>';
+    $output .= '<div class="popup js-popup__target" aria-hidden="true">' . $variables['element']['#children'] . '</div>';
+    $output .= '</div>';
+    $output .= '</div>';
+  }
+  else {
+    // If there are no children, just print out a button.
+    $output = '<div'. new Attribute($variables['element']['#attributes']) .'>';
+    $output .= l($link['title'], $link['href'], $link);
+    $output .= '</div>';
+
   }
+  return $output;
 }
 
 /**
@@ -3117,6 +3209,9 @@ function drupal_common_theme() {
     'links' => array(
       'variables' => array('links' => array(), 'attributes' => array('class' => array('links')), 'heading' => array()),
     ),
+    'ui_menu' => array(
+      'render element' => 'element',
+    ),
     'dropbutton_wrapper' => array(
       'render element' => 'element',
     ),
diff --git a/core/misc/splitbutton/button-groups.css b/core/misc/splitbutton/button-groups.css
new file mode 100644
index 0000000..ebfca34
--- /dev/null
+++ b/core/misc/splitbutton/button-groups.css
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * Structural styles for a contiguous group of UI buttons in Seven
+ */
+
+/**
+ * 1. Prevent extra vertical whitespace when children are floated or
+ *    inline-block.
+ */
+.button-group {
+  display: inline-block;
+  vertical-align: top;  /* 1 */
+}
+/* Clearfix manually to avoid needing to add a utility class to the markup */
+.button-group:after {
+  content: ' ';
+  display: block;
+  clear: both;
+}
+
+/* Float children to prevent whitespace between items */
+.button-group__item {
+  float: left;  /* 1 */
+}
diff --git a/core/misc/splitbutton/buttons.css b/core/misc/splitbutton/buttons.css
new file mode 100644
index 0000000..5a8ff2c
--- /dev/null
+++ b/core/misc/splitbutton/buttons.css
@@ -0,0 +1,48 @@
+/**
+ * @file
+ * Structural styles for UI buttons in Seven
+ *
+ * Apply these classes to any element (<link>, <button>, <input>, etc.) that
+ * should appear as a button.
+ */
+
+/* ====================================
+   Buttons
+   ==================================== */
+
+/**
+ * 1. Enable z-index on buttons.
+ * 2. Normalize 'line-height'; can’t be changed from 'normal' in Firefox 4+.
+ * 3. Allows full range of styling in Webkit and Gecko.
+ *
+ * N.B. Assumes box-sizing: border-box applied globally.
+ */
+.button {
+  display: inline-block;
+  position: relative;  /* 1 */
+  text-align: center;
+  line-height: normal;  /* 2 */
+  cursor: pointer;
+  -webkit-appearance: none;  /* 3 */
+  -moz-appearance:    none;  /* " */
+}
+
+/* Prevent focus ring being covered by next siblings. */
+.button:focus {
+  z-index: 10;
+}
+
+
+/* ====================================
+   Link actions
+   ==================================== */
+
+.link {
+  display: inline;
+  cursor: pointer;
+  padding: 0;
+  border: 0;
+  background: none;
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+}
diff --git a/core/misc/splitbutton/jquery.menu.js b/core/misc/splitbutton/jquery.menu.js
new file mode 100644
index 0000000..a274583
--- /dev/null
+++ b/core/misc/splitbutton/jquery.menu.js
@@ -0,0 +1,100 @@
+/**
+ * @file
+ * Keyboard navigable UI menu
+ */
+
+;
+(function ($, document, undefined) {
+  "use strict";
+
+  var defaults = {
+    item: '.js-menu__item'
+  };
+
+  var Menu = function (element, options) {
+    // Instance properties
+    this.settings = $.extend({}, defaults, options);
+    this.activeItem = null;
+
+    // DOM references
+    this.element = element;
+    this.$element = $(element);
+    this.items = this.element.querySelectorAll(this.settings.item);
+    this.$items = $(this.items);
+
+    this.init();
+  };
+
+  Menu.prototype = {
+
+    init: function () {
+      var self = this;
+
+      // Make the menu focusable, but only programmatically (script manages
+      // focusing child items).
+      this.element.setAttribute('tabindex', '-1');
+
+      // Add a unique id, prefixed with the 'drupal' namespace, to each
+      // menuitem. We need the ids so the aria-activedescendant attribute can
+      // be programattically set to the currently-focused menuitem.
+      $.each(this.items, function () {
+        $(this).uniqueId('drupal');
+      });
+
+      // Point screen readers to the active menu item.
+      this.$element.on('focusout.menu', function () {
+        self.activeItem = null;
+        self.element.removeAttribute('aria-activedescendant');
+      });
+
+      this.$element.on('focusin.menu', this.settings.item, function (event) {
+        self.activeItem = event.target;
+        self.element.setAttribute('aria-activedescendant', self.activeItem.getAttribute('id'));
+      });
+
+      this.$element.on({
+        // On up/down arrow keypress, move focus up or down the menuitem list.
+        'keydown.menu': function (event) {
+          var index = self.$items.index(document.activeElement);
+          var lastindex = self.$items.length - 1;
+
+          // Determine which item needs focus and prevent scrolling the page.
+          if (event.which === 38) {  // key UPARROW
+            event.preventDefault();
+            index--;
+            index = (index < 0) ? 0 : index;
+          } else if (event.which === 40) {  // key DOWNARROW
+            event.preventDefault();
+            index++;
+            index = (index > lastindex) ? lastindex : index;
+          }
+
+          // Focus the target menuitem.
+          self.$items.get(index).focus();
+        },
+
+        // Listen for popups announcing their open event.
+        'popup:open': function (event) {
+          // If a popup was opened which contains this menu, focus the menu so
+          // in order to capture keyboard events.
+          if (self.$element.closest(event.source)) {
+            self.$element.focus();
+
+            // Inspect the original event that caused the popup to open.
+            // If it was opened from the keyboard, focus the first menuitem.
+            if (event.original && event.original.type === 'keydown') {
+              self.$items.first().focus();
+            }
+          }
+        }
+      });
+
+      // Tag the element as initialized and listening for published events.
+      this.$element.addClass('is-menu is-listening');
+    }
+  };
+
+  // Use the plugin factory (jquery.plugin.js) to register the plugin.
+  $.plugin('menu', Menu);
+
+})(jQuery, document);
diff --git a/core/misc/splitbutton/jquery.plugin.js b/core/misc/splitbutton/jquery.plugin.js
new file mode 100644
index 0000000..f670dbf
--- /dev/null
+++ b/core/misc/splitbutton/jquery.plugin.js
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * jQuery plugin factory. Prevents multiple identical instantiations on the same
+ * DOM node.
+ *
+ * @param {string} name  The name for the jQuery plugin.
+ * @param {function} Plugin  The module or functionality to pluginize. Itself
+ * takes a jQuery collection of elements and options.
+ *
+ */
+
+jQuery.plugin = function (name, Plugin) {
+  jQuery.fn[name] = function (options) {
+    return this.each(function () {
+      if (!jQuery.data(this, name)) {
+        jQuery.data(this, name, new Plugin(this, options));
+      }
+    });
+  };
+};
diff --git a/core/misc/splitbutton/jquery.popup.js b/core/misc/splitbutton/jquery.popup.js
new file mode 100644
index 0000000..4251aea
--- /dev/null
+++ b/core/misc/splitbutton/jquery.popup.js
@@ -0,0 +1,147 @@
+/**
+ * @file
+ * Keyboard-navigable button/action that discloses a popup, optionally
+ * containing a Menu.
+ */
+
+;
+(function ($, document, undefined) {
+  "use strict";
+
+  var defaults = {
+    trigger: '.js-popup__trigger',
+    triggerActiveClass: 'is-active',
+    target: '.js-popup__target',
+    targetActiveClass: 'is-open',
+    menu: '.js-popup__menu'
+  };
+
+  function Popup (element, options) {
+    // Instance properties
+    this.settings = $.extend({}, defaults, options);
+    this.isActive = false;
+
+    // DOM references
+    this.element = element;
+    this.$element = $(element);
+    this.trigger = this.element.querySelector(this.settings.trigger);
+    this.$trigger = $(this.trigger);
+    this.popup = this.element.querySelector(this.settings.target);
+    this.$popup = $(this.popup);
+
+    this.init();
+  }
+
+  Popup.prototype = {
+
+    init: function () {
+      var self = this;
+
+      this.$element.on({
+        // Listen for popups announcing their open event and close if we are not
+        // the source of the event (only one popup open at a time).
+        // This event is custom and can’t be delegated by normal means.
+        'popup:open': function (event) {
+          if (self.isActive && event.source !== self.element) {
+            self.close();
+          }
+        }
+      });
+
+      // All handlers are namespaced and delegated to the body.
+      $(document).on({
+        'keydown.popup': function (event) {
+          // An 'escape' keypress anywhere closes all open popups.
+          if (event.which === 27) {
+            self.close();
+          }
+          // A 'down arrow' keypress on a trigger opens its popup.
+          if (event.target === self.trigger && event.which === 40) {
+            if (!self.isActive) {
+              self.open(event);
+            }
+          }
+        },
+
+        'click.popup': function (event) {
+          // A click on or inside a trigger toggles its popup.
+          if ($(event.target).closest(self.trigger).length) {
+            event.preventDefault();
+            self.toggle();
+          }
+          // A click outside of a particular trigger and its popup closes the
+          // popup.
+          else if (!$(event.target).closest(self.popup).length) {
+            self.close();
+          }
+        },
+
+        'focusin.popup': function (event) {
+          // Initialization of a child menu (if any) is deferred until the
+          // popup element gains focus.
+          if ($(event.target).closest(self.element).length) {
+            var menuElement = self.element.querySelector(self.settings.menu);
+            if (menuElement !== null) {
+              $(menuElement).menu();
+            }
+          }
+        }
+      });
+
+      // Tag the element as initialized and listening for published events.
+      this.$element.addClass('is-popup is-listening');
+    },
+
+    open: function (originalEvent) {
+      this.isActive = true;
+      this.$trigger.addClass(this.settings.triggerActiveClass);
+      this.$popup.addClass(this.settings.targetActiveClass);
+      // Expose the popup to screen readers
+      this.popup.setAttribute('aria-hidden', false);
+
+      if (!originalEvent) {
+        originalEvent = null;
+      }
+
+      // Notify each listening component that a popup has opened, tell them
+      // which one, and (if provided) include the original event object that
+      // caused the popup to open.
+      $('.is-listening').trigger({
+        type: 'popup:open',
+        source: this.element,
+        original: originalEvent
+      });
+    },
+
+    close: function () {
+      // Hide the popup from screen readers.
+      this.popup.setAttribute('aria-hidden', true);
+      this.$popup.removeClass(this.settings.targetActiveClass);
+      this.$trigger.removeClass(this.settings.triggerActiveClass);
+      this.isActive = false;
+
+      // If focus was within the popup, re-focus the popup trigger. Prevents
+      // focus being lost inside the hidden popup.
+      if ($(document.activeElement).closest(this.popup).length) {
+        this.$trigger.focus();
+      }
+
+      // Annouce the close event to any subscribers.
+      $('.is-listening').trigger('popup:close', this.element);
+    },
+
+    toggle: function (event) {
+      if (this.isActive) {
+        this.close();
+      }
+      else {
+        this.open();
+      }
+    }
+
+  };
+
+  // Use the plugin factory (jquery.plugin.js) to register the plugin.
+  $.plugin('popup', Popup);
+
+})(jQuery, document);
diff --git a/core/misc/splitbutton/jquery.unique-id.js b/core/misc/splitbutton/jquery.unique-id.js
new file mode 100644
index 0000000..cd2e24b
--- /dev/null
+++ b/core/misc/splitbutton/jquery.unique-id.js
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * Generate unique session-level html ids
+ */
+
+(function ($, undefined) {
+  'use strict';
+
+  var uuid = 0;
+
+  $.fn.uniqueId = function (prefix) {
+    return this.each(function () {
+      if (!this.id) {
+        this.id = prefix + '-id-' + (++uuid);
+      }
+    });
+  };
+
+})(jQuery);
diff --git a/core/misc/splitbutton/main.js b/core/misc/splitbutton/main.js
new file mode 100644
index 0000000..3c89a51
--- /dev/null
+++ b/core/misc/splitbutton/main.js
@@ -0,0 +1,32 @@
+/*!
+ * Main
+ */
+
+(function ($, Drupal) {
+  'use strict';
+
+  /**
+   * Process elements with the .dropbutton class on page load.
+   */
+  Drupal.behaviors.dropButton = {
+    attach: function (context, settings) {
+
+      $(context).find('[data-behavior="popup"]').once('splitbutton').popup();
+/*
+      var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
+      if ($dropbuttons.length) {
+        // Adds the delegated handler that will toggle dropdowns on click.
+        var $body = $('body').once('dropbutton-click');
+        if ($body.length) {
+          $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
+        }
+        // Initialize all buttons.
+        for (var i = 0, il = $dropbuttons.length; i < il; i++) {
+          DropButton.dropbuttons.push(new DropButton($dropbuttons[i], settings.dropbutton));
+        }
+      }
+*/
+    }
+  };
+
+})(jQuery, Drupal);
diff --git a/core/misc/splitbutton/menus.css b/core/misc/splitbutton/menus.css
new file mode 100644
index 0000000..dc60cf6
--- /dev/null
+++ b/core/misc/splitbutton/menus.css
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * Structural styles for generic UI menus in Seven
+ */
+
+/* N.B. Assumes box-sizing: border-box applied globally. */
+.ui-menu__item {
+  display: block;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  line-height: normal;
+}
+
+/**
+ * 1. Menus may get temporary focus via tabindex to enable keydown detection;
+ *    since focus is immediately passed to an element with visible focus,
+ *    we don’t want this to be visible.
+ */
+.js .ui-menu {
+  outline: 0; /* 1 */
+}
diff --git a/core/misc/splitbutton/popups.css b/core/misc/splitbutton/popups.css
new file mode 100644
index 0000000..e0be287
--- /dev/null
+++ b/core/misc/splitbutton/popups.css
@@ -0,0 +1,31 @@
+/**
+ * @file
+ * Structural styles for popup/popover/dropdown containers in Seven
+ */
+
+.popup-container {
+  display: inline-block;
+  position: relative;
+}
+
+/**
+ * 1. The popup is never narrower than its trigger. Assumes box-sizing:
+ *    border-box applied globally.
+ */
+.popup {
+  overflow: hidden;
+  min-width: 100%;  /* 1 */
+}
+
+/* Position values are applied with JS at runtime. */
+.js .popup {
+  position: absolute;
+  display: none;
+  top: 100%;
+  left: 0;
+  margin-top: 2px;
+}
+.popup.is-open {
+  display: block;
+  z-index: 90;
+}
diff --git a/core/misc/splitbutton/shapes.css b/core/misc/splitbutton/shapes.css
new file mode 100644
index 0000000..5b0ddb0
--- /dev/null
+++ b/core/misc/splitbutton/shapes.css
@@ -0,0 +1,48 @@
+/**
+ * @file
+ * Stuctural styles for pure-CSS arrow icons in Seven
+ *
+ * Used to indicate the presence of a dropdown menu or (in table headers) the
+ * column sort direction.
+ */
+
+/**
+ * 1. The border is used to render the element; its color is the visible color.
+ */
+[class^="triangle"] {
+  display: inline-block;
+  width: 0;
+  height: 0;
+}
+/**
+ * Use !important to enforce the three transparent sides so that we can change
+ * the color of any triangle with just 'border-color'
+ */
+.triangle-up {
+  border-top: 0 solid transparent !important;
+  border-right: 0.325em solid transparent !important;
+  border-bottom: 0.35em solid #000000;
+  border-left: 0.325em solid transparent !important;
+  vertical-align: 0.125em;
+}
+.triangle-right {
+  border-top: 0.325em solid transparent !important;
+  border-right: 0 solid transparent !important;
+  border-bottom: 0.325em solid transparent !important;
+  border-left: 0.35em solid #000000;
+  vertical-align: 0.1em;
+}
+.triangle-down {
+  border-top: 0.35em solid #000000;
+  border-right: 0.325em solid transparent !important;
+  border-bottom: 0 solid transparent !important;
+  border-left: 0.325em solid transparent !important;
+  vertical-align: 0.125em;
+}
+.triangle-left {
+  border-top: 0.325em solid transparent !important;
+  border-right: 0.35em solid #000000;
+  border-bottom: 0.325em solid transparent !important;
+  border-left: 0 solid transparent !important;
+  vertical-align: 0.1em;
+}
diff --git a/core/misc/splitbutton/utils.css b/core/misc/splitbutton/utils.css
new file mode 100644
index 0000000..14f8561
--- /dev/null
+++ b/core/misc/splitbutton/utils.css
@@ -0,0 +1,31 @@
+/**
+ * @file
+ */
+
+/**
+ * New positioning context
+ */
+.position-container {
+  position: relative;
+}
+
+/**
+ * Hide an element when js is off
+ */
+.no-js .noscript-hidden {
+  display: none;
+}
+
+/**
+ * Remove browser styles, especially for <buttons> and so on.
+ */
+.reset-appearance {
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  appearance:         none;
+  border: 0 none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+}
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 0df34a0..5d7b4c0 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -564,11 +564,11 @@ function system_element_info() {
   );
   $types['dropbutton'] = array(
     '#pre_render' => array('drupal_pre_render_dropbutton'),
-    '#theme' => 'links__dropbutton',
+    '#theme' => 'ui_menu',
   );
   $types['operations'] = array(
     '#pre_render' => array('drupal_pre_render_dropbutton'),
-    '#theme' => 'links__dropbutton__operations',
+    '#theme' => 'ui_menu__operations',
   );
 
   $types['container'] = array(
@@ -1441,11 +1441,19 @@ function system_library_info() {
     'website' => 'http://drupal.org/node/1608878',
     'version' => '1.0',
     'js' => array(
-      'core/misc/dropbutton/dropbutton.js' => array(),
+      'core/misc/splitbutton/jquery.plugin.js' => array(),
+      'core/misc/splitbutton/jquery.unique-id.js' => array(),
+      'core/misc/splitbutton/jquery.popup.js' => array(),
+      'core/misc/splitbutton/jquery.menu.js' => array(),
+      'core/misc/splitbutton/main.js' => array(),
     ),
     'css' => array(
-      'core/misc/dropbutton/dropbutton.css' => array(),
-      'core/misc/dropbutton/dropbutton.theme.css' => array(),
+      'core/misc/splitbutton/button-groups.css' => array(),
+      'core/misc/splitbutton/buttons.css' => array(),
+      'core/misc/splitbutton/menus.css' => array(),
+      'core/misc/splitbutton/popups.css' => array(),
+      'core/misc/splitbutton/shapes.css' => array(),
+      'core/misc/splitbutton/utils.css' => array(),
     ),
     'dependencies' => array(
       array('system', 'jquery'),
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 22f8c4a..09a3c61 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -31,13 +31,13 @@
 
 /* @group Icons */
 
-.views-admin .icon {
+.views-admin .icon:before,
+.views-admin .icon-text:before {
+  content: ' ';
+  display: block;
   height: 16px;
   width: 16px;
-}
-
-.views-admin .icon,
-.views-admin .icon-text {
+  margin: 1px 0;
   background-attachment: scroll;
   background-image: url("../images/sprites.png");
   background-position: left top; /* LTR */
@@ -48,43 +48,6 @@
   background-position: right top;
 }
 
-.views-admin a.icon {
-  background-image:
-    url("../images/sprites.png"),
-    -moz-linear-gradient(
-      -90deg,
-      #fff 0,
-      #e8e8e8 100%);
-  background-image:
-    url("../images/sprites.png"),
-    -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      color-stop(0.0, rgba(255, 255, 255, 1.0)),
-      color-stop(1.0, rgba(232, 232, 232, 1.0))
-    );
-  background-image:
-    url("../images/sprites.png"),
-    -webkit-linear-gradient(
-      -90deg,
-      #fff 0,
-      #e8e8e8 100%);
-  background-repeat: no-repeat, repeat-y;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset;
-}
-
-.views-admin a.icon:hover {
-  border-color: #d0d0d0;
-  box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset;
-}
-
-.views-admin a.icon:active {
-  border-color: #c0c0c0;
-}
-
 /**
  * Targets a <span> element inside an <a> element.
  * This assumes no visible text from the span.
@@ -95,10 +58,9 @@
   position: relative;
 }
 
-.views-admin .icon.compact {
-  display: block;
-  overflow: hidden;
-  text-indent: -9999px;
+/* We can't use the Phark method of image replacement here */
+.views-admin .icon.compact .icon__text {
+  display: none;
 }
 
 /* Targets any element with an icon -> text combo */
@@ -110,43 +72,31 @@
   padding-right: 19px;
 }
 
-.views-admin .icon.linked {
+.views-admin .icon.linked:before {
   background-position: center -153px;
 }
 
-.views-admin .icon.unlinked {
+.views-admin .icon.unlinked:before {
   background-position: center -195px;
 }
 
-.views-admin .icon.add {
+.views-admin .icon.add:before {
   background-position: center 3px;
 }
 
-.views-admin a.icon.add {
-  background-position: center 3px, left top;
-}
-
-.views-admin .icon.delete {
+.views-admin .icon.delete:before {
   background-position: center -52px;
 }
 
-.views-admin a.icon.delete {
-  background-position: center -52px, left top;
-}
-
-.views-admin .icon.rearrange {
+.views-admin .icon.rearrange:before {
   background-position: center -111px;
 }
 
-.views-admin a.icon.rearrange {
-  background-position: center -111px, left top;
-}
-
-.views-displays .secondary a:hover > .icon.add {
+.views-displays .secondary a:hover > .icon.add:before {
   background-position: center -25px;
 }
 
-.views-displays .secondary .open a:hover > .icon.add {
+.views-displays .secondary .open a:hover > .icon.add:before {
   background-position: center 3px;
 }
 
@@ -185,6 +135,9 @@ input.form-radio {
 [dir=rtl] .views-admin a.button:not(.js-hide) + a.button {
   margin-right: 1em;
 }
+.button-group__item .form-submit + .form-submit.ui-menu__item {
+  margin: 0;
+}
 
 .container-inline {
   padding-top: 15px;
@@ -443,6 +396,10 @@ td.group-title {
   padding: 8px 8px 8px;
 }
 
+.views-display-top .dropbutton {
+  float: right;
+}
+
 .views-display-top .secondary {
   margin-right: 18em;
 }
@@ -721,6 +678,11 @@ ul#views-display-menu-tabs li.add ul.action-list li{
 .views-ui-display-tab-bucket {
   position: relative;
 }
+.views-ui-display-tab-bucket .dropbutton {
+  position: absolute;
+  right: 5px;
+  top: 4px;
+}
 
 /* @end */
 
@@ -1142,58 +1104,6 @@ div.messages {
 
 /* @end */
 
-/* @group Buttons */
-
-.dropbutton-multiple {
-  position: absolute;
-}
-.dropbutton-widget {
-  position: relative;
-}
-.dropbutton-multiple .dropbutton-widget {
-  padding-right: 1.75em;
-}
-.dropbutton-wrapper {
-  font-size: 11px;
-  line-height: 1.4555;
-}
-.dropbutton li > * {
-  margin: 0;
-  padding: 0.2em 0.75em;
-}
-
-.views-display-top .dropbutton-wrapper {
-  position: absolute;
-  right: 12px;
-  top: 7px;
-}
-.views-display-top .dropbutton-wrapper a {
-  font-size: 12px;
-}
-
-.views-ui-display-tab-bucket .dropbutton-wrapper {
-  position: absolute;
-  right: 5px;
-  top: 4px;
-}
-
-.views-ui-display-tab-actions .dropbutton-wrapper li a,
-.views-ui-display-tab-actions .dropbutton-wrapper input {
-  background: none;
-  border: medium;
-  font-family: inherit;
-  font-size: 12px;
-  padding-left: 12px;
-  margin-bottom: 0;
-}
-
-.views-ui-display-tab-actions .dropbutton-wrapper input:hover {
-  background: none;
-  border: none;
-}
-
-/* @end */
-
 .views-list-section {
   margin-bottom: 2em;
 }
diff --git a/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
index 015a855..cc189cd 100644
--- a/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
+++ b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
@@ -383,19 +383,13 @@ public function getDisplayDetails($view, $display) {
         '#theme_wrappers' => array('dropbutton_wrapper'),
       );
 
-      // Because some of the 'links' are actually submit buttons, we have to
-      // manually wrap each item in <li> and the whole list in <ul>.
-      $build['top']['actions']['prefix']['#markup'] = '<ul class="dropbutton">';
-
       if (!$is_display_deleted) {
         if (!$is_enabled) {
-          $build['top']['actions']['enable'] = array(
+          $build['top']['actions']['#links']['enable'] = array(
             '#type' => 'submit',
             '#value' => t('Enable @display_title', array('@display_title' => $display_title)),
             '#limit_validation_errors' => array(),
             '#submit' => array(array($this, 'submitDisplayEnable'), array($this, 'submitDelayDestination')),
-            '#prefix' => '<li class="enable">',
-            "#suffix" => '</li>',
           );
         }
         // Add a link to view the page unless the view is disabled or has no
@@ -403,34 +397,32 @@ public function getDisplayDetails($view, $display) {
         elseif ($view->status() && $view->get('executable')->displayHandlers->get($display['id'])->hasPath()) {
           $path = $view->get('executable')->displayHandlers->get($display['id'])->getPath();
           if ($path && (strpos($path, '%') === FALSE)) {
-            $build['top']['actions']['path'] = array(
+            $build['top']['actions']['#links']['path'] = array(
               '#type' => 'link',
               '#title' => t('View @display', array('@display' => $display['display_title'])),
               '#options' => array('alt' => array(t("Go to the real page for this display"))),
               '#href' => $path,
-              '#prefix' => '<li class="view">',
-              "#suffix" => '</li>',
             );
           }
         }
         if (!$is_default) {
           $build['top']['actions']['duplicate'] = array(
             '#type' => 'submit',
+            '#button_type' => 'link',
             '#value' => t('Clone @display_title', array('@display_title' => $display_title)),
+            '#attributes' => array('class' => array('ui-menu__item','js-menu__item')),
             '#limit_validation_errors' => array(),
             '#submit' => array(array($this, 'submitDisplayDuplicate'), array($this, 'submitDelayDestination')),
-            '#prefix' => '<li class="duplicate">',
-            "#suffix" => '</li>',
           );
         }
         // Always allow a display to be deleted.
         $build['top']['actions']['delete'] = array(
           '#type' => 'submit',
+          '#button_type' => 'link',
+          '#attributes' => array('class' => array('ui-menu__item','js-menu__item')),
           '#value' => t('Delete @display_title', array('@display_title' => $display_title)),
           '#limit_validation_errors' => array(),
           '#submit' => array(array($this, 'submitDisplayDelete'), array($this, 'submitDelayDestination')),
-          '#prefix' => '<li class="delete">',
-          "#suffix" => '</li>',
         );
 
         foreach (views_fetch_plugin_names('display', NULL, array($view->get('storage')->get('base_table'))) as $type => $label) {
@@ -440,35 +432,34 @@ public function getDisplayDetails($view, $display) {
 
           $build['top']['actions']['clone_as'][$type] = array(
             '#type' => 'submit',
+            '#button_type' => 'link',
+            '#attributes' => array('class' => array('ui-menu__item','js-menu__item')),
             '#value' => t('Clone as @type', array('@type' => $label)),
             '#limit_validation_errors' => array(),
             '#submit' => array(array($this, 'submitCloneDisplayAsType'), array($this, 'submitDelayDestination')),
-            '#prefix' => '<li class="duplicate">',
-            '#suffix' => '</li>',
           );
         }
       }
       else {
         $build['top']['actions']['undo_delete'] = array(
           '#type' => 'submit',
+          '#button_type' => 'link',
+          '#attributes' => array('class' => array('ui-menu__item','js-menu__item')),
           '#value' => t('Undo delete of @display_title', array('@display_title' => $display_title)),
           '#limit_validation_errors' => array(),
           '#submit' => array(array($this, 'submitDisplayUndoDelete'), array($this, 'submitDelayDestination')),
-          '#prefix' => '<li class="undo-delete">',
-          "#suffix" => '</li>',
         );
       }
       if ($is_enabled) {
         $build['top']['actions']['disable'] = array(
           '#type' => 'submit',
+          '#button_type' => 'link',
+          '#attributes' => array('class' => array('ui-menu__item','js-menu__item')),
           '#value' => t('Disable @display_title', array('@display_title' => $display_title)),
           '#limit_validation_errors' => array(),
           '#submit' => array(array($this, 'submitDisplayDisable'), array($this, 'submitDelayDestination')),
-          '#prefix' => '<li class="disable">',
-          "#suffix" => '</li>',
         );
       }
-      $build['top']['actions']['suffix']['#markup'] = '</ul>';
 
       // The area above the three columns.
       $build['top']['display_title'] = array(
@@ -898,7 +889,7 @@ public function getFormBucket(ViewUI $view, $type, $display) {
 
     $rearrange_url = "admin/structure/views/nojs/rearrange/{$view->id()}/{$display['id']}/$type";
     $rearrange_text = t('Rearrange');
-    $class = 'icon compact rearrange';
+    $class = array('icon','compact','rearrange');
 
     // Different types now have different rearrange forms, so we use this switch
     // to get the right one.
@@ -909,7 +900,7 @@ public function getFormBucket(ViewUI $view, $type, $display) {
         $rearrange_url = "admin/structure/views/nojs/rearrange-filter/{$view->id()}/{$display['id']}";
         $rearrange_text = t('And/Or, Rearrange');
         // TODO: Add another class to have another symbol for filter rearrange.
-        $class = 'icon compact rearrange';
+        $class = array('icon','compact','rearrange');
         break;
       case 'field':
         // Fetch the style plugin info so we know whether to list fields or not.
@@ -943,22 +934,22 @@ public function getFormBucket(ViewUI $view, $type, $display) {
     $count_handlers = count($executable->display_handler->getHandlers($type));
 
     // Create the add text variable for the add action.
-    $add_text = t('Add <span class="visually-hidden">@type</span>', array('@type' => $types[$type]['ltitle']));
+    $add_text = t('<span class="icon__text">Add </span><span class="visually-hidden">@type</span>', array('@type' => $types[$type]['ltitle']));
 
     $actions['add'] = array(
       'title' => $add_text,
       'href' => "admin/structure/views/nojs/add-item/{$view->id()}/{$display['id']}/$type",
-      'attributes' => array('class' => array('icon compact add', 'views-ajax-link'), 'id' => 'views-add-' . $type),
+      'attributes' => array('class' => array('icon', 'compact', 'add', 'views-ajax-link'), 'id' => 'views-add-' . $type),
       'html' => TRUE,
     );
     if ($count_handlers > 0) {
       // Create the rearrange text variable for the rearrange action.
       $rearrange_text = $type == 'filter' ? t('And/Or Rearrange <span class="visually-hidden">filter criteria</span>') : t('Rearrange <span class="visually-hidden">@type</span>', array('@type' => $types[$type]['ltitle']));
-
+      $class[] = 'views-ajax-link';
       $actions['rearrange'] = array(
         'title' => $rearrange_text,
         'href' => $rearrange_url,
-        'attributes' => array('class' => array($class, 'views-ajax-link'), 'id' => 'views-rearrange-' . $type),
+        'attributes' => array('class' => $class, 'id' => 'views-rearrange-' . $type),
         'html' => TRUE,
       );
     }
diff --git a/core/themes/seven/css/seven.button-groups.css b/core/themes/seven/css/seven.button-groups.css
new file mode 100644
index 0000000..a2a4d00
--- /dev/null
+++ b/core/themes/seven/css/seven.button-groups.css
@@ -0,0 +1,74 @@
+/**
+ * @file
+ * Stylistic treatment for a contiguous group of UI buttons in Seven
+ */
+
+/* Compensate for all buttons pulled left by 1px */
+.button-group {
+  padding-left: 1px;
+}
+
+/* Collapse borders on adjacent buttons */
+.button-group__item {
+  margin-left: -1px;
+}
+
+/**
+ * The child selector is appropriate here because these styles are inherently
+ * tied to the button-group situation and are unlikely to be useful elsewhere.
+ *
+ * 1. Remove any border-radius on all buttons, to be re-added on outer
+ *    buttons only.
+ * 2. Without border-radius, tighten the padding.
+ */
+.button-group__item .button {
+  border-radius: 0;  /* 1 */
+  padding-left: 0.8em;  /* 2 */
+  padding-right: 0.8em; /* 2 */
+}
+
+/**
+ * Ensure icon-only styles override positional (nth-of-type) styles
+ */
+.button-group__item .button--icon-only {
+  padding-left: 0.6em !important;
+  padding-right: 0.8em !important;
+}
+
+/**
+ * Draw a highlight on the left edge of primary buttons in a group. Box-shadow
+ * would be more concise, but interferes with the active state style.
+ */
+.button-group__item + .button-group__item .button {
+  position: relative;
+}
+.button-group__item + .button-group__item .button:before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: #3a99d3;
+  background-color: hsla(0, 0%, 100%, 0.2);
+}
+.button-group__item + .button-group__item .button:active:before,
+.button-group__item + .button-group__item .button.is-active:before {
+  display: none;
+}
+
+/**
+ * Re-apply the normal button border-radius to the outer buttons in a group.
+ * All browsers that support border-radius also support :first/last-of-type.
+ */
+.button-group__item:first-of-type .button {
+  border-top-left-radius: 20em;
+  border-bottom-left-radius: 20em;
+  padding-left: 1em;
+}
+.button-group__item:last-of-type .button {
+  border-top-right-radius: 20em;
+  border-bottom-right-radius: 20em;
+  padding-right: 1em;
+}
diff --git a/core/themes/seven/css/seven.buttons.css b/core/themes/seven/css/seven.buttons.css
new file mode 100644
index 0000000..88b59a2
--- /dev/null
+++ b/core/themes/seven/css/seven.buttons.css
@@ -0,0 +1,185 @@
+/**
+ * @file
+ * Stylistic treatment for UI Buttons in Seven
+ */
+
+/* ====================================
+   Buttons
+   ==================================== */
+
+/**
+ * 1. Use px units for vertical padding to ensure button text is centered.
+ * 2. Prevent fat text in WebKit
+ */
+.button {
+  padding: 4px 1em;  /* 1 */
+  border: 1px solid #a6a6a6;
+  border-radius: 20em;
+  background-color: #f2f1eb;
+  background-image: -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image:    -moz-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image:      -o-linear-gradient(top, #f6f6f3, #e7e7df);
+  background-image:   linear-gradient(to bottom, #f6f6f3, #e7e7df);
+  color: #333333;
+  text-decoration: none;
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  font-weight: 600;
+  font-size: 0.938rem;
+  -webkit-transition: box-shadow 0.1s;
+  -moz-transition:    box-shadow 0.1s;
+  -o-transition:      box-shadow 0.1s;
+  transition:         box-shadow 0.1s;
+  -webkit-font-smoothing: antialiased;  /* 2 */
+}
+.button:hover,
+.button:focus {
+  background-color: #f9f8f6;
+  background-image: -webkit-linear-gradient(top, #ffffff, #e9e9dd);
+  background-image:    -moz-linear-gradient(top, #ffffff, #e9e9dd);
+  background-image:      -o-linear-gradient(top, #ffffff, #e9e9dd);
+  background-image:   linear-gradient(to bottom, #ffffff, #e9e9dd);
+  color: #1a1a1a;
+  text-decoration: none;
+}
+.button:hover {
+  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+}
+.button:focus {
+  outline: none;
+  border-color: #40b6ff;
+  box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
+}
+.button:active,
+.button.is-active {
+  background-color: #dfdfd9;
+  background-image: -webkit-linear-gradient(top, #d4d4cd, #ecebe5);
+  background-image:    -moz-linear-gradient(top, #d4d4cd, #ecebe5);
+  background-image:      -o-linear-gradient(top, #d4d4cd, #ecebe5);
+  background-image:   linear-gradient(to bottom, #d4d4cd, #ecebe5);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+  -webkit-transition: none;
+  -moz-transition:    none;
+  -o-transition:      none;
+  transition:         none;
+}
+.button:active:focus,
+.button.is-active:focus {
+  box-shadow:
+    0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7),
+    inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+.button--primary {
+  border-color: #1e5c90;
+  background-image: -webkit-linear-gradient(top, #0b8bda, #0a75b8);
+  background-image:    -moz-linear-gradient(top, #0b8bda, #0a75b8);
+  background-image:      -o-linear-gradient(top, #0b8bda, #0a75b8);
+  background-image:   linear-gradient(to bottom, #0b8bda, #0a75b8);
+  color: #fff;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
+  font-weight: 700;
+}
+.button--primary:hover,
+.button--primary:focus {
+  background-color: #2369a6;
+  background-image: -webkit-linear-gradient(top, #0d9af2, #0b85d0);
+  background-image:    -moz-linear-gradient(top, #0d9af2, #0b85d0);
+  background-image:      -o-linear-gradient(top, #0d9af2, #0b85d0);
+  background-image:   linear-gradient(to bottom, #0d9af2, #0b85d0);
+  color: #fff;
+}
+.button--primary:hover {
+  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
+}
+.button--primary:focus {
+  border-color: #007ecc;
+  box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.9);
+}
+.button--primary:active,
+.button--primary.is-active {
+  background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
+  background-image:    -moz-linear-gradient(top, #08639b, #0071b8);
+  background-image:      -o-linear-gradient(top, #08639b, #0071b8);
+  background-image:   linear-gradient(to bottom, #08639b, #0071b8);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.3);
+  border-color: #144b78;
+}
+
+/**
+ * Ensure there is always space for the dropbutton indicator.
+ */
+.button--icon-right {
+  text-align: left;
+  padding-right: 1.8em !important;  /* 1 */
+}
+/* Align the popup indicator to the right of popup buttons */
+.button--icon-right > [class^="triangle"] {
+  position: absolute;
+  right: 0.8em;
+  top: 50%;
+  margin-top: -0.125em;
+}
+
+/**
+ * 1. Remove extra leading whitespace
+ */
+.button--icon-only {
+  padding-left: 0.7em;
+  padding-right: 0.7em;
+  letter-spacing: -0.25em;  /* 1 */
+}
+
+/**
+ * 1. Use px units for vertical padding to ensure button text is centered.
+ */
+.no-touch .button--small {
+  font-size: 0.813rem;
+  padding: 1px 1em;  /* 1 */
+}
+
+.button:disabled,
+.button.is-disabled {
+  border-color: #d4d4d4;
+  background: #ededed;
+  box-shadow:         none;
+  color: #5c5c5c;
+  font-weight: normal;
+  cursor: default;
+  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+}
+
+
+/* ====================================
+   Link actions
+   ==================================== */
+
+/**
+ * Style a clickable/tappable element as a link. Duplicates the base style for
+ * the <a> tag, plus a reset for padding, borders and background.
+ */
+.link {
+  color: #0074bd; /* hsl(203, 100%, 37%) */
+  text-decoration: none;
+}
+.link:focus,
+.link:hover {
+  color: #008ee6; /* hsl(203, 100%, 45%) */
+  text-decoration: underline;
+}
+
+.link--danger {
+  color: #c72100;
+  text-decoration: underline;
+}
+.link--danger:focus,
+.link--danger:hover,
+.link--danger:active {
+  color: #ff2a00;
+}
+.link--danger:disabled,
+.link--danger.is-disabled {
+ color: #737373;
+ cursor: default;
+ text-decoration: none;
+ -webkit-font-smoothing: antialiased;
+}
diff --git a/core/themes/seven/css/seven.menus.css b/core/themes/seven/css/seven.menus.css
new file mode 100644
index 0000000..9d0f687
--- /dev/null
+++ b/core/themes/seven/css/seven.menus.css
@@ -0,0 +1,41 @@
+/**
+ * @file
+ * Stylistic treatment for generic UI menus in Seven
+ */
+
+.ui-menu {
+  margin: 0;
+  padding: 0;
+  line-height: 1em;
+}
+
+.ui-menu__item {
+  padding: .35em 1em .35em;
+  font-size: 0.938em;
+  color: #262626;
+  text-align: left;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+/* Dark bg; better contrast, but looks harsh */
+/*.menu__item:focus,
+.ui-menu__item:hover {
+  background: #007ac7;
+  color: #ffffff;
+  outline: none;
+}*/
+
+/* Light bg; may have a11y issues */
+.ui-menu__item:focus,
+.ui-menu__item:hover {
+  background: #b8e6ff;
+  background: hsla(201, 100%, 70%, .35);
+  outline: none;
+  color: #1a1a1a;
+  text-decoration: none;
+}
+.ui-menu__item:active {
+  background: #b8e6ff;
+  background: hsla(201, 100%, 70%, .55);
+}
diff --git a/core/themes/seven/css/seven.popups.css b/core/themes/seven/css/seven.popups.css
new file mode 100644
index 0000000..58a4912
--- /dev/null
+++ b/core/themes/seven/css/seven.popups.css
@@ -0,0 +1,21 @@
+/**
+ * @file
+ * Stylistic treatment for popup/popover/dropdown containers in Seven
+ */
+
+.popup {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border: 1px solid #a6a6a6;
+  border-color: hsla(0, 0%, 0%, .3);
+  border-radius: 5px;
+  background: #ffffff;
+  -webkit-background-clip: padding-box;
+  -moz-background-clip:    padding-box;
+  background-clip:         padding-box;
+  box-shadow:         0 3px 6px hsla(0, 0%, 0%, .15);
+}
+
+.popup--padded {
+  padding: .75em 1em;
+}
diff --git a/core/themes/seven/css/seven.shapes.css b/core/themes/seven/css/seven.shapes.css
new file mode 100644
index 0000000..e698d89
--- /dev/null
+++ b/core/themes/seven/css/seven.shapes.css
@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Stylistic treatment for pure-CSS arrow icons in Seven
+ */
+
+[class^="triangle"] {
+  border-color: #262626;
+}
+
+.button--primary > [class^="triangle"] {
+  border-color: #ffffff;
+}
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 13ca85c..f0720c5 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -7,6 +7,11 @@ core: 8.x
 stylesheets:
   screen:
     - style.css
+    - css/seven.shapes.css
+    - css/seven.menus.css
+    - css/seven.popups.css
+    - css/seven.buttons.css
+    - css/seven.button-groups.css
 stylesheets-override:
   - vertical-tabs.css
   - vertical-tabs-rtl.css
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 2556bf0..0181dfa 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -671,73 +671,6 @@ body div.form-type-radio div.description,
 body div.form-type-checkbox div.description {
   margin-left: 1.5em; /* LTR */
 }
-[dir=rtl] body div.form-type-radio div.description,
-[dir=rtl] body div.form-type-checkbox div.description {
-  margin-left: 0;
-  margin-right: 1.5em;
-}
-.button {
-  cursor: pointer;
-  padding: 4px 17px;
-  color: #5a5a5a;
-  text-align: center;
-  font-weight: normal;
-  font-size: 1.077em;
-  font-family: "Lucida Grande", Verdana, sans-serif;
-  border: 1px solid #e4e4e4;
-  border-bottom: 1px solid #b4b4b4;
-  border-left-color: #d2d2d2;
-  border-right-color: #d2d2d2;
-  background-color: #e4e4e4;
-  border-radius: 20px;
-  text-decoration: none;
-}
-.button:focus,
-.button:hover {
-  background-color: #c0c0c0;
-  border: 1px solid #bebebe;
-  border-left-color: #afafaf;
-  border-right-color: #afafaf;
-  border-bottom-color: #9b9b9b;
-  color: #2e2e2e;
-  text-decoration: none;
-}
-.button:active {
-  background-color: #565656;
-  border: 1px solid #333;
-  border-left-color: #222;
-  border-right-color: #222;
-  border-bottom-color: #111;
-  color: #fff;
-  text-decoration: none;
-  text-shadow: #222 0 -1px 0;
-}
-.button-primary {
-  background-color: #9dcae7;
-  border: 1px solid #8eB7cd;
-  border-bottom-color: #7691a2;
-  color: #133B54;
-}
-.button-primary:focus,
-.button-primary:hover {
-  background-color: #73b3dd;
-  border: 1px solid #6ea3bf;
-  border-bottom-color: #4680a0;
-}
-.button-primary:active {
-  background-color: #3981b1;
-  border: 1px solid #36647c;
-  border-bottom-color: #284657;
-}
-.button-disabled,
-.button-disabled:active,
-.button[disabled],
-.button[disabled]:active {
-  background-color: #eee;
-  border-color: #eee;
-  text-shadow: none;
-  color: #999;
-}
 input.form-autocomplete,
 input.form-text,
 input.form-tel,
@@ -1189,47 +1122,6 @@ h1#overlay-title {
   padding: 0 0 5px 5px;
 }
 
-/* Dropbutton */
-.js .dropbutton-widget {
-  background-color: #fff;
-  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
-  background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
-  background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), #e7e7e7);
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #e7e7e7);
-  border-radius: 5px;
-}
-.js .dropbutton-widget:hover {
-  background-color: #f0f0f0;
-  border-color: #b8b8b8;
-}
-.js .dropbutton-multiple.open .dropbutton-widget:hover {
-  background-color: #fff;
-}
-.dropbutton-content li:first-child > * {
-  text-overflow: ellipsis;
-}
-.dropbutton-multiple.open .dropbutton-content li:first-child > * {
-  text-overflow: clip;
-}
-
-.js .form-actions .dropbutton-widget:focus,
-.js .form-actions .dropbutton-widget:hover {
-  background-color: #73b3dd;
-  border: 1px solid #6ea3bf;
-  border-bottom-color: #4680a0;
-}
-.js .form-actions .dropbutton-widget:active {
-  background-color: #3981b1;
-  border: 1px solid #36647c;
-  border-bottom-color: #284657;
-}
-.js .form-actions .dropbutton-multiple.open .dropbutton-widget:hover {
-  background-color: #9dcae7;
-}
-.js .form-actions .dropbutton-multiple.open .dropbutton-action:hover {
-  background-color: #73b3dd;
-}
-
 /* Disable overlay message */
 #overlay-disable-message {
   background-color: #addafc;
@@ -1423,11 +1315,11 @@ details.fieldset-no-legend {
   text-align: right;
 }
 
-.views-admin .icon.add {
+.views-admin .icon.add:before {
   background-position: center 3px;
 }
 
-.views-displays .secondary a:hover > .icon.add {
+.views-displays .secondary a:hover > .icon.add:before {
   background-position: center -25px;
 }
 
@@ -1763,18 +1655,6 @@ details.fieldset-no-legend {
 /**
  * Node form dropbuttons.
  */
-.form-actions .dropbutton-wrapper li a,
-.form-actions .dropbutton-wrapper input {
-  padding: 5px 17px 6px 17px;
-  margin-bottom: 0em;
-  border: medium;
-  border-radius: 0;
-  background: none;
-}
-.form-actions .dropbutton-wrapper input:hover {
-  background: none;
-  border: none;
-}
 /* Delete button */
 .form-actions .button-danger {
   color: #c72100;
@@ -1799,36 +1679,3 @@ details.fieldset-no-legend {
   border: none;
   text-decoration: underline;
 }
-
-/**
- * Form edit action theming
- */
-.js .form-actions .dropbutton-widget {
-  background-color: #50a0e9;
-  background-image: -moz-linear-gradient(-90deg, #50a0e9, #4481dc);
-  background-image: -o-linear-gradient(-90deg, #50a0e9, #4481dc);
-  background-image: -webkit-linear-gradient(-90deg, #50a0e9, #4481dc);
-  background-image: linear-gradient(180deg, #50a0e9, #4481dc);
-  border-radius: 3px;
-  border: 1px solid #3974ae;
-}
-.js .form-actions .dropbutton-widget .dropbutton li {
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
-  border-top-left-radius: 3px;
-}
-.js .form-actions .dropbutton-widget .dropbutton .dropbutton-toggle {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 3px;
-  top: 1px;
-}
-.js .form-actions .dropbutton-widget .dropbutton .secondary-action {
-  border-top: 1px solid rgba(255, 255, 255, 0.3);
-  border-top-left-radius: 0px;
-}
-.js .form-actions .dropbutton-widget .button {
-  color: #ffffff;
-  text-shadow: 1px 1px 1px rgba(31, 83, 131, 0.8);
-}
-.js .form-actions .dropbutton-multiple.open .dropbutton-action:hover {
-  background-color: #50a0e9;
-}