@canopy-iiif/app 0.8.4 → 0.8.6

package/ui/theme.js

@@ -0,0 +1,303 @@
+const fs = require("fs");
+const path = require("path");
+const yaml = require("js-yaml");
+const radixColors = require("@radix-ui/colors");
+
+const DEFAULT_ACCENT = "indigo";
+const DEFAULT_GRAY = "slate";
+const DEFAULT_APPEARANCE = "light";
+const DEBUG_FLAG_RAW = String(process.env.CANOPY_DEBUG_THEME || "");
+const DEBUG_ENABLED = /^(1|true|yes|on)$/i.test(DEBUG_FLAG_RAW.trim());
+const SASS_STYLES_DIR = path.join(__dirname, "styles");
+const SASS_VARIABLES_ENTRY = path.join(SASS_STYLES_DIR, "_variables.scss");
+
+function debugLog(...args) {
+  if (!DEBUG_ENABLED) return;
+  try {
+    console.log("[canopy-theme]", ...args);
+  } catch (_) {}
+}
+
+function loadSassVariableTokens() {
+  try {
+    if (!fs.existsSync(SASS_VARIABLES_ENTRY)) return {map: {}, css: ""};
+    const sass = require("sass");
+    const source = `@use 'sass:meta';\n@use 'sass:string';\n@use 'variables';\n$__canopy_tokens: meta.module-variables('variables');\n@function canopy-token-name($name) {\n  $identifier: #{$name};\n  @if $identifier == null or $identifier == '' {\n    @return null;\n  }\n  @if string.slice($identifier, 1, 1) == '_' {\n    @return null;\n  }\n  @return '--#{$identifier}';\n}\n@mixin canopy-emit-tokens() {\n  @each $name, $value in $__canopy_tokens {\n    $css-name: canopy-token-name($name);\n    @if $css-name {\n      #{$css-name}: #{meta.inspect($value)};\n    }\n  }\n}\n:root {\n  @include canopy-emit-tokens();\n}\n:host {\n  @include canopy-emit-tokens();\n}\n`;
+    const result = sass.compileString(source, {
+      loadPaths: [SASS_STYLES_DIR],
+      style: "expanded",
+    });
+    const css = (result && result.css ? result.css : "").trim();
+    const vars = {};
+    const regex = /--([A-Za-z0-9_-]+)\s*:\s*([^;]+);/g;
+    let match;
+    while ((match = regex.exec(css))) {
+      vars[`--${match[1]}`] = match[2].trim();
+    }
+    return {map: vars, css};
+  } catch (error) {
+    debugLog("failed to compile Sass variables", error && error.message ? error.message : error);
+    return {map: {}, css: ""};
+  }
+}
+const LEVELS = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+];
+const STEP_MAP = {
+  50: 1,
+  100: 3,
+  200: 5,
+  300: 7,
+  400: 8,
+  500: 9,
+  600: 10,
+  700: 11,
+  800: 12,
+  900: 12,
+};
+
+const AVAILABLE = new Set(
+  Object.keys(radixColors).filter(
+    (key) =>
+      /^[a-z]+$/.test(key) && radixColors[key] && radixColors[key][`${key}1`]
+  )
+);
+
+const APPEARANCES = new Set(["light", "dark"]);
+
+function readYamlConfig(cfgPath) {
+  try {
+    if (!cfgPath) return {};
+    if (!fs.existsSync(cfgPath)) {
+      debugLog("config not found; falling back to defaults", cfgPath);
+      return {};
+    }
+    const raw = fs.readFileSync(cfgPath, "utf8");
+    const data = yaml.load(raw) || {};
+    debugLog("loaded config", cfgPath);
+    return data;
+  } catch (_) {
+    return {};
+  }
+}
+
+function normalizePaletteName(raw) {
+  if (!raw) return "";
+  const cleaned = String(raw).trim().toLowerCase();
+  const compact = cleaned.replace(/[^a-z]/g, "");
+  return AVAILABLE.has(compact) ? compact : "";
+}
+
+function normalizeAppearance(raw) {
+  if (!raw) return DEFAULT_APPEARANCE;
+  const cleaned = String(raw).trim().toLowerCase();
+  return APPEARANCES.has(cleaned) ? cleaned : DEFAULT_APPEARANCE;
+}
+
+function resolveRadixPalette(name, appearance) {
+  if (!name || !AVAILABLE.has(name)) return null;
+  const paletteKey = appearance === "dark" ? `${name}Dark` : name;
+  const palette = radixColors[paletteKey];
+  if (palette && palette[`${name}1`]) return palette;
+  const fallback = radixColors[name];
+  return fallback && fallback[`${name}1`] ? fallback : null;
+}
+
+function darkenHex(hex, amount = 0.15) {
+  if (!hex) return hex;
+  const normalized = hex.replace("#", "");
+  if (!/^[0-9a-fA-F]{6}$/.test(normalized)) return hex;
+  const num = parseInt(normalized, 16);
+  const r = (num >> 16) & 255;
+  const g = (num >> 8) & 255;
+  const b = num & 255;
+  const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
+  const toHex = (value) => clamp(value).toString(16).padStart(2, "0");
+  const factor = 1 - amount;
+  return `#${toHex(r * factor)}${toHex(g * factor)}${toHex(b * factor)}`;
+}
+
+function toTailwindScale(name, options = {}) {
+  if (!name || !AVAILABLE.has(name)) return null;
+  const appearance = normalizeAppearance(options.appearance);
+  const palette = resolveRadixPalette(name, appearance);
+  if (!palette) return null;
+  const prefix = name;
+  const scale = {};
+  for (const lvl of LEVELS) {
+    const radixStep = STEP_MAP[lvl];
+    const key = `${prefix}${radixStep}`;
+    const value = palette[key];
+    if (!value) return null;
+    scale[lvl] = value;
+  }
+  const darkestKey = `${prefix}${STEP_MAP["900"]}`;
+  if (scale["800"] && palette[darkestKey]) {
+    scale["900"] = darkenHex(palette[darkestKey], 0.15);
+  }
+  return scale;
+}
+
+function buildVariablesMap(brandScale, grayScale, options = {}) {
+  const appearance = normalizeAppearance(options.appearance);
+  const vars = {};
+  if (brandScale) {
+    for (const lvl of LEVELS) {
+      const value = brandScale[lvl];
+      if (value) vars[`--color-brand-${lvl}`] = value;
+    }
+    if (brandScale["600"]) vars["--color-brand-default"] = brandScale["600"];
+  }
+  if (grayScale) {
+    for (const lvl of LEVELS) {
+      const value = grayScale[lvl];
+      if (value) vars[`--color-gray-${lvl}`] = value;
+    }
+    if (grayScale["900"]) vars["--color-gray-default"] = grayScale["900"];
+    if (grayScale["600"]) vars["--color-gray-muted"] = grayScale["600"];
+  }
+  if (brandScale && grayScale) {
+    if (brandScale["600"])
+      vars["--colors-accent"] = `${brandScale["600"]} !important`;
+    if (brandScale["800"])
+      vars["--colors-accentAlt"] = `${brandScale["800"]} !important`;
+    if (brandScale["400"])
+      vars["--colors-accentMuted"] = `${brandScale["400"]} !important`;
+    if (grayScale["900"]) {
+      const primary = `${grayScale["900"]} !important`;
+      vars["--colors-primary"] = primary;
+      vars["--colors-primaryAlt"] = primary;
+      vars["--colors-primaryMuted"] = primary;
+    }
+    if (grayScale["50"]) {
+      const secondary = `${grayScale["50"]} !important`;
+      vars["--colors-secondary"] = secondary;
+      vars["--colors-secondaryAlt"] = secondary;
+      vars["--colors-secondaryMuted"] = secondary;
+    }
+  }
+  vars["color-scheme"] = appearance === "dark" ? "dark" : "light";
+  return vars;
+}
+
+function variablesToCss(vars) {
+  const entries = Object.entries(vars || {});
+  if (!entries.length) return "";
+  const body = entries
+    .map(([prop, value]) => `  ${prop}: ${value};`)
+    .join("\n");
+  return `@layer properties {\n  :root {\n${body}\n  }\n  :host {\n${body}\n  }\n}`;
+}
+
+function buildSassConfig(brandScale, grayScale) {
+  return "";
+}
+
+function loadCanopyTheme(options = {}) {
+  const cwd = options.cwd || process.cwd();
+  const cfgPath =
+    options.configPath ||
+    path.resolve(cwd, process.env.CANOPY_CONFIG || "canopy.yml");
+  const cfg = readYamlConfig(cfgPath);
+  const theme = (cfg && cfg.theme) || {};
+  const accentRequested = theme && theme.accentColor;
+  const grayRequested = theme && theme.grayColor;
+  const appearanceRequested = theme && theme.appearance;
+  const appearance = normalizeAppearance(appearanceRequested);
+
+  let accentName = normalizePaletteName(accentRequested);
+  let accentScale = accentName
+    ? toTailwindScale(accentName, {appearance})
+    : null;
+  let accentFallback = false;
+  if (!accentScale) {
+    accentFallback = true;
+    accentName = DEFAULT_ACCENT;
+    accentScale = toTailwindScale(DEFAULT_ACCENT, {appearance});
+  }
+
+  let grayName = normalizePaletteName(grayRequested);
+  let grayScale = grayName ? toTailwindScale(grayName, {appearance}) : null;
+  let grayFallback = false;
+  if (!grayScale) {
+    grayFallback = true;
+    grayName = DEFAULT_GRAY;
+    grayScale = toTailwindScale(DEFAULT_GRAY, {appearance});
+  }
+
+  const sassTokens = loadSassVariableTokens();
+  const dynamicVars = buildVariablesMap(accentScale, grayScale, {appearance});
+  const mergedVars = {...(sassTokens && sassTokens.map ? sassTokens.map : {}), ...dynamicVars};
+  const css = variablesToCss(mergedVars);
+  const sassConfig = buildSassConfig(accentScale, grayScale);
+
+  debugLog("resolved theme", {
+    configPath: cfgPath,
+    requested: {
+      accent: accentRequested || null,
+      gray: grayRequested || null,
+      appearance: appearanceRequested || null,
+    },
+    resolved: {
+      appearance,
+      accent: accentName,
+      gray: grayName,
+      accentFallback,
+      grayFallback,
+      brandSamples: accentScale
+        ? {
+            50: accentScale["50"],
+            500: accentScale["500"],
+            900: accentScale["900"],
+          }
+        : null,
+      graySamples: grayScale
+        ? {50: grayScale["50"], 500: grayScale["500"], 900: grayScale["900"]}
+        : null,
+    },
+  });
+
+  if (
+    !DEBUG_ENABLED &&
+    (accentName !== DEFAULT_ACCENT || grayName !== DEFAULT_GRAY)
+  ) {
+    try {
+      console.log("[canopy-theme]", "resolved", {
+        appearance,
+        accent: accentName,
+        accent500: accentScale && accentScale["500"],
+        gray: grayName,
+        gray500: grayScale && grayScale["500"],
+      });
+    } catch (_) {}
+  }
+
+  return {
+    appearance,
+    accent: {name: accentName, scale: accentScale},
+    gray: {name: grayName, scale: grayScale},
+    variables: mergedVars,
+    css,
+    sassConfig,
+  };
+}
+
+module.exports = {
+  loadCanopyTheme,
+  toTailwindScale,
+  normalizePaletteName,
+  normalizeAppearance,
+  AVAILABLE_PALETTES: Array.from(AVAILABLE).sort(),
+  __DEBUG_ENABLED: DEBUG_ENABLED,
+  variablesToCss,
+  buildSassConfig,
+};

package/ui/styles/variables.emit.scss

@@ -1,72 +0,0 @@
-@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

@@ -1,76 +0,0 @@
-// 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:
-  "DM Sans", "-apple-system", "Segoe UI", Roboto, Ubuntu, Helvetica, Arial,
-  sans-serif !default;
-$font-serif: "DM Serif Display", Georgia, "Times New Roman", 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;