@canopy-iiif/app 0.8.3 → 0.8.5

package/ui/styles/base/_heading.scss

@@ -1,7 +1,5 @@
-@use "../variables" as *;
-
 h1 {
-  font-family: $font-serif;
+  font-family: var(--font-serif);
   font-size: 2.618rem;
   line-height: 1.25;
   margin: 0 0 1rem 0;
@@ -9,7 +7,7 @@ h1 {
 }
 
 h2 {
-  font-family: $font-serif;
+  font-family: var(--font-serif);
   font-size: 1.618rem;
   line-height: 1.25;
   margin: 0 0 0.618rem 0;

package/ui/styles/base/index.scss

@@ -1,2 +1,3 @@
+@use "variables";
 @use "./common";
 @use "./heading";

package/ui/styles/components/_card.scss

@@ -4,11 +4,13 @@
   text-decoration: none;
   color: inherit;
   // light gray border
-  border: 1px solid rgb(230, 231, 234); /* slate-200 */
+  border: 1px solid var(--color-gray-200);
   border-radius: 0.5rem;
   overflow: hidden;
   transition: all 150ms cubic-bezier(0.22, 1, 0.36, 1);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.05),
+    0 1px 3px 0 rgba(0, 0, 0, 0.05);
 
   figure {
     margin: 0;
@@ -27,9 +29,15 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      display: block;
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      flex-direction: column;
       opacity: 0;
       transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
+      background: var(--color-gray-100);
+      color: var(--color-gray-600);
+      font-size: 83.333%;
     }
   }
 
@@ -64,6 +72,41 @@
   &:hover,
   &:focus {
     color: var(--color-brand-default);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.07);
+    box-shadow:
+      0 1px 2px 0 rgba(0, 0, 0, 0.07),
+      0 1px 2px 0 rgba(0, 0, 0, 0.07);
+  }
+}
+
+.canopy-annotation-card {
+  @extend .canopy-card;
+
+  padding: 1rem;
+
+  mark {
+    color: var(--color-gray-900);
+    background-color: var(--color-brand-300);
+    padding: 0.1rem 0.25rem;
+    border-radius: 0.25rem;
+    margin: 0 -0.25rem;
+
+    mark::before,
+    mark::after {
+      clip-path: inset(100%);
+      clip: rect(1px, 1px, 1px, 1px);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
+
+    mark::before {
+      content: " [highlight start] ";
+    }
+
+    mark::after {
+      content: " [highlight end] ";
+    }
   }
 }

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

@@ -0,0 +1,76 @@
+.canopy-sub-navigation {
+  font-size: 0.95rem;
+  color: inherit;
+}
+
+.canopy-sub-navigation__heading {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.canopy-sub-navigation__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.canopy-sub-navigation__item {
+  margin: 0;
+  padding: 0;
+}
+
+.canopy-sub-navigation__link {
+  display: block;
+  padding: 0.35rem 0.5rem;
+  border-radius: 0.375rem;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+
+.canopy-sub-navigation__link:hover {
+  color: var(--color-brand-default);
+}
+
+.canopy-sub-navigation__link.is-label {
+  cursor: default;
+  color: var(--color-gray-600, #52525b);
+}
+
+.canopy-sub-navigation__link.is-active {
+  color: var(--color-gray-900, #1d4ed8);
+  font-weight: 600;
+}
+
+.canopy-sub-navigation__list--nested {
+  margin: 0.35rem 0 0.35rem 0.5rem;
+  padding-left: 0.5rem;
+  border-left: 1px solid var(--color-gray-100, #e4e4e7);
+}
+
+.canopy-sub-navigation__link.depth-0 {
+  padding-left: 0.25rem;
+}
+
+.canopy-sub-navigation__link.depth-1 {
+  padding-left: calc(0.25rem);
+}
+
+.canopy-sub-navigation__link.depth-2 {
+  padding-left: calc(0.25rem * 2);
+}
+
+.canopy-sub-navigation__link.depth-3 {
+  padding-left: calc(0.25rem * 3);
+}
+
+.canopy-sub-navigation__link.depth-4 {
+  padding-left: calc(0.25rem * 4);
+}
+
+.canopy-sub-navigation__link.depth-5 {
+  padding-left: calc(0.25rem * 5);
+}

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

@@ -1,5 +1,3 @@
-@use "../../variables" as *;
-
 @layer components {
   .canopy-header {
     display: flex;
@@ -7,7 +5,6 @@
     align-items: center;
     gap: 1.618rem;
     padding: 0.618rem 1rem;
-    box-shadow: 5px 5px 19px rgba(0, 0, 0, 0.2);
-    background: #fff;
+    background: var(--color-gray-50);
   }
 }

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

@@ -1,20 +1,43 @@
-@use "../../variables" as *;
-
-.canopy-logo {
+a.canopy-logo {
   display: flex;
   align-items: center;
   gap: 0.618rem;
-  font-weight: 400;
-  font-size: 1.618rem;
-  font-family: $font-serif;
-  color: $color-gray-default;
+  font-weight: 600;
+  font-size: 1.382rem;
+  font-family: var(--font-serif);
+  color: var(--color-gray-default) !important;
+  letter-spacing: -0.025em;
+
+  &:hover {
+    text-decoration: none;
+  }
 
-  img {
+  svg {
     height: 1.618rem;
     margin-bottom: -1px;
+
+    circle.canopy-logo-backlight {
+      fill: var(--color-brand-900);
+      color: var(--color-brand-900);
+    }
+
+    path.canopy-logo-overlay {
+      fill: var(--color-brand-default);
+      color: var(--color-brand-default);
+    }
   }
+}
 
-  &:hover {
-    text-decoration: none;
+html.dark a.canopy-logo {
+  svg {
+    circle.canopy-logo-backlight {
+      fill: var(--color-brand-200) !important;
+      color: var(--color-brand-200) !important;
+    }
+
+    path.canopy-logo-overlay {
+      fill: var(--color-brand-500) !important;
+      color: var(--color-brand-500) !important;
+    }
   }
 }

package/ui/styles/components/index.scss

@@ -2,3 +2,4 @@
 @use "./header";
 @use "./hero";
 @use "./search";
+@use "./sub-navigation";

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

@@ -1,5 +1,3 @@
-@use '../../variables' as *;
-
 .canopy-search-filters-overlay {
   position: fixed;
   inset: 0;
@@ -17,7 +15,7 @@
   max-width: 48rem;
   overflow: hidden;
   border-radius: 0.75rem;
-  background: #fff;
+  background: var(--color-gray-100, #ffffff);
   box-shadow:
     0 25px 50px -12px rgba(15, 23, 42, 0.4),
     0 10px 20px rgba(15, 23, 42, 0.12);
@@ -91,7 +89,7 @@
   overflow: hidden;
 
   &[open] {
-    background: #fff;
+    background: var(--color-gray-100, #ffffff);
   }
 }
 
@@ -120,7 +118,7 @@
 
 .canopy-search-filters__facet-content {
   border-top: 1px solid var(--color-gray-200, #e0e1e6);
-  background: #fff;
+  background: var(--color-gray-100, #ffffff);
   padding: 1rem;
   max-height: 15rem;
   overflow-y: auto;
@@ -157,7 +155,7 @@
   padding: 0.25rem 0.5rem;
   font-size: var(--font-size-xs, 0.75rem);
   color: var(--color-gray-600, #80838d);
-  background: #fff;
+  background: var(--color-gray-100, #ffffff);
   transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
     color var(--duration-fast, 150ms) var(--easing-standard, ease);
 
@@ -238,7 +236,7 @@
 
 .canopy-search-filters__button--secondary {
   border: 1px solid var(--color-gray-200, #e0e1e6);
-  background: #fff;
+  background: var(--color-gray-100, #ffffff);
   color: var(--color-gray-600, #80838d);
 
   &:hover:not([disabled]) {

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

@@ -1,11 +1,13 @@
-@use "../../variables" as *;
-
 .canopy-search-form-shell {
   --search-form-label-padding-x: 0.75rem;
   --search-form-label-padding-y: 0.625rem;
   position: relative;
   backdrop-filter: blur(12px);
-  background-color: color-mix(in srgb, #fff 95%, transparent);
+  background-color: color-mix(
+    in srgb,
+    var(--color-gray-100, #f0f0f3) 95%,
+    transparent
+  );
   transition:
     box-shadow var(--duration-fast, 150ms) ease,
     background-color var(--duration-fast, 150ms) ease;
@@ -36,9 +38,13 @@
     );
   }
 
-  &:focus-within::after,
-  &[data-has-value="1"]::after {
-    opacity: 0;
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    fill: var(--color-gray-400, #b9bbc6);
+    pointer-events: none;
+    transition: fill var(--duration-fast, 150ms) var(--easing-standard, ease);
   }
 
   input[data-canopy-search-form-input] {
@@ -47,12 +53,23 @@
     outline: none;
     background: transparent;
     box-shadow: none;
-    opacity: 0;
     caret-color: transparent;
     transition: opacity var(--duration-fast, 150ms) ease;
   }
 
-  &:focus-within input[data-canopy-search-form-input],
+  &:focus-within {
+    background-color: var(--color-brand-100);
+
+    input[data-canopy-search-form-input] {
+      opacity: 1;
+      caret-color: var(--color-gray-900, #121418);
+    }
+
+    svg {
+      fill: var(--color-brand-default, #3e63dd);
+    }
+  }
+
   &[data-has-value="1"] input[data-canopy-search-form-input] {
     opacity: 1;
     caret-color: var(--color-gray-900, #121418);
@@ -101,13 +118,33 @@
   padding: var(--search-form-label-padding-y) var(--search-form-label-padding-x);
 }
 
-.canopy-search-form__icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
-  color: var(--color-gray-400, #b9bbc6);
-  pointer-events: none;
+.canopy-search-form__clear {
+  border: 0;
+  background: transparent;
+  color: rgba(100, 116, 139, 0.9);
+  font-size: 1.25rem;
+  line-height: 1;
+  padding: 0 0.25rem;
+  margin-right: 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
   transition: color var(--duration-fast, 150ms) var(--easing-standard, ease);
+
+  &:hover,
+  &:focus-visible {
+    color: var(--color-brand-600, #3e63dd);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--color-gray-100, #ffffff),
+      0 0 0 4px
+        color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
+    border-radius: 999px;
+  }
 }
 
 .canopy-search-form__input {
@@ -134,8 +171,9 @@
   align-items: center;
   gap: 0.382rem;
   border-radius: 0.382rem;
+  margin-right: 1px;
   border: 0;
-  background: $color-brand-default;
+  background: var(--color-brand-default);
   color: #fff;
   font-weight: 400;
   font-size: 1rem;
@@ -147,14 +185,14 @@
 
   &:hover,
   &:focus-visible {
-    background: $color-brand-800;
+    background: var(--color-brand-800);
     box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
   }
 
   &:focus-visible {
     outline: none;
     box-shadow:
-      0 0 0 2px #fff,
+      0 0 0 2px var(--color-gray-100, #ffffff),
       0 0 0 4px
         color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
   }

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

@@ -1,4 +1,38 @@
-@use '../../variables' as *;
+.canopy-search-tabs-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.canopy-search-results {
+  padding: 1.618rem;
+}
+
+.canopy-search-tabs {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  button {
+    background: none;
+    border: none;
+    padding: 0.382rem 0.618rem;
+    font-size: 1rem;
+    cursor: pointer;
+    color: var(--color-gray-600);
+    transition: all 0.2s ease-in-out;
+
+    &.active,
+    &:hover {
+      color: var(--color-brand-default);
+      background-color: var(--color-brand-100);
+      border-radius: 0.382rem;
+      font-weight: 400;
+    }
+  }
+}
 
 .canopy-search-form-modal {
   .canopy-search-form-modal__trigger {
@@ -6,9 +40,9 @@
     align-items: center;
     gap: 0.25rem;
     padding: 0.25rem 0.5rem;
-    border: 1px solid #e5e7eb;
-    color: #374151;
-    background: #fff;
+    border: 1px solid var(--color-gray-200, #e5e7eb);
+    color: var(--color-gray-700, #374151);
+    background: var(--color-gray-100, #ffffff);
     border-radius: 6px;
     cursor: pointer;
   }
@@ -26,7 +60,7 @@
 
   .canopy-search-form-modal__panel {
     position: relative;
-    background: #fff;
+    background: var(--color-gray-100, #ffffff);
     min-width: 320px;
     max-width: 720px;
     width: 90%;
@@ -37,8 +71,8 @@
       --canopy-font-sans,
       system-ui,
       -apple-system,
-      'Segoe UI',
-      'Helvetica Neue',
+      "Segoe UI",
+      "Helvetica Neue",
       Helvetica,
       Arial,
       sans-serif
@@ -49,8 +83,8 @@
     position: absolute;
     top: 8px;
     right: 8px;
-    border: 1px solid #e5e7eb;
-    background: #fff;
+    border: 1px solid var(--color-gray-200, #e5e7eb);
+    background: var(--color-gray-100, #ffffff);
     border-radius: 6px;
     padding: 2px 6px;
     cursor: pointer;
@@ -58,13 +92,13 @@
 
   .canopy-search-form-modal__inputWrap {
     padding: 10px 12px;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
   }
 
   .canopy-search-form-modal__input {
     width: 100%;
     padding: 8px 10px;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--color-gray-200, #e5e7eb);
     border-radius: 6px;
     outline: none;
   }
@@ -105,8 +139,8 @@
   left: 0;
   right: 0;
   top: calc(100% + 4px);
-  background: #fff;
-  border: 1px solid #e5e7eb;
+  background: var(--color-gray-100, #ffffff);
+  border: 1px solid var(--color-gray-200, #e5e7eb);
   border-radius: 8px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   z-index: 1000;
@@ -116,6 +150,7 @@
   display: none;
 }
 
-.relative[data-canopy-search-form-auto='1']:focus-within [data-canopy-search-form-panel] {
+.relative[data-canopy-search-form-auto="1"]:focus-within
+  [data-canopy-search-form-panel] {
   display: block;
 }