@canopy-iiif/app 0.6.28

package/ui/styles/components/_command.scss

@@ -0,0 +1,80 @@
+@use '../variables' as *;
+
+.canopy-cmdk {
+  .canopy-cmdk__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #fff;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  .canopy-cmdk__overlay {
+    position: fixed;
+    inset: 0;
+    display: none;
+    align-items: flex-start;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 9999;
+    padding-top: 10vh;
+  }
+
+  .canopy-cmdk__panel {
+    position: relative;
+    background: #fff;
+    min-width: 320px;
+    max-width: 720px;
+    width: 90%;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
+  }
+
+  .canopy-cmdk__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    border-radius: 6px;
+    padding: 2px 6px;
+    cursor: pointer;
+  }
+
+  .canopy-cmdk__inputWrap {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .canopy-cmdk__input {
+    width: 100%;
+    padding: 8px 10px;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    outline: none;
+  }
+
+  .canopy-cmdk__list {
+    max-height: 50vh;
+    overflow: auto;
+    padding: 6px 0;
+  }
+
+  .canopy-cmdk__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .canopy-cmdk__thumb {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+}
+

package/ui/styles/components/index.scss

@@ -0,0 +1,5 @@
+// Components bundle. Provide variables to all components, then import each partial.
+@use '../variables' as *;
+
+@use './card';
+@use './command';

package/ui/styles/index.css

@@ -0,0 +1,127 @@
+/* Canopy Card component styles */
+.canopy-card {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  border: 1px solid rgb(230, 231, 234); /* slate-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 {
+  margin: 0;
+}
+.canopy-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 {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  opacity: 0;
+  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.canopy-card[data-image-loaded=true] .canopy-card-media > img {
+  opacity: 1;
+}
+.canopy-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 {
+  opacity: 1;
+}
+.canopy-card figcaption {
+  padding: 1rem;
+}
+.canopy-card figcaption > span:first-child {
+  display: block;
+}
+.canopy-card figcaption > span + span {
+  display: block;
+}
+.canopy-card:hover, .canopy-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-cmdk .canopy-cmdk__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #e5e7eb;
+  color: #374151;
+  background: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.canopy-cmdk .canopy-cmdk__overlay {
+  position: fixed;
+  inset: 0;
+  display: none;
+  align-items: flex-start;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 9999;
+  padding-top: 10vh;
+}
+.canopy-cmdk .canopy-cmdk__panel {
+  position: relative;
+  background: #fff;
+  min-width: 320px;
+  max-width: 720px;
+  width: 90%;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
+}
+.canopy-cmdk .canopy-cmdk__close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  border-radius: 6px;
+  padding: 2px 6px;
+  cursor: pointer;
+}
+.canopy-cmdk .canopy-cmdk__inputWrap {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e7eb;
+}
+.canopy-cmdk .canopy-cmdk__input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  outline: none;
+}
+.canopy-cmdk .canopy-cmdk__list {
+  max-height: 50vh;
+  overflow: auto;
+  padding: 6px 0;
+}
+.canopy-cmdk .canopy-cmdk__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.canopy-cmdk .canopy-cmdk__thumb {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+}

package/ui/styles/index.scss

@@ -0,0 +1,3 @@
+// UI styles entry (optional). Import the components bundle.
+@use './components/index';
+

package/ui/styles/variables.emit.scss

@@ -0,0 +1,72 @@
+@use "./variables" as *;
+
+:root {
+  --color-brand-50: #{$color-brand-50};
+  --color-brand-100: #{$color-brand-100};
+  --color-brand-200: #{$color-brand-200};
+  --color-brand-300: #{$color-brand-300};
+  --color-brand-400: #{$color-brand-400};
+  --color-brand-500: #{$color-brand-500};
+  --color-brand-600: #{$color-brand-600};
+  --color-brand-700: #{$color-brand-700};
+  --color-brand-800: #{$color-brand-800};
+  --color-brand-900: #{$color-brand-900};
+  --color-brand-default: #{$color-brand-default};
+
+  --color-gray-50: #{$color-gray-50};
+  --color-gray-100: #{$color-gray-100};
+  --color-gray-200: #{$color-gray-200};
+  --color-gray-300: #{$color-gray-300};
+  --color-gray-400: #{$color-gray-400};
+  --color-gray-500: #{$color-gray-500};
+  --color-gray-600: #{$color-gray-600};
+  --color-gray-700: #{$color-gray-700};
+  --color-gray-800: #{$color-gray-800};
+  --color-gray-900: #{$color-gray-900};
+  --color-gray-default: #{$color-gray-default};
+  --color-gray-muted: #{$color-gray-muted};
+
+  // Clover IIIF specific color roles
+  --colors-accent: #{$color-brand-default} !important;
+  --colors-accentAlt: #{$color-brand-800} !important;
+  --colors-accentMuted: #{$color-brand-400} !important;
+  --colors-primary: #{$color-gray-default} !important;
+  --colors-primaryAlt: #{$color-gray-default} !important;
+  --colors-primaryMuted: #{$color-gray-default} !important;
+  --colors-secondary: #{$color-gray-50} !important;
+  --colors-secondaryAlt: #{$color-gray-50} !important;
+  --colors-secondaryMuted: #{$color-gray-50} !important;
+
+  --font-sans: #{$font-sans} !important;
+  --font-mono: #{$font-mono} !important;
+
+  --font-size-xs: #{$font-size-xs} !important;
+  --line-height-xs: #{$line-height-xs} !important;
+  --font-size-sm: #{$font-size-sm} !important;
+  --line-height-sm: #{$line-height-sm} !important;
+  --font-size-base: #{$font-size-base} !important;
+  --line-height-base: #{$line-height-base} !important;
+  --font-size-lg: #{$font-size-lg} !important;
+  --line-height-lg: #{$line-height-lg} !important;
+  --font-size-xl: #{$font-size-xl} !important;
+  --line-height-xl: #{$line-height-xl} !important;
+  --font-size-2xl: #{$font-size-2xl} !important;
+  --line-height-2xl: #{$line-height-2xl} !important;
+  --font-size-3xl: #{$font-size-3xl} !important;
+  --line-height-3xl: #{$line-height-3xl} !important;
+
+  --radius-sm: #{$radius-sm} !important;
+  --radius-default: #{$radius-default} !important;
+  --radius-md: #{$radius-md} !important;
+
+  --max-w-content: #{$max-w-content} !important;
+  --max-w-wide: #{$max-w-wide} !important;
+
+  --shadow-sm: #{$shadow-sm} !important;
+  --shadow: #{$shadow} !important;
+  --shadow-md: #{$shadow-md} !important;
+  --shadow-lg: #{$shadow-lg} !important;
+
+  --duration-fast: #{$duration-fast} !important;
+  --easing-standard: #{$easing-standard} !important;
+}

package/ui/styles/variables.scss

@@ -0,0 +1,66 @@
+// Sass variables (source of truth) and CSS variables (emitted) for Canopy UI.
+
+// Brand scale
+$color-brand-50: #fdfdfe !default;
+$color-brand-100: #edf2fe !default;
+$color-brand-200: #d2deff !default;
+$color-brand-300: #abbdf9 !default;
+$color-brand-400: #8da4ef !default;
+$color-brand-500: #3e63dd !default;
+$color-brand-600: #3358d4 !default;
+$color-brand-700: #2c4bbd !default;
+$color-brand-800: #243c94 !default;
+$color-brand-900: #1f2d5c !default;
+$color-brand-default: $color-brand-600 !default;
+
+$color-gray-50: #fcfcfd !default;
+$color-gray-100: #f0f0f3 !default;
+$color-gray-200: #e0e1e6 !default;
+$color-gray-300: #cdced6 !default;
+$color-gray-400: #b9bbc6 !default;
+$color-gray-500: #8b8d98 !default;
+$color-gray-600: #80838d !default;
+$color-gray-700: #60646c !default;
+$color-gray-800: #1c2024 !default;
+$color-gray-900: #121418 !default;
+$color-gray-default: $color-gray-900 !default;
+$color-gray-muted: $color-gray-600 !default;
+
+// Fonts
+$font-sans: "system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif" !default;
+$font-mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" !default;
+
+// Font sizes / line heights
+$font-size-xs: 0.75rem !default;
+$line-height-xs: 1rem !default;
+$font-size-sm: 0.875rem !default;
+$line-height-sm: 1.25rem !default;
+$font-size-base: 1rem !default;
+$line-height-base: 1.5rem !default;
+$font-size-lg: 1.125rem !default;
+$line-height-lg: 1.75rem !default;
+$font-size-xl: 1.25rem !default;
+$line-height-xl: 1.75rem !default;
+$font-size-2xl: 1.5rem !default;
+$line-height-2xl: 2rem !default;
+$font-size-3xl: 1.875rem !default;
+$line-height-3xl: 2.25rem !default;
+
+// Radii
+$radius-sm: 0.125rem !default;
+$radius-default: 0.25rem !default;
+$radius-md: 0.375rem !default;
+
+// Max widths
+$max-w-content: 1200px !default;
+$max-w-wide: 1440px !default;
+
+// Shadows
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05) !default;
+$shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !default;
+$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !default;
+$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05) !default;
+
+// Transitions
+$duration-fast: 150ms !default;
+$easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1) !default;

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

@@ -0,0 +1,35 @@
+/**
+ * Canopy IIIF Tailwind plugin
+ *
+ * Provides semantic component styles for Canopy UI elements.
+ * Users can disable these defaults by removing this plugin from
+ * their Tailwind config.
+ */
+const plugin = require("tailwindcss/plugin");
+const fs = require("fs");
+const path = require("path");
+
+function compileScss(filePath) {
+  try {
+    const sass = require("sass");
+    const out = sass.compile(filePath, { style: "expanded" });
+    return out && out.css ? out.css : "";
+  } catch (e) {
+    // No CSS fallback; if compilation fails, skip with an empty string.
+    try { console.warn("Canopy UI: failed to compile", filePath, e && e.message ? e.message : e); } catch (_) {}
+    return "";
+  }
+}
+
+module.exports = plugin(function ({ addComponents, postcss }) {
+  try {
+    const entry = path.join(__dirname, 'styles', 'components', 'index.scss');
+    const css = compileScss(entry);
+    if (css && css.trim()) {
+      const root = postcss && postcss.parse ? postcss.parse(css) : null;
+      if (root) addComponents(root);
+    }
+  } catch (_) {
+    // no-op on failure
+  }
+});

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

@@ -0,0 +1,105 @@
+/**
+ * canopy-iiif-preset
+ *
+ * A Tailwind preset that sources design tokens (colors, fonts, sizes, etc.)
+ * from Sass under packages/ui/styles, injects them as CSS variables, and maps
+ * Tailwind theme.extend values to those variables for easy use in utilities.
+ */
+const plugin = require("tailwindcss/plugin");
+const fs = require("fs");
+const path = require("path");
+
+function compileVarsCss() {
+  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)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        mono: ["var(--font-mono)"],
+      },
+      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)",
+      },
+      maxWidth: { content: "var(--max-w-content)", wide: "var(--max-w-wide)" },
+      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 }) {
+      const css = compileVarsCss();
+      if (css && postcss && postcss.parse) addBase(postcss.parse(css));
+    }),
+  ],
+};