Issue #2336141 by lauriii, LewisNyman, rteijeiro, balagan, emma.maria, stefika: Create reusable color classes

core/modules/system/css/system.admin.css

@@ -211,10 +211,10 @@ small .admin-link:after {
   width: 16px;
   margin-top: 2px;
 }
-.system-status-report .error .status-icon div {
+.system-status-report .status-icon--error div {
   background-image: url(../../../misc/icons/ea2800/error.svg);
 }
-.system-status-report .warning .status-icon div {
+.system-status-report .status-icon--warning div {
   background-image: url(../../../misc/icons/e29700/warning.svg);
 }
 .system-status-report .status-title {

core/modules/system/css/system.theme.css

@@ -529,8 +529,10 @@ ul.tabs {
   margin-top: 0.769em;
 }
 
-/* @TODO Separate tables and messages styling */
+/* 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 */
@@ -540,33 +542,24 @@ ul.tabs {
   box-shadow: 8px 0 0 #77b259;
   margin-left: 0;
 }
-.messages--status {
-  color: #325e1c;
-}
-.messages--status {
-  background-color: #f3faef;
-}
 
+/* 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;
 }
-.messages--warning,
-.warning {
-  color: #734c00;
-}
-.messages--warning,
-table tr.warning,
-table tr.warning:hover {
-  background-color: #fdf8ed;
-}
 
+/* 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 */
@@ -575,15 +568,6 @@ table tr.warning:hover {
   border-color: #f9c9bf transparent #f9c9bf #f9c9bf;
   box-shadow: 8px 0 0 #e62600;
 }
-.messages--error,
-.error {
-  color: #a51b00;
-}
-.messages--error,
-table tr.error,
-table tr.error:hover {
-  background-color: #fcf4f2;
-}
 .messages--error p.error {
   color: #a51b00;
 }

core/modules/system/templates/status-report.html.twig

@@ -25,20 +25,24 @@
   </thead>
   <tbody>
   {% for requirement in requirements %}
-    <tr class="{{ requirement.severity_status }}">
-      <td class="status-icon">
-        <div title="{{ requirement.severity_title }}">
-          <span class="visually-hidden">{{ requirement.severity_title }}</span>
-        </div>
-      </td>
-      <td class="status-title">{{ requirement.title }}</td>
-      <td class="status-value">
-        {{ requirement.value }}
-        {% if requirement.description %}
-          <div class="description">{{ requirement.description }}</div>
-        {% endif %}
-      </td>
-    </tr>
+    {% if requirement.severity_status in ['warning', 'error'] %}
+      <tr class="color-{{ requirement.severity_status }}">
+    {% else %}
+      <tr>
+    {% endif %}
+        <td class="status-icon status-icon--{{ requirement.severity_status }}">
+          <div title="{{ requirement.severity_title }}">
+            <span class="visually-hidden">{{ requirement.severity_title }}</span>
+          </div>
+        </td>
+        <td class="status-title">{{ requirement.title }}</td>
+        <td class="status-value">
+          {{ requirement.value }}
+          {% if requirement.description %}
+            <div class="description">{{ requirement.description }}</div>
+          {% endif %}
+        </td>
+      </tr>
   {% endfor %}
   </tbody>
 </table>

core/themes/seven/css/components/colors.css

@@ -0,0 +1,16 @@
+/**
+ * Reusable colors.
+ */
+.color-success {
+  color: #325e1c;
+  background-color: #f3faef;
+}
+.color-warning {
+  color: #734c00;
+  background-color: #fdf8ed;
+}
+.color-error {
+  color: #a51b00;
+  background-color: #fcf4f2;
+}
+

core/themes/seven/css/components/tables.css

@@ -37,6 +37,16 @@ tbody tr:hover,
 tbody tr:focus {
   background: #f7fcff;
 }
+
+/* See colors.css */
+tbody tr.color-warning:hover,
+tbody tr.color-warning:focus {
+  background: #fdf8ed;
+}
+tbody tr.color-error:hover,
+tbody tr.color-error:focus {
+  background: #fcf4f2;
+}
 td,
 th {
   vertical-align: middle;

core/themes/seven/seven.libraries.yml

@@ -14,6 +14,7 @@ global-styling:
       css/components/breadcrumb.css: {}
       css/components/buttons.css: {}
       css/components/buttons.theme.css: {}
+      css/components/colors.css: {}
       css/components/comments.css: {}
       css/components/messages.css: {}
       css/components/dropbutton.component.css: {}