@explorer-1/vue 0.3.9 → 1.0.0

package/src/components/HeroLarge/HeroLarge.vue

@@ -49,7 +49,7 @@
               />
               <div
                 v-else-if="label"
-                class="font-secondary text-base font-semibold tracking-wider no-underline uppercase"
+                class="text-subtitle"
               >
                 {{ label }}
                 <span class="sr-only">.</span>
@@ -57,14 +57,13 @@
             </div>
             <h1
               v-if="title"
-              class="lg:w-3/4 xl:w-3/5 xl:text-10xl lg:text-9xl md:text-8xl text-7xl lg:tracking-tightest lg:leading-tighter mb-5 font-bold leading-tight"
-              :class="{ uppercase: !themeStore.isEdu }"
+              class="lg:w-3/4 xl:w-3/5 xl:text-10xl lg:text-9xl md:text-8xl text-7xl lg:leading-tighter mb-5 font-display font-bold leading-tight"
             >
               {{ title }}
             </h1>
             <p
               v-if="summary"
-              class="lg:w-1/2 2xl:w-2/5 xl:text-6xl lg:text-4xl md:text-2xl lg:leading-tight text-lg font-medium"
+              class="font-display lg:w-1/2 2xl:w-2/5 xl:text-6xl lg:text-4xl md:text-2xl lg:leading-tight text-lg"
             >
               {{ summary }}
             </p>

package/src/components/HeroMedium/HeroMedium.vue

@@ -73,7 +73,7 @@
               <span class="sr-only">.</span>
             </p>
           </div>
-          <p class="text-h3 font-semibold mb-0">
+          <p class="text-h3 mb-0">
             <span class="mr-2">{{ feature.title }}</span>
             <span
               class="text-action-light lg:hidden can-hover:group-hover:ml-2 ml-0 text-4xl transition-all duration-200 ease-in"

package/src/components/HomepageCarousel/HomepageCarousel.vue

@@ -107,7 +107,7 @@
                       h-full
                       px-5
                       -ml-5
-                      font-semibold
+                      font-medium
                       text-base text-left text-white text-opacity-75
                       transition-all duration-200 ease-in
                       ${index === 0 ? '!text-white' : ''}

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -58,7 +58,7 @@
         <div class="lg:w-3/4 xl:w-1/2 block">
           <p
             v-if="item.heading"
-            class="font-primary text-jpl-red-light lg:text-3xl lg:mb-0 mb-2 text-xl font-semibold tracking-normal uppercase"
+            class="text-subtitle text-jpl-red-light mb-2 text-xl uppercase"
           >
             {{ item.heading }}
             <span class="sr-only">.</span>
@@ -73,7 +73,7 @@
           >
             <p
               v-if="item.slideTitle"
-              class="lg:text-9xl leading-tighter text-5xl font-extrabold tracking-tighter"
+              class="font-display lg:text-9xl leading-tighter text-5xl font-extrabold mb-1"
             >
               <span class="mr-2">{{ item.slideTitle }}</span>
               <span

package/src/components/HomepageEmbedBlock/HomepageEmbedBlock.vue

@@ -6,7 +6,7 @@
   >
     <h2
       v-if="data[0].heading"
-      class="font-primary text-gray-dark lg:text-6xl mb-5 text-3xl font-semibold leading-normal tracking-normal uppercase"
+      class="text-h3 text-gray-dark mb-5"
     >
       {{ data[0].heading }}
     </h2>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -23,7 +23,7 @@
           </BaseHeading>
           <p
             v-if="data.summary"
-            class="text-body-md"
+            class="text-body-lg"
           >
             {{ data.summary }}
           </p>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarouselItem.vue

@@ -65,11 +65,11 @@ export default defineComponent({
       <div
         class="shifted-text can-hover:group-hover:-mt-3 lg:mt-0 -mt-3 transition-all duration-500 ease-in-out"
       >
-        <p class="mb-1 text-3xl font-semibold">{{ data.name }}</p>
-        <p class="text-gray-light-mid mb-1 text-lg whitespace-nowrap">
+        <p class="mb-1 text-h4">{{ data.name }}</p>
+        <p class="text-gray-light-mid text-body-md whitespace-nowrap">
           Current missions: {{ data.currentMissions }}
         </p>
-        <p class="text-gray-light-mid mb-2 text-lg whitespace-nowrap">
+        <p class="text-gray-light-mid mb-1 text-body-md whitespace-nowrap">
           Past missions: {{ data.pastMissions }}
         </p>
         <div

package/src/components/HomepageStats/HomepageStats.vue

@@ -197,7 +197,7 @@
                 inline
                 class="text-gray-mid-dark mt-2"
               >
-                <span class="text-sm"> Proximity {{ slotProps.formattedValue }} </span>
+                <span class="text-sm font-primary"> Proximity {{ slotProps.formattedValue }} </span>
               </BaseUnitToggle>
               <BaseLink
                 link-class="block"

package/src/components/HomepageTeaserBlock/HomepageTeaserBlock.vue

@@ -77,7 +77,7 @@
               </template>
             </div>
             <div class="px-6 pt-6 pb-4">
-              <div class="mb-2 text-3xl font-medium">
+              <div class="mb-2 text-h5">
                 {{ theCard.heading }}
               </div>
               <p

package/src/components/ImageDetailContextImage/ImageDetailContextImage.vue

@@ -5,7 +5,7 @@
     @click="toggleContextImagePreview()"
   >
     <div class="flex flex-row items-center justify-between py-3 text-white uppercase">
-      <span class="font-secondary pr-3 tracking-wider">Context Image</span>
+      <span class="font-secondary pr-3">Context Image</span>
       <span
         :class="{
           hidden: contextImagePreviewShow,

package/src/components/MetaPanel/MetaPanel.vue

@@ -191,7 +191,7 @@ const standardsIste = computed(() => {
                 </div>
                 <div class="w-full lg:grid grid-cols-2 lg:gap-6 xl:gap-10">
                   <div v-if="standardsEla">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       English Language Arts Standards (CCSS - ELA)
                     </div>
                     <span class="sr-only">.</span>
@@ -201,7 +201,7 @@ const standardsIste = computed(() => {
                     />
                   </div>
                   <div v-if="standardsMath">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       Math Standards (CCSS - Math)
                     </div>
                     <span class="sr-only">.</span>
@@ -211,7 +211,7 @@ const standardsIste = computed(() => {
                     />
                   </div>
                   <div v-if="standardsNgss">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       Science Standards (NGSS)
                     </div>
                     <span class="sr-only">.</span>
@@ -221,7 +221,7 @@ const standardsIste = computed(() => {
                     />
                   </div>
                   <div v-if="standardsIste">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       Technology Standards (ISTE)
                     </div>
                     <span class="sr-only">.</span>

package/src/components/MetaPanelAccordion/MetaPanelAccordion.vue

@@ -22,11 +22,11 @@ const { standards } = reactive(props)
       :item="item.standard as AccordionItemObject"
     >
       <template #heading>
-        <div class="w-full text-left pr-5">
-          <div class="text-sm tracking-normal text-action mb-0 can-hover:group-hover:underline">
+        <div class="font-primary w-full text-left pr-5">
+          <div class="text-sm text-action mb-0 can-hover:group-hover:underline">
             {{ item.standard.domain?.domain }}
           </div>
-          <div class="text-sm text-gray-mid-dark font-normal tracking-normal">
+          <div class="text-sm text-gray-mid-dark font-normal">
             {{ item.standard.code }}
           </div>
         </div>

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -47,7 +47,7 @@ const time = computed(() => {
   <div
     class="MetadataEduResource"
     :class="{
-      '-compact text-sm xl:text-base': props.compact,
+      '-compact text-xs xl:text-sm font-secondary': props.compact,
       'text-body-lg': !props.compact
     }"
   >

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -76,7 +76,7 @@ const location = computed(() => {
   <div
     class="MetadataEvent"
     :class="{
-      '-compact text-sm xl:text-base': props.compact,
+      '-compact text-xs xl:text-sm font-secondary': props.compact,
       'text-body-lg': !props.compact,
       '-allow-break': props.allowBreak
     }"

package/src/components/MissionDetailAbout/MissionDetailAbout.vue

@@ -16,7 +16,7 @@
       v-if="hasContent"
       class="col-span-3 col-start-9"
     >
-      <p class="font-secondary mb-5 text-base leading-tight tracking-wider uppercase">
+      <p class="text-subtitle mb-5">
         {{ sidebarTitle }}
       </p>
       <ul class="lg:mb-5 flex flex-wrap items-start mb-3">

package/src/components/MissionDetailHero/MissionDetailHero.vue

@@ -42,15 +42,17 @@
             >
               <p
                 v-if="subtitle"
-                class="text-body-sm mb-3 font-normal tracking-normal"
+                class="text-body-sm mb-3"
               >
                 {{ subtitle }}
               </p>
-              <h1 class="text-h1-alt break-normal">
+              <h1 class="text-h1-alt break-normal mb-2">
                 {{ title }}
               </h1>
 
-              <p class="xl:text-2xl lg:text-md xl:pr-26 xl:leading-normal text-xl leading-relaxed">
+              <p
+                class="font-display xl:text-2xl lg:text-md xl:pr-26 xl:leading-normal text-xl leading-relaxed"
+              >
                 {{ summary }}
               </p>
               <BaseButton

package/src/components/MissionDetailHighlights/MissionDetailHighlights.vue

@@ -150,7 +150,7 @@
               <div
                 v-if="missionTitle"
                 ref="missionHighlightsTitle"
-                class="sm:mt-16 relative mt-10 text-white transform -translate-x-1/2 opacity-0"
+                class="sm:mt-16 relative mt-10 text-white font-secondary transform -translate-x-1/2 opacity-0"
               >
                 {{ missionTitle }}
               </div>

package/src/components/MissionDetailHighlights/MissionDetailHighlightsCarouselItem.vue

@@ -2,7 +2,7 @@
   <div v-if="item">
     <p
       v-if="item.date"
-      class="font-secondary text-jpl-red-light mb-4 font-semibold tracking-wider uppercase"
+      class="text-subtitle text-jpl-red-light mb-4"
     >
       {{
         // @ts-ignore
@@ -11,7 +11,7 @@
     </p>
     <p
       v-if="item.dateFreeform"
-      class="font-secondary text-jpl-red-light mb-4 font-semibold tracking-wider uppercase"
+      class="text-subtitle text-jpl-red-light mb-4"
     >
       {{ item.dateFreeform }}
     </p>

package/src/components/MissionDetailStats/MissionDetailStatsMini.vue

@@ -7,7 +7,7 @@
           v-if="showClock && startDateTime"
           class="theme-inner lg:col-span-4 xl:col-span-4 2xl:col-span-3 sm:col-span-7 col-span-11"
         >
-          <p class="text-jpl-blue-lighter text-subtitle mb-3">
+          <p class="text-blue-200 text-subtitle mb-3">
             {{ clockTypeLabel }}
           </p>
           <BaseTimer
@@ -25,7 +25,7 @@
           :distance-api-urls="distanceApiUrls"
         >
           <template #label="slotProps">
-            <p class="text-jpl-blue-lighter text-subtitle mb-3">
+            <p class="text-blue-200 text-subtitle mb-3">
               {{ slotProps.label }}
             </p>
           </template>

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -17,7 +17,7 @@
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
             v-if="heading"
-            class="MixinCarousel__Heading text-h3 defaultTheme:uppercase"
+            class="MixinCarousel__Heading text-h3"
           >
             {{ heading }}
           </h2>
@@ -51,7 +51,7 @@
           >
             <div class="xl:-ml-22 top-1/2 absolute left-0 z-30 -ml-20">
               <BaseButton
-                class="swiper-prev xl:text-xl"
+                class="swiper-prev !text-lg xl:!text-xl"
                 :aria-label="heading + ' - Previous slide'"
               >
                 <template #icon>
@@ -71,7 +71,7 @@
             </div>
             <div class="xl:-mr-22 top-1/2 absolute right-0 z-30 -mr-20">
               <BaseButton
-                class="swiper-next xl:text-xl"
+                class="swiper-next !text-lg xl:!text-xl"
                 :aria-label="heading + ' - Next slide'"
               >
                 <template #icon>

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -255,7 +255,7 @@ export default defineComponent({
 
         if (slide.type === 'image') {
           caption = `<div class="mx-auto container">
-              ${slide.title ? `<h6 class="font-semibold text-4xl mb-1">${slide.title}</h6>` : ''}
+              ${slide.title ? `<h6 class="font-bold text-4xl mb-1">${slide.title}</h6>` : ''}
               ${
                 caption.length
                   ? `<div class="caption inline sm:flex text-body-md pb-2 mr-2 sm:mr-0"><div class="inline">${caption}</div></div>`

package/src/components/MixinFancybox/MixinFancyboxOpenButton.vue

@@ -16,7 +16,7 @@ export default defineComponent({
     role="presentation"
   >
     <div class="BaseButton -primary -icon-only pointer-events-none">
-      <span class="icon">
+      <span class="icon !text-lg xl:!text-xl">
         <IconExpand />
       </span>
     </div>

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -3,7 +3,7 @@
     <NavDropdownToggle
       v-click-outside="closeDropdown"
       :aria-expanded="dropdownVisible ? true : false"
-      class="group relative z-20 px-4 font-medium border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
+      class="group relative z-20 px-4 font-bold font-display border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
       :class="{
         '-open': dropdownVisible
       }"

package/src/components/NavDesktop/NavDesktopDropdownContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-gradient-to-r edu:bg-transparent edu:from-black/[.98] edu:to-jpl-violet/[.98] edu:to-90% 3xl:px-0 px-4 py-10 text-white"
+    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-primary-dark 3xl:px-0 px-4 py-10 text-white"
   >
     <div
       v-if="data.menuColumns"
@@ -29,8 +29,8 @@
           :key="`MenuDescriptionColumn${index}`"
           class="order-2 col-span-3"
         >
-          <p class="text-medium text-6xl">{{ item.title }}</p>
-          <p class="text-sm leading-relaxed">
+          <p class="font-display text-6xl">{{ item.title }}</p>
+          <p class="text-base leading-relaxed">
             {{ item.description }}
           </p>
         </div>

package/src/components/NavDesktop/NavDesktopDropdownMore.vue

@@ -36,7 +36,7 @@
         <div class="row-span-1 row-start-2">
           <p
             v-if="data.strapline"
-            class="text-medium pr-5 mb-8 text-6xl leading-tight"
+            class="text-medium pr-5 mb-8 text-6xl font-display leading-tight"
           >
             {{ data.strapline }}
           </p>

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -12,13 +12,13 @@
     }"
   >
     <!-- navbar -->
-    <div class="header-bg z-10 absolute inset-0 mx-auto"></div>
+    <div class="header-bg z-10 absolute inset-0 mx-auto bg-primary-dark"></div>
     <div class="px-4">
       <div class="h-18 container flex items-center justify-between mx-auto">
         <!-- branding -->
         <NavLogoLinks class="w-[17rem] z-20 flex flex-shrink-0 my-2 -ml-1">
           <img
-            :src="LogoWhite"
+            :src="LogoOutline"
             class="print:hidden"
             alt="JPL Logo"
             width="324"
@@ -33,9 +33,9 @@
           />
         </NavLogoLinks>
         <!-- site title -->
-        <div class="ml-2 pl-3 xl:ml-3 xl:pl-5 border-l border-white border-opacity-30 z-20">
+        <div class="ml-3 pl-3 md:ml-1 xl:ml-3 xl:pl-5 border-l border-white border-opacity-30 z-20">
           <BaseLink
-            class="text-white font-bold text-2xl xl:text-3xl"
+            class="text-white font-display font-bold text-2xl xl:text-3xl"
             to="/edu/"
             link-class="py-2"
             variant="none"
@@ -69,7 +69,7 @@
             <BaseLink
               href="https://www.nasa.gov/learning-resources/"
               variant="none"
-              class="NavDesktopLink group relative z-20 font-medium border-t-2 border-transparent text-sm xl:text-base px-2 xl:px-4"
+              class="NavDesktopLink group relative z-20 font-display font-bold border-t-2 border-transparent text-sm xl:text-base px-2 xl:px-4"
               link-class="inline-block py-2 transition-colors duration-100 ease-in border-b-2 border-transparent group-hover:border-white flex flex-wrap-none items-center"
               external-target-blank
             >
@@ -129,7 +129,7 @@ import IconSearch from './../Icons/IconSearch.vue'
 import IconClose from './../Icons/IconClose.vue'
 import type { NavLinkObject, BreadcrumbObject } from './../../utils/mixins'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
-import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
+import LogoOutline from '@explorer-1/common/src/images/svg/logo-tribrand-outline.svg'
 import type { BreadcrumbPathObject } from '../../interfaces'
 import {
   mixinIsActivePath,
@@ -189,8 +189,8 @@ export default defineComponent({
       // This is used in transition logic to avoid distracting animations on route changes
       // without this check, the nav would swoop in/out on a route change if it was visible before the route change occured (e.g. partially scrolled up on a page)
       scrolledCurrentPage: false,
-      LogoWhite: LogoWhite,
-      LogoColor: LogoColor
+      LogoColor,
+      LogoOutline
     }
   },
   computed: {

package/src/components/NavHeading/NavHeading.vue

@@ -6,7 +6,7 @@
     <template v-if="data.headingPage && data.heading">
       <BaseLink
         variant="none"
-        class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4"
+        class="text-subtitle text-jpl-blue-lighter edu:text-purple-300 inline-block mb-4"
         link-class="px-2 block"
         :to="data.headingPage.url"
       >
@@ -14,7 +14,7 @@
       </BaseLink>
     </template>
     <template v-else-if="data.heading">
-      <div class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4">
+      <div class="text-subtitle text-jpl-blue-lighter edu:text-purple-300 inline-block mb-4">
         <span class="px-2 block">{{ data.heading }}</span>
       </div>
     </template>

package/src/components/NavHighlight/NavHighlight.vue

@@ -35,7 +35,12 @@
         {{ customLabel || highlight.label }}
       </p>
       <span class="sr-only">.</span>
-      <p v-if="highlight.title">{{ highlight.title }}</p>
+      <p
+        v-if="highlight.title"
+        class="text-base"
+      >
+        {{ highlight.title }}
+      </p>
     </BaseLink>
   </div>
 </template>

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -3,7 +3,7 @@
     <li
       v-for="(child, index) in item.children"
       :key="index"
-      class="text-base border-b border-gray-light"
+      class="text-base border-b border-gray-300"
     >
       <BaseLink
         :href="child.path"

package/src/components/NavLinkList/NavLinkList.vue

@@ -15,7 +15,7 @@
       >
         <BaseLink
           variant="none"
-          class="block text-base xl:text-lg font-medium leading-tight text-white"
+          class="block font-display text-base xl:text-lg font-medium leading-tight text-white"
           :href="item.path && !getRouterLink(item) ? item.path : undefined"
           :to="getRouterLink(item) ? getRouterLink(item) : undefined"
           link-class="can-hover:hover:underline inline-block px-2 py-3 -ml-2"

package/src/components/NavMobile/NavMobile.stories.js

@@ -17,6 +17,7 @@ export default {
       }
     }
   },
+
   globals: {
     viewport: {
       value: 'mobile2',

package/src/components/NavMobile/NavMobile.vue

@@ -7,16 +7,14 @@
     >
       <!-- navbar -->
       <div class="relative w-full">
-        <div
-          class="h-18 flex w-full justify-between items-center px-5 edu:bg-gradient-to-r edu:from-black edu:to-primary edu:to-90% edu:bg-black"
-        >
+        <div class="h-18 flex w-full justify-between items-center px-5 edu:bg-primary-dark">
           <!-- branding -->
           <div class="flex items-center">
             <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3 edu:w-[12rem]">
               <template v-if="themeStore.theme === 'ThemeEdu'">
                 <img
                   class="print:hidden"
-                  :src="LogoWhite"
+                  :src="LogoOutline"
                   alt="JPL Logo"
                   width="324"
                   height="72"
@@ -42,7 +40,7 @@
               class="-ml-1 pl-2 border-l border-white border-opacity-30 z-20 print:border-black"
             >
               <BaseLink
-                class="text-white font-bold text-xl pl-px"
+                class="text-white font-display font-bold text-xl pl-px"
                 to="/edu/"
                 variant="none"
               >
@@ -146,6 +144,7 @@ import { mapStores } from 'pinia'
 import { eventBus } from './../../utils/eventBus'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
 import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
+import LogoOutline from '@explorer-1/common/src/images/svg/logo-tribrand-outline.svg'
 import { useHeaderStore } from './../../store/header'
 import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
@@ -219,7 +218,8 @@ export default defineComponent({
       menuVisible: false,
       searchQuery: null,
       LogoColor,
-      LogoWhite
+      LogoWhite,
+      LogoOutline
     }
   },
   computed: {

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -5,7 +5,7 @@
   >
     <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
-      class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
+      class="group relative block w-full px-4 py-2 text-xl font-bold font-display text-left"
       :class="{
         '-open': dropdownVisible
       }"

package/src/components/NavMobile/NavMobileLink.vue

@@ -3,7 +3,7 @@
     v-if="data"
     variant="none"
     class="NavMobileLink"
-    :link-class="`flex items-center py-2 text-lg leading-tight ${linkClass}`"
+    :link-class="`flex items-center py-2 text-lg font-display leading-tight ${linkClass}`"
     :href="data.path && !getRouterLink(data) ? data.path : undefined"
     :to="getRouterLink(data) ? getRouterLink(data) : undefined"
     :exact="exact"

package/src/components/NavSecondary/NavSecondary.vue

@@ -13,10 +13,10 @@
   >
     <div
       class="w-full mx-auto"
-      :class="{ 'bg-gradient-to-r from-black to-primary bg-transparent to-90% text-white': invert }"
+      :class="{ 'bg-primary-dark text-white': invert }"
     >
       <div
-        :class="`nav-secondary-container edu:border-0 lg:container lg:px-0 lg:whitespace-normal lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-sm font-medium whitespace-nowrap ${invert ? 'border-0' : 'border-t border-gray-mid text-gray-mid-dark border-opacity-50'}`"
+        :class="`nav-secondary-container edu:border-0 lg:container lg:px-0 lg:whitespace-normal lg:overflow-visible relative px-4 pb-0 mx-auto overflow-x-auto text-base font-medium whitespace-nowrap ${invert ? 'border-0' : 'border-t border-gray-mid text-gray-mid-dark border-opacity-50'}`"
       >
         <div class="lg:ml-0 2xl:-mr-3 lg:justify-end flex -ml-3">
           <template v-for="(item, index) in theBreadcrumb">

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-click-outside="closeDropdown"
-    class="NavSecondaryDropdown relative"
+    class="NavSecondaryDropdown relative font-display"
     :class="{
       'mr-auto': index === 0
     }"
@@ -121,11 +121,11 @@ export default defineComponent({
       return this.invert
         ? {
             'mr-auto text-white font-bold secondary-root': index === 0,
-            'text-white font-semibold mt-[.2rem]': index !== 0,
+            'text-white font-bold mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }
         : {
-            'mr-auto text-primary font-semibold secondary-root': index === 0,
+            'mr-auto text-primary font-bold secondary-root': index === 0,
             'text-gray-dark font-medium mt-[.2rem]': index !== 0,
             '-open': this.dropdownVisible
           }

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="NavSecondaryDropdownContent">
+  <ul class="NavSecondaryDropdownContent text-base">
     <li v-if="includeOverview">
       <BaseLink
         :to="item.path"
@@ -91,13 +91,13 @@ export default defineComponent({
   methods: {
     linkClass(item?: NavItemObject, isLast?: Boolean) {
       // default
-      let computedClass = 'py-2 lg:py-4'
+      let computedClass = 'pt-2 lg:pt-4'
       if (!item) {
         // if first (aka Overview)
-        computedClass = 'py-2 lg:pt-4 lg:pb-4'
+        computedClass = 'pt-2 lg:pt-4'
       } else if (item.children && item.children.length > 0) {
         // if has children
-        computedClass = 'pt-2 pb-1 lg:pt-4 lg:pb-2'
+        computedClass = 'pt-2 lg:pt-4'
       } else if (isLast) {
         // if the very last
         computedClass = 'py-2 lg:pt-4 lg:pb-6'
@@ -106,11 +106,11 @@ export default defineComponent({
     },
     nestedLinkClass(isLast: Boolean, parentIsLast: Boolean) {
       // default
-      let computedClass = 'pt-2 pb-1 lg:py-2'
+      let computedClass = 'pt-2 lg:pt-2'
       if (isLast) {
         // if the last
         if (!parentIsLast) {
-          computedClass = 'py-2 lg:pt-2 lg:pb-4'
+          computedClass = 'pt-2 lg:pt-2'
         } else {
           // the last of the last parent
           computedClass = 'pt-2 pb-3 lg:pt-2 lg:pb-6'