Diagnostics: Chip styling

Screenshot: http://shortn/_gDqXwFySMr

Spec: https://carbon.googleplex.com/cros-ux/pages/diagnostics/mvp/cda946b2-7a91-4b33-90ca-1e054cd986fc#ce65ba52-0b2f-4307-aab1-196fce16bc22

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: Ied96e5fc3601e1e47bec04d9d9c9b6bb14034dd7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2556009
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Joon Ahn <joonbug@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842342}

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -2,7 +2,7 @@
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('batteryTitle')]]</div>
-  <div id="batteryStatusChipInfo" slot="chip">
+  <div id="batteryStatusChipInfo" slot="chip" class="diagnostics-chip">
     [[getDesignedFullCharge_(batteryHealth_.chargeFullDesignMilliampHours)]]
   </div>
   <!-- TODO(michaelcheco): Replace placeholder icon. -->

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -2,7 +2,9 @@
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('cpuTitle')]]</div>
-  <div id="cpuChipInfo" slot="chip">[[cpuChipInfo_]]</div>
+  <div id="cpuChipInfo" slot="chip" class="diagnostics-chip">
+    [[cpuChipInfo_]]
+  </div>
   <!-- TODO(michaelcheco): Replace placeholder icon. -->
   <iron-icon slot="icon" icon="cr:add"></iron-icon>
   <!-- TODO(michaelcheco): Add i18n string for percent number format -->

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

 <style include="diagnostics-shared diagnostics-fonts">
-  ::slotted([slot=chip]) {
-    background-color: var(--google-grey-100);
-    border-radius: 16px;
-    color: var(--diagnostics-overview-text-color);
-    padding: 4px 8px;
-  }
   ::slotted([slot=icon]) {
     background-color: var(--google-blue-50);
     border-radius: 50%;
@@ -30,7 +24,6 @@
   }
 
   .card-header {
-    @apply --diagnostics-default-font;
     display: flex;
     justify-content: space-between;
     min-height: 25px;

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -4,6 +4,7 @@
       --diagnostics-default-font-family: "Google Sans", Roboto, sans-serif;
       --diagnostics-header-font-family: Roboto, sans-serif;
       --diagnostics-data-point-font-family: Roboto, sans-serif;
+      --diagnostics-overview-font-family: Roboto, sans-serif;
 
       --diagnostics-default-font-size: 14px;
       --diagnostics-header-font-size: 22px;
@@ -18,11 +19,11 @@
       --diagnostics-header-font-weight: 600;
       --diagnostics-data-point-title-font-weight: 400;
       --diagnostics-data-point-subtitle-font-weight: 450;
-      --diagnostics-overview-font-weight: 500;
+      --diagnostics-overview-font-weight: 400;
 
       --diagnostics-default-text-color: var(--google-grey-900);
       --diagnostics-header-text-color: var(--google-grey-900);
-      --diagnostics-overview-text-color: var(--google-grey-600);
+      --diagnostics-overview-text-color: var(--google-grey-900);
       --diagnostics-data-point-title-color: var(--google-grey-900);
       --diagnostics-data-point-subtitle-color: var(--google-grey-700);
 
@@ -48,7 +49,7 @@
           font-weight: var(--diagnostics-data-point-subtitle-font-weight);
       };
       --diagnostics-overview-font: {
-          font-family: var(--diagnostics-default-font-family);
+          font-family: var(--diagnostics-overview-font-family);
           font-size: var(--diagnostics-overview-font-size);
           font-weight: var(--diagnostics-overview-font-weight);
       };

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html

@@ -21,6 +21,15 @@
       margin-left: 20px;
     }
 
+    .diagnostics-chip {
+      @apply --diagnostics-overview-font;
+      background-color: var(--google-grey-200);
+      border-radius: 16px;
+      color: var(--diagnostics-overview-text-color);
+      height: 20px;
+      padding: 4px 8px 0;
+    }
+
     .divider {
       border-left: 1px solid var(--google-grey-200);
       height: 32px;

chromeos/components/diagnostics_ui/resources/overview_card.html

 <style include="diagnostics-shared diagnostics-fonts">
   #marketingName {
-    font-weight: var(--diagnostics-overview-font-weight);
-    margin-right: 5px;
+    font-weight: 500;
+    margin-right: 4px;
   }
 
   #overviewCardContainer {
     display: flex;
+    height: 48px;
     justify-content: center;
   }
-
-  .overview-chip {
-    @apply --diagnostics-overview-font;
-    background-color: var(--google-grey-100);
-    border-radius: 16px;
-    color: var(--diagnostics-overview-text-color);
-    margin-right: 15px;
-    padding: 10px;
-  }
 </style>
 <div id="overviewCardContainer">
-  <div class="overview-chip">
+  <div class="diagnostics-chip">
     <span id="marketingName">[[systemInfo_.marketingName]]</span>
     <span id="deviceInfo">[[deviceInfo_]]</span>
   </div>