diff --git a/core/modules/outside_in/css/outside_in.details.css b/core/modules/outside_in/css/outside_in.details.css
new file mode 100644
index 0000000..94c1aad
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.details.css
@@ -0,0 +1,51 @@
+/**
+ * @file
+ * Visual styling for summary and details in the Outside-In module off canvas tray.
+ */
+
+.ui-dialog-offcanvas details,
+.ui-dialog-offcanvas summary,
+.ui-dialog-offcanvas .ui-dialog-content {
+  background: #474747;
+  color: #ddd;
+}
+.ui-dialog-offcanvas summary a {
+  color: #ddd;
+  padding: 0 inherit;
+}
+.ui-dialog-offcanvas summary a:hover,
+.ui-dialog-offcanvas summary a:focus {
+  color: #fff;
+}
+.ui-dialog-offcanvas details,
+.ui-dialog-offcanvas summary,
+.ui-dialog-offcanvas .details-wrapper {
+  border-width: 0;
+  /* Cancel out the padding of the parent. */
+  margin: 0 -20px;
+  padding: 0 20px;
+}
+.ui-dialog-offcanvas summary {
+  text-shadow: none;
+  outline: none;
+  padding: 10px 20px;
+  font-size: 14px;
+  transition: all .5s ease;
+}
+.ui-dialog-offcanvas summary:hover,
+.ui-dialog-offcanvas summary:focus {
+  background-color: #222;
+  outline: none;
+}
+.ui-dialog-offcanvas details[open] {
+  background-color: #333;
+  padding-bottom: 10px;
+}
+.ui-dialog-offcanvas details[open] > summary {
+  background-color: #333;
+  color: #eee;
+}
+.ui-dialog-offcanvas details[open] > summary:hover {
+  background-color: #222;
+  color: #fff;
+}
diff --git a/core/modules/outside_in/css/outside_in.form.css b/core/modules/outside_in/css/outside_in.form.css
new file mode 100644
index 0000000..640f264
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.form.css
@@ -0,0 +1,110 @@
+/**
+ * @file
+ * Visual styling for forms in the Outside-In module off canvas tray.
+ */
+
+.ui-dialog-offcanvas label {
+  line-height: normal;
+  font-size: 12px;
+  font-weight: normal;
+  color: #ddd;
+}
+.ui-dialog-offcanvas .description,
+.ui-dialog-offcanvas .form-item .description,
+.ui-dialog-offcanvas .details-description {
+  color: #ddd;
+  margin-top: 5px;
+  font-size: 12px;
+  font-style: normal;
+}
+.ui-dialog-offcanvas .details-wrapper .description {
+  color: #bbb;
+}
+.ui-dialog-offcanvas .form-item {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+/* Set size and position for all inputs. */
+.ui-dialog-offcanvas .form-select,
+.ui-dialog-offcanvas .form-text,
+.ui-dialog-offcanvas .form-tel,
+.ui-dialog-offcanvas .form-email,
+.ui-dialog-offcanvas .form-url,
+.ui-dialog-offcanvas .form-search,
+.ui-dialog-offcanvas .form-number,
+.ui-dialog-offcanvas .form-color,
+.ui-dialog-offcanvas .form-file,
+.ui-dialog-offcanvas .form-textarea,
+.ui-dialog-offcanvas .form-date,
+.ui-dialog-offcanvas .form-time {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 6px;
+  margin-top: 5px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  border-width: 1px;
+  border-radius: 2px;
+  outline: 0;
+  display: block;
+  font-size: 14px;
+  line-height: 16px;
+  cursor: pointer;
+}
+/* Reduce contrast for fields against dark backround. */
+.ui-dialog-offcanvas .form-text,
+.ui-dialog-offcanvas .form-tel,
+.ui-dialog-offcanvas .form-email,
+.ui-dialog-offcanvas .form-url,
+.ui-dialog-offcanvas .form-search,
+.ui-dialog-offcanvas .form-number,
+.ui-dialog-offcanvas .form-color,
+.ui-dialog-offcanvas .form-file,
+.ui-dialog-offcanvas .form-textarea,
+.ui-dialog-offcanvas .form-date,
+.ui-dialog-offcanvas .form-time {
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
+  background-color: #eee;
+  border-color: #333;
+  color: #595959;
+}
+.ui-dialog-offcanvas .form-text:focus,
+.ui-dialog-offcanvas .form-tel:focus,
+.ui-dialog-offcanvas .form-email:focus,
+.ui-dialog-offcanvas .form-url:focus,
+.ui-dialog-offcanvas .form-search:focus,
+.ui-dialog-offcanvas .form-number:focus,
+.ui-dialog-offcanvas .form-color:focus,
+.ui-dialog-offcanvas .form-file:focus,
+.ui-dialog-offcanvas .form-textarea:focus,
+.ui-dialog-offcanvas .form-date:focus,
+.ui-dialog-offcanvas .form-time:focus {
+  border-color: #40b6ff;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
+  background-color: #fff;
+}
+.ui-dialog-offcanvas input[type="checkbox"],
+.ui-dialog-offcanvas .checkbox,
+.ui-dialog-offcanvas input[type="radio"],
+.ui-dialog-offcanvas .radio {
+  position: static;
+  margin: 0;
+}
+.ui-dialog-offcanvas td .checkbox {
+  display: table-cell;
+  line-height: normal;
+  vertical-align: middle;
+}
+.ui-dialog-offcanvas .form-checkbox,
+.ui-dialog-offcanvas .form-radio {
+  /* Add contrast for dark background. */
+  box-shadow: 0 0 2px 1px #000;
+}
+.ui-dialog-offcanvas input[type="radio"] {
+  /* Add full circular radius. */
+  border-radius: 50%;
+}
+.ui-dialog-offcanvas .form-actions {
+  text-align: center;
+}
diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/outside_in/css/outside_in.module.css
index a084979..ef024b1 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/outside_in/css/outside_in.module.css
@@ -4,11 +4,10 @@
  */
 
 /* Position the offcanvas tray container outside the right of the viewport. */
-.ui-dialog.ui-dialog-offcanvas {
+.ui-dialog-offcanvas {
   box-sizing: border-box;
   height: 100%;
-  overflow: hidden;
-  z-index: 501;
+  overflow: visible;
 }
 
 /* Shift the main canvas to the right for right-to-left languages. */
@@ -16,30 +15,17 @@
   right: 0;
 }
 
-/* Create a place to name the tray. */
-.ui-dialog.ui-dialog-offcanvas h1 {
-  padding: 15px 25% 15px 15px; /* LTR */
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 120%;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-offcanvas h1 {
-  text-align: right;
-  padding-right: 0;
-  padding-left: 25%;
-}
 
 /* Wrap the form that's inside the offcanvas tray. */
-.ui-dialog.ui-dialog-offcanvas > .ui-dialog-content {
-  padding: 0 15px;
+.ui-dialog-offcanvas .ui-dialog-content {
+  padding: 0 20px;
+  /* Prevent horizontal scrollbar. */
+  overflow-x: hidden;
+  overflow-y: auto;
 }
-[dir="rtl"] .ui-dialog.ui-dialog-offcanvas .ui-dialog-content {
+[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
   text-align: right;
 }
-.ui-dialog.ui-dialog-offcanvas > .form-item,
-.ui-dialog.ui-dialog-offcanvas > .form-item .form-item {
-  width: 100%;
-}
 
 /*
  * Position the edit toolbar tab.
@@ -49,30 +35,8 @@
 .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
   float: left;
 }
-
-/*
- * Form layout changes, mostly specific to Bartik theme and menu.
- * @todo Remove when more general form styling is done:
- *    https://www.drupal.org/node/2784437.
- */
-.ui-dialog.ui-dialog-offcanvas td {
-    width: auto;
-}
-.ui-dialog.ui-dialog-offcanvas .menu-enabled {
-    width: auto;
-}
-.ui-dialog.ui-dialog-offcanvas table#menu-overview th {
-  display: none;
-}
-.ui-dialog.ui-dialog-offcanvas table#menu-overview tr td:first-child {
-  min-width: 110px;
-}
-.ui-dialog.ui-dialog-offcanvas details > .details-wrapper {
-  padding: 5px;
-  overflow: scroll;
-}
-.ui-dialog.ui-dialog-offcanvas .tabledrag-toggle-weight {
-  font-size: 80%;
+[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
+  float: right;
 }
 .ui-dialog.ui-dialog-offcanvas input:focus,
 .ui-dialog.ui-dialog-offcanvas summary:focus {
diff --git a/core/modules/outside_in/css/outside_in.table.css b/core/modules/outside_in/css/outside_in.table.css
new file mode 100644
index 0000000..faacc21
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.table.css
@@ -0,0 +1,74 @@
+/**
+ * @file
+ * Visual styling for tables in the Outside-In module off canvas tray.
+ */
+
+.ui-dialog-offcanvas table {
+  border: 0;
+  border-collapse: collapse;
+  min-width: 300px;
+  margin-top: 0;
+  /* Cancel out the padding of the parent to make the table full width and flush to the bottom. */
+  margin-right: -20px;
+  margin-left: -20px;
+  margin-bottom: -10px;
+}
+.ui-dialog-offcanvas tr th {
+  padding: 2px 4px;
+  background-color: transparent;
+  border: 0;
+  border-collapse: collapse;
+  font-size: 12px;
+  color: #bbb;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] .ui-dialog-offcanvas tr th {
+  text-align: right;
+}
+.ui-dialog-offcanvas tr,
+.ui-dialog-offcanvas tr td {
+  padding: 2px 4px;
+  height: 35px;
+  vertical-align: middle;
+  font-size: 13px;
+  text-align: left; /* LTR */
+  border: 0px;
+  border-style: solid;
+  border-color: #777;
+  border-bottom-width: 1px;
+  background: none;
+  background-color: transparent;
+  font-size: 12px;
+}
+[dir="rtl"] .ui-dialog-offcanvas tr th,
+[dir="rtl"] .ui-dialog-offcanvas tr td {
+  text-align: right;
+}
+.ui-dialog-offcanvas td a {
+  display: block;
+  max-width: 120px;
+  overflow: hidden;
+}
+.ui-dialog.ui-dialog-offcanvas tr td:first-child,
+.ui-dialog.ui-dialog-offcanvas tr th:first-child {
+  min-width: 120px;
+  padding-left: 20px; /* LTR */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr td:first-child,
+[dir="rtl"] .ui-dialog.ui-dialog-offcanvas tr th:first-child {
+  padding-right: 20px;
+}
+.ui-dialog-offcanvas tr.odd,
+.ui-dialog-offcanvas tr.even {
+  background-image: none;
+  background-color: transparent;
+}
+td.checkbox,
+th.checkbox {
+  text-align: center;
+  width: 20px;
+}
+
diff --git a/core/modules/outside_in/css/outside_in.tabledrag.css b/core/modules/outside_in/css/outside_in.tabledrag.css
new file mode 100644
index 0000000..9601992
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.tabledrag.css
@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Table drag behavior for outside-in module.
+ *
+ * @see tabledrag.js
+ */
+
+
+/* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */
+
+.ui-dialog-offcanvas body.drag {
+  cursor: move;
+}
+.ui-dialog-offcanvas tr.region-title {
+  font-weight: normal;
+}
+.ui-dialog-offcanvas tr.region-message {
+  color: #fff;
+}
+.ui-dialog-offcanvas tr.region-populated {
+  display: none;
+}
+.ui-dialog-offcanvas tr.add-new .tabledrag-changed {
+  display: none;
+}
+.ui-dialog-offcanvas .draggable a.tabledrag-handle {
+  background-image: none;
+  margin: 0;
+  margin-left: 0; /* LTR */
+  margin-right: 5px; /* LTR */
+  height: auto;
+  min-width: 20px;
+  padding: 0px;
+  overflow: hidden;
+  float: left; /* LTR */
+  text-decoration: none;
+  cursor: move;
+}
+[dir="rtl"] .ui-dialog-offcanvas .draggable a.tabledrag-handle {
+  float: right;
+  margin-right: 0;
+  margin-left: 5px;
+}
+.ui-dialog-offcanvas a.tabledrag-handle .handle {
+  /* Use lighter drag icon against dark background. */
+  background-image: url(../../../misc/icons/bebebe/move.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+}
+.ui-dialog-offcanvas .draggable a.tabledrag-handle:hover .handle,
+.ui-dialog-offcanvas .draggable a.tabledrag-handle:focus .handle {
+  background-image: url(../../../misc/icons/787878/move.svg);
+  text-decoration: none;
+}
+
+.ui-dialog-offcanvas .touchevents .draggable td {
+  padding: 0 10px;
+}
+.ui-dialog-offcanvas .touchevents .draggable .menu-item__link {
+  display: inline-block;
+  padding: 10px 0;
+}
+.ui-dialog-offcanvas .touchevents a.tabledrag-handle {
+  height: 44px;
+  width: 40px;
+}
+.ui-dialog-offcanvas .touchevents a.tabledrag-handle .handle {
+  background-position: 40% 19px; /* LTR */
+  height: 21px;
+}
+[dir="rtl"] .ui-dialog-offcanvas .touch a.tabledrag-handle .handle {
+  background-position: right 40% top 19px;
+}
+.ui-dialog-offcanvas .touchevents .draggable.drag a.tabledrag-handle .handle {
+  background-position: 50% -32px;
+}
+.ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper {
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .ui-dialog-offcanvas .tabledrag-toggle-weight-wrapper {
+  text-align: left;
+}
+.ui-dialog-offcanvas .indentation {
+  float: left; /* LTR */
+  height: auto;
+  margin: 0 3px 0 -10px; /* LTR */
+  padding: 0 0 0 10px; /* LTR */
+  width: auto;
+}
+[dir="rtl"] .ui-dialog-offcanvas .indentation {
+  float: right;
+  margin: 0 -10px 0 3px;
+  padding: 0 10px 0 0;
+}
+.ui-dialog-offcanvas tr.drag {
+  background-color: #555;
+}
+.ui-dialog-offcanvas tr.drag-previous {
+  background-color: #000;
+}
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 433a987..1434e04 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -3,107 +3,326 @@
  * Visual styling for Outside-In module.
  */
 
-/**
- * Style the contextual links toggle tab in the toolbar.
- *
- * @todo Move this into toolbar when module is not experimental:
+/* @todo Move this into toolbar when this module is no longer experimental:
  *   https://www.drupal.org/node/2784593.
  */
 
-/* Style both the edit and editing states. */
-button.toolbar-icon.toolbar-icon-edit.toolbar-item {
-  background: #0e69be;
-  background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
-  background-image: linear-gradient(to bottom, #0094f0, #0e69be);
+/* Style the edit mode toolbar and tabs. */
+#toolbar-bar.js-outside-in-edit-mode {
+  background-color: #fff;
 }
-button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
-button.toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
-  background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
-  background-image: linear-gradient(to bottom, #0094f0, #0e69be);
-  color: #fff;
+.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
+  color: #999;
 }
-button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
-button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
-  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
+  color: #333;
 }
-button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
-button.toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
-  background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
-  background-image: linear-gradient(to bottom, #0094f0, #0e69be);
+
+/* Style both the edit and editing states of the contextual links toggle tab. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
+  background-color: #50a0e9;
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #ddd;
+  text-shadow: none;
+  font-weight: bold;
   outline: none;
 }
-button.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
-  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+/* Make the hover of the inactive state the same as the active state. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+  color: #fff;
 }
-#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
-  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+/* Make the hover of the active state the same as the inactive state. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+  background-color: #2369a6;
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #fff;
 }
-
-/* Style the toolbar when in edit mode. */
-#toolbar-bar.js-outside-in-edit-mode {
-  background-color: #fff;
+/* Make the inactive icon grey. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
+  background-image: url(../../../misc/icons/bebebe/pencil.svg);
 }
-/* Change text color for white background. */
-#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
-  color: #999;
+/* Make the active icon white. */
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
 }
-#toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active {
-  color: #333;
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
 }
-/* Set color back to white for 'editing' button only. */
-#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
- color: #fff;
+.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
 }
-#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
- background-image: -webkit-linear-gradient(top, #0094f0, #0e69be);
- background-image: linear-gradient(to bottom, #0094f0, #0e69be);
+.toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
 }
 
-/*
- * Style the editables while in edit mode.
- */
-
-/* Highlight editable regions in edit mode. */
+/* Style the editables while in edit mode. */
 #main-canvas.js-outside-in-edit-mode .outside-in-editable {
   outline: 1px dashed rgba(0,0,0,0.5);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
 }
 #main-canvas.js-outside-in-edit-mode .outside-in-editable:hover {
-  outline: 1px dashed rgba(0,0,0,0.5);
-  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
   background-color: rgba(0,0,0,0.2);
 }
-/* Turn off the outlines on editables when the tray is open. */
-#main-canvas-wrapper.js-tray-open .outside-in-editable {
-  outline: transparent;
-  outline-color: transparent;
-  box-shadow: none;
+
+/* Style the offcanvas container. */
+.ui-dialog-offcanvas {
+  background: #444;
+  border: 0px solid transparent;
+  border-radius: 0;
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
+  padding: 0;
+  color: #ddd;
+  /* Layer the dialog just under the toolbar. */
+  z-index: 501;
+}
+
+/* Style content in the tray. */
+.ui-dialog-offcanvas p,
+.ui-dialog-offcanvas h1,
+.ui-dialog-offcanvas h2,
+.ui-dialog-offcanvas h3,
+.ui-dialog-offcanvas h4,
+.ui-dialog-offcanvas h5,
+.ui-dialog-offcanvas h6,
+.ui-dialog-offcanvas pre,
+.ui-dialog-offcanvas legend,
+.ui-dialog-offcanvas cite,
+.ui-dialog-offcanvas span,
+.ui-dialog-offcanvas summary,
+.ui-dialog-offcanvas details,
+.ui-dialog-offcanvas .form-item {
+  color: #ddd;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  background-color: transparent;
+  text-shadow: none;
+}
+.ui-dialog-offcanvas a,
+.ui-dialog-offcanvas .link {
+  border-bottom: none;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  color: #85bef4;
+  text-decoration: none;
+  transition: color .5s ease;
+}
+.ui-dialog-offcanvas a:focus,
+.ui-dialog-offcanvas .link:focus,
+.ui-dialog-offcanvas a:hover,
+.ui-dialog-offcanvas .link:hover {
+  outline: none;
+  color: #46a0f5;
+}
+
+/* Style the tray header. */
+.ui-dialog-offcanvas .ui-dialog-titlebar {
+  padding: 20px;
+  background: #2d2d2d;
+  border: 0;
+  border-bottom: 1px solid #000;
+  border-radius: 0;
+  font-weight: normal;
+  color: #fff;
+}
+.ui-dialog-offcanvas .ui-dialog-titlebar-close {
+  background-image: url(../../../misc/icons/bebebe/ex.svg);
+  background-position-x: center;
+  background-repeat: no-repeat;
+  background-position-y: center;
+  background-color: transparent;
+  border: 0;
+  position: absolute;
+  right: 20px;
+  -moz-transition: all .5s ease;
+  transition: background .5s ease;
 }
-#main-canvas-wrapper.js-tray-open .contextual {
-  opacity: 0;
+.ui-dialog-offcanvas .ui-dialog-titlebar-close:hover {
+  background-image: url(../../../misc/icons/ffffff/ex.svg);
 }
-#main-canvas-wrapper.js-tray-open .contextual:hover {
-  opacity: 1;
+[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-titlebar-close {
+  left: 20px;
+  right: auto;
+}
+.ui-dialog-offcanvas .ui-dialog-title {
+  font-size: 16px;
+  margin: 0;
+  /* Push the text away from the icon. */
+  padding-left: 30px; /* LTR */
+  padding-right: 0px; /* LTR */
+  /* Ensure that long titles do not overlap the close button. */
+  max-width: 210px;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-title {
+  text-align: right;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.ui-dialog-offcanvas .ui-dialog-title:before {
+  background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
+  background-size: 100% auto;
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  left: 20px; /* LTR */
+  top: 0;
+  width: 20px;
+}
+[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-title:before {
+  left: auto;
+  right: 20px;
+}
+
+/* Override default styling from jquery UI. */
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+  border: 0;
+  font-weight: normal;
+  font-size: 14px;
+  color: #333;
+}
+/* Hide the defauld Jquery UI dialog close button. */
+.ui-dialog-offcanvas .ui-icon-closethick {
+  visibility: hidden;
 }
 
+/* Groups below here with todos to move to new component need to load last. */
+
 /**
- * Style the offcanvas container.
- *
- * @todo Move Off-canvas css into core Off-canvas library:
- *   https://www.drupal.org/node/2784443.
+ * Visual styling for buttons in the Outside-In module off canvas tray.
+ * @todo Move to it's own component:
+ *   https://www.drupal.org/node/1945262.
  */
-.ui-dialog.ui-dialog-offcanvas {
-  background: #fff;
-  border-left: 1px solid #ddd; /* LTR */
-  box-shadow: -2px 2px 1px 1px rgba(0, 0, 0, 0.1); /* LTR */
+
+.ui-dialog-offcanvas button.link {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
 }
-[dir="rtl"] .ui-dialog.ui-dialog-offcanvas {
-  border-right: 1px solid #ddd;
-  box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.1);
+.ui-dialog-offcanvas .button {
+  width: 100%;
+  height: auto;
+  margin: 1em auto;
+  padding: 6px 1em;
+  background: #7b7b7b;
+  border-radius: 1em;
+  font-size: 14px;
+  color: #fff;
+  transition: all .5s ease;
+}
+.ui-dialog-offcanvas .button:hover,
+.ui-dialog-offcanvas .button:focus {
+  background: #888;
+}
+.ui-dialog-offcanvas .button--primary {
+  background: #277abd none;
+  border: none;
+  color: #fff;
+  transition: all .5s ease;
+}
+.ui-dialog-offcanvas .button--primary:hover,
+.ui-dialog-offcanvas .button--primary:focus {
+  background: #2b8bd8;
 }
 
-/* Style the tray header. */
-.ui-dialog.ui-dialog-offcanvas h1 {
-  font-size: 120%;
-  border-bottom: 1px solid #ddd;
+
+/*
+ * Visual styling for dropbutton in the Outside-In modules off canvas tray.
+ * @todo Move to it's own component:
+ *   https://www.drupal.org/node/1945262.
+ */
+
+.ui-dialog-offcanvas .dropbutton-widget {
+  background: #7b7b7b none;
+  border: 0;
+  border-radius: 1em;
+  color: #eee;
+  transition: background .5s ease;
+}
+.ui-dialog-offcanvas .dropbutton-widget:hover {
+  box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
+}
+.ui-dialog-offcanvas .dropbutton-toggle button {
+  background: #7b7b7b none;
+  border-bottom-right-radius: 1em; /* LTR */
+  border-top-right-radius: 1em; /* LTR */
+  border-style: solid;
+  border-color: #333;
+  border-left-width: 1px; /* LTR */
+  transition: background .5s ease;
+}
+[dir="rtl"] .ui-dialog-offcanvas .dropbutton-toggle button {
+  border-radius: 0;
+  border-bottom-left-radius: 1em;
+  border-top-left-radius: 1em;
+  border-width: 0;
+  border-right-width: 1px;
+}
+.ui-dialog-offcanvas .dropbutton .dropbutton-action:hover,
+.ui-dialog-offcanvas .dropbutton a:hover {
+  background: #6b6b6b none;
+  border-bottom-left-radius: 1em; /* LTR */
+  border-top-left-radius: 1em; /* LTR */
+}
+[dir="rtl"] .ui-dialog-offcanvas .dropbutton .dropbutton-action:hover,
+[dir="rtl"] .ui-dialog-offcanvas .dropbutton a:hover {
+  border-radius: 0;
+  border-bottom-right-radius: 1em;
+  border-top-right-radius: 1em;
+}
+.ui-dialog-offcanvas .dropbutton a {
+  padding: 0.1em 0.8em;
+  color: #eee;
+  font-size: 90%;
+  line-height: 1.8;
+  transition: all .5s ease;
+}
+.ui-dialog-offcanvas .dropbutton:hover a {
+  color: #fff;
 }
+/* Make an arrow out of borders with some fancy CSS. */
+.ui-dialog-offcanvas span.dropbutton-arrow {
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-style: solid;
+  border-width: 0.3333em 0.3333em 0;
+  display: block;
+  height: 0;
+  line-height: 0;
+  position: absolute;
+  right: 40%;
+  top: 50%;
+  margin-top: -0.1666em;
+  width: 0;
+  overflow: hidden;
+  color: #fff;
+}
+.js .dropbutton-toggle .dropbutton-arrow:hover {
+  background: transparent;
+}
+.ui-dialog-offcanvas td .dropbutton-multiple {
+  padding-right: 0;
+}
+[dir="rtl"].ui-dialog-offcanvas td .dropbutton-multiple {
+  padding-left: 0;
+}
+.ui-dialog-offcanvas td .dropbutton-multiple .dropbutton {
+  border-right: 0;
+  border-left: 0;
+}
+.ui-dialog-offcanvas td .dropbutton .secondary-action {
+  border-top-color: #000;
+}
+
+
diff --git a/core/modules/outside_in/css/outside_in.toolbar.css b/core/modules/outside_in/css/outside_in.toolbar.css
new file mode 100644
index 0000000..b8b6397
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.toolbar.css
@@ -0,0 +1,70 @@
+/**
+ * @file
+ * Visual styling for the toolbar when Outside-In module is enabled.
+ */
+
+/* @todo Move this into toolbar when module is not experimental:
+ *   https://www.drupal.org/node/2784593.
+ */
+
+/* Style the edit mode toolbar and tabs. */
+#toolbar-bar.js-outside-in-edit-mode {
+  background-color: #fff;
+}
+#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
+  color: #999;
+}
+#toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active {
+  color: #333;
+}
+
+/* Style both the edit and editing states of the contextual links toggle tab. */
+.toolbar-icon-edit.toolbar-item {
+  background-color: #50a0e9;
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #eee;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+}
+.toolbar-icon-edit.toolbar-item.is-active {
+  background-color: #50a0e9;
+  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: linear-gradient(to bottom, #007bc6, #0071b8);
+  color: #eee;
+  text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
+  font-weight: 700;
+  -webkit-font-smoothing: antialiased;
+}
+.toolbar-tab:hover > .toolbar-icon-edit,
+.toolbar-icon-edit:focus .toolbar-item {
+  background-color: #2369a6;
+  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
+  border-color: #1e5c90;
+  color: #fff;
+  outline: none;
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:before,
+button.toolbar-icon.toolbar-icon-edit.toolbar-item:before {
+  background-image: url(../../../misc/icons/bebebe/pencil.svg);
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:before:hover,
+button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+.toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
+  background-image: url(../../../misc/icons/ffffff/pencil.svg);
+}
+
+#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+ background-image: none;
+ color: #fff;
+}
+#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+ background-image: linear-gradient(to bottom, #0094f0, #0e69be);
+}
diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml
index 0b704af..6fbcd1e 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -5,8 +5,16 @@ drupal.outside_in:
   css:
     component:
       css/outside_in.module.css: {}
-      css/outside_in.theme.css: {}
       css/outside_in.motion.css: {}
+      css/outside_in.form.css: {}
+      css/outside_in.table.css: {}
+      css/outside_in.details.css: {}
+      css/outside_in.tabledrag.css: {}
+    theme:
+      # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
+      #   both jQuery UI and Classy's dialog.css, remove in
+      #   https://www.drupal.org/node/1945262.
+      css/outside_in.theme.css: { group: 200 }
   dependencies:
     - core/jquery
     - core/drupal
diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module
index 8878132..f82d839 100644
--- a/core/modules/outside_in/outside_in.module
+++ b/core/modules/outside_in/outside_in.module
@@ -5,6 +5,7 @@
  * Allows configuring blocks and other configuration from the site front-end.
  */
 
+use Drupal\Core\Asset\AttachedAssetsInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\outside_in\Block\BlockEntityOffCanvasForm;
 use Drupal\outside_in\Form\SystemBrandingOffCanvasForm;
@@ -137,3 +138,16 @@ function outside_in_block_alter(&$definitions) {
     }
   }
 }
+
+/**
+ * Implements hook_css_alter().
+ */
+function outside_in_css_alter(&$css, AttachedAssetsInterface $assets) {
+  // @todo Remove once conditional ordering is introduced in
+  //   https://www.drupal.org/node/1945262.
+  $path = drupal_get_path('module', 'outside_in') . '/css/outside_in.theme.css';
+  if (isset($css[$path])) {
+    // Use 200 to come after CSS_AGGREGATE_THEME.
+    $css[$path]['group'] = 200;
+  }
+}
diff --git a/core/modules/outside_in/outside_in.routing.yml b/core/modules/outside_in/outside_in.routing.yml
index 5c81541..79bc38d 100644
--- a/core/modules/outside_in/outside_in.routing.yml
+++ b/core/modules/outside_in/outside_in.routing.yml
@@ -2,6 +2,6 @@ entity.block.offcanvas_form:
   path: '/admin/structure/block/manage/{block}/offcanvas'
   defaults:
     _entity_form: 'block.offcanvas'
-    _title: 'Configure block'
+    _title_callback: '\Drupal\outside_in\Block\BlockEntityOffCanvasForm::title'
   requirements:
     _permission: 'administer blocks'
diff --git a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
index 8e7bf82..f6663de 100644
--- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
@@ -37,6 +37,9 @@ public function __construct($title, $content, array $dialog_options = [], $setti
     $this->dialogOptions['resizable'] = 'w';
     $this->dialogOptions['draggable'] = FALSE;
     $this->dialogOptions['drupalAutoButtons'] = FALSE;
+    // @todo drupal.ajax.js does not respect drupalAutoButtons properly, pass an
+    //   empty set of buttons until https://www.drupal.org/node/2793343 is in.
+    $this->dialogOptions['buttons'] = [];
   }
 
   /**
diff --git a/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php b/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php
index 089feae..a77f51f 100644
--- a/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php
+++ b/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php
@@ -3,6 +3,7 @@
 namespace Drupal\outside_in\Block;
 
 use Drupal\block\BlockForm;
+use Drupal\block\BlockInterface;
 use Drupal\Core\Block\BlockPluginInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Plugin\PluginWithFormsInterface;
@@ -16,6 +17,21 @@
 class BlockEntityOffCanvasForm extends BlockForm {
 
   /**
+   * Provides a title callback to get the block's admin label.
+   *
+   * @param \Drupal\block\BlockInterface $block
+   *   The block entity.
+   *
+   * @return \Drupal\Core\StringTranslation\TranslatableMarkup
+   *   The title.
+   */
+  public function title(BlockInterface $block) {
+    // @todo Wrap "Configure " in <span class="visually-hidden"></span> once
+    //   https://www.drupal.org/node/2359901 is fixed.
+    return $this->t('Configure @block', ['@block' => $block->getPlugin()->getPluginDefinition()['admin_label']]);
+  }
+
+  /**
    * {@inheritdoc}
    */
   public function form(array $form, FormStateInterface $form_state) {
@@ -34,7 +50,7 @@ public function form(array $form, FormStateInterface $form_state) {
     ];
 
     // Remove the ID and region elements.
-    unset($form['id'], $form['region']);
+    unset($form['id'], $form['region'], $form['settings']['admin_label']);
 
     return $form;
   }
@@ -42,6 +58,16 @@ public function form(array $form, FormStateInterface $form_state) {
   /**
    * {@inheritdoc}
    */
+  protected function actions(array $form, FormStateInterface $form_state) {
+    $actions = parent::actions($form, $form_state);
+    $actions['submit']['#value'] = $this->t('Save @block', ['@block' => $this->entity->getPlugin()->getPluginDefinition()['admin_label']]);
+    $actions['delete']['#access'] = FALSE;
+    return $actions;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
   protected function buildVisibilityInterface(array $form, FormStateInterface $form_state) {
     // Do not display the visibility.
     return [];
diff --git a/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php b/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
index 65139ec..063041d 100644
--- a/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
+++ b/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
@@ -54,6 +54,9 @@ public static function create(ContainerInterface $container) {
   public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
     $form = $this->plugin->buildConfigurationForm($form, $form_state);
 
+    $form['block_branding']['#type'] = 'details';
+    $form['block_branding']['#weight'] = 10;
+
     // Unset links to Site Information form, we can make these changes here.
     unset($form['block_branding']['use_site_name']['#description'], $form['block_branding']['use_site_slogan']['#description']);
 
@@ -62,7 +65,6 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
       '#type' => 'details',
       '#title' => t('Site details'),
       '#open' => TRUE,
-      '#weight' => -100,
     ];
     $form['site_information']['site_name'] = [
       '#type' => 'textfield',
diff --git a/core/modules/outside_in/src/Form/SystemMenuOffCanvasForm.php b/core/modules/outside_in/src/Form/SystemMenuOffCanvasForm.php
index 7bad07f..b1dd9ac 100644
--- a/core/modules/outside_in/src/Form/SystemMenuOffCanvasForm.php
+++ b/core/modules/outside_in/src/Form/SystemMenuOffCanvasForm.php
@@ -8,6 +8,7 @@
 use Drupal\Core\Entity\EntityTypeManagerInterface;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Plugin\PluginFormBase;
+use Drupal\Core\Render\Element;
 use Drupal\Core\Routing\RedirectDestinationTrait;
 use Drupal\Core\StringTranslation\StringTranslationTrait;
 use Drupal\Core\StringTranslation\TranslationInterface;
@@ -84,6 +85,18 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta
       '#open' => TRUE,
     ];
     $form['entity_form'] += $this->getEntityForm($this->entity)->buildForm([], $form_state);
+
+    // Print the menu link titles as text instead of a link.
+    if (!empty($form['entity_form']['links']['links'])) {
+      foreach (Element::children($form['entity_form']['links']['links']) as $child) {
+        $title = $form['entity_form']['links']['links'][$child]['title'][1]['#title'];
+        $form['entity_form']['links']['links'][$child]['title'][1] = ['#markup' => $title];
+      }
+    }
+    // Change the header text.
+    $form['entity_form']['links']['links']['#header'][0] = $this->t('Link');
+    $form['entity_form']['links']['links']['#header'][1]['data'] = $this->t('On');
+
     // Remove the label, ID, description, and buttons from the entity form.
     unset($form['entity_form']['label'], $form['entity_form']['id'], $form['entity_form']['description'], $form['entity_form']['actions']);
     // Since the overview form is further nested than expected, update the
diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
index 48bceeb..fc3851b 100644
--- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
+++ b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
@@ -45,6 +45,7 @@ public function testDialog() {
           'resizable' => 'w',
           'draggable' => FALSE,
           'drupalAutoButtons' => FALSE,
+          'buttons' => [],
         ],
       'effect' => 'fade',
       'speed' => 1000,
diff --git a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php b/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
index fd860dc..cd14d6d 100644
--- a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
+++ b/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
@@ -30,6 +30,7 @@ public function testRender() {
         'resizable' => 'w',
         'draggable' => FALSE,
         'drupalAutoButtons' => FALSE,
+        'buttons' => [],
       ],
       'effect' => 'fade',
       'speed' => 1000,