Issue #2375673 by DickJohnson, LewisNyman, lauriii, emma.maria, sqndr, Wim...

Issue #2375673 by DickJohnson, LewisNyman, lauriii, emma.maria, sqndr, Wim Leers, stephr: Split Bartik's CSS into SMACSS style components

core/modules/config/src/Tests/ConfigImportUITest.php

@@ -102,20 +102,20 @@ function testImport() {
 
     // Verify that both appear as ready to import.
     $this->drupalGet('admin/config/development/configuration');
-    $this->assertText($name);
-    $this->assertText($dynamic_name);
-    $this->assertText('core.extension');
-    $this->assertText('system.theme');
-    $this->assertText('action.settings');
+    $this->assertRaw('<td>' . $name);
+    $this->assertRaw('<td>' . $dynamic_name);
+    $this->assertRaw('<td>core.extension');
+    $this->assertRaw('<td>system.theme');
+    $this->assertRaw('<td>action.settings');
     $this->assertFieldById('edit-submit', t('Import all'));
 
     // Import and verify that both do not appear anymore.
     $this->drupalPostForm(NULL, array(), t('Import all'));
-    $this->assertNoText($name);
-    $this->assertNoText($dynamic_name);
-    $this->assertNoText('core.extension');
-    $this->assertNoText('system.theme');
-    $this->assertNoText('action.settings');
+    $this->assertNoRaw('<td>' . $name);
+    $this->assertNoRaw('<td>' . $dynamic_name);
+    $this->assertNoRaw('<td>core.extension');
+    $this->assertNoRaw('<td>system.theme');
+    $this->assertNoRaw('<td>action.settings');
 
     $this->assertNoFieldById('edit-submit', t('Import all'));
 
@@ -177,15 +177,15 @@ function testImport() {
 
     // Verify that both appear as ready to import.
     $this->drupalGet('admin/config/development/configuration');
-    $this->assertText('core.extension');
-    $this->assertText('system.theme');
-    $this->assertText('action.settings');
+    $this->assertRaw('<td>core.extension');
+    $this->assertRaw('<td>system.theme');
+    $this->assertRaw('<td>action.settings');
 
     // Import and verify that both do not appear anymore.
     $this->drupalPostForm(NULL, array(), t('Import all'));
-    $this->assertNoText('core.extension');
-    $this->assertNoText('system.theme');
-    $this->assertNoText('action.settings');
+    $this->assertNoRaw('<td>core.extension');
+    $this->assertNoRaw('<td>system.theme');
+    $this->assertNoRaw('<td>action.settings');
 
     $this->rebuildContainer();
     $this->assertFalse(\Drupal::moduleHandler()->moduleExists('ban'), 'Ban module uninstalled during import.');

core/modules/system/src/Tests/Menu/MenuRouterTest.php

@@ -277,7 +277,7 @@ protected function doTestThemeCallbackMaintenanceMode() {
     // For a regular user, the fact that the site is in maintenance mode means
     // we expect the theme callback system to be bypassed entirely.
     $this->drupalGet('menu-test/theme-callback/use-admin-theme');
-    $this->assertRaw('bartik/css/style.css', "The maintenance theme's CSS appears on the page.");
+    $this->assertRaw('bartik/css/base/elements.css', "The maintenance theme's CSS appears on the page.");
 
     // An administrator, however, should continue to see the requested theme.
     $admin_user = $this->drupalCreateUser(array('access site in maintenance mode'));
@@ -296,7 +296,7 @@ protected function doTestThemeCallbackOptionalTheme() {
     // Request a theme that is not installed.
     $this->drupalGet('menu-test/theme-callback/use-stark-theme');
     $this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when a theme that is not installed is requested.');
-    $this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page.");
+    $this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page.");
 
     // Now install the theme and request it again.
     $theme_handler = $this->container->get('theme_handler');
@@ -315,7 +315,7 @@ protected function doTestThemeCallbackOptionalTheme() {
   protected function doTestThemeCallbackFakeTheme() {
     $this->drupalGet('menu-test/theme-callback/use-fake-theme');
     $this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when a theme that does not exist is requested.');
-    $this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page.");
+    $this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page.");
   }
 
   /**
@@ -324,7 +324,7 @@ protected function doTestThemeCallbackFakeTheme() {
   protected function doTestThemeCallbackNoThemeRequested() {
     $this->drupalGet('menu-test/theme-callback/no-theme-requested');
     $this->assertText('Active theme: bartik. Actual theme: bartik.', 'The theme negotiation system falls back on the default theme when no theme is requested.');
-    $this->assertRaw('bartik/css/style.css', "The default theme's CSS appears on the page.");
+    $this->assertRaw('bartik/css/base/elements.css', "The default theme's CSS appears on the page.");
   }
 
 }

core/modules/taxonomy/src/Tests/ThemeTest.php

@@ -44,7 +44,7 @@ function testTaxonomyTermThemes() {
     // Viewing a taxonomy term should use the default theme.
     $term = $this->createTerm($vocabulary);
     $this->drupalGet('taxonomy/term/' . $term->id());
-    $this->assertRaw('bartik/css/style.css', t("The default theme's CSS appears on the page for viewing a taxonomy term."));
+    $this->assertRaw('bartik/css/base/elements.css', t("The default theme's CSS appears on the page for viewing a taxonomy term."));
 
     // Editing a taxonomy term should use the same theme as adding one.
     $this->drupalGet('taxonomy/term/' . $term->id() . '/edit');

core/tests/Drupal/Tests/Core/Asset/CssCollectionGrouperUnitTest.php

@@ -91,16 +91,16 @@ function testGrouper() {
         'browsers' => array('IE' => TRUE, '!IE' => TRUE),
         'basename' => 'external.css',
       ),
-      'style.css' => array(
+      'elements.css' => array(
         'group' => 100,
         'every_page' => TRUE,
         'media' => 'all',
         'type' => 'file',
         'weight' => 0.001,
         'preprocess' => TRUE,
-        'data' => 'core/themes/bartik/css/style.css',
+        'data' => 'core/themes/bartik/css/base/elements.css',
         'browsers' => array('IE' => TRUE, '!IE' => TRUE),
-        'basename' => 'style.css',
+        'basename' => 'elements.css',
       ),
       'print.css' => array(
         'group' => 100,
@@ -163,7 +163,7 @@ function testGrouper() {
     $this->assertSame($groups[4]['media'], 'all');
     $this->assertSame($groups[4]['preprocess'], TRUE);
     $this->assertSame(count($groups[4]['items']), 1);
-    $this->assertContains($css_assets['style.css'], $groups[4]['items']);
+    $this->assertContains($css_assets['elements.css'], $groups[4]['items']);
 
     // Check group 6.
     $this->assertSame($groups[5]['group'], 100);

core/themes/bartik/bartik.libraries.yml

@@ -2,8 +2,46 @@ global-styling:
   version: VERSION
   css:
     theme:
+      css/base/elements.css: {}
+      css/base/typography.css: {}
       css/layout.css: {}
-      css/style.css: {}
+      css/components/admin.css: {}
+      css/components/book.css: {}
+      css/components/breadcrumb.css: {}
+      css/components/captions.css: {}
+      css/components/comments.css: {}
+      css/components/content.css: {}
+      css/components/contextual.css: {}
+      # @see https://www.drupal.org/node/2389735
+      css/components/dropbutton.component.css: {}
+      css/components/featured.css: {}
+      css/components/footer.css: {}
+      css/components/form.css: {}
+      css/components/forum.css: {}
+      css/components/header.css: {}
+      css/components/help.css: {}
+      css/components/highlighted.css: {}
+      css/components/list.css: {}
+      css/components/messages.css: {}
+      css/components/node-preview.css: {}
+      css/components/pager.css: {}
+      css/components/primary-menu.css: {}
+      css/components/search.css: {}
+      css/components/search-results.css: {}
+      css/components/secondary-menu.css: {}
+      css/components/shortcut.css: {}
+      css/components/skip-link.css: {}
+      css/components/sidebar.css: {}
+      css/components/table.css: {}
+      css/components/tabs.css: {}
+      css/components/tips.css: {}
+      css/components/triptych.css: {}
+      css/components/user.css: {}
+      # @see https://www.drupal.org/node/2389735
+      css/components/vertical-tabs.component.css: {}
+      css/components/views.css: {}
+      css/components/buttons.css: {}
+      css/components/media.css: {}
       css/colors.css: {}
       css/print.css: { media: print }
 
@@ -21,7 +59,7 @@ maintenance_page:
   version: VERSION
   css:
     theme:
-      css/maintenance-page.css: {}
+      css/theme/maintenance-page.css: {}
   dependencies:
     - system/maintenance
     - bartik/global-styling

core/themes/bartik/css/base/elements.css

+/* ---------- Overall Specifications ---------- */
+
+body {
+  line-height: 1.5;
+  font-size: 87.5%;
+  word-wrap: break-word;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+a {
+  text-decoration: none;
+  border-bottom: 1px dotted;
+}
+a:hover,
+a:active,
+a:focus,
+.link:hover,
+.link:active,
+.link:focus {
+  text-decoration: none;
+  border-bottom-style: solid;
+}
+.field-type-image a,
+h1 a,
+h2 a,
+[role*=banner] a,
+.feed-icon,
+.contextual-links a,
+.toolbar a {
+  border-bottom: none !important;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1.0em 0 0.5em;
+  font-weight: inherit;
+}
+h1 {
+  font-size: 1.357em;
+  color: #000;
+}
+h2 {
+  font-size: 1.143em;
+}
+h3 {
+  font-size: 1.092em;
+}
+h4 {
+  font-size: 1.05em;
+}
+h5 {
+  font-size: 0.889em;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+h6 {
+  font-size: 0.67em;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+p {
+  margin: 0 0 1.2em;
+}
+del {
+  text-decoration: line-through;
+}
+
+/* ------------------ Reset Styles ------------------ */
+
+blockquote {
+  background: #f7f7f7;
+  border-left: 1px solid #bbb;
+  font-style: italic;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+}
+[dir="rtl"] blockquote {
+  border-left: none;
+  border-right: 4px solid #afafaf;
+}
+blockquote:before {
+  color: #bbb;
+  content: "\201C";
+  font-size: 3em;
+  line-height: 0.1em;
+  margin-right: 0.2em;
+  vertical-align: -.4em;
+}
+[dir="rtl"] blockquote:before {
+  content: "\201D";
+}
+blockquote:after {
+  color: #bbb;
+  content: "\201D";
+  font-size: 3em;
+  line-height: 0.1em;
+  vertical-align: -.45em;
+}
+[dir="rtl"] blockquote:after {
+  content: "\201C";
+}
+blockquote > p:first-child {
+  display: inline;
+}
+a.feed-icon {
+  display: inline-block;
+  padding: 15px 0 0 0;
+}
+img {
+  max-width: 100%;
+  height: auto;
+  border: 0;
+}

core/themes/bartik/css/base/typography.css

+/* ------------------ Fonts ------------------ */
+
+body,
+#site-slogan,
+.site-slogan,
+#page .ui-widget,
+.comment-form label,
+.node-form label,
+.node-form .description {
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
+#header,
+#footer-wrapper,
+.skip-link,
+ul.contextual-links,
+ul.links,
+ul.primary,
+.pager__items,
+div.field-type-taxonomy-term-reference,
+div.messages,
+.node__meta,
+p.comment-time,
+table,
+.breadcrumb,
+.link {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+input,
+textarea,
+select,
+.form-button,
+a.button,
+button {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
+}

core/themes/bartik/css/colors.css

@@ -56,3 +56,18 @@ a:active,
 .region-secondary-menu .menu li a {
   color: #fffeff;
 }
+
+/* ---------- Color Form ----------- */
+
+[dir="rtl"] .color-form #palette {
+  margin-left: 0;
+  margin-right: 20px;
+}
+[dir="rtl"] .color-form .form-item label {
+  float: right;
+}
+[dir="rtl"] .color-form #palette .lock {
+  right: -20px;
+  left: 0;
+}
+

core/themes/bartik/css/components/admin.css

+/* ---------- Admin-specific Theming ---------- */
+.path-admin #content img {
+  margin-right: 15px; /* LTR */
+}
+.path-admin #content .simpletest-image img {
+  margin: 0;
+}
+.path-admin #admin-dblog img {
+  margin: 0 5px;
+}
+
+/* Block demo mode */
+.demo-block {
+  background: #ffff66;
+  border: 1px dotted #9f9e00;
+  color: #000;
+  font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
+  margin: 5px;
+  padding: 5px;
+  text-align: center;
+  text-shadow: none;
+}
+#featured .demo-block {
+  font-size: 0.55em;
+}
+#header .demo-block {
+  width: 500px;
+}
+
+/* Configuration. */
+div.admin-panel {
+  background: #fbfbfb;
+  border: 1px solid #ccc;
+  margin: 10px 0;
+  padding: 0 5px 5px;
+}
+div.admin-panel h3 {
+  margin: 16px 7px;
+}
+div.admin-panel dt {
+  border-top: 1px solid #ccc;
+  padding: 7px 0 0;
+}
+div.admin-panel dd {
+  margin: 0 0 10px;
+}
+div.admin-panel .description {
+  margin: 0 0 14px 7px;
+}

core/themes/bartik/css/components/book.css

+.book-navigation .menu {
+  border-top: 1px solid #d6d6d6;
+}
+.book-navigation .book-pager {
+  border-bottom: 1px solid #d6d6d6;
+  border-top: 1px solid #d6d6d6;
+  margin: 0;
+}

core/themes/bartik/css/components/breadcrumb.css

+/* -------------- Breadcrumbs   -------------- */
+
+.breadcrumb {
+  font-size: 0.929em;
+}

core/themes/bartik/css/components/buttons.css

+/* ---------------- Buttons    ---------------- */
+
+.button {
+  background-color: #fff;
+  background-image: -webkit-linear-gradient(top, #f3f3f3, #e8e8e8);
+  background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8);
+  border: 1px solid #e4e4e4;
+  border-bottom-color: #b4b4b4;
+  border-left-color: #d2d2d2;
+  border-right-color: #d2d2d2;
+  color: #3a3a3a;
+  cursor: pointer;
+  font-size: 0.929em;
+  font-weight: normal;
+  text-align: center;
+  padding: 0.250em 1.063em;
+  border-radius: 1em;
+}
+.button:hover,
+.button:active,
+.button:focus {
+  text-decoration: none;
+  color: #5a5a5a;
+  background: #dedede;
+}

core/themes/bartik/css/components/captions.css

+/* -------------- Captions -------------- */
+.caption {
+  margin-bottom: 1.2em;
+}
+.caption > * {
+  background: #F3F3F3;
+  padding: 0.5ex;
+  border: 1px solid #CCC;
+}
+.caption > figcaption {
+  border: 1px solid #CCC;
+  border-top: none;
+  padding-top: 0.5ex;
+  font-size: small;
+  text-align: center;
+}
+
+/* Override Bartik's default blockquote and pre styles when captioned. */
+.caption-pre > pre,
+.caption-blockquote > blockquote {
+  margin: 0;
+}
+.caption-blockquote > figcaption::before {
+  content: "— ";
+}
+.caption-blockquote > figcaption {
+  text-align: left;
+}
+[dir="rtl"] .caption-blockquote > figcaption {
+  text-align: right;
+}

core/themes/bartik/css/components/comments.css

+/* ----------------- Comments ----------------- */
+
+.comment h2.title {
+  margin-bottom: 1em;
+}
+.comment .field-name-field-user-picture img {
+  margin-left: 0; /* LTR */
+}
+[dir="rtl"] .comment .field-name-field-user-picture img {
+  margin-right: 0;
+}
+.comment {
+  margin-bottom: 20px;
+  display: table;
+  vertical-align: top;
+}
+.comment .attribution {
+  display: table-cell;
+  padding: 0 30px 0 0; /* LTR */
+  vertical-align: top;
+  overflow: hidden;
+}
+[dir="rtl"] .comment .attribution {
+  float: right;
+  padding: 0 0 0 30px;
+}
+.comment .attribution img {
+  margin: 0;
+  border: 1px solid #d3d7d9;
+}
+.comment .attribution .username {
+  white-space: nowrap;
+}
+.comment .submitted p {
+  margin: 4px 0;
+  font-size: 1.071em;
+  line-height: 1.2;
+}
+.comment .submitted .comment-time {
+  font-size: 0.786em;
+  color: #68696b;
+}
+.comment .submitted .comment-permalink {
+  font-size: 0.786em;
+}
+.comment .content {
+  font-size: 0.929em;
+  line-height: 1.6;
+}
+.comment .comment-arrow {
+  background: url(../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */
+  border-left: 1px solid;
+  border-right: 1px solid;
+  height: 40px;
+  margin-left: -47px; /* LTR */
+  margin-top: 10px;
+  position: absolute;
+  width: 20px;
+}
+[dir="rtl"] .comment .comment-arrow {
+  background-image: url(../images/comment-arrow-rtl.gif);
+  margin-left: 0;
+  margin-right: -47px;
+}
+.comment .comment-text {
+  padding: 10px 25px;
+  border: 1px solid #d3d7d9;
+  display: table-cell;
+  vertical-align: top;
+  position: relative;
+  width: 100%;
+}
+.comment .indented {
+  margin-left: 40px; /* LTR */
+}
+[dir="rtl"] .comment .indented {
+  margin-right: 40px;
+  margin-left: 0;
+}
+.comment ul.links {
+  padding: 0 0 0.25em 0;
+}
+.comment ul.links li {
+  padding: 0 0.5em 0 0; /* LTR */
+}
+[dir="rtl"] .comment ul.links li {
+  padding: 0 0 0.5em;
+}
+.comment.unpublished {
+  margin-right: 5px; /* LTR */
+  padding: 5px 2px 5px 5px; /* LTR */
+}
+[dir="rtl"] .comment.unpublished {
+  margin-left: 5px;
+  margin-right: 0;
+  padding: 5px 5px 5px 2px;
+}
+.comment.unpublished .comment-text .comment-arrow {
+  border-left: 1px solid #fff4f4;
+  border-right: 1px solid #fff4f4;
+}
+
+.comment-footer {
+  display: table-row;
+}

core/themes/bartik/css/components/content.css

+/* ----------------- Content ------------------ */
+
+.content,
+.node__content {
+  margin-top: 10px;
+}
+h1#page-title {
+  font-size: 2em;
+  line-height: 1;
+}
+#content h2 {
+  margin-bottom: 2px;
+  font-size: 1.429em;