@canopy-iiif/app 0.10.7 → 0.10.9

package/ui/styles/index.css

@@ -171,6 +171,9 @@
   color: var(--color-gray-900);
 }
 
+@utility max-w-content {
+  max-width: 1080px;
+}
 @layer components {
   .canopy-button {
     display: inline-flex;
@@ -185,23 +188,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;
@@ -228,7 +231,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;
 }
@@ -390,15 +393,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 {
@@ -436,15 +439,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 {
@@ -542,7 +545,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;
@@ -550,7 +553,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 {
@@ -633,7 +636,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;
@@ -660,7 +663,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;
@@ -672,16 +675,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 {
@@ -962,8 +965,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;
@@ -991,8 +994,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;
@@ -1046,7 +1049,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;
@@ -1064,7 +1067,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));
@@ -1073,9 +1076,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%;
@@ -1084,42 +1087,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 {
@@ -1144,14 +1147,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;
 }
 
@@ -1159,13 +1162,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);
@@ -1183,16 +1186,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);
@@ -1242,9 +1245,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;
 }
@@ -1260,7 +1263,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%;
@@ -1273,20 +1276,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;
 }
@@ -1307,9 +1310,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;
 }
 
@@ -1322,8 +1325,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;
@@ -1341,7 +1344,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;
@@ -1351,9 +1354,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;
@@ -1365,18 +1368,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;
@@ -1384,9 +1387,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;
   }
@@ -1394,13 +1397,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;
@@ -1415,29 +1418,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;
@@ -1446,8 +1449,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;
@@ -1459,9 +1462,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;
@@ -1470,8 +1473,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;
@@ -1479,7 +1482,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 {
@@ -1490,30 +1493,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) {
@@ -1610,7 +1613,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;
@@ -1622,9 +1625,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 {

package/ui/tailwind-canopy-iiif-preset.js

@@ -6,7 +6,6 @@
  * Tailwind theme.extend values to those variables for easy use in utilities.
  */
 const plugin = require("tailwindcss/plugin");
-const path = require("path");
 const {loadCanopyTheme} = require("./theme");
 
 function compileVarsCss() {
@@ -17,91 +16,9 @@ function compileVarsCss() {
     }
     return theme.css;
   }
-  try {
-    const sass = require("sass");
-    const entry = path.join(__dirname, "styles", "variables.emit.scss");
-    const out = sass.compile(entry, {style: "expanded"});
-    return out && out.css ? out.css : "";
-  } catch (_) {
-    return "";
-  }
 }
 
 module.exports = {
-  theme: {
-    container: {center: true, padding: "1rem"},
-    extend: {
-      colors: {
-        brand: {
-          DEFAULT: "var(--color-brand-default)",
-          50: "var(--color-brand-50)",
-          100: "var(--color-brand-100)",
-          200: "var(--color-brand-200)",
-          300: "var(--color-brand-300)",
-          400: "var(--color-brand-400)",
-          500: "var(--color-brand-500)",
-          600: "var(--color-brand-600)",
-          700: "var(--color-brand-700)",
-          800: "var(--color-brand-800)",
-          900: "var(--color-brand-900)",
-        },
-        gray: {
-          DEFAULT: "var(--color-gray-default)",
-          50: "var(--color-gray-50)",
-          100: "var(--color-gray-100)",
-          200: "var(--color-gray-200)",
-          300: "var(--color-gray-300)",
-          400: "var(--color-gray-400)",
-          500: "var(--color-gray-500)",
-          600: "var(--color-gray-600)",
-          700: "var(--color-gray-700)",
-          800: "var(--color-gray-800)",
-          900: "var(--color-gray-900)",
-        },
-        muted: "var(--color-gray-muted)",
-        white: "#ffffff",
-        black: "#000000",
-      },
-      fontFamily: {
-        mono: ["var(--font-mono)"],
-        sans: ["var(--font-sans)"],
-        serif: ["var(--font-serif)"],
-      },
-      maxWidth: {
-        content: "var(--max-w-content)",
-        wide: "var(--max-w-wide)",
-      },
-      fontSize: {
-        xs: ["var(--font-size-xs)", {lineHeight: "var(--line-height-xs)"}],
-        sm: ["var(--font-size-sm)", {lineHeight: "var(--line-height-sm)"}],
-        base: [
-          "var(--font-size-base)",
-          {lineHeight: "var(--line-height-base)"},
-        ],
-        lg: ["var(--font-size-lg)", {lineHeight: "var(--line-height-lg)"}],
-        xl: ["var(--font-size-xl)", {lineHeight: "var(--line-height-xl)"}],
-        "2xl": ["var(--font-size-2xl)", {lineHeight: "var(--line-height-2xl)"}],
-        "3xl": ["var(--font-size-3xl)", {lineHeight: "var(--line-height-3xl)"}],
-      },
-      borderRadius: {
-        sm: "var(--radius-sm)",
-        DEFAULT: "var(--radius-default)",
-        md: "var(--radius-md)",
-      },
-      boxShadow: {
-        sm: "var(--shadow-sm)",
-        DEFAULT: "var(--shadow)",
-        md: "var(--shadow-md)",
-        lg: "var(--shadow-lg)",
-      },
-      transitionDuration: {
-        canopyFast: "var(--duration-fast)",
-      },
-      transitionTimingFunction: {
-        canopy: "var(--easing-standard)",
-      },
-    },
-  },
   plugins: [
     // Inject CSS variables (tokens) derived from Sass variables
     plugin(function ({addBase, postcss}) {