@canopy-iiif/app 1.5.10 → 1.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/styles/base/_heading.scss

@@ -27,7 +27,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;
   }

package/ui/styles/base/_markdown.scss

@@ -12,7 +12,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 {

package/ui/styles/components/_article-card.scss

@@ -39,7 +39,7 @@
     flex-wrap: wrap;
     gap: 1.618rem;
     font-size: 0.8333rem;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
 
   mark {

package/ui/styles/components/_bibliography.scss

@@ -70,11 +70,10 @@
 .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;
 }

package/ui/styles/components/_card.scss

@@ -35,7 +35,7 @@
       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%;
     }
   }

package/ui/styles/components/_diagram.scss

@@ -18,7 +18,7 @@
   display: block;
   text-align: center;
   padding-bottom: 1.618rem;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   font-weight: 300;
 }
 

package/ui/styles/components/_footer.scss

@@ -1,7 +1,7 @@
 @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 {

package/ui/styles/components/_interstitial-hero.scss

@@ -139,7 +139,7 @@
     .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);
     }
   }
@@ -153,12 +153,12 @@
   &__breadcrumb a {
     color: inherit;
     text-decoration: none;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
 
   &__breadcrumb a:hover,
   &__breadcrumb a:focus-visible {
-    color: var(--color-accent-700);
+    color: var(--color-accent-default);
     outline: none;
   }
 

package/ui/styles/components/_map.scss

@@ -75,7 +75,7 @@
       padding: 0;
       font-size: 0.9222rem;
       line-height: 1.4;
-      color: var(--color-gray-700);
+      color: var(--color-gray-muted);
     }
 
     &-link {
@@ -96,7 +96,7 @@
         font-weight: 600;
         letter-spacing: 0.05em;
         text-transform: uppercase;
-        color: var(--color-gray-600);
+        color: var(--color-gray-muted);
       }
 
       &-list {
@@ -127,13 +127,13 @@
       }
 
       &-text {
-        color: var(--color-gray-800);
+        color: var(--color-gray-muted);
       }
 
       &-summary {
         margin: 0.125rem 0 0;
         font-size: 0.8125rem;
-        color: var(--color-gray-700);
+        color: var(--color-gray-muted);
       }
     }
   }

package/ui/styles/components/_referenced-items.scss

@@ -29,7 +29,7 @@
 .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;
 }
 
@@ -49,7 +49,7 @@
   text-transform: uppercase;
   margin: 0;
   font-weight: 400;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .references__item {
@@ -69,6 +69,6 @@
 }
 
 .references__empty {
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-style: italic;
 }

package/ui/styles/components/_sub-navigation.scss

@@ -42,14 +42,14 @@
 .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__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;
 }
 
@@ -66,7 +66,7 @@
   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;
@@ -139,7 +139,7 @@
     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 {

package/ui/styles/components/_timeline.scss

@@ -17,12 +17,12 @@
 .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;
 }
@@ -90,7 +90,7 @@
 .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;
@@ -137,7 +137,7 @@
 .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;
 }
@@ -155,7 +155,7 @@
 .canopy-timeline__group-count {
   font-size: 0.9222rem;
   font-weight: 300;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .canopy-timeline__connector {
@@ -168,22 +168,22 @@
   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 {

package/ui/styles/components/_work.scss

@@ -52,7 +52,7 @@
         text-transform: uppercase;
         margin: 0;
         font-weight: 400;
-        color: var(--color-gray-800);
+        color: var(--color-gray-muted);
       }
 
       dd {

package/ui/styles/components/header/_header.scss

@@ -93,7 +93,7 @@
 
   .canopy-header__icon-button:hover,
   .canopy-header__icon-button:focus-visible {
-    color: var(--color-accent-700);
+    color: var(--color-accent-default);
     outline: none;
   }
 

package/ui/styles/components/header/_navbar.scss

@@ -86,7 +86,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
 
   .canopy-modal__nav-toggle:focus-visible {

package/ui/styles/components/iiif/_image.scss

@@ -21,7 +21,7 @@
 
   &__caption {
     margin: 0.75rem 0 0;
-    color: var(--color-gray-800);
+    color: var(--color-gray-muted);
     font-size: 0.875rem;
     line-height: 1.4;
   }

package/ui/styles/components/modal/_modal.scss

@@ -82,7 +82,7 @@
 
   .canopy-modal__close:hover,
   .canopy-modal__close:focus-visible {
-    color: var(--color-accent-700);
+    color: var(--color-accent-default);
     outline: none;
   }
 

package/ui/styles/components/search/_filters.scss

@@ -2,7 +2,6 @@
   .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 {
@@ -16,7 +15,7 @@
     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 {
@@ -33,7 +32,7 @@
   .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 {
@@ -41,10 +40,6 @@
     border-radius: 0.75rem;
     background: var(--color-gray-50);
     overflow: hidden;
-
-    &[open] {
-      background: var(--color-gray-100);
-    }
   }
 
   .canopy-search-filters__facet-summary {
@@ -67,12 +62,11 @@
   .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;
@@ -92,8 +86,9 @@
     border: 1px solid var(--color-gray-300);
     padding: 0.375rem 0.75rem;
     font-size: var(--font-size-sm);
-    color: var(--color-gray-700);
-    transition: border-color var(--duration-fast) var(--easing-standard),
+    color: var(--color-gray-muted);
+    transition:
+      border-color var(--duration-fast) var(--easing-standard),
       box-shadow var(--duration-fast) var(--easing-standard);
 
     &:focus {
@@ -108,9 +103,10 @@
     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),
+    transition:
+      background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
 
     &:hover {
@@ -127,7 +123,7 @@
     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 {
@@ -155,7 +151,7 @@
 
   .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 {
@@ -178,16 +174,16 @@
     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),
+    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,
@@ -205,7 +201,7 @@
 
   .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;
   }
 

package/ui/styles/components/search/_form.scss

@@ -78,7 +78,7 @@
   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),

package/ui/styles/components/search/_results.scss

@@ -21,7 +21,7 @@
     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;
 
     &.active,
@@ -41,7 +41,7 @@
     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;
@@ -161,7 +161,7 @@
   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 {
@@ -217,7 +217,7 @@
 
 .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;

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);
@@ -505,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;
 }
 
@@ -525,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 {
@@ -545,7 +545,7 @@ section[data-footnotes] ul li,
 }
 
 .references__empty {
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-style: italic;
 }
 
@@ -620,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;
 }
@@ -712,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 {
@@ -876,7 +875,7 @@ section[data-footnotes] ul li,
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
   .canopy-modal__nav-toggle:focus-visible {
     outline: 2px solid var(--color-accent-default);
@@ -911,7 +910,7 @@ section[data-footnotes] ul li,
 @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;
@@ -1005,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 {
@@ -1155,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 {
@@ -1166,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 {
@@ -1411,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;
 }
@@ -1598,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);
 }
@@ -1718,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 {
@@ -1734,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;
@@ -1835,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 {
@@ -1889,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;
@@ -1903,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;
@@ -1915,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;
@@ -1929,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);
@@ -1937,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;
@@ -1958,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;
@@ -1980,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 {
@@ -1993,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);
   }
@@ -2009,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;
@@ -2033,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;
@@ -2053,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 {
@@ -2075,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) {
@@ -2185,14 +2178,14 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .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__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;
 }
 
@@ -2209,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;
@@ -2274,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 {
@@ -2320,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;
 }
 
@@ -2409,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;
@@ -2437,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;
 }
@@ -2494,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;
@@ -2539,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;
 }
@@ -2557,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 {
@@ -2570,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 {
@@ -2751,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;
@@ -2770,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;
@@ -2795,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;

package/ui/theme.js

@@ -44,8 +44,8 @@ const STEP_MAP = {
 const AVAILABLE = new Set(
   Object.keys(radixColors).filter(
     (key) =>
-      /^[a-z]+$/.test(key) && radixColors[key] && radixColors[key][`${key}1`]
-  )
+      /^[a-z]+$/.test(key) && radixColors[key] && radixColors[key][`${key}1`],
+  ),
 );
 
 const APPEARANCES = new Set(["light", "dark"]);
@@ -114,7 +114,7 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
       const value = brandScale[lvl];
       if (value) vars[`--color-accent-${lvl}`] = value;
     }
-    if (brandScale["700"]) vars["--color-accent-default"] = brandScale["700"];
+    if (brandScale["800"]) vars["--color-accent-default"] = brandScale["800"];
   }
   if (grayScale) {
     for (const lvl of LEVELS) {
@@ -122,15 +122,15 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
       if (value) vars[`--color-gray-${lvl}`] = value;
     }
     if (grayScale["900"]) vars["--color-gray-default"] = grayScale["900"];
-    if (grayScale["600"]) vars["--color-gray-muted"] = grayScale["600"];
+    if (grayScale["800"]) vars["--color-gray-muted"] = grayScale["800"];
   }
   if (brandScale && grayScale) {
-    if (brandScale["700"])
-      vars["--colors-accent"] = `${brandScale["700"]} !important`;
     if (brandScale["800"])
-      vars["--colors-accentAlt"] = `${brandScale["800"]} !important`;
-    if (brandScale["400"])
-      vars["--colors-accentMuted"] = `${brandScale["400"]} !important`;
+      vars["--colors-accent"] = `${brandScale["800"]} !important`;
+    if (brandScale["900"])
+      vars["--colors-accentAlt"] = `${brandScale["900"]} !important`;
+    if (brandScale["600"])
+      vars["--colors-accentMuted"] = `${brandScale["600"]} !important`;
     if (grayScale["900"]) {
       const primary = `${grayScale["900"]} !important`;
       vars["--colors-primary"] = primary;