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/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..a7600b4
--- /dev/null
+++ b/core/modules/system/css/components/button.theme.css
@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Visual styles for buttons.
+ */
+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/collapse-processed.theme.css b/core/modules/system/css/components/collapse-processed.theme.css
new file mode 100644
index 0000000..4dfc8f8
--- /dev/null
+++ b/core/modules/system/css/components/collapse-processed.theme.css
@@ -0,0 +1,27 @@
+.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.theme.css b/core/modules/system/css/components/container-inline.theme.css
new file mode 100644
index 0000000..937d5a1
--- /dev/null
+++ b/core/modules/system/css/components/container-inline.theme.css
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Styles for inlien items. Rows 7-14 from system.module.css.
+ * Rows 16-33 from system.theme.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.theme.css b/core/modules/system/css/components/details.theme.css
new file mode 100644
index 0000000..c7e8671
--- /dev/null
+++ b/core/modules/system/css/components/details.theme.css
@@ -0,0 +1,21 @@
+/**
+ * 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..3ba81a6
--- /dev/null
+++ b/core/modules/system/css/components/exposed-filters.theme.css
@@ -0,0 +1,45 @@
+/**
+ * @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.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/icons.theme.css b/core/modules/system/css/components/icons.theme.css
new file mode 100644
index 0000000..9f8b7fb
--- /dev/null
+++ b/core/modules/system/css/components/icons.theme.css
@@ -0,0 +1,9 @@
+/* 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;
+}
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/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/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/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/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.theme.css b/core/modules/system/css/components/tabledrag.theme.css
new file mode 100644
index 0000000..1e41fbe
--- /dev/null
+++ b/core/modules/system/css/components/tabledrag.theme.css
@@ -0,0 +1,117 @@
+/**
+ * @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;
+}
+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;
+}
+
+/**
+ * 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/system.admin.css b/core/modules/system/css/system.admin.css
index 1dd5da9..8e144c2 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -14,13 +14,12 @@
   display: table;
   clear: both;
 }
-
 @media screen and (min-width: 38em) {
   .layout-container {
     margin: 0 2.5em;
   }
   .layout-column {
-    float: left;  /* LTR */
+    float: left; /* LTR */
     box-sizing: border-box;
   }
   [dir="rtl"] .layout-column {
@@ -55,6 +54,14 @@
   margin: 0 0 3px;
   padding: 2px 0 3px 0;
 }
+.admin-panel {
+  margin: 0;
+  padding: 5px 5px 15px 5px;
+}
+.admin-panel .description {
+  margin: 0 0 3px;
+  padding: 2px 0 3px 0;
+}
 
 /**
  * System compact link: to toggle the display of description text.
@@ -134,11 +141,11 @@ small .admin-link:after {
 .system-modules td {
   padding-left: 0;
 }
-
 @media screen and (max-width: 40em) {
   .system-modules td.name {
     width: 20%;
   }
+
   .system-modules td.description {
     width: 40%;
   }
@@ -240,7 +247,6 @@ small .admin-link:after {
 .system-themes-list__header {
   margin: 0;
 }
-
 .theme-selector {
   padding-top: 20px;
 }
@@ -330,7 +336,6 @@ small .admin-link:after {
 .system-themes-list-installed .theme-info {
   max-width: 940px;
 }
-
 .theme-selector .incompatible {
   margin-top: 10px;
   font-weight: bold;
@@ -344,7 +349,7 @@ small .admin-link:after {
   margin: 0;
   padding: 0 0.7em;
   list-style-type: none;
-  border-right: 1px solid #cdcdcd;  /* LTR */
+  border-right: 1px solid #cdcdcd; /* LTR */
 }
 [dir="rtl"] .theme-selector .operations li {
   float: right;
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index b38c5e5..993ea52 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -4,37 +4,6 @@
  */
 
 /**
- * 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
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index c20d6ca..606e54f 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -10,98 +10,6 @@
   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;
@@ -112,481 +20,3 @@ abbr.ajax-changed {
   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 34c90dd..7f4244d 100644
--- a/core/modules/system/system.libraries.yml
+++ b/core/modules/system/system.libraries.yml
@@ -4,8 +4,37 @@ base:
     # Adjust the weights to load these early.
     component:
       css/system.module.css: { every_page: true, weight: -10, }
+      css/components/animated-throbber.module.css: {}
+      css/components/fieldgroup.module.css: {}
     theme:
       css/system.theme.css: { every_page: true, weight: -10 }
+      css/components/action-links.theme.css: {}
+      css/components/breadcrumbs.theme.css: {}
+      css/components/button.theme.css: {}
+      css/components/collapse-processed.theme.css: {}
+      css/components/container-inline.theme.css: {}
+      css/components/details.theme.css: {}
+      css/components/exposed-filters.theme.css: {}
+      css/components/field.theme.css: {}
+      css/components/form.theme.css: {}
+      css/components/icons.theme.css: {}
+      css/components/inline-form.theme.css: {}
+      css/components/item-list.theme.css: {}
+      css/components/links.theme.css: {}
+      css/components/menu.theme.css: {}
+      css/components/messages.theme.css: {}
+      css/components/more-help.theme.css: {}
+      css/components/more-link.theme.css: {}
+      css/components/node.theme.css: {}
+      css/components/pager.theme.css: {}
+      css/components/progress.theme.css: {}
+      css/components/table-select.theme.css: {}
+      css/components/tabledrag.theme.css: {}
+      css/components/tableheader.theme.css: {}
+      css/components/tablesort.theme.css: {}
+      css/components/tabs.theme.css: {}
+      css/components/textarea.theme.css: {}
+      css/components/throbber.theme.css: {}
   dependencies:
     - core/normalize