@canopy-iiif/app 1.9.1 → 1.9.3

package/package.json

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

package/ui/styles/base/_heading.scss

@@ -1,6 +1,6 @@
 @layer base {
   h1 {
-    font-size: 2.61rem;
+    font-size: 2rem;
     line-height: 1.25;
     margin: 0 0 1rem 0;
   }

package/ui/styles/base/_markdown.scss

@@ -43,7 +43,6 @@ blockquote {
   }
 
   tbody {
-    box-shadow: 5px 5px 11px rgba(0, 0, 0, 0.05);
 
     tr {
       &:nth-child(even) {

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

@@ -47,6 +47,5 @@
     background: color-mix(in srgb, var(--color-accent-500) 38.2%, transparent);
     color: inherit;
     padding: 0.05rem 0.25rem;
-    border-radius: 0.2rem;
   }
 }

package/ui/styles/components/_buttons.scss

@@ -1,50 +1,62 @@
+@mixin canopy-button-base($padding-y: 0.6rem, $padding-x: 1.4rem) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: $padding-y $padding-x;
+  border: 1px solid currentColor;
+  color: inherit;
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+@mixin canopy-button-variant($variant) {
+  @if $variant == "primary" {
+    background-color: var(--color-accent-default);
+    border-color: var(--color-accent-default);
+    color: var(--color-accent-50);
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-accent-600);
+      border-color: var(--color-accent-600);
+    }
+  } @else if $variant == "secondary" {
+    border-color: var(--color-gray-400);
+    background-color: var(--color-gray-50);
+    color: var(--color-gray-900);
+
+    &:hover,
+    &:focus-visible {
+      border-color: var(--color-accent-400);
+      color: var(--color-accent-900);
+    }
+  } @else if $variant == "ghost" {
+    border-color: transparent;
+  }
+}
+
 @layer components {
   .canopy-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.35rem;
-    padding: 0.55rem 1.4rem;
-    border-radius: 9999px;
-    font-size: 0.9222rem;
-    font-weight: 300;
-    text-decoration: none;
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease,
-      border-color 0.2s ease,
-      box-shadow 0.2s ease;
+    @include canopy-button-base();
+    border-color: currentColor;
 
     &--primary {
-      background-color: var(--color-accent-default);
-      color: var(--color-accent-50);
-      box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
-
-      &:hover,
-      &:focus-visible {
-        background-color: var(--color-accent-600);
-      }
+      @include canopy-button-variant("primary");
     }
 
     &--secondary {
-      border: 1px solid var(--color-gray-200);
-      color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
-      background-color: var(--color-gray-50);
+      @include canopy-button-variant("secondary");
+    }
 
-      &:hover,
-      &:focus-visible {
-        border-color: color-mix(
-          in srgb,
-          var(--color-accent-400) 65%,
-          transparent
-        );
-        background-color: color-mix(
-          in srgb,
-          var(--color-accent-300) 25%,
-          transparent
-        );
-        color: var(--color-accent-900);
-      }
+    &--ghost {
+      @include canopy-button-variant("ghost");
     }
   }
 
@@ -56,8 +68,6 @@
   }
 
   .canopy-button-group__text {
-    font-size: 1.38rem;
-    font-weight: 500;
     color: var(--color-gray-900);
     margin-bottom: 1rem;
     letter-spacing: -0.0125em;
@@ -67,7 +77,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.75rem;
+    gap: 1rem;
     padding: 0.618rem 0 1.618rem;
     width: 100%;
   }
@@ -78,12 +88,6 @@
     text-align: center;
     padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 4rem);
     margin: 2rem 0;
-    border-radius: 1.25rem;
-    background: linear-gradient(
-      173deg,
-      transparent 0%,
-      var(--color-accent-200) 100%
-    );
   }
 
   .canopy-button-group--interstitial .canopy-button-group__actions {

package/ui/styles/components/_card.scss

@@ -4,12 +4,8 @@
   text-decoration: none;
   color: inherit;
   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);
 
   figure {
     margin: 0;
@@ -19,7 +15,6 @@
     position: relative;
     width: 100%;
     padding-bottom: var(--canopy-card-padding);
-    background-color: var(--color-gray-100);
     overflow: hidden;
 
     > img {
@@ -34,7 +29,6 @@
       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-muted);
       font-size: 83.333%;
     }
@@ -71,8 +65,5 @@
   &:hover,
   &:focus {
     color: var(--color-accent-default);
-    box-shadow:
-      0 1px 2px 0 rgba(0, 0, 0, 0.07),
-      0 1px 2px 0 rgba(0, 0, 0, 0.07);
   }
 }

package/ui/styles/components/_diagram.scss

@@ -28,7 +28,6 @@
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 
   article {
-    border-radius: 1.25rem;
     background: linear-gradient(
       173deg,
       transparent 0%,

package/ui/styles/components/_gallery.scss

@@ -1,3 +1,5 @@
+@use "./buttons" as buttons;
+
 .canopy-gallery {
   position: relative;
   padding: 0;
@@ -57,8 +59,6 @@
     height: 100%;
     padding: clamp(0.75rem, 1vw, 1rem);
     border: 1px solid var(--color-gray-200);
-    border-radius: var(--canopy-gallery-radius, 1rem);
-    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
 
     &:focus-within {
       outline: 2px solid var(--color-accent-default, #3b82f6);
@@ -70,7 +70,6 @@
     position: relative;
     aspect-ratio: 1/1;
     overflow: hidden;
-    border-radius: calc(var(--canopy-gallery-radius, 1rem) - 0.25rem);
     background: var(--color-gray-100);
 
     img,
@@ -145,12 +144,10 @@
   &__trigger {
     position: absolute;
     inset: 0;
-    border-radius: inherit;
     text-decoration: none;
     border: 0;
     z-index: 2;
     color: inherit;
-    background: transparent;
   }
 }
 
@@ -294,8 +291,6 @@ body[data-canopy-gallery-locked="1"] {
     width: min(960px, calc(100% - clamp(2rem, 4vw, 4rem)));
     height: auto;
     max-height: min(90vh, 960px);
-    border-radius: 0.75rem;
-    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.45);
   }
 }
 
@@ -328,7 +323,6 @@ body[data-canopy-gallery-locked="1"] {
 
     &::-webkit-scrollbar-thumb {
       background-color: rgba(15, 23, 42, 0.2);
-      border-radius: 0.5rem;
     }
   }
 
@@ -357,7 +351,6 @@ body[data-canopy-gallery-locked="1"] {
     display: inline-flex;
     flex-direction: column;
     text-decoration: none;
-    border-radius: 0.75rem;
     background: var(--color-gray-50);
     color: inherit;
     width: 100%;
@@ -378,7 +371,6 @@ body[data-canopy-gallery-locked="1"] {
   &__nav-thumb {
     width: 100%;
     aspect-ratio: 1 / 1;
-    border-radius: 0.5rem;
     overflow: hidden;
     padding: 1px;
     outline: 3px solid var(--color-gray-50);
@@ -393,18 +385,16 @@ body[data-canopy-gallery-locked="1"] {
       display: block;
       opacity: 1;
       transition: all 0.2s ease;
-      border-radius: 0.5rem;
     }
   }
 
   &__nav-button {
+    @include buttons.canopy-button-base(0.25rem, 0.75rem);
     flex: 0 0 auto;
     width: 5rem;
     height: 100%;
     color: var(--color-gray-900);
     font-size: 1.25rem;
-    font-weight: 500;
-    cursor: pointer;
     display: none;
     align-items: center;
     justify-content: center;
@@ -412,6 +402,7 @@ body[data-canopy-gallery-locked="1"] {
     top: 50%;
     transform: translateY(-50%);
     z-index: 5;
+    border: none;
     background: linear-gradient(to right, transparent, transparent);
 
     &--prev {

package/ui/styles/components/_image-story.scss

@@ -12,11 +12,9 @@
   --storiiies-viewer-button-bg: var(--color-accent-default);
   --storiiies-viewer-button-fg: var(--color-gray-50);
 
-  border-radius: 0.5rem;
   position: relative;
   display: block;
   overflow: hidden;
-  box-shadow: inset 0 0 0 1px #0000000d;
 
   .storiiies-viewer__info-text {
     margin-top: 1.618rem;
@@ -42,8 +40,6 @@
   }
 
   .storiiies-viewer__info-area {
-    border-radius: 0.5rem;
-    box-shadow: 5px 5px 21px #0001;
     font-weight: 300;
   }
 

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

@@ -1,3 +1,5 @@
+@use "./buttons" as buttons;
+
 .canopy-interstitial {
   position: relative;
   width: 100%;
@@ -43,10 +45,9 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
+      padding: clamp(1.618rem, 5vw, 3rem) clamp(1.618rem, 4vw, 3rem);
       box-sizing: border-box;
       min-width: 0;
-      background: transparent;
     }
 
     .canopy-interstitial__body {
@@ -58,10 +59,6 @@
       gap: 1.5rem;
     }
 
-    .canopy-interstitial__actions {
-      justify-content: flex-start;
-    }
-
     .canopy-interstitial__media-group {
       flex: 1;
       position: relative;
@@ -73,7 +70,6 @@
       box-sizing: border-box;
       min-width: 0;
       overflow: hidden;
-      background: transparent;
     }
 
     .canopy-interstitial__caption {
@@ -97,10 +93,16 @@
     }
 
     @media (max-width: 63.9375rem) {
+      background: none !important;
+
       .canopy-interstitial__panel,
       .canopy-interstitial__media-group {
         width: 100%;
       }
+
+      .canopy-interstitial__media-group {
+        padding: 1rem 0 !important;
+      }
     }
 
     @media (min-width: 48rem) {
@@ -200,7 +202,6 @@
     width: 100%;
     min-height: var(--hero-height);
     overflow: hidden;
-    background-color: color-mix(in srgb, var(--hero-bg-start) 65%, transparent);
   }
 
   &__pane::before,
@@ -222,7 +223,6 @@
     display: flex;
     flex-direction: column;
     height: var(--hero-height);
-    background-color: transparent;
   }
 
   &__media {
@@ -241,7 +241,6 @@
     height: 100%;
     flex: 1 1 auto;
     overflow: hidden;
-    border-radius: 0.75rem;
   }
 
   &__media--static {
@@ -302,13 +301,6 @@
     max-width: 42rem;
   }
 
-  &__actions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0.75rem;
-  }
-
   &__caption {
     position: absolute;
     bottom: 1.75rem;
@@ -331,23 +323,16 @@
   }
 
   &__nav-btn {
+    @include buttons.canopy-button-base(0.25rem, 0.75rem);
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 2.618rem !important;
     height: 2.618rem !important;
-    border-radius: 9999px;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease,
-      color 0.2s ease;
-    stroke: var(--color-accent-default) !important;
-    color: var(--color-accent-default) !important;
+    color: var(--color-gray-50) !important;
+    background-color: var(--color-accent-default) !important;
     pointer-events: auto;
+    border: none;
 
     &::after {
       content: none;
@@ -358,19 +343,15 @@
       display: block;
       width: 1rem;
       height: 1rem;
-      stroke: var(--color-accent-default);
+      stroke: var(--color-gray-50);
     }
 
     &--prev {
-      left: 1.5rem;
+      left: 0 !important;
     }
 
     &--next {
-      right: 1.5rem;
-    }
-
-    &:hover,
-    &:focus-visible {
+      right: 0 !important;
     }
   }
 
@@ -388,7 +369,6 @@
     display: inline-block;
     width: 0.45rem;
     height: 0.45rem;
-    border-radius: 9999px;
     background-color: var(--hero-dot-bg);
     opacity: 1;
     transition:

package/ui/styles/components/_map.scss

@@ -3,7 +3,6 @@
   position: relative;
   width: 100%;
   min-height: 320px;
-  border-radius: 0.5rem;
   overflow: hidden;
   background-color: var(--color-gray-100);
   z-index: 0;
@@ -52,12 +51,10 @@
     max-width: 320px;
     z-index: 4;
     padding: 0.5rem 0.75rem;
-    border-radius: 999px;
     background-color: rgba(15, 23, 42, 0.85);
     color: var(--color-gray-50);
     font-size: 0.875rem;
     line-height: 1.25rem;
-    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
     pointer-events: auto;
   }
 
@@ -89,7 +86,6 @@
     &-dot {
       width: 12px;
       height: 12px;
-      border-radius: 999px;
       background-color: var(--color-accent-default);
       flex-shrink: 0;
     }
@@ -107,7 +103,6 @@
 
     &-media {
       width: 100%;
-      border-radius: 0.25rem;
       overflow: hidden;
 
       img {
@@ -194,7 +189,6 @@
     }
   }
   .leaflet-marker-icon#{&}__marker {
-    background: transparent;
     border: none;
     width: auto;
     height: auto;
@@ -213,8 +207,6 @@
   &__marker-solid {
     width: 40px;
     height: 40px;
-    border-radius: 999px;
-    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -241,7 +233,6 @@
   }
 
   &__marker--label {
-    background: transparent;
     border: none;
 
     &.is-hovered {
@@ -254,7 +245,6 @@
       }
 
       .canopy-map__marker-label-text {
-        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
       }
     }
   }
@@ -268,14 +258,12 @@
     background: #fffd;
     white-space: nowrap;
     position: relative;
-    border-radius: 999px;
     padding-left: 4px;
   }
 
   &__marker-label-dot {
     width: 12px;
     height: 12px;
-    border-radius: 999px;
     background-color: var(--color-accent-default);
     flex-shrink: 0;
     cursor: default;
@@ -300,13 +288,11 @@
     font-weight: 500;
     width: 40px;
     height: 40px;
-    border-radius: 999px;
     background: var(--color-gray-default);
     color: var(--color-gray-50);
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
     box-sizing: content-box;
   }
 }

package/ui/styles/components/_metadata-index.scss

@@ -1,3 +1,5 @@
+@use "./buttons" as buttons;
+
 .canopy-index {
   display: flex;
   flex-direction: column;
@@ -55,13 +57,10 @@
 }
 
 .canopy-index__more {
-  padding: 0.45rem 1rem;
-  font-size: 0.8333rem;
-  border: 1px solid var(--color-accent-200);
-  border-radius: 999px;
+  @include buttons.canopy-button-base(0.45rem, 1rem);
+  border-color: var(--color-accent-200);
   background: var(--color-accent-100);
   color: var(--color-accent-default);
-  cursor: pointer;
 }
 
 .canopy-index__more:hover {

package/ui/styles/components/_nav-tree.scss

@@ -1,3 +1,5 @@
+@use "./buttons" as buttons;
+
 @layer components {
   .canopy-nav-tree {
     color: inherit;
@@ -39,14 +41,10 @@
   }
 
   .canopy-nav-tree__toggle {
+    @include buttons.canopy-button-base(0.5rem, 0.5rem);
     appearance: none;
     border: none;
-    background: transparent;
-    padding: 0.5rem;
-    display: inline-flex;
-    align-items: center;
     justify-content: flex-end;
-    cursor: pointer;
     width: 40px;
     height: 40px;
 

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

@@ -1,3 +1,5 @@
+@use "./buttons" as buttons;
+
 .canopy-sub-navigation {
   color: inherit;
 }
@@ -104,7 +106,6 @@
   transition:
     background-color 150ms ease,
     border-color 150ms ease,
-    box-shadow 150ms ease,
     padding 150ms ease;
   color: var(--color-gray-muted);
 }
@@ -113,7 +114,6 @@
   padding: 0.25rem;
   border-color: transparent;
   background: none;
-  box-shadow: none;
 }
 
 .canopy-content-navigation--floating {
@@ -128,16 +128,10 @@
 }
 
 .canopy-content-navigation__toggle {
+  @include buttons.canopy-button-base(0.35rem, 0.75rem);
   align-self: flex-end;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  line-height: 1.2;
-  transition: color 150ms ease;
+  border: none;
 }
 
 .canopy-content-navigation__toggle:hover,