@canopy-iiif/app 0.9.14 → 0.10.0

package/ui/tailwind-config.js

@@ -0,0 +1,134 @@
+const path = require("node:path");
+const {fileURLToPath} = require("node:url");
+
+const canopyPreset = require("./tailwind-canopy-iiif-preset.js");
+const canopyPlugin = require("./tailwind-canopy-iiif-plugin.js");
+
+const DEFAULT_SAFELIST = ["canopy-footer", "canopy-footer__inner"];
+const canopyUiDist = path.join(__dirname, "dist");
+const canopyLibRoot = path.join(__dirname, "..");
+
+const toArray = (value) => {
+  if (!value && value !== 0) return [];
+  return Array.isArray(value) ? value : [value];
+};
+
+const normalizeGlob = (filepath) => filepath.replace(/\\+/g, "/");
+
+const mergeTheme = (baseTheme = {}, overrideTheme = {}) => {
+  if (!overrideTheme || typeof overrideTheme !== "object") return baseTheme;
+  const result = {...baseTheme, ...overrideTheme};
+  if (baseTheme.extend || overrideTheme.extend) {
+    result.extend = {
+      ...(baseTheme.extend || {}),
+      ...(overrideTheme.extend || {}),
+    };
+  }
+  return result;
+};
+
+const resolveProjectRoot = (metaUrl, explicitRoot) => {
+  if (explicitRoot) return path.resolve(explicitRoot);
+  if (metaUrl) {
+    const href = typeof metaUrl === "string" ? metaUrl : metaUrl.href;
+    if (href) {
+      const fromUrl = fileURLToPath(href);
+      return path.join(path.dirname(fromUrl), "..", "..");
+    }
+  }
+  return process.cwd();
+};
+
+const buildBaseContent = (root, includeCanopySources = true) => {
+  const content = [
+    normalizeGlob(path.join(root, "content/**/*.{mdx,html}")),
+    normalizeGlob(path.join(root, "app/**/*.{js,ts,jsx,tsx}")),
+  ];
+
+  if (includeCanopySources) {
+    content.push(
+      normalizeGlob(path.join(canopyUiDist, "**/*.{js,mjs,jsx,tsx}")),
+      normalizeGlob(path.join(canopyLibRoot, "iiif/components/**/*.{js,jsx}"))
+    );
+  }
+
+  return content;
+};
+
+const isUrlLike = (value) => {
+  if (!value) return false;
+  if (typeof value === "string") return true;
+  return typeof value.href === "string" && typeof value.protocol === "string";
+};
+
+function defineCanopyTailwindConfig(metaUrlOrOptions, maybeOptions) {
+  const hasMetaArgument = isUrlLike(metaUrlOrOptions);
+  const metaUrl = hasMetaArgument ? metaUrlOrOptions : undefined;
+  const options = (hasMetaArgument ? maybeOptions : metaUrlOrOptions) || {};
+
+  const {
+    root,
+    content,
+    presets,
+    plugins,
+    safelist,
+    theme,
+    includeCanopyPreset = true,
+    includeCanopyPlugin = true,
+    includeCanopySafelist = true,
+    includeCanopySources = true,
+    ...rest
+  } = options;
+
+  const projectRoot = resolveProjectRoot(metaUrl, root);
+  const baseContent = buildBaseContent(projectRoot, includeCanopySources);
+  const basePresets = includeCanopyPreset ? [canopyPreset] : [];
+  const basePlugins = includeCanopyPlugin ? [canopyPlugin] : [];
+  const baseSafelist = includeCanopySafelist ? DEFAULT_SAFELIST.slice() : [];
+
+  const config = {
+    content: baseContent.slice(),
+    safelist: baseSafelist.slice(),
+    theme: {extend: {}},
+    ...rest,
+  };
+
+  if (content !== undefined) {
+    config.content = baseContent.concat(toArray(content));
+  }
+
+  if (presets !== undefined) {
+    if (presets === false) {
+      config.presets = [];
+    } else {
+      config.presets = toArray(presets);
+    }
+  } else if (includeCanopyPreset) {
+    config.presets = basePresets.slice();
+  }
+
+  if (plugins !== undefined) {
+    if (plugins === false) {
+      config.plugins = [];
+    } else {
+      config.plugins = toArray(plugins);
+    }
+  } else if (includeCanopyPlugin) {
+    config.plugins = basePlugins.slice();
+  }
+
+  if (safelist !== undefined) {
+    config.safelist =
+      safelist === false ? [] : baseSafelist.concat(toArray(safelist));
+  }
+
+  if (theme) {
+    config.theme = mergeTheme(config.theme, theme);
+  }
+
+  return config;
+}
+
+module.exports = defineCanopyTailwindConfig;
+module.exports.defineCanopyTailwindConfig = defineCanopyTailwindConfig;
+module.exports.default = defineCanopyTailwindConfig;

package/ui/tailwind-default.config.mjs

@@ -0,0 +1,3 @@
+import defineCanopyTailwindConfig from './tailwind-config.js';
+
+export default defineCanopyTailwindConfig(import.meta.url);

package/ui/theme.js

@@ -56,7 +56,7 @@ const LEVELS = [
   "900",
 ];
 const STEP_MAP = {
-  50: 2,
+  50: 1,
   100: 3,
   200: 4,
   300: 6,
@@ -183,7 +183,7 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
       const value = brandScale[lvl];
       if (value) vars[`--color-brand-${lvl}`] = value;
     }
-    if (brandScale["600"]) vars["--color-brand-default"] = brandScale["600"];
+    if (brandScale["700"]) vars["--color-brand-default"] = brandScale["700"];
   }
   if (grayScale) {
     for (const lvl of LEVELS) {
@@ -194,8 +194,8 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
     if (grayScale["600"]) vars["--color-gray-muted"] = grayScale["600"];
   }
   if (brandScale && grayScale) {
-    if (brandScale["600"])
-      vars["--colors-accent"] = `${brandScale["600"]} !important`;
+    if (brandScale["700"])
+      vars["--colors-accent"] = `${brandScale["700"]} !important`;
     if (brandScale["800"])
       vars["--colors-accentAlt"] = `${brandScale["800"]} !important`;
     if (brandScale["400"])

package/ui/styles/_variables.scss

@@ -1 +0,0 @@
-$max-w-content: 1080px !default;