Top rebrand

_data/messages.yml

@@ -30,8 +30,8 @@ sprints:
 
 problem-statement:
   problem-statement:
-    en: Problem Statement
-    esp: Planteamiento del Problema
+    en: Sprint Topic
+    esp: Tema del Sprint
   agency:
     en: Agency
     esp: Agencia

_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/cards/pdf-card.html

@@ -6,7 +6,7 @@
 
   <a href="{{ site.baseurl }}/assets/files/{{ include.content.pdf }}" target="_blank"
     class="text-no-underline">
-    <div class="card-header">
+    <div class="card-header bg-top-black">
       <h3 class="text-sans-1 text-ls-1 display-flex flex-align-center">
           <img class="maxh-3 margin-right-1" src="{{ site.baseurl }}/assets/img/icons/pdf_icon_white.svg" alt="an icon of a computer document"/>
           View PDF

_includes/cards/problem-statement-prod-card.html

@@ -12,11 +12,11 @@
   {% if card.link %}
   <a href="{{ card.link }}" class="product-link">
   {% endif %}
-    <div class="card-header {%if isInverse %}bg-white{% endif %}">
-      <h3 class="text-sans-1 text-ls-1 {% unless isInverse %}{% if card.link %}text-primary-lighter{% endif %}{% endunless %} {%if card.link%}text-underline{% endif %}">
+    <div class="{% unless isInverse %}bg-top-lblue{% endunless %} {%if isInverse %}bg-top-white{% endif %} card-header">
+      <h3 class="text-sans-1 text-ls-1 {% unless isInverse %}{% if card.link %}text-top-black{% endif %}{% endunless %} {%if card.link%}text-underline{% endif %}">
         {% if isInverse %}
           {{ card.tech_team_text }}
-        {% else %}  
+        {% else %}
           {{ card.title }}
         {% endif %}
       </h3>

_includes/dch/datakit-card.html

@@ -16,9 +16,9 @@
     style="background-image: url('{{ kit.image | relative_url }}')">
 
     {% if kit.upcoming %}
-      <h2 class="z-200 text-no-underline" id="{{kit-id}}">{{ titleText }}</h2>
+      <h2 class="z-200 text-no-underline font-family-serif text-normal text-top-white" id="{{kit-id}}">{{ titleText }}</h2>
     {% else %}
-      <h2 class="z-200" id="{{kit-id}}"><a href="{{ kit-href }}">{{ titleText }}</a></h2>
+      <h2 class="z-200 font-family-serif text-normal text-top-white" id="{{kit-id}}"><a href="{{ kit-href }}">{{ titleText }}</a></h2>
     {% endif %}
     {% include 1px-transparent.html alt=kit.image-alt %}
     <p class="z-200">{{kit.lead}}</p>

_includes/dch/dataset-card.html

@@ -7,17 +7,17 @@
 {% endfor %}
 
 <li id="data-set-card-{{item.name | slugify}}" class="desktop:grid-col-4 tablet:grid-col-4 usa-card__dataset margin-bottom-2 data-set-card" name="data-set-card">
-  <div class="usa-card__container datasets__card bg-primary-darker">
+  <div class="usa-card__container datasets__card bg-top-white">
     {% if item.featuredDataset %}
       <div class="datasets__featured-banner">
         <span>Recommended</span>
       </div>
     {% endif %}
     <header class="usa-card__header usa-dark-background">
-      <h2 class="usa-card__heading text-white font-sans-md" value="{{data.name | slugify}}">
+      <h2 class="usa-card__heading text-top-black text-top-important font-serif-md text-normal" value="{{data.name | slugify}}">
         {% unless item.hasMultipleLinks %}
           <a href="{{item.link}}" target="_blank"
-            class="usa-link" aria-label="{{ item.name }}">
+            class="usa-link text-top-black text-top-important" aria-label="{{ item.name }}">
             {{ item.name }}
           </a>
         {% else %}
@@ -43,10 +43,10 @@ <h2 class="usa-card__heading text-white font-sans-md" value="{{data.name | slugi
       <span class="pc-inactive dataset__ps">
         {% for filter in filters %}{{ filter | slugify }} {% endfor %}
       </span>
-      <p class="dataset__org font-mono-xs text-white">by {{ item.organization_text | upcase }}</p>
+      <p class="dataset__org font-mono-md text-top-black text-top-important">by {{ item.organization_text | upcase }}</p>
     </header>
     <div class="usa-card__body usa-dark-background margin-bottom-4">
-      <p class="font-sans-xs text-white">{{ item.description}}</p>
+      <p class="font-sans-sm text-top-black text-top-important">{{ item.description}}</p>
       {% if item.hasMultipleLinks %}
         <p>There are mutiple links associated with this data set. Please refer to the list below: </p>
         {% assign listed-links = item.link | split: "- " | slice: 1, 100 %}
@@ -79,7 +79,7 @@ <h2 class="usa-card__heading text-white font-sans-md" value="{{data.name | slugi
             {% assign isContactPage = true %}
           {% endif %}
 
-        <h3 class="text-medium text-white margin-bottom-05">
+        <h3 class="text-medium text-top-black text-top-important font-family-serif margin-bottom-05">
           {% if isContactPage %}
             Contact Page:
           {% else %}
@@ -95,16 +95,16 @@ <h3 class="text-medium text-white margin-bottom-05">
               {% assign isContactPage = true %}
             {% endif %}
             <li
-              class="{%unless forloop.last%}margin-bottom-1{%endunless%} bg-gray-5 radius-md padding-x-1 padding-y-05"
+              class="{%unless forloop.last%}margin-bottom-1{%endunless%} radius-md padding-x-1 padding-y-05"
             >
               {% if isContactPage %}
                 <a href="{{ steward.email }}" class="usa-link">
                   {{ steward.name | strip }}
                 </a>
               {% else %}
-                <span class="text-primary-darker">{{ steward.name | strip }},</span>
+                <span class="text-top-black font-sans-sm">{{ steward.name | strip }},</span>
                 <a href="mailto:{{ steward.email }}?subject=Regarding The Opportunity Project Dataset: {{steward.name}}"
-                class="usa-link dch-card__steward-link">
+                class="usa-link dch-card__steward-link text-top-black font-sans-sm">
                   {{ steward.email }}
                 </a>
               {% endif %}

_includes/dch/dch__filters.html

@@ -21,15 +21,15 @@
         {% endfor %}
       </ul>
     </div>
-    <hr class="margin-top-3 margin-bottom-0 border-accent-warm">
-  
+    <!-- <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/faq-glossary.html

@@ -3,14 +3,14 @@
     {% for category in categories %}
     <div class="usa-accordion usa-accordion--multiselectable padding-top-2 padding-bottom-5" data-allow-multiple>
       {% for term in category.terms %}
-      <h4 class="usa-accordion__heading">
-        <button type="button" class="usa-accordion__button light bg-{{ category.color }} text-white"
+      <h4 class="usa-accordion__heading font-family-serif">
+        <button type="button" class="usa-accordion__button light bg-{{ category.color }} text-white text-normal"
           aria-expanded="true" aria-controls="m-a{{ term.num }}">
           {{term.term}}
         </button>
       </h4>
 
-      <div id="m-a{{ term.num }}" class="usa-accordion__content usa-prose">
+      <div id="m-a{{ term.num }}" class="usa-accordion__content usa-prose border-top-dashed">
         <p class="grid-container padding-y-5 overflow-hidden">
           {{ term.definition | markdownify | remove: "<p>" | remove: "</p>" }}
         </p>

_includes/featured-speakers.html

@@ -1,8 +1,8 @@
 {% assign data = include.data %}
 <div class="grid-container padding-x-8 tablet:padding-x-7">
-  <h2 class="text-center">Featured Past Speakers</h2>
+  <h2 class="text-center font-family-serif text-normal">Featured Past Speakers</h2>
     <div
-      class="featured-speakers-container grid-row flex-justify-center text-base-darkest flex-align-center flex-row margin-top-4 tablet:margin-top-5 desktop:margin-top-15">
+      class="featured-speakers-container grid-row flex-justify-center text-base-darkest flex-align-center flex-row margin-top-4 tablet:margin-top-5 desktop:margin-top-10">
       {% for speaker in page.speakers %}
       <div
         class="featured-speaker-individual tablet:grid-col-3 display-flex flex-column flex-justify-start flex-align-center margin-bottom-3 tablet:margin-bottom-1 tablet:margin-x-0 tablet:padding-x-1">

_includes/footer.html

@@ -1,12 +1,12 @@
-<footer class="usa-footer site-footer bg-base-darkest" role="contentinfo">
-  <div class="usa-footer__secondary-section bg-base-darkest">
+<footer class="usa-footer site-footer" role="contentinfo">
+  <div class="usa-footer__secondary-section">
     <div class="grid-container footer-content padding-left-4 padding-right-3">
 
 
       <div class="grid-row">
         {% for section in site.data.nav.footer %}
-        <div class="usa-media-block__footer text-white tablet:grid-col-2">
-          <h3 class="padding-top-4 tablet:padding-y-4 desktop:padding-y-5 text-uppercase">
+        <div class="usa-media-block__footer tablet:grid-col-2">
+          <h3 class="padding-top-4 tablet:padding-y-4 desktop:padding-y-5 font-family-serif text-normal">
             {% if section.subsection.href %}
             <a href="{{ section.subsection.href }}" class="text-underline">{{ section.subsection.title }}</a>
             {% else %}
@@ -26,11 +26,11 @@ <h3 class="padding-top-4 tablet:padding-y-4 desktop:padding-y-5 text-uppercase">
           {% endfor %}
 
         <div class="usa-media-block__footer display-none tablet:display-block tablet:grid-col-2 subsection-subscribe">
-          <h3 class=" text-bold text-white padding-top-4 text-uppercase">Subscribe</h3>
-          <p class=" text-white margin-0">
+          <h3 class="padding-top-4 desktop:padding-top-5 font-family-serif text-normal">Subscribe</h3>
+          <p class="margin-0 padding-top-2">
           Sign up to our email list to be notified of<br> news and opportunities.
           </p>
-          <a href="{{ site.contacts.mailing-list }}" class="usa-button usa-button--secondary  site-button site-cta width-full">
+          <a href="{{ site.contacts.mailing-list }}" class="usa-button usa-button--secondary  site-button site-cta width-full text-bold">
             SIGN UP
           </a>
           <!-- check mobile button -->
@@ -41,12 +41,12 @@ <h3 class=" text-bold text-white padding-top-4 text-uppercase">Subscribe</h3>
       <div class="grid-row margin-top-2 tablet:display-none">
         <div class="tablet:order-last tablet:padding-left-3">
           <div class="usa-media-block__footer">
-            <p class="text-white">
+            <p class="text-top-black">
               Sign up to our email list <br> to be notified of news<br> and opportunities.
             </p>
             <a href="{{ site.contacts.mailing-list }}"
-              class="usa-button usa-button--secondary  site-button site-cta">
-              SUBSCRIBE
+              class="usa-button usa-button--secondary  site-button site-cta text-bold">
+              SIGN UP
             </a>
           </div>
           <!-- check tablet/desktop button -->
@@ -56,7 +56,7 @@ <h3 class=" text-bold text-white padding-top-4 text-uppercase">Subscribe</h3>
     </div>
   </div>
 
-  <div class="footer-section-bottom usa-media-block__footer grid-row display-flex flex-align-center text-white opacity-80 margin-top-5 tablet:margin-top-1 padding-bottom-5">
+  <div class="footer-section-bottom usa-media-block__footer grid-row display-flex flex-align-center opacity-80 margin-top-5 tablet:margin-top-1 padding-bottom-5">
     {% for bottomLink in site.data.nav.footer-bottom %}
     <a href="{% unless bottomLink.isExternal %}{{ site.baseurl }}/{% endunless %}{{ bottomLink.href }}" class="border-base-dark
              {% unless forloop.first %} border-left padding-left-2 {% endunless %}

_includes/hero.html

@@ -32,7 +32,7 @@
       </div>
     </div>
 {% elsif page.class == "datakit" %}
-<section class="interior-hero bg-base-darkest usa-dark-background desktop:padding-bottom-9 padding-bottom-5">
+<section class="interior-hero bg-top-primary usa-dark-background desktop:padding-bottom-9 padding-bottom-5">
   <div class="grid-container">
     <div class="maxw-mobile-lg margin-top-2">
       <div>
@@ -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>
@@ -88,9 +88,9 @@ <h1 class="usa-hero__title">{{ page.hero.text}}</h1>
   or page.class == "sprint-process"
   or page.class =="summit"
   %}
-<section class="interior-hero bg-base-darkest usa-dark-background {{page.background}}">
+<section class="interior-hero {{page.background}}">
   <div class="grid-container usa-hero__bg display-flex flex-column flex-align-center">
-    <h1 class="usa-hero__title text-center font-family-serif">{{ page.hero.text}}</h1>
+    <h1 class="usa-hero__title text-center font-family-serif text-normal">{{ page.hero.text}}</h1>
     {% if page.class == "sprints" %}
     <div class="usa-hero__subtitle text-center">
       {{ site.data.messages.sprints.hero-text[page.lang] | newline_to_br | markdownify }}