@canopy-iiif/app 0.10.11 → 0.10.13

package/lib/build/dev.js

@@ -9,7 +9,7 @@ const {
   ASSETS_DIR,
   ensureDirSync,
 } = require("../common");
-function resolveTailwindCli() {
+  function resolveTailwindCli() {
   const bin = path.join(
     process.cwd(),
     "node_modules",
@@ -40,6 +40,14 @@ const HAS_APP_WORKSPACE = (() => {
     return false;
   }
 })();
+
+function stripTailwindThemeLayer(targetPath) {
+  try {
+    const raw = fs.readFileSync(targetPath, "utf8");
+    const cleaned = raw.replace(/@layer theme\{[\s\S]*?\}(?=@layer|$)/g, "");
+    if (cleaned !== raw) fs.writeFileSync(targetPath, cleaned, "utf8");
+  } catch (_) {}
+}
 let pendingModuleReload = false;
 let building = false;
 let buildAgain = false;
@@ -896,6 +904,7 @@ async function dev() {
       }
       throw new Error("[tailwind] Initial Tailwind build failed.");
     }
+    stripTailwindThemeLayer(outputCss);
     console.log(
       `[tailwind] initial build ok (${fileSizeKb(outputCss)} KB) →`,
       prettyPath(outputCss)
@@ -920,6 +929,7 @@ async function dev() {
       cssWatcherAttached = true;
       try {
         fs.watch(outputCss, { persistent: false }, () => {
+          stripTailwindThemeLayer(outputCss);
           if (!unmuted) {
             unmuted = true;
             console.log(
@@ -946,6 +956,7 @@ async function dev() {
         }
         throw new Error("[tailwind] On-demand Tailwind compile failed.");
       }
+      stripTailwindThemeLayer(outputCss);
       console.log(
         `[tailwind] compiled (${fileSizeKb(outputCss)} KB) →`,
         prettyPath(outputCss)

package/lib/build/iiif.js

@@ -50,6 +50,7 @@ const HERO_IMAGE_SIZES_ATTR = "(min-width: 1024px) 1280px, 100vw";
 const OG_IMAGE_WIDTH = 1200;
 const OG_IMAGE_HEIGHT = 630;
 const HERO_REPRESENTATIVE_SIZE = Math.max(HERO_THUMBNAIL_SIZE, OG_IMAGE_WIDTH);
+const MAX_ENTRY_SLUG_LENGTH = 50;
 
 function resolvePositiveInteger(value, fallback) {
   const num = Number(value);
@@ -65,6 +66,64 @@ function resolveBoolean(value) {
   return normalized === "1" || normalized === "true" || normalized === "yes";
 }
 
+function normalizeCollectionUris(value) {
+  if (value === undefined || value === null) return [];
+  const rawValues = Array.isArray(value) ? value : [value];
+  const seen = new Set();
+  const uris = [];
+  for (const entry of rawValues) {
+    if (typeof entry !== "string") continue;
+    const trimmed = entry.trim();
+    if (!trimmed || seen.has(trimmed)) continue;
+    seen.add(trimmed);
+    uris.push(trimmed);
+  }
+  return uris;
+}
+
+function clampSlugLength(slug, limit = MAX_ENTRY_SLUG_LENGTH) {
+  if (!slug) return "";
+  const max = Math.max(1, limit);
+  if (slug.length <= max) return slug;
+  const slice = slug.slice(0, max);
+  const trimmed = slice.replace(/-+$/g, "");
+  return trimmed || slice || slug.slice(0, 1);
+}
+
+function isSlugTooLong(value) {
+  return typeof value === "string" && value.length > MAX_ENTRY_SLUG_LENGTH;
+}
+
+function normalizeSlugBase(value, fallback) {
+  const safeFallback = fallback || "entry";
+  const base = typeof value === "string" ? value : String(value || "");
+  const clamped = clampSlugLength(base, MAX_ENTRY_SLUG_LENGTH);
+  if (clamped) return clamped;
+  return clampSlugLength(safeFallback, MAX_ENTRY_SLUG_LENGTH) || safeFallback;
+}
+
+function buildSlugWithSuffix(base, fallback, counter) {
+  const suffix = `-${counter}`;
+  const baseLimit = Math.max(1, MAX_ENTRY_SLUG_LENGTH - suffix.length);
+  const trimmedBase =
+    clampSlugLength(base, baseLimit) ||
+    clampSlugLength(fallback, baseLimit) ||
+    fallback.slice(0, baseLimit);
+  return `${trimmedBase}${suffix}`;
+}
+
+function normalizeStringList(value) {
+  if (value === undefined || value === null) return [];
+  const rawValues = Array.isArray(value) ? value : [value];
+  return rawValues
+    .map((entry) => {
+      if (typeof entry === "string") return entry.trim();
+      if (entry === undefined || entry === null) return "";
+      return String(entry).trim();
+    })
+    .filter(Boolean);
+}
+
 function resolveThumbnailPreferences() {
   return {
     size: resolvePositiveInteger(
@@ -537,13 +596,15 @@ const RESERVED_SLUGS = {Manifest: new Set(), Collection: new Set()};
 function computeUniqueSlug(index, baseSlug, id, type) {
   const byId = Array.isArray(index && index.byId) ? index.byId : [];
   const normId = normalizeIiifId(String(id || ""));
+  const fallbackBase = type === "Manifest" ? "untitled" : "collection";
+  const normalizedBase = normalizeSlugBase(baseSlug || fallbackBase, fallbackBase);
   const used = new Set(
     byId
       .filter((e) => e && e.slug && e.type === type)
       .map((e) => String(e.slug))
   );
   const reserved = RESERVED_SLUGS[type] || new Set();
-  let slug = baseSlug || (type === "Manifest" ? "untitled" : "collection");
+  let slug = normalizedBase;
   let i = 1;
   for (;;) {
     const existing = byId.find(
@@ -560,7 +621,7 @@ function computeUniqueSlug(index, baseSlug, id, type) {
       reserved.add(slug);
       return slug;
     }
-    slug = `${baseSlug}-${i++}`;
+    slug = buildSlugWithSuffix(normalizedBase, fallbackBase, i++);
   }
 }
 
@@ -568,18 +629,20 @@ function ensureBaseSlugFor(index, baseSlug, id, type) {
   try {
     const byId = Array.isArray(index && index.byId) ? index.byId : [];
     const normId = normalizeIiifId(String(id || ""));
+    const fallbackBase = type === "Manifest" ? "untitled" : "collection";
+    const normalizedBase = normalizeSlugBase(baseSlug || fallbackBase, fallbackBase);
     const existingWithBase = byId.find(
-      (e) => e && e.type === type && String(e.slug) === String(baseSlug)
+      (e) => e && e.type === type && String(e.slug) === String(normalizedBase)
     );
     if (existingWithBase && normalizeIiifId(existingWithBase.id) !== normId) {
       // Reassign the existing entry to the next available suffix to free the base
       const newSlug = computeUniqueSlug(
         index,
-        baseSlug,
+        normalizedBase,
         existingWithBase.id,
         type
       );
-      if (newSlug && newSlug !== baseSlug) existingWithBase.slug = newSlug;
+      if (newSlug && newSlug !== normalizedBase) existingWithBase.slug = newSlug;
     }
   } catch (_) {}
   return baseSlug;
@@ -620,13 +683,15 @@ async function loadCachedManifestById(id) {
       );
       slug = entry && entry.slug;
     }
+    if (isSlugTooLong(slug)) slug = null;
     if (!slug) {
       // Try an on-disk scan to recover mapping if index is missing/out-of-sync
       const memo = MEMO_ID_TO_SLUG.get(String(id));
       if (memo) slug = memo;
+      if (isSlugTooLong(slug)) slug = null;
       if (!slug) {
         const found = await findSlugByIdFromDisk(id);
-        if (found) {
+        if (found && !isSlugTooLong(found)) {
           slug = found;
           MEMO_ID_TO_SLUG.set(String(id), slug);
           try {
@@ -830,6 +895,7 @@ async function loadCachedCollectionById(id) {
       );
       slug = entry && entry.slug;
     }
+    if (isSlugTooLong(slug)) slug = null;
     if (!slug) {
       // Scan collections dir if mapping missing
       try {
@@ -845,7 +911,12 @@ async function loadCachedCollectionById(id) {
                 String((obj && (obj.id || obj["@id"])) || "")
               );
               if (cid && cid === normalizeIiifId(String(id))) {
-                slug = name.replace(/\.json$/i, "");
+                const candidate = name.replace(/\.json$/i, "");
+                if (isSlugTooLong(candidate)) {
+                  slug = null;
+                  break;
+                }
+                slug = candidate;
                 // heal mapping
                 try {
                   index.byId = Array.isArray(index.byId) ? index.byId : [];
@@ -1052,9 +1123,13 @@ async function loadConfig() {
 async function buildIiifCollectionPages(CONFIG) {
   const cfg = CONFIG || (await loadConfig());
 
-  const collectionUri =
-    (cfg && cfg.collection) || process.env.CANOPY_COLLECTION_URI || "";
-  if (!collectionUri) return {searchRecords: []};
+  let collectionUris = normalizeCollectionUris(cfg && cfg.collection);
+  if (!collectionUris.length) {
+    collectionUris = normalizeCollectionUris(
+      process.env.CANOPY_COLLECTION_URI || ""
+    );
+  }
+  if (!collectionUris.length) return {searchRecords: []};
 
   const searchIndexCfg = (cfg && cfg.search && cfg.search.index) || {};
   const metadataCfg = (searchIndexCfg && searchIndexCfg.metadata) || {};
@@ -1093,38 +1168,15 @@ async function buildIiifCollectionPages(CONFIG) {
     enabled: summaryEnabled,
   };
   const annotationMotivations = new Set(
-    Array.isArray(annotationsCfg && annotationsCfg.motivation)
-      ? annotationsCfg.motivation
-          .map((m) =>
-            String(m || "")
-              .trim()
-              .toLowerCase()
-          )
-          .filter(Boolean)
-      : []
+    normalizeStringList(annotationsCfg && annotationsCfg.motivation).map((m) =>
+      m.toLowerCase()
+    )
   );
   const annotationsOptions = {
     enabled: annotationsEnabled,
     motivations: annotationMotivations,
   };
 
-  // Fetch top-level collection
-  logLine("• Traversing IIIF Collection(s)", "blue", {dim: true});
-  const root = await readJsonFromUri(collectionUri, {log: true});
-  if (!root) {
-    logLine("IIIF: Failed to fetch collection", "red");
-    return {searchRecords: []};
-  }
-  const normalizedRoot = await normalizeToV3(root);
-  // Save collection cache
-  try {
-    await saveCachedCollection(
-      normalizedRoot,
-      normalizedRoot.id || collectionUri,
-      ""
-    );
-  } catch (_) {}
-
   // Recursively traverse Collections and gather all Manifest tasks
   const tasks = [];
   const visitedCollections = new Set(); // normalized ids
@@ -1179,7 +1231,27 @@ async function buildIiifCollectionPages(CONFIG) {
       // Traverse strictly by parent/child hierarchy (Presentation 3): items → Manifest or Collection
     } catch (_) {}
   }
-  await gatherFromCollection(normalizedRoot, "");
+  // Fetch each configured collection and queue manifests from all of them
+  logLine("• Traversing IIIF Collection(s)", "blue", {dim: true});
+  for (const uri of collectionUris) {
+    let root = null;
+    try {
+      root = await readJsonFromUri(uri, {log: true});
+    } catch (_) {
+      root = null;
+    }
+    if (!root) {
+      try {
+        logLine(`IIIF: Failed to fetch collection → ${uri}`, "red");
+      } catch (_) {}
+      continue;
+    }
+    const normalizedRoot = await normalizeToV3(root);
+    try {
+      await saveCachedCollection(normalizedRoot, normalizedRoot.id || uri, "");
+    } catch (_) {}
+    await gatherFromCollection(normalizedRoot, "");
+  }
   if (!tasks.length) return {searchRecords: []};
 
   // Split into chunks and process with limited concurrency
@@ -1322,6 +1394,7 @@ async function buildIiifCollectionPages(CONFIG) {
           (e) => e && e.type === "Manifest" && normalizeIiifId(e.id) === nid
         );
         let slug = mEntry && mEntry.slug;
+        if (isSlugTooLong(slug)) slug = null;
         if (!slug) {
           slug = computeUniqueSlug(idxMap, baseSlug, nid, "Manifest");
           const parentNorm = normalizeIiifId(String(it.parent || ""));

package/lib/build/search.js

@@ -1,6 +1,14 @@
 const { fs, fsp, path, OUT_DIR, ensureDirSync, absoluteUrl } = require('../common');
 const slugify = require('slugify');
 
+function normalizeMetadataLabel(label) {
+  if (typeof label !== 'string') return '';
+  return label
+    .trim()
+    .replace(/[:\s]+$/g, '')
+    .toLowerCase();
+}
+
 function firstI18nString(x) {
   if (!x) return '';
   if (typeof x === 'string') return x;
@@ -17,7 +25,11 @@ async function buildFacetsForWorks(combined, labelWhitelist) {
   const facetsDir = path.resolve('.cache/iiif');
   ensureDirSync(facetsDir);
   const map = new Map(); // label -> Map(value -> Set(docIdx))
-  const labels = Array.isArray(labelWhitelist) ? labelWhitelist.map(String) : [];
+  const normalizedLabels = new Set(
+    (Array.isArray(labelWhitelist) ? labelWhitelist : [])
+      .map((label) => normalizeMetadataLabel(String(label || '')))
+      .filter(Boolean)
+  );
   if (!Array.isArray(combined)) combined = [];
   for (let i = 0; i < combined.length; i++) {
     const rec = combined[i];
@@ -37,7 +49,12 @@ async function buildFacetsForWorks(combined, labelWhitelist) {
       const label = firstI18nString(entry.label);
       const valueRaw = entry.value && (typeof entry.value === 'string' ? entry.value : firstI18nString(entry.value));
       if (!label || !valueRaw) continue;
-      if (labels.length && !labels.includes(label)) continue; // only configured labels
+      if (
+        normalizedLabels.size &&
+        !normalizedLabels.has(normalizeMetadataLabel(label))
+      ) {
+        continue; // only configured labels
+      }
       const values = [];
       try {
         if (typeof entry.value === 'string') values.push(entry.value);
@@ -79,11 +96,19 @@ async function writeFacetCollections(labelWhitelist, combined) {
   if (!fs.existsSync(facetsPath)) return;
   let facets = [];
   try { facets = JSON.parse(fs.readFileSync(facetsPath, 'utf8')) || []; } catch (_) { facets = []; }
-  const labels = new Set((Array.isArray(labelWhitelist) ? labelWhitelist : []).map(String));
+  const normalizedLabels = new Set(
+    (Array.isArray(labelWhitelist) ? labelWhitelist : [])
+      .map((label) => normalizeMetadataLabel(String(label || '')))
+      .filter(Boolean)
+  );
   const apiRoot = path.join(OUT_DIR, 'api');
   const facetRoot = path.join(apiRoot, 'facet');
   ensureDirSync(facetRoot);
-  const list = (Array.isArray(facets) ? facets : []).filter((f) => !labels.size || labels.has(String(f && f.label)));
+  const list = (Array.isArray(facets) ? facets : []).filter((f) => {
+    if (!normalizedLabels.size) return true;
+    const normalized = normalizeMetadataLabel(String((f && f.label) || ''));
+    return normalized ? normalizedLabels.has(normalized) : false;
+  });
   const labelIndexItems = [];
   for (const f of list) {
     if (!f || !f.label || !Array.isArray(f.values)) continue;

package/lib/build/styles.js

@@ -143,6 +143,14 @@ async function ensureStyles() {
     } catch (_) {}
   }
 
+  function stripTailwindThemeLayer(targetPath) {
+    try {
+      const raw = fs.readFileSync(targetPath, "utf8");
+      const cleaned = raw.replace(/@layer theme\{[\s\S]*?\}(?=@layer|$)/g, "");
+      if (cleaned !== raw) fs.writeFileSync(targetPath, cleaned, "utf8");
+    } catch (_) {}
+  }
+
   const shouldInjectTheme = !(hasAppCss && configPath);
 
   if (configPath && (inputCss || generatedInput)) {
@@ -154,6 +162,7 @@ async function ensureStyles() {
     });
     if (ok) {
       if (shouldInjectTheme) injectThemeTokens(dest);
+      stripTailwindThemeLayer(dest);
       return; // Tailwind compiled CSS
     }
   }
@@ -170,6 +179,7 @@ async function ensureStyles() {
     if (!isTailwindSource(customAppCss)) {
       await fsp.copyFile(customAppCss, dest);
       if (shouldInjectTheme) injectThemeTokens(dest);
+      stripTailwindThemeLayer(dest);
       return;
     }
   }
@@ -177,6 +187,7 @@ async function ensureStyles() {
     if (!isTailwindSource(customContentCss)) {
       await fsp.copyFile(customContentCss, dest);
       if (shouldInjectTheme) injectThemeTokens(dest);
+      stripTailwindThemeLayer(dest);
       return;
     }
   }
@@ -184,6 +195,7 @@ async function ensureStyles() {
   const css = `:root{--max-w:760px;--muted:#6b7280}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;max-width:var(--max-w);margin:2rem auto;padding:0 1rem;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 0;border-bottom:1px solid #e5e7eb}.site-footer{border-bottom:0;border-top:1px solid #e5e7eb;color:var(--muted)}.brand{font-weight:600}.content pre{background:#f6f8fa;padding:1rem;overflow:auto}.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f6f8fa;padding:.1rem .3rem;border-radius:4px}.tabs{display:flex;gap:.5rem;align-items:center;border-bottom:1px solid #e5e7eb;margin:.5rem 0}.tab{background:none;border:0;color:#374151;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer}.tab:hover{color:#111827}.tab-active{color:#2563eb;border:1px solid #e5e7eb;border-bottom:0;background:#fff}.masonry{column-gap:1rem;column-count:1}@media(min-width:768px){.masonry{column-count:2}}@media(min-width:1024px){.masonry{column-count:3}}.masonry>*{break-inside:avoid;margin-bottom:1rem;display:block}[data-grid-variant=masonry]{column-gap:var(--grid-gap,1rem);column-count:var(--cols-base,1)}@media(min-width:768px){[data-grid-variant=masonry]{column-count:var(--cols-md,2)}}@media(min-width:1024px){[data-grid-variant=masonry]{column-count:var(--cols-lg,3)}}[data-grid-variant=masonry]>*{break-inside:avoid;margin-bottom:var(--grid-gap,1rem);display:block}[data-grid-variant=grid]{display:grid;grid-template-columns:repeat(var(--cols-base,1),minmax(0,1fr));gap:var(--grid-gap,1rem)}@media(min-width:768px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))}}@media(min-width:1024px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-lg,3),minmax(0,1fr))}}`;
   await fsp.writeFile(dest, css, "utf8");
   injectThemeTokens(dest);
+  stripTailwindThemeLayer(dest);
 }
 
 module.exports = { ensureStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.10.11",
+  "version": "0.10.13",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",
@@ -12,6 +12,7 @@
     "./ui": "./ui/dist/index.mjs",
     "./ui/server": "./ui/dist/server.mjs",
     "./ui/styles/index.css": "./ui/styles/index.css",
+    "./ui/styles/runtime.css": "./ui/styles/runtime.css",
     "./ui/canopy-iiif-plugin": "./ui/tailwind-canopy-iiif-plugin.js",
     "./ui/canopy-iiif-preset": "./ui/tailwind-canopy-iiif-preset.js",
     "./ui/tailwind-config": {

package/ui/styles/index.css

@@ -1,74 +1,74 @@
 /* canopy-theme */
 @layer properties {
   :root {
-  --color-brand-50: #fdfdfe;
-  --color-brand-100: #edf2fe;
-  --color-brand-200: #e1e9ff;
-  --color-brand-300: #c1d0ff;
-  --color-brand-400: #abbdf9;
-  --color-brand-500: #8da4ef;
-  --color-brand-600: #3e63dd;
-  --color-brand-700: #3358d4;
-  --color-brand-800: #3a5bc7;
-  --color-brand-900: #172245;
-  --color-brand-default: #3358d4;
-  --color-gray-50: #fcfcfd;
-  --color-gray-100: #f0f0f3;
-  --color-gray-200: #e8e8ec;
-  --color-gray-300: #d9d9e0;
-  --color-gray-400: #cdced6;
-  --color-gray-500: #b9bbc6;
-  --color-gray-600: #8b8d98;
-  --color-gray-700: #80838d;
-  --color-gray-800: #60646c;
-  --color-gray-900: #111316;
-  --color-gray-default: #111316;
-  --color-gray-muted: #8b8d98;
-  --colors-accent: #3358d4 !important;
-  --colors-accentAlt: #3a5bc7 !important;
-  --colors-accentMuted: #abbdf9 !important;
-  --colors-primary: #111316 !important;
-  --colors-primaryAlt: #111316 !important;
-  --colors-primaryMuted: #111316 !important;
-  --colors-secondary: #fcfcfd !important;
-  --colors-secondaryAlt: #fcfcfd !important;
-  --colors-secondaryMuted: #fcfcfd !important;
-  color-scheme: light;
+  --color-brand-50: #191111;
+  --color-brand-100: #3b1219;
+  --color-brand-200: #500f1c;
+  --color-brand-300: #72232d;
+  --color-brand-400: #8c333a;
+  --color-brand-500: #b54548;
+  --color-brand-600: #e5484d;
+  --color-brand-700: #ec5d5e;
+  --color-brand-800: #ff9592;
+  --color-brand-900: #ffdde3;
+  --color-brand-default: #ec5d5e;
+  --color-gray-50: #111111;
+  --color-gray-100: #222222;
+  --color-gray-200: #2a2a2a;
+  --color-gray-300: #3a3a3a;
+  --color-gray-400: #484848;
+  --color-gray-500: #606060;
+  --color-gray-600: #6e6e6e;
+  --color-gray-700: #7b7b7b;
+  --color-gray-800: #b4b4b4;
+  --color-gray-900: #f5f5f5;
+  --color-gray-default: #f5f5f5;
+  --color-gray-muted: #6e6e6e;
+  --colors-accent: #ec5d5e !important;
+  --colors-accentAlt: #ff9592 !important;
+  --colors-accentMuted: #8c333a !important;
+  --colors-primary: #f5f5f5 !important;
+  --colors-primaryAlt: #f5f5f5 !important;
+  --colors-primaryMuted: #f5f5f5 !important;
+  --colors-secondary: #111111 !important;
+  --colors-secondaryAlt: #111111 !important;
+  --colors-secondaryMuted: #111111 !important;
+  color-scheme: dark;
   }
   :host {
-  --color-brand-50: #fdfdfe;
-  --color-brand-100: #edf2fe;
-  --color-brand-200: #e1e9ff;
-  --color-brand-300: #c1d0ff;
-  --color-brand-400: #abbdf9;
-  --color-brand-500: #8da4ef;
-  --color-brand-600: #3e63dd;
-  --color-brand-700: #3358d4;
-  --color-brand-800: #3a5bc7;
-  --color-brand-900: #172245;
-  --color-brand-default: #3358d4;
-  --color-gray-50: #fcfcfd;
-  --color-gray-100: #f0f0f3;
-  --color-gray-200: #e8e8ec;
-  --color-gray-300: #d9d9e0;
-  --color-gray-400: #cdced6;
-  --color-gray-500: #b9bbc6;
-  --color-gray-600: #8b8d98;
-  --color-gray-700: #80838d;
-  --color-gray-800: #60646c;
-  --color-gray-900: #111316;
-  --color-gray-default: #111316;
-  --color-gray-muted: #8b8d98;
-  --colors-accent: #3358d4 !important;
-  --colors-accentAlt: #3a5bc7 !important;
-  --colors-accentMuted: #abbdf9 !important;
-  --colors-primary: #111316 !important;
-  --colors-primaryAlt: #111316 !important;
-  --colors-primaryMuted: #111316 !important;
-  --colors-secondary: #fcfcfd !important;
-  --colors-secondaryAlt: #fcfcfd !important;
-  --colors-secondaryMuted: #fcfcfd !important;
-  color-scheme: light;
+  --color-brand-50: #191111;
+  --color-brand-100: #3b1219;
+  --color-brand-200: #500f1c;
+  --color-brand-300: #72232d;
+  --color-brand-400: #8c333a;
+  --color-brand-500: #b54548;
+  --color-brand-600: #e5484d;
+  --color-brand-700: #ec5d5e;
+  --color-brand-800: #ff9592;
+  --color-brand-900: #ffdde3;
+  --color-brand-default: #ec5d5e;
+  --color-gray-50: #111111;
+  --color-gray-100: #222222;
+  --color-gray-200: #2a2a2a;
+  --color-gray-300: #3a3a3a;
+  --color-gray-400: #484848;
+  --color-gray-500: #606060;
+  --color-gray-600: #6e6e6e;
+  --color-gray-700: #7b7b7b;
+  --color-gray-800: #b4b4b4;
+  --color-gray-900: #f5f5f5;
+  --color-gray-default: #f5f5f5;
+  --color-gray-muted: #6e6e6e;
+  --colors-accent: #ec5d5e !important;
+  --colors-accentAlt: #ff9592 !important;
+  --colors-accentMuted: #8c333a !important;
+  --colors-primary: #f5f5f5 !important;
+  --colors-primaryAlt: #f5f5f5 !important;
+  --colors-primaryMuted: #f5f5f5 !important;
+  --colors-secondary: #111111 !important;
+  --colors-secondaryAlt: #111111 !important;
+  --colors-secondaryMuted: #111111 !important;
+  color-scheme: dark;
   }
 }
 /* canopy-theme:end */
@@ -1712,5 +1712,4 @@
 
 /**
  * Define source files for utility classes
- */
-@source "../dist";
+ */

package/ui/styles/index.scss

@@ -7,4 +7,4 @@
 /**
  * Define source files for utility classes
  */
-@source "../dist";
+// @source "../dist";

package/ui/tailwind-config.js

@@ -130,6 +130,8 @@ function defineCanopyTailwindConfig(metaUrlOrOptions, maybeOptions) {
     config.theme = mergeTheme(config.theme, theme);
   }
 
+  config.theme = mergeTheme(config.theme, {colors: {}});
+
   return config;
 }
 

package/ui/theme.js

@@ -130,14 +130,15 @@ function toTailwindScale(name, options = {}) {
   const prefix = name;
   const scale = {};
   const darken900Amount = normalizeDarkenAmount(options.darken900Amount);
+  const steps = STEP_MAP;
   for (const lvl of LEVELS) {
-    const radixStep = STEP_MAP[lvl];
+    const radixStep = steps[lvl];
     const key = `${prefix}${radixStep}`;
     const value = palette[key];
     if (!value) return null;
     scale[lvl] = value;
   }
-  const darkestKey = `${prefix}${STEP_MAP["900"]}`;
+  const darkestKey = `${prefix}${steps["900"]}`;
   if (scale["800"] && palette[darkestKey]) {
     const amount = darken900Amount != null ? darken900Amount : 0.25;
     scale["900"] =