@canopy-iiif/app 0.10.8 → 0.10.10

package/ui/styles/index.css

@@ -72,6 +72,9 @@
   }
 }
 /* canopy-theme:end */
+/**
+ * Main stylesheet for the @canopy-iiif/app/ui package
+ */
 @layer base {
   body {
     margin: 0;
@@ -188,23 +191,23 @@
     transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .canopy-button--primary {
-    background-color: var(--color-brand-default, #4f46e5);
-    color: var(--color-gray-50, #f9fafb);
+    background-color: var(--color-brand-default);
+    color: var(--color-gray-50);
     box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
   }
   .canopy-button--primary:hover, .canopy-button--primary:focus-visible {
-    background-color: var(--color-brand-800, #4338ca);
-    color: var(--color-gray-50, #f9fafb);
+    background-color: var(--color-brand-800);
+    color: var(--color-gray-50);
   }
   .canopy-button--secondary {
-    border: 1px solid color-mix(in srgb, var(--color-gray-400, #94a3b8) 60%, transparent);
-    color: color-mix(in srgb, var(--color-gray-900, #0f172a) 92%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-gray-400) 60%, transparent);
+    color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
     background-color: var(--color-gray-50);
   }
   .canopy-button--secondary:hover, .canopy-button--secondary:focus-visible {
-    border-color: color-mix(in srgb, var(--color-brand-400, #818cf8) 65%, transparent);
-    background-color: color-mix(in srgb, var(--color-brand-200, #c7d2fe) 25%, transparent);
-    color: var(--color-brand-700, #4338ca);
+    border-color: color-mix(in srgb, var(--color-brand-400) 65%, transparent);
+    background-color: color-mix(in srgb, var(--color-brand-200) 25%, transparent);
+    color: var(--color-brand-700);
   }
   .canopy-button-group {
     display: flex;
@@ -231,7 +234,7 @@
 .canopy-card .canopy-card-media, .canopy-annotation-card .canopy-card-media {
   position: relative;
   width: 100%;
-  padding-bottom: var(--canopy-card-padding, 100%);
+  padding-bottom: var(--canopy-card-padding);
   background-color: rgb(229, 231, 235); /* slate-200 */
   overflow: hidden;
 }
@@ -393,15 +396,15 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 0.75rem;
-    border: 1px solid var(--color-gray-200, #e2e8f0);
+    border: 1px solid var(--color-gray-200);
     background: rgba(255, 255, 255, 0.8);
-    color: var(--color-gray-800, #1f2937);
+    color: var(--color-gray-800);
     transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
   }
   .canopy-header__menu:hover,
   .canopy-header__menu:focus-visible {
     background: rgba(255, 255, 255, 0.95);
-    color: var(--color-gray-900, #0f172a);
+    color: var(--color-gray-900);
     outline: none;
   }
   .canopy-header__menu-icon {
@@ -439,15 +442,15 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 0.75rem;
-    border: 1px solid var(--color-gray-200, #e2e8f0);
+    border: 1px solid var(--color-gray-200);
     background: rgba(255, 255, 255, 0.8);
-    color: var(--color-gray-800, #1f2937);
+    color: var(--color-gray-800);
     transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
   }
   .canopy-header__icon-button:hover,
   .canopy-header__icon-button:focus-visible {
     background: rgb(255, 255, 255);
-    color: var(--color-gray-900, #0f172a);
+    color: var(--color-gray-900);
     outline: none;
   }
   .canopy-header__search-icon {
@@ -545,7 +548,7 @@
     font-size: 1rem;
   }
   .canopy-nav-links a {
-    color: var(--color-gray-900, #0f172a);
+    color: var(--color-gray-900);
     font-weight: 500;
     text-decoration: none;
     padding: 0.25rem 0;
@@ -553,7 +556,7 @@
   }
   .canopy-nav-links a:hover,
   .canopy-nav-links a:focus-visible {
-    color: var(--color-brand-default, #3e63dd);
+    color: var(--color-brand-default);
     outline: none;
   }
   .canopy-modal--nav .canopy-modal__panel {
@@ -636,7 +639,7 @@
     width: min(100%, 38rem);
     max-width: 38rem;
     max-height: min(90vh, 640px);
-    background: var(--color-gray-50, #f8fafc);
+    background: var(--color-gray-50);
     border-radius: 1rem;
     box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
     overflow: hidden;
@@ -663,7 +666,7 @@
     margin: 0 0 1rem;
     font-size: 1.25rem;
     font-weight: 600;
-    color: var(--color-gray-900, #0f172a);
+    color: var(--color-gray-900);
   }
   .canopy-modal__close {
     position: absolute;
@@ -675,16 +678,16 @@
     width: 2.5rem;
     height: 2.5rem;
     border-radius: 9999px;
-    border: 1px solid var(--color-gray-200, #e2e8f0);
+    border: 1px solid var(--color-gray-200);
     background: rgba(255, 255, 255, 0.92);
-    color: var(--color-gray-700, #334155);
+    color: var(--color-gray-700);
     cursor: pointer;
     transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
   }
   .canopy-modal__close:hover,
   .canopy-modal__close:focus-visible {
     background: rgb(248, 250, 252);
-    color: var(--color-gray-900, #0f172a);
+    color: var(--color-gray-900);
     outline: none;
   }
   .canopy-modal__close-icon {
@@ -965,8 +968,8 @@
   width: 2.75rem;
   height: 2.75rem;
   border-radius: 9999px;
-  border: 1px solid color-mix(in srgb, var(--color-gray-400, #94a3b8) 55%, transparent);
-  background-color: color-mix(in srgb, var(--color-gray-100, #f1f5f9) 65%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-gray-400) 55%, transparent);
+  background-color: color-mix(in srgb, var(--color-gray-100) 65%, transparent);
   backdrop-filter: blur(6px);
   cursor: pointer;
   display: inline-flex;
@@ -994,8 +997,8 @@
 }
 .canopy-interstitial__nav-btn:hover, .canopy-interstitial__nav-btn:focus-visible {
   background-color: color-mix(in srgb, var(--color-brand-200) 55%, transparent);
-  border-color: color-mix(in srgb, var(--color-brand-400, #818cf8) 70%, transparent);
-  color: var(--color-brand-700, #4338ca);
+  border-color: color-mix(in srgb, var(--color-brand-400) 70%, transparent);
+  color: var(--color-brand-700);
 }
 .canopy-interstitial__pagination {
   position: absolute;
@@ -1049,7 +1052,7 @@
   --search-form-label-padding-y: 0.625rem;
   position: relative;
   backdrop-filter: blur(12px);
-  transition: box-shadow var(--duration-fast, 150ms) ease, background-color var(--duration-fast, 150ms) ease;
+  transition: box-shadow var(--duration-fast) ease, background-color var(--duration-fast) ease;
   background-color: var(--color-gray-50);
   cursor: text;
   padding-right: 0.4rem;
@@ -1067,7 +1070,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: opacity var(--duration-fast, 150ms) ease;
+  transition: opacity var(--duration-fast) ease;
 }
 .canopy-search-form-shell:hover {
   box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06));
@@ -1076,9 +1079,9 @@
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
-  fill: var(--color-gray-400, #b9bbc6);
+  fill: var(--color-gray-400);
   pointer-events: none;
-  transition: fill var(--duration-fast, 150ms) var(--easing-standard, ease);
+  transition: fill var(--duration-fast) var(--easing-standard);
 }
 .canopy-search-form-shell input[data-canopy-search-form-input] {
   width: 100%;
@@ -1087,42 +1090,42 @@
   background: transparent;
   box-shadow: none;
   caret-color: transparent;
-  transition: opacity var(--duration-fast, 150ms) ease;
+  transition: opacity var(--duration-fast) ease;
 }
 .canopy-search-form-shell:focus-within {
   background-color: var(--color-brand-100);
 }
 .canopy-search-form-shell:focus-within input[data-canopy-search-form-input] {
   opacity: 1;
-  caret-color: var(--color-gray-900, #121418);
+  caret-color: var(--color-gray-900);
 }
 .canopy-search-form-shell:focus-within svg {
-  fill: var(--color-brand-default, #3e63dd);
+  fill: var(--color-brand-default);
 }
 .canopy-search-form-shell[data-has-value="1"] input[data-canopy-search-form-input] {
   opacity: 1;
-  caret-color: var(--color-gray-900, #121418);
+  caret-color: var(--color-gray-900);
 }
 
 .canopy-search-form {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  border: 1px solid var(--color-gray-200, #cdced6);
+  border: 1px solid var(--color-gray-200);
   border-radius: 0.75rem;
-  color: var(--color-gray-700, #60646c);
-  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
-  transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease), box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease), background-color var(--duration-fast, 150ms) var(--easing-standard, ease);
+  color: var(--color-gray-700);
+  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);
 }
 .canopy-search-form:focus-within {
-  border-color: var(--color-brand-500, #3e63dd);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-500, #3e63dd) 45%, transparent), var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border-color: var(--color-brand-500);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-500) 45%, transparent), var(--shadow-sm);
 }
 .canopy-search-form:focus-within .canopy-search-form__icon {
-  color: var(--color-brand-500, #3e63dd);
+  color: var(--color-brand-500);
 }
 .canopy-search-form[data-has-value="1"] .canopy-search-form__icon {
-  color: var(--color-brand-500, #3e63dd);
+  color: var(--color-brand-500);
 }
 
 .canopy-search-form__label {
@@ -1147,14 +1150,14 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: color var(--duration-fast, 150ms) var(--easing-standard, ease);
+  transition: color var(--duration-fast) var(--easing-standard);
 }
 .canopy-search-form__clear:hover, .canopy-search-form__clear:focus-visible {
   color: var(--color-brand-default);
 }
 .canopy-search-form__clear: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-800) 65%, transparent);
+  box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-brand-800) 65%, transparent);
   border-radius: 999px;
 }
 
@@ -1162,13 +1165,13 @@
   flex: 1;
   min-width: 0;
   padding: 0.125rem 0;
-  font-size: var(--font-size-base, 1rem);
-  line-height: var(--line-height-base, 1.5rem);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
   background: transparent;
   border: 0;
   color: inherit;
   outline: none;
-  transition: opacity var(--duration-fast, 150ms) var(--easing-standard, ease), caret-color var(--duration-fast, 150ms) var(--easing-standard, ease);
+  transition: opacity var(--duration-fast) var(--easing-standard), caret-color var(--duration-fast) var(--easing-standard);
 }
 .canopy-search-form__input::placeholder {
   color: rgba(148, 163, 184, 0.75);
@@ -1186,16 +1189,16 @@
   font-weight: 400;
   font-size: 1rem;
   padding: 0.382rem 0.618rem;
-  transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), transform var(--duration-fast, 150ms) var(--easing-standard, ease);
+  transition: background-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
   cursor: pointer;
 }
 .canopy-search-form__submit:hover, .canopy-search-form__submit:focus-visible {
   background: var(--color-brand-800);
-  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--shadow-md);
 }
 .canopy-search-form__submit: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);
+  box-shadow: 0 0 0 2px var(--color-gray-100), 0 0 0 4px color-mix(in srgb, var(--color-brand-500) 65%, transparent);
 }
 .canopy-search-form__submit:active {
   transform: translateY(1px);
@@ -1245,9 +1248,9 @@
   align-items: center;
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
-  border: 1px solid var(--color-gray-200, #e5e7eb);
-  color: var(--color-gray-700, #374151);
-  background: var(--color-gray-100, #ffffff);
+  border: 1px solid var(--color-gray-200);
+  color: var(--color-gray-700);
+  background: var(--color-gray-100);
   border-radius: 6px;
   cursor: pointer;
 }
@@ -1263,7 +1266,7 @@
 }
 .canopy-search-form-modal .canopy-search-form-modal__panel {
   position: relative;
-  background: var(--color-gray-100, #ffffff);
+  background: var(--color-gray-100);
   min-width: 320px;
   max-width: 720px;
   width: 90%;
@@ -1276,20 +1279,20 @@
   position: absolute;
   top: 8px;
   right: 8px;
-  border: 1px solid var(--color-gray-200, #e5e7eb);
-  background: var(--color-gray-100, #ffffff);
+  border: 1px solid var(--color-gray-200);
+  background: var(--color-gray-100);
   border-radius: 6px;
   padding: 2px 6px;
   cursor: pointer;
 }
 .canopy-search-form-modal .canopy-search-form-modal__inputWrap {
   padding: 10px 12px;
-  border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
+  border-bottom: 1px solid var(--color-gray-200);
 }
 .canopy-search-form-modal .canopy-search-form-modal__input {
   width: 100%;
   padding: 8px 10px;
-  border: 1px solid var(--color-gray-200, #e5e7eb);
+  border: 1px solid var(--color-gray-200);
   border-radius: 6px;
   outline: none;
 }
@@ -1310,9 +1313,9 @@
   border-radius: 4px;
 }
 .canopy-search-form-modal .canopy-search-form-modal__title {
-  font-size: var(--font-size-sm, 0.875rem);
-  line-height: var(--line-height-sm, 1.25rem);
-  color: var(--color-gray-900, #121418);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--color-gray-900);
   font-weight: 500;
 }
 
@@ -1325,8 +1328,8 @@
   left: 0;
   right: 0;
   top: calc(100% + 4px);
-  background: var(--color-gray-100, #ffffff);
-  border: 1px solid var(--color-gray-200, #e5e7eb);
+  background: var(--color-gray-100);
+  border: 1px solid var(--color-gray-200);
   border-radius: 8px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   z-index: 1000;
@@ -1344,7 +1347,7 @@
   .canopy-modal--filters .canopy-modal__panel {
     width: min(100%, 48rem);
     max-height: min(90vh, 720px);
-    background: var(--color-gray-100, #ffffff);
+    background: var(--color-gray-100);
   }
   .canopy-modal--filters .canopy-modal__body--filters {
     display: flex;
@@ -1354,9 +1357,9 @@
   }
   .canopy-search-filters__subtitle {
     margin: 0 0 0.75rem;
-    font-size: var(--font-size-sm, 0.875rem);
-    line-height: var(--line-height-sm, 1.25rem);
-    color: var(--color-gray-500, #8b8d98);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-gray-500);
   }
   .canopy-search-filters__body {
     display: grid;
@@ -1368,18 +1371,18 @@
     gap: 0.75rem;
   }
   .canopy-search-filters__empty {
-    font-size: var(--font-size-sm, 0.875rem);
-    line-height: var(--line-height-sm, 1.25rem);
-    color: var(--color-gray-500, #8b8d98);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-gray-500);
   }
   .canopy-search-filters__facet {
-    border: 1px solid var(--color-gray-200, #e0e1e6);
+    border: 1px solid var(--color-gray-200);
     border-radius: 0.75rem;
-    background: var(--color-gray-50, #fcfcfd);
+    background: var(--color-gray-50);
     overflow: hidden;
   }
   .canopy-search-filters__facet[open] {
-    background: var(--color-gray-100, #ffffff);
+    background: var(--color-gray-100);
   }
   .canopy-search-filters__facet-summary {
     display: flex;
@@ -1387,9 +1390,9 @@
     justify-content: space-between;
     gap: 0.75rem;
     padding: 0.75rem 1rem;
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--font-size-sm);
     font-weight: 600;
-    color: var(--color-gray-900, #121418);
+    color: var(--color-gray-900);
     cursor: pointer;
     list-style: none;
   }
@@ -1397,13 +1400,13 @@
     display: none;
   }
   .canopy-search-filters__facet-count {
-    font-size: var(--font-size-xs, 0.75rem);
+    font-size: var(--font-size-xs);
     font-weight: 400;
-    color: var(--color-gray-500, #8b8d98);
+    color: var(--color-gray-500);
   }
   .canopy-search-filters__facet-content {
-    border-top: 1px solid var(--color-gray-200, #e0e1e6);
-    background: var(--color-gray-100, #ffffff);
+    border-top: 1px solid var(--color-gray-200);
+    background: var(--color-gray-100);
     padding: 1rem;
     max-height: 15rem;
     overflow-y: auto;
@@ -1418,29 +1421,29 @@
     flex: 1;
     min-width: 0;
     border-radius: 0.5rem;
-    border: 1px solid var(--color-gray-300, #cdced6);
+    border: 1px solid var(--color-gray-300);
     padding: 0.375rem 0.75rem;
-    font-size: var(--font-size-sm, 0.875rem);
-    color: var(--color-gray-700, #60646c);
-    transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease), box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
+    font-size: var(--font-size-sm);
+    color: var(--color-gray-700);
+    transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
   }
   .canopy-search-filters__quick-input:focus {
     outline: none;
-    border-color: var(--color-brand-500, #3e63dd);
-    box-shadow: 0 0 0 1px var(--color-brand-500, #3e63dd);
+    border-color: var(--color-brand-500);
+    box-shadow: 0 0 0 1px var(--color-brand-500);
   }
   .canopy-search-filters__quick-clear {
     border-radius: 0.375rem;
-    border: 1px solid var(--color-gray-200, #e0e1e6);
+    border: 1px solid var(--color-gray-200);
     padding: 0.25rem 0.5rem;
-    font-size: var(--font-size-xs, 0.75rem);
-    color: var(--color-gray-600, #80838d);
-    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);
+    font-size: var(--font-size-xs);
+    color: var(--color-gray-600);
+    background: var(--color-gray-100);
+    transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
   }
   .canopy-search-filters__quick-clear:hover {
-    background: var(--color-gray-100, #f0f0f3);
-    color: var(--color-gray-900, #121418);
+    background: var(--color-gray-100);
+    color: var(--color-gray-900);
   }
   .canopy-search-filters__facet-list {
     list-style: none;
@@ -1449,8 +1452,8 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    font-size: var(--font-size-sm, 0.875rem);
-    color: var(--color-gray-700, #60646c);
+    font-size: var(--font-size-sm);
+    color: var(--color-gray-700);
   }
   .canopy-search-filters__facet-item {
     display: flex;
@@ -1462,9 +1465,9 @@
     width: 1rem;
     height: 1rem;
     border-radius: 0.375rem;
-    border: 1px solid var(--color-gray-300, #cdced6);
-    color: var(--color-brand-500, #3e63dd);
-    accent-color: var(--color-brand-500, #3e63dd);
+    border: 1px solid var(--color-gray-300);
+    color: var(--color-brand-500);
+    accent-color: var(--color-brand-500);
   }
   .canopy-search-filters__facet-label {
     display: flex;
@@ -1473,8 +1476,8 @@
     gap: 0.25rem;
   }
   .canopy-search-filters__facet-empty {
-    font-size: var(--font-size-sm, 0.875rem);
-    color: var(--color-gray-500, #8b8d98);
+    font-size: var(--font-size-sm);
+    color: var(--color-gray-500);
   }
   .canopy-search-filters__footer {
     display: flex;
@@ -1482,7 +1485,7 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.75rem;
-    border-top: 1px solid var(--color-gray-200, #e0e1e6);
+    border-top: 1px solid var(--color-gray-200);
     padding-top: 1.25rem;
   }
   .canopy-search-filters__footer-actions {
@@ -1493,30 +1496,30 @@
   .canopy-search-filters__button {
     border-radius: 9999px;
     padding: 0.5rem 1.25rem;
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--font-size-sm);
     font-weight: 600;
     cursor: pointer;
-    transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), color var(--duration-fast, 150ms) var(--easing-standard, ease);
+    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, #cdced6);
+    border: 1px solid var(--color-gray-300);
     background: transparent;
-    color: var(--color-gray-700, #60646c);
+    color: var(--color-gray-700);
   }
   .canopy-search-filters__button--secondary:hover,
   .canopy-search-filters__button--secondary:focus-visible {
-    background: var(--color-gray-100, #f0f0f3);
-    color: var(--color-gray-900, #121418);
+    background: var(--color-gray-100);
+    color: var(--color-gray-900);
     outline: none;
   }
   .canopy-search-filters__button--primary {
     border: none;
-    background: var(--color-brand-600, #3e63dd);
-    color: var(--color-gray-50, #f9fafb);
+    background: var(--color-brand-600);
+    color: var(--color-gray-50);
   }
   .canopy-search-filters__button--primary:hover,
   .canopy-search-filters__button--primary:focus-visible {
-    background: var(--color-brand-700, #3358d4);
+    background: var(--color-brand-700);
     outline: none;
   }
   @media (max-width: 48rem) {
@@ -1613,7 +1616,7 @@
   gap: 0.25rem;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
-  border: 1px solid var(--color-gray-200, #e4e4e7);
+  border: 1px solid var(--color-gray-200);
   background-color: rgba(255, 255, 255, 0.9);
   color: inherit;
   font-size: 0.75rem;
@@ -1625,9 +1628,9 @@
 .canopy-content-navigation__toggle:hover,
 .canopy-content-navigation__toggle:focus-visible {
   background-color: rgb(255, 255, 255);
-  border-color: var(--color-gray-300, #d4d4d8);
+  border-color: var(--color-gray-300);
   outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-200, #c7d2fe) 60%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-200) 60%, transparent);
 }
 
 .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
@@ -1651,4 +1654,9 @@
 
 .canopy-content-navigation--collapsed .canopy-sub-navigation__list {
   display: none;
-}
+}
+
+/**
+ * Define source files for utility classes
+ */
+@source "../dist";

package/ui/styles/index.scss

@@ -1,2 +1,10 @@
+/**
+ * Main stylesheet for the @canopy-iiif/app/ui package
+ */
 @use "./base";
 @use "./components";
+
+/**
+ * Define source files for utility classes
+ */
+@source "../dist";