diff --git a/core/core.libraries.yml b/core/core.libraries.yml
index 5da51e8..9c7ba81 100644
--- a/core/core.libraries.yml
+++ b/core/core.libraries.yml
@@ -175,6 +175,18 @@ drupal.dialog.ajax:
   version: VERSION
   js:
     misc/dialog/dialog.ajax.js: {}
+  css:
+    base:
+      misc/dialog/css/offcanvas.reset.css: {}
+      misc/dialog/css/offcanvas.css: {}
+    component:
+      misc/dialog/css/offcanvas.motion.css: {}
+      misc/dialog/css/offcanvas.form.css: {}
+      misc/dialog/css/offcanvas.table.css: {}
+      misc/dialog/css/offcanvas.details.css: {}
+      misc/dialog/css/offcanvas.tabledrag.css: {}
+    component:
+      misc/dialog/css/offcanvas.theme.css: {}
   dependencies:
     - core/jquery
     - core/drupal
@@ -190,7 +202,7 @@ drupal.displace:
     - core/jquery
     - core/drupal
     - core/drupal.debounce
-
+    
 drupal.dropbutton:
   version: VERSION
   js:
diff --git a/core/misc/dialog/css/offcanvas.css b/core/misc/dialog/css/offcanvas.css
new file mode 100644
index 0000000..ba7dec9
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.css
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * CSS for Offcanvas tray.
+ */
+
+/* Position the dialog-offcanvas tray container outside the right of the viewport. */
+.ui-dialog-offcanvas {
+  position: relative;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Style the content inside the offcanvas tray. */
+.ui-dialog-offcanvas {
+  position: relative;
+  width: 100%;
+  padding: 0 15px;
+  /* Prevent horizontal scrollbar. */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+[dir="rtl"] #drupal-offcanvas {
+  text-align: right;
+}
\ No newline at end of file
diff --git a/core/misc/dialog/css/offcanvas.details.css b/core/misc/dialog/css/offcanvas.details.css
new file mode 100644
index 0000000..d4ab20f
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.details.css
@@ -0,0 +1,31 @@
+/**
+ * @file
+ * Structural styling for summary and details in the offcanvas tray.
+ */
+
+#drupal-offcanvas summary a {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+#drupal-offcanvas details,
+#drupal-offcanvas summary,
+#drupal-offcanvas .details-wrapper {
+  border-width: 0;
+  /* Cancel out the padding of the parent. */
+  margin: 0 -20px;
+  padding: 0 20px;
+}
+#drupal-offcanvas summary {
+  background: #eee;
+  padding: 10px 20px;
+  text-shadow: none;
+  outline: none;
+}
+#drupal-offcanvas summary:hover,
+#drupal-offcanvas summary:focus,
+#drupal-offcanvas summary:active  {
+  outline: none;
+}
+#drupal-offcanvas details[open] {
+  padding-bottom: 10px;
+}
diff --git a/core/misc/dialog/css/offcanvas.dropbutton.css b/core/misc/dialog/css/offcanvas.dropbutton.css
new file mode 100644
index 0000000..066f632
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.dropbutton.css
@@ -0,0 +1,282 @@
+/**
+ * @file
+ * Styles for dropbuttons.
+ *
+ * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
+ */
+
+/* Remove borders. */
+#drupal-offcanvas .dropbutton-wrapper,
+#drupal-offcanvas .dropbutton-widget {
+  display: block;
+  position: relative;
+  border: 0;
+}
+
+#drupal-offcanvas .dropbutton-widget {
+  margin: 0;
+  background-image: none;
+}
+
+/* 
+ * Style dropbutton single. 
+ */
+
+#drupal-offcanvas .dropbutton-single .dropbutton-widget {
+  border: 0;
+}
+#drupal-offcanvas .dropbutton-single .dropbutton-action a {
+  padding: 0;
+  /* Overlap icon for trigger. */
+  margin-top: -2em;
+  height: 2.2em;
+  cursor: pointer;
+}
+#drupal-offcanvas .dropbutton-single .dropbutton-action:hover,
+#drupal-offcanvas .dropbutton-single .dropbutton-action:focus,
+#drupal-offcanvas .dropbutton-single .dropbutton-action a:hover,
+#drupal-offcanvas .dropbutton-single .dropbutton-action a:focus {
+  background-color: transparent;
+  background-image: none;
+  text-decoration: none;
+  outline: none;
+}
+#drupal-offcanvas .dropbutton-widget .dropbutton {
+  list-style-image: none;
+  list-style-type: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+#drupal-offcanvas .dropbutton li,
+#drupal-offcanvas .dropbutton a {
+  display: block;
+  width: auto;
+  padding: 4px 0;
+  text-align: left;
+  background: transparent;
+  color: #eee;
+  outline: none;
+}
+#drupal-offcanvas .dropbutton li:hover,
+#drupal-offcanvas .dropbutton li:focus,
+#drupal-offcanvas .dropbutton a:hover,
+#drupal-offcanvas .dropbutton a:focus {
+  outline: none;
+}
+
+/* 
+ * Style dropbutton multiple. 
+ */
+
+#drupal-offcanvas .dropbutton-multiple .dropbutton-widget {
+  width: 2em;
+  height: 2em;
+}
+
+/* Hide the other actions until the dropbutton is triggered. */
+#drupal-offcanvas .dropbutton-multiple .dropbutton .secondary-action {
+  display: none;
+}
+
+/* The toggle to expand the button. */
+#drupal-offcanvas .dropbutton-toggle {
+  bottom: 0;
+  display: block;
+  position: absolute;
+  right: 0; /* LTR */
+  text-indent: 110%;
+  top: 0;
+  white-space: nowrap;
+  width: 2em;
+}
+[dir="rtl"] #drupal-offcanvas .dropbutton-toggle {
+  left: 0;
+  right: auto;
+}
+#drupal-offcanvas .dropbutton-toggle button {
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  background: none;
+  border: 0px solid transparent;
+  border-bottom-right-radius: 1em; /* LTR */
+  border-top-right-radius: 1em; /* LTR */
+  cursor: pointer;
+  transition: background .5s ease;
+}
+#drupal-offcanvas .dropbutton-toggle button:hover,
+#drupal-offcanvas .dropbutton-toggle button:focus {
+  outline: none;
+}
+[dir="rtl"] #drupal-offcanvas .dropbutton-toggle button {
+  border-radius: 0;
+  border-bottom-left-radius: 1em;
+  border-top-left-radius: 1em;
+  border-width: 0;
+}
+
+/* The arrow toogle arrow. */
+#drupal-offcanvas .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;
+  margin-top: 0;
+  width: 0;
+  overflow: hidden;
+}
+#drupal-offcanvas span.dropbutton-arrow {
+  top: 7px;
+  right: 8px; /* LTR */
+}
+#drupal-offcanvas span.dropbutton-arrow:hover {
+  background: transparent;
+}
+[dir="rtl"] #drupal-offcanvas span.dropbutton-arrow {
+  left: 8px;
+  right: auto;
+}
+
+#drupal-offcanvas .dropbutton-action > .js-form-submit.form-submit,
+#drupal-offcanvas .dropbutton-toggle button {
+  background-image: none;
+  text-shadow: none;
+  position: relative;
+}
+
+/* 
+ * Dropbuttons when in a table cell. 
+ */
+
+#drupal-offcanvas td .dropbutton-multiple {
+  padding-right: 0;
+  padding-left: 0;
+  margin-right: 0;
+  margin-left: 0;
+  border: 0;
+}
+#drupal-offcanvas td .dropbutton-multiple .dropbutton-action a,
+#drupal-offcanvas td .dropbutton-multiple .dropbutton-action input,
+#drupal-offcanvas td .dropbutton-multiple .dropbutton-action button {
+  width: auto;
+}
+#drupal-offcanvas td .dropbutton-wrapper {
+  margin-bottom: 0;
+}
+
+/* Push the widget to the right so text expands left. */
+#drupal-offcanvas td .dropbutton-widget {
+  position: absolute;
+  right: 0; /* LTR */
+}
+[dir="rtl"] #drupal-offcanvas td .dropbutton-widget {
+  left: 0;
+}
+
+/* Push the wrapper to the right edge of the td. */
+#drupal-offcanvas td .dropbutton-single,
+#drupal-offcanvas td .dropbutton-multiple {
+  float: right; /* LTR */
+  padding-right: 0;
+  margin-right: 0;
+  max-width: initial;
+  min-width: initial;
+}
+[dir="rtl"] #drupal-offcanvas td .dropbutton-multiple {
+  float: left;
+  padding-right: 0;
+  margin-right: 0;
+}
+#drupal-offcanvas td .dropbutton-widget .dropbutton {
+  margin: 0;
+  overflow: hidden;
+}
+
+/* Push text out of the way. */
+#drupal-offcanvas td .dropbutton-multiple li,
+#drupal-offcanvas td .dropbutton-multiple a {
+  margin-left: -9999px;
+}
+#drupal-offcanvas td .dropbutton-multiple.open .dropbutton li,
+#drupal-offcanvas td .dropbutton-multiple.open .dropbutton a {
+  margin-left: 0;
+  width: auto;
+}
+
+/* Collapse the button to a circle. */
+#drupal-offcanvas td .dropbutton-toggle {
+  width: 2em;
+  height: 2em;
+  border-radius: 1em;
+}
+#drupal-offcanvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border: 0;
+}
+
+/* Put pencil icon in place of 'edit' on single buttons to save space. */
+#drupal-offcanvas td ul.dropbutton li.edit {
+  width: 2em;
+  height: 2em;
+}
+
+/* Edit text is transparent above icon. */
+#drupal-offcanvas td .dropbutton-single li.edit.dropbutton-action > a {
+  color: transparent;
+  z-index: 1;
+}
+
+/* The pencil icon. */
+#drupal-offcanvas td .dropbutton-single .edit:before {
+  content: '.';
+  display: block;
+  color: transparent;
+  background: transparent url(/core/misc/icons/ffffff/pencil.svg) no-repeat center 1px;
+  background-size: 14px;
+}
+
+/* Dropbutton when triggered expands to show secondary items. */
+#drupal-offcanvas .dropbutton-multiple.open {
+  z-index: 100;
+}
+
+/* Create visual separation if there is an adjacent button. */
+#drupal-offcanvas .dropbutton-multiple.open .dropbutton-widget {
+  box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
+}
+#drupal-offcanvas .dropbutton-multiple.open,
+#drupal-offcanvas .dropbutton-multiple.open .dropbutton-widget {
+  width: auto;
+  height: auto;
+  max-width: none;
+  min-width: 0;
+  padding: 0;
+  overflow: visible;
+}
+#drupal-offcanvas td .dropbutton-multiple.open .dropbutton {
+  padding-right: 2em; /* LTR */
+}
+[dir="rtl"] #drupal-offcanvas td .dropbutton-multiple.open .dropbutton {
+  padding-left: 2em;
+  padding-right: inherit;
+}
+#drupal-offcanvas .dropbutton-multiple.open .dropbutton li a {
+  padding: 4px 1em;
+}
+#drupal-offcanvas .dropbutton-multiple.open .dropbutton .secondary-action {
+  display: block;
+}
+
+/* When open, the toggle arrow points upward. */
+#drupal-offcanvas .dropbutton-multiple.open span.dropbutton-arrow {
+  border-bottom: 0.3333em solid;
+  border-top-color: transparent;
+  top: 4px;
+}
diff --git a/core/misc/dialog/css/offcanvas.form.css b/core/misc/dialog/css/offcanvas.form.css
new file mode 100644
index 0000000..b60bd6b
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.form.css
@@ -0,0 +1,76 @@
+/**
+ * @file
+ * Visual styling for forms in the Settings Tray module's off canvas tray.
+ */
+
+#drupal-offcanvas form { 
+  font-size: 14px;
+}
+#drupal-offcanvas label {
+  line-height: normal;
+  font-weight: normal;
+}
+#drupal-offcanvas .description,
+#drupal-offcanvas .form-item .description,
+#drupal-offcanvas .details-description {
+  margin-top: 5px;
+  font-size: 12px;
+  font-style: normal;
+}
+#drupal-offcanvas .form-item {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+#drupal-offcanvas .form-select,
+#drupal-offcanvas .form-text,
+#drupal-offcanvas .form-tel,
+#drupal-offcanvas .form-email,
+#drupal-offcanvas .form-url,
+#drupal-offcanvas .form-search,
+#drupal-offcanvas .form-number,
+#drupal-offcanvas .form-color,
+#drupal-offcanvas .form-file,
+#drupal-offcanvas .form-textarea,
+#drupal-offcanvas .form-date,
+#drupal-offcanvas .form-time {
+  max-width: 100%;
+  padding: 6px;
+  margin-top: 5px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  outline: 0;
+  display: block;
+}
+#drupal-offcanvas input[type="checkbox"],
+#drupal-offcanvas .checkbox,
+#drupal-offcanvas input[type="radio"],
+#drupal-offcanvas .radio {
+  position: static;
+  margin: 0;
+}
+#drupal-offcanvas td .checkbox {
+  display: table-cell;
+  line-height: normal;
+  vertical-align: middle;
+}
+#drupal-offcanvas .form-actions {
+  text-align: center;
+}
+#drupal-offcanvas input[type="submit"],
+#drupal-offcanvas .button {
+  display: block;
+  background: #ddd;
+  width: 100%;
+  padding: 6px;
+  margin-top: 5px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  outline: 0;
+}
+#drupal-offcanvas td .dropbutton-widget {
+  background: #ddd;
+  font-size: 12px;
+  padding: 2px 6px;
+}
diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/misc/dialog/css/offcanvas.motion.css
similarity index 63%
rename from core/modules/outside_in/css/outside_in.motion.css
rename to core/misc/dialog/css/offcanvas.motion.css
index 450bffe..11f5e2e 100644
--- a/core/modules/outside_in/css/outside_in.motion.css
+++ b/core/misc/dialog/css/offcanvas.motion.css
@@ -5,15 +5,10 @@
  * Motion effects are in a separate file so that they can be easily turned off
  * to improve performance if desired.
  *
- * @todo Move motion effects file into a core Off-Canvas library and add a
- *   configuration option for browser rendering performance to disable this
- *   file: https://www.drupal.org/node/2784443.
  */
 
-
 /* Transition the edit icon in the toolbar. */
 #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
-  -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   transition: all .7s ease;
 }
@@ -22,7 +17,6 @@
 .dialog-offcanvas__main-canvas .contextual,
 .dialog-offcanvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
 .dialog-offcanvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
-  -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   transition: all .7s ease;
 }
@@ -30,15 +24,6 @@
 /* Transition the position of the toolbar. */
 .toolbar-fixed,
 .toolbar-tray-open {
-  -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   transition: all .5s ease;
 }
-
-/* Transition the administration tray.
-#toolbar-administration,
-#toolbar-administration * {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
-  transition: all .7s ease;
-}*/
diff --git a/core/misc/dialog/css/offcanvas.reset.css b/core/misc/dialog/css/offcanvas.reset.css
new file mode 100644
index 0000000..f3281f4
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.reset.css
@@ -0,0 +1,422 @@
+/*
+ * @file
+ * Reset input form styles for the settings tray.
+ * This is a generic reset. Drupal-specific classes are reset in components.
+ *
+ * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
+ */
+
+#drupal-offcanvas html,
+#drupal-offcanvas body {
+  -webkit-tap-highlight-color: initial;
+  height: 100%;
+}
+
+/* Set all elements to border box. */
+#drupal-offcanvas *,
+#drupal-offcanvas :after, 
+#drupal-offcanvas :before {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Reset typographic attributes on all elements. */
+#drupal-offcanvas * {
+  font-variant-caps: initial;
+  font-variant-ligatures: initial;
+  font-variant-numeric: initial;
+  text-decoration: initial;
+  text-transform: initial;
+  text-shadow: none;
+  text-size-adjust: 100%;
+}
+
+/* Reset size and position on elements. */
+#drupal-offcanvas a,
+#drupal-offcanvas abbr,
+#drupal-offcanvas acronym,
+#drupal-offcanvas address,
+#drupal-offcanvas applet,
+#drupal-offcanvas article,
+#drupal-offcanvas aside,
+#drupal-offcanvas audio,
+#drupal-offcanvas b,
+#drupal-offcanvas big,
+#drupal-offcanvas blockquote,
+#drupal-offcanvas body,
+#drupal-offcanvas canvas,
+#drupal-offcanvas caption,
+#drupal-offcanvas center,
+#drupal-offcanvas cite,
+#drupal-offcanvas code,
+#drupal-offcanvas dd,
+#drupal-offcanvas del,
+#drupal-offcanvas dfn,
+#drupal-offcanvas dialog,
+#drupal-offcanvas dl,
+#drupal-offcanvas dt,
+#drupal-offcanvas em,
+#drupal-offcanvas embed,
+#drupal-offcanvas fieldset,
+#drupal-offcanvas figcaption,
+#drupal-offcanvas figure,
+#drupal-offcanvas font,
+#drupal-offcanvas footer,
+#drupal-offcanvas form,
+#drupal-offcanvas h1,
+#drupal-offcanvas h2,
+#drupal-offcanvas h3,
+#drupal-offcanvas h4,
+#drupal-offcanvas h5,
+#drupal-offcanvas h6,
+#drupal-offcanvas header,
+#drupal-offcanvas hgroup,
+#drupal-offcanvas hr,
+#drupal-offcanvas html,
+#drupal-offcanvas i,
+#drupal-offcanvas iframe,
+#drupal-offcanvas img,
+#drupal-offcanvas ins,
+#drupal-offcanvas kbd,
+#drupal-offcanvas label,
+#drupal-offcanvas legend,
+#drupal-offcanvas li,
+#drupal-offcanvas main,
+#drupal-offcanvas mark,
+#drupal-offcanvas menu,
+#drupal-offcanvas meter,
+#drupal-offcanvas nav,
+#drupal-offcanvas object,
+#drupal-offcanvas ol,
+#drupal-offcanvas output,
+#drupal-offcanvas p,
+#drupal-offcanvas pre,
+#drupal-offcanvas progress,
+#drupal-offcanvas q,
+#drupal-offcanvas rp,
+#drupal-offcanvas rt,
+#drupal-offcanvas ruby,
+#drupal-offcanvas s,
+#drupal-offcanvas samp,
+#drupal-offcanvas section,
+#drupal-offcanvas small,
+#drupal-offcanvas span,
+#drupal-offcanvas strike,
+#drupal-offcanvas strong,
+#drupal-offcanvas sub,
+#drupal-offcanvas sup,
+#drupal-offcanvas table,
+#drupal-offcanvas tbody,
+#drupal-offcanvas td,
+#drupal-offcanvas tfoot,
+#drupal-offcanvas th,
+#drupal-offcanvas thead,
+#drupal-offcanvas time,
+#drupal-offcanvas tr,
+#drupal-offcanvas tt,
+#drupal-offcanvas u,
+#drupal-offcanvas ul,
+#drupal-offcanvas var,
+#drupal-offcanvas video,
+#drupal-offcanvas xmp {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+}
+
+/*
+ * Override the default (display: inline) for
+ * browsers that do not recognize HTML5 tags.
+ * IE8 (and lower) requires a shiv:
+ * http://ejohn.org/blog/html5-shiv
+ */
+#drupal-offcanvas article,
+#drupal-offcanvas aside,
+#drupal-offcanvas figcaption,
+#drupal-offcanvas figure,
+#drupal-offcanvas footer,
+#drupal-offcanvas header,
+#drupal-offcanvas hgroup,
+#drupal-offcanvas main,
+#drupal-offcanvas menu,
+#drupal-offcanvas nav,
+#drupal-offcanvas section {
+  display: block;
+  line-height: normal;
+  border-radius: 0;
+}
+
+/*
+ * Makes browsers agree.
+ * IE + Opera = font-weight: bold.
+ * Gecko + WebKit = font-weight: bolder.
+ */
+#drupal-offcanvas b,
+#drupal-offcanvas strong {
+  font-weight: bold;
+}
+#drupal-offcanvas img {
+  color: transparent;
+  font-size: 0;
+  vertical-align: middle;
+  /* For IE. http://css-tricks.com/ie-fix-bicubic-scaling-for-images */
+  -ms-interpolation-mode: bicubic;
+}
+#drupal-offcanvas ul,
+#drupal-offcanvas ol {
+  list-style: none;
+}
+
+/* reset table styling. */
+#drupal-offcanvas table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+#drupal-offcanvas table thead,
+#drupal-offcanvas table tbody,
+#drupal-offcanvas table tbody tr:nth-child(even),
+#drupal-offcanvas table tbody tr:nth-child(odd),
+#drupal-offcanvas table tfoot {
+  border: 0;
+  background: none;
+  background-color: transparent;
+}
+#drupal-offcanvas th,
+#drupal-offcanvas td,
+#drupal-offcanvas caption {
+  font-weight: normal;
+}
+#drupal-offcanvas q {
+  quotes: none;
+}
+#drupal-offcanvas q:before,
+#drupal-offcanvas q:after {
+  content: '';
+  content: none;
+}
+#drupal-offcanvas sub,
+#drupal-offcanvas sup,
+#drupal-offcanvas small {
+  font-size: 75%;
+}
+#drupal-offcanvas sub,
+#drupal-offcanvas sup {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+#drupal-offcanvas sub {
+  bottom: -0.25em;
+}
+#drupal-offcanvas sup {
+  top: -0.5em;
+}
+
+/*
+ * For IE9. Without, occasionally draws shapes
+ * outside the boundaries of <svg> rectangle.
+ */
+#drupal-offcanvas svg {
+  overflow: hidden;
+}
+
+/* Specific resets for inputs. */
+#drupal-offcanvas input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+#drupal-offcanvas input {
+  height: initial;
+  width: initial;
+  min-height: initial;
+  max-height: initial;
+  min-width: initial;
+  max-width: initial;
+  line-height: initial;
+  margin: 0;
+  padding: 0;
+  color: initial;
+}
+#drupal-offcanvas input[type="checkbox"],
+#drupal-offcanvas input[type="radio"] {
+  position: static;
+  margin: 0;
+}
+#drupal-offcanvas input:invalid,
+#drupal-offcanvas button:invalid,
+#drupal-offcanvas select:invalid,
+#drupal-offcanvas textarea:invalid,
+#drupal-offcanvas input:focus,
+#drupal-offcanvas button:focus,
+#drupal-offcanvas select:focus,
+#drupal-offcanvas textarea:focus,
+#drupal-offcanvas input[type="file"]:focus,
+#drupal-offcanvas input[type="file"]:active,
+#drupal-offcanvas input[type="radio"]:focus,
+#drupal-offcanvas input[type="radio"]:active,
+#drupal-offcanvas input[type="checkbox"]:focus,
+#drupal-offcanvas input[type="checkbox"]:active {
+  -moz-box-shadow: none;
+  box-shadow: none;
+  z-index: 1;
+}
+#drupal-offcanvas [role="button"] {
+  cursor: pointer;
+}
+#drupal-offcanvas button,
+#drupal-offcanvas input[type="reset"],
+#drupal-offcanvas input[type="submit"],
+#drupal-offcanvas input[type="button"],
+input[type="button" i], 
+input[type="submit" i], 
+input[type="reset" i], 
+input[type="file" i]::-webkit-file-upload-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-block;
+  background-image: none;
+  border: 0;
+  outline: 0;
+  color: initial;
+  overflow: visible;
+  text-shadow: none;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+}
+#drupal-offcanvas button:hover,
+#drupal-offcanvas input[type="reset"]:hover,
+#drupal-offcanvas input[type="submit"]:hover,
+#drupal-offcanvas input[type="button"]:hover {
+  background-image: none;
+  text-decoration: none;
+}
+#drupal-offcanvas button:active,
+#drupal-offcanvas input[type="reset"]:active,
+#drupal-offcanvas input[type="submit"]:active,
+#drupal-offcanvas input[type="button"]:active {
+  background-image: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  border-color: #ddd;
+}
+#drupal-offcanvas button::-moz-focus-inner,
+#drupal-offcanvas input[type="reset"]::-moz-focus-inner,
+#drupal-offcanvas input[type="submit"]::-moz-focus-inner,
+#drupal-offcanvas input[type="button"]::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+#drupal-offcanvas textarea,
+#drupal-offcanvas select,
+#drupal-offcanvas input[type="date"],
+#drupal-offcanvas input[type="datetime"],
+#drupal-offcanvas input[type="datetime-local"],
+#drupal-offcanvas input[type="email"],
+#drupal-offcanvas input[type="month"],
+#drupal-offcanvas input[type="number"],
+#drupal-offcanvas input[type="password"],
+#drupal-offcanvas input[type="search"],
+#drupal-offcanvas input[type="tel"],
+#drupal-offcanvas input[type="text"],
+#drupal-offcanvas input[type="time"],
+#drupal-offcanvas input[type="url"],
+#drupal-offcanvas input[type="week"] {
+  height: auto;
+  vertical-align: middle;
+  border-radius: 0;
+  outline: 0;
+  margin: 0;
+}
+#drupal-offcanvas textarea[disabled],
+#drupal-offcanvas select[disabled],
+#drupal-offcanvas input[type="date"][disabled],
+#drupal-offcanvas input[type="datetime"][disabled],
+#drupal-offcanvas input[type="datetime-local"][disabled],
+#drupal-offcanvas input[type="email"][disabled],
+#drupal-offcanvas input[type="month"][disabled],
+#drupal-offcanvas input[type="number"][disabled],
+#drupal-offcanvas input[type="password"][disabled],
+#drupal-offcanvas input[type="search"][disabled],
+#drupal-offcanvas input[type="tel"][disabled],
+#drupal-offcanvas input[type="text"][disabled],
+#drupal-offcanvas input[type="time"][disabled],
+#drupal-offcanvas input[type="url"][disabled],
+#drupal-offcanvas input[type="week"][disabled] {
+  background-color: #eee;
+}
+#drupal-offcanvas input[type="hidden"] {
+  visibility: hidden;
+}
+#drupal-offcanvas button[disabled],
+#drupal-offcanvas input[disabled],
+#drupal-offcanvas select[disabled],
+#drupal-offcanvas select[disabled] option,
+#drupal-offcanvas select[disabled] optgroup,
+#drupal-offcanvas textarea[disabled] {
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+#drupal-offcanvas input::-webkit-input-placeholder,
+#drupal-offcanvas textarea::-webkit-input-placeholder,
+#drupal-offcanvas input:-moz-placeholder,
+#drupal-offcanvas textarea:-moz-placeholder {
+  color: #888;
+}
+#drupal-offcanvas textarea,
+#drupal-offcanvas select[size],
+#drupal-offcanvas select[multiple] {
+  height: auto;
+}
+#drupal-offcanvas select[size="0"],
+#drupal-offcanvas select[size="1"] {
+  height: auto;
+}
+#drupal-offcanvas textarea {
+  min-height: 40px;
+  overflow: auto;
+  resize: vertical;
+  width: 100%;
+}
+#drupal-offcanvas optgroup {
+  color: black;
+  font-style: normal;
+  font-weight: normal;
+}
+#drupal-offcanvas optgroup::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+#drupal-offcanvas * html button {
+  background: none;
+  border: 1px solid;
+  border-color: #ddd;
+  color: #333;
+  padding: 0;
+  text-decoration: none;
+  overflow: visible;
+  vertical-align: middle;
+  width: auto;
+}
+#drupal-offcanvas * html textarea,
+#drupal-offcanvas * html select {
+  background: white;
+  border: 1px solid;
+  border-color: #888;
+  color: black;
+  padding: 0
+  vertical-align: top;
+}
+
+/* Bootstrap and other frameworks add color to selection. */
+#drupal-offcanvas ::selection {
+  background-color: rgba(175,175,175,0.5);
+  color: inherit;
+}
+
+
diff --git a/core/misc/dialog/css/offcanvas.table.css b/core/misc/dialog/css/offcanvas.table.css
new file mode 100644
index 0000000..1f7b8f8
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.table.css
@@ -0,0 +1,49 @@
+/**
+ * @file
+ * Visual styling for tables in the Settings Tray module's off canvas tray.
+ */
+
+#drupal-offcanvas table {
+  width: calc(100% + 40px);
+  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;
+}
+#drupal-offcanvas tr th {
+  padding: 2px 4px;
+}
+#drupal-offcanvas tr,
+#drupal-offcanvas tr td {
+  padding: 2px 4px;
+  height: 35px;
+  vertical-align: middle;
+}
+#drupal-offcanvas td a {
+  display: block;
+  max-width: 120px;
+  overflow: hidden;
+}
+#drupal-offcanvas tr td:first-child,
+#drupal-offcanvas tr th:first-child {
+  padding-left: 20px; /* LTR */
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[dir="rtl"] #drupal-offcanvas tr td:first-child,
+[dir="rtl"] #drupal-offcanvas tr th:first-child {
+  padding-right: 20px;
+}
+#drupal-offcanvas tr.odd,
+#drupal-offcanvas tr.even {
+  background-image: none;
+  background-color: transparent;
+}
+td.checkbox,
+th.checkbox {
+  text-align: center;
+  width: 20px;
+}
+
diff --git a/core/misc/dialog/css/offcanvas.tabledrag.css b/core/misc/dialog/css/offcanvas.tabledrag.css
new file mode 100644
index 0000000..4ad2926
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.tabledrag.css
@@ -0,0 +1,81 @@
+/**
+ * @file
+ * Table drag behavior for Settings Tray module.
+ *
+ * @see tabledrag.js
+ */
+
+#drupal-offcanvas body.drag {
+  cursor: move;
+}
+#drupal-offcanvas tr.region-populated {
+  display: none;
+}
+#drupal-offcanvas tr.add-new .tabledrag-changed {
+  display: none;
+}
+#drupal-offcanvas .draggable a.tabledrag-handle {
+  background-image: none;
+  margin: 0;
+  margin-left: 0; /* LTR */
+  margin-right: 5px; /* LTR */
+  height: auto;
+  min-width: 20px;
+  padding: 0;
+  overflow: hidden;
+  float: left; /* LTR */
+  text-decoration: none;
+  cursor: move;
+}
+[dir="rtl"] #drupal-offcanvas .draggable a.tabledrag-handle {
+  float: right;
+  margin-right: 0;
+  margin-left: 5px;
+}
+#drupal-offcanvas a.tabledrag-handle .handle {
+  background-repeat: no-repeat;
+  background-position: center;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  width: auto;
+}
+#drupal-offcanvas .touchevents .draggable td {
+  padding: 0 10px;
+}
+#drupal-offcanvas .touchevents .draggable .menu-item__link {
+  display: inline-block;
+  padding: 10px 0;
+}
+#drupal-offcanvas .touchevents a.tabledrag-handle {
+  height: 44px;
+  width: 40px;
+}
+#drupal-offcanvas .touchevents a.tabledrag-handle .handle {
+  background-position: 40% 19px; /* LTR */
+  height: 21px;
+}
+[dir="rtl"] #drupal-offcanvas .touch a.tabledrag-handle .handle {
+  background-position: right 40% top 19px;
+}
+#drupal-offcanvas .touchevents .draggable.drag a.tabledrag-handle .handle {
+  background-position: 50% -32px;
+}
+#drupal-offcanvas .tabledrag-toggle-weight-wrapper {
+  text-align: right; /* LTR */
+}
+[dir="rtl"] #drupal-offcanvas .tabledrag-toggle-weight-wrapper {
+  text-align: left;
+}
+#drupal-offcanvas .indentation {
+  float: left; /* LTR */
+  height: auto;
+  margin: 0 3px 0 -10px; /* LTR */
+  padding: 0 0 0 10px; /* LTR */
+  width: auto;
+}
+[dir="rtl"] #drupal-offcanvas .indentation {
+  float: right;
+  margin: 0 -10px 0 3px;
+  padding: 0 10px 0 0;
+}
diff --git a/core/misc/dialog/css/offcanvas.theme.css b/core/misc/dialog/css/offcanvas.theme.css
new file mode 100644
index 0000000..a26658e
--- /dev/null
+++ b/core/misc/dialog/css/offcanvas.theme.css
@@ -0,0 +1,56 @@
+/**
+ * @file
+ * Visual styling for the offcanvas tray.
+ */
+
+/* Set offcanvas base font. */
+#drupal-offcanvas * {
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+}
+
+/* Style the tray header. */
+.ui-dialog-offcanvas.ui-dialog .ui-dialog-titlebar {
+  padding: 20px;
+  border: 0;
+  border-bottom: 1px solid #ddd;
+}
+.ui-dialog-offcanvas .ui-dialog-titlebar-close {
+  position: absolute;
+  border: 0;
+  right: 20px;
+}
+[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(/core/misc/icons/bebebe/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;
+}
+
diff --git a/core/modules/outside_in/css/offcanvas.css b/core/modules/outside_in/css/offcanvas.css
deleted file mode 100644
index fb671db..0000000
--- a/core/modules/outside_in/css/offcanvas.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @file
- * CSS for Offcanvas tray.
- *
- * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
- */
-/* Position the dialog-offcanvas tray container outside the right of the viewport. */
-.ui-dialog-offcanvas {
-    box-sizing: border-box;
-    height: 100%;
-    overflow: visible;
-}
-
-/* Wrap the form that's inside the dialog-offcanvas tray. */
-.ui-dialog-offcanvas .ui-dialog-content {
-    padding: 0 20px;
-    /* Prevent horizontal scrollbar. */
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-[dir="rtl"] .ui-dialog-offcanvas .ui-dialog-content {
-    text-align: right;
-}
diff --git a/core/modules/outside_in/css/offcanvas.motion.css b/core/modules/outside_in/css/offcanvas.motion.css
deleted file mode 100644
index 1c06994..0000000
--- a/core/modules/outside_in/css/offcanvas.motion.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * @file
- * Motion effects for off-canvas tray dialog.
- *
- * Motion effects are in a separate file so that they can be easily turned off
- * to improve performance if desired.
- *
- * @todo Move motion effects file into a core Off-Canvas library and add a
- *   configuration option for browser rendering performance to disable this
- *   file: https://www.drupal.org/node/2784443.
- */
-
-/* Transition the dialog-offcanvas tray container, with 2s delay to match main canvas speed. */
-.ui-dialog-offcanvas .ui-dialog-content {
-    -webkit-transition: all .7s ease 2s;
-    -moz-transition: all .7s ease 2s;
-    transition: all .7s ease 2s;
-}
-
-@media (max-width: 700px) {
-    .ui-dialog-offcanvas .ui-dialog-content {
-        -webkit-transition: all .7s ease;
-        -moz-transition: all .7s ease;
-        transition: all .7s ease;
-    }
-}
-
-.dialog-offcanvas__main-canvas {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
-  transition: all .7s ease;
-}
diff --git a/core/modules/outside_in/css/outside_in.details.css b/core/modules/outside_in/css/outside_in.details.css
deleted file mode 100644
index 8ca1406..0000000
--- a/core/modules/outside_in/css/outside_in.details.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @file
- * Visual styling for summary and details in the Settings Tray module's off canvas tray.
- */
-
-.ui-dialog-outside-in details,
-.ui-dialog-outside-in summary,
-.ui-dialog-outside-in .ui-dialog-content {
-  background: #474747;
-  color: #ddd;
-}
-.ui-dialog-outside-in summary a {
-  color: #ddd;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.ui-dialog-outside-in summary a:hover,
-.ui-dialog-outside-in summary a:focus {
-  color: #fff;
-}
-.ui-dialog-outside-in details,
-.ui-dialog-outside-in summary,
-.ui-dialog-outside-in .details-wrapper {
-  border-width: 0;
-  /* Cancel out the padding of the parent. */
-  margin: 0 -20px;
-  padding: 0 20px;
-}
-.ui-dialog-outside-in summary {
-  text-shadow: none;
-  outline: none;
-  padding: 10px 20px;
-  font-size: 14px;
-  transition: all .5s ease;
-}
-.ui-dialog-outside-in summary:hover,
-.ui-dialog-outside-in summary:focus {
-  background-color: #222;
-  outline: none;
-}
-.ui-dialog-outside-in details[open] {
-  background-color: #333;
-  padding-bottom: 10px;
-}
-.ui-dialog-outside-in details[open] > summary {
-  background-color: #333;
-  color: #eee;
-}
-.ui-dialog-outside-in 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
deleted file mode 100644
index 5d4c3be..0000000
--- a/core/modules/outside_in/css/outside_in.form.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * @file
- * Visual styling for forms in the Settings Tray module's off canvas tray.
- */
-
-.ui-dialog-outside-in label {
-  line-height: normal;
-  font-size: 12px;
-  font-weight: normal;
-  color: #ddd;
-}
-.ui-dialog-outside-in .description,
-.ui-dialog-outside-in .form-item .description,
-.ui-dialog-outside-in .details-description {
-  color: #ddd;
-  margin-top: 5px;
-  font-size: 12px;
-  font-style: normal;
-}
-.ui-dialog-outside-in .details-wrapper .description {
-  color: #bbb;
-}
-.ui-dialog-outside-in .form-item {
-  margin-bottom: 10px;
-  margin-top: 10px;
-}
-/* Set size and position for all inputs. */
-.ui-dialog-outside-in .form-select,
-.ui-dialog-outside-in .form-text,
-.ui-dialog-outside-in .form-tel,
-.ui-dialog-outside-in .form-email,
-.ui-dialog-outside-in .form-url,
-.ui-dialog-outside-in .form-search,
-.ui-dialog-outside-in .form-number,
-.ui-dialog-outside-in .form-color,
-.ui-dialog-outside-in .form-file,
-.ui-dialog-outside-in .form-textarea,
-.ui-dialog-outside-in .form-date,
-.ui-dialog-outside-in .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-outside-in .form-text,
-.ui-dialog-outside-in .form-tel,
-.ui-dialog-outside-in .form-email,
-.ui-dialog-outside-in .form-url,
-.ui-dialog-outside-in .form-search,
-.ui-dialog-outside-in .form-number,
-.ui-dialog-outside-in .form-color,
-.ui-dialog-outside-in .form-file,
-.ui-dialog-outside-in .form-textarea,
-.ui-dialog-outside-in .form-date,
-.ui-dialog-outside-in .form-time {
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
-  background-color: #eee;
-  border-color: #333;
-  color: #595959;
-}
-.ui-dialog-outside-in .form-text:focus,
-.ui-dialog-outside-in .form-tel:focus,
-.ui-dialog-outside-in .form-email:focus,
-.ui-dialog-outside-in .form-url:focus,
-.ui-dialog-outside-in .form-search:focus,
-.ui-dialog-outside-in .form-number:focus,
-.ui-dialog-outside-in .form-color:focus,
-.ui-dialog-outside-in .form-file:focus,
-.ui-dialog-outside-in .form-textarea:focus,
-.ui-dialog-outside-in .form-date:focus,
-.ui-dialog-outside-in .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-outside-in input[type="checkbox"],
-.ui-dialog-outside-in .checkbox,
-.ui-dialog-outside-in input[type="radio"],
-.ui-dialog-outside-in .radio {
-  position: static;
-  margin: 0;
-}
-.ui-dialog-outside-in td .checkbox {
-  display: table-cell;
-  line-height: normal;
-  vertical-align: middle;
-}
-.ui-dialog-outside-in .form-checkbox,
-.ui-dialog-outside-in .form-radio {
-  /* Add contrast for dark background. */
-  box-shadow: 0 0 2px 1px #000;
-}
-.ui-dialog-outside-in input[type="radio"] {
-  /* Add full circular radius. */
-  border-radius: 50%;
-}
-.ui-dialog-outside-in .form-actions {
-  text-align: center;
-}
diff --git a/core/modules/outside_in/css/outside_in.table.css b/core/modules/outside_in/css/outside_in.table.css
deleted file mode 100644
index dc6bb89..0000000
--- a/core/modules/outside_in/css/outside_in.table.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * @file
- * Visual styling for tables in the Settings Tray module's off canvas tray.
- */
-
-.ui-dialog-outside-in 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-outside-in 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-outside-in tr th {
-  text-align: right;
-}
-.ui-dialog-outside-in tr,
-.ui-dialog-outside-in tr td {
-  padding: 2px 4px;
-  height: 35px;
-  vertical-align: middle;
-  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-outside-in tr th,
-[dir="rtl"] .ui-dialog-outside-in tr td {
-  text-align: right;
-}
-.ui-dialog-outside-in td a {
-  display: block;
-  max-width: 120px;
-  overflow: hidden;
-}
-.ui-dialog.ui-dialog-outside-in tr td:first-child,
-.ui-dialog.ui-dialog-outside-in tr th:first-child {
-  padding-left: 20px; /* LTR */
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-outside-in tr td:first-child,
-[dir="rtl"] .ui-dialog.ui-dialog-outside-in tr th:first-child {
-  padding-right: 20px;
-}
-.ui-dialog-outside-in tr.odd,
-.ui-dialog-outside-in 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
deleted file mode 100644
index e9d825f..0000000
--- a/core/modules/outside_in/css/outside_in.tabledrag.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * @file
- * Table drag behavior for Settings Tray module.
- *
- * @see tabledrag.js
- */
-
-
-/* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */
-
-.ui-dialog-outside-in body.drag {
-  cursor: move;
-}
-.ui-dialog-outside-in tr.region-title {
-  font-weight: normal;
-}
-.ui-dialog-outside-in tr.region-message {
-  color: #fff;
-}
-.ui-dialog-outside-in tr.region-populated {
-  display: none;
-}
-.ui-dialog-outside-in tr.add-new .tabledrag-changed {
-  display: none;
-}
-.ui-dialog-outside-in .draggable a.tabledrag-handle {
-  background-image: none;
-  margin: 0;
-  margin-left: 0; /* LTR */
-  margin-right: 5px; /* LTR */
-  height: auto;
-  min-width: 20px;
-  padding: 0;
-  overflow: hidden;
-  float: left; /* LTR */
-  text-decoration: none;
-  cursor: move;
-}
-[dir="rtl"] .ui-dialog-outside-in .draggable a.tabledrag-handle {
-  float: right;
-  margin-right: 0;
-  margin-left: 5px;
-}
-.ui-dialog-outside-in 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-outside-in .draggable a.tabledrag-handle:hover .handle,
-.ui-dialog-outside-in .draggable a.tabledrag-handle:focus .handle {
-  background-image: url(../../../misc/icons/787878/move.svg);
-  text-decoration: none;
-}
-
-.ui-dialog-outside-in .touchevents .draggable td {
-  padding: 0 10px;
-}
-.ui-dialog-outside-in .touchevents .draggable .menu-item__link {
-  display: inline-block;
-  padding: 10px 0;
-}
-.ui-dialog-outside-in .touchevents a.tabledrag-handle {
-  height: 44px;
-  width: 40px;
-}
-.ui-dialog-outside-in .touchevents a.tabledrag-handle .handle {
-  background-position: 40% 19px; /* LTR */
-  height: 21px;
-}
-[dir="rtl"] .ui-dialog-outside-in .touch a.tabledrag-handle .handle {
-  background-position: right 40% top 19px;
-}
-.ui-dialog-outside-in .touchevents .draggable.drag a.tabledrag-handle .handle {
-  background-position: 50% -32px;
-}
-.ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
-  text-align: right; /* LTR */
-}
-[dir="rtl"] .ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
-  text-align: left;
-}
-.ui-dialog-outside-in .indentation {
-  float: left; /* LTR */
-  height: auto;
-  margin: 0 3px 0 -10px; /* LTR */
-  padding: 0 0 0 10px; /* LTR */
-  width: auto;
-}
-[dir="rtl"] .ui-dialog-outside-in .indentation {
-  float: right;
-  margin: 0 -10px 0 3px;
-  padding: 0 10px 0 0;
-}
-.ui-dialog-outside-in tr.drag {
-  background-color: #555;
-}
-.ui-dialog-outside-in 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 91c01ab..1980f60 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -3,10 +3,6 @@
  * Visual styling for Settings Tray module.
  */
 
-/* @todo Move this into toolbar when this module is no longer experimental:
- *   https://www.drupal.org/node/2784593.
- */
-
 /* Style the edit mode toolbar and tabs. */
 #toolbar-bar.js-outside-in-edit-mode {
   background-color: #fff;
@@ -69,87 +65,44 @@
   background-color: rgba(0,0,0,0.2);
 }
 
-/* Style the dialog-offcanvas container. */
-.ui-dialog-outside-in {
-  background: #444;
+/* Style the dialog container. */
+.ui-dialog-offcanvas.ui-dialog {
+  padding: 0;
+  border-radius: 0;
+}
+.ui-dialog-offcanvas {
   border: 0 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-outside-in p,
-.ui-dialog-outside-in h1,
-.ui-dialog-outside-in h2,
-.ui-dialog-outside-in h3,
-.ui-dialog-outside-in h4,
-.ui-dialog-outside-in h5,
-.ui-dialog-outside-in h6,
-.ui-dialog-outside-in pre,
-.ui-dialog-outside-in legend,
-.ui-dialog-outside-in cite,
-.ui-dialog-outside-in span,
-.ui-dialog-outside-in summary,
-.ui-dialog-outside-in details,
-.ui-dialog-outside-in .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-outside-in a,
-.ui-dialog-outside-in .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-outside-in a:focus,
-.ui-dialog-outside-in .link:focus,
-.ui-dialog-outside-in a:hover,
-.ui-dialog-outside-in .link:hover {
-  outline: none;
-  color: #46a0f5;
-}
-
 /* Style the tray header. */
-.ui-dialog-outside-in .ui-dialog-titlebar {
-  padding: 20px;
-  background: #2d2d2d;
+.ui-dialog-offcanvas .ui-widget-header,
+.ui-dialog-offcanvas .ui-corner-all {
+  background: #eee;
+  background-image: none;
   border: 0;
-  border-bottom: 1px solid #000;
   border-radius: 0;
-  font-weight: normal;
-  color: #fff;
 }
-.ui-dialog-outside-in .ui-dialog-titlebar-close {
-  background-image: url(../../../misc/icons/bebebe/ex.svg);
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-color: transparent;
+.ui-dialog-offcanvas.ui-dialog .ui-dialog-titlebar {
+  padding: 20px;
+  border: 0;
+  border-bottom: 1px solid #ddd;
+}
+.ui-dialog-offcanvas.ui-dialog .ui-dialog-titlebar-close {
+  background: none;
   border: 0;
   position: absolute;
   right: 20px;
-  -moz-transition: all .5s ease;
-  transition: background .5s ease;
 }
-.ui-dialog-outside-in .ui-dialog-titlebar-close:hover {
-  background-image: url(../../../misc/icons/ffffff/ex.svg);
-}
-[dir="rtl"] .ui-dialog-outside-in .ui-dialog-titlebar-close {
+[dir="rtl"] .ui-dialog-offcanvas.ui-dialog .ui-dialog-titlebar-close {
   left: 20px;
   right: auto;
 }
-.ui-dialog-outside-in .ui-dialog-title {
+.ui-dialog-offcanvas.ui-dialog .ui-dialog-title {
   font-size: 16px;
   margin: 0;
   /* Push the text away from the icon. */
@@ -159,13 +112,13 @@
   max-width: 210px;
   text-align: left; /* LTR */
 }
-[dir="rtl"] .ui-dialog-outside-in .ui-dialog-title {
+[dir="rtl"] .ui-dialog-offcanvas.ui-dialog .ui-dialog-title {
   text-align: right;
   padding-left: 0px;
   padding-right: 0px;
 }
-.ui-dialog-outside-in .ui-dialog-title:before {
-  background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
+.ui-dialog-offcanvas.ui-dialog .ui-dialog-title:before {
+  background: transparent url(/core/misc/icons/bebebe/pencil.svg) no-repeat scroll center center;
   background-size: 100% auto;
   content: '';
   display: block;
@@ -175,152 +128,8 @@
   top: 0;
   width: 20px;
 }
-[dir="rtl"] .ui-dialog-outside-in .ui-dialog-title:before {
+[dir="rtl"] .ui-dialog-offcanvas.ui-dialog .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-outside-in .ui-icon-closethick {
-  visibility: hidden;
-}
-
-/* Groups below here with todos to move to new component need to load last. */
-
-/**
- * Visual styling for buttons in the Settings Tray module's off canvas tray.
- * @todo Move to its own component:
- *   https://www.drupal.org/node/1945262.
- */
-
-.ui-dialog-outside-in button.link {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-}
-.ui-dialog-outside-in .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-outside-in .button:hover,
-.ui-dialog-outside-in .button:focus {
-  background: #888;
-}
-.ui-dialog-outside-in .button--primary {
-  background: #277abd none;
-  border: none;
-  color: #fff;
-  transition: all .5s ease;
-}
-.ui-dialog-outside-in .button--primary:hover,
-.ui-dialog-outside-in .button--primary:focus {
-  background: #2b8bd8;
-}
-
-
-/*
- * Visual styling for dropbutton in the Settings Tray module's off canvas tray.
- * @todo Move to its own component:
- *   https://www.drupal.org/node/1945262.
- */
-
-.ui-dialog-outside-in .dropbutton-widget {
-  background: #7b7b7b none;
-  border: 0;
-  border-radius: 1em;
-  color: #eee;
-  transition: background .5s ease;
-}
-.ui-dialog-outside-in .dropbutton-widget:hover {
-  box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
-}
-.ui-dialog-outside-in .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-outside-in .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-outside-in .dropbutton .dropbutton-action:hover,
-.ui-dialog-outside-in .dropbutton a:hover {
-  background: #6b6b6b none;
-  border-bottom-left-radius: 1em; /* LTR */
-  border-top-left-radius: 1em; /* LTR */
-}
-[dir="rtl"] .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
-[dir="rtl"] .ui-dialog-outside-in .dropbutton a:hover {
-  border-radius: 0;
-  border-bottom-right-radius: 1em;
-  border-top-right-radius: 1em;
-}
-.ui-dialog-outside-in .dropbutton a {
-  padding: 0.1em 0.8em;
-  color: #eee;
-  font-size: 90%;
-  line-height: 1.8;
-  transition: all .5s ease;
-}
-.ui-dialog-outside-in .dropbutton:hover a {
-  color: #fff;
-}
-/* Make an arrow out of borders with some fancy CSS. */
-.ui-dialog-outside-in 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 .ui-dialog-outside-in .dropbutton-toggle .dropbutton-arrow:hover {
-  background: transparent;
-}
-.ui-dialog-outside-in td .dropbutton-multiple {
-  padding-right: 0;
-}
-[dir="rtl"].ui-dialog-outside-in td .dropbutton-multiple {
-  padding-left: 0;
-}
-.ui-dialog-outside-in td .dropbutton-multiple .dropbutton {
-  border-right: 0;
-  border-left: 0;
-}
-.ui-dialog-outside-in 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
deleted file mode 100644
index 3f7e044..0000000
--- a/core/modules/outside_in/css/outside_in.toolbar.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * @file
- * Visual styling for the toolbar when Settings Tray 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 5eddea4..0d9daae 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -5,11 +5,6 @@ drupal.outside_in:
   css:
     component:
       css/outside_in.module.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