@canopy-iiif/app 1.5.9 → 1.5.11

package/ui/styles/index.css

@@ -64,7 +64,7 @@
   }
   .canopy-lead {
     font-size: 1.382rem;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
     margin: 0.5rem 0 2rem 0;
     line-height: 1.4;
   }
@@ -89,7 +89,7 @@ hr {
 blockquote {
   font-size: 1.222em;
   padding: 1.618rem 2.618rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .markdown-table__frame {
@@ -265,7 +265,7 @@ section[data-footnotes] ul li,
   opacity: 0;
   transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
   background: var(--color-gray-100);
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-size: 83.333%;
 }
 .canopy-card[data-image-loaded=true] .canopy-card-media > img {
@@ -330,7 +330,7 @@ section[data-footnotes] ul li,
   flex-wrap: wrap;
   gap: 1.618rem;
   font-size: 0.8333rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-article-card mark {
   background: color-mix(in srgb, var(--color-accent-500) 38.2%, transparent);
@@ -339,6 +339,11 @@ section[data-footnotes] ul li,
   border-radius: 0.2rem;
 }
 
+@layer base {
+  :root {
+    --canopy-desktop-breakpoint: 70rem;
+  }
+}
 .canopy-layout {
   --canopy-layout-sidebar-width: 13rem;
   --canopy-layout-content-nav-width: 14rem;
@@ -372,8 +377,12 @@ section[data-footnotes] ul li,
   position: relative;
 }
 
+.canopy-layout__sidebar {
+  display: none;
+}
+
 .canopy-layout__content-nav {
-  display: flex;
+  display: none;
   flex-direction: column;
   gap: 0.75rem;
   align-items: stretch;
@@ -393,6 +402,12 @@ section[data-footnotes] ul li,
 }
 
 @media (min-width: 70rem) {
+  .canopy-layout__sidebar {
+    display: block;
+  }
+  .canopy-layout__content-nav {
+    display: flex;
+  }
   .canopy-layout--with-sidebar {
     grid-template-columns: var(--canopy-layout-sidebar-width) minmax(0, 1fr);
   }
@@ -403,6 +418,62 @@ section[data-footnotes] ul li,
     grid-template-columns: var(--canopy-layout-sidebar-width) minmax(0, 1fr) var(--canopy-layout-content-nav-width);
   }
 }
+@layer components {
+  .canopy-nav-tree {
+    color: inherit;
+  }
+  .canopy-nav-tree__heading {
+    font-weight: 600;
+    margin-bottom: 0.618rem;
+  }
+  .canopy-nav-tree__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .canopy-nav-tree__item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .canopy-nav-tree__row {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .canopy-nav-tree__row .canopy-nav-tree__link {
+    flex: 1;
+    min-width: 0;
+  }
+  .canopy-nav-tree__link {
+    text-decoration: none;
+  }
+  .canopy-nav-tree__toggle {
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0.25rem;
+    margin: -0.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .canopy-nav-tree__toggle:focus-visible {
+    outline: 2px solid var(--color-accent-default);
+    outline-offset: 2px;
+  }
+  .canopy-nav-tree__toggle-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    transition: transform 150ms ease;
+  }
+  .canopy-nav-tree__children {
+    margin-top: 0.25rem;
+  }
+  .canopy-nav-tree__item[data-expanded=true] .canopy-nav-tree__toggle-icon {
+    transform: rotate(180deg);
+  }
+}
 .referenced-items {
   margin: clamp(2rem, 6vw, 4rem) 0;
   width: 100%;
@@ -434,7 +505,7 @@ section[data-footnotes] ul li,
 .referenced-items--empty {
   border-top: 1px solid var(--color-gray-200);
   padding: 1.5rem 0;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-style: italic;
 }
 
@@ -454,7 +525,7 @@ section[data-footnotes] ul li,
   text-transform: uppercase;
   margin: 0;
   font-weight: 400;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .references__item {
@@ -474,7 +545,7 @@ section[data-footnotes] ul li,
 }
 
 .references__empty {
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-style: italic;
 }
 
@@ -549,11 +620,10 @@ section[data-footnotes] ul li,
 .bibliography__note-label {
   font-variant-numeric: tabular-nums;
   font-weight: 600;
-  color: var(--color-gray-500);
+  color: var(--color-gray-muted);
 }
 
 .bibliography__note-body {
-  color: var(--color-gray-900);
   font-size: 0.95rem;
   line-height: 1.5;
 }
@@ -641,7 +711,7 @@ section[data-footnotes] ul li,
   }
   .canopy-header__icon-button:hover,
   .canopy-header__icon-button:focus-visible {
-    color: var(--color-accent-700);
+    color: var(--color-accent-default);
     outline: none;
   }
   .canopy-header__search-icon {
@@ -677,7 +747,7 @@ section[data-footnotes] ul li,
   .canopy-modal--search .canopy-search-teaser > #cplist {
     padding: 0.25rem 0;
   }
-  @media (min-width: 48rem) {
+  @media (min-width: 70rem) {
     .canopy-header__menu {
       display: none;
     }
@@ -738,9 +808,11 @@ section[data-footnotes] ul li,
     gap: 1rem;
     font-size: 1rem;
   }
+  .canopy-nav-links.canopy-header__desktop-nav {
+    display: none;
+  }
   .canopy-nav-links a {
     color: var(--color-gray-900);
-    font-weight: 500;
     text-decoration: none;
     padding: 0.25rem 0;
     transition: color 150ms ease;
@@ -756,80 +828,89 @@ section[data-footnotes] ul li,
   .canopy-modal--nav .canopy-modal__body {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 1rem;
   }
   .canopy-modal--nav .canopy-nav-links {
     flex-direction: column;
     align-items: stretch;
-    gap: 0.75rem;
-    font-size: 1.125rem;
-  }
-  .canopy-modal--nav .canopy-nav-links a {
-    display: block;
-    padding: 0.75rem 0;
-    font-weight: 600;
-  }
-  .canopy-modal--nav .canopy-modal__section-nav {
-    border-top: 1px solid var(--color-gray-200);
-    padding-top: 1rem;
-  }
-  .canopy-modal--nav .canopy-modal__section-label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--color-gray-500);
-    margin-bottom: 0.5rem;
+    gap: 0.618rem;
+    font-size: 1.111rem;
   }
-  .canopy-modal__section-list {
+  .canopy-modal__nav-list {
     list-style: none;
     margin: 0;
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.618rem;
   }
-  .canopy-modal__section-item {
+  .canopy-modal__nav-item {
     margin: 0;
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
   }
-  .canopy-modal__section-link {
-    display: block;
-    padding: 0.25rem 0;
-    text-decoration: none;
-    color: var(--color-gray-900);
-    font-weight: 500;
+  .canopy-modal__nav-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
   }
-  .canopy-modal__section-link:hover,
-  .canopy-modal__section-link:focus-visible {
-    color: var(--color-accent-default);
-    outline: none;
+  .canopy-modal__nav-row a {
+    flex: 1;
+    min-width: 0;
   }
-  .canopy-modal__section-link.is-active {
-    font-weight: 600;
+  .canopy-modal--nav .canopy-nav-links a {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.618rem 0;
   }
-  .canopy-modal__section-link.is-label {
-    color: var(--color-gray-600);
-    font-weight: 600;
-    cursor: default;
+  .canopy-modal__nav-toggle {
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0.25rem;
+    margin: -0.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-gray-muted);
   }
-  .canopy-modal__section-list--nested {
-    margin: 0.25rem 0 0.25rem 0.75rem;
-    padding-left: 0.5rem;
-    border-left: 1px solid var(--color-gray-200);
+  .canopy-modal__nav-toggle:focus-visible {
+    outline: 2px solid var(--color-accent-default);
+    outline-offset: 2px;
   }
-  @media (max-width: 48rem) {
-    .canopy-header__desktop-nav {
-      display: none;
-    }
+  .canopy-modal__nav-toggle-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    transition: transform 150ms ease;
   }
-  @media (min-width: 48rem) {
+  .canopy-modal__nav-item[data-expanded=true] .canopy-modal__nav-toggle-icon {
+    transform: rotate(180deg);
+  }
+  .canopy-modal--nav .canopy-modal__section-nav {
+    border-top: 1px solid var(--color-gray-200);
+    padding-top: 1rem;
+  }
+  .canopy-modal__section-nav--nested {
+    border-top: none;
+    padding-top: 0;
+    margin-top: -0.25rem;
+  }
+  @media (min-width: 70rem) {
     .canopy-modal--nav {
       display: none !important;
     }
+    .canopy-nav-links.canopy-header__desktop-nav {
+      display: flex;
+    }
   }
 }
 @layer components {
   .canopy-footer {
     border-top: 1px solid var(--color-gray-200);
-    color: var(--color-gray-800);
+    color: var(--color-gray-muted);
   }
   .canopy-footer__inner {
     margin: 0 auto;
@@ -923,7 +1004,7 @@ section[data-footnotes] ul li,
   }
   .canopy-modal__close:hover,
   .canopy-modal__close:focus-visible {
-    color: var(--color-accent-700);
+    color: var(--color-accent-default);
     outline: none;
   }
   .canopy-modal__close-icon {
@@ -1073,7 +1154,7 @@ section[data-footnotes] ul li,
 .canopy-interstitial--hero-breadcrumb .canopy-interstitial__description {
   font-size: 0.9222rem;
   font-weight: 700;
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   font-family: var(--font-mono);
 }
 .canopy-interstitial__breadcrumb {
@@ -1084,10 +1165,10 @@ section[data-footnotes] ul li,
 .canopy-interstitial__breadcrumb a {
   color: inherit;
   text-decoration: none;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-interstitial__breadcrumb a:hover, .canopy-interstitial__breadcrumb a:focus-visible {
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   outline: none;
 }
 .canopy-interstitial__breadcrumb-separator, .canopy-interstitial__breadcrumb-current {
@@ -1329,7 +1410,7 @@ section[data-footnotes] ul li,
 }
 .canopy-iiif-image__caption {
   margin: 0.75rem 0 0;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   font-size: 0.875rem;
   line-height: 1.4;
 }
@@ -1516,7 +1597,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   gap: 0.5rem;
   border: 1px solid var(--color-gray-200);
   border-radius: 0.75rem;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   box-shadow: var(--shadow-sm);
   transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
 }
@@ -1636,7 +1717,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   padding: 0.382rem 0.618rem;
   font-size: 1rem;
   cursor: pointer;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   transition: all 0.2s ease-in-out;
 }
 .canopy-search-tabs button.active, .canopy-search-tabs button:hover {
@@ -1652,7 +1733,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
   border: 1px solid var(--color-gray-200);
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   background: var(--color-gray-100);
   border-radius: 6px;
   cursor: pointer;
@@ -1753,7 +1834,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   padding: 0.382rem 0.618rem;
   font-weight: 600;
   font-size: 0.8333rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .canopy-search-teaser__item {
@@ -1807,7 +1888,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 
 .canopy-search-teaser__meta {
   font-size: 0.78rem;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1821,7 +1902,6 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   .canopy-modal--filters .canopy-modal__panel {
     width: min(100%, 48rem);
     max-height: min(90vh, 720px);
-    background: var(--color-gray-100);
   }
   .canopy-modal--filters .canopy-modal__body--filters {
     display: flex;
@@ -1833,7 +1913,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     margin: 0 0 0.75rem;
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__body {
     display: grid;
@@ -1847,7 +1927,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   .canopy-search-filters__empty {
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__facet {
     border: 1px solid var(--color-gray-200);
@@ -1855,9 +1935,6 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     background: var(--color-gray-50);
     overflow: hidden;
   }
-  .canopy-search-filters__facet[open] {
-    background: var(--color-gray-100);
-  }
   .canopy-search-filters__facet-summary {
     display: flex;
     align-items: center;
@@ -1876,11 +1953,10 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   .canopy-search-filters__facet-count {
     font-size: var(--font-size-xs);
     font-weight: 400;
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__facet-content {
     border-top: 1px solid var(--color-gray-200);
-    background: var(--color-gray-100);
     padding: 1rem;
     max-height: 15rem;
     overflow-y: auto;
@@ -1898,7 +1974,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     border: 1px solid var(--color-gray-300);
     padding: 0.375rem 0.75rem;
     font-size: var(--font-size-sm);
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
     transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
   }
   .canopy-search-filters__quick-input:focus {
@@ -1911,7 +1987,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     border: 1px solid var(--color-gray-200);
     padding: 0.25rem 0.5rem;
     font-size: var(--font-size-xs);
-    color: var(--color-gray-600);
+    color: var(--color-gray-muted);
     background: var(--color-gray-100);
     transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
   }
@@ -1927,7 +2003,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     flex-direction: column;
     gap: 0.5rem;
     font-size: var(--font-size-sm);
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__facet-item {
     display: flex;
@@ -1951,7 +2027,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   }
   .canopy-search-filters__facet-empty {
     font-size: var(--font-size-sm);
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__footer {
     display: flex;
@@ -1971,14 +2047,13 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     border-radius: 9999px;
     padding: 0.5rem 1.25rem;
     font-size: var(--font-size-sm);
-    font-weight: 600;
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
   }
   .canopy-search-filters__button--secondary {
     border: 1px solid var(--color-gray-300);
     background: transparent;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__button--secondary:hover,
   .canopy-search-filters__button--secondary:focus-visible {
@@ -1993,7 +2068,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   }
   .canopy-search-filters__button--primary:hover,
   .canopy-search-filters__button--primary:focus-visible {
-    background: var(--color-accent-700);
+    background: var(--color-accent-default);
     outline: none;
   }
   @media (max-width: 48rem) {
@@ -2065,24 +2140,25 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   color: inherit;
 }
 
-.canopy-sub-navigation__heading {
-  font-weight: 600;
-  margin-bottom: 0.618rem;
-}
-
-.canopy-sub-navigation__list {
+.canopy-sub-navigation__list,
+.canopy-sub-navigation__tree .canopy-nav-tree__list,
+.canopy-modal__section-nav .canopy-nav-tree__list {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.canopy-sub-navigation__item {
+.canopy-sub-navigation__item,
+.canopy-sub-navigation__tree .canopy-nav-tree__item,
+.canopy-modal__section-nav .canopy-nav-tree__item {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.canopy-sub-navigation__link {
+.canopy-sub-navigation__link,
+.canopy-sub-navigation__tree .canopy-nav-tree__link,
+.canopy-modal__section-nav .canopy-nav-tree__link {
   display: block;
   padding: 0.382rem 0.618;
   border-radius: 0.382rem;
@@ -2092,22 +2168,29 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   transition: background-color 120ms ease, color 120ms ease;
 }
 
-.canopy-sub-navigation__link:hover {
+.canopy-sub-navigation__link:hover,
+.canopy-sub-navigation__tree .canopy-nav-tree__link:hover,
+.canopy-modal__section-nav .canopy-nav-tree__link:hover {
   color: var(--color-accent-default);
 }
 
-.canopy-sub-navigation__link.is-label {
+.canopy-sub-navigation__link.is-label,
+.canopy-sub-navigation__tree .canopy-nav-tree__link.is-label,
+.canopy-modal__section-nav .canopy-nav-tree__link.is-label {
   cursor: default;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
 }
 
-.canopy-sub-navigation__link.is-disabled {
+.canopy-sub-navigation__link.is-disabled,
+.canopy-sub-navigation__tree .canopy-nav-tree__link.is-disabled,
+.canopy-modal__section-nav .canopy-nav-tree__link.is-disabled {
   cursor: default;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   font-style: italic;
 }
 
-.canopy-sub-navigation__badge {
+.canopy-sub-navigation__badge,
+.canopy-nav-tree__badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2119,7 +2202,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   z-index: 0;
   position: relative;
   background: var(--color-accent-200);
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   font-family: var(--font-sans);
   padding: 0.175rem 0.175rem;
   top: -1px;
@@ -2127,23 +2210,33 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   letter-spacing: -0.0125em;
 }
 
-.canopy-sub-navigation__link.is-active {
+.canopy-sub-navigation__link.is-active,
+.canopy-sub-navigation__tree .canopy-nav-tree__link.is-active,
+.canopy-modal__section-nav .canopy-nav-tree__link.is-active {
   color: var(--color-gray-900);
   font-weight: 600;
 }
 
-.canopy-sub-navigation__list--nested {
+.canopy-sub-navigation__list--nested,
+.canopy-sub-navigation__tree .canopy-nav-tree__list--nested,
+.canopy-modal__section-nav .canopy-nav-tree__list--nested {
   margin: 0.382rem 0 0.382rem 0.618rem;
   padding-left: 0.618rem;
   border-left: 1px solid var(--color-gray-200);
 }
 
-.canopy-sub-navigation__link.depth-0 {
+.canopy-sub-navigation__link.depth-0,
+.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-0,
+.canopy-modal__section-nav .canopy-nav-tree__link.depth-0 {
   padding-left: 0.382rem;
 }
 
 .canopy-sub-navigation__link.depth-1,
-.canopy-sub-navigation__link.depth-2 {
+.canopy-sub-navigation__link.depth-2,
+.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-1,
+.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-2,
+.canopy-modal__section-nav .canopy-nav-tree__link.depth-1,
+.canopy-modal__section-nav .canopy-nav-tree__link.depth-2 {
   padding-left: 0.382rem;
   font-size: 0.9222rem;
 }
@@ -2174,7 +2267,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-content-navigation__toggle:focus-visible {
   border-color: color-mix(in srgb, var(--color-accent-400) 65%, transparent);
   background-color: color-mix(in srgb, var(--color-accent-200) 25%, transparent);
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
 }
 
 .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
@@ -2196,7 +2289,8 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   letter-spacing: 0.05em;
 }
 
-.canopy-content-navigation--collapsed .canopy-sub-navigation__list {
+.canopy-content-navigation--collapsed .canopy-sub-navigation__list,
+.canopy-content-navigation--collapsed .canopy-sub-navigation__tree .canopy-nav-tree__list {
   display: none;
 }
 
@@ -2219,7 +2313,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   display: block;
   text-align: center;
   padding-bottom: 1.618rem;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   font-weight: 300;
 }
 
@@ -2308,7 +2402,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     text-transform: uppercase;
     margin: 0;
     font-weight: 400;
-    color: var(--color-gray-800);
+    color: var(--color-gray-muted);
   }
   body.canopy-type-work main dd {
     margin: 0;
@@ -2336,12 +2430,12 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__description {
   margin: 0;
   font-size: 0.9222rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .canopy-timeline__range {
   margin: 0;
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   font-size: 1.382rem;
   font-weight: 600;
 }
@@ -2393,7 +2487,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__step-label {
   font-size: 0.8333rem;
   font-weight: 300;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   transform: translateX(0.5rem);
   margin-top: -0.618rem;
   margin-left: -0.382rem;
@@ -2438,7 +2532,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__group-point-date {
   font-size: 1.111rem;
   letter-spacing: 0.0125em;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   font-weight: 300;
   margin-bottom: 0.382rem;
 }
@@ -2456,7 +2550,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__group-count {
   font-size: 0.9222rem;
   font-weight: 300;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .canopy-timeline__connector {
@@ -2469,22 +2563,22 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   width: clamp(2.618rem, 6vw, 2.618rem);
   height: 0.125rem;
   border-radius: 999px;
-  background: var(--color-accent-700);
+  background: var(--color-accent-default);
 }
 
 .canopy-timeline__connector-dot {
   width: 0.618rem;
   height: 0.618rem;
   border-radius: 50%;
-  background: var(--color-accent-700);
-  border: 2px solid var(--color-accent-700);
+  background: var(--color-accent-default);
+  border: 2px solid var(--color-accent-default);
 }
 
 .canopy-timeline__connector-dot.is-active {
   width: 1rem;
   height: 1rem;
-  background: var(--color-accent-700);
-  border-color: var(--color-accent-700);
+  background: var(--color-accent-default);
+  border-color: var(--color-accent-default);
 }
 
 .canopy-timeline__resources {
@@ -2650,7 +2744,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   padding: 0;
   font-size: 0.9222rem;
   line-height: 1.4;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-map__popup-link {
   display: inline-flex;
@@ -2669,7 +2763,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
 }
 .canopy-map__popup-manifests-list {
   list-style: none;
@@ -2694,12 +2788,12 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   color: var(--color-accent-600);
 }
 .canopy-map__popup-manifests-text {
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
 }
 .canopy-map__popup-manifests-summary {
   margin: 0.125rem 0 0;
   font-size: 0.8125rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-map .leaflet-marker-icon.canopy-map__marker {
   background: transparent;