Update to drupal 8.0.0-rc1. For more information, see https://www.drupal.org/node/2582663

core/themes/classy/classy.info.yml

@@ -4,7 +4,16 @@ description: 'A base theme with sensible default CSS classes added. Learn how to
 package: Core
 version: VERSION
 core: 8.x
+base theme: false
 
 libraries:
   - classy/base
   - core/normalize
+
+libraries-extend:
+  user/drupal.user:
+    - classy/user
+  core/drupal.dropbutton:
+    - classy/dropbutton
+  core/drupal.dialog:
+    - classy/dialog

core/themes/classy/classy.libraries.yml

@@ -1,20 +1,72 @@
 base:
   version: VERSION
   css:
-    theme:
-      css/layout.css: {}
+    component:
+      css/components/action-links.css: { weight: -10 }
+      css/components/breadcrumb.css: { weight: -10 }
+      css/components/button.css: { weight: -10 }
+      css/components/collapse-processed.css: { weight: -10 }
+      css/components/container-inline.css: { weight: -10 }
+      css/components/details.css: { weight: -10 }
+      css/components/exposed-filters.css: { weight: -10 }
+      css/components/field.css: { weight: -10 }
+      css/components/form.css: { weight: -10 }
+      css/components/icons.css:  { weight: -10 }
+      css/components/inline-form.css: { weight: -10 }
+      css/components/item-list.css: { weight: -10 }
+      css/components/link.css: { weight: -10 }
+      css/components/links.css: { weight: -10 }
+      css/components/menu.css: { weight: -10 }
+      css/components/more-link.css: { weight: -10 }
+      css/components/pager.css: { weight: -10 }
+      css/components/tabledrag.css: { weight: -10 }
+      css/components/tableselect.css: { weight: -10 }
+      css/components/tablesort.css: { weight: -10 }
+      css/components/tabs.css: { weight: -10 }
+      css/components/textarea.css: { weight: -10 }
+      css/components/ui-dialog.css: { weight: -10 }
 
 book-navigation:
   version: VERSION
   css:
-    theme:
-      css/navigation/book.theme.css: {}
+    component:
+      css/components/book-navigation.css: {}
 
-drupal.comment.threaded:
+dialog:
   version: VERSION
   css:
-    theme:
-      css/comment/comment.theme.css: {}
+    component:
+      css/components/dialog.css: { weight: -10 }
+
+dropbutton:
+  version: VERSION
+  css:
+    component:
+      css/components/dropbutton.css: { weight: -10 }
+
+file:
+  version: VERSION
+  css:
+    component:
+      css/components/file.css: { weight: -10 }
+
+forum:
+  version: VERSION
+  css:
+    component:
+      css/components/forum.css: { weight: -10 }
+
+indented:
+  version: VERSION
+  css:
+    component:
+      css/components/indented.css: {}
+
+messages:
+  version: VERSION
+  css:
+    component:
+      css/components/messages.css:  { weight: -10 }
 
 node:
   version: VERSION
@@ -22,8 +74,20 @@ node:
     component:
       css/components/node.css: { weight: -10 }
 
-search.results:
+progress:
   version: VERSION
   css:
-    theme:
-      css/search/search.theme.css: {}
+    component:
+      css/components/progress.css: { weight: -10 }
+
+search-results:
+  version: VERSION
+  css:
+    component:
+      css/components/search-results.css: {}
+
+user:
+  version: VERSION
+  css:
+    component:
+      css/components/user.css: { weight: -10 }

core/themes/classy/css/components/action-links.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 specificity 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;
+}

core/themes/classy/css/components/breadcrumb.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 specificity 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;
+}

core/themes/classy/css/components/button.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;
+}

core/themes/classy/css/components/collapse-processed.css

@@ -0,0 +1,32 @@
+/**
+ * @file
+ * Visual styles for collapsible fieldsets.
+ */
+
+.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; /* LTR */
+  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);
+}

core/themes/classy/css/components/container-inline.css

@@ -0,0 +1,20 @@
+/**
+ * @file
+ * 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;
+}

core/themes/classy/css/components/details.css

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ * @see 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;
+}

core/themes/classy/css/components/dialog.css

@@ -0,0 +1,72 @@
+/**
+ * @file
+ * Presentational styles for Drupal dialogs.
+ */
+
+.ui-dialog {
+  position: absolute;
+  z-index: 1260;
+  overflow: visible;
+  color: #000;
+  background: #fff;
+  border: solid 1px #ccc;
+  padding: 0;
+}
+@media all and (max-width: 48em) { /* 768px */
+  .ui-dialog {
+    width: 92% !important;
+  }
+}
+.ui-dialog .ui-dialog-titlebar {
+  font-weight: bold;
+  background: #f3f4ee;
+  border-style: solid;
+  border-radius: 0;
+  border-width: 0 0 1px 0;
+  border-color: #ccc;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+  border: 0;
+  background: none;
+}
+.ui-dialog .ui-dialog-buttonpane {
+  margin-top: 0;
+  background: #f3f4ee;
+  padding: .3em 1em;
+  border-width: 1px 0 0 0;
+  border-color: #ccc;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+  margin: 0;
+  padding: 0;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
+  padding: 0;
+}
+
+/* Form action buttons are moved in dialogs. Remove empty space. */
+.ui-dialog .ui-dialog-content .form-actions {
+  padding: 0;
+  margin: 0;
+}
+.ui-dialog .ajax-progress-throbber {
+  /* 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(loading-small.gif);
+  background-position: center center;
+  background-repeat: no-repeat;
+  border-radius: 7px;
+  height: 24px;
+  opacity: 0.9;
+  padding: 4px;
+  width: 24px;
+}
+.ui-dialog .ajax-progress-throbber .throbber,
+.ui-dialog .ajax-progress-throbber .message {
+  display: none;
+}
+

core/themes/classy/css/components/dropbutton.css

@@ -0,0 +1,33 @@
+/**
+ * @file
+ * General styles for dropbuttons.
+ */
+
+.js .dropbutton-widget {
+  background-color: white;
+  border: 1px solid #cccccc;
+}
+.js .dropbutton-widget:hover {
+  border-color: #b8b8b8;
+}
+.dropbutton .dropbutton-action > * {
+  padding: 0.1em 0.5em;
+  white-space: nowrap;
+}
+.dropbutton .secondary-action {
+  border-top: 1px solid #e8e8e8;
+}
+.dropbutton-multiple .dropbutton {
+  border-right: 1px solid #e8e8e8; /* LTR */
+}
+[dir="rtl"] .dropbutton-multiple .dropbutton {
+  border-left: 1px solid #e8e8e8;
+  border-right: 0 none;
+}
+.dropbutton-multiple .dropbutton .dropbutton-action > * {
+  margin-right: 0.25em; /* LTR */
+}
+[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
+  margin-left: 0.25em;
+  margin-right: 0;
+}

core/themes/classy/css/components/exposed-filters.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;
+}

core/themes/classy/css/components/field.css

@@ -0,0 +1,25 @@
+/**
+ * @file
+ * Visual styles for fields.
+ */
+
+.field__label {
+  font-weight: bold;
+}
+.field--label-inline .field__label,
+.field--label-inline .field__items {
+  float: left; /*LTR*/
+}
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
+.field--label-inline .field__items {
+  padding-right: 0.5em;
+}
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
+  padding-left: 0.5em;
+  padding-right: 0;
+}
+.field--label-inline .field__label::after {
+  content: ':';
+}

core/themes/classy/css/components/file.css

@@ -0,0 +1,62 @@
+/**
+ * @file
+ * Default style for file module.
+ */
+
+/* File icons.*/
+
+.file {
+  padding-left: 20px; /* LTR */
+  display: inline-block;
+  min-height: 16px;
+  background-repeat: no-repeat;
+  background-position: left center; /* LTR */
+}
+[dir="rtl"] .file {
+  padding-left: inherit;
+  padding-right: 20px;
+  background-position: right center;
+}
+.file--general,
+.file--application-octet-stream {
+  background-image: url(../../images/icons/application-octet-stream.png);
+}
+.file--package-x-generic {
+  background-image: url(../../images/icons/package-x-generic.png);
+}
+.file--x-office-spreadsheet {
+  background-image: url(../../images/icons/x-office-spreadsheet.png);
+}
+.file--x-office-document {
+  background-image: url(../../images/icons/x-office-document.png);
+}
+.file--x-office-presentation {
+  background-image: url(../../images/icons/x-office-presentation.png);
+}
+.file--text-x-script {
+  background-image: url(../../images/icons/text-x-script.png);
+}
+.file--text-html {
+  background-image: url(../../images/icons/text-html.png);
+}
+.file--text-plain {
+  background-image: url(../../images/icons/text-plain.png);
+}
+.file--application-pdf {
+  background-image: url(../../images/icons/application-pdf.png);
+}
+.file--application-x-executable {
+  background-image: url(../../images/icons/application-x-executable.png);
+}
+.file--audio {
+  background-image: url(../../images/icons/audio-x-generic.png);
+}
+.file--video {
+  background-image: url(../../images/icons/video-x-generic.png);
+}
+.file--text {
+  background-image: url(../../images/icons/text-x-generic.png);
+}
+.file--image {
+  background-image: url(../../images/icons/image-x-generic.png);
+}

core/themes/classy/css/components/form.css

@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Visual styles for form components.
+ */
+
+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-right: 0;
+  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; /* LTR */
+}
+[dir="rtl"] .form-type-radio .description,
+[dir="rtl"] .form-type-checkbox .description {
+   margin-left: 0;
+   margin-right: 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;
+}
+
+/* Inline error messages. */
+.form-item--error-message:before {
+  content: '';
+  display: inline-block;
+  height: 14px;
+  width: 14px;
+  vertical-align: sub;
+  background: url(../../../../misc/icons/e32700/error.svg) no-repeat;
+  background-size: contain;
+}

core/themes/classy/css/components/forum.css

@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Styling for the Forum module.
+ */
+
+.forum__description {
+  font-size: 0.9em;
+  margin: 0.5em;
+}
+.forum__icon {
+  background-image: url(../../images/icons/forum-icons.png);
+  background-repeat: no-repeat;
+  float: left; /* LTR */
+  height: 24px;
+  margin: 0 9px 0 0; /* LTR */
+  width: 24px;
+}
+[dir="rtl"] .forum__icon {
+  float: right;
+  margin: 0 0 0 9px;
+}
+.forum__title {
+  overflow: hidden;
+}
+.forum .indented {
+  margin-left: 20px; /* LTR */
+}
+[dir="rtl"] .forum .indented {
+  margin-left: 0;
+  margin-right: 20px;
+}
+.forum__topic-status--new {
+  background-position: -24px 0;
+}
+.forum__topic-status--hot {
+  background-position: -48px 0;
+}
+.forum__topic-status--hot-new {
+  background-position: -72px 0;
+}
+.forum__topic-status--sticky {
+  background-position: -96px 0;
+}
+.forum__topic-status--closed {
+  background-position: -120px 0;
+}

core/themes/classy/css/components/icons.css

@@ -0,0 +1,21 @@
+/**
+ * @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;
+}
+.feed-icon {
+  background: url(../../../../misc/feed.svg) no-repeat;
+  overflow: hidden;
+  text-indent: -9999px;
+  display: block;
+  width: 16px;
+  height: 16px;
+}

core/themes/classy/css/components/image-widget.css

@@ -0,0 +1,21 @@
+
+/**
+ * Image upload widget.
+ */
+.image-preview {
+  float: left; /* LTR */
+  padding: 0 10px 10px 0; /* LTR */
+}
+[dir="rtl"] .image-preview {
+  float: right;
+  padding: 0 0 10px 10px;
+}
+.image-widget-data {
+  float: left; /* LTR */
+}
+[dir="rtl"] .image-widget-data {
+  float: right;
+}
+.image-widget-data .text-field {
+  width: auto;
+}

core/themes/classy/css/components/inline-form.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;
+}

core/themes/classy/css/components/item-list.css

@@ -0,0 +1,32 @@
+/**
+ * @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 li {
+  margin: 0 0 0.25em 1.5em; /* LTR */
+  padding: 0;
+}
+[dir="rtl"] .item-list li {
+  margin: 0 1.5em 0.25em 0;
+}
+
+/**
+ * Comma separated lists.
+ */
+.item-list--comma-list {
+  display: inline;
+}
+.item-list--comma-list .item-list__comma-list,
+.item-list__comma-list li,
+[dir="rtl"] .item-list--comma-list .item-list__comma-list,
+[dir="rtl"] .item-list__comma-list li {
+  margin: 0;
+}

core/themes/classy/css/components/link.css

@@ -0,0 +1,16 @@
+/**
+ * @file
+ * Style another element as a link.
+ */
+
+button.link {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  font-size: 1em;
+}
+label button.link {
+  font-weight: bold;
+}

core/themes/classy/css/components/links.css

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Visual styles for links.
+ */
+
+ul.inline,
+ul.links.inline {
+  display: inline;
+  padding-left: 0; /* LTR */
+}
+[dir="rtl"] ul.inline,
+[dir="rtl"] ul.links.inline {
+  padding-right: 0;
+  padding-left: 15px;
+}
+ul.inline li {
+  display: inline;
+  list-style-type: none;
+  padding: 0 0.5em;
+}
+ul.links a.is-active {
+  color: #000;
+}

core/themes/classy/css/components/menu.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-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;
+}

core/themes/classy/css/components/messages.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/e32700/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;
+}

core/themes/classy/css/components/more-link.css

@@ -0,0 +1,12 @@
+/**
+ * @file
+ * Markup generated by #type 'more_link'.
+ */
+
+.more-link {
+  display: block;
+  text-align: right; /* LTR */
+}
+[dir="rtl"] .more-link {
+  text-align: left;
+}

core/themes/classy/css/components/pager.css

@@ -0,0 +1,16 @@
+/**
+ * @file
+ * Visual styles for pager.
+ */
+
+.pager__items {
+  clear: both;
+  text-align: center;
+}
+.pager__item {
+  display: inline;
+  padding: 0.5em;
+}
+.pager__item.is-active {
+  font-weight: bold;
+}

core/themes/classy/css/components/progress.css

@@ -0,0 +1,71 @@
+/**
+ * @file
+ * Visual styles for 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; /* LTR */
+  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;
+}
+[dir="rtl"] .progress__bar {
+  margin-left: 0;
+  margin-right: -1px;
+  animation-direction: reverse;
+  -webkit-animation-direction: reverse;
+  -moz-animation-direction: reverse;
+}
+
+/**
+ * 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;}
+}

core/themes/classy/css/components/search-results.css

@@ -2,6 +2,7 @@
  * @file
  * Stylesheet for results generated by the Search module.
  */
-ol.search-results {
+
+.search-results {
   list-style: none;
 }

core/themes/classy/css/components/tabledrag.css

@@ -0,0 +1,14 @@
+/**
+ * @file
+ * Visual styles for table drag.
+ */
+
+tr.drag {
+  background-color: #fffff0;
+}
+tr.drag-previous {
+  background-color: #ffd;
+}
+body div.tabledrag-changed-warning {
+  margin-bottom: 0.5em;
+}

core/themes/classy/css/components/tableselect.css

@@ -0,0 +1,19 @@
+/**
+ * @file
+ * Table select behavior.
+ *
+ * @see tableselect.js
+ */
+
+tr.selected td {
+  background: #ffc;
+}
+td.checkbox,
+th.checkbox {
+  text-align: center;
+}
+[dir="rtl"] td.checkbox,
+[dir="rtl"] th.checkbox {
+  /* This is required to win over specificity of [dir="rtl"] td */
+  text-align: center;
+}

core/themes/classy/css/components/tablesort.css

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Table sort indicator.
+ */
+
+th.is-active img {
+  display: inline;
+}
+td.is-active {
+  background-color: #ddd;
+}

core/themes/classy/css/components/tabs.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.is-active {
+  background-color: #eee;
+}
+.tabs a:focus,
+.tabs a:hover {
+  background-color: #f5f5f5;
+}

core/themes/classy/css/components/textarea.css

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Visual styles for a resizable textarea.
+ */
+
+.form-textarea-wrapper textarea {
+  display: block;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}

core/themes/classy/css/components/ui-dialog.css

@@ -0,0 +1,15 @@
+/**
+ * @file
+ * Styles for Classy's modal windows.
+ */
+
+.ui-dialog--narrow {
+  max-width: 500px;
+}
+
+@media screen and (max-width: 600px) {
+  .ui-dialog--narrow {
+    max-width: 95%;
+    min-width: 95%;
+  }
+}

core/themes/classy/css/components/user.css

@@ -0,0 +1,66 @@
+/**
+ * @file
+ * Theme styling for user module.
+ */
+
+/* Visual styling for the Password strength indicator */
+.password-strength__meter {
+  margin-top: 0.5em;
+  background-color: #ebeae4;
+}
+.password-strength__indicator {
+  background-color: #77b259;
+  -webkit-transition: width 0.5s ease-out;
+  transition: width 0.5s ease-out;
+}
+.password-strength__indicator.is-weak {
+  background-color: #e62600;
+}
+.password-strength__indicator.is-fair {
+  background-color: #e09600;
+}
+.password-strength__indicator.is-good {
+  background-color: #0074bd;
+}
+.password-strength__indicator.is-strong {
+  background-color: #77b259;
+}
+
+.password-confirm,
+.password-field,
+.password-strength,
+.password-confirm-match {
+  width: 55%;
+}
+
+.password-suggestions {
+  padding: 0.2em 0.5em;
+  margin: 0.7em 0;
+  max-width: 34.7em;
+  border: 1px solid #b4b4b4;
+}
+.password-suggestions ul {
+  margin-bottom: 0;
+}
+
+.confirm-parent,
+.password-parent {
+  clear: left; /* LTR */
+  margin: 0;
+  max-width: 33em;
+  overflow: hidden;
+}
+[dir="rtl"] .confirm-parent,
+[dir="rtl"] .password-parent {
+  clear: right;
+}
+
+/* Styling for the status indicator of the passwords match test.  */
+.password-confirm .ok {
+  color: #325e1c;
+  font-weight: bold;
+}
+.password-confirm .error {
+  color: #a51b00;
+  font-weight: bold;
+}

core/themes/classy/css/layout.css

@@ -1,6 +0,0 @@
-/**
- * @file
- * Classy layout file. Do NOT delete. Needed for testing.
- *
- * @see \Drupal\system\Tests\Installer\InstallerTranslationTest::testInstaller()
- */

core/themes/classy/templates/block/block--system-branding-block.html.twig

@@ -15,13 +15,13 @@
 #}
 {% block content %}
   {% if site_logo %}
-    <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
+    <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo">
       <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
     </a>
   {% endif %}
   {% if site_name %}
     <div class="site-name">
-      <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
+      <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
     </div>
   {% endif %}
   {% if site_slogan %}

core/themes/classy/templates/content-edit/file-managed-file.html.twig

@@ -10,6 +10,7 @@
  * @see template_preprocess_file_managed_file()
  */
 #}
+{{ attach_library('classy/file') }}
 {%
   set classes = [
     'js-form-managed-file',

core/themes/classy/templates/content-edit/file-widget.html.twig

@@ -10,6 +10,7 @@
  * @see template_preprocess_file_widget()
  */
 #}
+{{ attach_library('classy/file') }}
 <div{{ attributes }}>
   {{ element }}
 </div>

core/themes/classy/templates/content-edit/filter-caption.html.twig

@@ -12,7 +12,7 @@
  * - string classes: The classes of the captioned HTML tag.
  */
 #}
-<figure class="caption caption-{{ tag }}{%- if classes %} {{ classes }}{%- endif %}">
+<figure role="group" class="caption caption-{{ tag }}{%- if classes %} {{ classes }}{%- endif %}">
 {{ node }}
 <figcaption>{{ caption }}</figcaption>
 </figure>

core/themes/classy/templates/content-edit/image-widget.html.twig

@@ -10,6 +10,7 @@
  * @see template_preprocess_image_widget()
  */
 #}
+{{ attach_library('classy/image-widget') }}
 <div{{ attributes }}>
   {% if data.preview %}
     <div class="image-preview">

core/themes/classy/templates/content-edit/text-format-wrapper.html.twig

@@ -13,7 +13,7 @@
  * @see template_preprocess_text_format_wrapper()
  */
 #}
-<div class="js-text-format-wrapper text-format-wrapper form-item">
+<div class="js-text-format-wrapper text-format-wrapper js-form-item form-item">
   {{ children }}
   {% if description %}
     {%

core/themes/classy/templates/content/comment.html.twig

@@ -65,7 +65,7 @@
  */
 #}
 {% if threaded %}
-  {{ attach_library('classy/drupal.comment.threaded') }}
+  {{ attach_library('classy/indented') }}
 {% endif %}
 {%
   set classes = [

core/themes/classy/templates/content/links--node.html.twig

@@ -0,0 +1,41 @@
+{#
+/**
+ * @file
+ * Theme override to display node links.
+ *
+ * Available variables:
+ * - attributes: Attributes for the UL containing the list of links.
+ * - links: Links to be output.
+ *   Each link will have the following elements:
+ *   - title: The link text.
+ *   - href: The link URL. If omitted, the 'title' is shown as a plain text
+ *     item in the links list. If 'href' is supplied, the entire link is passed
+ *     to l() as its $options parameter.
+ *   - attributes: (optional) HTML attributes for the anchor, or for the <span>
+ *     tag if no 'href' is supplied.
+ *   - link_key: The link CSS class.
+ * - heading: (optional) A heading to precede the links.
+ *   - text: The heading text.
+ *   - level: The heading level (e.g. 'h2', 'h3').
+ *   - attributes: (optional) A keyed list of attributes for the heading.
+ *   If the heading is a string, it will be used as the text of the heading and
+ *   the level will default to 'h2'.
+ *
+ *   Headings should be used on navigation menus and any list of links that
+ *   consistently appears on multiple pages. To make the heading invisible use
+ *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   removes it from screen readers and assistive technology. Headings allow
+ *   screen reader and keyboard only users to navigate to or skip the links.
+ *   See http://juicystudio.com/article/screen-readers-display-none.php and
+ *   http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @see template_preprocess_links()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if links %}
+  <div class="node__links">
+    {% include "links.html.twig" %}
+  </div>
+{% endif %}

core/themes/classy/templates/content/mark.html.twig

@@ -13,8 +13,8 @@
 #}
 {% if logged_in %}
   {% if status is constant('MARK_NEW') %}
-    <span class="marker">{{ 'new'|t }}</span>
+    <span class="marker">{{ 'New'|t }}</span>
   {% elseif status is constant('MARK_UPDATED') %}
-    <span class="marker">{{ 'updated'|t }}</span>
+    <span class="marker">{{ 'Updated'|t }}</span>
   {% endif %}
 {% endif %}

core/themes/classy/templates/content/node.html.twig

@@ -97,13 +97,7 @@
   {% endif %}
 
   <div{{ content_attributes.addClass('node__content') }}>
-    {{ content|without('links') }}
+    {{ content }}
   </div>
 
-  {% if content.links %}
-    <div class="node__links">
-      {{ content.links }}
-    </div>
-  {% endif %}
-
 </article>

core/themes/classy/templates/content/page-title.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override for page titles.
+ *
+ * Available variables:
+ * - title_attributes: HTML attributes for the page title element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title: The page title, for use in the actual content.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_page_title()
+ */
+#}
+{{ title_prefix }}
+{% if title %}
+  <h1{{ title_attributes.addClass('page-title') }}>{{ title }}</h1>
+{% endif %}
+{{ title_suffix }}

core/themes/classy/templates/content/search-result.html.twig

@@ -56,7 +56,7 @@
  * @see template_preprocess_search_result()
  */
 #}
-{{ attach_library('classy/search.results') }}
+{{ attach_library('classy/search-results') }}
 {{ title_prefix }}
 <h3{{ title_attributes.addClass('search-result__title') }}>
   <a href="{{ url }}">{{ title }}</a>

core/themes/classy/templates/dataset/forum-list.html.twig

@@ -56,7 +56,7 @@
           <div class="forum__icon forum-status-{{ forum.icon_class }}" title="{{ forum.icon_title }}">
             <span class="visually-hidden">{{ forum.icon_title }}</span>
           </div>
-          <div class="name"><a href="{{ forum.link }}">{{ forum.label }}</a></div>
+          <div class="forum__name"><a href="{{ forum.link }}">{{ forum.label }}</a></div>
           {% if forum.description.value %}
             <div class="forum__description">{{ forum.description.value }}</div>
           {% endif %}

core/themes/classy/templates/dataset/forums.html.twig

@@ -14,6 +14,7 @@
  * @see template_preprocess_forums()
  */
 #}
+{{ attach_library('classy/forum') }}
 {% if forums_defined %}
   <div class="forum">
     {{ forums }}

core/themes/classy/templates/dataset/item-list.html.twig

@@ -9,6 +9,7 @@
  *   - value: The content of the list element.
  * - title: The title of the list.
  * - list_type: The tag for list element ("ul" or "ol").
+ * - wrapper_attributes: HTML attributes to be applied to the list wrapper.
  * - attributes: HTML attributes to be applied to the list.
  * - empty: A message to display when there are no items. Allowed value is a
  *   string or render array.
@@ -19,10 +20,11 @@
  */
 #}
 {% if context.list_style %}
-  {% set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
+  {%- set wrapper_attributes = wrapper_attributes.addClass('item-list--' ~ context.list_style) %}
+  {%- set attributes = attributes.addClass('item-list__' ~ context.list_style) %}
 {% endif %}
-{%- if items or empty -%}
-  <div class="item-list">
+{% if items or empty -%}
+  <div{{ wrapper_attributes.addClass('item-list') }}>
     {%- if title is not empty -%}
       <h3>{{ title }}</h3>
     {%- endif -%}

core/themes/classy/templates/dataset/tablesort-indicator.html.twig

@@ -1,16 +0,0 @@
-{#
-/**
- * @file
- * Theme override for displaying a tablesort indicator.
- *
- * Available variables:
- * - style: Either 'asc' or 'desc', indicating the sorting direction.
- *
- * @see template_preprocess_tablesort_indicator()
- */
-#}
-{% if style == 'asc' -%}
-  <img src="{{ arrow_asc }}" width="13" height="13" alt="{{ 'sort ascending'|t }}" title="{{ 'sort ascending'|t }}" />
-{% else -%}
-  <img src="{{ arrow_desc }}" width="13" height="13" alt="{{ 'sort descending'|t }}" title="{{ 'sort descending'|t }}" />
-{% endif %}

core/themes/classy/templates/field/field--node--uid.html.twig

@@ -22,7 +22,7 @@
 {%
   set classes = [
     'field',
-    'field--name-' ~ field_name_class,
+    'field--name-' ~ field_name|clean_class,
     'field--type-' ~ field_type|clean_class,
     'field--label-' ~ label_display,
   ]

core/themes/classy/templates/field/field.html.twig

@@ -56,7 +56,7 @@
   {% if multiple %}
     <div{{ attributes.addClass(classes, 'field__items') }}>
       {% for item in items %}
-        <div{{ item.attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
       {% endfor %}
     </div>
   {% else %}

core/themes/classy/templates/field/file-link.html.twig

@@ -11,4 +11,5 @@
  * @see template_preprocess_file_link()
  */
 #}
+{{ attach_library('classy/file') }}
 <span{{ attributes }}>{{ icon }} {{ link }}</span>

core/themes/classy/templates/form/details.html.twig

@@ -5,6 +5,7 @@
  *
  * Available variables
  * - attributes: A list of HTML attributes for the details element.
+ * - errors: (optional) Any errors for this details element, may not be set.
  * - title: (optional) The title of the element, may not be set.
  * - description: (optional) The description of the element, may not be set.
  * - children: (optional) The children of the element, may not be set.
@@ -18,6 +19,11 @@
     <summary{{ summary_attributes }}>{{ title }}</summary>
   {%- endif -%}
   <div class="details-wrapper">
+    {% if errors %}
+      <div class="form-item--error-message">
+        <strong>{{ errors }}</strong>
+      </div>
+    {% endif %}
     {%- if description -%}
       <div class="details-description">{{ description }}</div>
     {%- endif -%}

core/themes/classy/templates/form/field-multiple-value-form.html.twig

@@ -11,17 +11,19 @@
  *
  * Available variables when there are multiple fields.
  * - table: Table of field items.
- * - description: Description text for the form element.
+ * - description: The description element containing the following properties:
+ *   - content: The description content of the form element.
+ *   - attributes: HTML attributes to apply to the description container.
  * - button: "Add another item" button.
  *
  * @see template_preprocess_field_multiple_value_form()
  */
 #}
 {% if multiple %}
-  <div class="form-item">
+  <div class="js-form-item form-item">
     {{ table }}
-    {% if description %}
-      <div class="description">{{ description }}</div>
+    {% if description.content %}
+      <div{{ description.attributes.addClass('description') }} >{{ description.content }}</div>
     {% endif %}
     {% if button %}
       <div class="clearfix">{{ button }}</div>

core/themes/classy/templates/form/fieldset.html.twig

@@ -22,6 +22,7 @@
 #}
 {%
   set classes = [
+    'js-form-item',
     'form-item',
     'js-form-wrapper',
     'form-wrapper',

core/themes/classy/templates/form/form-element.html.twig

@@ -46,9 +46,11 @@
 #}
 {%
   set classes = [
+    'js-form-item',
     'form-item',
     'js-form-type-' ~ type|clean_class,
     'form-type-' ~ type|clean_class,
+    'js-form-item-' ~ name|clean_class,
     'form-item-' ~ name|clean_class,
     title_display not in ['after', 'before'] ? 'form-no-label',
     disabled == 'disabled' ? 'form-disabled',

core/themes/classy/templates/layout/html.html.twig

@@ -7,9 +7,6 @@
  * - logged_in: A flag indicating if user is logged in.
  * - root_path: The root path of the current page (e.g., node, admin, user).
  * - node_type: The content type for the current node, if the page is a node.
- * - css: A list of CSS files for the current page.
- * - head: Markup for the HEAD element (including meta tags, keyword tags, and
- *   so on).
  * - head_title: List of text elements that make up the head_title variable.
  *   May contain or more of the following:
  *   - title: The title of the page.
@@ -19,11 +16,9 @@
  * - page: The rendered page markup.
  * - page_bottom: Closing rendered markup. This variable should be printed after
  *   'page'.
- * - styles: HTML necessary to import all necessary CSS files in <head>.
- * - scripts: HTML necessary to load JavaScript files and settings in <head>.
- * - scripts_bottom: HTML necessary to load JavaScript files before closing
- *   <body> tag.
  * - db_offline: A flag indicating if the database is offline.
+ * - placeholder_token: The token for generating head, css, js and js-bottom
+ *   placeholders.
  *
  * @see template_preprocess_html()
  */
@@ -39,10 +34,10 @@
 <!DOCTYPE html>
 <html{{ html_attributes }}>
   <head>
-    {{ head }}
+    <head-placeholder token="{{ placeholder_token|raw }}">
     <title>{{ head_title|safe_join(' | ') }}</title>
-    {{ styles }}
-    {{ scripts }}
+    <css-placeholder token="{{ placeholder_token|raw }}">
+    <js-placeholder token="{{ placeholder_token|raw }}">
   </head>
   <body{{ attributes.addClass(body_classes) }}>
     <a href="#main-content" class="visually-hidden focusable skip-link">
@@ -51,6 +46,6 @@
     {{ page_top }}
     {{ page }}
     {{ page_bottom }}
-    {{ scripts_bottom }}
+    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
   </body>
 </html>

core/themes/classy/templates/layout/page.html.twig

@@ -26,11 +26,6 @@
  *   slogan has been disabled in theme settings.
  *
  * Page content (in order of occurrence in the default page.html.twig):
- * - title_prefix: Additional output populated by modules, intended to be
- *   displayed in front of the main title tag that appears in the template.
- * - title: The page title, for use in the actual content.
- * - title_suffix: Additional output populated by modules, intended to be
- *   displayed after the main title tag that appears in the template.
  * - node: Fully loaded node, if there is an automatically-loaded node
  *   associated with the page and the node ID is the second argument in the
  *   page's path (e.g. node/12345 and node/12345/revisions, but not
@@ -56,32 +51,6 @@
 <div class="layout-container">
 
   <header role="banner">
-    {% if logo %}
-      <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
-        <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
-      </a>
-    {% endif %}
-
-    {% if site_name or site_slogan %}
-      <div class="name-and-slogan">
-
-        {# Use h1 when the content title is empty #}
-        {% if title %}
-          <strong class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </strong>
-        {% else %}
-          <h1 class="site-name">
-            <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
-          </h1>
-        {% endif %}
-
-        {% if site_slogan %}
-          <div class="site-slogan">{{ site_slogan }}</div>
-        {% endif %}
-      </div>{# ./name-and-slogan #}
-    {% endif %}
-
     {{ page.header }}
   </header>
 
@@ -98,13 +67,6 @@
     <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
     <div class="layout-content">
-      {{ page.highlighted }}
-
-      {{ title_prefix }}
-      {% if title %}
-        <h1>{{ title }}</h1>
-      {% endif %}
-      {{ title_suffix }}
       {{ page.content }}
     </div>{# /.layout-content #}
 

core/themes/classy/templates/misc/progress-bar.html.twig

@@ -11,6 +11,7 @@
  * - message: A string containing information to be displayed.
  */
 #}
+{{ attach_library('classy/progress') }}
 <div class="progress" data-drupal-progress>
   {% if label %}
     <div class="progress__label">{{ label }}</div>

core/themes/classy/templates/misc/status-messages.html.twig

@@ -23,6 +23,7 @@
  * @see template_preprocess_status_messages()
  */
 #}
+{{ attach_library('classy/messages') }}
 {% block messages %}
 {% for type, messages in message_list %}
   {%

core/themes/classy/templates/navigation/book-tree.html.twig

@@ -11,6 +11,11 @@
  *   - below: The book item child items.
  *   - title: The book link title.
  *   - url: The book link URL, instance of \Drupal\Core\Url.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     book tree.
+ *   - is_collapsed: TRUE if the link has children within the current book tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
  */
 #}
 {% import _self as book_tree %}
@@ -29,14 +34,22 @@
     {% else %}
       <ul class="menu">
     {% endif %}
-      {% for item in items %}
-        <li{{ item.attributes }}>
-          {{ link(item.title, item.url) }}
-          {% if item.below %}
-            {{ book_tree.book_links(item.below, attributes, menu_level + 1) }}
-          {% endif %}
-        </li>
-      {% endfor %}
+    {% for item in items %}
+      {%
+        set classes = [
+          'menu-item',
+          item.is_expanded ? 'menu-item--expanded',
+          item.is_collapsed ? 'menu-item--collapsed',
+          item.in_active_trail ? 'menu-item--active-trail',
+        ]
+      %}
+      <li{{ item.attributes.addClass(classes) }}>
+        {{ link(item.title, item.url) }}
+        {% if item.below %}
+          {{ book_tree.book_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
     </ul>
   {% endif %}
 {% endmacro %}

core/themes/classy/templates/navigation/menu.html.twig

@@ -11,6 +11,11 @@
  *   - title: The menu link title.
  *   - url: The menu link url, instance of \Drupal\Core\Url
  *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
  */
 #}
 {% import _self as menus %}
@@ -29,14 +34,22 @@
     {% else %}
       <ul class="menu">
     {% endif %}
-      {% for item in items %}
-        <li{{ item.attributes }}>
-          {{ link(item.title, item.url) }}
-          {% if item.below %}
-            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
-          {% endif %}
-        </li>
-      {% endfor %}
+    {% for item in items %}
+      {%
+        set classes = [
+          'menu-item',
+          item.is_expanded ? 'menu-item--expanded',
+          item.is_collapsed ? 'menu-item--collapsed',
+          item.in_active_trail ? 'menu-item--active-trail',
+        ]
+      %}
+      <li{{ item.attributes.addClass(classes) }}>
+        {{ link(item.title, item.url) }}
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
     </ul>
   {% endif %}
 {% endmacro %}

core/themes/classy/templates/navigation/pager.html.twig

@@ -17,8 +17,8 @@
  *   items.pages contain the following elements:
  *   - href: URL with appropriate query parameters for the item.
  *   - attributes: A keyed list of HTML attributes for the item.
- *   - text: The visible text used for the item link, such as "‹ previous"
- *     or "next ›".
+ *   - text: The visible text used for the item link, such as "‹ Previous"
+ *     or "Next ›".
  * - current: The page number of the current page.
  * - ellipses: If there are more pages than the quantity allows, then an
  *   ellipsis before or after the listed pages may be present.
@@ -38,7 +38,7 @@
         <li class="pager__item pager__item--first">
           <a href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title') }}>
             <span class="visually-hidden">{{ 'First page'|t }}</span>
-            <span aria-hidden="true">{{ items.first.text|default('« first'|t) }}</span>
+            <span aria-hidden="true">{{ items.first.text|default('« First'|t) }}</span>
           </a>
         </li>
       {% endif %}
@@ -47,7 +47,7 @@
         <li class="pager__item pager__item--previous">
           <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}>
             <span class="visually-hidden">{{ 'Previous page'|t }}</span>
-            <span aria-hidden="true">{{ items.previous.text|default('‹ previous'|t) }}</span>
+            <span aria-hidden="true">{{ items.previous.text|default('‹ Previous'|t) }}</span>
           </a>
         </li>
       {% endif %}
@@ -80,7 +80,7 @@
         <li class="pager__item pager__item--next">
           <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}>
             <span class="visually-hidden">{{ 'Next page'|t }}</span>
-            <span aria-hidden="true">{{ items.next.text|default('next ›'|t) }}</span>
+            <span aria-hidden="true">{{ items.next.text|default('Next ›'|t) }}</span>
           </a>
         </li>
       {% endif %}
@@ -89,7 +89,7 @@
         <li class="pager__item pager__item--last">
           <a href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title') }}>
             <span class="visually-hidden">{{ 'Last page'|t }}</span>
-            <span aria-hidden="true">{{ items.last.text|default('last »'|t) }}</span>
+            <span aria-hidden="true">{{ items.last.text|default('Last »'|t) }}</span>
           </a>
         </li>
       {% endif %}