Merge pull request #991 from sadiejay/top-rebrand

Top rebrand

Author: sadiejay

_datakits/2020-census.md

@@ -40,7 +40,7 @@ data-experts:
     {% for contact in group.contacts %}
       <li>
         {{contact.name}},
-        <a class="usa-link" href="mailto:{{contact.email}}">{{contact.email}}</a>
+        <a class="usa-link text-top-black" href="mailto:{{contact.email}}">{{contact.email}}</a>
       </li>
     {% endfor %}
   </ul>

_includes/dch/dch__filters.html

@@ -22,14 +22,14 @@
       </ul>
     </div>
     <hr class="margin-top-3 margin-bottom-0 border-accent-warm">
-  
+
   {% else %}
-    
+
     <div class="grid-row grid-gap text-white margin-top-3">
       {% assign breakpoint = "tablet" %}
       <div class="{{breakpoint}}:grid-col-5">
         <fieldset class="usa-fieldset">
-          <legend class="usa-legend">Filter by category</legend>
+          <legend class="usa-legend text-top-black">Filter by category</legend>
           {% assign categoryHalf = data-topics.size | divided_by: 2.0 | ceil %}
           <div class="grid-container grid-row grid-gap padding-x-0">
             <div class="grid-col-6 padding-left-0">
@@ -57,7 +57,7 @@
         {% assign options = options | uniq | sort: "order" %}
         {% assign optionMidpoint = options.size | divided_by: 2.0 | ceil %}
         <fieldset class="usa-form dch__checkbox-group maxw-none" name="{{group}}">
-          <legend class="usa-legend">Filter by available {{group}}</legend>
+          <legend class="usa-legend text-top-black">Filter by available {{group}}</legend>
           <div class="grid-container grid-row grid-gap padding-x-0">
             <div class="grid-col-6 padding-left-0">
               {% for option in options limit:optionMidpoint %}

_includes/hero.html

@@ -42,7 +42,7 @@
         <a class="usa-link" href="{{ site.baseurl }}/data">All Data Kits</a>
         </div>
       <h1
-        class="hero--heading line-height-sans-3 text-semi-bold ls-2 font-lang-13 text-white margin-top-6"
+        class="hero--heading line-height-sans-3 text-normal ls-2 font-serif-14 text-white margin-top-6"
       >
         {{ page.title }}
       </h1>

_layouts/dch/datakit.html

@@ -45,7 +45,7 @@ <h2 class="text-top-black font-family-serif text-normal">Explore Datasets</h2>
         <label class="text-top-black" for="search-field">Search by keyword</label>
         <div class="display-flex margin-top-05">
           <input class="usa-input" id="search-field" type="search" name="search">
-          <button class="usa-button bg-primary-darkest" type="submit">
+          <button class="usa-button bg-top-black" type="submit">
             <span class="usa-sr-only">Search</span>
           </button>
         </div>
@@ -80,17 +80,16 @@ <h2 class="text-top-black font-family-serif text-normal">Explore Datasets</h2>
     {% endfor %}
     </ul>
 
-    {% include nav/pagination.html 
-      maxPages=5 
-      label="Datasets search results page" 
-      class="pagination--dark" 
+    {% include nav/pagination.html
+      maxPages=5
+      label="Datasets search results page"
       id="dch-pagination" %}
 
   </section>
   {% assign stripped_content = content | strip_newlines %}
   {% if stripped_content.size > 0 %}
-    <section class="usa-section grid-container padding-top-0 usa-dark-background font-sans-md text-white">
-      <hr class="margin-y-3 border-accent-warm">
+    <section class="usa-section grid-container padding-top-0 font-sans-md text-top-black">
+      <!-- <hr class="margin-y-3 border-accent-warm"> -->
       {{ content }}
     </section>
   {% endif %}

css/_uswds-theme-custom-styles.scss

@@ -141,6 +141,10 @@ $bg-top-primary:#0555A4;
   background-color: #0555A4;
 }
 
+.bg-top-black {
+ background-color: #3A2920;
+}
+
 $bg-top-green: #0b9d58;
 .bg-top-green {
   background-color: #0b9d58;
@@ -1198,19 +1202,19 @@ main {
 .dch-radio {
   background-color: initial !important;
   .dch-radio__label {
-    @include u-border-color('white');
-    @include u-bg('primary-dark');
-    @include u-color('white');
+    border-color: $text-top-black;
+    background-color: $bg-top-white;
+    color: $text-top-black;
     @include u-padding-left(2);
     text-indent: 0;
     &::before {
       display: none;
     }
   }
   input:checked+[class$=__label] {
-    @include u-bg('white');
-    @include u-text('ink');
-    @include u-border-color('primary-darker');
+    background-color: $text-top-black;
+    color: $text-top-white;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, .25);
   }
 }
 
@@ -1248,8 +1252,8 @@ main {
 .dch-card__tag {
   background-color: transparent !important;
   border: 1px solid;
-  @include u-border-color('base-lightest');
-  @include u-color('base-lightest', !important);
+  border-color: $text-top-black;
+  color: $text-top-black;
   margin-right: .1rem;
   &.usa-tag--new {
     @include u-text('bold');
@@ -1464,8 +1468,8 @@ main {
   .datasets__featured-banner {
     border-radius: 10px 10px 0 0;
     @include u-padding-x(3);
-    @include u-color('accent-warm');
-    @include u-text('italic');
+    color: $bg-top-green;
+    font-weight: 600;
     @include u-margin-top(2);
   }