diff --git a/core/modules/search/src/Tests/SearchQueryAlterTest.php b/core/modules/search/src/Tests/SearchQueryAlterTest.php
index b1811a2..1eb9437 100644
--- a/core/modules/search/src/Tests/SearchQueryAlterTest.php
+++ b/core/modules/search/src/Tests/SearchQueryAlterTest.php
@@ -47,7 +47,7 @@ function testQueryAlter() {
     // Search for the body keyword 'pizza'.
     $this->drupalPostForm('search/node', array('keys' => 'pizza'), t('Search'));
     // The article should be there but not the page.
-    $this->assertText('article', 'Article is in search results');
-    $this->assertNoText('page', 'Page is not in search results');
+    $this->assertText('test article', 'Article is in search results');
+    $this->assertNoText('test page', 'Page is not in search results');
   }
 }
diff --git a/core/modules/system/css/components/action-links.theme.css b/core/modules/system/css/components/action-links.theme.css
new file mode 100644
index 0000000..82bdb25
--- /dev/null
+++ b/core/modules/system/css/components/action-links.theme.css
@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Styles for link buttons and action links.
+ */
+
+.action-links {
+  list-style: none;
+  padding: 0;
+  margin: 1em 0;
+}
+[dir="rtl"] .action-links {
+  /* This is required to win over specifity of [dir="rtl"] ul */
+  margin-right: 0;
+}
+.action-links li {
+  display: inline-block;
+  margin: 0 0.3em;
+}
+.action-links li:first-child {
+  margin-left: 0; /* LTR */
+}
+[dir="rtl"] .action-links li:first-child {
+  margin-left: 0.3em;
+  margin-right: 0;
+}
+.button-action {
+  display: inline-block;
+  line-height: 160%;
+  padding: 0.2em 0.5em 0.3em;
+  text-decoration: none;
+}
+.button-action:before {
+  content: '+';
+  font-weight: 900;
+  margin-left: -0.1em; /* LTR */
+  padding-right: 0.2em; /* LTR */
+}
+[dir="rtl"] .button-action:before {
+  margin-left: 0;
+  margin-right: -0.1em;
+  padding-left: 0.2em;
+  padding-right: 0;
+}
diff --git a/core/modules/system/css/components/ajax-progress.module.css b/core/modules/system/css/components/ajax-progress.module.css
new file mode 100644
index 0000000..050aab6
--- /dev/null
+++ b/core/modules/system/css/components/ajax-progress.module.css
@@ -0,0 +1,41 @@
+/* Throbber */
+.ajax-progress {
+  display: inline-block;
+  padding: 1px 5px 2px 5px;
+}
+[dir="rtl"] .ajax-progress {
+  float: right;
+}
+.ajax-progress-throbber .throbber {
+  background: transparent url(../../../misc/throbber-active.gif) no-repeat 0px center;
+  display: inline;
+  padding: 1px 5px 2px;
+}
+.ajax-progress-throbber .message {
+  display: inline;
+  padding: 1px 5px 2px;
+}
+tr .ajax-progress-throbber .throbber {
+  margin: 0 2px;
+}
+.ajax-progress-bar {
+  width: 16em;
+}
+
+/* Full screen  throbber */
+.ajax-progress-fullscreen {
+  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
+  left: 49%;
+  position: fixed;
+  top: 48.5%;
+  z-index: 1000;
+  background-color: #232323;
+  background-image: url("../../../misc/loading-small.gif");
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 7px;
+  height: 24px;
+  opacity: 0.9;
+  padding: 4px;
+  width: 24px;
+}
diff --git a/core/modules/system/css/components/align.module.css b/core/modules/system/css/components/align.module.css
new file mode 100644
index 0000000..d92476f
--- /dev/null
+++ b/core/modules/system/css/components/align.module.css
@@ -0,0 +1,30 @@
+/**
+ * Text alignment classes.
+ */
+.text-align-left {
+  text-align: left;
+}
+.text-align-right {
+  text-align: right;
+}
+.text-align-center {
+  text-align: center;
+}
+.text-align-justify {
+  text-align: justify;
+}
+
+/**
+ * Alignment classes (images, videos, blockquotes …).
+ */
+.align-left {
+  float: left;
+}
+.align-right {
+  float: right;
+}
+.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/core/modules/system/css/components/animated-throbber.module.css b/core/modules/system/css/components/animated-throbber.module.css
new file mode 100644
index 0000000..06a6983
--- /dev/null
+++ b/core/modules/system/css/components/animated-throbber.module.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Visual styles for animated throbber.
+ *
+ * @see autocomple.js
+ */
+
+.js input.form-autocomplete {
+  background-image: url(../../../misc/throbber-inactive.png);
+  background-position: 100% center; /* LTR */
+  background-repeat: no-repeat;
+}
+.js[dir="rtl"] input.form-autocomplete {
+  background-position: 0% center;
+}
+.js input.form-autocomplete.ui-autocomplete-loading {
+  background-image: url(../../../misc/throbber-active.gif);
+  background-position: 100% center; /* LTR */
+}
+.js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading {
+  background-position: 0% center;
+}
diff --git a/core/modules/system/css/components/breadcrumbs.theme.css b/core/modules/system/css/components/breadcrumbs.theme.css
new file mode 100644
index 0000000..9f5d409
--- /dev/null
+++ b/core/modules/system/css/components/breadcrumbs.theme.css
@@ -0,0 +1,29 @@
+/**
+ * @file
+ * Styles for breadcrumbs.
+ */
+
+.breadcrumb {
+  padding-bottom: 0.5em;
+}
+.breadcrumb ol {
+  margin: 0;
+  padding: 0;
+}
+[dir="rtl"] .breadcrumb ol {
+  /* This is required to win over specifity of [dir="rtl"] ol */
+  margin-right: 0;
+}
+.breadcrumb li {
+  display: inline;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+/* IE8 does not support :not() and :last-child. */
+.breadcrumb li:before {
+  content: ' \BB ';
+}
+.breadcrumb li:first-child:before {
+  content: none;
+}
diff --git a/core/modules/system/css/components/button.theme.css b/core/modules/system/css/components/button.theme.css
new file mode 100644
index 0000000..af6a753
--- /dev/null
+++ b/core/modules/system/css/components/button.theme.css
@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Visual styles for buttons.
+ */
+
+.button,
+.image-button {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.button:first-child,
+.image-button:first-child {
+  margin-left: 0;
+  margin-right: 0;
+}
diff --git a/core/modules/system/css/components/clearfix.module.css b/core/modules/system/css/components/clearfix.module.css
new file mode 100644
index 0000000..a2b800b
--- /dev/null
+++ b/core/modules/system/css/components/clearfix.module.css
@@ -0,0 +1,13 @@
+/**
+ * Float clearing.
+ *
+ * Based on the micro clearfix hack by Nicolas Gallagher, with the :before
+ * pseudo selector removed to allow normal top margin collapse.
+ *
+ * @see http://nicolasgallagher.com/micro-clearfix-hack
+ */
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
diff --git a/core/modules/system/css/components/collapse-processed.theme.css b/core/modules/system/css/components/collapse-processed.theme.css
new file mode 100644
index 0000000..83b8aed
--- /dev/null
+++ b/core/modules/system/css/components/collapse-processed.theme.css
@@ -0,0 +1,32 @@
+/**
+ * @file
+ * Visual styles for collapse processed.
+ */
+
+.collapse-processed > summary {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.collapse-processed > summary:before {
+  background: url(../../../misc/menu-expanded.png) 0px 100% no-repeat; /* LTR */
+  content: "";
+  float: left;
+  height: 1em;
+  width: 1em;
+}
+[dir="rtl"] .collapse-processed > summary:before {
+  background-position: 100% 100%;
+  float: right;
+}
+.collapse-processed:not([open]) > summary:before {
+  background-position: 25% 35%; /* LTR */
+  -ms-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+[dir="rtl"] .collapse-processed:not([open]) > summary:before {
+  background-position: 75% 35%;
+  -ms-transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
diff --git a/core/modules/system/css/components/container-inline.module.css b/core/modules/system/css/components/container-inline.module.css
new file mode 100644
index 0000000..33fe778
--- /dev/null
+++ b/core/modules/system/css/components/container-inline.module.css
@@ -0,0 +1,11 @@
+/**
+ * Inline items.
+ */
+.container-inline div,
+.container-inline label {
+  display: inline;
+}
+/* Details contents always need to be rendered as block. */
+.container-inline .details-wrapper {
+  display: block;
+}
diff --git a/core/modules/system/css/components/container-inline.theme.css b/core/modules/system/css/components/container-inline.theme.css
new file mode 100644
index 0000000..62520db
--- /dev/null
+++ b/core/modules/system/css/components/container-inline.theme.css
@@ -0,0 +1,32 @@
+/**
+ * @file
+ * Styles for inline items. Rows 7-14 from system.module.css.
+ */
+
+.container-inline div,
+.container-inline label {
+  display: inline;
+}
+/* Details contents always need to be rendered as block. */
+.container-inline .details-wrapper {
+  display: block;
+}
+
+/**
+ * Inline items.
+ */
+.container-inline label:after,
+.container-inline .label:after {
+  content: ':';
+}
+.form-type-radios .container-inline label:after {
+  content: '';
+}
+.form-type-radios .container-inline .form-type-radio {
+  margin: 0 1em;
+}
+.container-inline .form-actions,
+.container-inline.form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+}
diff --git a/core/modules/system/css/components/details.module.css b/core/modules/system/css/components/details.module.css
new file mode 100644
index 0000000..e8e8dd6
--- /dev/null
+++ b/core/modules/system/css/components/details.module.css
@@ -0,0 +1,8 @@
+/**
+ * Collapsible details.
+ *
+ * @see collapse.js
+ */
+.js details:not([open]) .details-wrapper {
+  display: none;
+}
diff --git a/core/modules/system/css/components/details.theme.css b/core/modules/system/css/components/details.theme.css
new file mode 100644
index 0000000..793da94
--- /dev/null
+++ b/core/modules/system/css/components/details.theme.css
@@ -0,0 +1,22 @@
+/**
+ * Collapsible details.
+ *
+ * @see collapse.js
+ * @thanks http://nicolasgallagher.com/css-background-image-hacks/
+ */
+
+details {
+  border: 1px solid #ccc;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+details > .details-wrapper {
+  padding: 0.5em 1.5em;
+}
+/* @todo Regression: The summary of uncollapsible details are no longer
+     vertically aligned with the .details-wrapper in browsers without native
+     details support. */
+summary {
+  cursor: pointer;
+  padding: 0.2em 0.5em;
+}
diff --git a/core/modules/system/css/components/exposed-filters.theme.css b/core/modules/system/css/components/exposed-filters.theme.css
new file mode 100644
index 0000000..99db930
--- /dev/null
+++ b/core/modules/system/css/components/exposed-filters.theme.css
@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Visual styles for exposed filters.
+ */
+
+.exposed-filters .filters {
+  float: left; /* LTR */
+  margin-right: 1em; /* LTR */
+}
+[dir="rtl"] .exposed-filters .filters {
+  float: right;
+  margin-left: 1em;
+  margin-right: 0;
+}
+.exposed-filters .form-item {
+  margin: 0 0 0.1em 0;
+  padding: 0;
+}
+.exposed-filters .form-item label {
+  float: left; /* LTR */
+  font-weight: normal;
+  width: 10em;
+}
+[dir="rtl"] .exposed-filters .form-item label {
+  float: right;
+}
+.exposed-filters .form-select {
+  width: 14em;
+}
+/* Current filters */
+.exposed-filters .current-filters {
+  margin-bottom: 1em;
+}
+.exposed-filters .current-filters .placeholder {
+  font-style: normal;
+  font-weight: bold;
+}
+.exposed-filters .additional-filters {
+  float: left; /* LTR */
+  margin-right: 1em; /* LTR */
+}
+[dir="rtl"] .exposed-filters .additional-filters {
+  float: right;
+  margin-left: 1em;
+  margin-right: 0;
+}
diff --git a/core/modules/system/css/components/field.theme.css b/core/modules/system/css/components/field.theme.css
new file mode 100644
index 0000000..89a16aa
--- /dev/null
+++ b/core/modules/system/css/components/field.theme.css
@@ -0,0 +1,22 @@
+/**
+ * @file
+ * Visual styles for fields.
+ */
+
+.field .field-label {
+  font-weight: bold;
+}
+.field-label-inline .field-label,
+.field-label-inline .field-items {
+  float:left; /*LTR*/
+  margin-right: 0.5em; /*LTR*/
+}
+[dir="rtl"] .field-label-inline .field-label,
+[dir="rtl"] .field-label-inline .field-items {
+  float: right;
+  margin-left: 0.5em;
+  margin-right: 0;
+}
+.field-label-inline .field-label::after {
+  content: ':';
+}
diff --git a/core/modules/system/css/components/fieldgroup.module.css b/core/modules/system/css/components/fieldgroup.module.css
new file mode 100644
index 0000000..e779909
--- /dev/null
+++ b/core/modules/system/css/components/fieldgroup.module.css
@@ -0,0 +1,9 @@
+/**
+ * @file
+ * Fieldgroup border reset.
+ */
+
+.fieldgroup {
+  border-width: 0;
+  padding: 0;
+}
diff --git a/core/modules/system/css/components/form--inline.module.css b/core/modules/system/css/components/form--inline.module.css
new file mode 100644
index 0000000..f67aba6
--- /dev/null
+++ b/core/modules/system/css/components/form--inline.module.css
@@ -0,0 +1,25 @@
+/* Display form elements horizontally. */
+.form--inline .form-item {
+  float: left; /* LTR */
+  margin-right: 0.5em; /* LTR */
+}
+[dir="rtl"] .form--inline .form-item {
+  float: right;
+  margin-right: 0;
+  margin-left: 0.5em;
+}
+.form--inline .form-item-separator {
+  margin-top: 2.3em;
+  margin-right: 1em; /* LTR */
+  margin-left: 0.5em; /* LTR */
+}
+[dir="rtl"] .form--inline .form-item-separator {
+  margin-right: 0.5em;
+  margin-left: 1em;
+}
+.form--inline .form-actions {
+  clear: left; /* LTR */
+}
+[dir="rtl"] .form--inline .form-actions {
+  clear: right;
+}
diff --git a/core/modules/system/css/components/form.theme.css b/core/modules/system/css/components/form.theme.css
new file mode 100644
index 0000000..609f913
--- /dev/null
+++ b/core/modules/system/css/components/form.theme.css
@@ -0,0 +1,87 @@
+/**
+ * @file
+ * Visual styles for form.
+ */
+
+form .field-multiple-table {
+  margin: 0;
+}
+form .field-multiple-table .field-multiple-drag {
+  width: 30px;
+  padding-right: 0; /*LTR*/
+}
+[dir="rtl"] form .field-multiple-table .field-multiple-drag {
+  padding-left: 0;
+}
+form .field-multiple-table .field-multiple-drag .tabledrag-handle {
+  padding-right: .5em; /*LTR*/
+}
+[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
+  padding-left: .5em;
+}
+form .field-add-more-submit {
+  margin: .5em 0 0;
+}
+
+/**
+ * Markup generated by Form API.
+ */
+.form-item,
+.form-actions {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+tr.odd .form-item,
+tr.even .form-item {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.form-composite > .fieldset-wrapper > .description,
+.form-item .description {
+  font-size: 0.85em;
+}
+label.option {
+  display: inline;
+  font-weight: normal;
+}
+.form-composite > legend,
+.label {
+  display:inline;
+  font-size: inherit;
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+}
+.form-checkboxes .form-item,
+.form-radios .form-item {
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
+}
+.form-type-radio .description,
+.form-type-checkbox .description {
+  margin-left: 2.4em;
+}
+.marker {
+  color: #e00;
+}
+.form-required:after {
+  content: '';
+  vertical-align: super;
+  display: inline-block;
+  /* Use a background image to prevent screen readers from announcing the text. */
+  background-image: url(../../../misc/icons/ee0000/required.svg);
+  background-repeat: no-repeat;
+  background-size: 6px 6px;
+  width: 6px;
+  height: 6px;
+  margin: 0 0.3em;
+}
+abbr.tabledrag-changed,
+abbr.ajax-changed {
+  border-bottom: none;
+}
+.form-item input.error,
+.form-item textarea.error,
+.form-item select.error {
+  border: 2px solid red;
+}
diff --git a/core/modules/system/css/components/hidden.module.css b/core/modules/system/css/components/hidden.module.css
new file mode 100644
index 0000000..d291101
--- /dev/null
+++ b/core/modules/system/css/components/hidden.module.css
@@ -0,0 +1,48 @@
+/**
+ * Hide elements from all users.
+ *
+ * Used for elements which should not be immediately displayed to any user. An
+ * example would be collapsible details that will be expanded with a click
+ * from a user. The effect of this class can be toggled with the jQuery show()
+ * and hide() functions.
+ */
+.hidden {
+  display: none;
+}
+
+/**
+ * Hide elements visually, but keep them available for screen readers.
+ *
+ * Used for information required for screen reader users to understand and use
+ * the site where visual display is undesirable. Information provided in this
+ * manner should be kept concise, to avoid unnecessary burden on the user.
+ * "!important" is used to prevent unintentional overrides.
+ */
+.visually-hidden {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  height: 1px;
+  width: 1px;
+  word-wrap: normal;
+}
+
+/**
+ * The .focusable class extends the .visually-hidden class to allow
+ * the element to be focusable when navigated to via the keyboard.
+ */
+.visually-hidden.focusable:active,
+.visually-hidden.focusable:focus {
+  position: static !important;
+  clip: auto;
+  overflow: visible;
+  height: auto;
+  width: auto;
+}
+
+/**
+ * Hide visually and from screen readers, but maintain layout.
+ */
+.invisible {
+  visibility: hidden;
+}
diff --git a/core/modules/system/css/components/icons.theme.css b/core/modules/system/css/components/icons.theme.css
new file mode 100644
index 0000000..6e07ff1
--- /dev/null
+++ b/core/modules/system/css/components/icons.theme.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Visual styles for icons.
+ */
+
+.icon-help {
+  background: url(../../../misc/help.png) 0 50% no-repeat; /* LTR */
+  padding: 1px 0 1px 20px; /* LTR */
+}
+[dir="rtl"] .icon-help {
+  background-position: 100% 50%;
+  padding: 1px 20px 1px 0;
+}
diff --git a/core/modules/system/css/components/inline-form.theme.css b/core/modules/system/css/components/inline-form.theme.css
new file mode 100644
index 0000000..01a1100
--- /dev/null
+++ b/core/modules/system/css/components/inline-form.theme.css
@@ -0,0 +1,29 @@
+/**
+ * @file
+ * Visual styles for inline forms.
+ */
+
+.form--inline .form-item {
+  float: left; /* LTR */
+  margin-right: 0.5em; /* LTR */
+}
+[dir="rtl"] .form--inline .form-item {
+  float: right;
+  margin-right: 0;
+  margin-left: 0.5em;
+}
+.form--inline .form-item-separator {
+  margin-top: 2.3em;
+  margin-right: 1em; /* LTR */
+  margin-left: 0.5em; /* LTR */
+}
+[dir="rtl"] .form--inline .form-item-separator {
+  margin-right: 0.5em;
+  margin-left: 1em;
+}
+.form--inline .form-actions {
+  clear: left; /* LTR */
+}
+[dir="rtl"] .form--inline .form-actions {
+  clear: right;
+}
diff --git a/core/modules/system/css/components/item-list.theme.css b/core/modules/system/css/components/item-list.theme.css
new file mode 100644
index 0000000..49f8172
--- /dev/null
+++ b/core/modules/system/css/components/item-list.theme.css
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * Visual styles for item list.
+ */
+
+.item-list .title {
+  font-weight: bold;
+}
+.item-list ul {
+  margin: 0 0 0.75em 0;
+  padding: 0;
+}
+.item-list ul li {
+  margin: 0 0 0.25em 1.5em; /* LTR */
+  padding: 0;
+}
+[dir="rtl"] .item-list ul li {
+  margin: 0 1.5em 0.25em 0;
+}
diff --git a/core/modules/system/css/components/js.module.css b/core/modules/system/css/components/js.module.css
new file mode 100644
index 0000000..cdbea3d
--- /dev/null
+++ b/core/modules/system/css/components/js.module.css
@@ -0,0 +1,17 @@
+/**
+ * For anything you want to hide on page load when JS is enabled, so
+ * that you can use the JS to control visibility and avoid flicker.
+ */
+.js .js-hide {
+  display: none;
+}
+
+/**
+ * For anything you want to show on page load only when JS is enabled.
+ */
+.js-show {
+  display: none;
+}
+.js .js-show {
+  display: block;
+}
diff --git a/core/modules/system/css/components/link.theme.css b/core/modules/system/css/components/link.theme.css
new file mode 100644
index 0000000..636af77
--- /dev/null
+++ b/core/modules/system/css/components/link.theme.css
@@ -0,0 +1,11 @@
+button.link {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  font-size: 1em;
+}
+label button.link {
+  font-weight: bold;
+}
diff --git a/core/modules/system/css/components/links.theme.css b/core/modules/system/css/components/links.theme.css
new file mode 100644
index 0000000..cfafd96
--- /dev/null
+++ b/core/modules/system/css/components/links.theme.css
@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Visual styles for links.
+ */
+
+ul.inline,
+ul.links.inline {
+  display: inline;
+  padding-left: 0;
+}
+ul.inline li {
+  display: inline;
+  list-style-type: none;
+  padding: 0 0.5em;
+}
+ul.links a.is-active {
+  color: #000;
+}
diff --git a/core/modules/system/css/components/menu.theme.css b/core/modules/system/css/components/menu.theme.css
new file mode 100644
index 0000000..3eee545
--- /dev/null
+++ b/core/modules/system/css/components/menu.theme.css
@@ -0,0 +1,34 @@
+/**
+ * @file
+ * Visual styles for menu.
+ */
+
+ul.menu {
+  list-style: none outside;
+  margin-left: 1em; /* LTR */
+  padding: 0;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] ul.menu {
+  margin-left: 0;
+  margin-right: 1em;
+  text-align: right;
+}
+.menu .expanded {
+  list-style-image: url(../../../misc/menu-expanded.png);
+  list-style-type: circle;
+}
+.menu .collapsed {
+  list-style-image: url(../../../misc/menu-collapsed.png); /* LTR */
+  list-style-type: disc;
+}
+[dir="rtl"] .menu .collapsed {
+  list-style-image: url(../../../misc/menu-collapsed-rtl.png);
+}
+ul.menu li {
+  padding-top: 0.2em;
+  margin: 0;
+}
+ul.menu a.active {
+  color: #000;
+}
diff --git a/core/modules/system/css/components/messages.theme.css b/core/modules/system/css/components/messages.theme.css
new file mode 100644
index 0000000..b820c28
--- /dev/null
+++ b/core/modules/system/css/components/messages.theme.css
@@ -0,0 +1,72 @@
+/**
+ * @file
+ * Styles for system messages.
+ */
+
+.messages {
+  background: no-repeat 10px 17px;  /* LTR */
+  border: 1px solid;
+  border-width: 1px 1px 1px 0;  /* LTR */
+  border-radius: 2px;
+  padding: 15px 20px 15px 35px; /* LTR */
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+[dir="rtl"] .messages {
+  border-width: 1px 0 1px 1px;
+  background-position: right 10px top 17px;
+  padding-left: 20px;
+  padding-right: 35px;
+  text-align: right;
+}
+.messages + .messages {
+  margin-top: 1.538em;
+}
+.messages__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.messages__item + .messages__item {
+  margin-top: 0.769em;
+}
+/* See .color-success in Seven's colors.css */
+.messages--status {
+  color: #325e1c;
+  background-color: #f3faef;
+  border-color: #c9e1bd #c9e1bd #c9e1bd transparent;  /* LTR */
+  background-image: url(../../../misc/icons/73b355/check.svg);
+  box-shadow: -8px 0 0 #77b259; /* LTR */
+}
+[dir="rtl"] .messages--status {
+  border-color: #c9e1bd transparent #c9e1bd #c9e1bd;
+  box-shadow: 8px 0 0 #77b259;
+  margin-left: 0;
+}
+/* See .color-warning in Seven's colors.css */
+.messages--warning {
+  background-color: #fdf8ed;
+  background-image: url(../../../misc/icons/e29700/warning.svg);
+  border-color: #f4daa6 #f4daa6 #f4daa6 transparent;  /* LTR */
+  color: #734c00;
+  box-shadow: -8px 0 0 #e09600; /* LTR */
+}
+[dir="rtl"] .messages--warning {
+  border-color: #f4daa6 transparent #f4daa6 #f4daa6;
+  box-shadow: 8px 0 0 #e09600;
+}
+/* See .color-error in Seven's colors.css */
+.messages--error {
+  background-color: #fcf4f2;
+  color: #a51b00;
+  background-image: url(../../../misc/icons/ea2800/error.svg);
+  border-color: #f9c9bf #f9c9bf #f9c9bf transparent;  /* LTR */
+  box-shadow: -8px 0 0 #e62600; /* LTR */
+}
+[dir="rtl"] .messages--error {
+  border-color: #f9c9bf transparent #f9c9bf #f9c9bf;
+  box-shadow: 8px 0 0 #e62600;
+}
+.messages--error p.error {
+  color: #a51b00;
+}
diff --git a/core/modules/system/css/components/more-help.theme.css b/core/modules/system/css/components/more-help.theme.css
new file mode 100644
index 0000000..5496804
--- /dev/null
+++ b/core/modules/system/css/components/more-help.theme.css
@@ -0,0 +1,19 @@
+/**
+ * @file
+ * More help link style.
+ */
+
+.more-help-link {
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .more-help-link {
+  text-align: left;
+}
+.more-help-link a {
+  background: url(../../../misc/help.png) 0 50% no-repeat; /* LTR */
+  padding: 1px 0 1px 20px; /* LTR */
+}
+[dir="rtl"] .more-help-link a {
+  background-position: 100% 50%;
+  padding: 1px 20px 1px 0;
+}
diff --git a/core/modules/system/css/components/more-link.theme.css b/core/modules/system/css/components/more-link.theme.css
new file mode 100644
index 0000000..03ab6e1
--- /dev/null
+++ b/core/modules/system/css/components/more-link.theme.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Markup generated by #type 'more_link'.
+ */
+
+.more-link {
+  display: block;
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .more-link {
+  text-align: left;
+}
+
diff --git a/core/modules/system/css/components/node.theme.css b/core/modules/system/css/components/node.theme.css
new file mode 100644
index 0000000..2142cdb
--- /dev/null
+++ b/core/modules/system/css/components/node.theme.css
@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Visual styles for node-unpublished
+ */
+
+.node--unpublished {
+  background-color: #fff4f4;
+}
diff --git a/core/modules/system/css/components/nowrap.module.css b/core/modules/system/css/components/nowrap.module.css
new file mode 100644
index 0000000..4950d3e
--- /dev/null
+++ b/core/modules/system/css/components/nowrap.module.css
@@ -0,0 +1,6 @@
+/**
+ * Prevent text wrapping.
+ */
+.nowrap {
+  white-space: nowrap;
+}
diff --git a/core/modules/system/css/components/pager.theme.css b/core/modules/system/css/components/pager.theme.css
new file mode 100644
index 0000000..5441db4
--- /dev/null
+++ b/core/modules/system/css/components/pager.theme.css
@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Visual styles for pager.
+ */
+
+.pager__items {
+  clear: both;
+  text-align: center;
+}
+.pager__item {
+  background-image: none;
+  display: inline;
+  list-style-type: none;
+  padding: 0.5em;
+}
+.pager__item.is-active {
+  font-weight: bold;
+}
diff --git a/core/modules/system/css/components/position-container.module.css b/core/modules/system/css/components/position-container.module.css
new file mode 100644
index 0000000..a1bc293
--- /dev/null
+++ b/core/modules/system/css/components/position-container.module.css
@@ -0,0 +1,6 @@
+/*
+ * Contain positioned elements.
+ */
+.position-container {
+  position: relative;
+}
diff --git a/core/modules/system/css/components/progress.module.css b/core/modules/system/css/components/progress.module.css
new file mode 100644
index 0000000..d845c82
--- /dev/null
+++ b/core/modules/system/css/components/progress.module.css
@@ -0,0 +1,48 @@
+/**
+ * Progress behavior.
+ *
+ * @see progress.js
+ */
+.progress {
+  position: relative;
+}
+.progress__track {
+  background-color: #fff;
+  border: 1px solid;
+  margin-top: 5px;
+  max-width: 100%;
+  min-width: 100px;
+  height: 16px;
+}
+.progress__bar {
+  background-color: #000;
+  height: 1.5em;
+  min-width: 3%;
+  max-width: 100%;
+}
+.progress__description,
+.progress__percentage {
+  color: #555;
+  overflow: hidden;
+  font-size: .875em;
+  margin-top: 0.2em;
+}
+.progress__description {
+  float: left; /* LTR */
+}
+[dir="rtl"] .progress__description {
+  float: right;
+}
+.progress__percentage {
+  float: right; /* LTR */
+}
+[dir="rtl"] .progress__percentage {
+  float: left;
+}
+.progress--small .progress__track {
+  height: 7px;
+}
+.progress--small .progress__bar {
+  height: 7px;
+  background-size: 20px 20px;
+}
diff --git a/core/modules/system/css/components/progress.theme.css b/core/modules/system/css/components/progress.theme.css
new file mode 100644
index 0000000..881d965
--- /dev/null
+++ b/core/modules/system/css/components/progress.theme.css
@@ -0,0 +1,115 @@
+/**
+ * @file
+ * Visual styles for progress bar.
+ *
+ * from system.theme.css
+ * @see progress.js
+ */
+
+.progress__track {
+  border-color: #b3b3b3;
+  border-radius: 10em;
+  background-color: #f2f1eb;
+  background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0);
+  background-image:         linear-gradient(#e7e7df, #f0f0f0);
+  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16);
+}
+.progress__bar {
+  border: 1px #07629a solid;
+  background: #057ec9;
+  background-image:
+    -webkit-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
+    -webkit-linear-gradient( left top,
+      #0094f0 0%,
+      #0094f0 25%,
+      #007ecc 25%,
+      #007ecc 50%,
+      #0094f0 50%,
+      #0094f0 75%,
+      #0094f0 100% );
+  background-image:
+    -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), -webkit-linear-gradient(left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
+  background-image:
+    linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
+    linear-gradient( to right bottom,
+      #0094f0 0%,
+      #0094f0 25%,
+      #007ecc 25%,
+      #007ecc 50%,
+      #0094f0 50%,
+      #0094f0 75%,
+      #0094f0 100% );
+  background-size: 40px 40px;
+  margin-top: -1px;
+  margin-left: -1px;
+  padding: 0 1px;
+  height: 16px;
+  border-radius: 10em;
+  -webkit-animation: animate-stripes 3s linear infinite;
+  -moz-animation: animate-stripes 3s linear infinite;
+  -webkit-transition: width 0.5s ease-out;
+  transition: width 0.5s ease-out;
+}
+
+/**
+ * Progress bar animations.
+ */
+@-webkit-keyframes animate-stripes {
+  0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
+}
+@-ms-keyframes animate-stripes {
+  0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
+}
+@keyframes animate-stripes {
+  0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
+}
+
+/**
+ * Progress behavior.
+ *
+ * from system.module.css
+ * @see progress.js
+ */
+.progress {
+  position: relative;
+}
+.progress__track {
+  background-color: #fff;
+  border: 1px solid;
+  margin-top: 5px;
+  max-width: 100%;
+  min-width: 100px;
+  height: 16px;
+}
+.progress__bar {
+  background-color: #000;
+  height: 1.5em;
+  min-width: 3%;
+  max-width: 100%;
+}
+.progress__description,
+.progress__percentage {
+  color: #555;
+  overflow: hidden;
+  font-size: .875em;
+  margin-top: 0.2em;
+}
+.progress__description {
+  float: left; /* LTR */
+}
+[dir="rtl"] .progress__description {
+  float: right;
+}
+.progress__percentage {
+  float: right; /* LTR */
+}
+[dir="rtl"] .progress__percentage {
+  float: left;
+}
+.progress--small .progress__track {
+  height: 7px;
+}
+.progress--small .progress__bar {
+  height: 7px;
+  background-size: 20px 20px;
+}
diff --git a/core/modules/system/css/components/reset-appearance.module.css b/core/modules/system/css/components/reset-appearance.module.css
new file mode 100644
index 0000000..d76a199
--- /dev/null
+++ b/core/modules/system/css/components/reset-appearance.module.css
@@ -0,0 +1,13 @@
+/*
+ * 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/css/components/resize.module.css b/core/modules/system/css/components/resize.module.css
new file mode 100644
index 0000000..7f61e6d
--- /dev/null
+++ b/core/modules/system/css/components/resize.module.css
@@ -0,0 +1,25 @@
+/**
+ * Resizable textareas.
+ */
+.form-textarea-wrapper textarea {
+  display: block;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.resize-none {
+  resize: none;
+}
+.resize-vertical {
+  resize: vertical;
+  min-height: 2em;
+}
+.resize-horizontal {
+  resize: horizontal;
+  max-width: 100%;
+}
+.resize-both {
+  resize: both;
+  max-width: 100%;
+  min-height: 2em;
+}
diff --git a/core/modules/system/css/components/sticky-header.css b/core/modules/system/css/components/sticky-header.css
new file mode 100644
index 0000000..d777e4f
--- /dev/null
+++ b/core/modules/system/css/components/sticky-header.css
@@ -0,0 +1,11 @@
+/**
+ * TableHeader behavior.
+ *
+ * @see tableheader.js
+ */
+table.sticky-header {
+  background-color: #fff;
+  margin-top: 0;
+  z-index: 500;
+  top: 0;
+}
diff --git a/core/modules/system/css/components/table-select.theme.css b/core/modules/system/css/components/table-select.theme.css
new file mode 100644
index 0000000..882707a
--- /dev/null
+++ b/core/modules/system/css/components/table-select.theme.css
@@ -0,0 +1,14 @@
+/**
+ * @file
+ * TableSelect behavior.
+ *
+ * @see tableselect.js
+ */
+
+tr.selected td {
+  background: #ffc;
+}
+td.checkbox,
+th.checkbox {
+  text-align: center;
+}
diff --git a/core/modules/system/css/components/tabledrag.module.css b/core/modules/system/css/components/tabledrag.module.css
new file mode 100644
index 0000000..f5596ef
--- /dev/null
+++ b/core/modules/system/css/components/tabledrag.module.css
@@ -0,0 +1,78 @@
+
+/**
+ * TableDrag behavior.
+ *
+ * @see tabledrag.js
+ */
+body.drag {
+  cursor: move;
+}
+tr.region-title {
+  font-weight: bold;
+}
+tr.region-message {
+  color: #999;
+}
+tr.region-populated {
+  display: none;
+}
+tr.add-new .tabledrag-changed {
+  display: none;
+}
+.draggable a.tabledrag-handle {
+  cursor: move;
+  float: left; /* LTR */
+  height: 1.7em;
+  margin-left: -1em; /* LTR */
+  overflow: hidden;
+  text-decoration: none;
+}
+[dir="rtl"] .draggable a.tabledrag-handle {
+  float: right;
+  margin-right: -1em;
+  margin-left: 0;
+}
+a.tabledrag-handle:hover {
+  text-decoration: none;
+}
+a.tabledrag-handle .handle {
+  background: url(../../../misc/icons/787878/move.svg) no-repeat 6px 7px;
+  height: 14px;
+  margin: -0.4em 0.5em 0;
+  padding: 0.42em 0.5em;
+  width: 14px;
+}
+a.tabledrag-handle:hover .handle,
+a.tabledrag-handle:focus .handle {
+  background-image: url(../../../misc/icons/000000/move.svg);
+}
+.touch .draggable td {
+  padding: 0 10px;
+}
+.touch .draggable .menu-item__link {
+  display: inline-block;
+  padding: 10px 0;
+}
+.touch a.tabledrag-handle {
+  height: 44px;
+  width: 40px;
+}
+.touch a.tabledrag-handle .handle {
+  background-position: 40% 19px;
+  height: 21px;
+}
+.touch .draggable.drag a.tabledrag-handle .handle {
+  background-position: 50% -32px;
+}
+.indentation {
+  float: left; /* LTR */
+  height: 1.7em;
+  margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
+  padding: 0.42em 0 0.42em 0.6em; /* LTR */
+  width: 20px;
+}
+[dir="rtl"] .indentation {
+  float: right;
+  margin: -0.4em -0.4em -0.4em 0.2em;
+  padding: 0.42em 0.6em 0.42em 0;
+}
diff --git a/core/modules/system/css/components/tabledrag.theme.css b/core/modules/system/css/components/tabledrag.theme.css
new file mode 100644
index 0000000..34c62fa
--- /dev/null
+++ b/core/modules/system/css/components/tabledrag.theme.css
@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Visual styles for table drag.
+ */
+
+/**
+ * TableDrag behavior.
+ *
+ * @see tabledrag.js
+ */
+
+body.drag {
+  cursor: move;
+}
+tr.region-title {
+  font-weight: bold;
+}
+tr.region-message {
+  color: #999;
+}
+tr.region-populated {
+  display: none;
+}
+tr.add-new .tabledrag-changed {
+  display: none;
+}
+.draggable a.tabledrag-handle {
+  cursor: move;
+  float: left; /* LTR */
+  height: 1.7em;
+  margin-left: -1em; /* LTR */
+  overflow: hidden;
+  text-decoration: none;
+}
+[dir="rtl"] .draggable a.tabledrag-handle {
+  float: right;
+  margin-right: -1em;
+  margin-left: 0;
+}
+a.tabledrag-handle:hover {
+  text-decoration: none;
+}
+a.tabledrag-handle .handle {
+  background: url(../../../misc/icons/787878/move.svg) no-repeat 6px 7px;
+  height: 14px;
+  margin: -0.4em 0.5em 0;
+  padding: 0.42em 0.5em;
+  width: 14px;
+}
+a.tabledrag-handle:hover .handle,
+a.tabledrag-handle:focus .handle {
+  background-image: url(../../../misc/icons/000000/move.svg);
+}
+.touch .draggable td {
+  padding: 0 10px;
+}
+.touch .draggable .menu-item__link {
+  display: inline-block;
+  padding: 10px 0;
+}
+.touch a.tabledrag-handle {
+  height: 44px;
+  width: 40px;
+}
+.touch a.tabledrag-handle .handle {
+  background-position: 40% 19px;
+  height: 21px;
+}
+.touch .draggable.drag a.tabledrag-handle .handle {
+  background-position: 50% -32px;
+}
+div.indentation {
+  float: left; /* LTR */
+  height: 1.7em;
+  margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
+  padding: 0.42em 0 0.42em 0.6em; /* LTR */
+  width: 20px;
+}
+[dir="rtl"] div.indentation {
+  float: right;
+  margin: -0.4em -0.4em -0.4em 0.2em;
+  padding: 0.42em 0.6em 0.42em 0;
+}
+.tabledrag-toggle-weight-wrapper {
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .tabledrag-toggle-weight-wrapper {
+  text-align: left;
+}
+
+/**
+ * TableDrag behavior.
+ *
+ * @see tabledrag.js
+ */
+tr.drag {
+  background-color: #fffff0;
+}
+tr.drag-previous {
+  background-color: #ffd;
+}
+body div.tabledrag-changed-warning {
+  margin-bottom: 0.5em;
+}
diff --git a/core/modules/system/css/components/tableheader.theme.css b/core/modules/system/css/components/tableheader.theme.css
new file mode 100644
index 0000000..a759565
--- /dev/null
+++ b/core/modules/system/css/components/tableheader.theme.css
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * TableHeader behavior.
+ *
+ * @see tableheader.js
+ */
+
+table.sticky-header {
+  background-color: #fff;
+  margin-top: 0;
+  z-index: 500;
+  top: 0;
+}
diff --git a/core/modules/system/css/components/tablesort.theme.css b/core/modules/system/css/components/tablesort.theme.css
new file mode 100644
index 0000000..edbf5ce
--- /dev/null
+++ b/core/modules/system/css/components/tablesort.theme.css
@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Markup generated by tablesort-indicator.html.twig.
+ */
+
+th.active img {
+  display: inline;
+}
+td.active {
+  background-color: #ddd;
+}
diff --git a/core/modules/system/css/components/tabs.theme.css b/core/modules/system/css/components/tabs.theme.css
new file mode 100644
index 0000000..23ebb76
--- /dev/null
+++ b/core/modules/system/css/components/tabs.theme.css
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Visual styles for tabs.
+ */
+
+div.tabs {
+  margin: 1em 0;
+}
+ul.tabs {
+  list-style: none;
+  margin: 0 0 0.5em;
+  padding: 0;
+}
+.tabs > li {
+  display: inline-block;
+  margin-right: 0.3em; /* LTR */
+}
+[dir="rtl"] .tabs > li {
+  margin-left: 0.3em;
+  margin-right: 0;
+}
+.tabs a {
+  display: block;
+  padding: 0.2em 1em;
+  text-decoration: none;
+}
+.tabs a.active {
+  background-color: #eee;
+}
+.tabs a:focus,
+.tabs a:hover {
+  background-color: #f5f5f5;
+}
diff --git a/core/modules/system/css/components/textarea.theme.css b/core/modules/system/css/components/textarea.theme.css
new file mode 100644
index 0000000..b6b6d9f
--- /dev/null
+++ b/core/modules/system/css/components/textarea.theme.css
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Visual styles for resizeable textarea.
+ */
+
+.form-textarea-wrapper textarea {
+  display: block;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+.resize-none {
+  resize: none;
+}
+.resize-vertical {
+  resize: vertical;
+  min-height: 2em;
+}
+.resize-horizontal {
+  resize: horizontal;
+  max-width: 100%;
+}
+.resize-both {
+  resize: both;
+  max-width: 100%;
+  min-height: 2em;
+}
diff --git a/core/modules/system/css/components/throbber.theme.css b/core/modules/system/css/components/throbber.theme.css
new file mode 100644
index 0000000..063e8ce
--- /dev/null
+++ b/core/modules/system/css/components/throbber.theme.css
@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Visual styles for throbbers.
+ */
+
+.ajax-progress {
+  display: inline-block;
+  padding: 1px 5px 2px 5px;
+}
+[dir="rtl"] .ajax-progress {
+  float: right;
+}
+.ajax-progress-throbber .throbber {
+  background: transparent url(../../../misc/throbber-active.gif) no-repeat 0px center;
+  display: inline;
+  padding: 1px 5px 2px;
+}
+.ajax-progress-throbber .message {
+  display: inline;
+  padding: 1px 5px 2px;
+}
+tr .ajax-progress-throbber .throbber {
+  margin: 0 2px;
+}
+.ajax-progress-bar {
+  width: 16em;
+}
+
+/* Full screen  throbber */
+.ajax-progress-fullscreen {
+  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
+  left: 49%;
+  position: fixed;
+  top: 48.5%;
+  z-index: 1000;
+  background-color: #232323;
+  background-image: url("../../../misc/loading-small.gif");
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 7px;
+  height: 24px;
+  opacity: 0.9;
+  padding: 4px;
+  width: 24px;
+}
+
diff --git a/core/modules/system/css/components/tree-child.theme.css b/core/modules/system/css/components/tree-child.theme.css
new file mode 100644
index 0000000..bc41ade
--- /dev/null
+++ b/core/modules/system/css/components/tree-child.theme.css
@@ -0,0 +1,18 @@
+/**
+ * @file
+ * Visual styles for tree child.
+ */
+
+div.tree-child {
+  background: url(../../../misc/tree.png) no-repeat 11px center; /* LTR */
+}
+div.tree-child-last {
+  background: url(../../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */
+}
+[dir="rtl"] div.tree-child,
+[dir="rtl"] div.tree-child-last {
+  background-position: -65px center;
+}
+div.tree-child-horizontal {
+  background: url(../../../misc/tree.png) no-repeat -11px center;
+}
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
deleted file mode 100644
index b38c5e5..0000000
--- a/core/modules/system/css/system.module.css
+++ /dev/null
@@ -1,448 +0,0 @@
-/**
- * @file
- * Generic theme-independent base styles.
- */
-
-/**
- * Autocomplete.
- *
- * @see autocomplete.js
- */
-
-/* Animated throbber */
-.js input.form-autocomplete {
-  background-image: url(../../../misc/throbber-inactive.png);
-  background-position: 100% center; /* LTR */
-  background-repeat: no-repeat;
-}
-.js[dir="rtl"] input.form-autocomplete {
-  background-position: 0% center;
-}
-.js input.form-autocomplete.ui-autocomplete-loading {
-  background-image: url(../../../misc/throbber-active.gif);
-  background-position: 100% center; /* LTR */
-}
-.js[dir="rtl"] input.form-autocomplete.ui-autocomplete-loading {
-  background-position: 0% center;
-}
-
-/**
- * Unboxed fieldsets for grouping form elements.
- */
-.fieldgroup {
-  border-width: 0;
-  padding: 0;
-}
-
-/**
- * Collapsible details.
- *
- * @see collapse.js
- */
-.js details:not([open]) .details-wrapper {
-  display: none;
-}
-
-/**
- * Resizable textareas.
- */
-.form-textarea-wrapper textarea {
-  display: block;
-  margin: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-.resize-none {
-  resize: none;
-}
-.resize-vertical {
-  resize: vertical;
-  min-height: 2em;
-}
-.resize-horizontal {
-  resize: horizontal;
-  max-width: 100%;
-}
-.resize-both {
-  resize: both;
-  max-width: 100%;
-  min-height: 2em;
-}
-
-/**
- * TableDrag behavior.
- *
- * @see tabledrag.js
- */
-body.drag {
-  cursor: move;
-}
-tr.region-title {
-  font-weight: bold;
-}
-tr.region-message {
-  color: #999;
-}
-tr.region-populated {
-  display: none;
-}
-tr.add-new .tabledrag-changed {
-  display: none;
-}
-.draggable a.tabledrag-handle {
-  cursor: move;
-  float: left; /* LTR */
-  height: 1.7em;
-  margin-left: -1em; /* LTR */
-  overflow: hidden;
-  text-decoration: none;
-}
-[dir="rtl"] .draggable a.tabledrag-handle {
-  float: right;
-  margin-right: -1em;
-  margin-left: 0;
-}
-a.tabledrag-handle:hover {
-  text-decoration: none;
-}
-a.tabledrag-handle .handle {
-  background: url(../../../misc/icons/787878/move.svg) no-repeat 6px 7px;
-  height: 14px;
-  margin: -0.4em 0.5em 0;
-  padding: 0.42em 0.5em;
-  width: 14px;
-}
-a.tabledrag-handle:hover .handle,
-a.tabledrag-handle:focus .handle {
-  background-image: url(../../../misc/icons/000000/move.svg);
-}
-.touch .draggable td {
-  padding: 0 10px;
-}
-.touch .draggable .menu-item__link {
-  display: inline-block;
-  padding: 10px 0;
-}
-.touch a.tabledrag-handle {
-  height: 44px;
-  width: 40px;
-}
-.touch a.tabledrag-handle .handle {
-  background-position: 40% 19px;
-  height: 21px;
-}
-.touch .draggable.drag a.tabledrag-handle .handle {
-  background-position: 50% -32px;
-}
-.indentation {
-  float: left; /* LTR */
-  height: 1.7em;
-  margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
-  padding: 0.42em 0 0.42em 0.6em; /* LTR */
-  width: 20px;
-}
-[dir="rtl"] .indentation {
-  float: right;
-  margin: -0.4em -0.4em -0.4em 0.2em;
-  padding: 0.42em 0.6em 0.42em 0;
-}
-div.tree-child {
-  background: url(../../../misc/tree.png) no-repeat 11px center; /* LTR */
-}
-div.tree-child-last {
-  background: url(../../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */
-}
-[dir="rtl"] div.tree-child,
-[dir="rtl"] div.tree-child-last {
-  background-position: -65px center;
-}
-div.tree-child-horizontal {
-  background: url(../../../misc/tree.png) no-repeat -11px center;
-}
-.tabledrag-toggle-weight-wrapper {
-  text-align: right; /* LTR */
-}
-[dir="rtl"] .tabledrag-toggle-weight-wrapper {
-  text-align: left;
-}
-
-/**
- * TableHeader behavior.
- *
- * @see tableheader.js
- */
-table.sticky-header {
-  background-color: #fff;
-  margin-top: 0;
-  z-index: 500;
-  top: 0;
-}
-
-/**
- * Progress behavior.
- *
- * @see progress.js
- */
-.progress {
-  position: relative;
-}
-.progress__track {
-  background-color: #fff;
-  border: 1px solid;
-  margin-top: 5px;
-  max-width: 100%;
-  min-width: 100px;
-  height: 16px;
-}
-.progress__bar {
-  background-color: #000;
-  height: 1.5em;
-  min-width: 3%;
-  max-width: 100%;
-}
-.progress__description,
-.progress__percentage {
-  color: #555;
-  overflow: hidden;
-  font-size: .875em;
-  margin-top: 0.2em;
-}
-.progress__description {
-  float: left; /* LTR */
-}
-[dir="rtl"] .progress__description {
-  float: right;
-}
-.progress__percentage {
-  float: right; /* LTR */
-}
-[dir="rtl"] .progress__percentage {
-  float: left;
-}
-.progress--small .progress__track {
-  height: 7px;
-}
-.progress--small .progress__bar {
-  height: 7px;
-  background-size: 20px 20px;
-}
-
-/* Throbber */
-.ajax-progress {
-  display: inline-block;
-  padding: 1px 5px 2px 5px;
-}
-[dir="rtl"] .ajax-progress {
-  float: right;
-}
-.ajax-progress-throbber .throbber {
-  background: transparent url(../../../misc/throbber-active.gif) no-repeat 0px center;
-  display: inline;
-  padding: 1px 5px 2px;
-}
-.ajax-progress-throbber .message {
-  display: inline;
-  padding: 1px 5px 2px;
-}
-tr .ajax-progress-throbber .throbber {
-  margin: 0 2px;
-}
-.ajax-progress-bar {
-  width: 16em;
-}
-
-/* Full screen  throbber */
-.ajax-progress-fullscreen {
-  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
-  left: 49%;
-  position: fixed;
-  top: 48.5%;
-  z-index: 1000;
-  background-color: #232323;
-  background-image: url("../../../misc/loading-small.gif");
-  background-position: center center;
-  background-repeat: no-repeat;
-  border-radius: 7px;
-  height: 24px;
-  opacity: 0.9;
-  padding: 4px;
-  width: 24px;
-}
-
-/**
- * Inline items.
- */
-.container-inline div,
-.container-inline label {
-  display: inline;
-}
-/* Details contents always need to be rendered as block. */
-.container-inline .details-wrapper {
-  display: block;
-}
-/* Display form elements horizontally. */
-.form--inline .form-item {
-  float: left; /* LTR */
-  margin-right: 0.5em; /* LTR */
-}
-[dir="rtl"] .form--inline .form-item {
-  float: right;
-  margin-right: 0;
-  margin-left: 0.5em;
-}
-.form--inline .form-item-separator {
-  margin-top: 2.3em;
-  margin-right: 1em; /* LTR */
-  margin-left: 0.5em; /* LTR */
-}
-[dir="rtl"] .form--inline .form-item-separator {
-  margin-right: 0.5em;
-  margin-left: 1em;
-}
-.form--inline .form-actions {
-  clear: left; /* LTR */
-}
-[dir="rtl"] .form--inline .form-actions {
-  clear: right;
-}
-
-
-/**
- * Prevent text wrapping.
- */
-.nowrap {
-  white-space: nowrap;
-}
-
-/**
- * For anything you want to hide on page load when JS is enabled, so
- * that you can use the JS to control visibility and avoid flicker.
- */
-.js .js-hide {
-  display: none;
-}
-
-/**
- * For anything you want to show on page load only when JS is enabled.
- */
-.js-show {
-  display: none;
-}
-.js .js-show {
-  display: block;
-}
-
-/**
- * Hide elements from all users.
- *
- * Used for elements which should not be immediately displayed to any user. An
- * example would be collapsible details that will be expanded with a click
- * from a user. The effect of this class can be toggled with the jQuery show()
- * and hide() functions.
- */
-.hidden {
-  display: none;
-}
-
-/**
- * Hide elements visually, but keep them available for screen readers.
- *
- * Used for information required for screen reader users to understand and use
- * the site where visual display is undesirable. Information provided in this
- * manner should be kept concise, to avoid unnecessary burden on the user.
- * "!important" is used to prevent unintentional overrides.
- */
-.visually-hidden {
-  position: absolute !important;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  height: 1px;
-  width: 1px;
-  word-wrap: normal;
-}
-
-/**
- * The .focusable class extends the .visually-hidden class to allow
- * the element to be focusable when navigated to via the keyboard.
- */
-.visually-hidden.focusable:active,
-.visually-hidden.focusable:focus {
-  position: static !important;
-  clip: auto;
-  overflow: visible;
-  height: auto;
-  width: auto;
-}
-
-/**
- * Hide visually and from screen readers, but maintain layout.
- */
-.invisible {
-  visibility: hidden;
-}
-
-/**
- * Float clearing.
- *
- * Based on the micro clearfix hack by Nicolas Gallagher, with the :before
- * pseudo selector removed to allow normal top margin collapse.
- *
- * @see http://nicolasgallagher.com/micro-clearfix-hack
- */
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-/**
- * Text alignment classes.
- */
-.text-align-left {
-  text-align: left;
-}
-.text-align-right {
-  text-align: right;
-}
-.text-align-center {
-  text-align: center;
-}
-.text-align-justify {
-  text-align: justify;
-}
-
-/**
- * Alignment classes (images, videos, blockquotes …).
- */
-.align-left {
-  float: left;
-}
-.align-right {
-  float: right;
-}
-.align-center {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/*
- * 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;
-}
-
-/*
- * Contain positioned elements.
- */
-.position-container {
-  position: relative;
-}
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
deleted file mode 100644
index c20d6ca..0000000
--- a/core/modules/system/css/system.theme.css
+++ /dev/null
@@ -1,592 +0,0 @@
-/**
- * @file
- * Basic styling for common markup.
- */
-
-/**
- * Publishing status.
- */
-.node--unpublished {
-  background-color: #fff4f4;
-}
-
-/**
- * Markup generated by tablesort-indicator.html.twig.
- */
-th.is-active img {
-  display: inline;
-}
-td.is-active {
-  background-color: #ddd;
-}
-
-/**
- * Markup generated by item-list.html.twig.
- */
-.item-list .title {
-  font-weight: bold;
-}
-.item-list ul {
-  margin: 0 0 0.75em 0;
-  padding: 0;
-}
-.item-list ul li {
-  margin: 0 0 0.25em 1.5em; /* LTR */
-  padding: 0;
-}
-[dir="rtl"] .item-list ul li {
-  margin: 0 1.5em 0.25em 0;
-}
-
-/**
- * Markup generated by Form API.
- */
-.form-item,
-.form-actions {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-tr.odd .form-item,
-tr.even .form-item {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.form-composite > .fieldset-wrapper > .description,
-.form-item .description {
-  font-size: 0.85em;
-}
-label.option {
-  display: inline;
-  font-weight: normal;
-}
-.form-composite > legend,
-.label {
-  display:inline;
-  font-size: inherit;
-  font-weight: bold;
-  margin: 0;
-  padding: 0;
-}
-.form-checkboxes .form-item,
-.form-radios .form-item {
-  margin-top: 0.4em;
-  margin-bottom: 0.4em;
-}
-.form-type-radio .description,
-.form-type-checkbox .description {
-  margin-left: 2.4em;
-}
-.marker {
-  color: #e00;
-}
-
-.form-required:after {
-  content: '';
-  vertical-align: super;
-  display: inline-block;
-  /* Use a background image to prevent screen readers from announcing the text. */
-  background-image: url(../../../misc/icons/ee0000/required.svg);
-  background-repeat: no-repeat;
-  background-size: 6px 6px;
-  width: 6px;
-  height: 6px;
-  margin: 0 0.3em;
-}
-
-abbr.tabledrag-changed,
-abbr.ajax-changed {
-  border-bottom: none;
-}
-.form-item input.error,
-.form-item textarea.error,
-.form-item select.error {
-  border: 2px solid red;
-}
-.button,
-.image-button {
-  margin-left: 1em;
-  margin-right: 1em;
-}
-.button:first-child,
-.image-button:first-child {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-/**
- * Inline items.
- */
-.container-inline label:after,
-.container-inline .label:after {
-  content: ':';
-}
-.form-type-radios .container-inline label:after {
-  content: '';
-}
-.form-type-radios .container-inline .form-type-radio {
-  margin: 0 1em;
-}
-.container-inline .form-actions,
-.container-inline.form-actions {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/**
- * Markup generated by #type 'more_link'.
- */
-.more-link {
-  display: block;
-  text-align: right; /* LTR */
-}
-[dir="rtl"] .more-link {
-  text-align: left;
-}
-
-/* Style for the help icon. */
-.icon-help {
-  background: url(../../../misc/help.png) 0 50% no-repeat; /* LTR */
-  padding: 1px 0 1px 20px; /* LTR */
-}
-[dir="rtl"] .icon-help {
-  background-position: 100% 50%;
-  padding: 1px 20px 1px 0;
-}
-
-/**
- * Markup generated by pager.html.twig.
- */
-.pager__items {
-  clear: both;
-  text-align: center;
-}
-.pager__item {
-  display: inline;
-  padding: 0.5em;
-}
-.pager__item.is-active {
-  font-weight: bold;
-}
-
-/**
- * Show buttons as links.
- */
-button.link {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  font-size: 1em;
-}
-
-label button.link {
-  font-weight: bold;
-}
-
-/**
- * Collapsible details.
- *
- * @see collapse.js
- * @thanks http://nicolasgallagher.com/css-background-image-hacks/
- */
-details {
-  border: 1px solid #ccc;
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-details > .details-wrapper {
-  padding: 0.5em 1.5em;
-}
-/* @todo Regression: The summary of uncollapsible details are no longer
-     vertically aligned with the .details-wrapper in browsers without native
-     details support. */
-summary {
-  cursor: pointer;
-  padding: 0.2em 0.5em;
-}
-.collapse-processed > summary {
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-}
-.collapse-processed > summary:before {
-  background: url(../../../misc/menu-expanded.png) 0px 100% no-repeat; /* LTR */
-  content: "";
-  float: left;
-  height: 1em;
-  width: 1em;
-}
-[dir="rtl"] .collapse-processed > summary:before {
-  background-position: 100% 100%;
-  float: right;
-}
-.collapse-processed:not([open]) > summary:before {
-  background-position: 25% 35%; /* LTR */
-  -ms-transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
-  transform: rotate(-90deg);
-}
-[dir="rtl"] .collapse-processed:not([open]) > summary:before {
-  background-position: 75% 35%;
-  -ms-transform: rotate(90deg);
-  -webkit-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-
-/**
- * TableDrag behavior.
- *
- * @see tabledrag.js
- */
-tr.drag {
-  background-color: #fffff0;
-}
-tr.drag-previous {
-  background-color: #ffd;
-}
-body div.tabledrag-changed-warning {
-  margin-bottom: 0.5em;
-}
-
-/**
- * TableSelect behavior.
- *
- * @see tableselect.js
- */
-tr.selected td {
-  background: #ffc;
-}
-td.checkbox,
-th.checkbox {
-  text-align: center;
-}
-
-/**
- * Progress bar.
- *
- * @see progress.js
- */
-.progress__track {
-  border-color: #b3b3b3;
-  border-radius: 10em;
-  background-color: #f2f1eb;
-  background-image: -webkit-linear-gradient(#e7e7df, #f0f0f0);
-  background-image:         linear-gradient(#e7e7df, #f0f0f0);
-  box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.16);
-}
-.progress__bar {
-  border: 1px #07629a solid;
-  background: #057ec9;
-  background-image:
-    -webkit-linear-gradient( top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
-    -webkit-linear-gradient( left top,
-      #0094f0 0%,
-      #0094f0 25%,
-      #007ecc 25%,
-      #007ecc 50%,
-      #0094f0 50%,
-      #0094f0 75%,
-      #0094f0 100% );
-  background-image:
-    -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), -webkit-linear-gradient(left top, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
-  background-image:
-    linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15) ),
-    linear-gradient( to right bottom,
-      #0094f0 0%,
-      #0094f0 25%,
-      #007ecc 25%,
-      #007ecc 50%,
-      #0094f0 50%,
-      #0094f0 75%,
-      #0094f0 100% );
-  background-size: 40px 40px;
-  margin-top: -1px;
-  margin-left: -1px;
-  padding: 0 1px;
-  width: 3%;
-  height: 16px;
-  border-radius: 10em;
-  -webkit-animation: animate-stripes 3s linear infinite;
-  -moz-animation: animate-stripes 3s linear infinite;
-  -webkit-transition: width 0.5s ease-out;
-  transition: width 0.5s ease-out;
-}
-
-/**
- * Progress bar animations.
- */
-@-webkit-keyframes animate-stripes {
-  0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
-}
-@-ms-keyframes animate-stripes {
-  0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
-}
-@keyframes animate-stripes {
-  0% {background-position: 0 0, 0 0;} 100% {background-position: 0 0, -80px 0;}
-}
-
-/**
- * Markup generated by menu.html.twig.
- */
-ul.menu {
-  list-style: none outside;
-  margin-left: 1em; /* LTR */
-  padding: 0;
-  text-align: left; /* LTR */
-}
-[dir="rtl"] ul.menu {
-  margin-left: 0;
-  margin-right: 1em;
-  text-align: right;
-}
-.menu-item--expanded {
-  list-style-image: url(../../../misc/menu-expanded.png);
-  list-style-type: circle;
-}
-.menu-item--collapsed {
-  list-style-image: url(../../../misc/menu-collapsed.png); /* LTR */
-  list-style-type: disc;
-}
-[dir="rtl"] .menu-item--collapsed {
-  list-style-image: url(../../../misc/menu-collapsed-rtl.png);
-}
-.menu-item {
-  padding-top: 0.2em;
-  margin: 0;
-}
-ul.menu a.is-active {
-  color: #000;
-}
-
-/**
- * Markup generated by links.html.twig.
- */
-ul.inline,
-ul.links.inline {
-  display: inline;
-  padding-left: 0;
-}
-ul.inline li {
-  display: inline;
-  list-style-type: none;
-  padding: 0 0.5em;
-}
-ul.links a.is-active {
-  color: #000;
-}
-
-/**
- * Markup generated by breadcrumb.html.twig.
- */
-.breadcrumb {
-  padding-bottom: 0.5em;
-}
-.breadcrumb ol {
-  margin: 0;
-  padding: 0;
-}
-[dir="rtl"] .breadcrumb ol {
-  /* This is required to win over specifity of [dir="rtl"] ol */
-  margin-right: 0;
-}
-.breadcrumb li {
-  display: inline;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-/* IE8 does not support :not() and :last-child. */
-.breadcrumb li:before {
-  content: ' \BB ';
-}
-.breadcrumb li:first-child:before {
-  content: none;
-}
-
-/**
- * Markup generated by menu-local-tasks.html.twig.
- */
-div.tabs {
-  margin: 1em 0;
-}
-ul.tabs {
-  list-style: none;
-  margin: 0 0 0.5em;
-  padding: 0;
-}
-.tabs > li {
-  display: inline-block;
-  margin-right: 0.3em; /* LTR */
-}
-[dir="rtl"] .tabs > li {
-  margin-left: 0.3em;
-  margin-right: 0;
-}
-.tabs a {
-  display: block;
-  padding: 0.2em 1em;
-  text-decoration: none;
-}
-.tabs a.is-active {
-  background-color: #eee;
-}
-.tabs a:focus,
-.tabs a:hover {
-  background-color: #f5f5f5;
-}
-
-/**
- * Styles for link buttons and action links.
- */
-.action-links {
-  list-style: none;
-  padding: 0;
-  margin: 1em 0;
-}
-[dir="rtl"] .action-links {
-  /* This is required to win over specifity of [dir="rtl"] ul */
-  margin-right: 0;
-}
-.action-links li {
-  display: inline-block;
-  margin: 0 0.3em;
-}
-.action-links li:first-child {
-  margin-left: 0; /* LTR */
-}
-[dir="rtl"] .action-links li:first-child {
-  margin-left: 0.3em;
-  margin-right: 0;
-}
-.button-action {
-  display: inline-block;
-  line-height: 160%;
-  padding: 0.2em 0.5em 0.3em;
-  text-decoration: none;
-}
-.button-action:before {
-  content: '+';
-  font-weight: 900;
-  margin-left: -0.1em; /* LTR */
-  padding-right: 0.2em; /* LTR */
-}
-[dir="rtl"] .button-action:before {
-  margin-left: 0;
-  margin-right: -0.1em;
-  padding-left: 0.2em;
-  padding-right: 0;
-}
-
-/**
- * Styles for system messages.
- */
-.messages {
-  background: no-repeat 10px 17px;  /* LTR */
-  border: 1px solid;
-  border-width: 1px 1px 1px 0;  /* LTR */
-  border-radius: 2px;
-  padding: 15px 20px 15px 35px; /* LTR */
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-}
-[dir="rtl"] .messages {
-  border-width: 1px 0 1px 1px;
-  background-position: right 10px top 17px;
-  padding-left: 20px;
-  padding-right: 35px;
-  text-align: right;
-}
-.messages + .messages {
-  margin-top: 1.538em;
-}
-.messages__list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.messages__item + .messages__item {
-  margin-top: 0.769em;
-}
-
-/* See .color-success in Seven's colors.css */
-.messages--status {
-  color: #325e1c;
-  background-color: #f3faef;
-  border-color: #c9e1bd #c9e1bd #c9e1bd transparent;  /* LTR */
-  background-image: url(../../../misc/icons/73b355/check.svg);
-  box-shadow: -8px 0 0 #77b259; /* LTR */
-}
-[dir="rtl"] .messages--status {
-  border-color: #c9e1bd transparent #c9e1bd #c9e1bd;
-  box-shadow: 8px 0 0 #77b259;
-  margin-left: 0;
-}
-
-/* See .color-warning in Seven's colors.css */
-.messages--warning {
-  background-color: #fdf8ed;
-  background-image: url(../../../misc/icons/e29700/warning.svg);
-  border-color: #f4daa6 #f4daa6 #f4daa6 transparent;  /* LTR */
-  color: #734c00;
-  box-shadow: -8px 0 0 #e09600; /* LTR */
-}
-[dir="rtl"] .messages--warning {
-  border-color: #f4daa6 transparent #f4daa6 #f4daa6;
-  box-shadow: 8px 0 0 #e09600;
-}
-
-/* See .color-error in Seven's colors.css */
-.messages--error {
-  background-color: #fcf4f2;
-  color: #a51b00;
-  background-image: url(../../../misc/icons/ea2800/error.svg);
-  border-color: #f9c9bf #f9c9bf #f9c9bf transparent;  /* LTR */
-  box-shadow: -8px 0 0 #e62600; /* LTR */
-}
-[dir="rtl"] .messages--error {
-  border-color: #f9c9bf transparent #f9c9bf #f9c9bf;
-  box-shadow: 8px 0 0 #e62600;
-}
-.messages--error p.error {
-  color: #a51b00;
-}
-
-/* Field display */
-.field .field-label {
-  font-weight: bold;
-}
-.field-label-inline .field-label,
-.field-label-inline .field-items {
-  float:left; /*LTR*/
-  margin-right: 0.5em; /*LTR*/
-}
-[dir="rtl"] .field-label-inline .field-label,
-[dir="rtl"] .field-label-inline .field-items {
-  float: right;
-  margin-left: 0.5em;
-  margin-right: 0;
-}
-.field-label-inline .field-label::after {
-  content: ':';
-}
-
-/* Form display */
-form .field-multiple-table {
-  margin: 0;
-}
-form .field-multiple-table .field-multiple-drag {
-  width: 30px;
-  padding-right: 0; /*LTR*/
-}
-[dir="rtl"] form .field-multiple-table .field-multiple-drag {
-  padding-left: 0;
-}
-form .field-multiple-table .field-multiple-drag .tabledrag-handle {
-  padding-right: .5em; /*LTR*/
-}
-[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
-  padding-left: .5em;
-}
-form .field-add-more-submit {
-  margin: .5em 0 0;
-}
diff --git a/core/modules/system/src/Tests/Theme/ThemeInfoTest.php b/core/modules/system/src/Tests/Theme/ThemeInfoTest.php
index 3d376ed..1213379 100644
--- a/core/modules/system/src/Tests/Theme/ThemeInfoTest.php
+++ b/core/modules/system/src/Tests/Theme/ThemeInfoTest.php
@@ -71,16 +71,17 @@ function testStylesheets() {
     // should work nevertheless.
     $this->drupalGet('theme-test/info/stylesheets');
 
-    $this->assertIdentical(1, count($this->xpath("//link[contains(@href, '$base/base-add.css')]")), "$base/base-add.css found");
-    $this->assertIdentical(0, count($this->xpath("//link[contains(@href, 'base-remove.css')]")), "base-remove.css not found");
+    $this->assertIdentical(1, count($this->xpath('//style[contains(text(), :text)]', array(':text' => "$base/base-add.css"))), "$base/base-add.css found");
+    $this->assertIdentical(0, count($this->xpath('//style[contains(text(), :text)]', array(':text' => "base-remove.css"))), "base-remove.css not found");
 
-    $this->assertIdentical(1, count($this->xpath("//link[contains(@href, '$sub/sub-add.css')]")), "$sub/sub-add.css found");
-    $this->assertIdentical(0, count($this->xpath("//link[contains(@href, 'sub-remove.css')]")), "sub-remove.css not found");
-    $this->assertIdentical(0, count($this->xpath("//link[contains(@href, 'base-add.sub-remove.css')]")), "base-add.sub-remove.css not found");
+    $this->assertIdentical(1, count($this->xpath('//style[contains(text(), :text)]', array(':text' => "$sub/sub-add.css"))), "$sub/sub-add.css found");
+    $this->assertIdentical(0, count($this->xpath('//style[contains(text(), :text)]', array(':text' => "sub-remove.css"))), "sub-remove.css not found");
+    $this->assertIdentical(0, count($this->xpath('//style[contains(text(), :text)]', array(':text' => "base-add.sub-remove.css"))), "base-add.sub-remove.css not found");
 
     // Verify that CSS files with the same name are loaded from both the base theme and subtheme.
-    $this->assertIdentical(1, count($this->xpath("//link[contains(@href, '$base/samename.css')]")), "$base/samename.css found");
-    $this->assertIdentical(1, count($this->xpath("//link[contains(@href, '$sub/samename.css')]")), "$sub/samename.css found");
+    $this->assertIdentical(1, count($this->xpath('//style[contains(text(), :text)]', array(':text' => "$base/samename.css"))), "$base/samename.css found");
+    $this->assertIdentical(1, count($this->xpath('//style[contains(text(), :text)]', array(':text' => "$sub/samename.css"))), "$sub/samename.css found");
+
   }
 
   /**
diff --git a/core/modules/system/system.libraries.yml b/core/modules/system/system.libraries.yml
index b440e15..355f59b 100644
--- a/core/modules/system/system.libraries.yml
+++ b/core/modules/system/system.libraries.yml
@@ -3,9 +3,53 @@ base:
   css:
     # Adjust the weights to load these early.
     component:
-      css/system.module.css: { every_page: true, weight: -10, }
+      css/components/ajax-progress.module.css: { every_page: true, weight: -10, }
+      css/components/align.module.css: { every_page: true, weight: -10, }
+      css/components/animated-throbber.module.css: { every_page: true, weight: -10, }
+      css/components/fieldgroup.module.css: { every_page: true, weight: -10, }
+      css/components/container-inline.module.css: { every_page: true, weight: -10, }
+      css/components/clearfix.module.css: { every_page: true, weight: -10, }
+      css/components/details.module.css: { every_page: true, weight: -10, }
+      css/components/form--inline.module.css: { every_page: true, weight: -10, }
+      css/components/hidden.module.css: { every_page: true, weight: -10, }
+      css/components/js.module.css: { every_page: true, weight: -10, }
+      css/components/nowrap.module.css: { every_page: true, weight: -10, }
+      css/components/position-container.module.css: { every_page: true, weight: -10, }
+      css/components/progress.module.css: { every_page: true, weight: -10, }
+      css/components/reset-appearance.module.css: { every_page: true, weight: -10, }
+      css/components/resize.module.css: { every_page: true, weight: -10, }
+      css/components/sticky-header.css: { every_page: true, weight: -10, }
+      css/components/tabledrag.module.css: { every_page: true, weight: -10, }
     theme:
-      css/system.theme.css: { every_page: true, weight: -10 }
+      css/components/action-links.theme.css: { every_page: true, weight: -10, }
+      css/components/breadcrumbs.theme.css: { every_page: true, weight: -10, }
+      css/components/button.theme.css: { every_page: true, weight: -10, }
+      css/components/collapse-processed.theme.css: { every_page: true, weight: -10, }
+      css/components/container-inline.theme.css: { every_page: true, weight: -10, }
+      css/components/details.theme.css: { every_page: true, weight: -10, }
+      css/components/exposed-filters.theme.css: { every_page: true, weight: -10, }
+      css/components/field.theme.css: { every_page: true, weight: -10, }
+      css/components/form.theme.css: { every_page: true, weight: -10, }
+      css/components/icons.theme.css: { every_page: true, weight: -10, }
+      css/components/inline-form.theme.css: { every_page: true, weight: -10, }
+      css/components/item-list.theme.css: { every_page: true, weight: -10, }
+      css/components/link.theme.css: { every_page: true, weight: -10, }
+      css/components/links.theme.css: { every_page: true, weight: -10, }
+      css/components/menu.theme.css: { every_page: true, weight: -10, }
+      css/components/messages.theme.css: { every_page: true, weight: -10, }
+      css/components/more-help.theme.css: { every_page: true, weight: -10, }
+      css/components/more-link.theme.css: { every_page: true, weight: -10, }
+      css/components/node.theme.css: { every_page: true, weight: -10, }
+      css/components/pager.theme.css: { every_page: true, weight: -10, }
+      css/components/progress.theme.css: { every_page: true, weight: -10, }
+      css/components/table-select.theme.css: { every_page: true, weight: -10, }
+      css/components/tabledrag.theme.css: { every_page: true, weight: -10, }
+      css/components/tableheader.theme.css: { every_page: true, weight: -10, }
+      css/components/tablesort.theme.css: { every_page: true, weight: -10, }
+      css/components/tabs.theme.css: { every_page: true, weight: -10, }
+      css/components/textarea.theme.css: { every_page: true, weight: -10, }
+      css/components/throbber.theme.css: { every_page: true, weight: -10, }
+      css/components/tree-child.theme.css: { every_page: true, weight: -10, }
   dependencies:
     - core/normalize