@canopy-iiif/app 0.8.3 → 0.8.5

package/ui/styles/index.css

@@ -1,20 +1,121 @@
+/* canopy-theme */
+@layer properties {
+  :root {
+  --max-w-content: 1080px;
+  --color-brand-50: #fdfdfe;
+  --color-brand-100: #edf2fe;
+  --color-brand-200: #d2deff;
+  --color-brand-300: #abbdf9;
+  --color-brand-400: #8da4ef;
+  --color-brand-500: #3e63dd;
+  --color-brand-600: #3358d4;
+  --color-brand-700: #3a5bc7;
+  --color-brand-800: #1f2d5c;
+  --color-brand-900: #1a264e;
+  --color-brand-default: #3358d4;
+  --color-gray-50: #fcfcfd;
+  --color-gray-100: #f0f0f3;
+  --color-gray-200: #e0e1e6;
+  --color-gray-300: #cdced6;
+  --color-gray-400: #b9bbc6;
+  --color-gray-500: #8b8d98;
+  --color-gray-600: #80838d;
+  --color-gray-700: #60646c;
+  --color-gray-800: #1c2024;
+  --color-gray-900: #181b1f;
+  --color-gray-default: #181b1f;
+  --color-gray-muted: #80838d;
+  --colors-accent: #3358d4 !important;
+  --colors-accentAlt: #1f2d5c !important;
+  --colors-accentMuted: #8da4ef !important;
+  --colors-primary: #181b1f !important;
+  --colors-primaryAlt: #181b1f !important;
+  --colors-primaryMuted: #181b1f !important;
+  --colors-secondary: #fcfcfd !important;
+  --colors-secondaryAlt: #fcfcfd !important;
+  --colors-secondaryMuted: #fcfcfd !important;
+  color-scheme: light;
+  }
+  :host {
+  --max-w-content: 1080px;
+  --color-brand-50: #fdfdfe;
+  --color-brand-100: #edf2fe;
+  --color-brand-200: #d2deff;
+  --color-brand-300: #abbdf9;
+  --color-brand-400: #8da4ef;
+  --color-brand-500: #3e63dd;
+  --color-brand-600: #3358d4;
+  --color-brand-700: #3a5bc7;
+  --color-brand-800: #1f2d5c;
+  --color-brand-900: #1a264e;
+  --color-brand-default: #3358d4;
+  --color-gray-50: #fcfcfd;
+  --color-gray-100: #f0f0f3;
+  --color-gray-200: #e0e1e6;
+  --color-gray-300: #cdced6;
+  --color-gray-400: #b9bbc6;
+  --color-gray-500: #8b8d98;
+  --color-gray-600: #80838d;
+  --color-gray-700: #60646c;
+  --color-gray-800: #1c2024;
+  --color-gray-900: #181b1f;
+  --color-gray-default: #181b1f;
+  --color-gray-muted: #80838d;
+  --colors-accent: #3358d4 !important;
+  --colors-accentAlt: #1f2d5c !important;
+  --colors-accentMuted: #8da4ef !important;
+  --colors-primary: #181b1f !important;
+  --colors-primaryAlt: #181b1f !important;
+  --colors-primaryMuted: #181b1f !important;
+  --colors-secondary: #fcfcfd !important;
+  --colors-secondaryAlt: #fcfcfd !important;
+  --colors-secondaryMuted: #fcfcfd !important;
+  color-scheme: light;
+  }
+}
+/* canopy-theme:end */
 html,
 body {
   margin: 0;
   padding: 0;
-  font-family: "DM Sans", "-apple-system", "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif;
+  background: var(--color-gray-50);
+  color: var(--color-gray-900);
+}
+
+p {
+  line-height: 1.55;
+}
+
+ol,
+ul {
+  padding-left: 1.5rem;
+}
+ol li,
+ul li {
+  margin-bottom: 0.25rem;
 }
 
 a {
   text-decoration: none;
-  color: #3358d4;
+  color: var(--color-brand-default);
 }
 a:hover {
   text-decoration: underline;
 }
 
+input,
+textarea,
+select,
+button {
+  font-family: inherit;
+}
+
+::selection {
+  background-color: var(--color-brand-200);
+}
+
 h1 {
-  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
+  font-family: var(--font-serif);
   font-size: 2.618rem;
   line-height: 1.25;
   margin: 0 0 1rem 0;
@@ -22,7 +123,7 @@ h1 {
 }
 
 h2 {
-  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
+  font-family: var(--font-serif);
   font-size: 1.618rem;
   line-height: 1.25;
   margin: 0 0 0.618rem 0;
@@ -30,63 +131,96 @@ h2 {
 }
 
 /* Canopy Card component styles */
-.canopy-card {
+.canopy-card, .canopy-annotation-card {
   display: block;
   text-decoration: none;
   color: inherit;
-  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);
 }
-.canopy-card figure {
+.canopy-card figure, .canopy-annotation-card figure {
   margin: 0;
 }
-.canopy-card .canopy-card-media {
+.canopy-card .canopy-card-media, .canopy-annotation-card .canopy-card-media {
   position: relative;
   width: 100%;
   padding-bottom: var(--canopy-card-padding, 100%);
   background-color: rgb(229, 231, 235); /* slate-200 */
   overflow: hidden;
 }
-.canopy-card .canopy-card-media > img {
+.canopy-card .canopy-card-media > img, .canopy-annotation-card .canopy-card-media > img {
   position: absolute;
   inset: 0;
   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%;
 }
-.canopy-card[data-image-loaded=true] .canopy-card-media > img {
+.canopy-card[data-image-loaded=true] .canopy-card-media > img, [data-image-loaded=true].canopy-annotation-card .canopy-card-media > img {
   opacity: 1;
 }
-.canopy-card .canopy-card-image {
+.canopy-card .canopy-card-image, .canopy-annotation-card .canopy-card-image {
   display: block;
   width: 100%;
   height: auto;
   opacity: 0;
   transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
 }
-.canopy-card[data-image-loaded=true] .canopy-card-image {
+.canopy-card[data-image-loaded=true] .canopy-card-image, [data-image-loaded=true].canopy-annotation-card .canopy-card-image {
   opacity: 1;
 }
-.canopy-card figcaption {
+.canopy-card figcaption, .canopy-annotation-card figcaption {
   padding: 1rem;
 }
-.canopy-card figcaption > span:first-child {
+.canopy-card figcaption > span:first-child, .canopy-annotation-card figcaption > span:first-child {
   display: block;
 }
-.canopy-card figcaption > span + span {
+.canopy-card figcaption > span + span, .canopy-annotation-card figcaption > span + span {
   display: block;
 }
-.canopy-card:hover, .canopy-card:focus {
+.canopy-card:hover, .canopy-annotation-card:hover, .canopy-card:focus, .canopy-annotation-card: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);
 }
 
+.canopy-annotation-card {
+  padding: 1rem;
+}
+.canopy-annotation-card 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;
+}
+.canopy-annotation-card mark mark::before,
+.canopy-annotation-card mark mark::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.canopy-annotation-card mark mark::before {
+  content: " [highlight start] ";
+}
+.canopy-annotation-card mark mark::after {
+  content: " [highlight end] ";
+}
+
 @layer components {
   .canopy-header {
     display: flex;
@@ -94,25 +228,42 @@ h2 {
     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);
   }
 }
-.canopy-logo {
+a.canopy-logo {
   display: flex;
   align-items: center;
   gap: 0.618rem;
-  font-weight: 400;
-  font-size: 1.618rem;
-  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
-  color: #121418;
+  font-weight: 600;
+  font-size: 1.382rem;
+  font-family: var(--font-serif);
+  color: var(--color-gray-default) !important;
+  letter-spacing: -0.025em;
+}
+a.canopy-logo:hover {
+  text-decoration: none;
 }
-.canopy-logo img {
+a.canopy-logo svg {
   height: 1.618rem;
   margin-bottom: -1px;
 }
-.canopy-logo:hover {
-  text-decoration: none;
+a.canopy-logo svg circle.canopy-logo-backlight {
+  fill: var(--color-brand-900);
+  color: var(--color-brand-900);
+}
+a.canopy-logo svg path.canopy-logo-overlay {
+  fill: var(--color-brand-default);
+  color: var(--color-brand-default);
+}
+
+html.dark a.canopy-logo svg circle.canopy-logo-backlight {
+  fill: var(--color-brand-200) !important;
+  color: var(--color-brand-200) !important;
+}
+html.dark a.canopy-logo svg path.canopy-logo-overlay {
+  fill: var(--color-brand-500) !important;
+  color: var(--color-brand-500) !important;
 }
 
 .canopy-navbar {
@@ -155,7 +306,7 @@ h2 {
   --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;
   cursor: text;
   padding-right: 0.4rem;
@@ -178,8 +329,13 @@ h2 {
 .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));
 }
-.canopy-search-form-shell:focus-within::after, .canopy-search-form-shell[data-has-value="1"]::after {
-  opacity: 0;
+.canopy-search-form-shell 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);
 }
 .canopy-search-form-shell input[data-canopy-search-form-input] {
   width: 100%;
@@ -187,11 +343,20 @@ h2 {
   outline: none;
   background: transparent;
   box-shadow: none;
-  opacity: 0;
   caret-color: transparent;
   transition: opacity var(--duration-fast, 150ms) ease;
 }
-.canopy-search-form-shell:focus-within input[data-canopy-search-form-input], .canopy-search-form-shell[data-has-value="1"] input[data-canopy-search-form-input] {
+.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);
+}
+.canopy-search-form-shell:focus-within svg {
+  fill: var(--color-brand-default, #3e63dd);
+}
+.canopy-search-form-shell[data-has-value="1"] input[data-canopy-search-form-input] {
   opacity: 1;
   caret-color: var(--color-gray-900, #121418);
 }
@@ -227,14 +392,28 @@ h2 {
   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);
 }
+.canopy-search-form__clear:hover, .canopy-search-form__clear:focus-visible {
+  color: var(--color-brand-600, #3e63dd);
+}
+.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-500, #3e63dd) 65%, transparent);
+  border-radius: 999px;
+}
 
 .canopy-search-form__input {
   flex: 1;
@@ -257,8 +436,9 @@ h2 {
   align-items: center;
   gap: 0.382rem;
   border-radius: 0.382rem;
+  margin-right: 1px;
   border: 0;
-  background: #3358d4;
+  background: var(--color-brand-default);
   color: #fff;
   font-weight: 400;
   font-size: 1rem;
@@ -267,12 +447,12 @@ h2 {
   cursor: pointer;
 }
 .canopy-search-form__submit:hover, .canopy-search-form__submit:focus-visible {
-  background: #243c94;
+  background: var(--color-brand-800);
   box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
 }
 .canopy-search-form__submit:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px #fff, 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, #ffffff), 0 0 0 4px color-mix(in srgb, var(--color-brand-500, #3e63dd) 65%, transparent);
 }
 .canopy-search-form__submit:active {
   transform: translateY(1px);
@@ -284,14 +464,47 @@ h2 {
   opacity: 0.7;
 }
 
+.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;
+}
+.canopy-search-tabs 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;
+}
+.canopy-search-tabs button.active, .canopy-search-tabs button: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 {
   display: inline-flex;
   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;
 }
@@ -307,7 +520,7 @@ h2 {
 }
 .canopy-search-form-modal .canopy-search-form-modal__panel {
   position: relative;
-  background: #fff;
+  background: var(--color-gray-100, #ffffff);
   min-width: 320px;
   max-width: 720px;
   width: 90%;
@@ -320,20 +533,20 @@ h2 {
   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;
 }
 .canopy-search-form-modal .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 .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;
 }
@@ -369,8 +582,8 @@ h2 {
   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;
@@ -401,7 +614,7 @@ h2 {
   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);
   display: flex;
   flex-direction: column;
@@ -471,7 +684,7 @@ h2 {
   overflow: hidden;
 }
 .canopy-search-filters__facet[open] {
-  background: #fff;
+  background: var(--color-gray-100, #ffffff);
 }
 
 .canopy-search-filters__facet-summary {
@@ -499,7 +712,7 @@ h2 {
 
 .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;
@@ -534,7 +747,7 @@ h2 {
   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);
 }
 .canopy-search-filters__quick-clear:hover {
@@ -610,7 +823,7 @@ h2 {
 
 .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);
 }
 .canopy-search-filters__button--secondary:hover:not([disabled]) {
@@ -631,4 +844,79 @@ h2 {
 .canopy-search-filters__button--primary:hover {
   background: var(--color-brand-700, #2c4bbd);
   box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+
+.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: 0.25rem;
+}
+
+.canopy-sub-navigation__link.depth-2 {
+  padding-left: 0.5rem;
+}
+
+.canopy-sub-navigation__link.depth-3 {
+  padding-left: 0.75rem;
+}
+
+.canopy-sub-navigation__link.depth-4 {
+  padding-left: 1rem;
+}
+
+.canopy-sub-navigation__link.depth-5 {
+  padding-left: 1.25rem;
 }

package/ui/styles/index.scss

@@ -1,4 +1,2 @@
-@use './variables' as *;
-@use './base';
-@use './components';
-
+@use "./base";
+@use "./components";

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

@@ -6,13 +6,21 @@
  * their Tailwind config.
  */
 const plugin = require("tailwindcss/plugin");
-const fs = require("fs");
 const path = require("path");
+const { loadCanopyTheme } = require("./theme");
 
 function compileScss(filePath) {
   try {
     const sass = require("sass");
-    const out = sass.compile(filePath, { style: "expanded" });
+    const theme = loadCanopyTheme();
+    const stylesRoot = path.join(__dirname, "styles");
+    const loadPaths = [stylesRoot];
+    const relModule = path
+      .relative(stylesRoot, filePath)
+      .replace(/\\/g, "/")
+      .replace(/\.scss$/i, "");
+    const source = `${theme && theme.sassConfig ? theme.sassConfig : ""}@use '${relModule}';`;
+    const out = sass.compileString(source, { style: "expanded", loadPaths });
     return out && out.css ? out.css : "";
   } catch (e) {
     const message = e && e.message ? e.message : e;