@canopy-iiif/app 1.5.10 → 1.5.12

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/_buttons.scss

@@ -17,7 +17,7 @@
 
     &--primary {
       background-color: var(--color-accent-default);
-      color: var(--color-gray-50);
+      color: var(--color-accent-50);
       box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
 
       &:hover,
@@ -27,8 +27,7 @@
     }
 
     &--secondary {
-      border: 1px solid
-        color-mix(in srgb, var(--color-gray-300) 60%, transparent);
+      border: 1px solid var(--color-gray-200);
       color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
       background-color: var(--color-gray-50);
 
@@ -49,32 +48,6 @@
     }
   }
 
-  html[data-accent="amber"],
-  html[data-accent="yellow"],
-  html[data-accent="lime"],
-  html[data-accent="mint"],
-  html[data-accent="sky"] {
-    .canopy-button--primary {
-      color: var(--color-gray-900);
-    }
-  }
-
-  html.dark {
-    .canopy-button--primary {
-      color: var(--color-gray-900);
-    }
-
-    &[data-accent="amber"],
-    &[data-accent="yellow"],
-    &[data-accent="lime"],
-    &[data-accent="mint"],
-    &[data-accent="sky"] {
-      .canopy-button--primary {
-        color: var(--color-gray-50);
-      }
-    }
-  }
-
   .canopy-button-group {
     display: flex;
     flex-direction: column;

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

@@ -11,7 +11,7 @@
     --hero-height: 520px;
     --hero-bg-start: var(--color-gray-50);
     --hero-bg-mid: var(--color-accent-100);
-    --hero-bg-end: var(--color-accent-100);
+    --hero-bg-end: var(--color-accent-200);
     --hero-dot-bg: var(--color-accent-300);
     --hero-dot-active-bg: var(--color-accent-default);
 
@@ -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/_nav-tree.scss

@@ -43,7 +43,14 @@
     margin: -0.25rem;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
+    cursor: pointer;
+    flex-grow: 1;
+
+    &:hover,
+    &:focus {
+      color: var(--color-accent-default);
+    }
   }
 
   .canopy-nav-tree__toggle:focus-visible {
@@ -61,7 +68,7 @@
     margin-top: 0.25rem;
   }
 
-  .canopy-nav-tree__item[data-expanded='true'] .canopy-nav-tree__toggle-icon {
+  .canopy-nav-tree__item[data-expanded="true"] .canopy-nav-tree__toggle-icon {
     transform: rotate(180deg);
   }
 }

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

@@ -21,7 +21,7 @@
 .canopy-sub-navigation__link,
 .canopy-sub-navigation__tree .canopy-nav-tree__link,
 .canopy-modal__section-nav .canopy-nav-tree__link {
-  display: block;
+  display: inline;
   padding: 0.382rem 0.618;
   border-radius: 0.382rem;
   color: inherit;
@@ -30,6 +30,7 @@
   transition:
     background-color 120ms ease,
     color 120ms ease;
+  flex-shrink: 1;
 }
 
 .canopy-sub-navigation__link:hover,
@@ -42,14 +43,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 +67,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 +140,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

@@ -48,7 +48,6 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.618rem;
   }
 
   .canopy-modal__nav-item {
@@ -86,7 +85,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-gray-700);
+    justify-content: flex-end;
+    cursor: pointer;
+    flex-grow: 1;
+
+    &:hover,
+    &:focus {
+      color: var(--color-accent-default);
+    }
   }
 
   .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),
@@ -168,7 +168,7 @@
   margin-right: 1px;
   border: 0;
   background: var(--color-accent-default);
-  color: #fff;
+  color: var(--color-accent-50);
   font-weight: 300;
   font-size: 1rem;
   padding: 0.382rem 0.618rem;

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;